feat(Motion): motion integration branch (#2435)

* start integration branch * docs(motion-presets): Motion Refresh / Presets RFC 2024 (#2336) * feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * docs: update animationInteractions docs * feat: add view transitions API note * feat: add view transitions API note * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat: add videos locally * feat: revert to previous fade video * feat: rename transition prop to type * docs: update AnimateInteractions prop * remove unrelated changes * feat: add PR link * fix: PR link * feat: add breaking change note * feat(motion.ts): add refreshed tokens and internal components migration (#2356) * feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * feat: update all token values * feat: motion, migrate internal motion tokens * fix: ts check * fix: ts * fix: switch delay * fix: durations map * docs: update animationInteractions docs * feat: add view transitions API note * feat: add view transitions API note * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat(motion): add initial presets code (#2360) * feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * feat: update all token values * feat: motion, migrate internal motion tokens * fix: ts check * fix: ts * fix: switch delay * feat: add base entry exit presets * fix: example card alignment * feat: add stagger component * feat: add animateInteractions * refactor: use common BaseMotionBox * refactor: move stagger and animateinteraction check * fix: durations map * feat: add morph and scale preset * feat: add Slide * refactor: remove unused code add todo * docs: update animationInteractions docs * feat: add css bezier function * feat: add view transitions API note * feat: add view transitions API note * feat: add controled scale, enhancer animateinteraction * feat: replace framer-motion imports with motion/react * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat: add fade token values * fix(AnimateInteractions): a11y focus issues * feat: add token valyes for move * feat: add slide tokens * fix: stories * fix: typecheck * feat: add refs to components till checkbox * feat: add refs till radio * feat: migration to ref till typography * feat: add withRef story * fix: scale box * feat: add shouldUnmountWhenHidden * feat: handle no unmount transitions in stagger * feat: add slideFromOffset prop * refactor: simplify basemotion * feat: add memo for variants object * fix: focus on animate interactions * fix: resolve anurag's comments * feat: add comments for getOuterMotionRef * feat: add delay prop * fix: stagger type * feat: support framer-motion v4 * feat: add borderRadius and backgroundColor morph support * feat: remove reduced motion handling * docs(Motion Presets): add motion presets documentation (#2428) * feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * feat: update all token values * feat: motion, migrate internal motion tokens * fix: ts check * fix: ts * fix: switch delay * feat: add base entry exit presets * fix: example card alignment * feat: add stagger component * feat: add animateInteractions * refactor: use common BaseMotionBox * refactor: move stagger and animateinteraction check * fix: durations map * feat: add morph and scale preset * feat: add Slide * refactor: remove unused code add todo * docs: update animationInteractions docs * feat: add css bezier function * feat: add view transitions API note * feat: add view transitions API note * feat: add controled scale, enhancer animateinteraction * feat: replace framer-motion imports with motion/react * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat: add fade token values * fix(AnimateInteractions): a11y focus issues * feat: add token valyes for move * feat: add slide tokens * fix: stories * fix: typecheck * feat: add refs to components till checkbox * feat: add refs till radio * feat: migration to ref till typography * feat: add withRef story * fix: scale box * feat: add basic stories * refactor: docs * feat: add shouldUnmountWhenHidden * docs: add docs for other entry/exit presets * feat: add stagger documentation * feat: handle no unmount transitions in stagger * feat: add dashboard example * fix: workspace animation on dashboard recipe * feat: add slideFromOffset prop * feat: add loading screen to dashboard example * refactor: simplify basemotion * feat: add slide docs fix * docs: minor docs changes * feat: add memo for variants object * feat: add installation docs, expose overlay colors * fix: focus on animate interactions * docs: remove docs page of recipes * fix: scale performance * fix: ts * feat: add basic intro page for motion * docs: finish motion intro docs * feat: add basic upgrade guide info * fix: resolve anurag's comments * feat: add comments for getOuterMotionRef * feat: add delay prop * fix: types * fix: stagger type * feat: support framer-motion v4 * feat: add version upgrade guide * feat: add jsdoc, pass down boxProps to stagger * feat: reuse motion installation mdx * feat: add borderRadius and backgroundColor morph support * fix: button morph example * fix: morph showcase * feat: add lazy motion * test(Motion): add tests and codemod (#2436) * feat: init motion presets rfc * docs: add poc video * docs: add comparison table and pocs * feat: add gsap poc * add layout animations poc with blade components * feat: add basic API decision * feat: add api decisions and memes * feat: add api decisions and memes * feat: remove unrelated changes * docs: add morph note * feat: add video example * docs: add note for previews * docs: add more videos * fix: images * fix: code alignments * docs: fix widths of cols * feat: add chat interface demo * typo * fix: width of previews * feat: update all token values * feat: motion, migrate internal motion tokens * fix: ts check * fix: ts * fix: switch delay * feat: add base entry exit presets * fix: example card alignment * feat: add stagger component * feat: add animateInteractions * refactor: use common BaseMotionBox * refactor: move stagger and animateinteraction check * fix: durations map * feat: add morph and scale preset * feat: add Slide * refactor: remove unused code add todo * docs: update animationInteractions docs * feat: add css bezier function * feat: add view transitions API note * feat: add view transitions API note * feat: add controled scale, enhancer animateinteraction * feat: replace framer-motion imports with motion/react * feat: rename framer motion to motion/react * feat: add framer motion name change note in library table * docs: add new open questions and conclusions * fix: change misleading scale heading * feat: add fade token values * fix(AnimateInteractions): a11y focus issues * feat: add token valyes for move * feat: add slide tokens * fix: stories * fix: typecheck * feat: add refs to components till checkbox * feat: add refs till radio * feat: migration to ref till typography * feat: add withRef story * fix: scale box * feat: add basic stories * refactor: docs * feat: add shouldUnmountWhenHidden * docs: add docs for other entry/exit presets * feat: add stagger documentation * feat: handle no unmount transitions in stagger * feat: add dashboard example * fix: workspace animation on dashboard recipe * feat: add slideFromOffset prop * feat: add loading screen to dashboard example * refactor: simplify basemotion * feat: add slide docs fix * docs: minor docs changes * feat: add memo for variants object * feat: add installation docs, expose overlay colors * fix: focus on animate interactions * docs: remove docs page of recipes * fix: scale performance * fix: ts * feat: add basic intro page for motion * docs: finish motion intro docs * feat: add tests for basic components * tests: update snapshots * feat: add interaction tests * feat: add codemod * feat: add basic upgrade guide info * fix: resolve anurag's comments * feat: add comments for getOuterMotionRef * feat: add delay prop * fix: types * fix: stagger type * feat: support framer-motion v4 * feat: add version upgrade guide * feat: add jsdoc, pass down boxProps to stagger * feat: reuse motion installation mdx * fix: basemotion mock * fix: motion/react instances * fix: native test * fix: transitions on card * fix: snapshot for card * fix: lint issues * fix: typecheck * fix: lint * fix: regex lint * fix: text lint * feat: add borderRadius and backgroundColor morph support * fix: slide test * upgrade guide cleanup * heading level cleanup in upgrade guide * fix: button morph example * fix: morph showcase * feat: add lazy motion * fix: typecheck * fix: native snapshots * Create fluffy-bikes-drop.md * fix: conflicts * fix: features.js extension in PR preview sandbox * fix: GlobalStyles undefined * feat: add motion to peerDependency as well like framer-motion * fix: recommend `framer-motion` name installation instead of `motion/react` (#2443) * fix: mark motion as optional peer deps * feat: mark motion external * fix: check if its working without motion as external * fix: mark motion/react as external * feat: recommend framer-motion name instead * fix: stackblitz examples minor cleanup
razorpay · Dec 11, 2024 · 663da58 · 663da58
1 parent 3532461
commit 663da58
Show file tree

Hide file tree

Showing 313 changed files with 12,700 additions and 4,256 deletions.
diff --git a/.changeset/fluffy-bikes-drop.md b/.changeset/fluffy-bikes-drop.md
@@ -0,0 +1,7 @@
+---
+"@razorpay/blade": major
+---
+
+feat(Motion): Release Motion Presets
+
+- Check out [Blade v12 Upgrade Guide](https://github.com/razorpay/blade/blob/master/packages/blade/docs/migration-docs/upgrade-v12.md) for codemod and migration steps
diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx
@@ -11,6 +11,7 @@ import { DocsContainer } from '@storybook/addon-docs';
 import React from 'react';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import './global.css';
+import { domMax, LazyMotion } from 'framer-motion';
 
 export const parameters = {
   // disable snapshot by default and then enable it only for kitchen sink
@@ -73,6 +74,17 @@ export const parameters = {
         ],
         'Components',
         ['*', 'Interaction Tests', 'KitchenSink'],
+        'Motion',
+        [
+          'Introduction to Motion',
+          'Fade',
+          'Move',
+          'Slide',
+          '*',
+          'AnimateInteractions',
+          'Stagger',
+          'Recipes',
+        ],
         'Recipes',
       ],
     },
@@ -95,13 +107,15 @@ export const parameters = {
       }
       return (
         <DocsContainer context={context}>
-          <BladeProvider
-            key={`${context.store.globals.globals.themeTokenName}-${context.store.globals.globals.colorScheme}`}
-            themeTokens={getThemeTokens()}
-            colorScheme={context.store.globals.globals.colorScheme}
-          >
-            {children}
-          </BladeProvider>
+          <LazyMotion strict features={domMax}>
+            <BladeProvider
+              key={`${context.store.globals.globals.themeTokenName}-${context.store.globals.globals.colorScheme}`}
+              themeTokens={getThemeTokens()}
+              colorScheme={context.store.globals.globals.colorScheme}
+            >
+              {children}
+            </BladeProvider>
+          </LazyMotion>
         </DocsContainer>
       );
     },
@@ -147,7 +161,8 @@ const StoryCanvas = styled.div<{ context }>(
         context.kind.includes('/Carousel') ||
         context.kind.includes('/TopNav') ||
         context.kind.includes('/Examples') ||
-        context.kind.includes('/SideNav')
+        context.kind.includes('/SideNav') ||
+        context.kind.includes('/Recipes')
           ? '0rem'
           : '2rem'
       };
@@ -180,15 +195,18 @@ export const decorators = [
     return (
       <ErrorBoundary>
         <GlobalStyle />
-        <BladeProvider
-          key={`${context.globals.themeTokenName}-${context.globals.colorScheme}`}
-          themeTokens={getThemeTokens()}
-          colorScheme={context.globals.colorScheme}
-        >
-          <StoryCanvas context={context}>
-            <Story />
-          </StoryCanvas>
-        </BladeProvider>
+        {/* strict in LazyMotion will make sure we don't use excessive `motion` component in blade components and instead use light weight `m` */}
+        <LazyMotion strict features={domMax}>
+          <BladeProvider
+            key={`${context.globals.themeTokenName}-${context.globals.colorScheme}`}
+            themeTokens={getThemeTokens()}
+            colorScheme={context.globals.colorScheme}
+          >
+            <StoryCanvas context={context}>
+              <Story />
+            </StoryCanvas>
+          </BladeProvider>
+        </LazyMotion>
       </ErrorBoundary>
     );
   },
@@ -228,7 +246,6 @@ export const globalTypes = {
       showName: true,
     },
   },
