@razorpay/blade 10.23.5 → 11.1.0

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

@@ -0,0 +1,342 @@
+import { red, isExpression } from './utils';
+// eslint-disable-next-line import/extensions
+import colorTokensMapping from './colorTokensMapping.json';
+
+function migrateTypographyComponents({ root, j, file }): void {
+  // Select Typography elements based on their names
+  const typographyJSXElements = root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: (name) =>
+          ['Text', 'Title', 'Code', 'Display', 'Heading', 'CardHeaderText'].includes(name),
+      },
+    },
+  });
+
+  // Update <Text variant="caption" size="medium" > to <Text variant="caption" size="small" >
+  try {
+    typographyJSXElements
+      .filter(
+        (path) =>
+          path.value.openingElement.name.name.includes('Text') &&
+          path.value.openingElement.attributes.some(
+            (attribute) =>
+              attribute.name?.name === 'variant' && attribute.value?.value === 'caption',
+          ),
+      )
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'size',
+        },
+        value: {
+          value: 'medium',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'small';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Text size prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update <Heading size="large|medium"> to <Heading size="medium|small">,
+  // <Heading size="small">, <Heading variant="regular"> to <Text size="large">, and
+  // <Heading variant="subheading"> to <Text size="small">
+  try {
+    typographyJSXElements
+      .filter((path) => path.value.openingElement.name.name === 'Heading')
+      // replace with Heading
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        if (isExpression(sizeAttribute) || isExpression(variantAttribute)) {
+          console.warn(
+            red(
+              '\n⛔️ Expression found in the "size"/"variant" 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 !== 'variant' && attribute.name?.name !== 'size',
+        );
+
+        const headingSizeMap = {
+          large: 'medium',
+          medium: 'small',
+          small: 'large',
+        };
+
+        // If size is small or variant is subheading, replace with Text
+        if (
+          !sizeAttribute ||
+          (sizeAttribute && sizeAttribute.value.value === 'small') ||
+          (variantAttribute && variantAttribute.value.value === 'subheading')
+        ) {
+          node.openingElement.name.name = 'Text';
+          node.closingElement.name.name = 'Text';
+        }
+
+        if (
+          !sizeAttribute &&
+          (!variantAttribute || (variantAttribute && variantAttribute.value.value === 'regular'))
+        ) {
+          otherAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal('large')));
+        } else if (sizeAttribute) {
+          otherAttributes.push(
+            j.jsxAttribute(
+              j.jsxIdentifier('size'),
+              j.literal(headingSizeMap[sizeAttribute.value.value]),
+            ),
+          );
+        } else if (variantAttribute && variantAttribute.value.value === 'subheading') {
+          otherAttributes.push(j.jsxAttribute(j.jsxIdentifier('size'), j.literal('small')));
+        }
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      })
+      .find(j.JSXAttribute)
+      .filter(
+        (path, index, self) =>
+          path.node.name.name === 'variant' &&
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      ) // Filter by name `variant` and remove any duplicates
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the Heading size and variant props.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Replace Title with Heading and update the 'size' attribute
+  // <Title size="medium"> to <Heading size="xlarge">
+  try {
+    typographyJSXElements
+      .filter((path) => path.value.openingElement.name.name === 'Title')
+      // replace with Heading
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.openingElement.name.name = 'Heading';
+        node.closingElement.name.name = 'Heading';
+
+        const sizeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'size',
+        );
+
+        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;
+        }
+
+        if (!sizeAttribute) {
+          node.openingElement.attributes.push(
+            j.jsxAttribute(j.jsxIdentifier('size'), j.literal('large')),
+          );
+
+          return node;
+        }
+
+        // Maps to transform Title sizes to Heading sizes
+        const titleToHeadingMap = {
+          xlarge: '2xlarge',
+          large: 'xlarge',
+          medium: 'xlarge',
+          small: 'large',
+        };
+
+        const otherAttributes = node.openingElement.attributes.filter(
+          (attribute) => attribute.name?.name !== 'size',
+        );
+        otherAttributes.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('size'),
+            j.literal(titleToHeadingMap[sizeAttribute.value.value] || 'large'),
+          ),
+        );
+
+        node.openingElement.attributes = otherAttributes;
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while migrating the Title component`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove/Update the Title import from "@razorpay/blade/components"
+  try {
+    root
+      .find(j.ImportDeclaration, {
+        source: {
+          value: '@razorpay/blade/components',
+        },
+      })
+      .find(j.ImportSpecifier, {
+        imported: {
+          name: 'Title',
+        },
+      })
+      .replaceWith((path) => {
+        // Check if Heading import is already present
+        const isHeadingImportPresent = path.parent.value.specifiers.some(
+          (node) => node.imported.name === 'Heading',
+        );
+
+        // If Heading import is not present, update the "Title" import to use "Heading"
+        if (!isHeadingImportPresent) {
+          path.value.imported.name = 'Heading';
+        } else {
+          // If "Heading" import is present, remove the "Title" import
+          path.parent.value.specifiers = path.parent.value.specifiers.filter(
+            (node) => node.imported.name !== 'Title',
+          );
+        }
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Title import.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove `type` and contrast="low" prop from Typography & ProgressBar Components
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              ['Text', 'Title', 'Display', 'Heading', 'ProgressBar', 'CardHeaderText'].includes(
+                name,
+              ),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        // If the node is a ProgressBar, return the node
+        if (node.openingElement.name.name === 'ProgressBar') {
+          return node;
+        }
+
+        const colorAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'color',
+        );
+
+        if (colorAttribute) {
+          node.openingElement.attributes = node.openingElement.attributes.filter(
+            (attribute) => attribute.name?.name !== 'contrast' && attribute.name?.name !== 'type',
+          );
+
+          return node;
+        }
+
+        const typeAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'type',
+        );
+
+        const contrastAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'contrast',
+        );
+
+        // If type and contrast are not present, return the node
+        if (!(typeAttribute || contrastAttribute)) {
+          return node;
+        }
+
+        const typeValue = typeAttribute?.value.value || 'normal';
+        const contrastValue = contrastAttribute?.value.value || 'low';
+
+        const oldColorToken = `surface.text.${typeValue}.${contrastValue}Contrast`;
+        const newColorToken = colorTokensMapping[oldColorToken];
+
+        if (newColorToken) {
+          node.openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('color'), j.literal(newColorToken)),
+          );
+        }
+
+        return node;
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'type' || name === 'contrast',
+        },
+        value: {
+          value: (value) => value !== 'high',
+        },
+      })
+      .filter(
+        (path, index, self) =>
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      ) // remove any duplicates
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "type" prop from Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Change 'weight="bold"' to 'weight="semibold"' in Heading, Text, Display
+  // Code still uses 'weight="bold"' and Title has been modified to the Heading Component
+  try {
+    typographyJSXElements
+      .filter((path) =>
+        ['Heading', 'Text', 'Display', 'CardHeaderText'].includes(
+          path.value.openingElement.name.name,
+        ),
+      )
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'weight',
+        },
+        value: {
+          value: 'bold',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'semibold';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "weight" prop in Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateTypographyComponents;

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

@@ -0,0 +1,7 @@
+import type { JSXAttribute, JSXExpressionContainer } from 'jscodeshift';
+
+export const isExpression = (prop: unknown): prop is JSXExpressionContainer => {
+  return (prop as JSXAttribute)?.value?.type === 'JSXExpressionContainer';
+};
+
+export const red = (message: string): string => `\u001b[1m\u001b[31m${message}\u001b[39m\u001b[22m`;

package/fonts.css

@@ -0,0 +1,82 @@
+@font-face {
+  font-family: 'TASA Orbiter';
+  src: url('./fonts/tasa-orbiter.woff2') format('woff2-variations');
+  font-weight: 125 950;
+  font-stretch: 75% 125%;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* inter-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-cyrillic-extra.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-cyrillic.woff2) format('woff2-variations');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* inter-greek-ext-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-greek-extra.woff2) format('woff2-variations');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-greek.woff2) format('woff2-variations');
+  unicode-range: U+0370-03FF;
+}
+
+/* inter-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-vietnamese.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* inter-latin-extra-rzp: custom font which excludes common to razorpay latin symbols */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-latin-blade-extra.woff2) format('woff2-variations');
+  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF,
+    U+2020, U+20C1-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* inter-latin-rzp */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-variable/inter-latin-blade.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20A0-20AF, U+20B0-20BF, U+20C0,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "10.23.5",
+  "version": "11.1.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -24,6 +24,8 @@
     "tokens.native.js",
     "utils.d.ts",
     "utils.js",
+    "fonts",
+    "fonts.css",
     "utils.native.js",
     "coverageUtils.d.ts"
   ],
@@ -35,6 +37,9 @@
     "blade"
   ],
   "exports": {
+    "./fonts.css": {
+      "default": "./fonts.css"
+    },
     "./components": {
       "react-native": {
         "types": "./components.d.ts",
@@ -82,7 +87,7 @@
     "typecheck": "run-p types:typecheck:*",
     "test": "run-p test:*",
     "prepare": "yarn build",
-    "build": "run-s build:clean build:generate-types build:react-prod build:react-dev build:react-native build:clean-declarations build:generate-root-imports build:generate-css-variables build:clean-theme-bundle",
+    "build": "run-s build:clean build:generate-types build:react-prod build:react-dev build:react-native build:clean-declarations build:generate-root-imports build:clean-theme-bundle",
     "clearCache": "jest --clearCache",
     "build:clean": "rm -rf build",
     "build:generate-types": "run-s types:generate-types:*",
@@ -99,7 +104,6 @@
     "build:react-prod": "cross-env FRAMEWORK=REACT NODE_ENV=production rollup -c",
     "build:react-native": "cross-env FRAMEWORK=REACT_NATIVE rollup -c",
     "build:clean-theme-bundle": "rm -rf build/js-bundle-for-css",
-    "build:generate-css-variables": "cross-env GENERATE_CSS_VARIABLES=true FRAMEWORK=REACT rollup -c && node ./scripts/generateCssThemeVariables.js",
     "react-native:get-stories": "sb-rn-get-stories --config-path=./.storybook/react-native && yarn prettier --write ./.storybook/react-native/storybook.requires.js",
     "react-native:storybook:android": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-android",
     "react-native:storybook:ios": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-ios",
@@ -160,6 +164,7 @@
     "@floating-ui/react-native": "0.10.0",
     "react-native-tab-view": "3.5.2",
     "react-native-pager-view": "6.2.1",
+    "@hypermod/utils": "0.4.2",
     "@react-native/metro-config": "0.72.9",
     "@react-native-async-storage/async-storage": "1.19.1",
     "@react-native-community/datetimepicker": "5.0.1",
@@ -256,6 +261,7 @@
     "postinstall-postinstall": "2.1.0",
     "react-refresh": "0.11.0",
     "react-docgen-typescript-plugin": "1.0.5",
+    "react-json-tree": "0.18.0",
     "metro-config": "0.66.2",
     "@babel/plugin-proposal-class-static-block": "7.21.0",
     "react-native-safe-area-context": "3.4.1",
@@ -334,7 +340,7 @@
       "name": "Import Button only",
       "path": "./build/lib/web/production/components/index.js",
       "import": "{ Button }",
-      "limit": "30 kb",
+      "limit": "31 kb",
       "running": false
     },
     {