InseeFr · QRuhier · Dec 18, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
@@ -1,7 +1,7 @@
 name: Deploy Documentation
 on:
   push:
-    branches: ["main", "2.*"]
+    branches: ['main', '2.*']
     paths:
       - website/**
 
@@ -16,7 +16,7 @@ permissions:
   id-token: write
 
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+yarn test && yarn lint-staged
diff --git a/.prettierrc b/.prettierrc
@@ -1,11 +1,8 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "jsxSingleQuote": false,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
-  "endOfLine": "lf"
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^react$", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }
diff --git a/build/remote-env.cjs b/build/remote-env.cjs
@@ -13,7 +13,7 @@ log.blue(`MFE manage env for remote (micro-frontend)`)
 
 const nameOfMfeEnv = 'swEnv.js'
 const entryScriptPath = path.resolve(
-  `${process.cwd()}/dist/assets/${process.argv[2]}`
+  `${process.cwd()}/dist/assets/${process.argv[2]}`,
 )
 const swEnvScriptPath = path.resolve(`${process.cwd()}/dist/${nameOfMfeEnv}`)
 
@@ -27,6 +27,6 @@ if (isSwEnvScriptExists && isEntryScriptExists) {
   log.green(`✓ Added env file inside ${entryScriptPath}`)
 } else {
   log.red(
-    `x Nothing to do. Are you using vite-envs and federation plugin in your configuration vite.config.ts ?`
+    `x Nothing to do. Are you using vite-envs and federation plugin in your configuration vite.config.ts ?`,
   )
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,30 +1,45 @@
+import js from '@eslint/js'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
 import globals from 'globals'
-import pluginJs from '@eslint/js'
 import tseslint from 'typescript-eslint'
-import pluginReact from 'eslint-plugin-react'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
-export default [
-  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
-  { languageOptions: { globals: globals.browser } },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat['jsx-runtime'],
-  eslintPluginPrettierRecommended,
+export default tseslint.config(
   {
-    settings: { react: { version: '18.3' } },
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-namespace': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
-    },
+    ignores: ['dist', 'src/vite-env.d.ts'],
+  },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['src/**/*.{ts,tsx}'],
     languageOptions: {
+      ecmaVersion: 2020,
       globals: {
+        ...globals.browser,
+        ...globals.worker,
         importScripts: 'readonly',
         workbox: 'readonly',
       },
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      // see https://typescript-eslint.netlify.app/rules/no-unused-vars/
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-explicit-any': ['off'],
+      '@typescript-eslint/no-namespace': ['off'],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
     },
   },
-]
+)
diff --git a/index.html b/index.html
@@ -1,23 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Collecte de questionnaire en face à face"
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <meta name="msapplication-TileColor" content="#3e69b1" />
+    <meta name="theme-color" content="#ffffff" />
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Collecte de questionnaire en face à face" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <meta name="msapplication-TileColor" content="#3e69b1">
-  <meta name="theme-color" content="#ffffff">
+    <title>Questionnaire enquêteur</title>
+  </head>
 
-
-  <title>Questionnaire enquêteur</title>
-</head>
-
-<body>
-  <div id="drama-queen"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="drama-queen"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -5,16 +5,18 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 5001 --strictPort",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:coverage": "vitest --coverage",
     "build": "tsc && vite build",
     "postbuild": "node build/remote-env.cjs remoteEntry.js",
     "preview": "vite preview --port 5001 --strictPort",
-    "_format": "prettier 'src/**/*.{ts,tsx,js,jsx,json,md}'",
+    "_format": "prettier --ignore-unknown .",
     "format": "npm run _format -- --write",
-    "lint": "eslint src/",
     "format:check": "npm run _format -- --list-different",
-    "stop": "kill-port --port 5000,5001,5002"
+    "lint": "eslint ./src",
+    "stop": "kill-port --port 5000,5001,5002",
+    "prepare": "husky"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -41,31 +43,40 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.16.0",
     "@originjs/vite-plugin-federation": "^1.2.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
-    "@eslint/js": "^9.13.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/node": "^20.16.10",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.3.2",
     "@vitest/coverage-v8": "^2.1.3",
