fix: recommend framer-motion name installation instead of `motion/r…

…eact` (#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

packages/blade/docs/guides/Installation.stories.mdx

@@ -93,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 styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8 motion@11.12.0
+        yarn add @razorpay/blade styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8 framer-motion@11.13.3
         ```
         <List>
           <ListItem>
@@ -255,7 +255,7 @@ Before you install the package, make sure that you have performed the following
   <TabPanel value="motion">
     <Heading size="large" marginTop="spacing.7">Add motion to your application</Heading>
 
-    Assuming you've followed the first step and installed `motion` in your project, Here's how we recommend you to setup the project-
+    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 />
 

packages/blade/docs/migration-docs/upgrade-v12.md

@@ -8,13 +8,13 @@ We've changed the structure of motion easing tokens inorder to simplify the stru
 
 2. Motion React Setup
 
-Blade v12 introduces `motion` (prev `framer-motion`) as peer dependency and requires you to set it up in your projects.
+Blade v12 introduces `framer-motion` as peer dependency and requires you to set it up in your projects.
 
 ## Steps to Migrate
 
 - **Step 1:** Upgrade to latest `@razorpay/blade` package in your project
 - **Step 2:** [Perform Tokens Changes](#token-changes) using Codemod or manually
-- **Step 3:** [Setup `motion/react` (or `framer-motion`)](#motion-react-framer-motion-setup)
+- **Step 3:** [Setup framer-motion](#motion-react-framer-motion-setup)
 
 ## Token Changes
 
@@ -47,7 +47,7 @@ You can skip this if you've run the codemod but in case not or you see some edge
 
 > [!IMPORTANT]
 >
-> `framer-motion` library is now known as `motion/react`
+> `framer-motion` library is now known as `motion/react`. We still use `framer-motion` imports in blade to support older versions.
 >
 > Checkout the [announcement by creator of framer-motion](https://bsky.app/profile/citizenofnowhe.re/post/3lar365ouuk2v)
 
@@ -59,10 +59,10 @@ You can skip this if you've run the codemod but in case not or you see some edge
 We realised that several projects in razorpay are already using `framer-motion` and are on older versions.
 To give some time to consumers to upgrade to framer-motion v11+, we'll be supporting framer-motion v4+ from blade. Although we will be dropping this support in next major version of blade so we recommend planning out framer-motion upgrade in coming quarter.
 
-- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to motion/react v11+](#migrating-from-framer-motion-v4-to-motionreact-aka-framer-motion-v11)
+- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to framer-motion v11+](#migrating-from-framer-motion-v4-to-motionreact-aka-framer-motion-v11)
 - **For projects not on React 18 yet**, do plan out the upgrade soon to make sure future blade upgrades don't become blocker
 
-#### Migrating from `framer-motion` v4+ to `motion/react` (aka `framer-motion` v11)
+#### Migrating from `framer-motion` v4+ to `framer-motion` v11+
 
 1. Ensure you're on React 18 as `framer-motion` v7 makes React 18 a minimum supported version.
    a. [Checkout React 18 upgrade guide](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) or use [React's official codemod for upgrading](https://github.com/reactjs/react-codemod)
@@ -75,35 +75,34 @@ These are mostly the changes you'll need if you're using core API. But if you're
 
 ### Setting Up Motion in New Projects
 
-- #### Install `motion`
+- #### Install `framer-motion`
 
   ```sh
-  yarn add motion --dev # or pnpm install motion --save-dev
+  yarn add framer-motion@^11 --dev # or pnpm install framer-motion --save-dev
   ```
 
-- #### Setup reduced bundle version of `motion/react
+- #### Setup reduced bundle version of `framer-motion`
 
   ##### If you're only using basic presets like `Fade`, `Move`, `Slide`, `Stagger`, `AnimateInteractions`, etc
 
   ```ts
   // features.js
-  import { domAnimation } from 'motion/react';
+  import { domAnimation } from 'framer-motion';
   export default domAnimation; // ~15kb
   ```
 
   ##### If you're using `Morph` or Layout animations of Motion React
 
   ```ts
   // features.js
-  import { domMax } from 'motion/react';
+  import { domMax } from 'framer-motion';
   export default domMax; // ~25kb (This includes domAnimation bundle as well so no need to import domAnimation again)
   ```
 
   ##### Lazy load into your App.js
 
   ```tsx
-  import { LazyMotion } from 'motion/react';
-  import { m } from 'motion';
+  import { LazyMotion, m } from 'framer-motion';
 
   // Make sure to return the specific export containing the feature bundle.
   const loadFeatures = () => import('./features.js').then((res) => res.default);

packages/blade/package.json

@@ -294,7 +294,6 @@
     "react-dom": ">=18",
     "styled-components": "^5",
     "framer-motion": ">=4",
-    "motion": ">=11.12.0",
     "react-native": "^0.72",
     "@floating-ui/react-native": "^0.10.0",
     "react-native-reanimated": "^3.4.1",

packages/blade/rollup.config.mjs

@@ -51,6 +51,7 @@ const nativeExtensions = [
 const packageJsonDeps = Object.keys(packagejson.dependencies).filter(
   (name) => name !== 'patch-package',
 );
+
 const externalDependencies = packageJsonDeps;
 
 const inputRootDirectory = 'src';

packages/blade/src/components/BaseMotion/docs/MotionInstallation.mdx

@@ -6,23 +6,22 @@ This setup is taken from [Motion React - Reduce Bundle Size Docs](https://motion
 
 ```ts
 // features.js
-import { domAnimation } from 'motion/react';
+import { domAnimation } from 'framer-motion';
 export default domAnimation; // ~15kb
 ```
 
 #### If you're using `Morph` or Layout animations of Motion React
 
 ```ts
 // features.js
-import { domMax } from 'motion/react';
+import { domMax } from 'framer-motion';
 export default domMax; // ~25kb (This includes domAnimation bundle as well so no need to import domAnimation again)
 ```
 
 ### 2. Lazy load into your App.js
 
 ```tsx
-import { LazyMotion } from 'motion/react';
-import { m } from 'motion';
+import { LazyMotion, m } from 'framer-motion';
 
 // Make sure to return the specific export containing the feature bundle.
 const loadFeatures = () => import('./features.js').then((res) => res.default);

packages/blade/src/utils/storybook/Sandbox/baseCode.ts

@@ -59,7 +59,7 @@ export const getReactScriptsJSDependencies = (): Dependencies => {
       react: '^18',
       'react-dom': '^18',
       'react-scripts': '4.0.3',
-      motion: '11.12.0',
+      'framer-motion': '11.13.3',
       '@razorpay/blade': getBladeVersion(),
       'styled-components': packageJson.peerDependencies['styled-components'],
       '@razorpay/i18nify-js': packageJson.peerDependencies['@razorpay/i18nify-js'],
@@ -74,7 +74,7 @@ export const getViteReactTSDependencies = (): Dependencies => {
       react: '^19',
       'react-dom': '^19',
       'react-router-dom': '^6',
-      motion: '11.12.0',
+      'framer-motion': '11.13.3',
       'react-scripts': '4.0.3',
       '@types/react': '^19',
       '@types/react-dom': '^19',
@@ -107,7 +107,7 @@ export const vitePackageJSON = JSON.stringify(
 );
 
 export const featuresJS = dedent`// features.js
-import { domMax } from 'motion/react';
+import { domMax } from 'framer-motion';
 // ~25kb (Only expose domAnimations instead of domMax if you're not using Morph preset or layout animations in your project)
 export default domMax; 
 `;
@@ -262,7 +262,7 @@ export const getIndexTSX = ({
 import React from 'react';
 import { createRoot } from "react-dom/client";
 import { createGlobalStyle } from "styled-components";
-import { LazyMotion } from 'motion/react';
+import { LazyMotion } from 'framer-motion';
 
 const loadFeatures = () => import('./features.js').then((res) => res.default);