CI, tooling and autofixes for frontend

.github/workflows/canopeum_backend.yml

@@ -2,13 +2,22 @@ name: canopeum_backend
 
 on:
   push:
+    paths:
+      - "canopeum_backend/**"
+      - ".github/workflows/canopeum_backend.yml"
   pull_request:
     branches:
       - main
+    paths:
+      - "canopeum_backend/**"
+      - ".github/workflows/canopeum_backend.yml"
 
 jobs:
   mypy:
     runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: canopeum_backend
     strategy:
       fail-fast: false
       matrix:
@@ -21,12 +30,13 @@ jobs:
           cache: pip
           cache-dependency-path: "**/requirements*.txt"
       - run: pip install -r requirements-dev.txt
-        working-directory: canopeum_backend
       - run: mypy . --python-version=3.12
-        working-directory: canopeum_backend
 
   pyright:
     runs-on: ${{ matrix.os }}
+    defaults:
+      run:
+        working-directory: canopeum_backend
     strategy:
       fail-fast: false
       matrix:
@@ -39,8 +49,6 @@ jobs:
           cache: pip
           cache-dependency-path: "**/requirements*.txt"
       - run: pip install -r requirements-dev.txt
-        working-directory: canopeum_backend
       - uses: jakebailey/pyright-action@v2
         with:
           python-version: "3.12"
-          working-directory: canopeum_backend

.github/workflows/canopeum_frontend.yml

@@ -0,0 +1,35 @@
+name: canopeum_frontend
+
+on:
+  push:
+    paths:
+      - "canopeum_frontend/**"
+      - ".github/workflows/canopeum_frontend.yml"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "canopeum_frontend/**"
+      - ".github/workflows/canopeum_frontend.yml"
+
+jobs:
+  Lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: canopeum_frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run lint
+  Build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: canopeum_frontend
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run build

.pre-commit-config.yaml

@@ -12,6 +12,7 @@ repos:
       - id: check-toml
       - id: check-merge-conflict
       - id: check-case-conflict
+  # You can run this locally with `ruff format && ruff check`
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.3.4 # must match canopeum_backend/requirements-dev.txt
     hooks:
@@ -20,6 +21,24 @@ repos:
         args: [--fix]
       # Run the formatter.
       - id: ruff-format
+  # You can run this locally with `npm run lint:fix`
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.56.0
+    hooks:
+      - id: eslint
+        files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
+        types: [file]
+        additional_dependencies: [
+            # Keep these in sync with canopeum_backend/package.json
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+            "[email protected]",
+          ]
 
 ci:
   autoupdate_schedule: quarterly

.vscode/extensions.json

@@ -4,12 +4,14 @@
     "bierner.github-markdown-preview",
     "charliermarsh.ruff",
     "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
+    "dprint.dprint",
     "eamodio.gitlens",
     "github.vscode-github-actions",
+    "meganrogge.template-string-converter",
     "ms-python.mypy-type-checker",
     "ms-python.python",
     "ms-python.vscode-pylance",
-    // "ms-vscode.powershell",
     "pkief.material-icon-theme",
     // "redhat.vscode-xml",
     "redhat.vscode-yaml",

.vscode/settings.json

@@ -1,15 +1,15 @@
 {
   "editor.rulers": [
     80,
-    120,
+    120
   ],
   "[git-commit]": {
     "editor.rulers": [
-      72,
-    ],
+      72
+    ]
   },
   "[markdown]": {
-    "files.trimTrailingWhitespace": false,
+    "files.trimTrailingWhitespace": false
   },
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
@@ -22,26 +22,91 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit",
-    // Let dedicated linter (Ruff) organize imports
+    // "source.*Imports": https://github.com/microsoft/TypeScript/pull/50931#issuecomment-1416288712
+    // Let dedicated imports tool deal with it
     "source.organizeImports": "never",
+    "source.sortImports": "never",
+    // IDEM, but also it's annoying to remove imports because of commented code while testing
+    "source.removeUnusedImports": "never"
   },
   "files.associations": {
     ".flake8": "properties",
     "*.qrc": "xml",
     "*.ui": "xml",
     ".markdownlint.json": "jsonc",
+    ".eslintrc*.json": "jsonc",
+    "dprint*.json": "jsonc"
   },
   "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
     "**/*.code-search": true,
-    "*.lock": true,
-  },
-  // Set the default formatter to help avoid Prettier
-  "[json][jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features",
+    "package-lock.json": true,
+    "*.lock": true
   },
+
   "[yaml]": {
     "editor.defaultFormatter": "redhat.vscode-yaml"
   },
