chore: add more codemods (#6340)

* chore: ass more codemods

* feat(codemodes/config-provider): support `tokensClassNames`

* chore: refactor + add panel/modal header codmods

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

packages/codemods/src/codemod-helpers.ts

@@ -59,6 +59,40 @@ export function renameProp(
     });
 }
 
+export function swapBooleanValue(
+  api: API,
+  source: Collection,
+  componentName: string,
+  previousPropName: string,
+  currentPropName: string,
+) {
+  const j = api.jscodeshift;
+  source
+    .find(
+      j.JSXOpeningElement,
+      (element) => element.name.type === 'JSXIdentifier' && element.name.name === componentName,
+    )
+    .find(j.JSXAttribute, (attribute) => attribute.name.name === previousPropName)
+    .forEach((attribute) => {
+      const node = attribute.node;
+
+      if (!node.value) {
+        j(attribute).remove();
+      } else if (
+        node.value.type === 'JSXExpressionContainer' &&
+        node.value.expression.type === 'BooleanLiteral'
+      ) {
+        if (node.value.expression.value) {
+          j(attribute).remove();
+        } else {
+          j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(currentPropName)));
+        }
+      } else {
+        report(api, `Manual changes required for ${componentName}'s ${previousPropName} prop.`);
+      }
+    });
+}
+
 interface AttributeManipulatorAPI {
   keyTo?: string | ((k?: string) => string);
   reportText?: string | (() => string);

packages/codemods/src/transforms/__testfixtures__/card-scroll/basic.input.tsx

@@ -0,0 +1,12 @@
+import { CardScroll } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <CardScroll withSpaces>{cards}</CardScroll>
+      <CardScroll withSpaces={false}>{cards}</CardScroll>
+      <CardScroll withSpaces={withSpaces}>{cards}</CardScroll>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/config-provider/basic.input.tsx

@@ -29,6 +29,9 @@ const App = () => {
       <ConfigProvider {...configProviderProps}>
         <App />
       </ConfigProvider>
+      <ConfigProvider platform="someAnotherPlatform">
+        <App />
+      </ConfigProvider>
     </React.Fragment>
   );
 };

packages/codemods/src/transforms/__testfixtures__/gallery/basic.input.tsx

@@ -0,0 +1,11 @@
+import { Gallery } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Gallery isDraggable>{slides}</Gallery>
+      <Gallery isDraggable={false}>{slides}</Gallery>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/image-base/basic.input.tsx

@@ -0,0 +1,12 @@
+import { Image, ImageBase, Avatar as VKUIAvatar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Image src="image.svg" withBorder></Image>
+      <ImageBase withBorder={false} src="image.svg"></ImageBase>
+      <VKUIAvatar withBorder={true} />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/modal-page-header/basic.input.tsx

@@ -7,6 +7,8 @@ const App = () => {
     <React.Fragment>
       <ModalPageHeader getRef={ref2}>...</ModalPageHeader>
       <ModalPageHeader getRef={ref1} getRootRef={ref1} boolValue>...</ModalPageHeader>
+      <ModalPageHeader separator>...</ModalPageHeader>
+      <ModalPageHeader separator={false}>...</ModalPageHeader>
     </React.Fragment>
   );
 };

packages/codemods/src/transforms/__testfixtures__/panel-header/basic.input.tsx

@@ -0,0 +1,13 @@
+import { PanelHeader } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <PanelHeader visor>PanelHeader</PanelHeader>
+      <PanelHeader visor={false}>PanelHeader</PanelHeader>
+      <PanelHeader separator>PanelHeader</PanelHeader>
+      <PanelHeader separator={false}>PanelHeader</PanelHeader>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/placeholder/basic.input.tsx

@@ -0,0 +1,12 @@
+import { Placeholder } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Placeholder withPadding>Placeholder</Placeholder>
+      <Placeholder withPadding={true}>Placeholder</Placeholder>
+      <Placeholder withPadding={false}>Placeholder</Placeholder>
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/popout-wrapper/basic.input.tsx

