Merge branch 'develop' into 30-webapp-dev-create-avatar-component

.vscode/settings.json

@@ -1,7 +1,11 @@
 {
-  "java.compile.nullAnalysis.mode": "automatic",
-  "java.configuration.updateBuildConfiguration": "interactive",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  }
-}
+	"java.compile.nullAnalysis.mode": "automatic",
+	"java.configuration.updateBuildConfiguration": "interactive",
+	"tailwindCSS.experimental.classRegex": [
+		"cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]",
+		"cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"
+	],
+	"editor.codeActionsOnSave": {
+		"source.fixAll": true
+	}
+}

webapp/eslint.config.js

@@ -8,6 +8,7 @@ module.exports = [
   {
     ignores: [
       '.cache/',
+      '.angular/',
       '.git/',
       '.github/',
       'build/',
@@ -54,10 +55,7 @@ module.exports = [
           style: 'kebab-case',
         },
       ],
-      '@angular-eslint/prefer-standalone': 'error',
-      '@angular-eslint/template/prefer-ngsrc': 'error',
-      '@angular-eslint/template/prefer-self-closing-tags': 'error',
-      '@angular-eslint/template/prefer-control-flow': 'error',
+      '@typescript-eslint/no-empty-object-type': 'off',
     },
   },
   {

webapp/src/app/app.component.html

@@ -3,9 +3,9 @@
     <p>Header</p>
   </header>
   <div class="flex gap-2 m-2 flex-col items-start">
-    <counter title="First Counter"/>
-    <counter title="Second Counter" [byCount]="16"/>
+    <app-counter title="First Counter" />
+    <app-counter title="Second Counter" [byCount]="16" />
   </div>
-  <hello />
+  <app-hello />
   <router-outlet />
-</main>
+</main>

webapp/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { HelloComponent } from './example/hello/hello.component';
   standalone: true,
   imports: [RouterOutlet, CounterComponent, HelloComponent],
   templateUrl: './app.component.html',
-  styles: [],
+  styles: []
 })
 export class AppComponent {
   title = 'Hephaestus';

webapp/src/app/app.config.ts

@@ -1,22 +1,18 @@
 import { ApplicationConfig, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import {
-  provideAngularQuery,
-  QueryClient,
-} from '@tanstack/angular-query-experimental'
-import {LucideAngularModule, Home } from "lucide-angular";
+import { provideAngularQuery, QueryClient } from '@tanstack/angular-query-experimental';
+import { LucideAngularModule, Home } from 'lucide-angular';
 import { routes } from './app.routes';
 import { BASE_PATH } from './core/modules/openapi';
 
-
 export const appConfig: ApplicationConfig = {
   providers: [
     provideExperimentalZonelessChangeDetection(),
     provideRouter(routes),
     provideAngularQuery(new QueryClient()),
-    { provide: BASE_PATH, useValue: "http://localhost:8080" },
+    { provide: BASE_PATH, useValue: 'http://localhost:8080' },
     provideHttpClient(withInterceptorsFromDi()),
     importProvidersFrom(LucideAngularModule.pick({ Home }))
   ]
-};
+};

webapp/src/app/example/counter/counter.component.html

@@ -1,17 +1,21 @@
 <div class="border rounded-md p-2 shadow-md">
-  <h3 class="text-xl font-medium">Counter Title: {{title()}}</h3>
-  <p>Value: {{counter()}}<p>
-  <p>HexValue: {{hexCounter()}}<p>
-  <app-button (click)="increment()">
-    Increment 
-    @if (byCount() > 1) {
-      by {{byCount()}}
-    }
-  </app-button>
+  <h3 class="text-xl font-medium">Counter Title: {{ title() }}</h3>
+  <p>Value: {{ counter() }}</p>
+  <p></p>
+  <p>HexValue: {{ hexCounter() }}</p>
+  <p>
+    <app-button (click)="increment()">
+      Increment
+      @if (byCount() > 1) {
+        by {{ byCount() }}
+      }
+    </app-button>
+  </p>
+
   <h4 class="text-lg font-medium">History</h4>
   <div>
     @for (item of counterHistory(); track item.dec) {
       {{ item.dec }}
     }
   </div>
-</div>
+</div>

webapp/src/app/example/counter/counter.component.ts

@@ -8,10 +8,10 @@ interface CounterHistoryEntry {
 }
 
 @Component({
-  selector: 'counter',
+  selector: 'app-counter',
   standalone: true,
   imports: [AppButtonComponent],
-  templateUrl: './counter.component.html',
+  templateUrl: './counter.component.html'
 })
 export class CounterComponent {
   // we put all our application data inside signals! -> most optimal change detection and re-rendering possible
@@ -26,17 +26,18 @@ export class CounterComponent {
     // Pitfall: conditional logic inside computed
     // When calling computed initially the dependency signal has to be called, otherwise it will not work
     return this.counter().toString(16);
-  })
+  });
 
