feat(ui): add ui/input component

artaommahe · Jun 22, 2024 · 610004d · 610004d
1 parent 25e6d45
commit 610004d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/src/app/cultivating/sprout-details/sprout-details.component.ts b/src/app/cultivating/sprout-details/sprout-details.component.ts
@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject, input, output } from '@angular/core';
 import { Sprout } from '../../barn/barn.service';
 import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { InputDirective } from '../../ui/input/input';
 
 @Component({
   selector: 'app-sprout-details',
   template: `
     <form class="flex flex-col gap-2 h-full" [formGroup]="form" (ngSubmit)="onSubmit()">
       <label>
         Name
-        <!-- TODO: ui/input -->
-        <input type="text" formControlName="name" minlength="1" required />
+        <input appInput type="text" formControlName="name" minlength="1" required />
       </label>
 
       <div class="flex gap-4 mt-auto">
@@ -20,7 +20,7 @@ import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angula
       </div>
     </form>
   `,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, InputDirective],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/src/app/planting/new-seed/new-seed.component.ts b/src/app/planting/new-seed/new-seed.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, output, signal } from '@angular/core';
+import { InputDirective } from '../../ui/input/input';
 
 @Component({
   selector: 'app-new-seed',
@@ -17,10 +18,10 @@ import { ChangeDetectionStrategy, Component, output, signal } from '@angular/cor
         }
       </button>
 
-      <!-- TODO: ui/input -->
       @if (mode() === 'single') {
         <input
-          class="p-2 border border-transparent bg-secondary rounded-lg placeholder:text-secondary text-center grow focus-visible:border-primary outline-none"
+          class="text-center grow"
+          appInput
           type="text"
           placeholder="New seed"
           autocapitalize="off"
@@ -29,9 +30,9 @@ import { ChangeDetectionStrategy, Component, output, signal } from '@angular/cor
           (keydown.enter)="onAdd()"
         />
       } @else {
-        <!-- TODO: ui/textarea -->
         <textarea
-          class="grow p-2 border border-transparent bg-secondary rounded-lg placeholder:text-secondary focus-visible:border-primary outline-none"
+          class="grow"
+          appInput
           placeholder="One seed a line"
           rows="10"
           autocapitalize="off"
@@ -45,6 +46,7 @@ import { ChangeDetectionStrategy, Component, output, signal } from '@angular/cor
       </button>
     </div>
   `,
+  imports: [InputDirective],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/src/app/planting/seed-details/seed-details.component.ts b/src/app/planting/seed-details/seed-details.component.ts
@@ -1,15 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject, input, output } from '@angular/core';
 import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Seed } from '../../barn/barn.service';
+import { InputDirective } from '../../ui/input/input';
 
 @Component({
   selector: 'app-seed-details',
   template: `
     <form class="flex flex-col gap-2 h-full" [formGroup]="form" (ngSubmit)="onSubmit()">
       <label>
         Name
-        <!-- TODO: ui/input -->
-        <input type="text" formControlName="name" minlength="1" required />
+        <input appInput type="text" formControlName="name" minlength="1" required />
       </label>
 
       <div class="flex gap-4 mt-auto">
@@ -20,7 +20,7 @@ import { Seed } from '../../barn/barn.service';
       </div>
     </form>
   `,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, InputDirective],
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/src/app/ui/input/input.ts b/src/app/ui/input/input.ts
@@ -0,0 +1,11 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'input[appInput], textarea[appInput]',
+  host: {
+    class:
+      'p-2 border border-transparent bg-secondary rounded-lg outline-none placeholder:text-secondary focus-visible:border-primary',
+  },
+  standalone: true,
+})
+export class InputDirective {}