feat: upgrade core deps for support react 18

.eslintignore

@@ -2,6 +2,7 @@ dist
 node_modules
 auto
 *.config.js
+*.config.mjs
 config-overrides.js
 .eslintrc.js
 .husky

.storybook/manager.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/addons'
 
-import theme from './theme';
+import theme from './theme'
 
 addons.setConfig({
   theme: theme,
-});
+})

.storybook/preview.js

@@ -4,7 +4,14 @@ import 'theme/css/preflight.css'
 import './assets/global-style.css'
 
 export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
   docs: {
     theme: themes.light,
   },
-};
+}

package.json

@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "1.0.2",
+  "version": "2.0.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
@@ -28,89 +28,96 @@
     "eslint": "eslint --fix --max-warnings 0 .",
     "eslint:check": "eslint --max-warnings 0 .",
     "build:publish": "sh ./auto/publish.sh",
-    "build:dist": "sh ./auto/build.sh",
+    "build:dist": "cross-env NODE_ENV=production sh ./auto/build.sh",
     "build:docs": "build-storybook"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
-    "@storybook/theming": "^6.4.19",
-    "@types/lodash": "^4.14.179",
-    "@types/node": "^17.0.19",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
-    "@types/styled-components": "^5.1.23",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
-    "commitizen": "^4.2.4",
-    "commitlint": "^16.2.1",
-    "concurrently": "^7.0.0",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^23.0.0",
+    "@rollup/plugin-json": "^5.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack4": "^6.5.12",
+    "@storybook/manager-webpack4": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^6.5.12",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "18.7.23",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "babel-loader": "^8.2.5",
+    "commitizen": "^4.2.5",
+    "commitlint": "^17.1.2",
+    "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",
     "css-minify": "^2.0.0",
     "cz-conventional-changelog": "^3.3.0",
-    "dotenv": "^16.0.0",
-    "esbuild": "^0.14.25",
-    "eslint": "^8.10.0",
+    "dotenv": "^16.0.3",
+    "esbuild": "^0.15.11",
+    "eslint": "^8.25.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-import-helpers": "^1.2.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.7",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.4",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "eslint-plugin-import-helpers": "^1.3.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.6",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-textarea-autosize": "^8.3.4",
     "rimraf": "^3.0.2",
-    "rollup": "^2.69.0",
-    "rollup-plugin-dts": "^4.2.0",
+    "rollup": "^3.2.1",
+    "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-includepaths": "^0.2.4",
-    "rollup-plugin-node-externals": "^4.0.0",
+    "rollup-plugin-node-externals": "^5.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "4.5.5"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     }
   },
+  "resolutions": {
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6"
+  },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
+    "@babel/runtime": "^7.19.4",
     "@nexpy/react-easy-context-api": "^1.0.2",
-    "@xstyled/styled-components": "^3.5.1",
-    "framer-motion": "^6.3.16",
+    "@xstyled/styled-components": "^3.7.0",
+    "framer-motion": "^7.5.3",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.33.0",
-    "react-select": "^5.2.2",
+    "react-hook-form": "^7.37.0",
+    "react-select": "^5.5.0",
     "scheduler": "^0.23.0",
     "slugify": "^1.6.5",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.6"
   },
   "config": {
     "commitizen": {

rollup.config.js → rollup.config.mjs

@@ -1,4 +1,4 @@
-const dotenv = require('dotenv')
+import dotenv from 'dotenv'
 
 dotenv.config()
 
@@ -12,9 +12,9 @@ import externals from 'rollup-plugin-node-externals'
 import includePaths from 'rollup-plugin-includepaths'
 import { terser } from 'rollup-plugin-terser'
 
-import pkg from './package.json'
+import pkg from './package.json' assert { type: 'json' }
 
-const nodeEnv = process.env.NODE_ENV
+const nodeEnv = process.env.NODE_ENV || 'production'
 
 console.log(`Starting build with NODE_ENV=${nodeEnv}`)
 

src/components/hocs/Portal/Portal.tsx

@@ -3,6 +3,8 @@
 import React, { useEffect, useState, memo, PropsWithChildren } from 'react'
 import { createPortal } from 'react-dom'
 
+import { ROOT_DESIGN_SYSTEM_PORTALS_CONTAINER_ID } from 'constants/elements'
+
 type PortalProps = {
   enabled?: boolean
 }
@@ -23,7 +25,7 @@ const PortalBase = ({ children, enabled }: PropsWithChildren<PortalProps>) => {
   return mounted
     ? createPortal(
         children,
-        document.querySelector('#root-design-system-portals') as Element
+        document.querySelector(`#${ROOT_DESIGN_SYSTEM_PORTALS_CONTAINER_ID}`) as Element
       )
     : null
 }

src/constants/elements.ts

@@ -0,0 +1 @@
+export const ROOT_DESIGN_SYSTEM_PORTALS_CONTAINER_ID = 'root-design-system-portals'

src/theme/providers.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, memo, PropsWithChildren } from 'react'
 import { ThemeProvider as BaseThemeProvider } from '@xstyled/styled-components'
 import merge from 'lodash/merge'
 
+import { ROOT_DESIGN_SYSTEM_PORTALS_CONTAINER_ID } from 'constants/elements'
 import { GlobalStyle, defaultTheme } from 'theme/internal'
 
 type ThemeProviderProps = {
@@ -22,7 +23,9 @@ const ThemeProviderBase = ({
       <GlobalStyle />
       {children}
 
-      {disablePortalContainer !== true ? <div id='root-design-system-portals' /> : null}
+      {disablePortalContainer !== true ? (
+        <div id={ROOT_DESIGN_SYSTEM_PORTALS_CONTAINER_ID} />
+      ) : null}
     </BaseThemeProvider>
   )
 }