[Tech] Suppression de librairies non utilisées et internalisation de …

…la config ESLint (#877)

frontend/.eslintrc.js

@@ -1,7 +1,8 @@
 const path = require('path')
 
 module.exports = {
-  extends: '@ivangabriele/eslint-config-typescript-react',
+  extends: ['airbnb', 'airbnb/hooks', 'airbnb-typescript', 'prettier'],
+  plugins: ['prettier', 'sort-keys-fix', 'sort-destructure-keys', 'typescript-sort-keys'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2022,
@@ -12,56 +13,184 @@ module.exports = {
     browser: true
   },
   rules: {
-    '@typescript/no-use-before-define': 'off',
+    curly: ['error', 'all'],
+    'newline-before-return': 'error',
+    'no-console': 'error',
+
+    'import/no-default-export': 'error',
+    'import/order': [
+      'error',
+      {
+        alphabetize: {
+          caseInsensitive: true,
+          order: 'asc'
+        },
+        groups: [['builtin', 'external', 'internal'], ['parent', 'index', 'sibling'], ['type'], ['object']],
+        'newlines-between': 'always'
+      }
+    ],
+    'import/prefer-default-export': 'off',
+
+    'prettier/prettier': 'error',
+
+    'react/jsx-pascal-case': [
+      'error',
+      {
+        ignore: ['LEGACY_*']
+      }
+    ],
+    'react/jsx-no-useless-fragment': 'off',
+    'react/jsx-sort-props': 'error',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/require-default-props': 'off',
+
+    'sort-destructure-keys/sort-destructure-keys': ['error', { caseSensitive: false }],
+
+    'sort-keys-fix/sort-keys-fix': ['error', 'asc', { caseSensitive: false, natural: false }],
+
+    '@typescript-eslint/lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+    // We must add PascalCase in formats because ESLint trim the prefix before evaluating the case
+    // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/naming-convention.md#format-options
+    // > Note: As documented above, the prefix is trimmed before format is validated,
+    // > therefore PascalCase must be used to allow variables such as isEnabled using the prefix is.
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      {
+        selector: 'function',
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'typeLike',
+        format: ['PascalCase']
+      },
+      {
+        selector: 'accessor',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'classProperty',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'objectLiteralProperty',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'parameter',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'parameterProperty',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase']
+      },
+      {
+        selector: 'variable',
+        types: ['boolean'],
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE']
+      }
+    ],
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        name: 'react-redux',
+        importNames: ['useSelector', 'useDispatch'],
+        message: 'Use typed hooks `useAppDispatch` and `useAppSelector` instead.'
+      }
+    ],
     '@typescript-eslint/no-use-before-define': 'off',
 
-    'react/react-in-jsx-scope': 'off'
+    'typescript-sort-keys/interface': 'error',
+    'typescript-sort-keys/string-enum': 'error'
   },
   overrides: [
+    // Redux
     {
-      files: [
-        'src/domain/shared_slices/**/*.ts',
-        'src/domain/shared_slices/**/*.js',
-        'src/**/*.slice.ts',
-        'src/**/*.slice.js',
-        'src/**/slice.ts'
-      ],
+      files: ['src/domain/shared_slices/**/*.ts', 'src/**/slice.ts'],
+      rules: {
+        'no-param-reassign': 'off'
+      }
+    },
+    {
+      files: ['src/domain/types/*.ts', 'src/domain/**/types.ts', 'src/domain/shared_slices/**/*.ts', 'src/**/slice.ts'],
+      plugins: ['no-null'],
       rules: {
         'no-param-reassign': 'off'
       }
     },
+
+    // UI
     {
       files: ['src/ui/**/*.tsx'],
       rules: {
         'react/jsx-props-no-spreading': 'off'
       }
     },
+
+    // Jest
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx'],
+      plugins: ['jest'],
+      env: {
+        jest: true
+      },
+      rules: {
+        'jest/no-disabled-tests': 'error',
+        'jest/no-focused-tests': 'error',
+        'jest/no-identical-title': 'error',
+        'jest/prefer-to-have-length': 'error',
+        'jest/valid-expect': 'error'
+      }
+    },
+
+    // Cypress
     {
       files: ['cypress/**/*.js', 'cypress/**/*.ts', 'cypress.config.ts'],
-      plugins: ['cypress', 'no-only-tests'],
+      plugins: ['cypress', 'mocha'],
       rules: {
-        'cypress/no-assigning-return-values': 'error',
-        // TODO Hopefully we'll able to enforce that rule someday.
-        'cypress/no-unnecessary-waiting': 'off',
+        // TODO Check why either Prettier or ESLint auto-formatting does that and why this rule is not enabled.
+        // 'max-len': ['warn', { code: 120 }],
+
+        '@typescript-eslint/naming-convention': 'off',
+        '@typescript-eslint/no-unused-expressions': 'off',
+
         'cypress/assertion-before-screenshot': 'error',
+        'cypress/no-assigning-return-values': 'error',
+        'cypress/no-async-tests': 'error',
         // TODO Hopefully we'll able to enforce that rule someday.
         'cypress/no-force': 'off',
-        'cypress/no-async-tests': 'error',
         'cypress/no-pause': 'error',
+        // TODO Hopefully we'll able to enforce that rule someday.
+        'cypress/no-unnecessary-waiting': 'off',
 
         'import/no-default-export': 'off',
         'import/no-extraneous-dependencies': 'off',
-        'no-only-tests/no-only-tests': 'error'
+
+        'mocha/no-exclusive-tests': 'error',
+        'mocha/no-skipped-tests': 'error'
       }
     },
