Setup nextjs (premieroctet#95)

* Setup nextjs

* Remove useless var

* Revert changes for utils/import.ts

* Fix tests

* Improve header menu

* Fix tests & build

.env

@@ -1,2 +1,2 @@
-REACT_APP_VERSION=1
-REACT_APP_BUGSNAG_API_KEY=XXX
+NEXT_PUBLIC_VERSION=1
+NEXT_PUBLIC_BUGSNAG_API_KEY=18bc83982a86e6477448b6bc16c0c18e

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.next

empty-module.js

@@ -0,0 +1 @@
+module.exports = ''

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,7 @@
+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,
+})
+
+module.exports = withPlugins([[withBundleAnalyzer, {}], [withTM]])

package.json

@@ -20,6 +20,8 @@
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
     "lz-string": "^1.4.4",
+    "next": "^9.5.1",
+    "next-redux-wrapper": "^6.0.2",
     "prism-react-renderer": "^1.0.2",
     "react": "^16.12.0",
     "react-color": "^2.18.0",
@@ -39,9 +41,10 @@
     "webpack-bundle-analyzer": "^3.6.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test --env=jsdom",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "jest",
     "analyze": "BUNDLE_VISUALIZE=1 react-app-rewired build"
   },
   "eslintConfig": {
@@ -60,6 +63,7 @@
     ]
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^9.5.1",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.1.0",
@@ -69,13 +73,14 @@
     "@types/prettier": "^1.19.0",
     "@types/react-color": "^3.0.1",
     "@types/react-redux": "^7.1.7",
-    "customize-cra": "^0.9.1",
-    "customize-cra-react-refresh": "^1.0.1",
+    "babel-jest": "^26.2.2",
     "husky": "^4.2.1",
     "lint-staged": "^10.0.7",
+    "next-compose-plugins": "^2.2.0",
+    "next-transpile-modules": "^4.0.2",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
-    "react-app-rewired": "^2.1.5",
+    "ts-jest": "^26.1.4",
     "typedoc": "^0.16.9"
   },
   "husky": {
@@ -88,5 +93,29 @@
       "eslint src/**/*.{ts,tsx} --fix",
       "git add"
     ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(svg|jpg|png|css)$": "<rootDir>/empty-module.js"
+    },
+    "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/Header.tsx

@@ -28,7 +28,7 @@ import useDispatch from '../hooks/useDispatch'
 import { useSelector } from 'react-redux'
 import { getComponents } from '../core/selectors/components'
 import { getShowLayout, getShowCode } from '../core/selectors/app'
-import HeaderMenu from './HeaderMenu'
+import HeaderMenu from './headerMenu/HeaderMenu'
 
 const CodeSandboxButton = () => {
   const components = useSelector(getComponents)

src/components/headerMenu/ExportMenuItem.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { MenuItem, Box } from '@chakra-ui/core'
+import { FaSave } from 'react-icons/fa'
+import { saveAsJSON } from '../../utils/import'
+import { getComponents } from '../../core/selectors/components'
+
+const ExportMenuItem = () => {
+  const components = useSelector(getComponents)
+
+  return (
+    <MenuItem onClick={() => saveAsJSON(components)}>
+      <Box mr={2} as={FaSave} />
+      Save components
+    </MenuItem>
+  )
+}
+
+export default ExportMenuItem

src/components/HeaderMenu.tsx → src/components/headerMenu/HeaderMenu.tsx

@@ -1,4 +1,5 @@
 import React, { memo } from 'react'
+import dynamic from 'next/dynamic'
 import {
   Box,
   Button,
@@ -13,13 +14,8 @@ import {
   MenuButtonProps,
   ButtonProps,
 } from '@chakra-ui/core'
-import useDispatch from '../hooks/useDispatch'
-import { loadFromJSON, saveAsJSON } from '../utils/import'
-import { useSelector } from 'react-redux'
-import { getComponents } from '../core/selectors/components'
-import { FaBomb, FaSave } from 'react-icons/fa'
+import { FaBomb } from 'react-icons/fa'
 import { GoRepo } from 'react-icons/go'
-import { FiUpload } from 'react-icons/fi'
 
 type MenuItemLinkProps = MenuItemProps | LinkProps
 
@@ -40,19 +36,10 @@ const CustomMenuButton: React.FC<
   return <MenuButton as={Button} {...props} />
 })
 
