update to use motion (#12373)

GCTC-NTGC · Dec 27, 2024 · 27ae535 · 27ae535
1 parent 7e0d653
commit 27ae535
Show file tree

Hide file tree

Showing 21 changed files with 54 additions and 32 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -54,9 +54,9 @@
     "@tanstack/react-table": "^8.20.6",
     "dataloader": "^2.2.3",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.15.0",
     "graphql": "^16.10.0",
     "lodash": "^4.17.21",
+    "motion": "^11.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.5",

diff --git a/apps/web/src/components/Context/ContextProvider.tsx b/apps/web/src/components/Context/ContextProvider.tsx
@@ -1,5 +1,5 @@
 import { HelmetProvider } from "react-helmet-async";
-import { MotionConfig, LazyMotion, domAnimation } from "framer-motion";
+import { MotionConfig, LazyMotion, domAnimation } from "motion/react";
 import { ReactNode } from "react";
 
 import { AppInsightsProvider } from "@gc-digital-talent/app-insights";

diff --git a/apps/web/src/components/Layout/IAPLayout.tsx b/apps/web/src/components/Layout/IAPLayout.tsx
@@ -2,7 +2,7 @@ import { Fragment } from "react";
 import { useIntl } from "react-intl";
 import { useLocation, Outlet, ScrollRestoration } from "react-router";
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
-import { AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "motion/react";
 
 import {
   NestedLanguageProvider,

diff --git a/apps/web/src/components/NotificationDialog/NotificationDialog.tsx b/apps/web/src/components/NotificationDialog/NotificationDialog.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
-import { AnimatePresence, m, usePresence } from "framer-motion";
+import { AnimatePresence, m, usePresence } from "motion/react";
 import BellAlertIcon from "@heroicons/react/24/outline/BellAlertIcon";
 import BellAlertIconSm from "@heroicons/react/20/solid/BellAlertIcon";
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";

diff --git a/apps/web/src/components/SelfDeclaration/CommunityIcon.tsx b/apps/web/src/components/SelfDeclaration/CommunityIcon.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, m } from "framer-motion";
+import { AnimatePresence, m } from "motion/react";
 import { useFormContext } from "react-hook-form";
 
 import firstNationsOn from "~/assets/img/first-nations-true.webp";

diff --git a/apps/web/src/components/SpinnerIcon/SpinnerIcon.tsx b/apps/web/src/components/SpinnerIcon/SpinnerIcon.tsx
@@ -1,4 +1,4 @@
-import { m, useReducedMotion } from "framer-motion";
+import { m, useReducedMotion } from "motion/react";
 import ArrowPathIcon from "@heroicons/react/20/solid/ArrowPathIcon";
 
 import { IconProps } from "@gc-digital-talent/ui";

diff --git a/apps/web/src/pages/Home/IAPHomePage/Home.tsx b/apps/web/src/pages/Home/IAPHomePage/Home.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { m } from "framer-motion";
+import { m } from "motion/react";
 import orderBy from "lodash/orderBy";
 import { useSearchParams } from "react-router";
 import { useQuery } from "urql";

diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -84,7 +84,7 @@ export default defineConfig(({ command }) => ({
             "@microsoft/applicationinsights-react-js",
             "@microsoft/applicationinsights-web",
           ],
-          framer: ["framer-motion"],
+          motion: ["motion"],
           graphql: ["@gc-digital-talent/graphql"],
           react: ["react", "react-dom"],
           router: ["react-router", "react-router"],

diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -33,8 +33,8 @@
     "@tiptap/starter-kit": "^2.10.4",
     "date-fns": "^3.6.0",
     "downshift": "^9.0.8",
-    "framer-motion": "^11.15.0",
     "lodash": "^4.17.21",
+    "motion": "^11.15.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

diff --git a/packages/forms/src/components/Checkbox/Checkbox.tsx b/packages/forms/src/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 import get from "lodash/get";
 import { useFormContext } from "react-hook-form";
-import { useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "motion/react";
 import { ReactNode, Fragment } from "react";
 
 import Field from "../Field";

diff --git a/packages/forms/src/components/Combobox/Input.tsx b/packages/forms/src/components/Combobox/Input.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon";
 import ChevronDownIcon from "@heroicons/react/24/outline/ChevronDownIcon";
 import MagnifyingGlassIcon from "@heroicons/react/24/outline/MagnifyingGlassIcon";

diff --git a/packages/forms/src/components/Combobox/Menu.tsx b/packages/forms/src/components/Combobox/Menu.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from "react-intl";
 import CheckIcon from "@heroicons/react/20/solid/CheckIcon";
 import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
-import { motion, useReducedMotion } from "framer-motion";
+import { motion, useReducedMotion } from "motion/react";
 import omit from "lodash/omit";
 import {
   DetailedHTMLProps,

diff --git a/packages/forms/src/components/RadioGroup/RadioGroup.tsx b/packages/forms/src/components/RadioGroup/RadioGroup.tsx
@@ -1,5 +1,5 @@
 import { useFormContext } from "react-hook-form";
-import { useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "motion/react";
 import { ReactNode } from "react";
 
 import Field from "../Field";

diff --git a/packages/forms/src/components/Repeater/Repeater.tsx b/packages/forms/src/components/Repeater/Repeater.tsx
@@ -1,4 +1,4 @@
-import { motion, useReducedMotion } from "framer-motion";
+import { motion, useReducedMotion } from "motion/react";
 import { useIntl } from "react-intl";
 import ArrowUpIcon from "@heroicons/react/24/solid/ArrowUpIcon";
 import ArrowDownIcon from "@heroicons/react/24/solid/ArrowDownIcon";

diff --git a/packages/storybook-helpers/decorators/ReducedMotionDecorator.tsx b/packages/storybook-helpers/decorators/ReducedMotionDecorator.tsx
@@ -1,4 +1,4 @@
-import { LazyMotion, MotionConfig, domAnimation } from "framer-motion";
+import { LazyMotion, MotionConfig, domAnimation } from "motion/react";
 import isChromatic from "chromatic/isChromatic";
 import { StoryFn } from "@storybook/react";
 

diff --git a/packages/storybook-helpers/package.json b/packages/storybook-helpers/package.json
@@ -17,9 +17,9 @@
     "@storybook/react": "^8.4.7",
     "@urql/core": "^5.1.0",
     "chromatic": "^11.20.2",
-    "framer-motion": "^11.15.0",
     "graphql": "^16.10.0",
     "lodash": "^4.17.21",
+    "motion": "^11.15.0",
     "react-helmet-async": "^2.0.5",
     "react-router": "^7.1.1",
     "urql": "^4.2.1",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -37,8 +37,8 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "chromatic": "^11.20.2",
-    "framer-motion": "^11.15.0",
     "lodash": "^4.17.21",
+    "motion": "^11.15.0",
     "react-csv-downloader": "^3.2.0",
     "react-dom": "^18.2.0",
     "react-focus-lock": "^2.13.5",

diff --git a/packages/ui/src/components/CardRepeater/Card.tsx b/packages/ui/src/components/CardRepeater/Card.tsx
@@ -1,4 +1,4 @@
-import { m, useReducedMotion } from "framer-motion";
+import { m, useReducedMotion } from "motion/react";
 import { useIntl } from "react-intl";
 import ArrowDownIcon from "@heroicons/react/20/solid/ArrowDownIcon";
 import ArrowUpIcon from "@heroicons/react/20/solid/ArrowUpIcon";

diff --git a/packages/ui/src/components/Loading/Loading.tsx b/packages/ui/src/components/Loading/Loading.tsx
@@ -1,4 +1,4 @@
-import { m, useReducedMotion } from "framer-motion";
+import { m, useReducedMotion } from "motion/react";
 import { HTMLProps, ReactNode } from "react";
 
 export interface LoadingProps extends HTMLProps<HTMLDivElement> {

diff --git a/packages/ui/src/components/NavMenu/NavMenuWrapper.tsx b/packages/ui/src/components/NavMenu/NavMenuWrapper.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import FocusLock from "react-focus-lock";
-import { m, AnimatePresence, useReducedMotion } from "framer-motion";
+import { m, AnimatePresence, useReducedMotion } from "motion/react";
 import {
   KeyboardEventHandler,
   ReactNode,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml