@razorpay/blade 10.23.5 → 11.1.0

package/codemods/brand-refresh/transformers/index.ts

@@ -0,0 +1,224 @@
+import type { Transform } from 'jscodeshift';
+import migrateAmountComponent from './migrate-amount';
+import migrateDividerComponent from './migrate-divider';
+import migrateCardComponent from './migrate-card';
+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 { red, isExpression } from './utils';
+// eslint-disable-next-line import/extensions
+import colorTokensMapping from './colorTokensMapping.json';
+import migrateDropdownComponent from './migrate-dropdown';
+
+const transformer: Transform = (file, api, options) => {
+  // Maps for fontSize, lineHeight, and token prefixes
+  const fontSizeMap = {
+    600: 500,
+    700: 600,
+    800: 600,
+    900: 700,
+    1000: 700,
+    1100: 800,
+    1200: 900,
+    1300: 1000,
+    1600: 1100,
+  };
+
+  const lineHeightMap = {
+    700: 600,
+    800: 700,
+    900: 800,
+    1000: 900,
+    1100: 1000,
+    1500: 1100,
+  };
+
+  const fontTokenPrefix = 'theme.typography.fonts.size';
+  const lineHeightTokenPrefix = 'theme.typography.lineHeights';
+
+  // Replace old color tokens to new color tokens
+  const newSource = file.source
+    .replace(
+      /(brand|feedback|action|static|white|badge|surface)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)\.?([a-z0-9]+)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)\.?([aA-zZ0-9]+)/g,
+      (originalString) => {
+        if (originalString.includes('highContrast') && !originalString.includes('feedback')) {
+          return 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN';
+        }
+
+        const replacement = colorTokensMapping[originalString];
+
+        if (!replacement) {
+          return originalString;
+        }
+        return replacement;
+      },
+    )
+    // Replace old font sizes & line height in the source code with new font sizes & line height
+    .replace(
+      // gets both .50 and ['50'] or ["50"]
+      /theme\.typography\.fonts\.size\.?((\w+)|(\W.*\]))/g,
+      (originalString, match) => {
+        const token = match.replace(/\[|\]|'|"/g, '');
+        const replacement = fontSizeMap[token];
+        if (!replacement) {
+          return originalString;
+        }
+        return `${fontTokenPrefix}[${fontSizeMap[token]}]`;
+      },
+    )
+    .replace(
+      // gets both .50 and ['50'] or ["50"]
+      /theme\.typography\.lineHeights\.?((\w+)|(\W.*\]))/g,
+      (originalString, match) => {
+        const token = match.replace(/\[|\]|'|"/g, '');
+        const replacement = lineHeightMap[token];
+        if (!replacement) {
+          return originalString;
+        }
+        return `${lineHeightTokenPrefix}[${lineHeightMap[token]}]`;
+      },
+    );
+
+  // Don't transform if the file doesn't import `@razorapy/blade/components` because it's not using Blade components
+  // Allow the migration test file to be transformed
+  if (!newSource.includes('@razorpay/blade/components') && file.path !== undefined) {
+    return newSource;
+  }
+
+  const j = api.jscodeshift;
+  const root = j.withParser('tsx')(newSource);
+
+  // Update the themeTokens prop in BladeProvider
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'BladeProvider',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'themeTokens',
+        },
+      })
+      .replaceWith(({ node }) => {
+        node.value.expression.name = 'bladeTheme';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the themeTokens prop in BladeProvider.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update color token value based on the context
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => /(Text|Title|Code|Display|Heading|Box|Icon)/i.test(name),
+          },
+        },
+      })
+      // Find all color props
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name.toLowerCase().includes('color'),
+        },
+      })
+      .replaceWith((path) => {
+        const { node, parent } = path;
+
+        // If the color prop is an expression, don't bother updating it contextually
+        if (isExpression(node)) {
+          return node;
+        }
+
+        const isBoxComponent = parent.value.name.name === 'Box';
+        const isIconComponent = parent.value.name.name?.includes('Icon');
+        const isBorderColorProp = (node.name.name as string).includes('border');
+        const isColorProp = node.name.name === 'color';
+
+        if (isBoxComponent && isBorderColorProp) {
+          node.value.value = node.value.value
+            .replace('background', 'border')
+            .replace('intense', 'normal');
+        } else if (
+          isIconComponent &&
+          isColorProp &&
+          /surface.(background|text).(gray|staticWhite|positive|negative|notice|information|neutral|primary|staticBlack)/i.test(
+            node.value.value,
+          )
+        ) {
+          node.value.value = node.value.value
+            .replace(/surface.(background|text)/i, 'interactive.icon')
+            .replace('intense', 'normal');
+
+          // Typography components
+        } else if (!isBoxComponent && !isIconComponent && isColorProp) {
+          node.value.value = node.value.value.replace('background', 'text');
+
+          if (!node.value.value.includes('feedback')) {
+            node.value.value = node.value.value.replace('intense', 'normal');
+          }
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the color token value based on the context.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  migrateTypographyComponents({ root, j, file });
+  migrateContrastIntentAndColorProps({ root, j, file });
+  migrateBadgeComponent({ root, j, file });
+  migrateCardComponent({ root, j, file });
+  migrateAmountComponent({ root, j, file });
+  migrateDividerComponent({ root, j, file });
+  migrateActionListAndTable({ root, j, file });
+  migrateDropdownComponent({ root, j, file });
+
+  // Update ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme"
+  try {
+    root
+      .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';
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the ImportSpecifier from "paymentTheme"/"bankingTheme" to "bladeTheme".`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  return root.toSource(options.printOptions);
+};
+
+export default transformer;

package/codemods/brand-refresh/transformers/migrate-actionlist-and-table.ts

@@ -0,0 +1,32 @@
+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, {
+        openingElement: {
+          name: {
+            name: (name) => ['ActionList', 'Table'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        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;

package/codemods/brand-refresh/transformers/migrate-amount.ts

@@ -0,0 +1,173 @@
+import { red, isExpression } from './utils';
+
+// Amount component: changes to intent, size, & prefix props
+function migrateAmountComponent({ root, j, file }): void {
+  try {
+    // <Amount size=”heading-small-bold”> -> <Amount type=”heading” size=”small” weight=”semibold”>
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        if (!sizeAttribute) {
+          return node;
+        }
+
+        if (isExpression(sizeAttribute)) {
+          console.warn(
+            red('\n⛔️ Expression found in the "size" attribute, please update manually:'),
+            red(`${file.path}:${sizeAttribute?.loc?.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        const otherAttributes = node.openingElement.attributes.filter(
+          (attribute) => attribute.name?.name !== 'size',
+        );
+
+        const sizeMap = {
+          'body-small': {
+            type: 'body',
+            size: 'small',
+          },
+          'body-small-bold': {
+            type: 'body',
+            size: 'small',
+            weight: 'semibold',
+          },
+          'body-medium': {
+            type: 'body',
+            size: 'medium',
+          },
+          'body-medium-bold': {
+            type: 'body',
+            size: 'medium',
+            weight: 'semibold',
+          },
+          'heading-small': {
+            type: 'body',
+            size: 'large',
+          },
+          'heading-small-bold': {
+            type: 'body',
+            size: 'large',
+            weight: 'semibold',
+          },
+          'heading-large': {
+            type: 'heading',
+            size: 'medium',
+          },
+          'heading-large-bold': {
+            type: 'heading',
+            size: 'medium',
+            weight: 'semibold',
+          },
+          'title-small': {
+            type: 'heading',
+            size: 'large',
+          },
+          'title-medium': {
+            type: 'heading',
+            size: 'xlarge',
+          },
+        };
+
+        const sizeAttributeValue = sizeAttribute.value.value;
+
+        Object.keys(sizeMap[sizeAttribute.value.value]).forEach((key) => {
+          otherAttributes.push(
+            j.jsxAttribute(
+              j.jsxIdentifier(key),
+              j.literal(sizeMap[sizeAttributeValue][key as keyof typeof sizeMap]),
+            ),
+          );
+        });
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "size" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // <Amount intent=”positive”> -> <Amount color="feedback.text.positive.intense">
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'intent',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'color';
+        node.value.value = `feedback.text.${node.value.value}.intense`;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "intent" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // <Amount prefix=”currency-symbol”> -> <Amount currencyIndicator=”currency-symbol”>
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'prefix',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'currencyIndicator';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "prefix" prop in "Amount" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateAmountComponent;

package/codemods/brand-refresh/transformers/migrate-badge.ts

@@ -0,0 +1,28 @@
+import { red } from './utils';
+
+// Badge component Migration, remove the `fontWeight` prop
+function migrateBadgeComponent({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) => ['Badge', 'CardHeaderBadge'].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'fontWeight',
+        },
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while removing the fontWeight prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateBadgeComponent;

package/codemods/brand-refresh/transformers/migrate-card.ts

@@ -0,0 +1,43 @@
+import { red } from './utils';
+
+// Card components Migration
+// <Card surfaceLevel={2|3} > -> <Card backgroundColor=”surface.background.gray.moderate”|surface.background.gray.intense>
+function migrateCardAndTable({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Card',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'surfaceLevel',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const surfaceLevelMap = {
+          1: 'surface.background.subtle',
+          2: 'surface.background.gray.moderate',
+          3: 'surface.background.gray.intense',
+        };
+
+        node.name.name = 'backgroundColor';
+
+        node.value = j.literal(surfaceLevelMap[node.value.expression.value]);
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Card component.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateCardAndTable;