feat: enable ESLint and Prettier on the CI (#261)

* feat: enable ESLint * fix: prettier (js file) conf for windows please add `"files.eol": "\n"` to your user setttings.json for vs-code --------- Co-authored-by: Laurent Caouissin <[email protected]>
InseeFr · Oct 31, 2024 · 3f8bc94 · 3f8bc94
1 parent 353cdc8
commit 3f8bc94
Show file tree

Hide file tree

Showing 19 changed files with 2,123 additions and 1,536 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -14,6 +14,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
       - run: yarn
+      - run: npx lerna run format
+      - run: npx lerna run lint
       - run: yarn build
       - uses: actions/upload-artifact@v4
         with:

diff --git a/drama-queen/.prettierrc b/drama-queen/.prettierrc
@@ -6,5 +6,6 @@
   "tabWidth": 2,
   "jsxSingleQuote": false,
   "jsxBracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }
diff --git a/drama-queen/eslint.config.js b/drama-queen/eslint.config.js
@@ -0,0 +1,30 @@
+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,
+  {
+    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',
+    },
+    languageOptions: {
+      globals: {
+        importScripts: 'readonly',
+        workbox: 'readonly',
+      },
+    },
+  },
+]
diff --git a/drama-queen/package.json b/drama-queen/package.json
@@ -10,8 +10,9 @@
     "build": "tsc && vite build",
     "postbuild": "node build/remote-env.cjs remoteEntry.js",
     "preview": "vite preview --port 5001 --strictPort",
-    "_format": "prettier '**/*.{ts,tsx,json,md}'",
+    "_format": "prettier 'src/**/*.{ts,tsx,js,jsx,json,md}'",
     "format": "npm run _format -- --write",
