From 314c908ce6083a86209bdc8d99c45b34c8dfa6a4 Mon Sep 17 00:00:00 2001 From: Nitin Date: Wed, 17 Jan 2024 10:38:59 +0530 Subject: [PATCH 1/6] refactor: add codemod for Table --- .../__tests__/migrate-table.test.ts | 74 +++++++++++++++++++ .../brand-refresh/transformers/index.ts | 4 +- .../migrate-actionlist-and-table.ts | 28 +++++++ .../transformers/migrate-actionlist.ts | 23 ------ packages/blade/upgrade-v11.md | 9 +++ 5 files changed, 113 insertions(+), 25 deletions(-) create mode 100644 packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts create mode 100644 packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts delete mode 100644 packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts 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 + -
+ +
+ ``` From b628c24223247ee8d62360751e66ca68df3f8169 Mon Sep 17 00:00:00 2001 From: Nitin Date: Wed, 17 Jan 2024 17:33:59 +0530 Subject: [PATCH 2/6] refactor: update codemode for spinner --- .../__tests__/migrate-card.test.ts | 4 +- .../__tests__/migrate-colors.test.ts | 8 +- .../migrate-contrast-intent-variant.test.ts | 8 ++ .../__tests__/migrate-table.test.ts | 110 +++++++++++++++++- .../__tests__/migrate-typography.test.ts | 2 +- .../brand-refresh/transformers/index.ts | 23 +--- ...ist-and-table.ts => migrate-actionlist.ts} | 10 +- ...rate-card.ts => migrate-card-and-table.ts} | 16 +-- .../migrate-contrast-intent-color-props.ts | 32 ++++- 9 files changed, 173 insertions(+), 40 deletions(-) rename packages/blade/codemods/brand-refresh/transformers/{migrate-actionlist-and-table.ts => migrate-actionlist.ts} (67%) rename packages/blade/codemods/brand-refresh/transformers/{migrate-card.ts => migrate-card-and-table.ts} (55%) diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts index 60c73d19a1d..dae4db91728 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts @@ -91,7 +91,7 @@ it('should migrate the Card component', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - + Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more. @@ -99,7 +99,7 @@ it('should migrate the Card component', async () => { - + Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more. diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts index 2ac6136a093..408623f3a94 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts @@ -120,8 +120,8 @@ it('should update the theme in BladeProvider', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { BladeProvider } from "@razorpay/blade-rebranded/components"; - import { bladeTheme } from "@razorpay/blade-rebranded/tokens"; + "import { BladeProvider } from '@razorpay/blade/components'; + import { bladeTheme } from '@razorpay/blade/tokens'; const AppWrapper = () => { return ( @@ -156,8 +156,8 @@ it('should update the theme in BladeProvider', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { BladeProvider } from "@razorpay/blade-rebranded/components"; - import { bladeTheme } from "@razorpay/blade-rebranded/tokens"; + "import { BladeProvider } from '@razorpay/blade/components'; + import { bladeTheme } from '@razorpay/blade/tokens'; const AppWrapper = () => { return ( diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts index d270d39bdb2..4e06a82e59c 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts @@ -121,6 +121,10 @@ it('should remove variant/intent prop in favor of color prop', async () => { + + + + ); `, @@ -192,6 +196,10 @@ it('should remove variant/intent prop in favor of color prop', async () => { + + + + );" `); 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 index eedd8f199c0..7d4ff8c848f 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts @@ -33,6 +33,60 @@ it('should migrate the ActionList component', async () => { )}
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
); `, @@ -42,7 +96,61 @@ it('should migrate the ActionList component', async () => { expect(result).toMatchInlineSnapshot(` "const App = () => ( <> - +
+ {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + + {(tableData) => ( + <> + + + ID + Amount + Account + + + + {tableData.map((tableItem, index) => ( + + + {tableItem.paymentId} + + + + + {tableItem.account} + + ))} + + + )} +
+ + {(tableData) => ( <> diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts index 68d2f8898cb..c0129b1a246 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts @@ -333,7 +333,7 @@ it('should correctly convert Title to Heading component', async () => { ); expect(result).toMatchInlineSnapshot(` - "import { Heading } from "@razorpay/blade-rebranded/components"; + "import { Heading } from '@razorpay/blade/components'; const App = () => ( <> Lorem ipsum diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index fcd030a93b0..b31a2a92ada 100644 --- a/packages/blade/codemods/brand-refresh/transformers/index.ts +++ b/packages/blade/codemods/brand-refresh/transformers/index.ts @@ -1,11 +1,11 @@ import type { Transform } from 'jscodeshift'; import migrateAmountComponent from './migrate-amount'; import migrateDividerComponent from './migrate-divider'; -import migrateCardComponent from './migrate-card'; +import migrateCardAndTableComponent from './migrate-card-and-table'; import migrateBadgeComponent from './migrate-badge'; import migrateContrastIntentAndColorProps from './migrate-contrast-intent-color-props'; import migrateTypographyComponents from './migrate-typography'; -import migrateActionListAndTable from './migrate-actionlist-and-table'; +import migrateActionListComponent from './migrate-actionlist'; import { red, isExpression } from './utils'; // eslint-disable-next-line import/extensions import colorTokensMapping from './colorTokensMapping.json'; @@ -171,28 +171,17 @@ const transformer: Transform = (file, api, options) => { migrateTypographyComponents({ root, j, file }); migrateContrastIntentAndColorProps({ root, j, file }); migrateBadgeComponent({ root, j, file }); - migrateCardComponent({ root, j, file }); + migrateCardAndTableComponent({ root, j, file }); migrateAmountComponent({ root, j, file }); migrateDividerComponent({ root, j, file }); - migrateActionListAndTable({ root, j, file }); + migrateActionListComponent({ root, j, file }); migrateDropdownComponent({ root, j, file }); - // Update ImportDeclaration from "@razorpay/blade/components" to "@razorpay/blade-rebranded/components" // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme" try { root .find(j.ImportDeclaration) - .filter((path) => - /@razorpay\/blade\/(components|utils|tokens)/i.test(path.value.source.value as string), - ) - .replaceWith((path) => { - path.value.source.value = (path.value.source.value as string).replace( - 'blade', - 'blade-rebranded', - ); - - return path.node; - }) + .filter((path) => /@razorpay\/blade\/tokens/i.test(path.value.source.value as string)) .find(j.ImportSpecifier) .filter((path) => ['paymentTheme', 'bankingTheme'].includes(path.value.imported.name)) .replaceWith((path) => { @@ -203,7 +192,7 @@ const transformer: Transform = (file, api, options) => { } catch (error) { console.error( red( - `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportDeclaration from "@razorpay/blade" to "@razorpay/blade-rebranded".`, + `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme".`, ), `\n${red(error.stack)}\n`, ); diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts similarity index 67% rename from packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts rename to packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts index abd9173896a..4419dd30e10 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts @@ -1,17 +1,13 @@ import { red } from './utils'; -function migrateActionListAndTable({ root, j, file }): void { +function migrateActionListComponent({ 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', - ) + .filter((path) => path.value.openingElement.name.name === 'ActionList') .find(j.JSXAttribute) .filter((path) => path.node.name.name === 'surfaceLevel') .remove(); @@ -25,4 +21,4 @@ function migrateActionListAndTable({ root, j, file }): void { } } -export default migrateActionListAndTable; +export default migrateActionListComponent; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts similarity index 55% rename from packages/blade/codemods/brand-refresh/transformers/migrate-card.ts rename to packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts index cdb6c29021b..dd9b7c5f562 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts @@ -1,20 +1,22 @@ import { red } from './utils'; -// Card component Migration -// -> -function migrateCardComponent({ root, j, file }): void { +// Card & Table components Migration +// -> +//
->
+function migrateCardAndTable({ root, j, file }): void { try { root .find(j.JSXElement) - .filter((path) => ['Card'].includes(path.value.openingElement.name.name)) + .filter((path) => ['Card', 'Table'].includes(path.value.openingElement.name.name)) .find(j.JSXAttribute) .filter((path) => path.node.name.name === 'surfaceLevel') .replaceWith((path) => { const { node } = path; const surfaceLevelMap = { - 2: 'surface.background.gray.intense', - 3: 'surface.background.gray.moderate', + 1: 'surface.background.subtle', + 2: 'surface.background.gray.moderate', + 3: 'surface.background.gray.intense', }; node.name.name = 'backgroundColor'; @@ -33,4 +35,4 @@ function migrateCardComponent({ root, j, file }): void { } } -export default migrateCardComponent; +export default migrateCardAndTable; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts index fb80ce75038..16f460141f1 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts @@ -85,6 +85,35 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } + // Spinner: Change `contrast` prop to `color` + // -> + try { + root + .find(j.JSXElement) + .filter((path) => path.value.openingElement.name.name === 'Spinner') + .find(j.JSXAttribute) + .filter((path) => path.node.name.name === 'contrast') + .replaceWith((path) => { + path.node.name.name = 'color'; + + const contrastToColorMap = { + high: 'white', + low: 'primary', + }; + + path.node.value.value = contrastToColorMap[path.node.value.value]; + + return path.node; + }); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "contrast" prop in Spinner.`, + ), + `\n${red(error.stack)}\n`, + ); + } + // Remove 'contrast' prop from the Skeleton Component try { root @@ -189,7 +218,7 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { ); } - // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup + // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup/Spinner //
- +
+ -
+ +
+ + -
+ +
+ + -
+ +
``` From 1e9a703e3964184ca319502ad6ab293a1d7666e6 Mon Sep 17 00:00:00 2001 From: Nitin Date: Thu, 18 Jan 2024 09:36:26 +0530 Subject: [PATCH 4/6] refactor: improve performance --- .../brand-refresh/transformers/index.ts | 54 ++++-- .../transformers/migrate-actionlist.ts | 16 +- .../transformers/migrate-amount.ts | 11 +- .../transformers/migrate-badge.ts | 20 +- .../transformers/migrate-card-and-table.ts | 16 +- .../migrate-contrast-intent-color-props.ts | 174 +++++++++++------- .../transformers/migrate-divider.ts | 22 ++- .../transformers/migrate-dropdown.ts | 16 +- .../transformers/migrate-typography.ts | 76 +++++--- 9 files changed, 271 insertions(+), 134 deletions(-) diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index b31a2a92ada..72de851a935 100644 --- a/packages/blade/codemods/brand-refresh/transformers/index.ts +++ b/packages/blade/codemods/brand-refresh/transformers/index.ts @@ -92,14 +92,22 @@ const transformer: Transform = (file, api, options) => { // Update the themeTokens prop in BladeProvider try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'BladeProvider') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'themeTokens') - .replaceWith((path) => { - path.node.value.expression.name = 'bladeTheme'; + .find(j.JSXElement, { + openingElement: { + name: { + name: 'BladeProvider', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'themeTokens', + }, + }) + .replaceWith(({ node }) => { + node.value.expression.name = 'bladeTheme'; - return path.node; + return node; }); } catch (error) { console.error( @@ -113,13 +121,19 @@ const transformer: Transform = (file, api, options) => { // Update color token value based on the context try { root - .find(j.JSXElement) - .filter((path) => - /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(name), + }, + }, + }) // Find all color props - .find(j.JSXAttribute) - .filter((path) => path.node.name.name.toLowerCase().includes('color')) + .find(j.JSXAttribute, { + name: { + name: (name) => name.toLowerCase().includes('color'), + }, + }) .replaceWith((path) => { const { node, parent } = path; @@ -180,10 +194,16 @@ const transformer: Transform = (file, api, options) => { // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme" try { root - .find(j.ImportDeclaration) - .filter((path) => /@razorpay\/blade\/tokens/i.test(path.value.source.value as string)) - .find(j.ImportSpecifier) - .filter((path) => ['paymentTheme', 'bankingTheme'].includes(path.value.imported.name)) + .find(j.ImportDeclaration, { + source: { + value: '@razorpay/blade/tokens', + }, + }) + .find(j.ImportSpecifier, { + imported: { + name: (name) => ['paymentTheme', 'bankingTheme'].includes(name), + }, + }) .replaceWith((path) => { path.value.imported.name = 'bladeTheme'; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts index 4419dd30e10..3b801e2d509 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts @@ -6,10 +6,18 @@ function migrateActionListComponent({ root, j, file }): void { //
->
try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'ActionList') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'surfaceLevel') + .find(j.JSXElement, { + openingElement: { + name: { + name: 'ActionList', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'surfaceLevel', + }, + }) .remove(); } catch (error) { console.error( diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts index d7b0800ee51..d2193c41284 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts @@ -4,10 +4,13 @@ import { red, isExpression } from './utils'; function migrateAmountComponent({ root, j, file }): void { try { root - .find(j.JSXElement) - .filter((path) => - ['Amount', 'CardHeaderAmount'].includes(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Amount', 'CardHeaderAmount'].includes(name), + }, + }, + }) .replaceWith((path) => { const { node } = path; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts index 847fd30fa06..6820da24da5 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-badge.ts @@ -4,14 +4,18 @@ import { red } from './utils'; function migrateBadgeComponent({ root, j, file }): void { try { root - .find(j.JSXElement) - .filter( - (path) => - path.value.openingElement.name.name === 'Badge' || - path.value.openingElement.name.name === 'CardHeaderBadge', - ) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'fontWeight') + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Badge', 'CardHeaderBadge'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'fontWeight', + }, + }) .remove(); } catch (error) { console.error( diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts index dd9b7c5f562..3f5fa771b35 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts @@ -6,10 +6,18 @@ import { red } from './utils'; function migrateCardAndTable({ root, j, file }): void { try { root - .find(j.JSXElement) - .filter((path) => ['Card', 'Table'].includes(path.value.openingElement.name.name)) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'surfaceLevel') + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Card', 'Table'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'surfaceLevel', + }, + }) .replaceWith((path) => { const { node } = path; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts index 16f460141f1..f08e0b5f36e 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts @@ -4,13 +4,17 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Break `contrast="high"` prop from Typography & ProgressBar Components try { root - .find(j.JSXElement) - .filter((path) => - ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( - path.value.openingElement.name.name, - ), - ) - .find(j.JSXAttribute) // Find all props + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( + name, + ), + }, + }, + }) + .find(j.JSXAttribute) .filter( (path, index, self) => ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes( @@ -36,19 +40,26 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis` try { root - .find(j.JSXElement) - .filter((path) => - [ - 'Badge', - 'Counter', - 'IconButton', - 'Alert', - 'CardHeaderBadge', - 'CardHeaderCounter', - ].includes(path.value.openingElement.name.name), - ) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'contrast') + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + [ + 'Badge', + 'Counter', + 'IconButton', + 'Alert', + 'CardHeaderBadge', + 'CardHeaderCounter', + ].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) .replaceWith((path) => { path.node.name.name = 'emphasis'; @@ -89,10 +100,18 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // -> try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'Spinner') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'contrast') + .find(j.JSXElement, { + openingElement: { + name: { + name: 'Spinner', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) .replaceWith((path) => { path.node.name.name = 'color'; @@ -117,10 +136,18 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Remove 'contrast' prop from the Skeleton Component try { root - .find(j.JSXElement) - .filter((path) => path.value.openingElement.name.name === 'Skeleton') - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'contrast') + .find(j.JSXElement, { + openingElement: { + name: { + name: 'Skeleton', + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: 'contrast', + }, + }) .remove(); } catch (error) { console.error( @@ -134,22 +161,26 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { // Remove deprecated 'intent'/'variant' props in favor of color try { root - .find(j.JSXElement) - .filter((path) => - [ - 'Alert', - 'Badge', - 'Counter', - 'Chip', - 'ChipGroup', - 'Indicator', - 'ProgressBar', - 'Amount', - 'CardHeaderBadge', - 'CardHeaderCounter', - 'CardHeaderAmount', - ].includes(path.value.openingElement.name.name), - ) + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => + [ + 'Alert', + 'Badge', + 'Counter', + 'Chip', + 'ChipGroup', + 'Indicator', + 'ProgressBar', + 'Amount', + 'CardHeaderBadge', + 'CardHeaderCounter', + 'CardHeaderAmount', + ].includes(name), + }, + }, + }) .replaceWith((path) => { const { node } = path; @@ -194,11 +225,14 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { return node; }) - .find(j.JSXAttribute) - .filter((path) => path.node.name.name === 'intent' || path.node.name.name === 'variant') + .find(j.JSXAttribute, { + name: { + name: (name) => name === 'intent' || name === 'variant', + }, + }) + // Remove duplicate intent/variant props .filter( (path, index, self) => - (path.node.name.name === 'intent' || path.node.name.name === 'variant') && index === self.findIndex((obj) => path.node.start === obj.node.start), ) .replaceWith((path) => { @@ -222,24 +256,34 @@ function migrateContrastIntentAndColorProps({ root, j, file }): void { //
+
{(tableData) => ( <> @@ -123,7 +123,7 @@ it('should migrate the ActionList component', async () => { )}
- +
{(tableData) => ( <> @@ -150,7 +150,7 @@ it('should migrate the ActionList component', async () => { )}
- +
{(tableData) => ( <> diff --git a/packages/blade/codemods/brand-refresh/transformers/index.ts b/packages/blade/codemods/brand-refresh/transformers/index.ts index 72de851a935..4b810997526 100644 --- a/packages/blade/codemods/brand-refresh/transformers/index.ts +++ b/packages/blade/codemods/brand-refresh/transformers/index.ts @@ -1,11 +1,11 @@ import type { Transform } from 'jscodeshift'; import migrateAmountComponent from './migrate-amount'; import migrateDividerComponent from './migrate-divider'; -import migrateCardAndTableComponent from './migrate-card-and-table'; +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'; @@ -185,10 +185,10 @@ const transformer: Transform = (file, api, options) => { migrateTypographyComponents({ root, j, file }); migrateContrastIntentAndColorProps({ root, j, file }); migrateBadgeComponent({ root, j, file }); - migrateCardAndTableComponent({ root, j, file }); + 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 ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme" diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts similarity index 79% rename from packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts rename to packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts index 3b801e2d509..f4e2ae0c257 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts @@ -1,6 +1,6 @@ import { red } from './utils'; -function migrateActionListComponent({ root, j, file }): void { +function migrateActionListAndTable({ root, j, file }): void { // ActionList & Table components: Remove the `surfaceLevel` prop // -> //
->
@@ -9,7 +9,7 @@ function migrateActionListComponent({ root, j, file }): void { .find(j.JSXElement, { openingElement: { name: { - name: 'ActionList', + name: (name) => ['ActionList', 'Table'].includes(name), }, }, }) @@ -29,4 +29,4 @@ function migrateActionListComponent({ root, j, file }): void { } } -export default migrateActionListComponent; +export default migrateActionListAndTable; diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts similarity index 80% rename from packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts rename to packages/blade/codemods/brand-refresh/transformers/migrate-card.ts index a8078af3b41..e2e7baa1e0d 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-card-and-table.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-card.ts @@ -1,15 +1,14 @@ import { red } from './utils'; -// Card & Table components Migration +// Card components Migration // -> -//
->
function migrateCardAndTable({ root, j, file }): void { try { root .find(j.JSXElement, { openingElement: { name: { - name: (name) => ['Card', 'Table'].includes(name), + name: 'Card', }, }, }) diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index 2d50623df7d..084a9d86386 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -460,15 +460,9 @@ Only use this if you're unable to run the codemod described above. ### Table -- **The `surfaceLevel` prop has been removed in favor of the `backgroundColor` prop.** +- **The `surfaceLevel` prop has been removed without replacement.** ```diff - -
- +
- - -
- +
- - -
- +
+ -
+ +
```