🔨 [#582] Replace ESLint config with flat config

CRA ships with a default ESLint config, which is overridden in the
project to disable some bits. ESLint is moving towards flat config,
and CRA (unmaintained) is not compatible with it, so we set up our own
flows.

The envvar disables the CRA integration in react-scripts, as it does
not pick up the new config file. The pre-commit checks and CI pipeline
ensure that code is properly linted before being committed.

We also use the shared config from Maykin for consistency across
projects.

.github/workflows/ci.yml

@@ -35,7 +35,8 @@ jobs:
       - name: Build Javascript
         run: |
           npm ci --legacy-peer-deps
-          CI=false npm run build 
+          npm run lint
+          CI=false npm run build
         env: 
           REACT_APP_API_URL: "http://localhost:8000"
 

.gitignore

@@ -37,6 +37,7 @@ backend/mail/
 backend/log/*.log*
 backend/log/nginx/*.log*
 .env
+!/frontend/.env
 
 # Static files
 backend/src/openarchiefbeheer/static/bundles/

frontend/.env

@@ -0,0 +1 @@
+DISABLE_ESLINT_PLUGIN=true

frontend/eslint.config.mjs

@@ -0,0 +1,15 @@
+import { ignoreBuildArtifacts } from "@maykinmedia/eslint-config";
+import recommended from "@maykinmedia/eslint-config/recommended";
+
+const config = [
+  ignoreBuildArtifacts(["build", "storybook-static"]),
+  ...recommended,
+  {
+    name: "project/react-hooks/disable-exhaustive-deps",
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+    },
+  },
+];
+
+export default config;