From 771713764c14b6fc7eb45428735c02c80b8f92c9 Mon Sep 17 00:00:00 2001
From: Milena Serbinova <45200178+milesha@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:09:13 +0200
Subject: [PATCH 1/6] Add Input Field + Label Components  (#11)

Co-authored-by: Felix T.J. Dietrich <contact@felixdietrich.com>
Co-authored-by: Felix T.J. Dietrich <felixtj.dietrich@tum.de>
---
 webapp/src/app/ui/input/input.component.html | 13 +++
 webapp/src/app/ui/input/input.component.ts   | 51 ++++++++++++
 webapp/src/app/ui/input/input.stories.ts     | 86 ++++++++++++++++++++
 webapp/src/app/ui/label/label.component.html |  6 ++
 webapp/src/app/ui/label/label.component.ts   | 25 ++++++
 webapp/src/app/ui/label/label.stories.ts     | 25 ++++++
 6 files changed, 206 insertions(+)
 create mode 100644 webapp/src/app/ui/input/input.component.html
 create mode 100644 webapp/src/app/ui/input/input.component.ts
 create mode 100644 webapp/src/app/ui/input/input.stories.ts
 create mode 100644 webapp/src/app/ui/label/label.component.html
 create mode 100644 webapp/src/app/ui/label/label.component.ts
 create mode 100644 webapp/src/app/ui/label/label.stories.ts

diff --git a/webapp/src/app/ui/input/input.component.html b/webapp/src/app/ui/input/input.component.html
new file mode 100644
index 00000000..8694176e
--- /dev/null
+++ b/webapp/src/app/ui/input/input.component.html
@@ -0,0 +1,13 @@
+<input
+  [class]="computedClass()"
+  [type]="type()"
+  [placeholder]="placeholder()"
+  [disabled]="disabled()"
+  [value]="value()"
+  [id]="id()"
+  (input)="onInput($event)"
+>
+
+
+
+
diff --git a/webapp/src/app/ui/input/input.component.ts b/webapp/src/app/ui/input/input.component.ts
new file mode 100644
index 00000000..57683265
--- /dev/null
+++ b/webapp/src/app/ui/input/input.component.ts
@@ -0,0 +1,51 @@
+import { Component, computed, input, output } from '@angular/core';
+import type { ClassValue } from 'clsx';
+import { VariantProps } from 'class-variance-authority';
+import { cn } from 'app/utils';
+import { cva } from 'app/storybook.helper';
+
+const [inputVariants, args, argTypes] = cva(
+  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 px-2 py-1',
+        lg: 'h-11 px-4 py-3',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export { args, argTypes };
+
+interface InputVariants extends VariantProps<typeof inputVariants> {}
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  templateUrl: './input.component.html',
+})
+export class AppInputComponent {
+  class = input<ClassValue>('');
+  type = input<string>('text');
+  placeholder = input<string>('');
+  size = input<InputVariants['size']>('default');
+  disabled = input<boolean>(false);
+  value = input<string>('');
+  id = input<string>('');
+
+  valueChange = output<string>();
+
+  onInput(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    this.valueChange.emit(inputValue);
+  }
+
+  computedClass = computed(() =>
+    cn(inputVariants({ size: this.size() }), this.class()),
+  );
+}
diff --git a/webapp/src/app/ui/input/input.stories.ts b/webapp/src/app/ui/input/input.stories.ts
new file mode 100644
index 00000000..8beb17ce
--- /dev/null
+++ b/webapp/src/app/ui/input/input.stories.ts
@@ -0,0 +1,86 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+import { AppInputComponent, args, argTypes } from './input.component';
+import { action } from '@storybook/addon-actions';
+import { AppButtonComponent } from '@app/ui/button/button/button.component';
+import { AppLabelComponent } from '@app/ui/label/label.component';
+
+const meta: Meta<AppInputComponent> = {
+  title: 'UI/Input',
+  component: AppInputComponent,
+  tags: ['autodocs'],
+  args: {
+    ...args,
+    value: '',
+    disabled: false,
+    size: 'default',
+  },
+  argTypes: {
+    ...argTypes,
+    disabled: {
+      control: 'boolean',
+    },
+    onInput: {
+      action: 'onInput',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [AppButtonComponent, AppLabelComponent],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<AppInputComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-input ${argsToTemplate(args)} placeholder="Enter text here"/>`,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<app-input ${argsToTemplate(args)} placeholder="Disabled input"/>`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <app-label [for]="input-field" size="sm">Label</app-label>
+        <app-input ${argsToTemplate(args)} [id]="input-field" placeholder="Enter text here" class="grow"></app-input>
+      </div>
+    `,
+  }),
+};
+
+export const WithButton: Story = {
+  render: (args) => ({
+    props: {
+      args,
+      userInput: '',
+      onButtonClick(value: string) {
+        action('Button Clicked')(`Input Value: ${value}`);
+      },
+    },
+    template: `
+      <div class="flex gap-2 flex-row">
+        <app-input ${argsToTemplate(args)} [size]="args.size" [(value)]="userInput" placeholder="Enter text here" class="grow"/>
+        <app-button (onClick)="onButtonClick(userInput)" size="${args.size ?? 'default'}" [disabled]="!userInput">Submit</app-button>
+      </div>
+    `,
+  }),
+};
diff --git a/webapp/src/app/ui/label/label.component.html b/webapp/src/app/ui/label/label.component.html
new file mode 100644
index 00000000..3eed1b2c
--- /dev/null
+++ b/webapp/src/app/ui/label/label.component.html
@@ -0,0 +1,6 @@
+<label
+  [class]="computedClass()"
+  [for]="for()"
+>
+  <ng-content/>
+</label>
diff --git a/webapp/src/app/ui/label/label.component.ts b/webapp/src/app/ui/label/label.component.ts
new file mode 100644
index 00000000..013d6cb8
--- /dev/null
+++ b/webapp/src/app/ui/label/label.component.ts
@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import type { ClassValue } from 'clsx';
+import { VariantProps } from 'class-variance-authority';
+import { cn } from 'app/utils';
+import { cva } from 'app/storybook.helper';
+
+const [labelVariants, args, argTypes] = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+export { args, argTypes };
+
+interface LabelVariants extends VariantProps<typeof labelVariants> {}
+
+@Component({
+  selector: 'app-label',
+  standalone: true,
+  templateUrl: './label.component.html',
+})
+export class AppLabelComponent {
+  class = input<ClassValue>('');
+  for = input<string>('');
+
+  computedClass = computed(() =>
+    cn(labelVariants({}), this.class()),
+  );
+}
diff --git a/webapp/src/app/ui/label/label.stories.ts b/webapp/src/app/ui/label/label.stories.ts
new file mode 100644
index 00000000..7d9dd734
--- /dev/null
+++ b/webapp/src/app/ui/label/label.stories.ts
@@ -0,0 +1,25 @@
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
+import { AppLabelComponent, args, argTypes } from './label.component';
+
+const meta: Meta<AppLabelComponent> = {
+  title: 'UI/Label',
+  component: AppLabelComponent,
+  tags: ['autodocs'],
+  args: {
+    ...args,
+    for: 'example-input',
+  },
+  argTypes: {
+    ...argTypes,
+  },
+};
+
+export default meta;
+type Story = StoryObj<AppLabelComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-label ${argsToTemplate(args)}>Label</app-label>`,
+  }),
+};

