vite done (#15)

* vite done * pr review change done
codedthemes · Jun 26, 2024 · 3f993a6 · 3f993a6
1 parent 771c284
commit 3f993a6
Show file tree

Hide file tree

Showing 114 changed files with 9,829 additions and 16,258 deletions.
diff --git a/react/.env b/react/.env
@@ -1,2 +1,6 @@
-REACT_APP_VERSION = v18.0.1
-GENERATE_SOURCEMAP = false
+VITE_APP_VERSION = v5.0.0
+GENERATE_SOURCEMAP = false
+
+## Public URL
+PUBLIC_URL= https://codedthemes.com/demos/admin-templates/gradient-able/react/free
+VITE_APP_BASE_NAME= demos/admin-templates/gradient-able/react/free
diff --git a/react/.eslintrc b/react/.eslintrc
@@ -0,0 +1,98 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "react-app",
+    "prettier",
+    "plugin:react/jsx-runtime",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react-hooks/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "settings": {
+    "react": {
+      "createClass": "createReactClass", // Regex for Component Factory to use,
+      // default to "createReactClass"
+      "pragma": "React", // Pragma to use, default to "React"
+      "fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
+      "version": "detect", // React version. "detect" automatically picks the version you have installed.
+      // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+      // It will default to "latest" and warn if missing, and to "detect" in the future
+      "flowVersion": "0.53" // Flow version
+    },
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "src/"]
+      }
+    }
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "impliedStrict": true,
+      "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
+    "ecmaVersion": 12
+  },
+  "plugins": ["prettier", "react", "react-hooks"],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/react-in-jsx-scope": "off",
+    "no-undef": "off",
+    "react/display-name": "off",
+    "react/jsx-filename-extension": "off",
+    "no-param-reassign": "off",
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/no-array-index-key": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/forbid-prop-types": "off",
+    "import/order": "off",
+    "import/no-cycle": "off",
+    "no-console": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "prefer-destructuring": "off",
+    "no-shadow": "off",
+    "import/no-named-as-default": "off",
+    "import/no-extraneous-dependencies": "off",
+    "jsx-a11y/no-autofocus": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@mui/*/*/*", "!@mui/material/test-utils/*"]
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": false
+      }
+    ],
+    "prettier/prettier": [
+      "warn",
+      {
+        "bracketSpacing": true,
+        "printWidth": 140,
+        "singleQuote": true,
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "useTabs": false,
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}
diff --git a/react/.gitignore b/react/.gitignore
@@ -10,9 +10,9 @@
 
 # production
 /build
+/dist
 
 # misc
-.env.development
 .DS_Store
 .env.local
 .env.development.local

diff --git a/react/.yarn/install-state.gz b/react/.yarn/install-state.gz
diff --git a/react/.yarn/releases/yarn-4.1.1.cjs b/react/.yarn/releases/yarn-4.1.1.cjs
diff --git a/react/.yarnrc.yml b/react/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs
diff --git a/react/config-overrides.js b/react/config-overrides.js
diff --git a/react/public/favicon.ico → react/favicon.ico b/react/public/favicon.ico → react/favicon.ico
diff --git a/react/public/index.html → react/index.html b/react/public/index.html → react/index.html
@@ -1,15 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
-    <title>Welcome - Gradient Able React with Hooks + Redux</title>
+    <title>Welcome - Gradient Able React with Hooks</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/react/jsconfig.json b/react/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/react/jsconfig.node.json b/react/jsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.mjs"]
+}
diff --git a/react/package.json b/react/package.json
@@ -1,42 +1,32 @@
 {
   "name": "gradient-able-free-react-admin-template",
-  "version": "3.0.0",
-  "private": false,
-  "author": "codedThemes",
-  "homepage": "https://codedthemes.com/demos/admin-templates/gradient-able/react/free",
+  "version": "5.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
+    "preview": "vite preview",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
+  },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.5",
-    "@tanem/react-nprogress": "^5.0.14",
-    "apexcharts": "^3.35.5",
-    "bootstrap": "^5.2.1",
-    "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
-    "formik": "^2.2.9",
-    "process": "^0.11.10",
-    "react": "^18.2.0",
-    "react-apexcharts": "^1.4.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-app-rewired": "^2.2.1",
-    "react-bootstrap": "^2.5.0",
+    "@tanem/react-nprogress": "^5.0.51",
+    "@vitejs/plugin-react": "^4.2.1",
+    "apexcharts": "^3.49.0",
+    "bootstrap": "^5.3.3",
+    "formik": "^2.4.6",
+    "react": "18.2.0",
+    "react-apexcharts": "^1.4.1",
+    "react-bootstrap": "^2.10.2",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.4.0",
+    "react-dom": "18.2.0",
+    "react-icons": "^5.0.1",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-redux": "^8.0.2",
-    "react-router-dom": "^6.4.1",
-    "react-scripts": "5.0.1",
-    "redux": "^4.2.0",
-    "redux-form": "^8.3.8",
-    "stream-browserify": "^3.0.0",
-    "util": "^0.12.4",
-    "web-vitals": "^3.0.2",
-    "yup": "^0.32.11"
-  },
-  "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "react-router-dom": "^6.23.0",
+    "vite": "^5.2.11",
+    "vite-jsconfig-paths": "^2.0.1",
+    "web-vitals": "^3.5.2",
+    "yup": "^1.4.0"
   },
   "resolutions": {
     "autoprefixer": "10.4.5"
@@ -60,13 +50,26 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.10.1",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.20.5",
-    "@svgr/webpack": "^6.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "sass": "^1.55.0"
-  }
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.5",
+    "@testing-library/user-event": "^14.5.2",
+    "env-cmd": "^10.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "3.2.5",
+    "sass": "^1.75.0"
+  },
+  "packageManager": "[email protected]"
 }
diff --git a/react/readme.md b/react/readme.md
@@ -17,16 +17,16 @@ It is modern concept dashboard design with eye catchy colors. Wish you happy to
 
 The [Pro version](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) of Gradient able react template includes features such as javascript, apps, authentication methods (i.e. JWT, Auth0, Firebase), advance components, form plugins, layouts, widgets, and more.
 
-| [Gradient Able Free](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template) | [Gradient Able](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium)            |
-| -------------------------------------------------------     | :------------------------------------------------------------------------------- |
-| **7** Demo pages                                            | **85+** Demo pages                                                               |
-| -                                                           | ✓ Multi-Dashboard                                                                 |
-| -                                                           | ✓ Dark/Light Mode 🌓                                                             |
-| -                                                           | ✓ Js version                                                             |
-| -                                                           | ✓ Multiple color options                                                         |
-| -                                                           | ✓ RTL                                                                            |
-| -                                                           | ✓ JWT, Firebase, Auth0, AWS authentication                                       |
-| ✓ MIT License                                               | ✓ [Pro License](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium)                |
+| [Gradient Able Free](https://codedthemes.com/item/gradient-able-reactjs-free-admin-template) | [Gradient Able](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) |
+| -------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **7** Demo pages                                                                             | **85+** Demo pages                                                                                                                                                    |
+| -                                                                                            | ✓ Multi-Dashboard                                                                                                                                                     |
+| -                                                                                            | ✓ Dark/Light Mode 🌓                                                                                                                                                  |
+| -                                                                                            | ✓ Js version                                                                                                                                                          |
+| -                                                                                            | ✓ Multiple color options                                                                                                                                              |
+| -                                                                                            | ✓ RTL                                                                                                                                                                 |
+| -                                                                                            | ✓ JWT, Firebase, Auth0, AWS authentication                                                                                                                            |
+| ✓ MIT License                                                                                | ✓ [Pro License](https://codedthemes.com/item/gradient-able-reactjs-admin-dashboard/?utm_source=free_demo&utm_medium=codedthemes&utm_campaign=button_download_premium) |
 
 ## Why Gradient Able?
 
@@ -103,7 +103,7 @@ yarn start
 - Redux & React context API for state management.
 - Redux toolkit.
 - React Router for navigation routing.
-- Support for react-script.
+- Support for vite.
 - Code splitting.
 - CSS-in-JS.
 

diff --git a/react/src/App.js b/react/src/App.js
diff --git a/react/src/App.jsx b/react/src/App.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+// project-import
+import renderRoutes, { routes } from './routes';
+
+// ==============================|| APP ||============================== //
+
+const App = () => {
+  return <BrowserRouter basename={import.meta.env.VITE_APP_BASE_NAME}>{renderRoutes(routes)}</BrowserRouter>;
+};
+
+export default App;
diff --git a/react/src/assets/images/auth/auth-logo-dark.png b/react/src/assets/images/auth/auth-logo-dark.png
diff --git a/react/src/assets/images/auth/auth-logo.png b/react/src/assets/images/auth/auth-logo.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		nodeLinker: node-modules

		yarnPath: .yarn/releases/yarn-4.1.1.cjs