@razorpay/blade 11.39.0 → 12.0.0

package/build/types/utils/index.native.d.ts

@@ -329,34 +329,40 @@ type Spacing = Readonly<{
 }>;
 
 type Duration = {
-    /** `70` milliseconds */
-    '2xquick': 70;
-    /** `150` milliseconds */
-    xquick: 150;
+    /** `80` milliseconds */
+    '2xquick': 80;
+    /** `160` milliseconds */
+    xquick: 160;
     /** `200` milliseconds */
     quick: 200;
-    /** `250` milliseconds */
-    moderate: 250;
-    /** `300` milliseconds */
-    xmoderate: 300;
-    /** `400` milliseconds */
-    gentle: 400;
-    /** `600` milliseconds */
-    xgentle: 600;
-    /** `900` milliseconds */
-    '2xgentle': 900;
+    /** `280` milliseconds */
+    moderate: 280;
+    /** `360` milliseconds */
+    xmoderate: 360;
+    /** `480` milliseconds */
+    gentle: 480;
+    /** `640` milliseconds */
+    xgentle: 640;
+    /** `960` milliseconds */
+    '2xgentle': 960;
 };
 type Delay = {
-    /** `70` milliseconds */
-    '2xshort': 70;
-    /** `120` milliseconds */
-    xshort: 120;
-    /** `180` milliseconds */
-    short: 180;
+    /** `80` milliseconds */
+    '2xquick': 80;
+    /** `160` milliseconds */
+    xquick: 160;
+    /** `280` milliseconds */
+    moderate: 280;
+    /** `480` milliseconds */
+    gentle: 480;
+    /** `960` milliseconds */
+    xgentle: 960;
+    /** `2000` milliseconds */
+    long: 2000;
     /** `3000` milliseconds */
-    long: 3000;
+    xlong: 3000;
     /** `5000` milliseconds */
-    xlong: 5000;
+    '2xlong': 5000;
 };
 type EasingFactoryFn = {
     factory: () => (value: number) => number;
@@ -366,55 +372,62 @@ type EasingType<Value extends string> = Platform.Select<{
     native: EasingFactoryFn;
 }>;
 type Easing = {
-    /** Easings for all standard animations*/
-    standard: {
-        /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
-        /** `cubic-bezier(0.3, 0, 0.2, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
-        /** `cubic-bezier(0.5, 0, 0, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
-        /** `cubic-bezier(1, 0.5, 0, 0.5)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
-    };
-    /** Easings for all entrance animations*/
-    entrance: {
-        /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
-        /** `cubic-bezier(0, 0, 0.2, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
-        /** `cubic-bezier(0, 0, 0, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
-    };
-    /** Easings for all exit animations*/
-    exit: {
-        /** `cubic-bezier(0.7, 0, 0.5, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
-        /** `cubic-bezier(0.17, 0, 1, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
-        /** `cubic-bezier(0.5, 0, 1, 1)`
-         *
-         *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFactoryFn` for native */
-        revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
-    };
+    /**
+     * Linear Easing
+     *
+     * Use Case: Marquee, Progress Bar, etc
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    linear: EasingType<'cubic-bezier(0, 0, 0, 0)'>;
+    /**
+     * Entrance Animation Easing
+     *
+     * Use Case: Entry of modals, drawer, dropdown, etc
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    entrance: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
+    /**
+     * Exit Animation Easing
+     *
+     * Use Case: Exit of modals, drawer, dropdown, etc
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    exit: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
+    /**
+     * Standard Easing
+     *
+     * Use Case: Morph
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    standard: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
+    /**
+     * Emphasized Easing
+     *
+     * Use Case: Hover states of interactive items
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    emphasized: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
+    /**
+     * Overshoot Easing
+     *
+     * Use Case: Toast notifications
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    overshoot: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /**
+     * Error Easing
+     *
+     * Use Case: Error States
+     *
+     * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+     */
+    shake: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
 };
 type Motion = Readonly<{
     delay: Delay;

package/codemods/migrate-motion-tokens/transformers/__tests__/migrate-motion-tokens.test.ts

@@ -0,0 +1,130 @@
+import { applyTransform } from '@hypermod/utils';
+import transformer from '..';
+
+it('should update token for dashboard sidebar example', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    export const SidebarContainer = styled.div<SidebarContainerProps>(
+      ({ theme, isRTUXHomepage, isVisible, isMobile }) => \`
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      background-color: \${
+        isRTUXHomepage
+          ? isMobile
+            ? theme.colors.surface.background.cloud.subtle
+            : 'transparent'
+          : '#2e3345'
+      };
+      transform: translate(-100%,0);
+      transition: transform \${makeMotionTime(theme.motion.delay.short)} \${
+        theme.motion.easing.standard.effective
+      };
+    \`);     
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "export const SidebarContainer = styled.div<SidebarContainerProps>(
+          ({ theme, isRTUXHomepage, isVisible, isMobile }) => \`
+          display: flex;
+          flex-direction: column;
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          background-color: \${
+            isRTUXHomepage
+              ? isMobile
+                ? theme.colors.surface.background.cloud.subtle
+                : 'transparent'
+              : '#2e3345'
+          };
+          transform: translate(-100%,0);
+          transition: transform \${makeMotionTime(theme.motion.delay.short)} \${
+            theme.motion.easing.standard
+          };
+        \`);"
+  `);
+});
+
+it('should update token when used as prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+      function App() {
+        const { theme } = useTheme();
+
+        return <Box easing={theme.motion.easing.standard.wary} />
+      }     
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "function App() {
+            const { theme } = useTheme();
+
+            return <Box easing={theme.motion.easing.shake} />
+          }"
+  `);
+});
+
+it('should update token as used in X payroll', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    export const AnimatedContainer = styled.div<{ delay?: number }>(({ theme, delay = 0 }) => {
+      return css\`
+        animation: \${entry} \${makeMotionTime(theme.motion.duration['2xgentle'])}
+          \${theme.motion.easing.entrance.revealing} forwards;
+        animation-delay: \${delay}ms;
+        opacity: 0;
+      \`;
+    });
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "export const AnimatedContainer = styled.div<{ delay?: number }>(({ theme, delay = 0 }) => {
+          return css\`
+            animation: \${entry} \${makeMotionTime(theme.motion.duration['2xgentle'])}
+              \${theme.motion.easing.entrance} forwards;
+            animation-delay: \${delay}ms;
+            opacity: 0;
+          \`;
+        });"
+  `);
+});
+
+it('should update token when variable name is not "theme"', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    export const AnimatedContainer = styled.div<{ delay?: number }>(({ theme, delay = 0 }) => {
+      return css\`
+        animation: \${entry} \${makeMotionTime(paymentTheme.motion.duration['2xgentle'])}
+          \${paymentTheme.motion.easing.exit.effective} forwards;
+        animation-delay: \${delay}ms;
+        opacity: 0;
+      \`;
+    });
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "export const AnimatedContainer = styled.div<{ delay?: number }>(({ theme, delay = 0 }) => {
+          return css\`
+            animation: \${entry} \${makeMotionTime(paymentTheme.motion.duration['2xgentle'])}
+              \${paymentTheme.motion.easing.exit} forwards;
+            animation-delay: \${delay}ms;
+            opacity: 0;
+          \`;
+        });"
+  `);
+});

