refactor: add codemod for Table

razorpay · Jan 17, 2024 · 8d1759e · 8d1759e
1 parent 1bce840
commit 8d1759e
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 25 deletions.
diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts
@@ -0,0 +1,74 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ActionList component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Table {...args} data={data} surfaceLevel={3}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+            </>
+          );"
+  `);
+});
diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts
@@ -5,7 +5,7 @@ import migrateCardComponent from './migrate-card';
 import migrateBadgeComponent from './migrate-badge';
 import migrateContrastIntentAndColorProps from './migrate-contrast-intent-color-props';
 import migrateTypographyComponents from './migrate-typography';
-import migrateActionListComponent from './migrate-actionlist';
+import migrateActionListAndTable from './migrate-actionlist-and-table';
 import { red, isExpression } from './utils';
 // eslint-disable-next-line import/extensions
 import colorTokensMapping from './colorTokensMapping.json';
@@ -174,7 +174,7 @@ const transformer: Transform = (file, api, options) => {
   migrateCardComponent({ root, j, file });
   migrateAmountComponent({ root, j, file });
   migrateDividerComponent({ root, j, file });
-  migrateActionListComponent({ root, j, file });
+  migrateActionListAndTable({ root, j, file });
   migrateDropdownComponent({ root, j, file });
 
   // Update ImportDeclaration from "@razorpay/blade/components" to "@razorpay/blade-rebranded/components"

diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts
@@ -0,0 +1,28 @@
+import { red } from './utils';
+
+function migrateActionListAndTable({ root, j, file }): void {
+  // ActionList & Table components: Remove the `surfaceLevel` prop
+  // <ActionList surfaceLevel={2}> -> <ActionList >
+  // <Table surfaceLevel={2}> -> <Table >
+  try {
+    root
+      .find(j.JSXElement)
+      .filter(
+        (path) =>
+          path.value.openingElement.name.name === 'ActionList' ||
+          path.value.openingElement.name.name === 'Table',
+      )
+      .find(j.JSXAttribute)
+      .filter((path) => path.node.name.name === 'surfaceLevel')
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "surfaceLevel" prop from "ActionList"/"Table".`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateActionListAndTable;
diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts
diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md
@@ -465,3 +465,12 @@ Only use this if you're unable to run the codemod described above.
   - <Skeleton contrast="low|high" />
   + <Skeleton />
   ```
+
+### Table
+
+- **The `surfaceLevel` prop has been removed without replacement.**
+
+  ```diff
+  - <Table data={tableData} surfaceLevel={1/2/3}>
+  + <Table data={tableData} >
+  ```