@razorpay/blade 10.23.5 → 11.1.0

package/codemods/brand-refresh/transformers/migrate-contrast-intent-color-props.ts

@@ -0,0 +1,298 @@
+import { red } from './utils';
+
+function migrateContrastIntentAndColorProps({ root, j, file }): void {
+  // Break `contrast="high"` prop from Typography & ProgressBar Components
+  try {
+    root
+      .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(
+            path.parent.value.name.name,
+          ) &&
+          path.node.name.name === 'contrast' &&
+          path.node.value.value === 'high' &&
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      )
+      .replaceWith((path) => {
+        path.node.value.value = 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN';
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while breaking the "contrast" prop from Typography Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Bade/Counter/IconButton/Alert Components: Change `contrast` prop to `emphasis`
+  try {
+    root
+      .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';
+
+        const contrastToEmphasisMap = {
+          alert: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          badge: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          counter: {
+            low: 'subtle',
+            high: 'intense',
+          },
+          iconbutton: {
+            low: 'intense',
+            high: 'subtle',
+          },
+        };
+
+        path.node.value.value =
+          contrastToEmphasisMap[path.parent.value.name.name.toLowerCase()][[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 Bade/Counter/IconButton Components:`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Spinner: Change `contrast` prop to `color`
+  // <Spinner contrast="low|high" /> -> <Spinner color="primary|white" />
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Spinner',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        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
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Skeleton',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'contrast',
+        },
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the "contrast" prop from Skeleton.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Remove deprecated 'intent'/'variant' props in favor of color
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              [
+                'Alert',
+                'Badge',
+                'Counter',
+                'Chip',
+                'ChipGroup',
+                'Indicator',
+                'ProgressBar',
+                'CardHeaderBadge',
+                'CardHeaderCounter',
+              ].includes(name),
+          },
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        const colorAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'color',
+        );
+
+        if (colorAttribute) {
+          node.openingElement.attributes = node.openingElement.attributes.filter(
+            (attribute) => attribute.name?.name !== 'intent' && attribute.name?.name !== 'variant',
+          );
+
+          return node;
+        }
+
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        const intentAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'intent',
+        );
+
+        // If type and contrast are not present, return the node
+        if (!(variantAttribute || intentAttribute)) {
+          return node;
+        }
+
+        const variantValue = variantAttribute?.value.value;
+        const intentValue = intentAttribute?.value.value;
+
+        node.openingElement.attributes?.push(
+          j.jsxAttribute(
+            j.jsxIdentifier('color'),
+            j.literal(
+              ['blue', 'none'].includes(variantValue || intentValue)
+                ? 'primary'
+                : variantValue || intentValue,
+            ),
+          ),
+        );
+
+        return node;
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: (name) => name === 'intent' || name === 'variant',
+        },
+      })
+      // Remove duplicate intent/variant props
+      .filter(
+        (path, index, self) =>
+          index === self.findIndex((obj) => path.node.start === obj.node.start),
+      )
+      .replaceWith((path) => {
+        if (path.node.value.value === 'blue' || path.node.value.value === 'default') {
+          path.node.value.value = 'primary';
+        }
+
+        return path.node;
+      })
+      .remove();
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while removing the deprecated "intent" and "variant" props.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Change color="default" to color="primary" in Button/Link/Badge/Counter/Chip/ChipGroup/Spinner
+  // <Button variant="secondary" color="default"> -> <Button variant="secondary" color="primary">
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: (name) =>
+              [
+                'Button',
+                'Link',
+                'Badge',
+                'Counter',
+                'Chip',
+                'ChipGroup',
+                'CardHeaderBadge',
+                'CardHeaderCounter',
+                'CardHeaderIconButton',
+                'CardHeaderLink',
+                'Spinner',
+              ].includes(name),
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'color',
+        },
+        value: {
+          value: 'default',
+        },
+      })
+      .replaceWith((path) => {
+        path.node.value.value = 'primary';
+
+        return path.node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Button color prop.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateContrastIntentAndColorProps;

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

@@ -0,0 +1,38 @@
+import { red } from './utils';
+
+// Divider component migration: Change the variant prop value from “normal” to “muted”
+// <Divider variant=”normal”> -> <Divider variant=”muted”>
+function migrateDividerComponent({ root, j, file }): void {
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Divider',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'variant',
+        },
+        value: {
+          value: 'normal',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.value.value = 'muted';
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(`⛔️ ${file.path}: Oops! Ran into an issue while updating the Divider component.`),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateDividerComponent;

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

@@ -0,0 +1,81 @@
+import { red } from './utils';
+
+function migrateDropdownComponent({ root, j, file }): void {
+  // Dropdown component: Remove onDismiss prop in favor of onOpenChange
+  // <Dropdown onDismiss={() => console.log('dismissed')}> ->
+  // <Dropdown
+  //    onOpenChange={(isOpen) => {
+  //        if (!isOpen) {
+  //         console.log('dismissed');
+  //     }
+  // >
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'Dropdown',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'onDismiss',
+        },
+      })
+      .replaceWith((path) => {
+        const { node } = path;
+
+        node.name.name = 'onOpenChange';
+
+        // If the onDismiss prop is a function, we need to wrap the function body in an if statement that checks if the dropdown is open or not
+        // If the onDismiss prop is not a function, but a variable reference, we need to call the variable reference without arguments
+        // Following are the different ways the onDismiss prop can be defined:
+        // onDismiss={handleDismiss}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { handleDismiss() } }}
+        // onDismiss={() => console.log("Dismissed!!!")}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        // onDismiss={function () { console.log("Dismissed!!!") }}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        // onDismiss={() => { console.log("Dismissed!!!") }}
+        //      -> onOpenChange={(isOpen) => { if (!isOpen) { console.log("Dismissed!!!") } }}
+        let isOpenIfBlockStatement = j.blockStatement([
+          j.expressionStatement(j.callExpression(node.value.expression, [])),
+        ]);
+
+        // If the onDismiss prop is arrow function or function expression
+        if (
+          j.ArrowFunctionExpression.check(node.value.expression) ||
+          j.FunctionExpression.check(node.value.expression)
+        ) {
+          // If the function body is a block statement, we can just use that
+          if (node.value.expression.body.type === 'BlockStatement') {
+            isOpenIfBlockStatement = node.value.expression.body;
+          } else {
+            // If the function body is not a block statement, we need to wrap it in one
+            isOpenIfBlockStatement = j.blockStatement([
+              j.expressionStatement(node.value.expression.body),
+            ]);
+          }
+        }
+
+        node.value.expression = j.arrowFunctionExpression(
+          [j.identifier('isOpen')],
+          j.blockStatement([
+            j.ifStatement(j.unaryExpression('!', j.identifier('isOpen')), isOpenIfBlockStatement),
+          ]),
+        );
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "onDismiss" prop in the "Dropdown" component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+}
+
+export default migrateDropdownComponent;