From b2e6178c8def3b61979854172b853dd78d8c947c Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felixtj.dietrich@tum.de>
Date: Tue, 6 Aug 2024 19:10:15 +0200
Subject: [PATCH 2/6] Revert "Add Input Field + Label Components" (#37)

---
 webapp/src/app/ui/input/input.component.html | 13 ---
 webapp/src/app/ui/input/input.component.ts   | 51 ------------
 webapp/src/app/ui/input/input.stories.ts     | 86 --------------------
 webapp/src/app/ui/label/label.component.html |  6 --
 webapp/src/app/ui/label/label.component.ts   | 25 ------
 webapp/src/app/ui/label/label.stories.ts     | 25 ------
 6 files changed, 206 deletions(-)
 delete mode 100644 webapp/src/app/ui/input/input.component.html
 delete mode 100644 webapp/src/app/ui/input/input.component.ts
 delete mode 100644 webapp/src/app/ui/input/input.stories.ts
 delete mode 100644 webapp/src/app/ui/label/label.component.html
 delete mode 100644 webapp/src/app/ui/label/label.component.ts
 delete mode 100644 webapp/src/app/ui/label/label.stories.ts

diff --git a/webapp/src/app/ui/input/input.component.html b/webapp/src/app/ui/input/input.component.html
deleted file mode 100644
index 8694176e..00000000
--- a/webapp/src/app/ui/input/input.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<input
-  [class]="computedClass()"
-  [type]="type()"
-  [placeholder]="placeholder()"
-  [disabled]="disabled()"
-  [value]="value()"
-  [id]="id()"
-  (input)="onInput($event)"
->
-
-
-
-
diff --git a/webapp/src/app/ui/input/input.component.ts b/webapp/src/app/ui/input/input.component.ts
deleted file mode 100644
index 57683265..00000000
--- a/webapp/src/app/ui/input/input.component.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Component, computed, input, output } from '@angular/core';
-import type { ClassValue } from 'clsx';
-import { VariantProps } from 'class-variance-authority';
-import { cn } from 'app/utils';
-import { cva } from 'app/storybook.helper';
-
-const [inputVariants, args, argTypes] = cva(
-  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 px-2 py-1',
-        lg: 'h-11 px-4 py-3',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-export { args, argTypes };
-
-interface InputVariants extends VariantProps<typeof inputVariants> {}
-
-@Component({
-  selector: 'app-input',
-  standalone: true,
-  templateUrl: './input.component.html',
-})
-export class AppInputComponent {
-  class = input<ClassValue>('');
-  type = input<string>('text');
-  placeholder = input<string>('');
-  size = input<InputVariants['size']>('default');
-  disabled = input<boolean>(false);
-  value = input<string>('');
-  id = input<string>('');
-
-  valueChange = output<string>();
-
-  onInput(event: Event) {
-    const inputValue = (event.target as HTMLInputElement).value;
-    this.valueChange.emit(inputValue);
-  }
-
-  computedClass = computed(() =>
-    cn(inputVariants({ size: this.size() }), this.class()),
-  );
-}
diff --git a/webapp/src/app/ui/input/input.stories.ts b/webapp/src/app/ui/input/input.stories.ts
deleted file mode 100644
index 8beb17ce..00000000
--- a/webapp/src/app/ui/input/input.stories.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular';
-import { AppInputComponent, args, argTypes } from './input.component';
-import { action } from '@storybook/addon-actions';
-import { AppButtonComponent } from '@app/ui/button/button/button.component';
-import { AppLabelComponent } from '@app/ui/label/label.component';
-
-const meta: Meta<AppInputComponent> = {
-  title: 'UI/Input',
-  component: AppInputComponent,
-  tags: ['autodocs'],
-  args: {
-    ...args,
-    value: '',
-    disabled: false,
-    size: 'default',
-  },
-  argTypes: {
-    ...argTypes,
-    disabled: {
-      control: 'boolean',
-    },
-    onInput: {
-      action: 'onInput',
-    },
-  },
-  decorators: [
-    moduleMetadata({
-      imports: [AppButtonComponent, AppLabelComponent],
-    }),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<AppInputComponent>;
-
-export const Default: Story = {
-  render: (args) => ({
-    props: args,
-    template: `<app-input ${argsToTemplate(args)} placeholder="Enter text here"/>`,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => ({
-    props: args,
-    template: `<app-input ${argsToTemplate(args)} placeholder="Disabled input"/>`,
-  }),
-};
-
-export const WithLabel: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <div class="grid w-full max-w-sm items-center gap-1.5">
-        <app-label [for]="input-field" size="sm">Label</app-label>
-        <app-input ${argsToTemplate(args)} [id]="input-field" placeholder="Enter text here" class="grow"></app-input>
-      </div>
-    `,
-  }),
-};
-
-export const WithButton: Story = {
-  render: (args) => ({
-    props: {
-      args,
-      userInput: '',
-      onButtonClick(value: string) {
-        action('Button Clicked')(`Input Value: ${value}`);
-      },
-    },
-    template: `
-      <div class="flex gap-2 flex-row">
-        <app-input ${argsToTemplate(args)} [size]="args.size" [(value)]="userInput" placeholder="Enter text here" class="grow"/>
-        <app-button (onClick)="onButtonClick(userInput)" size="${args.size ?? 'default'}" [disabled]="!userInput">Submit</app-button>
-      </div>
-    `,
-  }),
-};
diff --git a/webapp/src/app/ui/label/label.component.html b/webapp/src/app/ui/label/label.component.html
deleted file mode 100644
index 3eed1b2c..00000000
--- a/webapp/src/app/ui/label/label.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<label
-  [class]="computedClass()"
-  [for]="for()"
->
-  <ng-content/>
-</label>
diff --git a/webapp/src/app/ui/label/label.component.ts b/webapp/src/app/ui/label/label.component.ts
deleted file mode 100644
index 013d6cb8..00000000
--- a/webapp/src/app/ui/label/label.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import type { ClassValue } from 'clsx';
-import { VariantProps } from 'class-variance-authority';
-import { cn } from 'app/utils';
-import { cva } from 'app/storybook.helper';
-
-const [labelVariants, args, argTypes] = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
-
-export { args, argTypes };
-
-interface LabelVariants extends VariantProps<typeof labelVariants> {}
-
-@Component({
-  selector: 'app-label',
-  standalone: true,
-  templateUrl: './label.component.html',
-})
-export class AppLabelComponent {
-  class = input<ClassValue>('');
-  for = input<string>('');
-
-  computedClass = computed(() =>
-    cn(labelVariants({}), this.class()),
-  );
-}
diff --git a/webapp/src/app/ui/label/label.stories.ts b/webapp/src/app/ui/label/label.stories.ts
deleted file mode 100644
index 7d9dd734..00000000
--- a/webapp/src/app/ui/label/label.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
-import { AppLabelComponent, args, argTypes } from './label.component';
-
-const meta: Meta<AppLabelComponent> = {
-  title: 'UI/Label',
-  component: AppLabelComponent,
-  tags: ['autodocs'],
-  args: {
-    ...args,
-    for: 'example-input',
-  },
-  argTypes: {
-    ...argTypes,
-  },
-};
-
-export default meta;
-type Story = StoryObj<AppLabelComponent>;
-
-export const Default: Story = {
-  render: (args) => ({
-    props: args,
-    template: `<app-label ${argsToTemplate(args)}>Label</app-label>`,
-  }),
-};

From 9e90f7f79013bb4837d5900f21f7333399e85ce1 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felixtj.dietrich@tum.de>
Date: Tue, 6 Aug 2024 19:12:32 +0200
Subject: [PATCH 3/6] Add Input Field + Label Components (#38)

Co-authored-by: milenasrb <mi.serbinova@gmail.com>
---
 webapp/src/app/ui/input/input.component.html | 13 +++
 webapp/src/app/ui/input/input.component.ts   | 51 ++++++++++++
 webapp/src/app/ui/input/input.stories.ts     | 86 ++++++++++++++++++++
 webapp/src/app/ui/label/label.component.html |  6 ++
 webapp/src/app/ui/label/label.component.ts   | 25 ++++++
 webapp/src/app/ui/label/label.stories.ts     | 25 ++++++
 6 files changed, 206 insertions(+)
 create mode 100644 webapp/src/app/ui/input/input.component.html
 create mode 100644 webapp/src/app/ui/input/input.component.ts
 create mode 100644 webapp/src/app/ui/input/input.stories.ts
 create mode 100644 webapp/src/app/ui/label/label.component.html
 create mode 100644 webapp/src/app/ui/label/label.component.ts
 create mode 100644 webapp/src/app/ui/label/label.stories.ts

diff --git a/webapp/src/app/ui/input/input.component.html b/webapp/src/app/ui/input/input.component.html
new file mode 100644
index 00000000..8694176e
--- /dev/null
+++ b/webapp/src/app/ui/input/input.component.html
@@ -0,0 +1,13 @@
+<input
+  [class]="computedClass()"
+  [type]="type()"
+  [placeholder]="placeholder()"
+  [disabled]="disabled()"
+  [value]="value()"
+  [id]="id()"
+  (input)="onInput($event)"
+>
+
+
+
+
diff --git a/webapp/src/app/ui/input/input.component.ts b/webapp/src/app/ui/input/input.component.ts
new file mode 100644
index 00000000..57683265
--- /dev/null
+++ b/webapp/src/app/ui/input/input.component.ts
@@ -0,0 +1,51 @@
+import { Component, computed, input, output } from '@angular/core';
+import type { ClassValue } from 'clsx';
+import { VariantProps } from 'class-variance-authority';
+import { cn } from 'app/utils';
+import { cva } from 'app/storybook.helper';
+
+const [inputVariants, args, argTypes] = cva(
+  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 px-2 py-1',
+        lg: 'h-11 px-4 py-3',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export { args, argTypes };
+
+interface InputVariants extends VariantProps<typeof inputVariants> {}
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  templateUrl: './input.component.html',
+})
+export class AppInputComponent {
+  class = input<ClassValue>('');
+  type = input<string>('text');
+  placeholder = input<string>('');
+  size = input<InputVariants['size']>('default');
+  disabled = input<boolean>(false);
+  value = input<string>('');
+  id = input<string>('');
+
+  valueChange = output<string>();
+
+  onInput(event: Event) {
+    const inputValue = (event.target as HTMLInputElement).value;
+    this.valueChange.emit(inputValue);
+  }
+
+  computedClass = computed(() =>
+    cn(inputVariants({ size: this.size() }), this.class()),
+  );
+}
diff --git a/webapp/src/app/ui/input/input.stories.ts b/webapp/src/app/ui/input/input.stories.ts
new file mode 100644
index 00000000..8beb17ce
--- /dev/null
+++ b/webapp/src/app/ui/input/input.stories.ts
@@ -0,0 +1,86 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+import { AppInputComponent, args, argTypes } from './input.component';
+import { action } from '@storybook/addon-actions';
+import { AppButtonComponent } from '@app/ui/button/button/button.component';
+import { AppLabelComponent } from '@app/ui/label/label.component';
+
+const meta: Meta<AppInputComponent> = {
+  title: 'UI/Input',
+  component: AppInputComponent,
+  tags: ['autodocs'],
+  args: {
+    ...args,
+    value: '',
+    disabled: false,
+    size: 'default',
+  },
+  argTypes: {
+    ...argTypes,
+    disabled: {
+      control: 'boolean',
+    },
+    onInput: {
+      action: 'onInput',
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [AppButtonComponent, AppLabelComponent],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<AppInputComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-input ${argsToTemplate(args)} placeholder="Enter text here"/>`,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<app-input ${argsToTemplate(args)} placeholder="Disabled input"/>`,
+  }),
+};
+
+export const WithLabel: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <app-label [for]="input-field" size="sm">Label</app-label>
+        <app-input ${argsToTemplate(args)} [id]="input-field" placeholder="Enter text here" class="grow"></app-input>
+      </div>
+    `,
+  }),
+};
+
+export const WithButton: Story = {
+  render: (args) => ({
+    props: {
+      args,
+      userInput: '',
+      onButtonClick(value: string) {
+        action('Button Clicked')(`Input Value: ${value}`);
+      },
+    },
+    template: `
+      <div class="flex gap-2 flex-row">
+        <app-input ${argsToTemplate(args)} [size]="args.size" [(value)]="userInput" placeholder="Enter text here" class="grow"/>
+        <app-button (onClick)="onButtonClick(userInput)" size="${args.size ?? 'default'}" [disabled]="!userInput">Submit</app-button>
+      </div>
+    `,
+  }),
+};
diff --git a/webapp/src/app/ui/label/label.component.html b/webapp/src/app/ui/label/label.component.html
new file mode 100644
index 00000000..3eed1b2c
--- /dev/null
+++ b/webapp/src/app/ui/label/label.component.html
@@ -0,0 +1,6 @@
+<label
+  [class]="computedClass()"
+  [for]="for()"
+>
+  <ng-content/>
+</label>
diff --git a/webapp/src/app/ui/label/label.component.ts b/webapp/src/app/ui/label/label.component.ts
new file mode 100644
index 00000000..013d6cb8
--- /dev/null
+++ b/webapp/src/app/ui/label/label.component.ts
@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import type { ClassValue } from 'clsx';
+import { VariantProps } from 'class-variance-authority';
+import { cn } from 'app/utils';
+import { cva } from 'app/storybook.helper';
+
+const [labelVariants, args, argTypes] = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+export { args, argTypes };
+
+interface LabelVariants extends VariantProps<typeof labelVariants> {}
+
+@Component({
+  selector: 'app-label',
+  standalone: true,
+  templateUrl: './label.component.html',
+})
+export class AppLabelComponent {
+  class = input<ClassValue>('');
+  for = input<string>('');
+
+  computedClass = computed(() =>
+    cn(labelVariants({}), this.class()),
+  );
+}
diff --git a/webapp/src/app/ui/label/label.stories.ts b/webapp/src/app/ui/label/label.stories.ts
new file mode 100644
index 00000000..7d9dd734
--- /dev/null
+++ b/webapp/src/app/ui/label/label.stories.ts
@@ -0,0 +1,25 @@
+import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
+import { AppLabelComponent, args, argTypes } from './label.component';
+
+const meta: Meta<AppLabelComponent> = {
+  title: 'UI/Label',
+  component: AppLabelComponent,
+  tags: ['autodocs'],
+  args: {
+    ...args,
+    for: 'example-input',
+  },
+  argTypes: {
+    ...argTypes,
+  },
+};
+
+export default meta;
+type Story = StoryObj<AppLabelComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-label ${argsToTemplate(args)}>Label</app-label>`,
+  }),
+};

From 29a1350fae9c4dee6ce3cd5fc7f7abae57c3124f Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felixtj.dietrich@tum.de>
Date: Tue, 6 Aug 2024 19:17:39 +0200
Subject: [PATCH 4/6] Fix linting issues and run prettier (#36)

---
 webapp/eslint.config.js                       |  6 +-
 webapp/src/app/app.component.html             |  8 +--
 webapp/src/app/app.component.ts               |  2 +-
 webapp/src/app/app.config.ts                  | 12 ++--
 .../example/counter/counter.component.html    | 24 ++++---
 .../app/example/counter/counter.component.ts  | 19 +++---
 .../app/example/counter/counter.stories.ts    | 10 +--
 webapp/src/app/example/counter/counter.ts     |  6 +-
 .../src/app/example/hello/hello.component.ts  | 24 ++++---
 webapp/src/app/storybook.helper.ts            | 46 ++++++-------
 .../ui/button/button/button.component.html    |  2 +-
 .../app/ui/button/button/button.component.ts  | 16 ++---
 .../app/ui/button/button/button.stories.ts    | 66 +++++++++----------
 webapp/src/app/ui/input/input.component.html  | 14 +---
 webapp/src/app/ui/input/input.component.ts    | 16 ++---
 webapp/src/app/ui/input/input.stories.ts      | 41 +++++-------
 webapp/src/app/ui/label/label.component.html  |  7 +-
 webapp/src/app/ui/label/label.component.ts    |  9 +--
 webapp/src/app/ui/label/label.stories.ts      | 10 +--
 webapp/src/app/utils.ts                       |  6 +-
 webapp/src/index.html                         | 20 +++---
 webapp/src/main.ts                            |  3 +-
 webapp/src/styles.css                         |  2 +-
 23 files changed, 166 insertions(+), 203 deletions(-)

diff --git a/webapp/eslint.config.js b/webapp/eslint.config.js
index 5329136c..3ecbff00 100644
--- a/webapp/eslint.config.js
+++ b/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',
     },
   },
   {
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index 55ae350d..460bba46 100644
--- a/webapp/src/app/app.component.html
+++ b/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>
\ No newline at end of file
+</main>
diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
index 3bf1d72a..513811ab 100644
--- a/webapp/src/app/app.component.ts
+++ b/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';
diff --git a/webapp/src/app/app.config.ts b/webapp/src/app/app.config.ts
index fc69a29e..c3b646d2 100644
--- a/webapp/src/app/app.config.ts
+++ b/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 }))
   ]
-};
\ No newline at end of file
+};
diff --git a/webapp/src/app/example/counter/counter.component.html b/webapp/src/app/example/counter/counter.component.html
index 87e73a15..9c3d46a6 100644
--- a/webapp/src/app/example/counter/counter.component.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/example/counter/counter.component.ts b/webapp/src/app/example/counter/counter.component.ts
index fb2eb490..0b3fb872 100644
--- a/webapp/src/app/example/counter/counter.component.ts
+++ b/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,9 +26,9 @@ 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()}`);
@@ -36,7 +36,8 @@ export class CounterComponent {
     // `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() }]);
   }
 }
