Merge pull request #6 from IronTony/develop

Upgraded to RRD v6, Replaced Connected Router, new linting, chore packages
IronTony · Dec 12, 2021 · eba4a65 · eba4a65
2 parents c9232f3 + cdb69fb
commit eba4a65
Show file tree

Hide file tree

Showing 32 changed files with 4,108 additions and 5,056 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,5 +5,5 @@ scripts
 config
 public/*
 src/react-app-env.d.ts
-src/serviceWorker.ts
+src/serviceWorkerRegistration.ts
 src/setupTests.ts
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-inferrable-type': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    'no-extra-boolean-cast': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/html
 
 # misc
 .DS_Store

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.15.4
+16.13.0
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,19 @@
+helm-chart
+
+node_modules
+
+config
+
+husky
+
+.git
+
+html
+
+public
+
+src/react-app-env.d.ts
+
+src/serviceWorkerRegistration.ts
+
+src/setupTests.ts
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -5,4 +5,6 @@ module.exports = {
   printWidth: 120,
   tabWidth: 2,
   bracketSpacing: true,
+  importOrder: ['<THIRD_PARTY_MODULES>', '^[./]'],
+  importOrderSeparation: false,
 };
diff --git a/README.md b/README.md
@@ -69,8 +69,8 @@ You can create more of these commands, as you wish...
 ✅ Add `redux-persist` (https://github.com/rt2zz/redux-persist)<br/>
 ✅ Add `redux-saga`<br/>
 ✅ Add `i18next`<br/>
-✅ Add `react-router-dom v5` ❤️<br/>
-✅ Add UI Design System (`ChakraUI v1.6.3`)<br />
+✅ Add `react-router-dom v6.1.1` ❤️<br/>
+✅ Add UI Design System (`ChakraUI v1.7.3`)<br />
 ✅ Add multi `Env` ⚗️⚗️⚗️<br />
 ✅ Add Typescript<br />
 

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-export-default-from',
+    [
+      'module-resolver',
+      {
+        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+        root: ['./src'],
+        alias: {
+          '@assets': './src/assets',
+        },
+      },
+    ],
+  ],
+};
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -112,31 +112,32 @@ module.exports = function (webpackEnv) {
         loader: require.resolve('css-loader'),
         options: cssOptions,
       },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            require('postcss-preset-env')({
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-            }),
-            // Adds PostCSS Normalize as the reset css with default options,
-            // so that it honors browserslist config in package.json
-            // which in turn let's users customize the target behavior as per their needs.
-            postcssNormalize(),
-          ],
-          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
-        },
-      },
+      // COMMENTED DUE FRAMER-MOTION INSTALLATION
+      // {
+      //   // Options for PostCSS as we reference these options twice
+      //   // Adds vendor prefixing based on your specified browser support in
+      //   // package.json
+      //   loader: require.resolve('postcss-loader'),
+      //   options: {
+      //     // Necessary for external CSS imports to work
+      //     // https://github.com/facebook/create-react-app/issues/2677
+      //     ident: 'postcss',
+      //     plugins: () => [
+      //       require('postcss-flexbugs-fixes'),
+      //       require('postcss-preset-env')({
+      //         autoprefixer: {
+      //           flexbox: 'no-2009',
+      //         },
+      //         stage: 3,
+      //       }),
+      //       // Adds PostCSS Normalize as the reset css with default options,
+      //       // so that it honors browserslist config in package.json
+      //       // which in turn let's users customize the target behavior as per their needs.
+      //       postcssNormalize(),
+      //     ],
+      //     sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+      //   },
+      // },
     ].filter(Boolean);
     if (preProcessor) {
       loaders.push(
@@ -389,6 +390,12 @@ module.exports = function (webpackEnv) {
                 name: 'static/media/[name].[hash:8].[ext]',
               },
             },
+            // Make whatever fine-grained changes you need
+            {
+              type: 'javascript/auto',
+              test: /\.mjs$/,
+              include: /node_modules/,
+            },
             // Process application JS with Babel.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
             {

diff --git a/package.json b/package.json
@@ -1,15 +1,15 @@
 {
   "name": "react-web-boilerplate",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
-    "lint": "eslint --fix --max-warnings=0 \"./src/**/*.{js,jsx,ts,tsx}\"",
-    "pre-commit": "yarn lint && lint-staged && yarn dependencies:checkCircular && yarn dependencies:graph",
-    "prettier:fix": "prettier --write ./src",
-    "prettier:check": "prettier --check ./src",
+    "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "pre-commit": "yarn lint-staged && yarn dependencies:checkCircular && yarn dependencies:graph",
+    "prettier-check:staged": "prettier --check \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier-format:staged": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
     "dependencies:checkCircular": "madge src/ --circular",
     "dependencies:graph": "madge src/ --circular --image deps-graph.svg",
     "start:development": "env-cmd -f src/env/.env.development yarn start",
