Eslint new config format, fixes

.eslintrc.js

@@ -1,5 +1,3 @@
-/* eslint-disable i18next/no-literal-string */
-
 const DETECT_CSS_REGEX = /:.*;/
 const DETECT_CSS_REGEX_2 = /!important/
 const DETECT_CSS_REGEX_3 = /;.*:/s

.husky/ensure-dependencies-up-to-date.ts

@@ -1,7 +1,7 @@
-import path from "path"
 import { exec as execOriginal, spawn } from "child_process"
+import { mkdir, readFile, writeFile } from "fs/promises"
+import path from "path"
 import { promisify } from "util"
-import { readFile, writeFile, mkdir } from "fs/promises"
 
 const exec = promisify(execOriginal)
 
@@ -33,7 +33,9 @@ async function detectChange(
   if (hash === savedHash) {
     return
   }
-  console.log(`Detected a change in '${relativePath}'. (Saved hash: '${savedHash}', New hash: '${hash}')`)
+  console.log(
+    `Detected a change in '${relativePath}'. (Saved hash: '${savedHash}', New hash: '${hash}')`,
+  )
   await onChangeDetected()
   await writeFile(`${savedCommitHashesPath}/${key}`, hash)
 }

.husky/lint-staged.branch-ready.config.js

@@ -1,20 +1,17 @@
 // Runs when you run bin/git-run-branch-ready-checks.
 // These checks are slower and more likely to fail than the precommit checks.
 // See lint-staged.precommit.config.js for precommit checks.
