Migration to Chakra UI v2 (#140)

* start migration process ref to #137

* fix conflicts

* finish migration

* fix dnd type

* update node version in circleci

* Update config.yml

* Update config.yml

* add github action & remove circle ci

* add test

* Update test stack

* fix eslint

* upgrade chakraui theme & icon & react

* fix codesandbox version & framer motion

* update header menu link

* fix spacing

Co-authored-by: Baptiste Adrien <adrien.baptiste@gmail.com>

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/check.yml

@@ -0,0 +1,13 @@
+on: [pull_request]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Check dependencies and build
+        run: yarn
+
+      - name: Run tests
+        run: yarn test:ci

jest.config.js

@@ -0,0 +1,18 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '~(.*)$': '<rootDir>/src/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,7 +1,8 @@
-const withPlugins = require('next-compose-plugins')
-const withTM = require('next-transpile-modules')(['browser-nativefs'])
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.BUNDLE_VISUALIZE == 1,
-})
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  /* config options here */
+}
 
-module.exports = withPlugins([[withBundleAnalyzer, {}], [withTM]])
+module.exports = nextConfig

package.json

@@ -5,11 +5,11 @@
   "dependencies": {
     "@bugsnag/js": "^6.5.2",
     "@bugsnag/plugin-react": "^6.5.0",
-    "@chakra-ui/icons": "^1.0.10",
-    "@chakra-ui/react": "^1.5.1",
-    "@chakra-ui/theme": "^1.8.2",
-    "@emotion/react": "^11.1.1",
-    "@emotion/styled": "^11.0.0",
+    "@chakra-ui/icons": "^2.0.9",
+    "@chakra-ui/react": "^2.3.2",
+    "@chakra-ui/theme": "^2.1.11",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@mdx-js/react": "^1.5.5",
     "@reach/combobox": "^0.7.3",
     "@rehooks/local-storage": "^2.1.1",
@@ -18,39 +18,37 @@
     "codesandbox": "^2.1.11",
     "coloreact": "^0.3.1",
     "copy-to-clipboard": "^3.2.1",
-    "framer-motion": "^3.3.0",
+    "framer-motion": "7.3.0",
+    "immer": "^9.0.15",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
     "lz-string": "^1.4.4",
-    "next": "^9.5.1",
+    "next": "^12.0.1",
     "next-redux-wrapper": "^6.0.2",
     "prism-react-renderer": "^1.0.2",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-color": "^2.18.0",
     "react-color-picker": "^4.0.2",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dom": "^16.12.0",
+    "react-dnd": "^13.0.0",
+    "react-dnd-html5-backend": "15.1.1",
+    "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^2.4.0",
     "react-icons": "^4.4.0",
     "react-redux": "^7.1.3",
-    "react-scripts": "3.3.0",
     "react-split-pane": "^0.1.89",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-undo": "^1.0.0",
-    "typescript": "^4.1.3",
     "webpack-bundle-analyzer": "^3.6.0"
   },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "test": "jest",
-    "analyze": "BUNDLE_VISUALIZE=1 react-app-rewired build"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "test": "jest --watch",
+    "test:ci": "jest --ci",
+    "analyze": "BUNDLE_VISUALIZE=1 react-app-rewired build",
+    "lint": "next lint"
   },
   "browserslist": {
     "production": [
@@ -66,59 +64,37 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^9.5.1",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^8.1.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.2.0",
+    "@testing-library/user-event": "14.2.0",
     "@types/jest": "^25.1.2",
     "@types/lodash": "^4.14.149",
     "@types/lz-string": "^1.3.33",
     "@types/prettier": "^1.19.0",
+    "@types/react": "^18.0.18",
     "@types/react-color": "^3.0.1",
+    "@types/react-dom": "^18.0.0",
     "@types/react-redux": "^7.1.7",
-    "babel-jest": "^26.2.2",
+    "eslint": "^8.23.0",
+    "eslint-config-next": "12.2.5",
     "husky": "^4.2.1",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
     "lint-staged": "^10.0.7",
     "next-compose-plugins": "^2.2.0",
-    "next-transpile-modules": "^4.0.2",
+    "next-transpile-modules": "^9.0.0",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
-    "ts-jest": "^26.1.4",
-    "typedoc": "^0.16.9"
+    "typedoc": "^0.16.9",
+    "typescript": "4.6.4"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && pretty-quick --staged"
-    }
+  "resolutions": {
+    "@types/react": "^17.0.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,md}": [
       "eslint src/**/*.{ts,tsx} --fix",
       "git add"
     ]
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.(svg|jpg|png|css)$": "<rootDir>/empty-module.js",
-      "~(.*)$": "<rootDir>/src/$1"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "ts",
-      "tsx"
-    ],
-    "transform": {
-      "^.+\\.(js)$": "babel-jest",
-      "^.+\\.ts(x)?$": "ts-jest"
-    },
-    "collectCoverageFrom": [
-      "src/**/*.(t|j)s(x)?",
-      "!**/node_modules/**"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "tsconfig.test.json"
-      }
-    }
   }
 }

src/components/CodePanel.tsx

@@ -56,9 +56,9 @@ const CodePanel = () => {
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className} style={style}>
             {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
+              <div key={i} {...getLineProps({ line, key: i })}>
                 {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
+                  <span key={key} {...getTokenProps({ token, key })} />
                 ))}
               </div>
             ))}