@@ -19,103 +19,106 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/core": "7.15.5",
-    "@chakra-ui/react": "^1.6.3",
-    "@chakra-ui/theme-tools": "^1.1.7",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@babel/core": "7.16.0",
+    "@chakra-ui/descendant": "2.1.1",
+    "@chakra-ui/icons": "1.1.1",
+    "@chakra-ui/react": "1.7.3",
+    "@chakra-ui/theme-tools": "1.3.1",
+    "@emotion/react": "11.7.0",
+    "@emotion/styled": "11.6.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
-    "@reduxjs/toolkit": "1.6.1",
+    "@reduxjs/toolkit": "1.7.0",
     "@svgr/webpack": "5.4.0",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.1.0",
-    "@testing-library/user-event": "13.2.1",
-    "@types/jest": "27.0.1",
-    "@types/node": "16.9.2",
-    "@types/react": "17.0.21",
-    "@types/react-dom": "17.0.9",
-    "@typescript-eslint/eslint-plugin": "4.31.1",
-    "@typescript-eslint/parser": "4.31.1",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.12",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@typescript-eslint/eslint-plugin": "5.6.0",
+    "@typescript-eslint/parser": "5.6.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.0",
-    "babel-loader": "8.1.0",
+    "babel-jest": "27.4.2",
+    "babel-loader": "8.2.3",
     "babel-plugin-named-asset-import": "^0.3.7",
     "babel-preset-react-app": "^10.0.0",
     "bfj": "^7.0.2",
-    "camelcase": "^6.1.0",
+    "camelcase": "6.2.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "connected-react-router": "6.9.1",
+    "connected-react-router": "6.9.2",
     "css-loader": "4.3.0",
-    "date-fns": "2.24.0",
+    "date-fns": "2.27.0",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
     "env-cmd": "^10.1.0",
-    "eslint": "7.32.0",
+    "eslint": "8.4.1",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "6.0.1",
-    "eslint-plugin-import": "2.24.2",
-    "eslint-plugin-jest": "24.4.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "7.25.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "4.12.2",
-    "eslint-webpack-plugin": "3.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jest": "25.3.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-testing-library": "5.0.1",
+    "eslint-webpack-plugin": "3.1.1",
     "file-loader": "6.1.1",
     "fontfaceobserver": "^2.1.0",
-    "framer-motion": "^4",
+    "framer-motion": "5.4.5",
     "fs-extra": "^9.0.1",
-    "history": "4.10.1",
+    "history": "5.1.0",
     "html-webpack-plugin": "4.5.0",
-    "i18next": "20.6.1",
+    "i18next": "21.6.0",
     "i18next-browser-languagedetector": "6.1.2",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.2.0",
+    "jest": "27.3.1",
     "jest-circus": "^27.0.3",
-    "jest-resolve": "27.2.0",
+    "jest-resolve": "27.3.1",
     "jest-watch-typeahead": "0.6.4",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "4.2.0",
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "5.0.2",
-    "prompts": "2.4.0",
+    "prompts": "2.4.2",
     "react": "17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "11.0.4",
     "react-dom": "17.0.2",
-    "react-i18next": "11.12.0",
-    "react-icons": "4.2.0",
-    "react-redux": "7.2.5",
-    "react-refresh": "0.10.0",
-    "react-router-dom": "^5.2.0",
+    "react-i18next": "11.15.0",
+    "react-icons": "4.3.1",
+    "react-redux": "7.2.6",
+    "react-refresh": "0.11.0",
+    "react-router-dom": "6.1.1",
     "react-spinners": "0.11.0",
+    "redux-first-history": "^5.0.7",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
-    "resolve": "1.18.1",
+    "resolve": "1.20.0",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.0.5",
-    "semver": "7.3.2",
+    "semver": "7.3.5",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
-    "typescript": "4.4.3",
+    "typescript": "4.5.3",
     "url-loader": "4.1.1",
     "web-vitals": "^1.0.1",
     "webpack": "4.44.2",
     "webpack-dev-server": "3.11.1",
     "webpack-manifest-plugin": "2.2.0",
     "with-query": "^1.3.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "workbox-webpack-plugin": "6.4.2"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn prettier:fix",
-      "yarn prettier:check",
-      "git add"
+      "eslint",
+      "npm run prettier-format:staged",
+      "npm run prettier-check:staged"
     ]
   },
   "madge": {
@@ -207,14 +210,21 @@
     ]
   },
   "devDependencies": {
-    "@types/react-redux": "7.1.18",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-proposal-export-default-from": "^7.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.1.1",
+    "@types/react-redux": "7.1.20",
+    "autoprefixer": "^9",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-emotion": "11.0.0",
     "eslint-plugin-prettier": "4.0.0",
-    "husky": "7.0.2",
-    "lint-staged": "11.1.2",
+    "husky": "7.0.4",
+    "lint-staged": "12.1.2",
     "madge": "5.0.1",
-    "prettier": "2.4.1",
-    "pretty-quick": "3.1.1"
+    "postcss": "^8",
+    "prettier": "2.5.1",
+    "pretty-quick": "3.1.2",
+    "react-lorem-component": "^0.13.0"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /html
     # misc
     .DS_Store
@@ Expand Down @@