chore: first batch of react 18 related tasks

.storybook/main.js

@@ -1,7 +1,3 @@
-const path = require("path")
-
-const toPath = (_path) => path.join(process.cwd(), _path)
-
 module.exports = {
   stories: ["../packages/**/stories/*.stories.tsx"],
   addons: [
@@ -10,20 +6,22 @@ module.exports = {
     "@storybook/addon-storysource",
     "storybook-addon-performance/register",
   ],
+  features: {
+    emotionAlias: false,
+  },
   typescript: {
     reactDocgen: false,
   },
-  webpackFinal: async (config) => {
-    return {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          "@emotion/core": toPath("node_modules/@emotion/react"),
-          "emotion-theming": toPath("node_modules/@emotion/react"),
-        },
-      },
-    }
+  webpackFinal: (config) => {
+    // https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
+    // framer-motion uses the .mjs notation and we need to include it so that webpack will
+    // transpile it for us correctly (enables using a CJS module inside an ESM).
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    })
+    // Return the altered config
+    return config
   },
 }

.storybook/preview.tsx

@@ -56,25 +56,27 @@ const withChakra = (StoryFn: Function, context: StoryContext) => {
   }, [dir])
 
   return (
-    <ChakraProvider
-      theme={extendTheme({
-        direction: dir,
-        semanticTokens: {
-          colors: {
-            semantic: {
-              default: "red.500",
-              _light: "red.500",
-              _dark: "blue.400",
+    <React.StrictMode>
+      <ChakraProvider
+        theme={extendTheme({
+          direction: dir,
+          semanticTokens: {
+            colors: {
+              semantic: {
+                default: "red.500",
+                _light: "red.500",
+                _dark: "blue.400",
+              },
             },
           },
-        },
-      })}
-    >
-      <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
-        <ColorModeToggleBar />
-        <StoryFn />
-      </div>
-    </ChakraProvider>
+        })}
+      >
+        <div dir={dir} id="story-wrapper" style={{ minHeight: "100vh" }}>
+          <ColorModeToggleBar />
+          <StoryFn />
+        </div>
+      </ChakraProvider>
+    </React.StrictMode>
   )
 }
 

@types/framer-motion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react"
+
+declare module "framer-motion" {
+  export interface AnimatePresenceProps {
+    children?: React.ReactNode
+  }
+}

examples/create-react-app/package.json

@@ -4,19 +4,19 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "2.0.0-next.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "framer-motion": "^4.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "framer-motion": "^6.2.9",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
     "eslint-config-react-app": "^6.0.0",
     "react-scripts": "^4.0.1",
     "typescript": "^4.3.5"

examples/gatsby/package.json

@@ -7,9 +7,9 @@
   "dependencies": {
     "@chakra-ui/gatsby-plugin": "3.0.0-next.0",
     "@chakra-ui/react": "2.0.0-next.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "framer-motion": "^4.0.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "framer-motion": "^6.2.9",
     "gatsby": "^3.0.0",
     "gatsby-image": "^2.8.0",
     "gatsby-plugin-manifest": "^3.3.0",
@@ -19,8 +19,8 @@
     "gatsby-source-filesystem": "^3.3.0",
     "gatsby-transformer-sharp": "^3.3.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

examples/gatsby/yarn.lock

@@ -1870,7 +1870,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.4.0":
+"@emotion/react@^11.9.0":
   version "11.5.0"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
   integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==

examples/next-js/package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@chakra-ui/react": "2.0.0-next.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "framer-motion": "^4.0.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "framer-motion": "^6.2.9",
     "next": "^12.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

examples/nextjs-typescript/package.json

@@ -12,17 +12,17 @@
     "@chakra-ui/icons": "*",
     "@chakra-ui/react": "2.0.0-next.0",
     "@chakra-ui/theme-tools": "*",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@types/faker": "^5.1.5",
     "@types/node": "^16.11.12",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
     "faker": "^5.1.0",
-    "framer-motion": "^4.0.0",
+    "framer-motion": "^6.2.9",
     "next": "^12.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.2.0",
     "typescript": "^4.3.5"
   },

examples/storybook-addon/package.json

@@ -5,8 +5,8 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@storybook/addon-actions": "~6.3.12",
-    "@storybook/react": "~6.3.12"
+    "@storybook/addon-actions": "~6.5.0-alpha.60",
+    "@storybook/react": "~6.5.0-alpha.60"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^6.3.12",

package.json

@@ -42,6 +42,7 @@
     "build:prop-docs": "yarn pkg props-docs build",
     "build:tokens": "chakra-cli tokens packages/theme",
     "build": "yarn build:babel && yarn build:cli && preconstruct build && yarn build:tokens",
+    "watch": "yarn preconstruct watch",
     "test": "jest --maxWorkers=50%",
     "test:watch": "jest --maxWorkers=25% --watch --onlyChanged",
     "test:ci": "jest --color --runInBand --ci",
@@ -65,8 +66,10 @@
     "notify:release": "yarn changelog:write && yarn discord && yarn changelog:commit"
   },
   "resolutions": {
-    "**/react": "17.0.2",
-    "**/react-dom": "17.0.2",
+    "@types/react": "18.0.1",
+    "@types/react-dom": "18.0.0",
+    "**/react": "18.0.0",
+    "**/react-dom": "18.0.0",
     "@popperjs/core": "2.9.3"
   },
   "version": "1.0.0",
