Project/upgrade react v18

.github/workflows/canary_release.yml

@@ -19,7 +19,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install packages with cache
@@ -36,8 +36,16 @@ jobs:
           env: canary
           ref: ${{ github.head_ref }}
 
+      - name: "NPM Identity"
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+          echo "#always-auth=true" >> .npmrc
+
       - name: Publish canary build
         env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           RUN_NUMBER: ${{ github.run_number }}
         run: yarn release:canary --yes --preid="alpha.${RUN_NUMBER}" --no-git-reset --dist-tag="alpha"

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
     - uses: actions/checkout@v1
     - uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '20.x'
     - name: Install packages with cache
       uses: iCHEF/npm-install-with-cache-action@v1
       with:

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
           token: ${{ secrets.ICHEF_BOT_TOKEN }}
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install packages with cache
         uses: iCHEF/npm-install-with-cache-action@v1

.nvmrc

@@ -1 +1 @@
-lts/erbium
+v20

README.md

@@ -23,22 +23,21 @@ Here is a quick example to get you started:
 **./App.js**
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import CustomComponent from './CustomComponent';
 
 import '@ichef/gypcrete/dist/gypcrete.css';
 
 const App = () => (
-    <div>
-        <CustomComponent />
-    </div>
+  <div>
+    <CustomComponent />
+  </div>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
-);
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
 ```
 
 **./CustomComponent.js**

configs/.eslintignore

@@ -5,3 +5,4 @@ es/
 lib/
 public/
 !.storybook/
+packages/core/src/icons/components

configs/jest.config.json

@@ -1,15 +1,16 @@
 {
-    "rootDir": "../",
-    "coverageReporters": ["clover", "json", "lcov", "text"],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/packages/\\w+/lib/"
-    ],
-    "moduleNameMapper": {
-         "\\.(css|scss|sass|md|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|)$": "<rootDir>/__mocks__/fileMock.js"
-    },
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!@ichef/)"
-    ],
-    "setupTestFrameworkScriptFile": "<rootDir>/configs/jestSetup.js"
+  "rootDir": "../",
+  "coverageReporters": ["clover", "json", "lcov", "text"],
+  "coveragePathIgnorePatterns": [
+    "/node_modules/",
+    "<rootDir>/packages/\\w+/lib/",
+    "<rootDir>/packages/core/src/icons/components/"
+  ],
+  "moduleNameMapper": {
+    "\\.(css|scss|sass|md|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|)$": "<rootDir>/__mocks__/fileMock.js"
+  },
+  "transformIgnorePatterns": [
+    "<rootDir>/node_modules/(?!@ichef/)"
+  ],
+  "setupTestFrameworkScriptFile": "<rootDir>/configs/jestSetup.js"
 }

configs/jestSetup.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
+import '@testing-library/jest-dom';
 
 Enzyme.configure({ adapter: new Adapter() });

configs/webpack.dist.js

@@ -1,21 +1,31 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const autoprefixer = require('autoprefixer');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const packageDirname = process.cwd();
 const fullPackageName = process.env.npm_package_name || process.env.GPT_PKG_NAME;
 const packageName = fullPackageName.replace(/@ichef\//, '');
 
+function toCamelCase(str) {
+  return str.replace(/([-_]\w)/g, g => g[1].toUpperCase());
+}
+
+
 module.exports = {
+  mode: 'production',
+
   entry: './src/index.js',
 
   context: packageDirname,
 
   output: {
     filename: `${packageName}.js`,
     path: path.resolve(packageDirname, 'dist'),
-    library: packageName,
+    library: {
+      name: toCamelCase(packageName),
+      type: 'var',
+    },
   },
 
   module: {
@@ -39,35 +49,41 @@ module.exports = {
         include: [
           path.resolve(packageDirname, 'src'),
         ],
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                importLoaders: 1,
-              },
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
             },
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: () => [autoprefixer],
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [autoprefixer],
               },
             },
-            {
-              loader: 'sass-loader',
-              options: {
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
                 outputStyle: 'expanded',
               },
             },
-          ],
-        }),
+          },
+        ],
       },
     ],
   },
 
   plugins: [
-    new ExtractTextPlugin(`${packageName}.css`),
+    new MiniCssExtractPlugin({
+      filename: `${packageName}.css`,
+    }),
   ],
 
   externals: {

package.json

@@ -7,7 +7,7 @@
   "repository": "iCHEF/gypcrete",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">= 8.2.1 <= 12",
+    "node": ">= 20",
     "npm": ">= 5.10.0",
     "yarn": ">= 1.10.0"
   },
@@ -35,22 +35,26 @@
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.23.3",
     "@babel/runtime": "^7.4.4",
     "@babel/runtime-corejs3": "^7.4.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^9.6.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^26.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-strip-css-imports": "zhusee2/babel-plugin-strip-css-imports",
     "conventional-changelog-cli": "^2.1.1",
     "core-js": "^3.1.1",
     "coveralls": "^3.0.0",
-    "css-loader": "^0.28.8",
-    "enzyme": "^3.7.0",
+    "css-loader": "^6.8.1",
+    "enzyme": "^3.11.0",
     "eslint": "7.8",
     "eslint-config-airbnb": "18.2",
     "eslint-config-ichef": "8.0",
@@ -62,21 +66,21 @@
     "eslint-plugin-react": "7.20",
     "eslint-plugin-react-hooks": "4.1",
     "eslint-plugin-unicorn": "21.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
-    "jest": "^23.6.0",
-    "lerna": "^3.16.4",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^3.0.0",
+    "jest": "^26.1.0",
+    "lerna": "^3.22.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "^7.3.3",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
-    "sass-loader": "^6.0.2",
-    "style-loader": "^0.19.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
     "stylelint": "^10.1.0",
     "stylelint-config-standard": "^16.0.0",
-    "webpack": "^3.10.0"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "eslintConfig": {
     "root": true,

packages/core/configs/webpack.dist.js

@@ -14,27 +14,17 @@ module.exports = webpackMerge(defaultConfigs, {
         include: [
           path.resolve(packageDirname, 'src/fonts'),
         ],
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name]-[hash:6].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name]-[hash:6][ext]',
+        },
       },
       {
         test: /\.svg$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name]-[hash:6].[ext]',
-              outputPath: 'icons/',
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[name]-[hash:6][ext]',
+        },
       },
     ],
   },

packages/core/package.json

@@ -33,8 +33,8 @@
   "peerDependencies": {
     "@babel/runtime-corejs3": "^7.4.4",
     "prop-types": "^15.5.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -47,9 +47,13 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
-    "enzyme": "^3.7.0",
-    "react-is": "^17.0.2",
-    "webpack": "^3.10.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
+    "enzyme": "^3.11.0",
+    "react-is": "^18.2.0",
+    "webpack": "^5.89.0",
     "webpack-merge": "^4.1.2"
   }
 }