diff --git a/webapp/src/app/example/counter/counter.stories.ts b/webapp/src/app/example/counter/counter.stories.ts
index 8f8504b5..a751c49e 100644
--- a/webapp/src/app/example/counter/counter.stories.ts
+++ b/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
-  },
-};
\ No newline at end of file
+  }
+};
diff --git a/webapp/src/app/example/counter/counter.ts b/webapp/src/app/example/counter/counter.ts
index a16ed0a6..93cf9c2b 100644
--- a/webapp/src/app/example/counter/counter.ts
+++ b/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);
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/webapp/src/app/example/hello/hello.component.ts b/webapp/src/app/example/hello/hello.component.ts
index 30c42c61..12a35298 100644
--- a/webapp/src/app/example/hello/hello.component.ts
+++ b/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();
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/src/app/storybook.helper.ts b/webapp/src/app/storybook.helper.ts
index a269d051..49322ae7 100644
--- a/webapp/src/app/storybook.helper.ts
+++ b/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,12 +45,14 @@ 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
+        }
+      ];
     })
   );
 }
@@ -66,7 +60,7 @@ function createCVAArgTypes<T extends ConfigSchema>(config?: Config<T>) {
 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>) {
diff --git a/webapp/src/app/ui/button/button/button.component.html b/webapp/src/app/ui/button/button/button.component.html
index 8677d1db..57c21bac 100644
--- a/webapp/src/app/ui/button/button/button.component.html
+++ b/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>
\ No newline at end of file
+</button>
diff --git a/webapp/src/app/ui/button/button/button.component.ts b/webapp/src/app/ui/button/button/button.component.ts
index 8d3a7235..fa921b14 100644
--- a/webapp/src/app/ui/button/button/button.component.ts
+++ b/webapp/src/app/ui/button/button/button.component.ts
@@ -14,19 +14,19 @@ const [buttonVariants, args, argTypes] = cva(
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
+        icon: 'h-10 w-10'
+      }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
-    },
+      size: 'default'
+    }
   }
 );
 