-  counterHistory = signal<CounterHistoryEntry[]>([{ dec: 0, hex: "0" }])
+  counterHistory = signal<CounterHistoryEntry[]>([{ dec: 0, hex: '0' }]);
 
   constructor() {
     console.log(`counter value: ${this.counter()}`);
 
     // `effect`s goes in constructor (?)
     // `effectRef` is not necessary, only if needed
     // Runs once when the effect is declared to collect dependencies, and again when they change
-    const effectRef = effect((onCleanup) => {
+    // const effectRef =
+    effect((onCleanup) => {
       const currentCount = this.counter();
       const currentHexCount = this.hexCounter();
 
@@ -46,8 +47,8 @@ export class CounterComponent {
 
       onCleanup(() => {
         console.log('Perform cleanup action here');
-      })
-    })
+      });
+    });
 
     // effectRef.destroy() at any time! Usually not necessary
 
@@ -57,9 +58,9 @@ export class CounterComponent {
 
   increment() {
     console.log('Updating counter...');
-    this.counter.update(counter => counter + this.byCount());
+    this.counter.update((counter) => counter + this.byCount());
 
     // Update values of a signal only through Signals API, e.g.`set()` and `update()`, not directly (i.e. `push()`)
-    this.counterHistory.update(history => [...history, { dec: this.counter(), hex: this.hexCounter() }])
+    this.counterHistory.update((history) => [...history, { dec: this.counter(), hex: this.hexCounter() }]);
   }
 }

webapp/src/app/example/counter/counter.stories.ts

@@ -8,9 +8,9 @@ const meta: Meta<CounterComponent> = {
   component: CounterComponent,
   tags: ['autodocs'],
   argTypes: toArgs<CounterComponent>({
-    title: "test",
-    byCount: 2,
-  }),
+    title: 'test',
+    byCount: 2
+  })
 };
 
 export default meta;
@@ -21,5 +21,5 @@ export const Primary: Story = {
   args: {
     title: 'Counter',
     byCount: 2
-  },
-};
+  }
+};

webapp/src/app/example/counter/counter.ts

@@ -1,4 +1,4 @@
-import { signal } from "@angular/core";
+import { signal } from '@angular/core';
 
 export const counter = signal(0);
 
@@ -18,9 +18,9 @@ export const counter = signal(0);
 //     // inject any dependencies you need here
 //   }
 //
-//   // anyone needing to modify the signal 
+//   // anyone needing to modify the signal
 //   // needs to do so in a controlled way
 //   incrementCounter() {
 //     this.counterSignal.update((val) => val + 1);
 //   }
-// }
+// }

webapp/src/app/example/hello/hello.component.ts

