migrate to vite, use typescript, redux-toolkit, etc

hutamatr · Aug 8, 2023 · 3f12f7b · 3f12f7b
1 parent 5c86b65
commit 3f12f7b
Show file tree

Hide file tree

Showing 148 changed files with 5,178 additions and 11,555 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+VITE_API_TOKEN=98346afa737a70b6f720daf2db5372457c0a5a5717018769fc2e530058193c55cc47ec4229c18cbba173745e3a3b60b59ea17c8ffd7f4602a76569d610d0e9affffdca9975996a944acc3864ee14cd562c852fab0932472935d45a3c71b3b43cba0a12cfd3296c50c5087e6eab4afb05d8cde6158b6b61d5bde8b73ac470fa77
+VITE_BASE_URL=http://localhost:1337/api
+VITE_IMAGE_URL=http://localhost:1337
diff --git a/.env.example b/.env.example
@@ -0,0 +1,3 @@
+VITE_API_TOKEN=
+VITE_BASE_URL=
+VITE_IMAGE_URL=
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,41 +1,50 @@
 {
+  "root": true,
   "env": {
     "browser": true,
-    "es2021": true,
+    "es2020": true,
     "node": true,
     "jest": true
   },
-  "plugins": ["react", "unused-imports"],
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
     "prettier"
   ],
-  "overrides": [],
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "requireConfigFile": false,
-    "babelOptions": {
-      "presets": ["@babel/preset-react"]
-    }
-  },
+  "ignorePatterns": ["dist", ".eslintrc.cjs"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "unused-imports", "simple-import-sort"],
+  // "overrides": [],
+  // "parserOptions": {
+  //   "ecmaVersion": "latest",
+  //   "sourceType": "module",
+  //   "requireConfigFile": false,
+  //   "babelOptions": {
+  //     "presets": ["@babel/preset-react"]
+  //   }
+  // },
   "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
     "semi": "warn",
-    "no-unused-vars": "off",
+    "no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "no-console": "warn",
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "react/no-unescaped-entities": "off",
     "react/display-name": "off",
-    "react/jsx-curly-brace-presence": [
-      "warn",
-      { "props": "never", "children": "never" }
-    ],
+    // "react/tsx-curly-brace-presence": [
+    //   "warn",
+    //   { "props": "never", "children": "never" }
+    // ],
 
     //*=========== Unused Import ===========
+    "@typescript-eslint/no-unused-vars": "off",
     "unused-imports/no-unused-imports": "warn",
     "unused-imports/no-unused-vars": [
       "warn",
@@ -45,6 +54,54 @@
         "args": "after-used",
         "argsIgnorePattern": "^_"
       }
+    ],
+    "simple-import-sort/exports": "warn",
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [
+          // Side effect imports.
+          ["^\\u0000"],
+
+          // Packages.
+          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+          ["^@?\\w"],
+
+          // components
+          ["^@components"],
+
+          // pages
+          ["^@pages"],
+
+          // context & api
+          ["^@context", "^@store", "^@api"],
+
+          // hooks & utils
+          ["^@hooks", "^@utils"],
+
+          // Other imports
+          // ['^@/'],
+          ["^@public", "^@assets"],
+
+          // {s}css files
+          ["^.+\\.s?css$"],
+
+          // relative paths up until 3 level
+          [
+            "^\\./?$",
+            "^\\.(?!/?$)",
+            "^\\.\\./?$",
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./\\.\\./?$",
+            "^\\.\\./\\.\\.(?!/?$)",
+            "^\\.\\./\\.\\./\\.\\./?$",
+            "^\\.\\./\\.\\./\\.\\.(?!/?$)"
+          ],
+
+          ["^types"],
+          ["^"]
+        ]
+      }
     ]
   },
   "settings": {

diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Urban Fashion</title>
+  </head>
+  <body>
+    <div id="modal-backdrop"></div>
+    <div id="modal-card"></div>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
diff --git a/package.json b/package.json
@@ -1,71 +1,69 @@
 {
   "name": "urban-fashion-shop",
-  "version": "1.1.4",
   "private": true,
+  "version": "1.1.4",
+  "type": "module",
   "engines": {
     "node": ">= 16",
     "yarn": ">= 1.22.0",
     "npm": "please-use-yarn"
   },
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "axios": "^1.4.0",
-    "flowbite": "^1.7.0",
-    "flowbite-react": "^0.4.11",
-    "jwt-decode": "^3.1.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
-    "react-router-dom": "^6.14.1",
-    "react-scripts": "5.0.1",
-    "react-select": "^5.7.4",
-    "react-select-country-list": "^2.2.3",
-    "react-toggle-dark-mode": "^1.1.1",
-    "web-vitals": "^3.4.0"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint .",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix && yarn format",
     "lint:strict": "eslint --max-warnings=0 .",
-    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./prettier.config.cjs",
     "format:check": "prettier -c './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc.json",
     "test-coverage": "yarn test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx,js,jsx}' --collectCoverageFrom='!src/components/**/*.{types,stories,constants,test,spec}.{ts,tsx,js,jsx}'",
     "prepare": "husky install"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "dependencies": {
+    "@hookform/resolvers": "^3.1.1",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@stripe/react-stripe-js": "^2.1.1",
+    "@stripe/stripe-js": "^2.0.0",
+    "@uiball/loaders": "^1.3.0",
+    "axios": "^1.4.0",
+    "clsx": "^2.0.0",
+    "flowbite": "^1.8.1",
+    "flowbite-react": "^0.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.2",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.10.1",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-toggle-dark-mode": "^1.1.1",
+    "redux-persist": "^6.0.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.22.5",
+    "@types/node": "^20.4.6",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
-    "postcss": "^8.4.26",
+    "postcss": "^8.4.27",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.4.1",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.8"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [

diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
@@ -3,7 +3,7 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-    // eslint-disable-next-line no-undef
-    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
+    // // eslint-disable-next-line no-undef
+    // ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
   },
 };
diff --git a/prettier.config.cjs b/prettier.config.cjs
@@ -0,0 +1,12 @@
+const config = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  tailwindConfig: './tailwind.config.cjs',
+  tailwindFunctions: ['clsx'],
+  plugins: ['prettier-plugin-tailwindcss'],
+};
+
+module.exports = config;
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/vite.svg b/public/vite.svg