- module.exports = {
+module.exports = {
   "*.{js,jsx,ts,tsx}": ["eslint --cache --fix", "stylelint --fix lax"],
   "services/example-exercise/src/**/*.{js,jsx,ts,tsx}": () =>
     "npx tsc -p services/example-exercise/ --noEmit",
-  "services/cms/src/**/*.{js,jsx,ts,tsx}": () =>
-    "npx tsc -p services/cms/ --noEmit",
+  "services/cms/src/**/*.{js,jsx,ts,tsx}": () => "npx tsc -p services/cms/ --noEmit",
   "services/main-frontend/src/**/*.{js,jsx,ts,tsx}": () =>
     "npx tsc -p services/main-frontend/ --noEmit",
   "services/course-material/src/**/*.{js,jsx,ts,tsx}": () =>
     "npx tsc -p services/course-material/ --noEmit",
-  "services/quizzes/src/**/*.{js,jsx,ts,tsx}": () =>
-    "npx tsc -p services/quizzes/ --noEmit",
-  "services/tmc/src/**/*.{js,jsx,ts,tsx}": () =>
-    "npx tsc -p services/tmc/ --noEmit",
+  "services/quizzes/src/**/*.{js,jsx,ts,tsx}": () => "npx tsc -p services/quizzes/ --noEmit",
+  "services/tmc/src/**/*.{js,jsx,ts,tsx}": () => "npx tsc -p services/tmc/ --noEmit",
   "*.{md,json,scss,css}": "prettier --write",
   "*.rs": () => [
     "cargo fmt --manifest-path services/headless-lms/Cargo.toml --all -- --files-with-diff",

.husky/lint-staged.precommit.config.js

@@ -6,8 +6,6 @@ module.exports = {
   "*.rs": () => [
     "cargo fmt --manifest-path services/headless-lms/Cargo.toml --all -- --files-with-diff",
   ],
-  "system-tests/src/**/*.{js,jsx,ts,tsx}": () => [
-    `./bin/check-no-test-only-in-system-tests`,
-  ],
+  "system-tests/src/**/*.{js,jsx,ts,tsx}": () => [`./bin/check-no-test-only-in-system-tests`],
   "shared-module/packages/common/src/locales/**/*.json": () => ["./bin/translations-sort"],
 }

eslint-custom-rules/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable i18next/no-literal-string */
 module.exports = {
   rules: {
     "ban-ts-ignore-without-comment": {

eslint.config.js

@@ -0,0 +1,298 @@
+import js from "@eslint/js"
+import next from "@next/eslint-plugin-next"
+import tanstackQuery from "@tanstack/eslint-plugin-query"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import i18next from "eslint-plugin-i18next"
+import importPlugin from "eslint-plugin-import"
+import jsxA11y from "eslint-plugin-jsx-a11y"
+import playwright from "eslint-plugin-playwright"
+import prettier from "eslint-plugin-prettier"
+import react from "eslint-plugin-react"
+import reactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+
+const DETECT_CSS_REGEX = /:.*;/
+const DETECT_CSS_REGEX_2 = /!important/
+const DETECT_CSS_REGEX_3 = /;.*:/s
+const DETECT_PX_REGEX = /^\d+px$/
+const DETECT_REM_REGEX = /^\d+rem$/
+const DETECT_EM_REGEX = /^\d+em$/
+const DETECT_COLOR_REGEX = /^#[0-9A-Fa-f]{6}$/
+
+/** Helper function to clean object keys of whitespace */
+const cleanGlobals = (globalsObj) =>
+  Object.fromEntries(Object.entries(globalsObj).map(([key, value]) => [key.trim(), value]))
+
+export default [
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/target/**",
+      "**/.next/**",
+      "**/out/**",
+      "**/playwright-report/**",
+      "**/storybook-static/**",
+      "**/services/**/shared-module/**",
+      "**/system-tests/shared-module/**",
+      "**/services/main-frontend/public/monaco-editor/**",
+      "**/.venv/**",
+    ],
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,tsx}"],
+    plugins: {
+      "@next/next": next,
+      "@tanstack/query": tanstackQuery,
+      i18next: i18next,
+      "jsx-a11y": jsxA11y,
+      "react-hooks": reactHooks,
+      react: react,
+      "@typescript-eslint": typescriptEslint,
+      import: importPlugin,
+      prettier: prettier,
+    },
+    rules: {
+      ...next.configs.recommended.rules,
+      ...tanstackQuery.configs.recommended.rules,
+      ...i18next.configs.recommended.rules,
+      ...jsxA11y.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...typescriptEslint.configs.recommended.rules,
+      ...(importPlugin.configs.errors?.rules || {}),
+      ...(importPlugin.configs.warnings?.rules || {}),
+      ...(importPlugin.configs.typescript?.rules || {}),
+      ...prettier.configs.recommended.rules,
+    },
+  },
+  {
+    files: ["**/*.{js,mjs,cjs,ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 12,
+      sourceType: "module",
+      parser: tsParser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+      globals: {
+        ...cleanGlobals(globals.browser),
+        ...cleanGlobals(globals.node),
+        React: true,
+        NodeJS: true,
+        JSX: true,
+        WindowEventMap: true,
+      },
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      "@next/next/no-img-element": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+        },
+      ],
+      "no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "@emotion/react",
+              importNames: ["css"],
+              message: 'Use "@emotion/css" instead.',
+            },
+          ],
+        },
+      ],
+      "react/forbid-component-props": [
+        "error",
+        { forbid: [{ propName: "style", message: "Use emotion.js instead." }] },
+      ],
+      "react/forbid-dom-props": [
+        "error",
+        { forbid: [{ propName: "style", message: "Use emotion.js instead." }] },
+      ],
+      "sort-imports": ["error", { ignoreCase: true, ignoreDeclarationSort: true }],
+      "import/order": [
+        "error",
+        {
+          alphabetize: { order: "asc" },
+          groups: [["builtin", "external"], "parent", "sibling", "index"],
+          "newlines-between": "always",
+        },
+      ],
+      "import/no-unresolved": "off",
+      "import/no-named-as-default": "off",
+      "i18next/no-literal-string": "off",
+      curly: "error",
+    },
+  },
+  {
+    files: ["**/*.{jsx,tsx}"],
+    rules: {
+      "import/no-named-as-default": "off",
+      "i18next/no-literal-string": [
+        "error",
+        {
+          mode: "all",
+          message: "Untranslated string",
+          "should-validate-template": true,
+          // only add attributes here that are guranteed to never contain traslatable strings
+          "jsx-components": {
+            exclude: ["Trans"],
+          },
+          "jsx-attributes": {
+            exclude: [
+              "className",
+              "styleName",
+              "style",
+              "type",
+              "key",
+              "id",
+              "width",
+              "height",
+              "variant",
+              "size",
+              "href",
+              "severity",
+              "navVariant",
+              "aria-labelledby",
+              "aria-describedby",
+              "url",
+              "labelId",
+              "defaultLanguage",
+              "color",
+              "labelPlacement",
+              "role",
+              "aria-hidden",
+              "maxWidth",
+              "transform",
+              "viewBox",
+              "testPlaceholder",
+              "sidebarPosition",
+              "buttonSize",
+              "labelStyle",
+              "data-testid",
+              "weight",
+              "action",
+              "tagName",
+              "templateLock",
+            ],
+          },
+          words: {
+            exclude: [
+              DETECT_CSS_REGEX,
+              DETECT_CSS_REGEX_2,
+              DETECT_CSS_REGEX_3,
+              DETECT_PX_REGEX,
+              DETECT_REM_REGEX,
+              DETECT_EM_REGEX,
+              DETECT_COLOR_REGEX,
+              "[0-9!-/:-@[-`{-~]+",
+              "[A-Z_-]+",
+              /^\p{Emoji}+$/u,
+            ],
+          },
+          callees: {
+            exclude: [
+              "i18n(ext)?",
+              "t",
+              "require",
+              "addEventListener",
+              "removeEventListener",
+              "postMessage",
+              "getElementById",
+              "dispatch",
+              "commit",
+              "includes",
+              "indexOf",
+              "endsWith",
+              "startsWith",
+              "div",
+              "useQuery",
+              "useQueryParameter",
+              "get",
+              "post",
+              "put",
+              "delete",
+              "create",
+              "styled",
+              "css",
+              "register",
+              "setValue",
+              "getValues",
+              "watch",
+              "useMediaQuery",
+              "log",
+              "error",
+              "warn",
+              "info",
+              "group",
+              "Error",
+              "querySelector",
+              "usePopper",
+              "i18n.on",
+              "i18n.off",
+              "createElement",
+              "localStorage.setItem",
+              "localStorage.getItem",
+              "differenceBy",
+              "accessor",
+              "useTranslation",
+              "sortBy",
+              "split",
+              "JSON.parse",
+              "addFilter",
+              "removeFilter",
+              "setError",
+              "clearErrors",
+            ],
+          },
+          "object-properties": {
+            exclude: ["type", "[A-Z_-]+", "displayName"],
+          },
+          "class-properties": {
+            exclude: ["displayName"],
+          },
+        },
+      ],
+    },
+  },
+  {
+    files: [
+      "system-tests/**/*",
+      "**/*.test.tsx",
+      "**/*.test.ts",
+      "storybook/**/*",
+      "shared-module/packages/create-exercise-service/**/*",
+    ],
+    rules: { "i18next/no-literal-string": "off" },
+  },
+  {
+    files: ["system-tests/src/**/*", "**/*.test.*"],
+    plugins: { playwright: playwright },
+    languageOptions: {
+      globals: {
+        describe: true,
+        test: true,
+        expect: true,
+        it: true,
+      },
+    },
+    rules: {
+      ...playwright.configs["playwright-test"].rules,
+      "playwright/no-focused-test": "off",
+      "playwright/prefer-strict-equal": "error",
+      "playwright/prefer-to-be": "error",
+      "playwright/valid-expect": "off",
+      "playwright/expect-expect": "off",
+      "playwright/no-standalone-expect": "off",
+    },
+  },
+]

services/cms/jest.config.js

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable i18next/no-literal-string */
-
 const nextJest = require("next/jest")
 
 // Providing the path to your Next.js app which will enable loading next.config.js and .env files

services/cms/next.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable i18next/no-literal-string */
-/* eslint-disable @typescript-eslint/no-var-requires */
 const generateNormalResponseHeaders =
   require("./src/shared-module/common/utils/responseHeaders").generateNormalResponseHeaders
 const svgoConfig = require("./src/shared-module/common/utils/svgoConfig")

services/cms/scripts/cleanWordpressModules.ts

@@ -1,5 +1,3 @@
-/* eslint-disable i18next/no-literal-string */
-
 /*
  * Certain @wordpress packages include nested node_modules folders and additional @wordpress
  * dependencies, which causes issues by loading multiple copies of @wordpress packages.

services/cms/scripts/extractGutenbergAttributeTypes.ts

@@ -1,7 +1,5 @@
-/* eslint-disable i18next/no-literal-string */
 // Require imports needs to happen in a specific order.
 /* eslint-disable import/order */
-/* eslint-disable @typescript-eslint/no-var-requires */
 
 import { Block } from "@wordpress/blocks"
 import { addFilter } from "@wordpress/hooks"