@@ -1,36 +1,34 @@
 import { Component, inject } from '@angular/core';
 import { injectMutation, injectQuery, injectQueryClient } from '@tanstack/angular-query-experimental';
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
+import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { lastValueFrom } from 'rxjs';
 import { HelloService } from 'app/core/modules/openapi';
 import { AppButtonComponent } from 'app/ui/button/button/button.component';
 
 @Component({
-  selector: 'hello',
+  selector: 'app-hello',
   standalone: true,
   imports: [AppButtonComponent, AngularQueryDevtools],
   templateUrl: './hello.component.html'
 })
 export class HelloComponent {
-  helloService = inject(HelloService)
-  queryClient = injectQueryClient()
+  helloService = inject(HelloService);
+  queryClient = injectQueryClient();
 
   query = injectQuery(() => ({
     queryKey: ['hellos'],
-    queryFn: async () => lastValueFrom(this.helloService.getAllHellos()),
-    })
-  );
+    queryFn: async () => lastValueFrom(this.helloService.getAllHellos())
+  }));
 
   mutation = injectMutation(() => ({
     mutationFn: () => lastValueFrom(this.helloService.addHello()),
-    onSuccess: () => 
+    onSuccess: () =>
       this.queryClient.invalidateQueries({
-        queryKey: ['hellos'],
-      }),
-    })
-  );
+        queryKey: ['hellos']
+      })
+  }));
 
   addHello() {
     this.mutation.mutate();
   }
-}
+}

webapp/src/app/storybook.helper.ts

@@ -1,13 +1,10 @@
 import { InputSignalWithTransform, InputSignal, EventEmitter } from '@angular/core';
-import { Args, ArgTypes } from '@storybook/angular';
 import { cva as CVA } from 'class-variance-authority';
 import { ClassProp, ClassValue, StringToBoolean } from 'class-variance-authority/types';
 
 // Source:
 // https://stackoverflow.com/questions/78379300/how-do-i-use-angular-input-signals-with-storybook
-export function toArgs<Component>(
-  args: Partial<TransformSignalInputType<TransformEventType<Component>>>
-): TransformEventType<Component> {
+export function toArgs<Component>(args: Partial<TransformSignalInputType<TransformEventType<Component>>>): TransformEventType<Component> {
   return args as unknown as TransformEventType<Component>;
 }
 
@@ -22,28 +19,23 @@ type TransformSignalInputType<T> = {
 };
 
 // Type to extract the type from InputSignal or InputSignalWithTransform
-type TransformInputType<T> =
-  T extends InputSignalWithTransform<infer U, any>
-      ? U
-      : T extends InputSignal<infer U>
-        ? U
-        : T;
-
-
+type TransformInputType<T> = T extends InputSignalWithTransform<infer U, unknown> ? U : T extends InputSignal<infer U> ? U : T;
 
 // CVA Storybook Helper
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
 type ConfigVariants<T extends ConfigSchema> = {
-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
+  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
 };
 type ConfigVariantsMulti<T extends ConfigSchema> = {
-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
+  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
 };
-type Config<T> = T extends ConfigSchema ? {
-    variants?: T;
-    defaultVariants?: ConfigVariants<T>;
-    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
-} : never;
+type Config<T> = T extends ConfigSchema
+  ? {
+      variants?: T;
+      defaultVariants?: ConfigVariants<T>;
+      compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+    }
+  : never;
 
 function createCVAArgTypes<T extends ConfigSchema>(config?: Config<T>) {
   if (!config?.variants) {
@@ -53,20 +45,22 @@ function createCVAArgTypes<T extends ConfigSchema>(config?: Config<T>) {
   const variants = config?.variants;
   return Object.fromEntries(
     Object.entries(variants).map(([variant, options]) => {
-      const variantKey = variant as keyof T;
-      const optionsArray = Object.keys(options) as (keyof T[typeof variantKey])[];
-      return [variant, {
-        control: { type: 'select' },
-        options: optionsArray
-      }];
+      const optionsArray = Object.keys(options) as (keyof T[typeof variant])[];
+      return [
+        variant,
+        {
+          control: { type: 'select' },
+          options: optionsArray
+        }
+      ];
     })
   );
 }
 
 function createCVADefaultArgs<T>(config?: Config<T>) {
   return (config?.defaultVariants || {}) as {
     [Variant in keyof T]: keyof T[Variant];
-  }
+  };
 }
 
 export function cva<T extends ConfigSchema>(base?: ClassValue, config?: Config<T>) {

webapp/src/app/ui/button/button/button.component.html

@@ -1,3 +1,3 @@
 <button [class]="computedClass()" [disabled]="disabled()" (click)="onClick.emit($event)">
   <ng-content />
-</button>
+</button>