feat(SimpleCell, MiniInfoCell, SubnavigationButton): rename expandabl…

…e prop to chevron (#7787)

* feat(SimpleCell,MiniInfoCell): rename expandable to chevron

* feat(SubnavigationButton): rename expandable to chevron

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

@@ -0,0 +1,24 @@
+import { Cell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Cell
+        onClick={() => {}}
+        expandable="auto"
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
+
+      <Cell
+        onClick={() => {}}
+        expandable="always"
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { Icon20WorkOutline, MiniInfoCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <MiniInfoCell
+        before={<Icon20WorkOutline />}
+        mode="add"
+        onClick={() => console.log('Указать место учёбы')}
+        textWrap="short"
+        expandable
+      >
+        Укажите место учёбы
+      </MiniInfoCell>
+
+      <MiniInfoCell
+        before={<Icon20WorkOutline />}
+        mode="add"
+        onClick={() => console.log('Указать место учёбы')}
+        textWrap="short"
+        expandable={false}
+      >
+        Укажите место учёбы
+      </MiniInfoCell>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { SimpleCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <SimpleCell
+        onClick={() => {}}
+        expandable="auto"
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
+
+      <SimpleCell
+        onClick={() => {}}
+        expandable="always"
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__testfixtures__/subnavigation-button/basic.input.tsx

@@ -0,0 +1,16 @@
+import { SubnavigationButton } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <SubnavigationButton
+        expandable={true}
+        selected={true}
+        onClick={() => {}}
+      >
+        Button
+      </SubnavigationButton>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cell transforms correctly 1`] = `
+"import { Cell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Cell
+        onClick={() => {}}
+        chevron="auto"
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
+      <Cell
+        onClick={() => {}}
+        chevron="always"
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
+    </React.Fragment>)
+  );
+};"
+`;

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mini-info-cell transforms correctly 1`] = `
+"import { Icon20WorkOutline, MiniInfoCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <MiniInfoCell
+        before={<Icon20WorkOutline />}
+        mode="add"
+        onClick={() => console.log('Указать место учёбы')}
+        textWrap="short"
+        chevron
+      >
+        Укажите место учёбы
+      </MiniInfoCell>
+      <MiniInfoCell
+        before={<Icon20WorkOutline />}
+        mode="add"
+        onClick={() => console.log('Указать место учёбы')}
+        textWrap="short"
+        chevron={false}
+      >
+        Укажите место учёбы
+      </MiniInfoCell>
+    </React.Fragment>)
+  );
+};"
+`;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple-cell transforms correctly 1`] = `
+"import { SimpleCell } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <SimpleCell
+        onClick={() => {}}
+        chevron="auto"
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
+      <SimpleCell
+        onClick={() => {}}
+        chevron="always"
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/__snapshots__/subnavigation-button.ts.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subnavigation-button transforms correctly 1`] = `
+"import { SubnavigationButton } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <SubnavigationButton
+        chevron={true}
+        selected={true}
+        onClick={() => {}}
+      >
+        Button
+      </SubnavigationButton>
+    </React.Fragment>)
+  );
+};"
+`;

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

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

packages/codemods/src/transforms/v7/__tests__/mini-info-cell.ts

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

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

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

packages/codemods/src/transforms/v7/__tests__/subnavigation-button.ts

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

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

@@ -0,0 +1,20 @@
+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, 'Cell', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, {
+      expandable: 'chevron',
+    });
+  }
+
+  return source.toSource();
+}

packages/codemods/src/transforms/v7/mini-info-cell.ts

@@ -0,0 +1,20 @@
+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, 'MiniInfoCell', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, {
+      expandable: 'chevron',
+    });
+  }
+
+  return source.toSource();
+}

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

@@ -0,0 +1,20 @@
+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, 'SimpleCell', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, {
+      expandable: 'chevron',
+    });
+  }
+
+  return source.toSource();
+}

packages/codemods/src/transforms/v7/subnavigation-button.ts

@@ -0,0 +1,20 @@
+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, 'SubnavigationButton', alias);
+
+  if (localName) {
+    renameProp(j, source, localName, {
+      expandable: 'chevron',
+    });
+  }
+
+  return source.toSource();
+}

packages/vkui/src/components/Accordion/AccordionSummary.tsx

@@ -7,7 +7,7 @@ import { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { AccordionContext } from './AccordionContext';
 import styles from './Accordion.module.css';
 
-export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable'> {
+export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'chevron'> {
   /**
    * Иконка для раскрытия контента.
    */

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

@@ -15,7 +15,7 @@ const Example = () => {
 
         <Group header={<Header mode="secondary">В пунктах меню</Header>}>
           <Cell
-            expandable
+            chevron
             before={<Icon28Notifications />}
             badgeAfterTitle={<Badge>Есть новые</Badge>}
             onClick={noop}

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

@@ -22,7 +22,7 @@ export const MiniInfoCellPlayground = (props: ComponentPlaygroundProps) => {
               vk.com/team
             </Link>,
           ],
-          expandable: [true],
+          chevron: [true],
         },
         {
           before: [<Icon20ArticleOutline key="icon" />],
@@ -53,7 +53,7 @@ export const MiniInfoCellPlayground = (props: ComponentPlaygroundProps) => {
           mode: ['more'],
           textWrap: ['short'],
           children: ['Подробная информация'],
-          expandable: [true],
+          chevron: [true],
         },
         {
           children: ['Ячейка без иконки'],