feat(CustomScrollView): refactor CustomScrollView to the native approach

packages/codemods/src/codemod-helpers.ts

@@ -139,6 +139,48 @@ export function swapBooleanValue(
     });
 }
 
+export const removeProps = (
+  j: JSCodeshift,
+  api: API,
+  source: Collection,
+  componentName: string,
+  propsNames: string[],
+  createReportMessage: () => string = () => '',
+) => {
+  let needToShowReport = false;
+  source
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: componentName,
+        },
+      },
+    })
+    .forEach((path) => {
+      const attributes = path.node.openingElement.attributes;
+      const newAttributes = attributes?.filter((attr) => {
+        if (attr.type === 'JSXAttribute') {
+          const attrName = attr.name ? attr.name.name : null;
+          if (typeof attrName === 'string') {
+            return !propsNames.includes(attrName);
+          }
+        }
+        if (attr.type === 'JSXSpreadAttribute') {
+          needToShowReport = true;
+        }
+        return false;
+      });
+      path.node.openingElement.attributes = newAttributes;
+    });
+
+  if (needToShowReport) {
+    report(
+      api,
+      `: ${componentName} has been changed. Manual changes required: ${createReportMessage()}`,
+    );
+  }
+};
+
 export const removeAttribute = (
   attributes: Array<JSXAttribute | JSXSpreadAttribute> | undefined,
   attribute: JSXAttribute,

packages/codemods/src/transforms/v7/__testfixtures__/chips-select/basic.input.tsx

@@ -0,0 +1,30 @@
+import { ChipsSelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const colors = React.useMemo(
+    () => [
+      { value: 'red', label: 'Красный' },
+      { value: 'blue', label: 'Синий' },
+      { value: 'navarin', label: 'Наваринского пламени с дымом' },
+    ],
+    [],
+  );
+  const [selectedColors, setSelectedColors] = React.useState(() => colors.slice(0, 2));
+
+  return (
+    <React.Fragment>
+      <ChipsSelect
+        id="colors"
+        value={selectedColors}
+        onChange={setSelectedColors}
+        options={colors}
+        autoHideScrollbar
+        autoHideScrollbarDelay={1500}
+        placeholder="Не выбраны"
+        creatable="Добавить цвет"
+        allowClearButton={true}
+      />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__testfixtures__/custom-scroll-view/basic.input.tsx

@@ -0,0 +1,30 @@
+import { CustomScrollView, Div, Flex } from '@vkontakte/vkui';
+import React, {useRef} from 'react';
+
+const App = () => {
+  const ref = useRef();
+  return (
+    <React.Fragment>
+      {/* Проверяем удаление старый пропов */}
+      <CustomScrollView
+        className={"className"}
+        windowResize
+        autoHideScrollbar
+        autoHideScrollbarDelay={1000}
+        enableHorizontalScroll
+      >
+        <Flex>
+          <Div/>
+        </Flex>
+      </CustomScrollView>
+      {/* Заменяем boxRef на getRootRef */}
+      <CustomScrollView
+        boxRef={ref}
+      >
+        <Flex>
+          <Div/>
+        </Flex>
+      </CustomScrollView>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__testfixtures__/custom-select/basic.input.tsx

@@ -0,0 +1,34 @@
+import { CustomSelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const [selectType, setSelectType] = React.useState(undefined);
+  const selectTypes = [
+    {
+      label: 'default',
+      value: 'default',
+    },
+    {
+      label: 'plain',
+      value: 'plain',
+    },
+    {
+      label: 'accent',
+      value: 'accent',
+    },
+  ];
+
+  return (
+    <React.Fragment>
+      <CustomSelect
+        id="select-type-select-id"
+        value={selectType}
+        placeholder="Не задан"
+        options={selectTypes}
+        autoHideScrollbar
+        autoHideScrollbarDelay={12312}
+        onChange={(e) => setSelectType(e.target.value)}
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Select } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const [selectType, setSelectType] = React.useState(undefined);
+  const selectTypes = [
+    {
+      label: 'default',
+      value: 'default',
+    },
+    {
+      label: 'plain',
+      value: 'plain',
+    },
+    {
+      label: 'accent',
+      value: 'accent',
+    },
+  ];
+
+  return (
+    <React.Fragment>
+      <Select
+        id="select-type-select-id"
+        value={selectType}
+        placeholder="Не задан"
+        options={selectTypes}
+        autoHideScrollbar
+        autoHideScrollbarDelay={12312}
+        onChange={(e) => setSelectType(e.target.value)}
+      />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/v7/__tests__/__snapshots__/chips-select.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`chips-select transforms correctly 1`] = `
+"import { ChipsSelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const colors = React.useMemo(
+    () => [
+      { value: 'red', label: 'Красный' },
+      { value: 'blue', label: 'Синий' },
+      { value: 'navarin', label: 'Наваринского пламени с дымом' },
+    ],
+    [],
+  );
+  const [selectedColors, setSelectedColors] = React.useState(() => colors.slice(0, 2));
+
+  return (
+    (<React.Fragment>
+      <ChipsSelect
+        id="colors"
+        value={selectedColors}
+        onChange={setSelectedColors}
+        options={colors}
+        placeholder="Не выбраны"
+        creatable="Добавить цвет"
+        allowClearButton={true} />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/__snapshots__/custom-scroll-view.ts.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom-scroll-view transforms correctly 1`] = `
+"import { CustomScrollView, Div, Flex } from '@vkontakte/vkui';
+import React, {useRef} from 'react';
+
+const App = () => {
+  const ref = useRef();
+  return (
+    (<React.Fragment>
+      {/* Проверяем удаление старый пропов */}
+      <CustomScrollView className={"className"} enableHorizontalScroll>
+        <Flex>
+          <Div/>
+        </Flex>
+      </CustomScrollView>
+      {/* Заменяем boxRef на getRootRef */}
+      <CustomScrollView
+        getRootRef={ref}
+      >
+        <Flex>
+          <Div/>
+        </Flex>
+      </CustomScrollView>
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/__snapshots__/custom-select.ts.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom-select transforms correctly 1`] = `
+"import { CustomSelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const [selectType, setSelectType] = React.useState(undefined);
+  const selectTypes = [
+    {
+      label: 'default',
+      value: 'default',
+    },
+    {
+      label: 'plain',
+      value: 'plain',
+    },
+    {
+      label: 'accent',
+      value: 'accent',
+    },
+  ];
+
+  return (
+    (<React.Fragment>
+      <CustomSelect
+        id="select-type-select-id"
+        value={selectType}
+        placeholder="Не задан"
+        options={selectTypes}
+        onChange={(e) => setSelectType(e.target.value)} />
+    </React.Fragment>)
+  );
+};"
+`;

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select transforms correctly 1`] = `
+"import { Select } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const [selectType, setSelectType] = React.useState(undefined);
+  const selectTypes = [
+    {
+      label: 'default',
+      value: 'default',
+    },
+    {
+      label: 'plain',
+      value: 'plain',
+    },
+    {
+      label: 'accent',
+      value: 'accent',
+    },
+  ];
+
+  return (
+    (<React.Fragment>
+      <Select
+        id="select-type-select-id"
+        value={selectType}
+        placeholder="Не задан"
+        options={selectTypes}
+        onChange={(e) => setSelectType(e.target.value)} />
+    </React.Fragment>)
+  );
+};"
+`;

packages/codemods/src/transforms/v7/__tests__/chips-select.ts

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

packages/codemods/src/transforms/v7/__tests__/custom-scroll-view.ts

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

packages/codemods/src/transforms/v7/__tests__/custom-select.ts

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

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

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

packages/codemods/src/transforms/v7/chips-select.ts

@@ -0,0 +1,24 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, removeProps } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+const PROPS_TO_REMOVE = ['autoHideScrollbar', 'autoHideScrollbarDelay'];
+
+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, 'ChipsSelect', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
+    return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
+  });
+
+  return source.toSource();
+}