feat(HorizontalCell): rename prop header to title (#7698)

* feat(HorizontalCell): rename prop header to title

* feat(HorizontalCell): add codemod

packages/codemods/src/transforms/v7/__testfixtures__/horizontal-cell/basic.input.tsx

@@ -0,0 +1,26 @@
+import { HorizontalCell, Image } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <HorizontalCell
+        header="Title"
+        subtitle="Subtitle"
+        extraSubtitle="Extra Subtitle"
+        size="m"
+      >
+        <Image size={88} borderRadius="l" />
+      </HorizontalCell>
+
+      <HorizontalCell
+        header={'Title'}
+        subtitle="Subtitle"
+        extraSubtitle="Extra Subtitle"
+        size="m"
+      >
+        <Image size={88} borderRadius="l" />
+      </HorizontalCell>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/horizontal-cell.ts.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`horizontal-cell transforms correctly 1`] = `
+"import { HorizontalCell, Image } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <HorizontalCell
+        title="Title"
+        subtitle="Subtitle"
+        extraSubtitle="Extra Subtitle"
+        size="m"
+      >
+        <Image size={88} borderRadius="l" />
+      </HorizontalCell>
+      <HorizontalCell
+        title={'Title'}
+        subtitle="Subtitle"
+        extraSubtitle="Extra Subtitle"
+        size="m"
+      >
+        <Image size={88} borderRadius="l" />
+      </HorizontalCell>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/horizontal-cell.ts

@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'horizontal-cell';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});

packages/codemods/src/transforms/v7/horizontal-cell.ts

@@ -0,0 +1,18 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'HorizontalCell', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { header: 'title' });
+  }
+
+  return source.toSource();
+}

packages/vkui/src/components/HorizontalCell/HorizontalCell.e2e-playground.tsx

@@ -20,23 +20,23 @@ export const HorizontalCellPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          header: ['Header'],
+          title: ['Title'],
           subtitle: ['Just subtitle'],
           extraSubtitle: ['Some extra subtitle'],
         },
         {
-          header: ['Very long title example'],
+          title: ['Very long title example'],
         },
       ]}
     >
-      {({ header, subtitle, extraSubtitle, ...restProps }: HorizontalCellProps) => (
+      {({ title, subtitle, extraSubtitle, ...restProps }: HorizontalCellProps) => (
         <div style={containerStyle}>
-          <HorizontalCell {...restProps} header={header} size="s">
+          <HorizontalCell {...restProps} title={title} size="s">
             <Avatar size={56} />
           </HorizontalCell>
           <HorizontalCell
             {...restProps}
-            header={header}
+            title={title}
             subtitle={subtitle}
             extraSubtitle={extraSubtitle}
             size="m"
@@ -45,7 +45,7 @@ export const HorizontalCellPlayground = (props: ComponentPlaygroundProps) => {
           </HorizontalCell>
           <HorizontalCell
             {...restProps}
-            header={header}
+            title={title}
             subtitle={subtitle}
             extraSubtitle={extraSubtitle}
             size="l"

packages/vkui/src/components/HorizontalCell/HorizontalCell.stories.tsx

@@ -36,7 +36,7 @@ export const Playground: Story = {
       <>
         {values.map((value) => {
           return (
-            <HorizontalCell key={value.id} header={value.title} {...args}>
+            <HorizontalCell key={value.id} title={value.title} {...args}>
               <Image size={platform === 'ios' ? 64 : 56} borderRadius="l" src={value.icon} />
             </HorizontalCell>
           );

packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx

@@ -17,7 +17,7 @@ describe('HorizontalCell', () => {
     expect(document.querySelector(`.${styles.content}`)).toBeNull();
 
     rerender(
-      <HorizontalCell size="s" header="Author name">
+      <HorizontalCell size="s" title="Author name">
         <div>Children data</div>
       </HorizontalCell>,
     );

packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx

@@ -27,14 +27,14 @@ const CellTypography = ({ size, children, ...restProps }: CellTypographyProps) =
 };
 
 export interface HorizontalCellProps
-  extends Omit<TappableProps, 'size' | 'getRootRef'>,
+  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title'>,
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLDivElement> {
   size?: 's' | 'm' | 'l';
   /**
    * Заголовок
    */
-  header?: React.ReactNode;
+  title?: React.ReactNode;
   /**
    * Дополнительная строка текста под `children`.
    */
@@ -50,7 +50,7 @@ export interface HorizontalCellProps
  */
 export const HorizontalCell = ({
   className,
-  header,
+  title,
   style,
   subtitle,
   size = 's',
@@ -68,9 +68,9 @@ export const HorizontalCell = ({
     >
       <Tappable className={styles.body} getRootRef={getRef} {...restProps}>
         {hasReactNode(children) && <div className={styles.image}>{children}</div>}
-        {(header || subtitle || extraSubtitle) && (
+        {(title || subtitle || extraSubtitle) && (
           <div className={styles.content}>
-            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}
+            {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}
             {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}
             {hasReactNode(extraSubtitle) && (
               <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>

packages/vkui/src/components/HorizontalCell/Readme.md

@@ -16,7 +16,7 @@ const largeImageStyles = {
 
 const UserItems = () => {
   return getRandomUsers(15).map((user) => (
-    <HorizontalCell onClick={() => {}} key={user.id} size="s" header={user.first_name}>
+    <HorizontalCell onClick={() => {}} key={user.id} size="s" title={user.first_name}>
       <Avatar size={56} src={user.photo_100} />
     </HorizontalCell>
   ));
@@ -47,7 +47,7 @@ const miniApps = [
 
 const MiniAppItems = () => {
   return miniApps.map(({ id, title, icon_139 }) => (
-    <HorizontalCell onClick={() => {}} key={id} size="s" header={title}>
+    <HorizontalCell onClick={() => {}} key={id} size="s" title={title}>
       <Image size={56} borderRadius="m" src={icon_139} />
     </HorizontalCell>
   ));
@@ -73,7 +73,7 @@ const gamesItems = [
 
 const GamesItems = () => {
   return gamesItems.map(({ id, title, icon_139 }) => (
-    <HorizontalCell onClick={() => {}} key={id} size="m" header={title}>
+    <HorizontalCell onClick={() => {}} key={id} size="m" title={title}>
       <Image size={88} borderRadius="l" src={icon_139} />
     </HorizontalCell>
   ));
@@ -102,7 +102,7 @@ const playlistItems = [
 
 const PlaylistItems = () => {
   return playlistItems.map(({ id, title, description, photo_300 }) => (
-    <HorizontalCell onClick={() => {}} key={id} size="l" header={title} subtitle={description}>
+    <HorizontalCell onClick={() => {}} key={id} size="l" title={title} subtitle={description}>
       <Image size={128} src={photo_300} />
     </HorizontalCell>
   ));
@@ -135,7 +135,7 @@ const AlbumItems = () => {
       onClick={() => {}}
       key={id}
       size="l"
-      header={title}
+      title={title}
       subtitle={`${size} фотографии`}
     >
       <img style={largeImageStyles} src={thumb_src} />

packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.e2e-playground.tsx

@@ -48,7 +48,7 @@ function AlbumItems({ height = 124 }: { height?: number }) {
   return (
     <>
       {albumItems.map(({ id, title, size }) => (
-        <HorizontalCell key={id} size="l" header={title} subtitle={`${size} фотографии`}>
+        <HorizontalCell key={id} size="l" title={title} subtitle={`${size} фотографии`}>
           <Avatar size={height} />
         </HorizontalCell>
       ))}
@@ -57,7 +57,7 @@ function AlbumItems({ height = 124 }: { height?: number }) {
 }
 
 const smallCells = new Array(3).fill(0).map((_, i) => (
-  <HorizontalCell key={i} header={`item ${i + 1}`}>
+  <HorizontalCell key={i} title={`item ${i + 1}`}>
     <Avatar size={56} />
   </HorizontalCell>
 ));

packages/vkui/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.stories.tsx

@@ -80,7 +80,7 @@ export const Playground: Story = {
         <Group>
           <HorizontalScroll>
             {CELL_ITEMS.map((element) => (
-              <HorizontalCell key={element.id} size={args.size} header={element.title}>
+              <HorizontalCell key={element.id} size={args.size} title={element.title}>
                 <Avatar size={cellImageSize} src={element.icon} alt={`avatar: ${element.title}`} />
               </HorizontalCell>
             ))}

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx

@@ -9,7 +9,7 @@ import { HorizontalCell } from '../HorizontalCell/HorizontalCell';
 import { HorizontalScroll, type HorizontalScrollProps } from './HorizontalScroll';
 
 const items = new Array(20).fill(0).map((_, i) => (
-  <HorizontalCell key={i} header={`item ${i}`} onClick={noop}>
+  <HorizontalCell key={i} title={`item ${i}`} onClick={noop}>
     <Avatar size={56} />
   </HorizontalCell>
 ));

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx

@@ -57,7 +57,7 @@ export const Playground: Story = {
           <React.Fragment>
             {commonFriends.map((item) => {
               return (
-                <HorizontalCell key={item.id} header={item.first_name}>
+                <HorizontalCell key={item.id} title={item.first_name}>
                   <Avatar size={56} src={item.photo_200} />
                 </HorizontalCell>
               );

packages/vkui/src/components/View/View.stories.tsx

@@ -78,7 +78,7 @@ const ProfilePanelContent = ({
       >
         <HorizontalScroll>
           {getRandomUsers(15).map((user) => (
-            <HorizontalCell key={user.id} size="s" header={user.first_name}>
+            <HorizontalCell key={user.id} size="s" title={user.first_name}>
               <Avatar size={56} src={user.photo_100} />
             </HorizontalCell>
           ))}

packages/vkui/src/components/View/View.test.tsx

@@ -307,7 +307,7 @@ describe(View, () => {
               <HorizontalCell
                 key={user.id}
                 size="s"
-                header={user.first_name}
+                title={user.first_name}
                 data-testid={`horizontal-cell-${index}`}
               >
                 <Avatar size={56} src={user.photo_100} />

packages/vkui/src/components/View/ViewInfinite.test.tsx

@@ -292,7 +292,7 @@ describe(ViewInfinite, () => {
               <HorizontalCell
                 key={user.id}
                 size="s"
-                header={user.first_name}
+                title={user.first_name}
                 data-testid={`horizontal-cell-${index}`}
               >
                 <Avatar size={56} src={user.photo_100} />