ci: Add support for ESLint 9

.github/workflows/lint.yml

@@ -37,6 +37,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
       - uses: actions/setup-python@v5
         with:
           cache: pip
@@ -51,3 +54,7 @@ jobs:
       - name: Run pre-commit
         run: |-
           pre-commit run --all-files
+      - name: Print changed files
+        if: failure()
+        run: |-
+          git add . && git status -vv

.github/workflows/tests.yml

@@ -45,7 +45,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - name: Fetch version
         working-directory: frontend
         run: |

.pre-commit-config.yaml

@@ -33,7 +33,7 @@ repos:
       - id: trailing-whitespace
         exclude: '^frontend/src/app/openapi'
   - repo: https://github.com/psf/black-pre-commit-mirror
-    rev: 24.4.2
+    rev: 24.8.0
     hooks:
       - id: black
         files: '^backend/'
@@ -51,7 +51,7 @@ repos:
         entry: bash -c "cd backend && isort ."
         types: [python]
   - repo: https://github.com/pre-commit/mirrors-mypy
-    rev: v1.10.0
+    rev: v1.11.2
     hooks:
       - id: mypy
         types_or: [python, spec]
@@ -75,15 +75,18 @@ repos:
         types: [python]
         files: '^backend/capellacollab'
         exclude: '^backend/capellacollab/alembic/'
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.1.0
+  - repo: local
     hooks:
       - id: prettier
+        name: prettier
+        entry: prettier --write
+        language: node
         types_or: [ts, css, html, markdown]
         exclude: '^frontend/src/app/openapi'
         additional_dependencies:
-          - 'prettier@^3.3.3'
-          - 'prettier-plugin-tailwindcss@^0.6.5'
+          - '[email protected]'
+          - 'prettier-plugin-tailwindcss@^0.6.6'
+          - '@trivago/prettier-plugin-sort-imports@^4.3.0'
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5
     hooks:
@@ -147,40 +150,42 @@ repos:
           - --comment-style
           - '{/*|   |*/}'
   - repo: https://github.com/fsfe/reuse-tool
-    rev: v3.0.2
+    rev: v4.0.3
     hooks:
       - id: reuse
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.4.0
+    rev: v9.9.1
     hooks:
       - id: eslint
         additional_dependencies:
-          - 'eslint@^8.57.0'
-          - '@angular-eslint/[email protected]'
-          - '@angular-eslint/[email protected]'
-          - '@angular-eslint/[email protected]'
+          - 'eslint@^9.9.1'
+          - '@eslint/js@^9.9.1'
+          - '[email protected]'
           - 'eslint-config-prettier@^9.1.0'
-          - 'eslint-plugin-import@^2.29.1'
-          - '@typescript-eslint/eslint-plugin@^7.17.0'
-          - '@typescript-eslint/parser@^7.17.0'
-          - 'eslint-plugin-unused-imports@^3.2.0'
-          - 'eslint-plugin-deprecation@^3.0.0'
+          - 'typescript-eslint@^8.3.0'
+          - 'eslint-plugin-unused-imports@^4.1.3'
           - 'eslint-plugin-tailwindcss@^3.17.4'
-          - 'eslint-plugin-storybook@^0.8.0'
-        args: ['--fix']
+          - '[email protected]'
+        args:
+          [
+            '--config',
+            'frontend/eslint.config.cjs',
+            '--fix',
+            '--no-warn-ignored',
+          ]
         types: []
         files: '^frontend/'
         exclude: '.+\.spec(-helper)?\.ts$|^frontend/src/app/openapi'
         types_or: ['html', 'ts']
   - repo: https://github.com/alessandrojcm/commitlint-pre-commit-hook
-    rev: v9.16.0
+    rev: v9.17.0
     hooks:
       - id: commitlint
         stages: [commit-msg]
         additional_dependencies:
           - '@commitlint/config-conventional'
   - repo: https://github.com/asottile/pyupgrade
-    rev: v3.15.2
+    rev: v3.17.0
     hooks:
       - id: pyupgrade
         args: ['--py311-plus']

frontend/.prettierrc.js

@@ -4,5 +4,10 @@
  */
 
 module.exports = {
-  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+  plugins: [
+    require.resolve("prettier-plugin-tailwindcss"),
+    require.resolve("@trivago/prettier-plugin-sort-imports"),
+  ],
+  importOrder: ["^[./]"],
+  importOrderParserPlugins: ["typescript", "decorators-legacy"],
 };

frontend/.storybook/main.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import type { StorybookConfig } from '@storybook/angular';
 
 const config: StorybookConfig = {

frontend/.storybook/preview.ts

@@ -2,18 +2,17 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import type { Preview } from '@storybook/angular';
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
+import { DialogRef } from '@angular/cdk/dialog';
 import { HttpClientModule } from '@angular/common/http';
 import { importProvidersFrom } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import type { Preview } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
 import { ToastrModule } from 'ngx-toastr';
-import { RouterModule } from '@angular/router';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatDialogRef } from '@angular/material/dialog';
-import { DialogRef } from '@angular/cdk/dialog';
+import docJson from '../documentation.json';
 
 setCompodocJson(docJson);
 

frontend/eslint.config.cjs

@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const eslint = require("@eslint/js");
+const angular = require("angular-eslint");
+const storybook = require("eslint-plugin-storybook");
+const tailwind = require("eslint-plugin-tailwindcss");
+const unusedImports = require("eslint-plugin-unused-imports");
+const tseslint = require("typescript-eslint");
+
+module.exports = tseslint.config(
+  { ignores: ["dist", "tmp", "out-tsc", "**/*.spec.ts", "**/.storybook/**"] },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: __dirname,
+      },
+    },
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    plugins: {
+      "unused-imports": unusedImports,
+    },
+    rules: {
+      "no-console": ["error", { allow: ["error"] }],
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/use-lifecycle-interface": "error",
+      "@angular-eslint/sort-ngmodule-metadata-arrays": ["error"],
+      "@typescript-eslint/no-deprecated": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "unused-imports/no-unused-imports": "error",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...tailwind.configs["flat/recommended"],
+    ],
+    settings: {
+      tailwindcss: {
+        config: "frontend/tailwind.config.js",
+        cssFiles: [
+          "frontend/**/*.css",
+          "!**/node_modules",
+          "!**/.*",
+          "!**/dist",
+          "!**/build",
+        ],
+      },
+    },
+    rules: {
+      "tailwindcss/classnames-order": "off",
+      "tailwindcss/no-custom-classname": [
+        "error",
+        {
+          whitelist: ["language-python"],
+        },
+      ],
+      "tailwindcss/enforces-negative-arbitrary-values": "error",
+      "tailwindcss/enforces-shorthand": "error",
+      "tailwindcss/no-contradicting-classname": "error",
+    },
+  },
+  {
+    files: ["**/*.stories.ts"],
+    extends: [...storybook.configs["flat/recommended"]],
+  },
+);