chore: Add new codemods (#6314)

* chore: Add new codemods

* chore: update comment modal-card

packages/codemods/src/codemod-helpers.ts

@@ -6,6 +6,7 @@ import type {
   JSXAttribute,
   JSXIdentifier,
 } from 'jscodeshift';
+import { report } from './report';
 
 export function getImportInfo(
   j: JSCodeshift,
@@ -83,11 +84,8 @@ export const createAttributeManipulator = (
 
       if (found && found.reportText) {
         const text = typeof found.reportText === 'function' ? found.reportText() : found.reportText;
-        try {
-          api.report(text);
-        } catch {
-          console.warn(text);
-        }
+
+        report(api, text);
       }
 
       return {

packages/codemods/src/report.ts

@@ -4,9 +4,14 @@ import pkg from '../package.json';
 
 export function report(api: API, message: string) {
   const { report } = api;
-  report(
-    `${message} Advise ${chalk.white.bgBlue.bold('migration guide')} - ${
-      pkg.homepage
-    }#/Migration \n\n`,
-  );
+
+  const finalMessage = `${message} Advise ${chalk.white.bgBlue.bold('migration guide')} - ${
+    pkg.homepage
+  }#/Migration \n\n`;
+
+  try {
+    report(finalMessage);
+  } catch (error) {
+    console.warn(finalMessage);
+  }
 }

packages/codemods/src/transforms/__testfixtures__/form-layout/basic.input.tsx

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

packages/codemods/src/transforms/__tests__/__snapshots__/form-layout.ts.snap

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

packages/codemods/src/transforms/__tests__/__snapshots__/rich-tooltip.ts.snap

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

packages/codemods/src/transforms/__tests__/form-layout.ts

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

packages/codemods/src/transforms/__tests__/rich-tooltip.ts

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

packages/codemods/src/transforms/form-layout.ts

@@ -0,0 +1,29 @@
+import chalk from 'chalk';
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../codemod-helpers';
+import { report } from '../report';
+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, 'FormLayout', alias);
+
+  const components = source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
+    );
+
+  if (components.size() > 0) {
+    report(
+      api,
+      `: ${chalk.white.bgBlue('FormLayout')} component does not exist anymore. Use native form.`,
+    );
+  }
+
+  return source.toSource();
+}

packages/codemods/src/transforms/modal-card.ts

@@ -1,5 +1,7 @@
+import chalk from 'chalk';
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo } from '../codemod-helpers';
+import { report } from '../report';
 import { JSCodeShiftOptions } from '../types';
 
 export const parser = 'tsx';
@@ -12,33 +14,43 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   const { localName: localNameModalCard } = getImportInfo(j, file, 'ModalCard', alias);
   const { localName: localNameModalCardBase } = getImportInfo(j, file, 'ModalCardBase', alias);
 
-  source
+  const modalCards = source
     .find(j.JSXOpeningElement)
     .filter(
       (path) =>
         path.value.name.type === 'JSXIdentifier' &&
         [localNameModalCard, localNameModalCardBase].includes(path.value.name.name),
-    )
-    .forEach((path) => {
-      const headerAttribute = j(path).find(j.JSXAttribute, { name: { name: 'header' } });
-      const subheaderAttribute = j(path).find(j.JSXAttribute, { name: { name: 'subheader' } });
-
-      if (subheaderAttribute.length > 0) {
-        if (path.node.attributes) {
-          path.node.attributes.push(
-            j.jsxAttribute(j.jsxIdentifier('subheaderComponent'), j.stringLiteral('h5')),
-          );
-        }
+    );
+
+  modalCards.forEach((path) => {
+    const headerAttribute = j(path).find(j.JSXAttribute, { name: { name: 'header' } });
+    const subheaderAttribute = j(path).find(j.JSXAttribute, { name: { name: 'subheader' } });
+
+    if (subheaderAttribute.length > 0) {
+      if (path.node.attributes) {
+        path.node.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('subheaderComponent'), j.stringLiteral('h5')),
+        );
       }
+    }
 
-      if (headerAttribute.length > 0) {
-        if (path.node.attributes) {
-          path.node.attributes.push(
-            j.jsxAttribute(j.jsxIdentifier('headerComponent'), j.stringLiteral('h2')),
-          );
-        }
+    if (headerAttribute.length > 0) {
+      if (path.node.attributes) {
+        path.node.attributes.push(
+          j.jsxAttribute(j.jsxIdentifier('headerComponent'), j.stringLiteral('h2')),
+        );
       }
-    });
+    }
+  });
+
+  if (modalCards.size() > 0) {
+    report(
+      api,
+      `: ${chalk.white.bgBlue('ModalCard')} and ${chalk.white.bgBlue(
+        'ModalCardBase',
+      )} might need 'Spacing' now. Manual changes required.`,
+    );
+  }
 
   return source.toSource();
 }

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

@@ -0,0 +1,31 @@
+import chalk from 'chalk';
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../codemod-helpers';
+import { report } from '../report';
+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, 'PopoutWrapper', alias);
+
+  const components = source
+    .find(j.JSXOpeningElement)
+    .filter(
+      (path) => path.value.name.type === 'JSXIdentifier' && path.value.name.name === localName,
+    );
+
+  if (components.size() > 0) {
+    report(
+      api,
+      `: When using ${chalk.white.bgBlue(
+        'PopoutWrapper',
+      )} you might need to apply useScrollLock() hook manually.`,
+    );
+  }
+
+  return source.toSource();
+}