ci: update Node.js version

docs: upgrade Next.js and React versions

.circleci/config.yml

@@ -62,7 +62,7 @@ workflows:
 jobs:
   build-v0:
     docker:
-      - image: cimg/node:14.17.6-browsers
+      - image: cimg/node:16.20-browsers
     steps:
       - checkout
       - browser-tools/install-browser-tools:
@@ -114,7 +114,7 @@ jobs:
 
   build-pr:
     docker:
-      - image: cimg/node:14.17.6-browsers
+      - image: cimg/node:16.20-browsers
     steps:
       - checkout
       - browser-tools/install-browser-tools:
@@ -167,7 +167,7 @@ jobs:
 
   build-tag:
     docker:
-      - image: cimg/node:14.17.6-browsers
+      - image: cimg/node:16.20-browsers
     steps:
       - checkout
       - browser-tools/install-browser-tools:
@@ -226,7 +226,7 @@ jobs:
 
   deploy-v0:
     docker:
-      - image: cimg/node:12.22
+      - image: cimg/node:16.20
     steps:
       - run:
           name: Configuration
@@ -272,7 +272,7 @@ jobs:
 
   deploy-pr:
     docker:
-      - image: cimg/node:12.22
+      - image: cimg/node:16.20
     steps:
       - run:
           name: Configuration
@@ -324,7 +324,7 @@ jobs:
 
   deploy-tag:
     docker:
-      - image: cimg/node:12.22
+      - image: cimg/node:16.20
     steps:
       - run:
           name: Configuration

packages/docs/babel.config.js

@@ -1,19 +1,17 @@
+const plugins = [];
+if (process.env.NODE_ENV === 'test') {
+  // Enable async/await for jest
+  plugins.push('@babel/plugin-transform-runtime');
+}
+
 module.exports = {
   extends: '@trendmicro/babel-config',
+  plugins: [
+    ...plugins,
+    '@emotion/babel-plugin',
+  ],
   presets: [
     '@babel/preset-env',
-    ['@babel/preset-react', {
-      /**
-       * Decides which runtime to use.
-       * - 'automatic' auto imports the functions that JSX transpiles to.
-       * - 'classic' does not automatic import anything.
-       */
-      'runtime': 'classic', // defaults to classic
-      //'runtime': 'automatic', // for React 16.14.0, React 17 and higher that supports the new transform
-    }],
-    '@emotion/babel-preset-css-prop',
-  ],
-  plugins: [
-    '@babel/plugin-transform-runtime',
+    '@babel/preset-react'
   ],
 };

packages/docs/package.json

@@ -20,10 +20,9 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@emotion/babel-preset-css-prop": "~11.2.0",
-    "@emotion/jest": "~11.5.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/babel-plugin": "11.x",
     "@emotion/react": "11.x",
-    "@emotion/styled": "11.x",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
@@ -52,16 +51,16 @@
     "jest": "^27.3.1",
     "jest-extended": "^1.1.0",
     "lorem-ipsum": "^2.0.4",
-    "next": "^12.0.1",
+    "next": "^13.0.5",
     "next-compose-plugins": "^2.2.1",
     "node-emoji": "^1.11.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "15.x",
-    "react": "^16.8.0 || ^17",
+    "react": "^16.14.0 || ^17 || ^18",
     "react-beautiful-dnd": "^13.1.0",
     "react-dnd": "^14.0.4",
     "react-dnd-html5-backend": "^14.0.2",
-    "react-dom": "^16.8.0 || ^17",
+    "react-dom": "^16.14.0 || ^17 || ^18",
     "react-ga": "^3.3.0",
     "react-live": "^2.3.0",
     "react-movable": "^2.5.4",

packages/react/babel.config.js

@@ -1,16 +1,20 @@
+const plugins = [];
+if (process.env.NODE_ENV === 'test') {
+  // Enable async/await for jest
+  plugins.push('@babel/plugin-transform-runtime');
+}
+
 module.exports = {
   extends: '@trendmicro/babel-config',
+  plugins: [
+    ...plugins,
+    '@emotion/babel-plugin',
+  ],
   presets: [
     '@babel/preset-env',
     ['@babel/preset-react', {
-      /**
-       * Decides which runtime to use.
-       * - 'automatic' auto imports the functions that JSX transpiles to.
-       * - 'classic' does not automatic import anything.
-       */
-      'runtime': 'classic', // defaults to classic
-      //'runtime': 'automatic', // for React 16.14.0, React 17 and higher that supports the new transform
+      'runtime': 'automatic',
+      'importSource': '@emotion/react',
     }],
-    '@emotion/babel-preset-css-prop',
   ],
 };

packages/react/package.json

@@ -14,7 +14,6 @@
     "postbuild": "cpy --parents {dist/**,LICENSE,README.md,.npmignore,package.json} build",
     "pre-push": "yarn run eslint",
     "prepublish": "yarn run build",
-    "start-storybook": "start-storybook --config-dir .storybook --docs --port 8080",
     "test": "jest"
   },
   "dependencies": {
@@ -32,7 +31,7 @@
     "prop-types": "15.x",
     "react-animate-height": "2.x",
     "react-focus-lock": "2.x",
-    "react-is": "^16.8.0 || ^17",
+    "react-is": "^16.14.0 || ^17 || ^18",
     "react-spring": "8.x",
     "react-transition-group": "4.x"
   },
@@ -44,13 +43,8 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@emotion/babel-preset-css-prop": "~11.2.0",
-    "@emotion/jest": "~11.5.0",
-    "@storybook/addon-actions": "~6.3.12",
-    "@storybook/addon-docs": "~6.3.12",
-    "@storybook/addon-links": "~6.3.12",
-    "@storybook/addons": "~6.3.12",
-    "@storybook/react": "~6.3.12",
+    "@emotion/babel-plugin": "^11.10.0",
+    "@emotion/jest": "^11.10.0",
     "@trendmicro/babel-config": "^1.0.2",
     "babel-loader": "~8.2.3",
     "cpy-cli": "~3.1.1",
@@ -65,9 +59,9 @@
     "eslint-plugin-react-hooks": "latest",
     "jest": "~27.3.1",
     "jest-extended": "^1.1.0",
-    "react": "^16.8.0 || ^17",
-    "react-dom": "^16.8.0 || ^17",
-    "react-test-renderer": "^16.8.0 || ^17"
+    "react": "^16.14.0 || ^17 || ^18",
+    "react-dom": "^16.14.0 || ^17 || ^18",
+    "react-test-renderer": "^16.14.0 || ^17 || ^18"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17",