@@ -37,10 +37,10 @@ interface ButtonVariants extends VariantProps<typeof buttonVariants> {}
 @Component({
   selector: 'app-button',
   standalone: true,
-  templateUrl: './button.component.html',
+  templateUrl: './button.component.html'
 })
 export class AppButtonComponent {
-	class = input<ClassValue>('');
+  class = input<ClassValue>('');
   variant = input<ButtonVariants['variant']>('default');
   size = input<ButtonVariants['size']>('default');
   disabled = input<boolean>(false);
@@ -48,4 +48,4 @@ export class AppButtonComponent {
   onClick = output<Event>();
 
   computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.class()));
-}
\ No newline at end of file
+}
diff --git a/webapp/src/app/ui/button/button/button.stories.ts b/webapp/src/app/ui/button/button/button.stories.ts
index 2c7c7158..a3b254cb 100644
--- a/webapp/src/app/ui/button/button/button.stories.ts
+++ b/webapp/src/app/ui/button/button/button.stories.ts
@@ -11,17 +11,17 @@ const meta: Meta<AppButtonComponent> = {
   args: {
     ...args,
     disabled: false,
-    onClick: fn(),
+    onClick: fn()
   },
   argTypes: {
     ...argTypes,
     disabled: {
-      control: 'boolean',
+      control: 'boolean'
     },
     onClick: {
-      action: 'onClick',
-    },
-  },
+      action: 'onClick'
+    }
+  }
 };
 
 export default meta;
