build: Add ESLint and prettier tailwind plugins

.pre-commit-config.yaml

@@ -3,9 +3,10 @@
 
 default_install_hook_types: [commit-msg, pre-commit]
 default_stages: [commit, merge-commit]
+minimum_pre_commit_version: 3.2.0
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.5.0
     hooks:
       - id: check-added-large-files
       - id: check-builtin-literals
@@ -68,12 +69,16 @@ repos:
         files: "^backend/capellacollab"
         exclude: "^backend/capellacollab/alembic/"
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.7.1
+    rev: v3.0.3
     hooks:
       - id: prettier
         types_or: [ts, css, html, markdown]
+        files: "^frontend"
+        additional_dependencies:
+          - "prettier@^3.0.3"
+          - "prettier-plugin-tailwindcss@^0.5.5"
   - repo: https://github.com/Lucas-C/pre-commit-hooks
-    rev: v1.4.2
+    rev: v1.5.4
     hooks:
       - id: insert-license
         name: Insert license headers (shell-style comments)
@@ -125,11 +130,11 @@ repos:
           - --comment-style
           - "..|  |"
   - repo: https://github.com/fsfe/reuse-tool
-    rev: v1.1.0
+    rev: v2.1.0
     hooks:
       - id: reuse
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.33.0
+    rev: v8.51.0
     hooks:
       - id: eslint
         additional_dependencies:
@@ -143,16 +148,17 @@ repos:
           - "@typescript-eslint/parser@^6.7.4"
           - "eslint-plugin-unused-imports@^3.0.0"
           - "eslint-plugin-deprecation@^2.0.0"
+          - "eslint-plugin-tailwindcss@^3.13.0"
         args: ["--fix"]
         types: []
         exclude: '.+\.spec(-helper)?\.ts$'
         types_or: ["html", "ts"]
   - repo: https://github.com/qoomon/git-conventional-commits
-    rev: v2.5.0
+    rev: v2.6.5
     hooks:
       - id: conventional-commits
   - repo: https://github.com/asottile/pyupgrade
-    rev: v3.3.1
+    rev: v3.15.0
     hooks:
       - id: pyupgrade
         args: ["--py311-plus"]

frontend/.eslintrc.js