package/codemods/migrate-motion-tokens/transformers/index.ts

@@ -0,0 +1 @@
+export { default } from './migrate-motion';

package/codemods/migrate-motion-tokens/transformers/migrate-motion.ts

@@ -0,0 +1,24 @@
+import type { FileInfo } from 'jscodeshift';
+// eslint-disable-next-line import/extensions
+import * as tokenMapping from './motionTokenMapping.json';
+
+const transformer = (file: FileInfo): string => {
+  // Fairly simple usecases of motion tokens in razorpay files so this works.
+  // .replace has also worked well during rebranding
+  // eslint-disable-next-line no-useless-escape
+  const newSource = file.source.replace(/motion\.easing\.[\w\.]+/g, (matchingToken) => {
+    const match = Object.entries(tokenMapping).find(
+      ([oldToken, _newToken]) => oldToken === matchingToken,
+    );
+
+    if (match) {
+      return match[1];
+    }
+
+    return matchingToken;
+  });
+
+  return newSource;
+};
+
+export default transformer;

package/codemods/migrate-motion-tokens/transformers/motionTokenMapping.json

@@ -0,0 +1,11 @@
+{
+  "motion.easing.entrance.effective": "motion.easing.entrance",
+  "motion.easing.standard.effective": "motion.easing.standard",
+  "motion.easing.exit.effective": "motion.easing.exit",
+  "motion.easing.entrance.revealing": "motion.easing.entrance",
+  "motion.easing.standard.revealing": "motion.easing.emphasized",
+  "motion.easing.exit.revealing": "motion.easing.exit",
+  "motion.easing.entrance.attentive": "motion.easing.overshoot",
+  "motion.easing.exit.attentive": "motion.easing.exit",
+  "motion.easing.standard.wary": "motion.easing.shake"
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.39.0",
+  "version": "12.0.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -239,6 +239,7 @@
     "fastify": "4.28.1",
     "figures": "3.2.0",
     "flat": "5.0.2",
+    "motion": "11.12.0",
     "globby": "14.0.1",
     "ismobilejs": "1.1.1",
     "jest": "29.6.1",
@@ -292,6 +293,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": "^5",
+    "framer-motion": ">=4",
     "react-native": "^0.72",
     "@floating-ui/react-native": "^0.10.0",
     "react-native-reanimated": "^3.4.1",