chore: Upgrade frontend tooling (#396)

* chore: update to typescript on all files

* chore: move dev dependencies

* chore: move to craco to support aliases

* chore: add eslint explicitly with better config

* fix: fix eslint errors

* chore: do aliased paths when useful

* chore: fix Dockerfile and eslint errors

* fix: fix craco build

Linked to: dilanx/craco#522 (comment)

* chore: update to alias

* fix: fix other ts errors

Makefile

@@ -121,6 +121,7 @@ backend_lint: ## Run lint on backend code
 
 frontend_lint: ## Run lint on frontend code
 	@echo "🍜 Linting react code"
+	${DOCKER_COMPOSE} run --rm taxonomy_node npx eslint --fix src/
 	${DOCKER_COMPOSE} run --rm taxonomy_node npx prettier -w src/
 
 config_lint: ## Run on lint configuration files
@@ -139,6 +140,7 @@ backend_quality: ## Run quality checks on backend code
 
 frontend_quality: ## Run quality checks on frontend code
 	@echo "🍜 Quality checks JS"
+	${DOCKER_COMPOSE} run --rm taxonomy_node npx eslint --no-fix src/
 	${DOCKER_COMPOSE} run --rm taxonomy_node npx prettier -c src/
 	${DOCKER_COMPOSE} run --rm -e CI=true taxonomy_node npm run build
 # restore the .empty file (if possible)

docker/dev.yml

@@ -62,8 +62,9 @@ services:
       - ./taxonomy-editor-frontend/build:/opt/taxonomy-editor/build
       - ./taxonomy-editor-frontend/public:/opt/taxonomy-editor/public
       - ./taxonomy-editor-frontend/src:/opt/taxonomy-editor/src
+      - ./taxonomy-editor-frontend/.eslintrc.json:/opt/taxonomy-editor/.eslintrc.json
+      - ./taxonomy-editor-frontend/craco.config.js:/opt/taxonomy-editor/craco.config.js
       - ./taxonomy-editor-frontend/tsconfig.js:/opt/taxonomy-editor/tsconfig.js
-      - ./taxonomy-editor-frontend/webpack.config.js:/opt/taxonomy-editor/webpack.config.js
   taxonomy_frontend:
     image: taxonomy-editor/taxonomy_frontend:dev
     # instruction to build locally

taxonomy-editor-frontend/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "varsIgnorePattern": "^_" }
+    ],
+    // TODO: Remove this rule and fix all the errors, i.e. type the component props
+    "react/prop-types": "off"
+  }
+}

taxonomy-editor-frontend/Dockerfile

@@ -9,13 +9,13 @@ FROM node:lts as builder
 ARG USER_UID
 ARG USER_GID
 RUN usermod --uid $USER_UID node && \
-    groupmod --gid $USER_GID node && \
-    mkdir -p /opt/taxonomy-editor/node_modules && \
-    mkdir -p /opt/taxonomy-editor/src && \
-    mkdir -p /opt/taxonomy-editor/public && \
-    mkdir -p /home/node/.npm && \
-    chown node:node -R /opt/taxonomy-editor/ && \
-    chown node:node -R /home/node/.npm
+  groupmod --gid $USER_GID node && \
+  mkdir -p /opt/taxonomy-editor/node_modules && \
+  mkdir -p /opt/taxonomy-editor/src && \
+  mkdir -p /opt/taxonomy-editor/public && \
+  mkdir -p /home/node/.npm && \
+  chown node:node -R /opt/taxonomy-editor/ && \
+  chown node:node -R /home/node/.npm
 # tricky but we can't set uid and gid from variables with RUN --mount
 # so we ensure permissions while we are root
 RUN --mount=type=cache,id=taxonomy-editor-npm-cache,target=/home/node/.npm,mode=0777 \
@@ -32,8 +32,9 @@ ENV PATH /opt/taxonomy-editor/node_modules/.bin:$PATH
 # copy files
 COPY --chown=node:node src /opt/taxonomy-editor/src
 COPY --chown=node:node public /opt/taxonomy-editor/public
+COPY --chown=node:node .eslintrc.json /opt/taxonomy-editor/.eslintrc.json
+COPY --chown=node:node craco.config.js /opt/taxonomy-editor/craco.config.js
 COPY --chown=node:node tsconfig.json /opt/taxonomy-editor/tsconfig.json
-COPY --chown=node:node webpack.config.js /opt/taxonomy-editor/webpack.config.js
 # build for production
 # no need of a public url, we are at the root
 RUN npm run build
@@ -44,5 +45,5 @@ WORKDIR /opt/taxonomy-editor
 ARG USER_UID
 ARG USER_GID
 RUN usermod -u $USER_UID www-data && \
-    groupmod --gid $USER_GID www-data
+  groupmod --gid $USER_GID www-data
 COPY --from=builder /opt/taxonomy-editor/build/ /opt/taxonomy-editor/build/

taxonomy-editor-frontend/craco.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+module.exports = {
+  webpack: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  eslint: {
+    mode: "file",
+  },
+};