-const ExportMenuItem = () => {
-  const components = useSelector(getComponents)
+const ExportMenuItem = dynamic(() => import('./ExportMenuItem'), { ssr: false })
+const ImportMenuItem = dynamic(() => import('./ImportMenuItem'), { ssr: false })
 
-  return (
-    <MenuItem onClick={() => saveAsJSON(components)}>
-      <Box mr={2} as={FaSave} />
-      Save components
-    </MenuItem>
-  )
-}
 const HeaderMenu = () => {
-  const dispatch = useDispatch()
-
   return (
     <Menu>
       <CustomMenuButton
@@ -67,15 +54,7 @@ const HeaderMenu = () => {
       <LightMode>
         <MenuList zIndex={100}>
           <ExportMenuItem />
-          <MenuItem
-            onClick={async () => {
-              const components = await loadFromJSON()
-              dispatch.components.reset(components)
-            }}
-          >
-            <Box mr={2} as={FiUpload} />
-            Import components
-          </MenuItem>
+          <ImportMenuItem />
 
           <MenuDivider />
 

src/components/headerMenu/ImportMenuItem.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { MenuItem, Box } from '@chakra-ui/core'
+import { FiUpload } from 'react-icons/fi'
+import { loadFromJSON } from '../../utils/import'
+import useDispatch from '../../hooks/useDispatch'
+
+const ImportMenuItem = () => {
+  const dispatch = useDispatch()
+
+  return (
+    <MenuItem
+      onClick={async () => {
+        const components = await loadFromJSON()
+        dispatch.components.reset(components)
+      }}
+    >
+      <Box mr={2} as={FiUpload} />
+      Import components
+    </MenuItem>
+  )
+}
+
+export default ImportMenuItem

src/components/inspector/controls/ColorsControl.tsx

@@ -25,7 +25,6 @@ import FormControl from './FormControl'
 import { useForm } from '../../../hooks/useForm'
 import omit from 'lodash/omit'
 import ColorPicker from 'coloreact'
-import 'react-color-picker/index.css'
 import usePropsSelector from '../../../hooks/usePropsSelector'
 
 type ColorControlPropsType = {

src/components/inspector/inputs/InputSuggestion.tsx

@@ -5,7 +5,6 @@ import {
   ComboboxPopover,
   ComboboxList,
 } from '@reach/combobox'
-import '@reach/combobox/styles.css'
 import { Input } from '@chakra-ui/core'
 import { useForm } from '../../../hooks/useForm'
 

src/components/inspector/panels/styles/TextPanel.tsx

@@ -14,8 +14,6 @@ import InputSuggestion from '../../inputs/InputSuggestion'
 import { useForm } from '../../../../hooks/useForm'
 import usePropsSelector from '../../../../hooks/usePropsSelector'
 
-import '@reach/combobox/styles.css'
-
 const TextPanel = () => {
   const { setValue, setValueFromEvent } = useForm()
   const theme = useTheme()

src/core/store.ts

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 import undoable from 'redux-undo'
 import { persistReducer, persistStore } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
+import { createWrapper, MakeStore } from 'next-redux-wrapper'
 
 import { ComponentsStateWithUndo } from './models/components'
 import { AppState } from './models/app'
@@ -14,7 +15,7 @@ export type RootState = {
   components: ComponentsStateWithUndo
 }
 
-const version = parseInt(process.env.REACT_APP_VERSION || '1', 10)
+const version = parseInt(process.env.NEXT_PUBLIC_VERSION || '1', 10)
 
 const persistConfig = {
   key: `openchakra_v${version}`,
@@ -26,7 +27,9 @@ const persistConfig = {
 
 const persistPlugin = {
   onStoreCreated(store: any) {
-    persistStore(store)
+    if (process.browser) {
+      persistStore(store)
+    }
   },
 }
 
@@ -51,4 +54,6 @@ export const storeConfig = {
 }
 
 // @ts-ignore
-export const store = init(storeConfig)
+export const makeStore: MakeStore<RootState> = () => init(storeConfig)
+
+export const wrapper = createWrapper<RootState>(makeStore, { debug: true })

src/pages/_app.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import App from '../App'
+import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core'
+import 'react-color-picker/index.css'
+import '@reach/combobox/styles.css'
+
+import { wrapper } from '../core/store'
+import { ErrorBoundary as BugsnagErrorBoundary } from '../utils/bugsnag'
+import AppErrorBoundary from '../components/errorBoundaries/AppErrorBoundary'
+
+const Main = () => (
+  <BugsnagErrorBoundary>
+    <ThemeProvider theme={theme}>
+      <AppErrorBoundary>
+        <CSSReset />
+        <App />
+      </AppErrorBoundary>
+    </ThemeProvider>
+  </BugsnagErrorBoundary>
+)
+
+export default wrapper.withRedux(Main)

src/utils/bugsnag.ts

@@ -3,7 +3,7 @@ import bugsnag from '@bugsnag/js'
 import bugsnagReact from '@bugsnag/plugin-react'
 
 export const bugsnagClient = bugsnag({
-  apiKey: process.env.REACT_APP_BUGSNAG_API_KEY as string,
+  apiKey: process.env.NEXT_PUBLIC_BUGSNAG_API_KEY as string,
   releaseStage: process.env.NODE_ENV,
   notifyReleaseStages: ['production'],
 })

tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "preserve"
   },
-  "include": ["src"]
+  "include": ["src", "next-env.d.ts"],
+  "exclude": ["node_modules"]
 }

tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}