Migrate Node and update all frontend dependencies

.github/workflows/shared-build/action.yml

@@ -38,7 +38,7 @@ runs:
     - name: Setup Node (with pnpm cache)
       uses: actions/setup-node@v4
       with:
-        node-version: "20.13"
+        node-version: "22.20"
         cache: "pnpm"
 
     - name: Cache pnpm store
@@ -79,11 +79,6 @@ runs:
       working-directory: testproject
       shell: bash
 
-    - name: Deduplicate JS dependencies
-      run: pnpm dedupe
-      working-directory: testproject
-      shell: bash
-
     - name: Install Poetry
       run: pip install poetry==2.0.1 --upgrade
       working-directory: testproject
@@ -168,13 +163,6 @@ runs:
       working-directory: testproject/backend
       shell: bash
 
-    - name: Check migrations (dry run)
-      run: poetry run python manage.py makemigrations --check --dry-run
-      working-directory: testproject/backend
-      env:
-        DATABASE_URL: "sqlite:///"
-      shell: bash
-
     - name: Django deploy checks
       run: poetry run python manage.py check --deploy --fail-level WARNING
       working-directory: testproject/backend

.pre-commit-config.yaml

@@ -33,20 +33,21 @@ repos:
     hooks:
       - id: eslint
         name: eslint-local
-        entry: npm run lint
+        entry: pnpm run lint
         language: system
         types: [file]
         files: \.(js|jsx|ts|tsx)$
         exclude: >
           (?x)^(
             .+\.config\.js|
             .+\.setup\.js|
-            \.eslintrc\.js
+            openapi-ts\.config\.ts |
+            frontend/js/api/.*
           )$
         pass_filenames: true
       - id: tsc
         name: tsc-local
-        entry: npm run tsc
+        entry: pnpm run tsc
         language: system
         types: [file]
         files: \.(ts|tsx)$
@@ -66,7 +67,7 @@ repos:
         pass_filenames: false
       - id: frontend-api
         name: frontend-api-local
-        entry: npm run openapi-ts
+        entry: pnpm run openapi-ts
         language: system
         files: backend/schema\.yml$
         pass_filenames: false

.prettierignore

@@ -0,0 +1,42 @@
+# Generated / build directories
+node_modules/
+dist/
+build/
+coverage/
+
+# Lock / package files
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# Config / bundler files
+webpack.config.js
+*.config.js
+*.config.cjs
+*.config.mjs
+
+# Source maps
+*.map
+
+# Minified files
+*.min.js
+*.min.css
+
+# Test snapshots
+*.snap
+
+# Logs / temporary
+*.log
+tmp/
+temp/
+
+# Assets / binary files that don't need formatting
+*.svg
+*.png
+*.jpg
+*.jpeg
+*.woff
+*.woff2
+
+# Ignore generated API folder by hey-api
+frontend/js/api/**

.prettierrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  // number of spaces per indent level
+  tabWidth: 2,
+  // use spaces instead of tabs
+  useTabs: false,
+  // print semicolons at ends of statements
+  semi: true,
+  // use single quote where possible
+  singleQuote: true,
+  // trailing commas where valid in ES5 (objects, arrays, etc)
+  trailingComma: 'es5',
+  // put > of a multi-line JSX tag on its own line
+  bracketSameLine: false,
+  // max line length
+  printWidth: 100,
+  // enforce line feed as end of line
+  endOfLine: 'lf',
+  // put the `>` of a JSX element in the last line instead of new line
+  jsxBracketSameLine: false,
+  // use single quotes in JSX
+  jsxSingleQuote: false,
+};

eslint.config.mjs

@@ -0,0 +1,134 @@
+import { defineConfig } from "eslint/config";
+
+// Import global definitions
+import globals from "globals";
+
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import promisePlugin from "eslint-plugin-promise";
+import sonarjsPlugin from "eslint-plugin-sonarjs";
+import unicornPlugin from "eslint-plugin-unicorn";
+import jestPlugin from "eslint-plugin-jest";
+
+export default defineConfig([
+  // Base JS rules, with browser + node globals
+  {
+    ...js.configs.recommended,
+    languageOptions: {
+      globals: {
+        // include browser globals (window, document, etc)
+        ...globals.browser,
+        // include node globals (process, module, require, global, etc)
+        ...globals.node,
+        // include jest globals (describe, test, expect etc)
+        ...globals.jest,
+      },
+    },
+  },
+
+  // TypeScript files
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: new URL(".", import.meta.url).pathname,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin,
+    },
+    rules: {
+      // desabilitar no-undef para TS, pois TS já detecta variáveis indefinidas
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    },
+  },
+
+  // React / JSX files
+  {
+    files: ["**/*.tsx", "**/*.jsx"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
+    rules: {
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+
+  // Common rules for all JS/TS/JSX/TSX
+  {
+    files: ["**/*.{js,ts,tsx,jsx}"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+    },
+    plugins: {
+      import: importPlugin,
+      "jsx-a11y": jsxA11yPlugin,
+      promise: promisePlugin,
+      sonarjs: sonarjsPlugin,
+      unicorn: unicornPlugin,
+      jest: jestPlugin,
+    },
+    rules: {
+      "import/order": [
+        "warn",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "object",
+            "type",
+          ],
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+        },
+      ],
+      "unicorn/prefer-module": "off",
+    },
+  },
+
+  // Ignores / files to skip
+  {
+    ignores: ["node_modules/", "dist/", "build/", "frontend/js/api/", "openapi-ts.config.ts"],
+  },
+]);

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:22-alpine
 
 WORKDIR /app/
 ADD package.json pnpm-lock.yaml* /app/

frontend/assets/images/index.d.ts

@@ -1,24 +1,24 @@
-declare module "*.png" {
+declare module '*.png' {
   const value: string;
   export = value;
 }
 
-declare module "*.jpg" {
+declare module '*.jpg' {
   const value: string;
   export = value;
 }
 
-declare module "*.jpeg" {
+declare module '*.jpeg' {
   const value: string;
   export = value;
 }
 
-declare module "*.gif" {
+declare module '*.gif' {
   const value: string;
   export = value;
 }
 
-declare module "*.svg" {
+declare module '*.svg' {
   const value: string;
   export = value;
 }

frontend/css/style.css

@@ -1 +1 @@
-@import "tailwindcss";
+@import 'tailwindcss';

frontend/js/App.tsx

@@ -1,14 +1,14 @@
-import * as Sentry from "@sentry/react";
-import cookie from "cookie";
-import { RouterProvider } from "react-router/dom";
+import * as Sentry from '@sentry/react';
+import { parse as cookieParse } from 'cookie';
+import { RouterProvider } from 'react-router/dom';
 
-import { OpenAPI } from "./api";
-import router from "./routes";
+import { client } from '@/js/api/client.gen';
+import router from '@/js/routes';
 
-OpenAPI.interceptors.request.use((request) => {
-  const { csrftoken } = cookie.parse(document.cookie);
+client.instance.interceptors.request.use((request) => {
+  const { csrftoken } = cookieParse(document.cookie);
   if (request.headers && csrftoken) {
-    request.headers["X-CSRFTOKEN"] = csrftoken;
+    request.headers['X-CSRFTOKEN'] = csrftoken;
   }
   return request;
 });