feat(Header): rm mode prop and increase size values (#7863)

* feat(Header): rm mode prop and increase size values * fix(Header): fix docs and tests
VKCOM · Oct 30, 2024 · 50960ea · 50960ea
1 parent 1d765fd
commit 50960ea
Show file tree

Hide file tree

Showing 52 changed files with 366 additions and 282 deletions.
diff --git a/README.md b/README.md
@@ -69,7 +69,7 @@ const Example = () => {
           <View activePanel="main">
             <Panel id="main">
               <PanelHeader>VKUI</PanelHeader>
-              <Group header={<Header mode="secondary">Items</Header>}>
+              <Group header={<Header size="s">Items</Header>}>
                 <SimpleCell>Hello</SimpleCell>
                 <SimpleCell>World</SimpleCell>
               </Group>

diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx
@@ -12,16 +12,15 @@ const App = () => {
   return (
     <React.Fragment>
       {/* Проверка изменения size */}
-      <Header mode="primary" multiline size="large">
+      <Header multiline size="large">
         Кто может писать мне личные сообщения
       </Header>
-      <Header mode="secondary" multiline size="regular">
+      <Header multiline size="regular">
         Кто может писать мне личные сообщения
       </Header>
 
       {/* Проверка замены aside на after */}
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         aside={
@@ -32,11 +31,49 @@ const App = () => {
         }
       />
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         aside={aside}
       />
+
+      {/* Проверка удаления mode */}
+      {/* замена Large Primary на xl */}
+      <Header
+        mode="primary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+
+      {/* замена Large tertiary на m */}
+      <Header
+        mode="tertiary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular tertiary на m */}
+      <Header
+        mode="tertiary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular primary на m */}
+      <Header
+        mode="primary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Large secondary на m */}
+      <Header
+        mode="secondary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular secondary на s */}
+      <Header
+        mode="secondary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
@@ -15,15 +15,14 @@ const App = () => {
   return (
     (<React.Fragment>
       {/* Проверка изменения size */}
-      <Header mode="primary" multiline size="l">
+      <Header multiline size="l">
         Кто может писать мне личные сообщения
       </Header>
-      <Header mode="secondary" multiline size="m">
+      <Header multiline size="m">
         Кто может писать мне личные сообщения
       </Header>
       {/* Проверка замены aside на after */}
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         after={
@@ -34,11 +33,23 @@ const App = () => {
         }
       />
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         after={aside}
       />
+      {/* Проверка удаления mode */}
+      {/* замена Large Primary на xl */}
+      <Header size="xl" subtitle="SOHN — Conrad" />
+      {/* замена Large tertiary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Regular tertiary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Regular primary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Large secondary на m */}
+      <Header size="s" subtitle="SOHN — Conrad" />
+      {/* замена Regular secondary на s */}
+      <Header size="s" subtitle="SOHN — Conrad" />
     </React.Fragment>)
   );
 };"

diff --git a/packages/codemods/src/transforms/v7/header.ts b/packages/codemods/src/transforms/v7/header.ts
@@ -1,10 +1,92 @@
-import { API, FileInfo } from 'jscodeshift';
+import {
+  API,
+  Collection,
+  FileInfo,
+  JSCodeshift,
+  JSXAttribute,
+  JSXSpreadAttribute,
+} from 'jscodeshift';
+import { report } from '../../report';
 import { remapSizePropValue } from './common/remapSizePropValue';
-import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { getImportInfo, removeAttribute, renameProp } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
 
 export const parser = 'tsx';
 
+function removePropMode(j: JSCodeshift, api: API, source: Collection, localName: string) {
+  const getValueFromAttribute = (attr: JSXAttribute): string | null => {
+    if (attr.value?.type === 'StringLiteral') {
+      return attr.value.value;
+    }
+    if (attr.value?.type === 'JSXExpressionContainer') {
+      const expression = attr.value.expression;
+      if (expression.type === 'StringLiteral') {
+        return expression.value;
+      }
+    }
+    return null;
+  };
+
+  const changeAttributeValue = (
+    attributes: Array<JSXAttribute | JSXSpreadAttribute> | undefined,
+    attribute: JSXAttribute | undefined,
+    attrName: string,
+    newValue: string,
+  ) => {
+    if (attribute) {
+      attribute.value = j.stringLiteral(newValue);
+    } else {
+      attributes?.push(j.jsxAttribute(j.jsxIdentifier(attrName), j.stringLiteral(newValue)));
+    }
+  };
+
+  source
+    .find(j.JSXOpeningElement, {
+      name: {
+        name: localName,
+      },
+    })
+    .forEach((path) => {
+      const attributes = path.node.attributes;
+      const modeAttr =
+        (attributes?.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'mode',
+        ) as JSXAttribute) || undefined;
+      const sizeAttr =
+        (attributes?.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'size',
+        ) as JSXAttribute) || undefined;
+      const hasSpread = !!attributes?.some((attr) => attr.type === 'JSXSpreadAttribute');
+      if (!modeAttr) {
+        if (hasSpread) {
+          report(
+            api,
+            `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`,
+          );
+        }
+        return;
+      }
+      removeAttribute(attributes, modeAttr);
+      const modeValue = getValueFromAttribute(modeAttr);
+      if (!modeValue) {
+        report(
+          api,
+          `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`,
+        );
+        return;
+      }
+      const sizeValue = getValueFromAttribute(sizeAttr);
+
+      if (modeValue === 'primary' && sizeValue === 'l') {
+        changeAttributeValue(attributes, sizeAttr, 'size', 'xl');
+      } else if (modeValue === 'tertiary' || (modeValue === 'primary' && sizeValue === 'm')) {
+        changeAttributeValue(attributes, sizeAttr, 'size', 'm');
+      } else if (modeValue === 'secondary') {
+        changeAttributeValue(attributes, sizeAttr, 'size', 's');
+      }
+    });
+}
+
 export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
   const { alias } = options;
   const j = api.jscodeshift;
@@ -27,5 +109,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   renameProp(j, source, localName, { aside: 'after' });
 
+  removePropMode(j, api, source, localName);
+
   return source.toSource();
 }
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
@@ -10,7 +10,7 @@
 ```jsx
 const Default = () => {
   return (
-    <Group header={<Header mode="secondary">По умолчанию</Header>}>
+    <Group header={<Header size="s">По умолчанию</Header>}>
       <SimpleCell before={<Avatar src={getAvatarUrl('user_id34')} />}>Татьяна Плуталова</SimpleCell>
     </Group>
   );
@@ -19,7 +19,7 @@ const Default = () => {
 const Fallbacks = () => {
   return (
     <Group
-      header={<Header mode="secondary">Фолбеки</Header>}
+      header={<Header size="s">Фолбеки</Header>}
       description="На случаи если аватарка не загрузилась или она отсутсвует"
     >
       <SimpleCell
@@ -48,7 +48,7 @@ const OthersFeatures = () => {
   const [overlay, setOverlay] = React.useState();
 
   return (
-    <Group header={<Header mode="secondary">Другие возможности</Header>}>
+    <Group header={<Header size="s">Другие возможности</Header>}>
       <AvatarPropsForm
         onUseInisitals={setUseInisitals}
         onGradientColorChange={setGradientColorChange}

diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md
@@ -13,7 +13,7 @@ const Example = () => {
       <Panel id="badge">
         <PanelHeader>Бейдж</PanelHeader>
 
-        <Group header={<Header mode="secondary">В пунктах меню</Header>}>
+        <Group header={<Header size="s">В пунктах меню</Header>}>
           <Cell
             chevron
             before={<Icon28Notifications />}
@@ -24,7 +24,7 @@ const Example = () => {
           </Cell>
         </Group>
 
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs>
             <TabsItem
               selected={tab === 'dialogs'}

diff --git a/packages/vkui/src/components/Card/Readme.md b/packages/vkui/src/components/Card/Readme.md
@@ -8,21 +8,21 @@
   <Panel id="card">
     <PanelHeader>Card</PanelHeader>
     <Group>
-      <Group mode="plain" header={<Header mode="secondary">Дефолтный стиль</Header>}>
+      <Group mode="plain" header={<Header size="s">Дефолтный стиль</Header>}>
         <CardGrid size="l">
           <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внутренней обводкой</Header>}>
+      <Group mode="plain" header={<Header size="s">С внутренней обводкой</Header>}>
         <CardGrid size="l">
           <Card mode="outline">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внешней тенью</Header>}>
+      <Group mode="plain" header={<Header size="s">С внешней тенью</Header>}>
         <CardGrid size="l">
           <Card mode="shadow">
             <div style={{ height: 96 }} />
@@ -31,7 +31,7 @@
       </Group>
       <Group
         mode="plain"
-        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+        header={<Header size="s">С внутренней обводкой и дефолтным фоном</Header>}
       >
         <CardGrid size="l">
           <Card mode="outline-tint">

diff --git a/packages/vkui/src/components/CellButton/Readme.md b/packages/vkui/src/components/CellButton/Readme.md
@@ -2,21 +2,21 @@
 <View activePanel="button">
   <Panel id="button">
     <PanelHeader>CellButton</PanelHeader>
-    <Group header={<Header mode="secondary">Базовый пример</Header>}>
+    <Group header={<Header size="s">Базовый пример</Header>}>
       <CellButton onClick={() => {}}>Добавить новую школу</CellButton>
       <CellButton onClick={() => {}} appearance="negative">
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Иконки</Header>}>
+    <Group header={<Header size="s">Иконки</Header>}>
       <CellButton onClick={() => {}} before={<Icon28AddOutline />}>
         Добавить родственника
       </CellButton>
       <CellButton onClick={() => {}} before={<Icon28DeleteOutline />} appearance="negative">
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Аватарки</Header>}>
+    <Group header={<Header size="s">Аватарки</Header>}>
       <CellButton
         onClick={() => {}}
         before={
@@ -48,7 +48,7 @@
         Создать плейлист
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Центрирование</Header>}>
+    <Group header={<Header size="s">Центрирование</Header>}>
       <CellButton onClick={() => {}} centered before={<Icon24Add />}>
         Создать беседу
       </CellButton>

diff --git a/packages/vkui/src/components/Counter/Readme.md b/packages/vkui/src/components/Counter/Readme.md
@@ -14,7 +14,7 @@ const Example = () => {
     <View activePanel="counter-demo">
       <Panel id="counter-demo">
         <PanelHeader>Counter</PanelHeader>
-        <Group header={<Header mode="secondary">Счётчики в ячейках</Header>}>
+        <Group header={<Header size="s">Счётчики в ячейках</Header>}>
           <List>
             <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>
               Друзья
@@ -40,7 +40,7 @@ const Example = () => {
             </Cell>
           </List>
         </Group>
-        <Group header={<Header mode="secondary">Счётчики в кнопках</Header>}>
+        <Group header={<Header size="s">Счётчики в кнопках</Header>}>
           <FormItem>
             <Button mode="secondary" size="m" after={<Counter>16</Counter>}>
               Secondary medium
@@ -85,7 +85,7 @@ const Example = () => {
           <Cell before={<Avatar />}>Виктор Пелевин</Cell>
           <Cell before={<Avatar />}>Михаил Зыгарь</Cell>
         </Group>
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs mode="buttons">
             <HorizontalScroll>
               <TabsItem

diff --git a/packages/vkui/src/components/CustomScrollView/Readme.md b/packages/vkui/src/components/CustomScrollView/Readme.md
@@ -50,10 +50,10 @@ const Example = () => {
     <View activePanel="customScrollView">
       <Panel id="customScrollView">
         <PanelHeader>CustomScrollView</PanelHeader>
-        <Group header={<Header mode="secondary">Вертикальный скролл</Header>}>
+        <Group header={<Header size="s">Вертикальный скролл</Header>}>
           <WithVerticalScroll />
         </Group>
-        <Group header={<Header mode="secondary">Горизонтальный скролл</Header>}>
+        <Group header={<Header size="s">Горизонтальный скролл</Header>}>
           <WithHorizontalScroll />
         </Group>
       </Panel>