Improve Eslint Config (#377)

* build(eslint): align with rezervo-web standard

* fix(eslint): --fix or ignore

* ci(node): bump node version to lts

.eslintrc.js

@@ -1,33 +1,38 @@
 module.exports = {
+  parser: "@typescript-eslint/parser",
   settings: {
     react: {
       version: "detect",
     },
   },
-  parserOptions: {
-    ecmaVersion: 13,
-    sourceType: "module",
-    ecmaFeatures: {
-      modules: true,
-    },
-  },
   env: {
     browser: true,
-    es2021: true,
+    node: true,
+    es2024: true,
     "cypress/globals": true,
   },
   extends: [
+    "next/core-web-vitals",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
     "eslint:recommended",
     "plugin:cypress/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:promise/recommended",
     "plugin:unicorn/all",
-    "next/core-web-vitals",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
     "prettier",
   ],
-  plugins: ["cypress"],
+  plugins: ["cypress", "eslint-plugin-no-relative-import-paths"],
   ignorePatterns: ["cypress/support", "cypress/plugins"],
   rules: {
+    "no-relative-import-paths/no-relative-import-paths": [
+      "error",
+      {
+        rootDir: "src",
+      },
+    ],
     "unicorn/consistent-function-scoping": [
       "error",
       {
@@ -55,5 +60,26 @@ module.exports = {
       },
     ],
     "unicorn/no-null": "off",
+
+    /** @see https://medium.com/weekly-webtips/how-to-sort-imports-like-a-pro-in-typescript-4ee8afd7258a */
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          ["sibling", "parent"],
+          "index",
+          "unknown",
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    /** */
   },
 };

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "18"
           cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -1,4 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- commitlint --edit ""
+yarn commitlint --edit "$1"

.husky/post-merge

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn install

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+yarn prettier:check && yarn lint

commitlint.config.js

@@ -1 +1,3 @@
-module.exports = { extends: ["@commitlint/config-conventional"] };
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+};

cypress/e2e/branch-select.spec.js

@@ -12,29 +12,31 @@ describe("Info pages", () => {
     it("can select a branch", () => {
       cy.getBySel("branchSelect").click();
       cy.getBySel("branchOption").should("have.length", 4);
+      // eslint-disable-next-line cypress/unsafe-to-chain-command
       cy.getBySel("branchOption")
         .eq(0)
         .click()
         .should(() => {
           expect(localStorage.getItem("bl-current-branch-id")).to.eq(
-            "60074e293309ff001a51b244"
+            "60074e293309ff001a51b244",
           );
         });
 
       cy.visit("/");
       cy.getBySel("branchSelect").should(() => {
         expect(localStorage.getItem("bl-current-branch-id")).to.eq(
-          "60074e293309ff001a51b244"
+          "60074e293309ff001a51b244",
         );
       });
 
       cy.getBySel("branchSelect").click();
+      // eslint-disable-next-line cypress/unsafe-to-chain-command
       cy.getBySel("branchOption")
         .eq(1)
         .click()
         .should(() => {
           expect(localStorage.getItem("bl-current-branch-id")).to.eq(
-            "5dfa263e8eeee5001c83eacf"
+            "5dfa263e8eeee5001c83eacf",
           );
         });
     });

cypress/e2e/forgot.spec.js

@@ -27,7 +27,7 @@ describe("Forgot password", () => {
     cy.getBySel("email-field").type("petter@");
     cy.getBySel("error-message").should(
       "contain",
-      "Du må fylle inn en gyldig epost"
+      "Du må fylle inn en gyldig epost",
     );
     cy.getBySel("forgot-submit").should("be.disabled");
 

cypress/e2e/info.spec.js

@@ -21,7 +21,7 @@ describe("Info pages", () => {
         .eq(0)
         .should(
           "contain.text",
-          "Hva betyr det at Boklisten alltid leverer riktig bok?"
+          "Hva betyr det at Boklisten alltid leverer riktig bok?",
         );
       cy.getBySel("qna-entry-answer").eq(0).should("not.be.visible");
       cy.getBySel("qna-entry").eq(0).click();

cypress/e2e/login.spec.js

@@ -38,7 +38,7 @@ describe("Login", () => {
       cy.getBySel("email-field").type("petter@");
       cy.getBySel("error-message").should(
         "contain",
-        "Du må fylle inn en gyldig epost"
+        "Du må fylle inn en gyldig epost",
       );
       cy.getBySel("login-submit").should("be.disabled");
 
@@ -55,7 +55,7 @@ describe("Login", () => {
       cy.getBySel("password-field").type("password");
       cy.getBySel("error-message").should("not.exist");
       cy.getBySel("login-submit").should("not.be.disabled");
-    }
+    },
   );
 
   it("displays an error message when username and password is wrong", () => {
@@ -68,14 +68,14 @@ describe("Login", () => {
     cy.wait("@login").its("response.statusCode").should("eq", 401);
     cy.getBySel("api-error").should(
       "contain",
-      "Error: username or password is wrong"
+      "Error: username or password is wrong",
     );
   });
 
   it("can log in with registered user", () => {
     cy.login(
       "[email protected]",
-      "Programming is not a science. Programming is a craft."
+      "Programming is not a science. Programming is a craft.",
     );
     cy.url().should("not.include", "login");
     cy.getBySel("MenuIcon").click();

cypress/e2e/register.spec.js

@@ -47,7 +47,7 @@ describe("Register", () => {
   it("correctly validates a regular user", () => {
     cy.getBySel("email-field").type("[email protected]");
     cy.getBySel("password-field").type(
-      "Programming is not a science. Programming is a craft."
+      "Programming is not a science. Programming is a craft.",
     );
     cy.getBySel("first-name-field").type("Richard");
     cy.getBySel("last-name-field").type("Stallman");
@@ -64,7 +64,7 @@ describe("Register", () => {
   it("correctly validates an underage user", () => {
     cy.getBySel("email-field").type("[email protected]");
     cy.getBySel("password-field").type(
-      "Programming is not a science. Programming is a craft."
+      "Programming is not a science. Programming is a craft.",
     );
 
     cy.getBySel("birthday-field").clear();
@@ -80,7 +80,7 @@ describe("Register", () => {
   it("correctly displays postal city", () => {
     cy.getBySel("email-field").type("[email protected]");
     cy.getBySel("password-field").type(
-      "Programming is not a science. Programming is a craft."
+      "Programming is not a science. Programming is a craft.",
     );
     cy.getBySel("postal-code-field").clear();
     cy.getBySel("postal-code-field").type("7032");
@@ -91,10 +91,11 @@ describe("Register", () => {
     cy.getBySel("submit-button").should("be.disabled");
     cy.getBySel("error-message").should(
       "contain",
-      "Du må oppgi et gyldig norsk postnummer"
+      "Du må oppgi et gyldig norsk postnummer",
     );
 
     cy.get("#postalCode").clear();
+    // eslint-disable-next-line cypress/unsafe-to-chain-command
     cy.get("#postalCode").type("0977").blur();
     cy.getBySel("postal-city-preview").should("contain", "Oslo");
     cy.getBySel("submit-button").should("not.be.disabled");
@@ -116,7 +117,7 @@ describe("Register", () => {
 
     cy.getBySel("email-field").type("[email protected]");
     cy.getBySel("password-field").type(
-      "Programming is not a science. Programming is a craft."
+      "Programming is not a science. Programming is a craft.",
     );
     cy.getBySel("first-name-field").type("Richard");
     cy.getBySel("last-name-field").type("Stallman");
@@ -144,6 +145,7 @@ describe("Register", () => {
 
   it("cannot register when passord is invalid", () => {
     cy.get("#password").clear();
+    // eslint-disable-next-line cypress/unsafe-to-chain-command
     cy.get("#password").type("pass").blur();
     cy.getBySel("error-message").should("be.visible");
     cy.getBySel("submit-button").should("be.disabled");

package.json

@@ -16,7 +16,8 @@
     "serve": "next start",
     "prettier": "prettier --write '**/*.{js,ts,tsx,md,json,yml,css}' --ignore-path=.gitignore",
     "prettier:check": "prettier --check '**/*.{js,ts,tsx,md,json,yml,css}' --ignore-path=.gitignore",
-    "lint": "next lint --ignore-path=.gitignore"
+    "lint": "next lint --ignore-path=.gitignore",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@date-io/moment": "^2.16.1",
@@ -47,8 +48,8 @@
   },
   "devDependencies": {
     "@boklisten/bl-model": "^0.25.16",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@testing-library/react": "^13.4.0",
     "@types/draft-js": "^0.11.10",
     "@types/node": "18.11.18",
@@ -57,21 +58,30 @@
     "@types/react-redux": "^7.1.25",
     "@types/string-similarity": "^4.0.0",
     "@types/validator": "^13.7.10",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "cypress": "^12.3.0",
-    "eslint": "8.31.0",
-    "eslint-config-next": "13.1.2",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint": "8.48.0",
+    "eslint-config-next": "13.4.19",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-unicorn": "^45.0.2",
-    "husky": "^8.0.3",
-    "prettier": "^2.8.2",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "prettier": "^3.0.3",
     "pretty-quick": "^3.1.3",
     "typescript": "^4.9.4"
   },
   "browserslist": [
     "defaults",
     "not IE 11"
-  ]
+  ],
+  "lint-staged": {
+    "*.{js,ts,tsx,md,json,yml,css}": "yarn prettier:check"
+  }
 }

src/api/api.ts

@@ -1,11 +1,13 @@
 import axios, { AxiosError, AxiosResponse } from "axios";
-import { apiPath, getHeaders } from "./apiRequest";
-import { fetchNewTokens } from "./token";
 
+import { apiPath, getHeaders } from "api/apiRequest";
+import { fetchNewTokens } from "api/token";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const get = async <T = any>(
   url: string,
   query?: string,
-  noRetryTokens?: boolean
+  noRetryTokens?: boolean,
 ): Promise<AxiosResponse<T>> => {
   if (!url || url.length === 0) {
     throw new Error("url is undefined");
@@ -46,7 +48,7 @@ export const add = async (collection: string, data: unknown) => {
 export const addWithEndpoint = async (
   collection: string,
   endpoint: string,
-  data: unknown
+  data: unknown,
 ) => {
   return await axios
     .post(`${apiPath(collection)}/${endpoint}`, data, {
@@ -68,6 +70,7 @@ export class NotFoundError extends Error {
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const apiFetcher = async <T = any>(url: string): Promise<T> => {
   try {
     return await get<{ data: T }>(url).then((response) => response.data.data);

src/api/apiRequest.ts

@@ -1,5 +1,5 @@
-import BL_CONFIG from "../utils/bl-config";
-import { getAccessToken, haveAccessToken } from "./token";
+import { getAccessToken, haveAccessToken } from "api/token";
+import BL_CONFIG from "utils/bl-config";
 
 export const apiPath = (collection: string, query?: string) => {
   const path = BL_CONFIG.api.basePath;

src/api/auth.ts

@@ -1,5 +1,5 @@
+import { haveAccessToken, removeTokens, getAccessTokenBody } from "api/token";
 import { UserPermission } from "utils/types";
-import { haveAccessToken, removeTokens, getAccessTokenBody } from "./token";
 
 export const isLoggedIn = () => haveAccessToken();
 

src/api/login.ts

@@ -1,6 +1,6 @@
-import { add } from "./api";
-import BL_CONFIG from "../utils/bl-config";
-import { parseTokensFromResponseDataAndStore } from "./token";
+import { add } from "api/api";
+import { parseTokensFromResponseDataAndStore } from "api/token";
+import BL_CONFIG from "utils/bl-config";
 
 export const login = async (username: string, password: string) => {
   const apiResponse = await add(BL_CONFIG.login.local.url, {

src/api/requests.ts

@@ -16,6 +16,7 @@ export const fetchData = async (url: string, method: string, data: unknown) => {
   }
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const fetcher = async <T = any>(url: string) => {
   try {
     return await axios