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