@@ -0,0 +1,11 @@
+import { PopoutWrapper } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <PopoutWrapper hasMask />
+      <PopoutWrapper hasMask={false} />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { ChipsSelect, CustomSelect, Select as VKUISelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <VKUISelect fixDropdownWidth options={options} />
+      <CustomSelect fixDropdownWidth={false} options={options} />
+      <ChipsSelect fixDropdownWidth={true} options={options} />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__testfixtures__/tabbar/basic.input.tsx

@@ -0,0 +1,11 @@
+import { Tabbar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Tabbar shadow />
+      <Tabbar shadow={false} />
+    </React.Fragment>
+  );
+};

packages/codemods/src/transforms/__tests__/__snapshots__/card-scroll.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card-scroll transforms correctly 1`] = `
+"import { CardScroll } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <CardScroll>{cards}</CardScroll>
+      <CardScroll noSpaces>{cards}</CardScroll>
+      <CardScroll withSpaces={withSpaces}>{cards}</CardScroll>
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/__snapshots__/config-provider.ts.snap

@@ -32,6 +32,12 @@ const App = () => {
       <ConfigProvider {...configProviderProps}>
         <App />
       </ConfigProvider>
+      <ConfigProvider tokensClassNames={{
+        light: "vkui--someAnotherPlatform--light",
+        dark: "vkui--someAnotherPlatform--dark"
+      }}>
+        <App />
+      </ConfigProvider>
     </React.Fragment>
   );
 };"

packages/codemods/src/transforms/__tests__/__snapshots__/gallery.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gallery transforms correctly 1`] = `
+"import { Gallery } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Gallery>{slides}</Gallery>
+      <Gallery dragDisabled>{slides}</Gallery>
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/__snapshots__/image-base.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`image-base transforms correctly 1`] = `
+"import { Image, ImageBase, Avatar as VKUIAvatar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Image src="image.svg"></Image>
+      <ImageBase noBorder src="image.svg"></ImageBase>
+      <VKUIAvatar />
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/__snapshots__/modal-page-header.ts.snap

@@ -10,6 +10,8 @@ const App = () => {
     <React.Fragment>
       <ModalPageHeader getRootRef={ref2}>...</ModalPageHeader>
       <ModalPageHeader getRootRef={ref1} boolValue>...</ModalPageHeader>
+      <ModalPageHeader>...</ModalPageHeader>
+      <ModalPageHeader noSeparator>...</ModalPageHeader>
     </React.Fragment>
   );
 };"

packages/codemods/src/transforms/__tests__/__snapshots__/panel-header.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`panel-header transforms correctly 1`] = `
+"import { PanelHeader } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <PanelHeader>PanelHeader</PanelHeader>
+      <PanelHeader float>PanelHeader</PanelHeader>
+      <PanelHeader>PanelHeader</PanelHeader>
+      <PanelHeader delimiter="none">PanelHeader</PanelHeader>
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/__snapshots__/placeholder.ts.snap

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

packages/codemods/src/transforms/__tests__/__snapshots__/popout-wrapper.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`popout-wrapper transforms correctly 1`] = `
+"import { PopoutWrapper } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <PopoutWrapper />
+      <PopoutWrapper noBackground />
+    </React.Fragment>
+  );
+};"
+`;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select transforms correctly 1`] = `
+"import { ChipsSelect, CustomSelect, Select as VKUISelect } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <VKUISelect options={options} />
+      <CustomSelect dropdownAutoWidth options={options} />
+      <ChipsSelect options={options} />
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/__snapshots__/tabbar.ts.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tabbar transforms correctly 1`] = `
+"import { Tabbar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <Tabbar />
+      <Tabbar plain />
+    </React.Fragment>
+  );
+};"
+`;

packages/codemods/src/transforms/__tests__/card-scroll.ts

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

packages/codemods/src/transforms/__tests__/gallery.ts

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

packages/codemods/src/transforms/__tests__/image-base.ts

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

packages/codemods/src/transforms/__tests__/panel-header.ts

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

packages/codemods/src/transforms/__tests__/placeholder.ts

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

packages/codemods/src/transforms/__tests__/popout-wrapper.ts

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