+    "lint": "eslint src/",
     "format:check": "npm run _format -- --list-different"
   },
   "dependencies": {
@@ -42,15 +43,22 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@eslint/js": "^9.13.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",
+    "globals": "^15.11.0",
     "prettier": "^3.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
+    "typescript-eslint": "^8.11.0",
     "vite": "^5.4.8",
     "vite-envs": "^4.4.5",
     "vite-plugin-pwa": "^0.19.8",

diff --git a/drama-queen/src/core/adapters/queenApi/default.ts b/drama-queen/src/core/adapters/queenApi/default.ts
@@ -1,12 +1,4 @@
-import axios, { Axios, AxiosError } from 'axios'
-import type { QueenApi } from 'core/ports/QueenApi'
-import {
-  campaignSchema,
-  idAndQuestionnaireIdSchema,
-  nomenclatureSchema,
-  requiredNomenclaturesSchema,
-  surveyUnitSchema,
-} from './parserSchema'
+import axios, { AxiosError } from 'axios'
 import type {
   Campaign,
   IdAndQuestionnaireId,
@@ -15,7 +7,15 @@ import type {
   RequiredNomenclatures,
   SurveyUnit,
 } from 'core/model'
+import type { QueenApi } from 'core/ports/QueenApi'
 import { handleAxiosError } from 'core/tools/axiosError'
+import {
+  campaignSchema,
+  idAndQuestionnaireIdSchema,
+  nomenclatureSchema,
+  requiredNomenclaturesSchema,
+  surveyUnitSchema,
+} from './parserSchema'
 
 export function createApiClient(params: {
   apiUrl: string

diff --git a/drama-queen/src/core/adapters/queenApi/mock.ts b/drama-queen/src/core/adapters/queenApi/mock.ts
@@ -4,7 +4,7 @@ import type { SurveyUnit } from 'core/model'
 
 export function createApiClient(): QueenApi {
   return {
-    getSurveyUnitsIdsAndQuestionnaireIdsByCampaign: (_idCampaign) =>
+    getSurveyUnitsIdsAndQuestionnaireIdsByCampaign: () =>
       Promise.resolve([{ id: 'id', questionnaireId: 'questionnaireId' }]),
     getSurveyUnits: () =>
       Promise.resolve([
@@ -30,7 +30,7 @@ export function createApiClient(): QueenApi {
           questionnaireIds: ['questionnaireIds'],
         },
       ]),
-    getQuestionnaire: (_idSurvey) => Promise.resolve(surveySample),
+    getQuestionnaire: () => Promise.resolve(surveySample),
     getRequiredNomenclaturesByCampaign: () => Promise.resolve([]),
     getNomenclature: (idNomenclature) =>
       Promise.resolve([{ id: `${idNomenclature}`, label: 'label' }]),

diff --git a/drama-queen/src/core/usecases/synchronizeData/thunks.ts b/drama-queen/src/core/usecases/synchronizeData/thunks.ts
@@ -343,7 +343,7 @@ export const thunks = {
         }
         dispatch(actions.uploadCompleted())
         dispatch(thunks.download())
-      } catch (error) {
+      } catch {
         localSyncStorage.addError(true)
         dispatch(actions.uploadError())
       }

diff --git a/drama-queen/src/queen-service-worker.js b/drama-queen/src/queen-service-worker.js
@@ -34,10 +34,6 @@ const getDramaQueenUrlRegex = (url) => {
     .concat('/(.*)((.js)|(.png)|(.svg)|(.css))')
 }
 
-const getDramaQueenUrlRegexJson = (url) => {
-  return url.replace('http', '^http').concat('/(.*)(.json)')
-}
-
 const getQuestionnaireUrlRegex = () => '^http.*/api/questionnaire/(.){1,}'
 
 const getResourceUrlRegex = () => '^http.*/api/nomenclature/(.){1,}'
@@ -98,6 +94,6 @@ self.addEventListener('install', (event) => {
   event.waitUntil(dramaPrecacheController())
 })
 
-self.addEventListener('activate', (event) => {
+self.addEventListener('activate', () => {
   console.log('Drama Queen sw : activating ...')
 })
diff --git a/drama-queen/src/ui/components/appVersion.tsx b/drama-queen/src/ui/components/appVersion.tsx
@@ -12,7 +12,7 @@ export const AppVersion = () => {
   )
 }
 
-const useStyles = tss.create(({}) => ({
+const useStyles = tss.create(() => ({
   footer: {
     backgroundColor: '#f5f5f5',
     borderTop: '1px solid black',

diff --git a/drama-queen/src/ui/components/orchestrator/Breadcrumb/Breadcrumb.tsx b/drama-queen/src/ui/components/orchestrator/Breadcrumb/Breadcrumb.tsx
@@ -12,7 +12,7 @@ type BreadCrumbProps = {
 }
 
 export function BreadCrumb(props: BreadCrumbProps) {
-  const { sequence, subSequence, iteration, goToPage } = props
+  const { sequence, subSequence, goToPage } = props
   const { classes, cx } = useStyles()
   const { t } = useTranslation('navigationMessage')
 

diff --git a/drama-queen/src/ui/components/orchestrator/Menu/StopNavigation/StopNavigation.tsx b/drama-queen/src/ui/components/orchestrator/Menu/StopNavigation/StopNavigation.tsx
@@ -97,7 +97,7 @@ export function StopNavigation(props: StopNavigationProps) {
   )
 }
 
-const useStyles = tss.create(({ theme }) => ({
+const useStyles = tss.create(() => ({
   navigationContainer: { gap: '1.5em' },
   typography: {
     lineHeight: '1.5em',

diff --git a/...queen/src/ui/components/orchestrator/Menu/SubSequenceNavigation/SubSequenceNavigation.tsx b/...queen/src/ui/components/orchestrator/Menu/SubSequenceNavigation/SubSequenceNavigation.tsx
@@ -34,6 +34,6 @@ export function SubSequenceNavigation(props: subSequenceNavigationProps) {
   )
 }
 
-const useStyles = tss.create(({}) => ({
+const useStyles = tss.create(() => ({
   navigationContainer: { gap: '1.5em' },
 }))
diff --git a/drama-queen/src/ui/components/orchestrator/buttons/ShortCut/ShortCut.tsx b/drama-queen/src/ui/components/orchestrator/buttons/ShortCut/ShortCut.tsx
@@ -23,7 +23,7 @@ export function ShortCut(props: ShortCutProps) {
       key={shortCutKey}
       keyName={shortCutKey}
       onKeyDown={handleShortCut}
-      filter={(event) => true}
+      filter={() => true}
     ></ReactHotkeys>
   )
 }
diff --git a/drama-queen/src/ui/components/orchestrator/tools/useNavigationButtons.tsx b/drama-queen/src/ui/components/orchestrator/tools/useNavigationButtons.tsx
@@ -1,9 +1,7 @@
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
-import SkipNext from '@mui/icons-material/SkipNext'
-import { SHORTCUT_FAST_FORWARD, SHORTCUT_NEXT } from 'ui/constants'
-import type { GoNextPage, GoPreviousPage, GoToPage } from '../lunaticType'
 import { getTranslation } from 'i18n'
-import type { PageTag } from 'core/model'
+import { SHORTCUT_NEXT } from 'ui/constants'
+import type { GoNextPage, GoPreviousPage } from '../lunaticType'
 
 const { t } = getTranslation('navigationMessage')
 

diff --git a/drama-queen/src/ui/routing/createRouter.tsx b/drama-queen/src/ui/routing/createRouter.tsx
@@ -12,7 +12,6 @@ export function createRouter({
   strategy = 'memory',
   initialPathname = '/',
 }: CreateRouterProps) {
-
   if (strategy === 'browser') {
     return createBrowserRouter(routes, { basename: '/queen' })
   }

diff --git a/drama-queen/src/ui/routing/loader/protectedLoader.ts b/drama-queen/src/ui/routing/loader/protectedLoader.ts
@@ -1,5 +1,4 @@
 import { prCore } from 'createCore'
-import type { LoaderFunctionArgs } from 'react-router-dom'
 
 export async function protectedRouteLoader() {
   const { userAuthentication } = (await prCore).functions

diff --git a/drama-queen/src/ui/routing/loader/surveyUnitLoader.ts b/drama-queen/src/ui/routing/loader/surveyUnitLoader.ts
@@ -2,10 +2,7 @@ import { prCore } from 'createCore'
 import { redirect, type LoaderFunctionArgs } from 'react-router-dom'
 import { assert } from 'tsafe'
 
-export async function surveyUnitLoader({
-  request,
-  params,
-}: LoaderFunctionArgs) {
+export async function surveyUnitLoader({ params }: LoaderFunctionArgs) {
   const { collectSurvey } = (await prCore).functions
 
   const { surveyUnitId } = params

diff --git a/drama-queen/src/vite-env.d.ts b/drama-queen/src/vite-env.d.ts
@@ -3,6 +3,7 @@
 
 type ImportMetaEnv = {
   // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
+  // You probably want to add `/src/vite-env.d.ts` to your .prettierignore
   VITE_QUEEN_API_URL: string
   VITE_EXTERNAL_RESOURCES_URL: string
   VITE_OIDC_ISSUER: string