+  /*
+  * CSS-specific settings
+  */
+  // TODO: Configure stylelint or dprint-prettier so I can recommend it
+  "[css][scss][postcss][less]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  },
+  "less.format.spaceAroundSelectorSeparator": true,
+  "css.format.spaceAroundSelectorSeparator": true,
+  "scss.format.spaceAroundSelectorSeparator": true,
+  /*
+  * JavasScript-specific settings
+  */
+  // Set the default formatter to help avoid Prettier
+  "[json][jsonc][javascript][javascriptreact][typescript][typescriptreact][markdown][dockerfile]": {
+    "editor.defaultFormatter": "dprint.dprint"
+  },
+  "typescript.tsdk": "canopeum_frontend/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "js/ts.implicitProjectConfig.checkJs": true,
+  "javascript.preferences.quoteStyle": "single",
+  "typescript.preferences.quoteStyle": "single",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "eslint.codeActionsOnSave.rules": [
+    // Clearing imports and unused vars because of commented code while testing is annoying
+    "!unused-imports/no-unused-imports",
+    "!autofix/no-debugger",
+    "!autofix/no-unused-vars",
+    "*"
+  ],
+  "eslint.rules.customizations": [
+    {
+      "rule": "*",
+      "severity": "downgrade"
+    }
+  ],
+  /*
+  * HTML-specific settings
+  */
+  // Specify the formatter in case other formatters are also installed (ie: Prettier)
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "html.format.wrapAttributes": "force-expand-multiline",
+  /*
+  * Python-specific settings
+  */
   "[python]": {
     "editor.defaultFormatter": "charliermarsh.ruff",
     "editor.tabSize": 4,
@@ -50,13 +115,13 @@
       // 79, // PEP8-17 default max
       // 88, // Black/Ruff default
       // 99, // PEP8-17 acceptable max
-      120, // Our hard rule
-    ],
+      120 // Our hard rule
+    ]
   },
   "mypy-type-checker.importStrategy": "fromEnvironment",
   "mypy-type-checker.args": [
     // https://github.com/microsoft/vscode-mypy/issues/37#issuecomment-1602702174
-    "--config-file=${workspaceFolder}/canopeum_backend/pyproject.toml",
+    "--config-file=${workspaceFolder}/canopeum_backend/pyproject.toml"
   ],
   "python.terminal.activateEnvironment": true,
   // python.analysis is Pylance (pyright) configurations
@@ -69,32 +134,9 @@
   "ruff.importStrategy": "fromEnvironment",
   // Use the Ruff extension instead
   "isort.check": false,
-  "powershell.codeFormatting.pipelineIndentationStyle": "IncreaseIndentationForFirstPipeline",
-  "powershell.codeFormatting.autoCorrectAliases": true,
-  "powershell.codeFormatting.trimWhitespaceAroundPipe": true,
-  "powershell.codeFormatting.useConstantStrings": true,
-  "powershell.codeFormatting.useCorrectCasing": true,
-  "powershell.codeFormatting.whitespaceBetweenParameters": true,
-  "powershell.integratedConsole.showOnStartup": false,
-  "terminal.integrated.defaultProfile.windows": "PowerShell",
-  "terminal.integrated.defaultProfile.linux": "pwsh",
-  "terminal.integrated.defaultProfile.osx": "pwsh",
-  "xml.codeLens.enabled": true,
-  "xml.format.spaceBeforeEmptyCloseTag": false,
-  "xml.format.preserveSpace": [
-    // Default
-    "xsl:text",
-    "xsl:comment",
-    "xsl:processing-instruction",
-    "literallayout",
-    "programlisting",
-    "screen",
-    "synopsis",
-    "pre",
-    "xd:pre",
-    // Custom
-    "string"
-  ],
+  /*
+  * TOML-specific settings
+  */
   "[toml]": {
     "editor.defaultFormatter": "tamasfe.even-better-toml"
   },
@@ -114,5 +156,5 @@
   "evenBetterToml.formatter.reorderArrays": true,
   "evenBetterToml.formatter.trailingNewline": true,
   // We like keeping TOML keys in a certain non-alphabetical order that feels more natural
-  "evenBetterToml.formatter.reorderKeys": false,
+  "evenBetterToml.formatter.reorderKeys": false
 }

README.md

@@ -10,25 +10,31 @@ Follow these instructions to get the project up and running on your local machin
 
 ### Prerequisites
 
-For frontend
+For frontend:
+
+- [Node.js](https://nodejs.org/en/download) (includes npm)
+- [Mockoon](https://mockoon.com/download/#download-section)
 
-- Node.js
-- npm (Node Package Manager)
-- Mockoon
 For backend
-- Python 3.12
-- Docker
+
+- [Python 3.12](https://www.python.org/downloads/)
+- [Docker](https://www.docker.com/get-started/)
 
 ### Installation
 
-1. Clone the repository:
+1. Fork the project:  
+![Fork](/docs/Fork.png)
+
+2. Clone the repository:  
+From your fork, copy the repo's URL  
+![Clone](/docs/Clone.png)
 
 ```shell
-git clone [email protected]:BesLogic/releaf-canopeum.git
+git clone <the_url_you_copied>
 cd releaf-canopeum
 ```
 
-2. Set up a Python 3.12 virtual environment
+3. Set up a Python 3.12 virtual environment
 
 ```shell
 cd canopeum_backend
@@ -58,7 +64,7 @@ In VSCode (Windows):
 `CTRL+Shift+P` (Open Command Palette) > `Python: Select Interpreter`
 ![VSCode_select_venv](/docs/VSCode_select_venv.png)
 
-3. Set up Django backend and Database: (Skip this section for Frontend only)
+4. Set up Django backend and Database: (Skip this section for Frontend only)
 
 ```shell
 docker compose up
@@ -68,7 +74,7 @@ python manage.py migrate
 python manage.py runserver
 ```
 
-4. Set up React frontend:
+5. Set up React frontend:
 
 ```shell
 cd canopeum_frontend