feat: upgrade framer-motion to v6

.storybook/main.js

@@ -1,6 +1,9 @@
 module.exports = {
   stories: ["../src/**/*.story.tsx", "../src/**/*.story.js"],
   webpackFinal: async (config) => {
+    // Add '.mjs' to extensions
+    config.resolve.extensions.push(".mjs");
+
     // Resolve error when webpack-ing storybook:
     // Can't import the named export 'Children' from non EcmaScript module (only
     // default export is available)

package.json

@@ -10,11 +10,12 @@
     "ci": "yarn && yarn build && yarn test && yarn run check",
     "new": "plop",
     "generate:theme": "npx tsx src/scripts/generateTheme.ts && prettier -w src/theme/theme.ts",
-    "start": "concurrently \"yarn build --watch\" \"yarn start:storybook\"",
+    "start": "concurrently \"yarn build:watch\" \"yarn start:storybook\"",
     "start:cypress": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
     "start:storybook": "start-storybook -p 9999",
     "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
     "build": "rollup -c",
+    "build:watch": "rollup -c --watch",
     "build:storybook": "build-storybook",
     "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'yarn ci'\"",
     "check": "yarn warn:prepush && yarn check:types && yarn check:lint && yarn check:format",
@@ -87,7 +88,6 @@
     "@storybook/addon-toolbars": "^6.1.9",
     "@storybook/addon-viewport": "^6.1.9",
     "@storybook/codemod": "^6.1.9",
-    "@storybook/react": "^6.3.12",
     "@storybook/theming": "^6.1.9",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "^12.1.5",
@@ -128,8 +128,8 @@
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
     "prettier": "^3.4.2",
-    "react": "17.0.2",
     "re-resizable": "^6.10.3",
+    "react": "17.0.2",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
@@ -154,6 +154,7 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@nulogy/tokens": "^5.4.0",
     "@reach/dialog": "0.17.0",
+    "@storybook/react": "6.3.12",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-window": "^1.8.8",
@@ -162,7 +163,7 @@
     "date-fns": "2.23.0",
     "debounce": "^1.2.0",
     "deep-equal": "^2.2.1",
-    "framer-motion": "^3.1.3",
+    "framer-motion": "6.5.1",
     "i18next": "^19.3.1",
     "polished": "3.4.4",
     "react-datepicker": "^4.25.0",

src/NDSProvider/ModalStyleOverride.tsx

@@ -3,6 +3,9 @@ import { createGlobalStyle } from "styled-components";
 const ModalStyleOverride = createGlobalStyle<{ locale?: string }>(({ theme, locale }) => {
   const fontFamily = locale === "zh_CN" ? theme.fonts.sc : theme.fonts.base;
   return {
+    ":root": {
+      "--reach-dialog": 1,
+    },
     ".ReactModal__Content, [data-reach-dialog-content]": {
       "-webkit-font-smoothing": "antialiased",
       "-moz-osx-font-smoothing": "grayscale",

src/Toggle/ToggleButton.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useImperativeHandle } from "react";
 import { motion } from "framer-motion";
-import type { TransformProperties } from "framer-motion/types/motion/types";
 import type { Transition } from "framer-motion";
 import styled, { useTheme } from "styled-components";
 import { DefaultNDSThemeType } from "../theme";
@@ -28,7 +27,7 @@ type ToggleButtonProps = React.ComponentPropsWithRef<"input"> & {
 
 type AnimationConfig = {
   transition: Transition;
-  scale: TransformProperties["scale"];
+  scale: string | number;
 };
 
 const getSwitchBackground = (toggled) => (toggled ? "darkBlue" : "darkGrey");