-    // Custom monitorenv rule
+
+    // Configs & scripts
     {
-      files: ['**/*.stories.*'],
-      rules: {
-        'import/no-anonymous-default-export': 'off',
-        'import/no-default-export': 'off',
-        'react/jsx-props-no-spreading': 'off',
-        'no-console': 'off'
+      files: [
+        '**/*.spec.js',
+        './*.cjs',
+        './*.js',
+        './config/**/*.js',
+        './scripts/**/*.js',
+        '**/*.spec.ts',
+        './config/**/*.ts',
+        './scripts/**/*.ts'
+      ],
+      env: {
+        browser: false,
+        node: true
       }
     }
   ]

frontend/package.json

@@ -31,8 +31,6 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@dnd-kit/core": "^4.0.3",
-    "@dnd-kit/modifiers": "^4.0.0",
     "@mtes-mct/monitor-ui": "10.1.1",
     "@reduxjs/toolkit": "1.9.5",
     "@rsuite/responsive-nav": "5.0.1",
@@ -76,8 +74,6 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@ivangabriele/eslint-config-typescript-react": "4.2.0",
-    "@ivangabriele/prettier-config": "3.1.0",
     "@jest/globals": "29.7.0",
     "@storybook/addon-actions": "7.1.1",
     "@storybook/addon-essentials": "7.1.1",

frontend/src/api/APIWorker.js

@@ -1,13 +1,14 @@
 import { useEffect } from 'react'
-import { batch, useDispatch } from 'react-redux'
+import { batch } from 'react-redux'
 
 import { loadRegulatoryData } from '../domain/use_cases/regulatory/loadRegulatoryData'
+import { useAppDispatch } from '../hooks/useAppDispatch'
 
 export const FIVE_MINUTES = 5 * 60 * 1000
 export const THIRTY_SECONDS = 30 * 1000
 
 export function APIWorker() {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
   useEffect(() => {
     batch(() => {

frontend/src/domain/shared_slices/index.ts

@@ -33,7 +33,7 @@ import { baseTablePersistedReducer } from '../../features/Base/components/BaseTa
 import { controlUnitDialogReducer } from '../../features/ControlUnit/components/ControlUnitDialog/slice'
 import { controlUnitListDialogPersistedReducer } from '../../features/ControlUnit/components/ControlUnitListDialog/slice'
 import { controlUnitTablePersistedReducer } from '../../features/ControlUnit/components/ControlUnitTable/slice'
-import { layerSearchSliceReducer } from '../../features/layersSelector/search/LayerSearch.slice'
+import { layerSearchSliceReducer } from '../../features/layersSelector/search/slice'
 import { mainWindowReducer } from '../../features/MainWindow/slice'
 import { sideWindowReducer } from '../../features/SideWindow/slice'
 

frontend/src/features/LocateOnMap/index.tsx

@@ -1,17 +1,17 @@
 import { Accent, Icon, IconButton, Search, Size } from '@mtes-mct/monitor-ui'
 import { transformExtent } from 'ol/proj'
 import { useState } from 'react'
-import { useDispatch } from 'react-redux'
 import styled from 'styled-components'
 
 import { getPlaceCoordinates, useGooglePlacesAPI } from '../../api/googlePlacesAPI/googlePlacesAPI'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../domain/entities/map/constants'
 import { ReportingContext, VisibilityState } from '../../domain/shared_slices/Global'
 import { setFitToExtent } from '../../domain/shared_slices/Map'
+import { useAppDispatch } from '../../hooks/useAppDispatch'
 import { useAppSelector } from '../../hooks/useAppSelector'
 
 export function LocateOnMap() {
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const { reportingFormVisibility } = useAppSelector(state => state.global)
   const [searchedLocation, setSearchedLocation] = useState<string | undefined>('')
   const results = useGooglePlacesAPI(searchedLocation)