Merge pull request #1988 from DSD-DBS/prettier-plugin-classnames

ci: Auto-format inline CSS classes with prettier

.pre-commit-config.yaml

@@ -106,6 +106,8 @@ repos:
           - 'prettier-plugin-tailwindcss@^0.6.8'
           - '@trivago/prettier-plugin-sort-imports@^4.3.0'
           - 'tailwindcss@^3.4.12'
+          - 'prettier-plugin-classnames@^0.7.4'
+          - 'prettier-plugin-merge@^0.7.1'
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5
     hooks:

frontend/.prettierrc.js

@@ -7,6 +7,8 @@ module.exports = {
   plugins: [
     require.resolve("prettier-plugin-tailwindcss"),
     require.resolve("@trivago/prettier-plugin-sort-imports"),
+    require.resolve("prettier-plugin-classnames"),
+    require.resolve("prettier-plugin-merge"),
   ],
   importOrder: ["^[./]"],
   importOrderParserPlugins: ["typescript", "decorators-legacy"],

frontend/package.json

@@ -36,6 +36,8 @@
     "ngx-skeleton-loader": "^9.0.0",
     "ngx-toastr": "^19.0.0",
     "npm": "^10.9.0",
+    "prettier-plugin-classnames": "^0.7.4",
+    "prettier-plugin-merge": "^0.7.1",
     "puppeteer": "^23.6.1",
     "rxjs": "~7.8.1",
     "semver": "^7.6.3",

frontend/src/app/general/footer/footer.component.html

@@ -5,7 +5,8 @@
 
 <hr />
 <div
-  class="flex h-full flex-wrap items-end justify-center px-3 py-2 text-gray-500 md:mx-5 md:justify-between"
+  class="flex h-full flex-wrap items-end justify-center px-3 py-2 text-gray-500 md:mx-5
+    md:justify-between"
 >
   <app-version class="px-2 pb-2 md:basis-1/3 md:p-0"></app-version>
   <div class="px-2 text-center md:basis-1/3">

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html

@@ -95,7 +95,8 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
             }
           } @else {
             <div
-              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border border-gray-400 py-[15px] text-center"
+              class="mb-2 flex h-[200px] flex-col items-center justify-center rounded border
+                border-gray-400 py-[15px] text-center"
             >
               <mat-icon class="scale-[2] text-red-900">error</mat-icon> <br />
               Diagram export has failed. <br />

frontend/src/app/projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component.html

@@ -29,7 +29,8 @@
   } @else if (errorCode === "FILE_NOT_FOUND") {
     <div
       (click)="openModelComplexityBadgeDocs()"
-      class="flex size-full cursor-pointer items-center justify-between rounded border border-gray-400 p-2 text-center"
+      class="flex size-full cursor-pointer items-center justify-between rounded border
+        border-gray-400 p-2 text-center"
     >
       <mat-icon class="basis-[60px] scale-[2]">open_in_new</mat-icon>
       <span class="basis-[calc(100%-60px)]">
@@ -40,7 +41,8 @@
     </div>
   } @else {
     <div
-      class="flex size-full items-center justify-between rounded border border-gray-400 p-2 text-center"
+      class="flex size-full items-center justify-between rounded border border-gray-400 p-2
+        text-center"
     >
       <mat-icon class="basis-[60px] scale-[2]">error</mat-icon>
       <span class="basis-[calc(100%-60px)]"

frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html

@@ -25,15 +25,13 @@ <h1 class="text-lg font-semibold">
           [attr.data-testid]="'rating-' + rating"
           mat-icon-button
           type="button"
-          [class]="
-            [
-              '!flex',
-              getColorForRating(rating),
-              this.feedbackForm.get('rating')?.value === rating
-                ? '!bg-gray-200'
-                : '',
-            ].join(' ')
-          "
+          [ngClass]="[
+            '!flex',
+            getColorForRating(rating),
+            this.feedbackForm.get('rating')?.value === rating
+              ? '!bg-gray-200'
+              : '',
+          ]"
         >
           <mat-icon>
             @switch (rating) {

frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import {
   FormControl,
@@ -55,6 +55,7 @@ interface DialogData {
     ReactiveFormsModule,
     FormsModule,
     AsyncPipe,
+    NgClass,
   ],
   templateUrl: './feedback-dialog.component.html',
 })

frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html

@@ -18,7 +18,8 @@
         (cdkDragEnded)="dragStop()"
       >
         <div
-          class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1 active:cursor-grabbing"
+          class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1
+            active:cursor-grabbing"
           [ngClass]="session.focused ? 'bg-slate-100' : 'bg-slate-300'"
           cdkDragHandle
         >

frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-session-history/create-session-history.component.html

@@ -17,7 +17,8 @@
     }
     @for (session of sortedResolvedHistory; track $index) {
       <button
-        class="flex w-full flex-row items-center justify-between gap-5 rounded border bg-slate-100 p-2"
+        class="flex w-full flex-row items-center justify-between gap-5 rounded border
+          bg-slate-100 p-2"
         (click)="requestSession(session)"
       >
         <div class="w-full flex-col items-center">