@@ -82,27 +85,27 @@
     "@changesets/cli": "2.18.1",
     "@commitlint/cli": "14.1.0",
     "@commitlint/config-conventional": "14.1.0",
-    "@emotion/jest": "^11.6.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/jest": "^11.9.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@jest/types": "27.4.2",
     "@manypkg/cli": "0.19.1",
     "@preconstruct/cli": "^2.1.5",
-    "@storybook/addon-a11y": "~6.3.12",
-    "@storybook/addon-actions": "~6.3.12",
+    "@storybook/addon-a11y": "~6.5.0-alpha.60",
+    "@storybook/addon-actions": "~6.5.0-alpha.60",
     "@storybook/addon-knobs": "~6.3.1",
-    "@storybook/addon-storysource": "^6.3.12",
-    "@storybook/addon-toolbars": "~6.3.12",
-    "@storybook/cli": "~6.3.12",
-    "@storybook/react": "~6.3.12",
-    "@storybook/theming": "^6.3.12",
+    "@storybook/addon-storysource": "^6.5.0-alpha.60",
+    "@storybook/addon-toolbars": "~6.5.0-alpha.60",
+    "@storybook/cli": "~6.5.0-alpha.60",
+    "@storybook/react": "~6.5.0-alpha.60",
+    "@storybook/theming": "^6.5.0-alpha.60",
     "@swc-node/jest": "^1.3.5",
     "@types/edit-json-file": "^1.6.1",
     "@types/jest": "^27.0.3",
     "@types/mkdirp": "1.0.2",
     "@types/node": "^16.11.12",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "5.3.2",
     "@types/react-table": "7.7.9",
     "@types/shelljs": "0.8.9",
@@ -130,7 +133,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-testing-library": "3.9.2",
     "execa": "5.1.1",
-    "framer-motion": "^4.0.0",
+    "framer-motion": "^6.2.9",
     "husky": "^7.0.4",
     "inquirer": "7.3.3",
     "jest": "27.3.1",
@@ -142,9 +145,9 @@
     "mkdirp": "^1.0.4",
     "plop": "2.7.6",
     "prettier": "^2.4.1",
-    "react": "^17.0.1",
+    "react": "^18.0.0",
     "react-chartjs-2": "^3.3.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-hook-form": "7.18.1",
     "react-icons": "^4.2.0",
     "react-lorem-component": "0.13.0",

packages/accordion/package.json

@@ -47,8 +47,8 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "framer-motion": "^4.0.0",
-    "react": "^17.0.1"
+    "framer-motion": "^6.2.9",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
     "@chakra-ui/system": ">=1.0.0",

packages/accordion/src/accordion.tsx

@@ -95,7 +95,10 @@ const [AccordionItemProvider, useAccordionItemContext] =
   })
 
 export interface AccordionItemProps
-  extends Omit<HTMLChakraProps<"div">, keyof UseAccordionItemProps>,
+  extends Omit<
+      HTMLChakraProps<"div">,
+      keyof UseAccordionItemProps | "children"
+    >,
     UseAccordionItemProps {
   children?: MaybeRenderProp<{
     isExpanded: boolean

packages/alert/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   },
   "peerDependencies": {
     "@chakra-ui/system": ">=1.0.0",

packages/avatar/package.json

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   },
   "dependencies": {
     "@chakra-ui/image": "1.1.10",

packages/breadcrumb/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   },
   "dependencies": {
     "@chakra-ui/react-utils": "1.2.3",

packages/button/package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   },
   "dependencies": {
     "@chakra-ui/hooks": "1.9.1",

packages/checkbox/package.json

@@ -46,8 +46,8 @@
   },
   "devDependencies": {
     "@chakra-ui/system": "1.12.1",
-    "framer-motion": "^4.0.0",
-    "react": "^17.0.1"
+    "framer-motion": "^6.2.9",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
     "@chakra-ui/system": ">=1.0.0",

packages/checkbox/stories/checkbox.stories.tsx

@@ -63,10 +63,10 @@ export const WithIconColor = () => (
 export const withColorScheme = () => {
   return (
     <Stack>
-      <Checkbox defaultIsChecked colorScheme="red">
+      <Checkbox defaultChecked colorScheme="red">
         Hello world
       </Checkbox>
-      <Checkbox defaultIsChecked>Hello world</Checkbox>
+      <Checkbox defaultChecked>Hello world</Checkbox>
     </Stack>
   )
 }
@@ -236,13 +236,8 @@ export const ControlledCheckboxGroup = () => {
 
 export const CustomCheckboxGroup = () => {
   function CustomCheckbox(props: any) {
-    const {
-      state,
-      getCheckboxProps,
-      getInputProps,
-      getLabelProps,
-      htmlProps,
-    } = useCheckbox(props)
+    const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
+      useCheckbox(props)
 
     return (
       <chakra.label

packages/clickable/package.json

@@ -39,6 +39,6 @@
     "react": ">=16.8.6"
   },
   "devDependencies": {
-    "react": "^17.0.1"
+    "react": "^18.0.0"
   }
 }