@@ -4,6 +4,18 @@
  */
 
 module.exports = {
+  settings: {
+    tailwindcss: {
+      config: "frontend/tailwind.config.js",
+      cssFiles: [
+        "frontend/**/*.css",
+        "!**/node_modules",
+        "!**/.*",
+        "!**/dist",
+        "!**/build",
+      ],
+    },
+  },
   overrides: [
     {
       files: ["*.ts"],
@@ -27,15 +39,6 @@ module.exports = {
             style: "camelCase",
           },
         ],
-        /* Find a proper naming strategy
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            type: "element",
-            prefix: "app",
-            style: "kebab-case",
-          },
-        ], */
         "import/order": [
           "error",
           {
@@ -60,8 +63,18 @@ module.exports = {
     },
     {
       files: ["*.html"],
-      extends: ["plugin:@angular-eslint/template/recommended"],
-      rules: {},
+      extends: [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:tailwindcss/recommended",
+      ],
+      parser: "@angular-eslint/template-parser",
+      rules: {
+        "tailwindcss/classnames-order": "off",
+        "tailwindcss/no-custom-classname": "error",
+        "tailwindcss/enforces-negative-arbitrary-values": "error",
+        "tailwindcss/enforces-shorthand": "error",
+        "tailwindcss/no-contradicting-classname": "error",
+      },
     },
   ],
 };

frontend/.prettierrc.js

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: CC0-1.0
+ */
+
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+};

frontend/package.json

@@ -61,6 +61,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jasmine-core": "~5.1.1",
     "karma": "~6.4.2",
@@ -70,6 +71,8 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.5",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
     "webpack": "^5.88.2"

frontend/src/app/app.component.ts

@@ -18,7 +18,7 @@ export class AppComponent implements AfterViewInit {
   constructor(
     public pageLayoutService: PageLayoutService,
     public fullscreenService: FullscreenService,
-    private navBarService: NavBarService
+    private navBarService: NavBarService,
   ) {}
 
   @ViewChild('sidenav') private sidenav?: MatSidenav;

frontend/src/app/events/events.component.ts

@@ -29,7 +29,7 @@ export class EventsComponent implements OnInit, AfterViewInit {
 
   historyEventData: HistoryEvent[] = [];
   historyEventDataSource = new MatTableDataSource<HistoryEvent>(
-    this.historyEventData
+    this.historyEventData,
   );
 
   constructor(private eventService: EventsService) {}

frontend/src/app/events/service/events.service.ts

@@ -29,7 +29,7 @@ export class EventsService {
 
   customSortingDataAccessor(
     data: HistoryEvent,
-    sortHeaderId: string
+    sortHeaderId: string,
   ): string | number {
     switch (sortHeaderId) {
       case 'eventType':

frontend/src/app/general/auth/auth-guard/auth-guard.service.ts

@@ -21,7 +21,7 @@ export class AuthGuardService implements CanActivate {
 
   canActivate(
     _route: ActivatedRouteSnapshot,
-    _state: RouterStateSnapshot
+    _state: RouterStateSnapshot,
   ):
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>

frontend/src/app/general/auth/auth-redirect/auth-redirect.component.ts

@@ -18,7 +18,7 @@ export class AuthRedirectComponent implements OnInit {
     private route: ActivatedRoute,
     private authService: AuthService,
     private userService: UserService,
-    private router: Router
+    private router: Router,
   ) {}
 
   ngOnInit(): void {
@@ -30,7 +30,7 @@ export class AuthRedirectComponent implements OnInit {
             .map((key) =>
               ['error', 'error_description', 'error_uri'].includes(key)
                 ? [key, params[key]].join('=')
-                : ''
+                : '',
             )
             .join('&');
         this.router.navigateByUrl(redirect_url);

frontend/src/app/general/auth/auth/auth.component.ts

@@ -28,7 +28,7 @@ export class AuthComponent implements OnInit {
     public metadataService: MetadataService,
     private authService: AuthService,
     private pageLayoutService: PageLayoutService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
   ) {
     this.pageLayoutService.disableAll();
   }

frontend/src/app/general/auth/http-interceptor/auth.interceptor.ts

@@ -21,24 +21,27 @@ import {
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
-  constructor(private router: Router, private authService: AuthService) {}
+  constructor(
+    private router: Router,
+    private authService: AuthService,
+  ) {}
 
   intercept(
     request: HttpRequest<unknown>,
-    next: HttpHandler
+    next: HttpHandler,
   ): Observable<HttpEvent<unknown>> {
     const req = this.injectAccessToken(request);
     return next.handle(req).pipe(
       catchError((err: HttpErrorResponse) => {
         return this.handleTokenExpired(err, request, next);
-      })
+      }),
     );
   }
 
   handleTokenExpired(
     err: HttpErrorResponse,
     request: HttpRequest<unknown>,
-    next: HttpHandler
+    next: HttpHandler,
   ) {
     if (err.status === 401) {
       if (err.error.detail.err_code == 'token_exp') {
@@ -50,7 +53,7 @@ export class AuthInterceptor implements HttpInterceptor {
           catchError(() => {
             this.router.navigateByUrl('/logout?reason=session-expired');
             throw err;
-          })
+          }),
         );
       } else {
         this.router.navigateByUrl('/logout?reason=unauthorized');

frontend/src/app/general/auth/logout/logout-redirect/logout-redirect.component.ts

@@ -13,7 +13,10 @@ import { AuthService } from 'src/app/services/auth/auth.service';
   styleUrls: ['./logout-redirect.component.css'],
 })
 export class LogoutRedirectComponent implements OnInit {
-  constructor(private authService: AuthService, private router: Router) {}
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+  ) {}
 
   ngOnInit(): void {
     this.authService.logOut();