Improved Codebase Standards

.github/workflows/frontend_build.yml

@@ -53,6 +53,14 @@ jobs:
         if: steps.pnpm-cache.outputs.cache-hit != 'true'
         working-directory: ./frontend
         run: pnpm install --frozen-lockfile
+
+      - name: Run Eslint
+        working-directory: ./frontend
+        run: pnpm lint
+
+      - name: Run Prettier check
+        working-directory: ./frontend
+        run: pnpm format:check
 
       - name: Build
         working-directory: ./frontend

.github/workflows/frontend_build_push.yml

@@ -52,6 +52,14 @@ jobs:
         if: steps.pnpm-cache.outputs.cache-hit != 'true'
         working-directory: ./frontend
         run: pnpm install --frozen-lockfile
+
+      - name: Run Eslint
+        working-directory: ./frontend
+        run: pnpm lint
+
+      - name: Run Prettier check
+        working-directory: ./frontend
+        run: pnpm format:check
 
       - name: Build frontend
         working-directory: ./frontend

frontend/.husky/pre-commit

@@ -0,0 +1,7 @@
+echo "===== Navigating to project directory ====="
+cd frontend
+
+echo "===== Running precommit script ====="
+pnpm precommit 
+
+echo "===== Pre-commit hook finished ====="

frontend/README.md

@@ -84,14 +84,30 @@ The project standards are crucial for maintaining code quality, consistency, and
 
 ESLint is used to maintain code quality and adhering to coding standards.
 
+#### Lint
+
+You can run linting to automatically check and fix code style issues. Run the following command in your terminal:
+
+```bash
+pnpm lint
+```
+
+#### Precommit
+
+The precommit script is used to automatically check code style, run tests, and format code before commits are made. To run it manually, use:
+
+```bash
+pnpm precommit
+```
+
 #### Prettier
 
 Prettier is a used to maintain consistent code formatting in the project. To format run the code below in the terminal.
 
 ```bash
-1. pnpm/npm/yarn format
+1. pnpm format
 
-2. pnpm/npm/yarn format:check
+2. pnpm format:check
 ```
 
 #### TypeScript

frontend/eslint.config.js

@@ -2,26 +2,36 @@ import js from '@eslint/js';
 import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from '@typescript-eslint/eslint-plugin';
 import prettierPlugin from 'eslint-plugin-prettier';
 import prettierConfig from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint'
+import react from 'eslint-plugin-react'
+import TypeScriptParser from '@typescript-eslint/parser'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import tailwind from "eslint-plugin-tailwindcss";
 
 
-export default [
+
+export default tseslint.config(
+  { ignores: ['dist'] },
 
   {
-    ignores: ['dist'],
+    extends: [
+      // Js
+      js.configs.recommended,
+      // Ts
+      ...tseslint.configs.recommended,
+      // React
+      react.configs.flat.recommended,
+      // Prettier
+      ...pluginQuery.configs['flat/recommended'],
+      ...tailwind.configs["flat/recommended"],
+      prettierConfig,
+    ],
     files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      sourceType: 'module',
-      globals: globals.browser,
-      parser: '@typescript-eslint/parser',
-    },
     plugins: {
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
-      '@tanstack/query': '@tanstack/query',
       'prettier': prettierPlugin,
     },
     rules: {
@@ -31,12 +41,27 @@ export default [
         { allowConstantExport: true },
       ],
       'prettier/prettier': 'error',
+      // To avoid the need to import React
+      'react/react-in-jsx-scope': 'off',
+      // To avoid the need to specify prop types
+      'react/prop-types': 'off',
+      'tailwindcss/no-custom-classname': 'off',
+    },
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      globals: globals.browser,
+      parser: TypeScriptParser,
+    },
 
+    settings: {
+      // For eslint-plugin-react to auto detect react version
+      react: {
+        version: 'detect'
+      },
     },
-  },
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  'plugin:@tanstack/eslint-plugin-query/recommended',
-  'plugin:tailwindcss/recommended',
-  prettierConfig,
-];
+
+  }
+)
+
+

frontend/index.html

@@ -19,7 +19,6 @@
   <!-- HOT OSM UI -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hotosm/[email protected]/dist/style.css" />
   <script type="module" src="https://cdn.jsdelivr.net/npm/@hotosm/[email protected]/dist/hotosm-ui.js"></script>
-  <!-- HOT OSM UI -->
   <title>HOT fAIr</title>
 </head>
 

frontend/package.json

@@ -10,8 +10,17 @@
     "preview": "vite preview",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
     "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "test": "vitest run --passWithNoTests",
+    "coverage": "vitest run --coverage",
+    "precommit": "lint-staged",
+    "prepare": "cd .. && husky frontend/.husky"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md,test.ts}": [
+      "pnpm format",
+      "pnpm test",
+      "pnpm lint" 
+    ]
   },
   "dependencies": {
     "@reactour/tour": "^3.7.0",
@@ -71,7 +80,9 @@
     "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "globals": "^15.10.0",
+    "husky": "^9.1.7",
     "jsdom": "^26.0.0",
+    "lint-staged": "^16.1.2",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "tailwindcss": "^3.4.13",