-  // TODO: Rebranding - Uncomment this when we fix white-labeling
   brandColor: {
     name: 'Brand Color',
     description: 'Brand Color (You can pass any valid color to BladeProvider)',

diff --git a/...blade/codemods/migrate-motion-tokens/transformers/__tests__/migrate-motion-tokens.test.ts b/...blade/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;
+          \`;
+        });"
+  `);
+});
diff --git a/packages/blade/codemods/migrate-motion-tokens/transformers/index.ts b/packages/blade/codemods/migrate-motion-tokens/transformers/index.ts
@@ -0,0 +1 @@
+export { default } from './migrate-motion';
diff --git a/packages/blade/codemods/migrate-motion-tokens/transformers/migrate-motion.ts b/packages/blade/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;
diff --git a/packages/blade/codemods/migrate-motion-tokens/transformers/motionTokenMapping.json b/packages/blade/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"
+}
diff --git a/packages/blade/docs/guides/Installation.stories.mdx b/packages/blade/docs/guides/Installation.stories.mdx
@@ -22,6 +22,8 @@ import {
   Box,
 } from '../../src/components';
 
+import MotionInstallation from '../../src/components/BaseMotion/docs/MotionInstallation.mdx';
+
 <Meta title="Guides/Installation" />
 
 # Installation