-    "jsdom": "^25.0.1",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint": "^9.16.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.11.0",
+    "husky": "^9.1.7",
+    "jsdom": "^25.0.1",
     "kill-port": "^2.0.1",
+    "lint-staged": "^15.2.11",
     "prettier": "^3.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.11.0",
+    "typescript-eslint": "^8.18.0",
     "vite": "^5.4.8",
     "vite-envs": "^4.4.5",
     "vite-plugin-pwa": "^0.19.8",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.1.3"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write --list-different"
+    ],
+    "!(*.js|*.jsx|*.ts|*.tsx)": "prettier --write --ignore-unknown --list-different"
   }
 }
diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
@@ -1,9 +1,10 @@
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
-import { unsubscribeOldSW } from 'unsubscribe_old_sw'
-import { CoreProvider } from 'createCore'
-import { createRouter, type RoutingStrategy } from 'ui/routing/createRouter'
-import { CenteredSpinner } from 'ui/components/CenteredSpinner'
+
+import { CoreProvider } from '@/createCore'
+import { CenteredSpinner } from '@/ui/components/CenteredSpinner'
+import { type RoutingStrategy, createRouter } from '@/ui/routing/createRouter'
+import { unsubscribeOldSW } from '@/unsubscribe_old_sw'
 
 const mount = ({
   mountPoint,
@@ -24,7 +25,7 @@ const mount = ({
   root.render(
     <CoreProvider fallback={<CenteredSpinner />}>
       <RouterProvider router={router} />
-    </CoreProvider>
+    </CoreProvider>,
   )
 
   return () => queueMicrotask(() => root.unmount())

diff --git a/src/core/adapters/datastore/default.ts b/src/core/adapters/datastore/default.ts
@@ -1,7 +1,8 @@
-import type { Paradata, SurveyUnit } from 'core/model'
-import type { DataStore } from 'core/ports/DataStore'
 import Dexie, { type Table } from 'dexie'
 
+import type { Paradata, SurveyUnit } from '@/core/model'
+import type { DataStore } from '@/core/ports/DataStore'
+
 type Tables = {
   surveyUnit: Table<SurveyUnit, string>
   paradata: Table<Paradata>

diff --git a/src/core/adapters/localSyncStorage/default.ts b/src/core/adapters/localSyncStorage/default.ts
@@ -1,7 +1,8 @@
 import type {
   LocalStorageObject,
   LocalSyncStorage,
-} from 'core/ports/LocalSyncStorage'
+} from '@/core/ports/LocalSyncStorage'
+
 import { localStorageObjectSchema } from './parser/localSyncObjectSchema'
 
 export function createLocalSyncStorage(params: {

diff --git a/src/core/adapters/localSyncStorage/parser/localSyncObjectSchema.test.ts b/src/core/adapters/localSyncStorage/parser/localSyncObjectSchema.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+
 import { localStorageObjectSchema } from './localSyncObjectSchema'
 
 describe('localStorageObjectSchema', () => {

diff --git a/src/core/adapters/localSyncStorage/parser/localSyncObjectSchema.ts b/src/core/adapters/localSyncStorage/parser/localSyncObjectSchema.ts
@@ -1,7 +1,8 @@
-import type { LocalStorageObject } from 'core/ports/LocalSyncStorage'
 import { type Equals, assert } from 'tsafe'
 import { z } from 'zod'
 
+import type { LocalStorageObject } from '@/core/ports/LocalSyncStorage'
+
 export const localStorageObjectSchema = z.object({
   error: z.boolean(),
   surveyUnitsSuccess: z.array(z.string()),

diff --git a/src/core/adapters/oidc/default.ts b/src/core/adapters/oidc/default.ts
@@ -1,5 +1,7 @@
-import type { Oidc } from 'core/ports/Oidc'
 import { createOidc as createOidcSpa } from 'oidc-spa'
+
+import type { Oidc } from '@/core/ports/Oidc'
+
 import { getMockedOidc } from './mock'
 
 export function createOidc(params: {

diff --git a/src/core/adapters/oidc/mock.ts b/src/core/adapters/oidc/mock.ts
@@ -1,6 +1,7 @@
-import type { Oidc } from 'core/ports/Oidc'
 import { id } from 'tsafe/id'
 
+import type { Oidc } from '@/core/ports/Oidc'
+
 export function createOidc(params: {
   isUserLoggedIn: boolean
 }): () => Promise<Oidc> {

diff --git a/src/core/adapters/queenApi/default.ts b/src/core/adapters/queenApi/default.ts
@@ -1,14 +1,16 @@
 import axios, { AxiosError } from 'axios'
+
 import type {
   Campaign,
   IdAndQuestionnaireId,
   Nomenclature,
   Questionnaire,
   RequiredNomenclatures,
   SurveyUnit,
-} from 'core/model'
-import type { QueenApi } from 'core/ports/QueenApi'
-import { handleAxiosError } from 'core/tools/axiosError'
+} from '@/core/model'
+import type { QueenApi } from '@/core/ports/QueenApi'
+import { handleAxiosError } from '@/core/tools/axiosError'
+
 import {
   campaignSchema,
   idAndQuestionnaireIdSchema,
@@ -50,7 +52,7 @@ export function createApiClient(params: {
           return Promise.reject(error)
         }
         return Promise.reject(handleAxiosError(error))
-      }
+      },
     )
     return { axiosInstance }
   })()
@@ -65,14 +67,14 @@ export function createApiClient(params: {
       axiosInstance
         .get<SurveyUnit[]>(`/api/survey-units/interviewer`)
         .then(({ data }) =>
-          data.map((surveyUnit) => surveyUnitSchema.parse(surveyUnit))
+          data.map((surveyUnit) => surveyUnitSchema.parse(surveyUnit)),
         ),
 
     getSurveyUnit: (idSurveyUnit) =>
       axiosInstance
         .get<Omit<SurveyUnit, 'id'>>(`/api/survey-unit/${idSurveyUnit}`)
         .then(({ data }) =>
-          surveyUnitSchema.parse({ id: idSurveyUnit, ...data })
+          surveyUnitSchema.parse({ id: idSurveyUnit, ...data }),
         ),
     putSurveyUnit: (surveyUnit) =>
       axiosInstance
@@ -100,7 +102,7 @@ export function createApiClient(params: {
     getRequiredNomenclaturesByCampaign: (idNomenclature) =>
       axiosInstance
         .get<RequiredNomenclatures>(
-          `/api/questionnaire/${idNomenclature}/required-nomenclatures`
+          `/api/questionnaire/${idNomenclature}/required-nomenclatures`,
         )
         .then(({ data }) => requiredNomenclaturesSchema.parse(data)),
 

diff --git a/src/core/adapters/queenApi/mock.ts b/src/core/adapters/queenApi/mock.ts
@@ -1,6 +1,7 @@
-import type { QueenApi } from 'core/ports/QueenApi'
+import type { SurveyUnit } from '@/core/model'
+import type { QueenApi } from '@/core/ports/QueenApi'
+
 import { surveySample } from './mockData/surveySample'
-import type { SurveyUnit } from 'core/model'
 
 export function createApiClient(): QueenApi {
   return {
@@ -15,13 +16,13 @@ export function createApiClient(): QueenApi {
       Promise.resolve(createSUMocked({ idSu: idSurveyUnit })),
     putSurveyUnit: (surveyUnit) =>
       Promise.resolve(
-        console.log('putSurveyUnit', `id: ${surveyUnit.id}`, surveyUnit)
+        console.log('putSurveyUnit', `id: ${surveyUnit.id}`, surveyUnit),
       ),
     putSurveyUnitsData: (surveyUnitsData) =>
       Promise.resolve(console.table(surveyUnitsData)),
     postSurveyUnitInTemp: (surveyUnit) =>
       Promise.resolve(
-        console.log('postSurveyUnitInTemp', `id: ${surveyUnit.id}`, surveyUnit)
+        console.log('postSurveyUnitInTemp', `id: ${surveyUnit.id}`, surveyUnit),
       ),
     getCampaigns: () =>
       Promise.resolve([

diff --git a/src/core/adapters/queenApi/mockData/surveySample.ts b/src/core/adapters/queenApi/mockData/surveySample.ts
@@ -1,4 +1,4 @@
-import type { Questionnaire } from 'core/model/Questionnaire'
+import type { Questionnaire } from '@/core/model/Questionnaire'
 
 export const surveySample = {
   componentType: 'Questionnaire',