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 new file mode 100644 index 00000000000..eedd8f199c0 --- /dev/null +++ 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 = () => ( + <> + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + );" + `); +}); diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index dbe368f984e..fcd030a93b0 100644 --- 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 new file mode 100644 index 00000000000..abd9173896a --- /dev/null +++ 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 + // -> + // ->
+ 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 deleted file mode 100644 index c0e6e7bc8d8..00000000000 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { red } from './utils'; - -function migrateActionListComponent({ root, j, file }): void { - // ActionList component: Remove surfaceLevel prop - // -> - try { - root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'ActionList') - .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".`, - ), - `\n${red(error.stack)}\n`, - ); - } -} - -export default migrateActionListComponent; diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index ff1f2f4c8fb..3691b09c77d 100644 --- 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. - + ``` + +### Table + +- **The `surfaceLevel` prop has been removed without replacement.** + + ```diff + -
+ +
+ ```