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/2] 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/2] 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>`,
-  }),
-};