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 { //