Stage 2.1.0 (#9)

* Update free-version (#8)

* Update free-version

* PR review changes

* Update stage.yml

* Update prod.yml

---------

Co-authored-by: CodedThemes <[email protected]>

* Update stage.yml

* Update package.json

* deployment issue fix

---------

Co-authored-by: ct-rushita <[email protected]>
Co-authored-by: Dikshit Moradiya <[email protected]>

.env

@@ -1,4 +1,5 @@
-REACT_APP_VERSION = v2.1.0
+VITE_APP_VERSION = v3.0.0
 GENERATE_SOURCEMAP = false
+
 PUBLIC_URL = https://codedthemes.com/demos/admin-templates/materially/react/free
-REACT_APP_BASE_NAME = /demos/admin-templates/materially/react/free
+VITE_APP_BASE_NAME = demos/admin-templates/materially/react/free

.env.qa

@@ -1,4 +1,4 @@
-REACT_APP_VERSION = v2.0.0
+REACT_APP_VERSION = v3.0.0
 GENERATE_SOURCEMAP = false
 PUBLIC_URL = https://codedthemes.com/demos/admin-templates/materially/react/free/stage
-REACT_APP_BASE_NAME = demos/admin-templates/materially/react/free/stage
+VITE_APP_BASE_NAME = demos/admin-templates/materially/react/free/stage

.eslintrc

@@ -47,14 +47,15 @@
     "react/display-name": "off",
     "react/jsx-filename-extension": "off",
     "no-param-reassign": "off",
-    "react/prop-types": 1,
+    "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",
+    "no-debugger": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "prefer-destructuring": "off",
     "no-shadow": "off",

.github/workflows/prod.yml

@@ -14,24 +14,24 @@ jobs:
 
     steps:
       - name: 🚚 Get latest code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v2-beta
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20.x'
 
       - name: 🔨 Build Project
         run: |
-          npm install --legacy-peer-deps
-          npm run build
+          yarn
+          yarn build
 
       - name: 📂 Deploy to Server
-        uses: easingthemes/ssh-deploy@v2.1.5
+        uses: easingthemes/ssh-deploy@main
         env:
           SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
           # ARGS: "-rltgoDzvO --delete"
-          SOURCE: 'build/'
+          SOURCE: 'dist/'
           REMOTE_HOST: 217.21.92.35
           REMOTE_USER: u778408432
           REMOTE_PORT: '65002'

.github/workflows/stage.yml

@@ -5,7 +5,7 @@ on:
   # Triggers the workflow on push or pull request events but only for the master branch
   push:
     branches:
-      - stage
+      - stage*
 
 jobs:
   SFTP-deploy:
@@ -14,24 +14,24 @@ jobs:
 
     steps:
       - name: 🚚 Get latest code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v2-beta
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20.x'
 
       - name: 🔨 Build Project
         run: |
-          npm install --legacy-peer-deps
-          npm run build-stage
+          yarn
+          yarn build-stage
 
       - name: 📂 Deploy to Server
-        uses: easingthemes/ssh-deploy@v2.1.5
+        uses: easingthemes/ssh-deploy@main
         env:
           SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
           # ARGS: "-rltgoDzvO --delete"
-          SOURCE: 'build/'
+          SOURCE: 'dist/'
           REMOTE_HOST: 217.21.92.35
           REMOTE_USER: u778408432
           REMOTE_PORT: '65002'

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -99,7 +99,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.
 

public/index.html → index.html

@@ -1,20 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <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" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Materially | Material UI React Dashboard Template</title>
 
     <link rel="preconnect" href="https://fonts.gstatic.com" />
@@ -33,5 +24,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

package.json

@@ -1,47 +1,39 @@
 {
   "name": "materially-free-react-admin-template",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/lab": "^5.0.0-alpha.163",
-    "@mui/material": "^5.15.7",
-    "@mui/styled-engine": "^5.15.7",
-    "@mui/utils": "^5.15.7",
-    "@reduxjs/toolkit": "^2.1.0",
-    "@testing-library/jest-dom": "^6.4.1",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "apexcharts": "^3.45.2",
-    "buffer": "^6.0.3",
-    "crypto-browserify": "^3.12.0",
-    "formik": "^2.4.5",
-    "framer-motion": "^11.0.3",
-    "material-ui-popup-state": "^5.0.10",
-    "process": "^0.11.10",
-    "react": "^18.2.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.15",
+    "@mui/utils": "^5.15.14",
+    "@reduxjs/toolkit": "^2.2.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "apexcharts": "^3.49.0",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.1.7",
+    "material-ui-popup-state": "^5.1.0",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
-    "react-app-rewired": "^2.2.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-redux": "^9.1.0",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0",
-    "react-scripts": "5.0.1",
-    "react-scrollbar": "^0.5.6",
-    "redux": "^5.0.1",
-    "stream-browserify": "^3.0.0",
-    "util": "^0.12.5",
-    "yup": "^1.3.3"
+    "react-redux": "^9.1.1",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
+    "vite": "^5.2.10",
+    "vite-jsconfig-paths": "^2.0.1",
+    "yup": "^1.4.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "build-stage": "env-cmd -f .env.qa react-app-rewired build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "build-stage": "env-cmd -f .env.qa vite 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}\""
   },
   "eslintConfig": {
     "extends": [
@@ -67,9 +59,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@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.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -78,10 +73,11 @@
     "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",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "prettier": "^3.2.5",
     "react-error-overlay": "^6.0.11",
-    "sass": "^1.70.0"
+    "sass": "^1.70.0",
+    "vite-plugin-style-import": "^2.0.0"
   }
 }

src/assets/scss/_themes-vars.scss → src/assets/scss/_themes-vars.module.scss

@@ -25,6 +25,8 @@ $successDark: #007849;
 $successLight: #33bc87;
 
 $grey300: #425466;
+$dark: #343a40;
+
 $bg100: #f8f8f9;
 
 // Text Colors
@@ -33,8 +35,15 @@ $textSecondary: #1b212c;
 $textDark: #12171e;
 $textHint: #00000061;
 
+// Text Dark Color
+$textDarkPrimary: #bbc0c7;
+$textDarkSecondary: #babfc9;
+$textDarkDark: #fff;
+$texDarkHint: #94919161;
+
 // Background Color
-$backgound: #f0f2f8;
+$background: #f0f2f8;
+$backgoundDark: #181e2b;
 
 // Paper Color
 $paper: #ffffff;
@@ -70,6 +79,7 @@ $menuHover: #e3f2fd;
   successLight: $successLight;
 
   grey300: $grey300;
+
   bg100: $bg100;
 
   // Text Colors
@@ -78,8 +88,15 @@ $menuHover: #e3f2fd;
   textDark: $textDark;
   textHint: $textHint;
 
+  // Text Dark Colors
+  textDarkPrimary: $textDarkPrimary;
+  textDarkSecondary: $textDarkSecondary;
+  textDarkDark: $textDarkDark;
+  textDarkHint: $texDarkHint;
+
   // Background Color
-  backgound: $backgound;
+  background: $background;
+  backgoundDark: $backgoundDark;
 
   // Paper Color
   paper: $paper;

src/assets/scss/plugins/_plugins.scss

@@ -1 +1 @@
-@import '~react-perfect-scrollbar/dist/css/styles.css';
+@import 'react-perfect-scrollbar/dist/css/styles.css';

src/assets/scss/style.scss

@@ -1,7 +1,11 @@
-@import 'themes-vars';
+@import 'themes-vars.module.scss';
 @import 'plugins/plugins';
 
 /* breadcrumb */
+.icon-breadcrumb {
+  margin-right: 5px;
+}
+
 .link-breadcrumb {
   font-size: 0.75rem;
   display: flex;
@@ -18,3 +22,21 @@
 .apexcharts-legend-marker {
   margin-right: 8px !important;
 }
+
+.f-right {
+  float: right;
+}
+.p-0 {
+  padding: 0 !important;
+}
+.p-20 {
+  padding: 20px !important;
+}
+
+.apexcharts-legend-text {
+  padding-right: 4px;
+}
+
+.css-7blk3r-MuiButtonBase-root-MuiButton-root {
+  color: $textDarkDark !important;
+}