@@ -36,17 +36,17 @@ export const Primary: Story = {
   },
   render: (args) => ({
     props: args,
-    template: `<app-button ${argsToTemplate(args)}>Primary</app-button>`,
+    template: `<app-button ${argsToTemplate(args)}>Primary</app-button>`
   })
 };
 
 export const Secondary: Story = {
   args: {
-    variant: "secondary",
-    size: "default"
+    variant: 'secondary',
+    size: 'default'
   },
 
-  render: args => ({
+  render: (args) => ({
     props: args,
     template: `<app-button ${argsToTemplate(args)}>Secondary</app-button>`
   })
@@ -54,11 +54,11 @@ export const Secondary: Story = {
 
 export const Destructive: Story = {
   args: {
-    variant: "destructive",
-    size: "default"
+    variant: 'destructive',
+    size: 'default'
   },
 
-  render: args => ({
+  render: (args) => ({
     props: args,
     template: `<app-button ${argsToTemplate(args)}>Destructive</app-button>`
   })
@@ -66,11 +66,11 @@ export const Destructive: Story = {
 
 export const Outline: Story = {
   args: {
-    variant: "outline",
-    size: "default"
+    variant: 'outline',
+    size: 'default'
   },
 
-  render: args => ({
+  render: (args) => ({
     props: args,
     template: `<app-button ${argsToTemplate(args)}>Outline</app-button>`
   })
@@ -78,11 +78,11 @@ export const Outline: Story = {
 
 export const Ghost: Story = {
   args: {
-    variant: "ghost",
-    size: "default"
+    variant: 'ghost',
+    size: 'default'
   },
 
-  render: args => ({
+  render: (args) => ({
     props: args,
     template: `<app-button ${argsToTemplate(args)}>Ghost</app-button>`
   })
@@ -90,11 +90,11 @@ export const Ghost: Story = {
 
 export const Link: Story = {
   args: {
-    variant: "link",
-    size: "default"
+    variant: 'link',
+    size: 'default'
   },
 
-  render: args => ({
+  render: (args) => ({
     props: args,
     template: `<app-button ${argsToTemplate(args)}>Link</app-button>`
   })
@@ -103,45 +103,45 @@ export const Link: Story = {
 export const Icon: Story = {
   decorators: [
     moduleMetadata({
-      imports: [LucideAngularModule.pick({ ChevronRight })],
-    }),
+      imports: [LucideAngularModule.pick({ ChevronRight })]
+    })
   ],
   render: (args) => ({
     props: {
       variant: 'outline',
-      size: 'icon',
+      size: 'icon'
     },
-    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="chevron-right" class="size-4"/></app-button>`,
+    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="chevron-right" class="size-4"/></app-button>`
   })
 };
 
 export const WithIcon: Story = {
   decorators: [
     moduleMetadata({
-      imports: [LucideAngularModule.pick({ Mail })],
-    }),
+      imports: [LucideAngularModule.pick({ Mail })]
+    })
   ],
   render: (args) => ({
     props: {
       variant: 'default',
-      size: 'default',
+      size: 'default'
     },
-    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="mail" class="mr-2 size-4"/>Login with Email</app-button>`,
+    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="mail" class="mr-2 size-4"/>Login with Email</app-button>`
   })
 };
 
 export const Loading: Story = {
   decorators: [
     moduleMetadata({
-      imports: [LucideAngularModule.pick({ Loader2 })],
-    }),
+      imports: [LucideAngularModule.pick({ Loader2 })]
+    })
   ],
   render: (args) => ({
     props: {
       variant: 'default',
       size: 'default',
-      disabled: true,
+      disabled: true
     },
-    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="loader-2" class="mr-2 size-4 animate-spin"/>Please wait</app-button>`,
+    template: `<app-button ${argsToTemplate(args)}><lucide-icon name="loader-2" class="mr-2 size-4 animate-spin"/>Please wait</app-button>`
   })
 };
diff --git a/webapp/src/app/ui/input/input.component.html b/webapp/src/app/ui/input/input.component.html
index 8694176e..6b64b478 100644
--- a/webapp/src/app/ui/input/input.component.html
+++ b/webapp/src/app/ui/input/input.component.html
@@ -1,13 +1 @@
-<input
-  [class]="computedClass()"
-  [type]="type()"
-  [placeholder]="placeholder()"
-  [disabled]="disabled()"
-  [value]="value()"
-  [id]="id()"
-  (input)="onInput($event)"
->
-
-
-
-
+<input [class]="computedClass()" [type]="type()" [placeholder]="placeholder()" [disabled]="disabled()" [value]="value()" [id]="id()" (input)="onInput($event)" />
diff --git a/webapp/src/app/ui/input/input.component.ts b/webapp/src/app/ui/input/input.component.ts
index 57683265..bd46e268 100644
--- a/webapp/src/app/ui/input/input.component.ts
+++ b/webapp/src/app/ui/input/input.component.ts
@@ -11,13 +11,13 @@ const [inputVariants, args, argTypes] = cva(
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 px-2 py-1',
-        lg: 'h-11 px-4 py-3',
-      },
+        lg: 'h-11 px-4 py-3'
+      }
     },
     defaultVariants: {
-      size: 'default',
-    },
-  },
+      size: 'default'
+    }
+  }
 );
 
 export { args, argTypes };
@@ -27,7 +27,7 @@ interface InputVariants extends VariantProps<typeof inputVariants> {}
 @Component({
   selector: 'app-input',
   standalone: true,
-  templateUrl: './input.component.html',
+  templateUrl: './input.component.html'
 })
 export class AppInputComponent {
   class = input<ClassValue>('');
@@ -45,7 +45,5 @@ export class AppInputComponent {
     this.valueChange.emit(inputValue);
   }
 
-  computedClass = computed(() =>
-    cn(inputVariants({ size: this.size() }), this.class()),
-  );
+  computedClass = computed(() => cn(inputVariants({ size: this.size() }), this.class()));
 }
diff --git a/webapp/src/app/ui/input/input.stories.ts b/webapp/src/app/ui/input/input.stories.ts
index 8beb17ce..3ce17104 100644
--- a/webapp/src/app/ui/input/input.stories.ts
+++ b/webapp/src/app/ui/input/input.stories.ts
@@ -1,9 +1,4 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular';
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { AppInputComponent, args, argTypes } from './input.component';
 import { action } from '@storybook/addon-actions';
 import { AppButtonComponent } from '@app/ui/button/button/button.component';
@@ -17,22 +12,22 @@ const meta: Meta<AppInputComponent> = {
     ...args,
     value: '',
     disabled: false,
-    size: 'default',
+    size: 'default'
   },
   argTypes: {
     ...argTypes,
     disabled: {
-      control: 'boolean',
+      control: 'boolean'
     },
     onInput: {
-      action: 'onInput',
-    },
+      action: 'onInput'
+    }
   },
   decorators: [
     moduleMetadata({
-      imports: [AppButtonComponent, AppLabelComponent],
-    }),
-  ],
+      imports: [AppButtonComponent, AppLabelComponent]
+    })
+  ]
 };
 
 export default meta;
@@ -41,18 +36,18 @@ type Story = StoryObj<AppInputComponent>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `<app-input ${argsToTemplate(args)} placeholder="Enter text here"/>`,
-  }),
+    template: `<app-input ${argsToTemplate(args)} placeholder="Enter text here"/>`
+  })
 };
 
 export const Disabled: Story = {
   args: {
-    disabled: true,
+    disabled: true
   },
   render: (args) => ({
     props: args,
-    template: `<app-input ${argsToTemplate(args)} placeholder="Disabled input"/>`,
-  }),
+    template: `<app-input ${argsToTemplate(args)} placeholder="Disabled input"/>`
+  })
 };
 
 export const WithLabel: Story = {
@@ -63,8 +58,8 @@ export const WithLabel: Story = {
         <app-label [for]="input-field" size="sm">Label</app-label>
         <app-input ${argsToTemplate(args)} [id]="input-field" placeholder="Enter text here" class="grow"></app-input>
       </div>
-    `,
-  }),
+    `
+  })
 };
 
 export const WithButton: Story = {
@@ -74,13 +69,13 @@ export const WithButton: Story = {
       userInput: '',
       onButtonClick(value: string) {
         action('Button Clicked')(`Input Value: ${value}`);
-      },
+      }
     },
     template: `
       <div class="flex gap-2 flex-row">
         <app-input ${argsToTemplate(args)} [size]="args.size" [(value)]="userInput" placeholder="Enter text here" class="grow"/>
         <app-button (onClick)="onButtonClick(userInput)" size="${args.size ?? 'default'}" [disabled]="!userInput">Submit</app-button>
       </div>
-    `,
-  }),
+    `
+  })
 };
diff --git a/webapp/src/app/ui/label/label.component.html b/webapp/src/app/ui/label/label.component.html
index 3eed1b2c..72d84052 100644
--- a/webapp/src/app/ui/label/label.component.html
+++ b/webapp/src/app/ui/label/label.component.html
@@ -1,6 +1,3 @@
-<label
-  [class]="computedClass()"
-  [for]="for()"
->
-  <ng-content/>
+<label [class]="computedClass()" [for]="for()">
+  <ng-content />
 </label>
diff --git a/webapp/src/app/ui/label/label.component.ts b/webapp/src/app/ui/label/label.component.ts
index 013d6cb8..dcd21155 100644
--- a/webapp/src/app/ui/label/label.component.ts
+++ b/webapp/src/app/ui/label/label.component.ts
@@ -1,6 +1,5 @@
 import { Component, computed, input } from '@angular/core';
 import type { ClassValue } from 'clsx';
-import { VariantProps } from 'class-variance-authority';
 import { cn } from 'app/utils';
 import { cva } from 'app/storybook.helper';
 
@@ -8,18 +7,14 @@ const [labelVariants, args, argTypes] = cva('text-sm font-medium leading-none pe
 
 export { args, argTypes };
 
-interface LabelVariants extends VariantProps<typeof labelVariants> {}
-
 @Component({
   selector: 'app-label',
   standalone: true,
-  templateUrl: './label.component.html',
+  templateUrl: './label.component.html'
 })
 export class AppLabelComponent {
   class = input<ClassValue>('');
   for = input<string>('');
 
-  computedClass = computed(() =>
-    cn(labelVariants({}), this.class()),
-  );
+  computedClass = computed(() => cn(labelVariants({}), this.class()));
 }
diff --git a/webapp/src/app/ui/label/label.stories.ts b/webapp/src/app/ui/label/label.stories.ts
index 7d9dd734..41247915 100644
--- a/webapp/src/app/ui/label/label.stories.ts
+++ b/webapp/src/app/ui/label/label.stories.ts
@@ -7,11 +7,11 @@ const meta: Meta<AppLabelComponent> = {
   tags: ['autodocs'],
   args: {
     ...args,
-    for: 'example-input',
+    for: 'example-input'
   },
   argTypes: {
-    ...argTypes,
-  },
+    ...argTypes
+  }
 };
 
 export default meta;
@@ -20,6 +20,6 @@ type Story = StoryObj<AppLabelComponent>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `<app-label ${argsToTemplate(args)}>Label</app-label>`,
-  }),
+    template: `<app-label ${argsToTemplate(args)}>Label</app-label>`
+  })
 };
diff --git a/webapp/src/app/utils.ts b/webapp/src/app/utils.ts
index d084ccad..9ad0df42 100644
--- a/webapp/src/app/utils.ts
+++ b/webapp/src/app/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/webapp/src/index.html b/webapp/src/index.html
index c4c981e0..755019f9 100644
--- a/webapp/src/index.html
+++ b/webapp/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Hephaestus</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hephaestus</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index 35b00f34..17447a5d 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index 33aec53d..00b08e39 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -56,4 +56,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}

From 69743209a8bb0903d8502984bac272af0a841e0c Mon Sep 17 00:00:00 2001
From: Armin Stanitzok <21990230+GODrums@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:22:23 +0200
Subject: [PATCH 5/6] Fix: CVA Tailwind Autocomplete (#35)

Co-authored-by: Felix T.J. Dietrich <felixtj.dietrich@tum.de>
---
 .vscode/settings.json | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 72dbca1b..7a13d80c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,8 @@
 {
-  "java.compile.nullAnalysis.mode": "automatic",
-  "java.configuration.updateBuildConfiguration": "interactive",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  }
-}
\ No newline at end of file
+	"java.compile.nullAnalysis.mode": "automatic",
+	"java.configuration.updateBuildConfiguration": "interactive",
+	"tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
+	"editor.codeActionsOnSave": {
+		"source.fixAll": true
+	}
+}

From 601b76d266437a12ea4ca6a2579f8aa0da907b32 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felixtj.dietrich@tum.de>
Date: Tue, 6 Aug 2024 19:37:33 +0200
Subject: [PATCH 6/6] Fix intellisense in cn (#39)

---
 .vscode/settings.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7a13d80c..fb1e10aa 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,10 @@
 {
 	"java.compile.nullAnalysis.mode": "automatic",
 	"java.configuration.updateBuildConfiguration": "interactive",
-	"tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
+	"tailwindCSS.experimental.classRegex": [
+		"cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]",
+		"cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"
+	],
 	"editor.codeActionsOnSave": {
 		"source.fixAll": true
 	}