@@ -77,7 +79,8 @@ Before you install the package, make sure that you have performed the following
     <TabList>
       <TabItem value="basic">1. Basic Setup</TabItem>
       <TabItem value="fonts">2. Install Fonts</TabItem>
-      <TabItem value="ts">3. TypeScript</TabItem>
+      <TabItem value="motion">3. Setup Motion React</TabItem>
+      <TabItem value="ts">4. TypeScript</TabItem>
     </TabList>
   </Box>
   <TabPanel value="basic">
@@ -90,7 +93,7 @@ Before you install the package, make sure that you have performed the following
         <Text>Blade has a few peer dependencies that you may already have installed in your project. If so, you can skip adding them again.</Text>
 
         ```shell
-        yarn add @razorpay/blade [email protected] @razorpay/[email protected] @razorpay/[email protected]
+        yarn add @razorpay/blade [email protected] @razorpay/[email protected] @razorpay/[email protected] [email protected]
         ```
         <List>
           <ListItem>
@@ -248,6 +251,16 @@ Before you install the package, make sure that you have performed the following
         ```
 
   </TabPanel>
+
+  <TabPanel value="motion">
+    <Heading size="large" marginTop="spacing.7">Add motion to your application</Heading>
+
+    Assuming you've followed the first step and installed `framer-motion` in your project, Here's how we recommend you to setup the project-
+
+    <MotionInstallation />
+
+  </TabPanel>
+
   <TabPanel value="ts">
     <Heading size="large" marginY="spacing.7">TypeScript Setup</Heading>