refactor(Separator): rename mode to appearance (#7687)

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

@@ -0,0 +1,12 @@
+import { Separator } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Separator mode="primary" />
+      <Separator mode="primary-alpha" wide />
+      <Separator mode={"secondary"} />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`separator transforms correctly 1`] = `
+"import { Separator } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    (<React.Fragment>
+      <Separator appearance="primary" />
+      <Separator appearance="primary-alpha" wide />
+      <Separator appearance={"secondary"} />
+    </React.Fragment>)
+  );
+};"
+`;

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

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

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

@@ -0,0 +1,19 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+const componentName = 'Separator';
+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, componentName, alias);
+
+  if (localName) {
+    renameProp(j, source, localName, { mode: 'appearance' });
+  }
+
+  return source.toSource();
+}

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

@@ -5,7 +5,7 @@
   <Panel id="separator">
     <PanelHeader>Separator</PanelHeader>
 
-    <Group header={<Header mode="secondary">Сепаратор</Header>}>
+    <Group>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 

packages/vkui/src/components/Separator/Separator.module.css

@@ -1,12 +1,12 @@
-.modePrimary {
+.appearancePrimary {
   color: var(--vkui--color_separator_primary);
 }
 
-.modeSecondary {
+.appearanceSecondary {
   color: var(--vkui--color_separator_secondary);
 }
 
-.modePrimaryAlpha {
+.appearancePrimaryAlpha {
   color: var(--vkui--color_separator_primary_alpha);
 }
 

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

@@ -8,16 +8,16 @@ describe('Separator', () => {
 
   it('should have separator mode className', () => {
     const getSeparator = () => screen.getByTestId('separator');
-    const { rerender } = render(<Separator mode="primary" data-testid="separator" />);
+    const { rerender } = render(<Separator appearance="primary" data-testid="separator" />);
 
-    expect(getSeparator()).toHaveClass(styles.modePrimary);
+    expect(getSeparator()).toHaveClass(styles.appearancePrimary);
 
-    rerender(<Separator mode="secondary" data-testid="separator" />);
+    rerender(<Separator appearance="secondary" data-testid="separator" />);
 
-    expect(getSeparator()).toHaveClass(styles.modeSecondary);
+    expect(getSeparator()).toHaveClass(styles.appearanceSecondary);
 
-    rerender(<Separator mode="primary-alpha" data-testid="separator" />);
+    rerender(<Separator appearance="primary-alpha" data-testid="separator" />);
 
-    expect(getSeparator()).toHaveClass(styles.modePrimaryAlpha);
+    expect(getSeparator()).toHaveClass(styles.appearancePrimaryAlpha);
   });
 });

packages/vkui/src/components/Separator/Separator.tsx

@@ -7,30 +7,30 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
   /**
    * Стиль отображения компонента
    */
-  mode?: 'primary' | 'secondary' | 'primary-alpha';
+  appearance?: 'primary' | 'secondary' | 'primary-alpha';
   /**
    * С этим свойством компонент не будет иметь отступы слева и справа
    */
   wide?: boolean;
 }
 
-const modeClassNames = {
-  'primary': styles.modePrimary,
-  'secondary': styles.modeSecondary,
-  'primary-alpha': styles.modePrimaryAlpha,
+const appearanceClassNames = {
+  'primary': styles.appearancePrimary,
+  'secondary': styles.appearanceSecondary,
+  'primary-alpha': styles.appearancePrimaryAlpha,
 };
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
 export const Separator = ({
   wide,
-  mode = 'primary',
+  appearance = 'primary',
   ...restProps
 }: SeparatorProps): React.ReactNode => (
   <RootComponent
     {...restProps}
-    baseClassName={classNames(!wide && styles.padded, modeClassNames[mode])}
+    baseClassName={classNames(!wide && styles.padded, appearanceClassNames[appearance])}
   >
     <hr className={styles.in} />
   </RootComponent>