src/components/editor/ComponentPreview.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { init } from '@rematch/core'
 import { Provider } from 'react-redux'
 import { DndProvider } from 'react-dnd'
-import Backend from 'react-dnd-html5-backend'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 import { ChakraProvider } from '@chakra-ui/react'
 import theme from '@chakra-ui/theme'
 
@@ -22,7 +22,7 @@ function renderWithRedux(
   return {
     ...render(
       <ChakraProvider resetCSS theme={theme}>
-        <DndProvider backend={Backend}>
+        <DndProvider backend={HTML5Backend}>
           <Provider store={store}>{components}</Provider>
         </DndProvider>
       </ChakraProvider>,

src/components/editor/Editor.tsx

@@ -86,6 +86,7 @@ const Editor: React.FC = () => {
   }
 
   return (
+    // @ts-ignore
     <SplitPane
       style={{ overflow: 'auto' }}
       defaultSize="50%"

src/components/editor/previews/InputLeftElement.tsx

@@ -16,8 +16,8 @@ export const InputLeftElementPreview: React.FC<{ component: IComponent }> = ({
 
   return (
     <InputLeftElement top="10px" right="10px" {...props} ref={drop(ref)}>
-      {component.children.map((key: string) => (
-        <ComponentPreview componentName={key} />
+      {component.children.map((key: string, i: number) => (
+        <ComponentPreview key={i} componentName={key} />
       ))}
     </InputLeftElement>
   )

src/components/errorBoundaries/AppErrorBoundary.tsx

@@ -9,7 +9,7 @@ type ErrorBoundaryState = {
   hasError: boolean
 }
 
-type ErrorBoundaryProps = {}
+type ErrorBoundaryProps = { children?: React.ReactNode }
 
 export default class AppErrorBoundary extends Component<
   ErrorBoundaryProps,
@@ -67,7 +67,6 @@ export default class AppErrorBoundary extends Component<
         </Flex>
       )
     }
-
     return this.props.children
   }
 }

src/components/errorBoundaries/EditorErrorBoundary.tsx

@@ -13,6 +13,7 @@ type ErrorBoundaryState = {
 
 type ErrorBoundaryProps = {
   undo: () => void
+  children?: React.ReactNode
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
@@ -71,7 +72,6 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
         </Flex>
       )
     }
-
     return this.props.children
   }
 }

src/components/headerMenu/HeaderMenu.tsx

@@ -30,6 +30,8 @@ const MenuItemLink: React.FC<MenuItemLinkProps> = React.forwardRef(
   },
 )
 
+MenuItemLink.displayName = 'MenuItemLink'
+
 // @ts-ignore
 const CustomMenuButton: React.FC<
   MenuButtonProps | ButtonProps
@@ -38,6 +40,8 @@ const CustomMenuButton: React.FC<
   return <MenuButton as={Button} {...props} />
 })
 
+CustomMenuButton.displayName = 'CustomMenuButton'
+
 const ExportMenuItem = dynamic(() => import('./ExportMenuItem'), { ssr: false })
 const ImportMenuItem = dynamic(() => import('./ImportMenuItem'), { ssr: false })
 
@@ -55,12 +59,6 @@ const HeaderMenu = () => {
       <Portal>
         <LightMode>
           <MenuList bg="white" zIndex={999}>
-            {process.env.NEXT_PUBLIC_IS_V1 && (
-              <MenuItemLink isExternal href="https://v0.openchakra.app">
-                <Box mr={2} as={GoArchive} />
-                Chakra v0 Editor
-              </MenuItemLink>
-            )}
             <ExportMenuItem />
             <ImportMenuItem />
 
@@ -77,6 +75,16 @@ const HeaderMenu = () => {
               <Box mr={2} as={FaBomb} />
               Report issue
             </MenuItemLink>
+
+            <MenuDivider />
+            <MenuItemLink isExternal href="https://v0.openchakra.app">
+              <Box mr={2} as={GoArchive} />
+              Chakra v0 Editor
+            </MenuItemLink>
+            <MenuItemLink isExternal href="https://v1.openchakra.app">
+              <Box mr={2} as={GoArchive} />
+              Chakra v1 Editor
+            </MenuItemLink>
           </MenuList>
         </LightMode>
       </Portal>

src/components/inspector/Inspector.tsx

@@ -72,6 +72,8 @@ const CodeActionButton = memo(() => {
   )
 })
 
+CodeActionButton.displayName = 'CodeActionButton'
+
 const Inspector = () => {
   const dispatch = useDispatch()
   const component = useSelector(getSelectedComponent)
@@ -205,7 +207,7 @@ const Inspector = () => {
                     size="md"
                     autoFocus
                     variant="outline"
-                    isFullWidth
+                    width="100%"
                     focusBorderColor="blue.500"
                     errorBorderColor="red.500"
                     value={componentName}

src/components/inspector/controls/IconControl.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react'
 // import * as Chakra from '@chakra-ui/react'
-import { useTheme } from '@chakra-ui/react'
 import FormControl from './FormControl'
 import { useForm } from '~hooks/useForm'
 import usePropsSelector from '~hooks/usePropsSelector'