feat(input): input / label error self management (#37)

* feat(input): ngcontrol error input test * feat(input): fix gen classes * feat(input): cva based error variants feat(input): fix storybook feat(input): fix transform * feat(input): storybook additional example feat(input): storybook additional example feat(input): storybook additional example feat(input): storybook additional example * feat(label): additional label styles * feat(label): fix - default error state * feat(input): review fixes
spartan-ng · Oct 25, 2023 · 4fbe6d1 · 4fbe6d1
1 parent 5f202f1
commit 4fbe6d1
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 12 deletions.
diff --git a/libs/nx/src/generators/ui/libs/ui-input-helm/files/lib/hlm-input.directive.ts.template b/libs/nx/src/generators/ui/libs/ui-input-helm/files/lib/hlm-input.directive.ts.template
@@ -12,9 +12,14 @@ const inputVariants = cva(
         sm: 'h-9 px-3',
         lg: 'h-11 px-8',
       },
+      error: {
+        auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+        true: 'text-destructive border-destructive focus-visible:ring-destructive',
+      },
     },
     defaultVariants: {
       size: 'default',
+      error: 'auto',
     },
   }
 );
@@ -25,6 +30,8 @@ type InputVariants = VariantProps<typeof inputVariants>;
   standalone: true,
 })
 export class HlmInputDirective {
+  private _inputs: ClassValue = '';
+
   private _size: InputVariants['size'] = 'default';
   @Input()
   get size(): InputVariants['size'] {
@@ -36,7 +43,16 @@ export class HlmInputDirective {
     this._class = this.generateClasses();
   }
 
-  private _inputs: ClassValue = '';
+  private _error: InputVariants['error'] = 'auto';
+  @Input()
+  get error(): InputVariants['error'] {
+    return this._error;
+  }
+
+  set error(value: InputVariants['error']) {
+    this._error = value;
+    this._class = this.generateClasses();
+  }
 
   @Input()
   set class(inputs: ClassValue) {
@@ -48,6 +64,6 @@ export class HlmInputDirective {
   private _class = this.generateClasses();
 
   private generateClasses() {
-    return hlm(inputVariants({ size: this._size }), this._inputs);
+    return hlm(inputVariants({ size: this._size, error: this._error }), this._inputs);
   }
 }
diff --git a/libs/nx/src/generators/ui/libs/ui-label-helm/files/lib/hlm-label.directive.ts.template b/libs/nx/src/generators/ui/libs/ui-label-helm/files/lib/hlm-label.directive.ts.template
@@ -9,11 +9,15 @@ const labelVariants = cva(
     variants: {
       variant: {
         default: '',
-        error: 'text-destructive',
+      },
+      error: {
+        auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive',
+        true: 'text-destructive',
       },
     },
     defaultVariants: {
-      variant: 'error',
+      variant: 'default',
+      error: 'auto',
     },
   }
 );
@@ -38,6 +42,17 @@ export class HlmLabelDirective {
     this._class = this.generateClasses();
   }
 
+  private _error: LabelVariants['error'] = 'auto';
+  @Input()
+  get error(): LabelVariants['error'] {
+    return this._error;
+  }
+
+  set error(value: LabelVariants['error']) {
+    this._error = value;
+    this._class = this.generateClasses();
+  }
+
   @Input()
   set class(labels: ClassValue) {
     this._inputs = labels;
@@ -48,6 +63,6 @@ export class HlmLabelDirective {
   private _class = this.generateClasses();
 
   private generateClasses() {
-    return hlm(labelVariants({ variant: this._variant }), this._inputs);
+    return hlm(labelVariants({ variant: this._variant, error: this._error }), this._inputs);
   }
 }
diff --git a/libs/ui/input/helm/src/lib/hlm-input.directive.ts b/libs/ui/input/helm/src/lib/hlm-input.directive.ts
@@ -12,9 +12,14 @@ const inputVariants = cva(
         sm: 'h-9 px-3',
         lg: 'h-11 px-8',
       },
+      error: {
+        auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+        true: 'text-destructive border-destructive focus-visible:ring-destructive',
+      },
     },
     defaultVariants: {
       size: 'default',
+      error: 'auto',
     },
   }
 );
@@ -25,6 +30,8 @@ type InputVariants = VariantProps<typeof inputVariants>;
   standalone: true,
 })
 export class HlmInputDirective {
+  private _inputs: ClassValue = '';
+
   private _size: InputVariants['size'] = 'default';
   @Input()
   get size(): InputVariants['size'] {
@@ -36,7 +43,16 @@ export class HlmInputDirective {
     this._class = this.generateClasses();
   }
 
-  private _inputs: ClassValue = '';
+  private _error: InputVariants['error'] = 'auto';
+  @Input()
+  get error(): InputVariants['error'] {
+    return this._error;
+  }
+
+  set error(value: InputVariants['error']) {
+    this._error = value;
+    this._class = this.generateClasses();
+  }
 
   @Input()
   set class(inputs: ClassValue) {
@@ -48,6 +64,6 @@ export class HlmInputDirective {
   private _class = this.generateClasses();
 
   private generateClasses() {
-    return hlm(inputVariants({ size: this._size }), this._inputs);
+    return hlm(inputVariants({ size: this._size, error: this._error }), this._inputs);
   }
 }
diff --git a/libs/ui/input/input.stories.ts b/libs/ui/input/input.stories.ts
@@ -1,4 +1,5 @@
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { FormsModule } from '@angular/forms';
 import { HlmInputDirective } from './helm/src';
 import { HlmLabelDirective } from '../label/helm/src';
 import { HlmButtonDirective } from '../button/helm/src';
@@ -7,7 +8,7 @@ const meta: Meta<{}> = {
   title: 'Input',
   decorators: [
     moduleMetadata({
-      imports: [HlmInputDirective, HlmLabelDirective, HlmButtonDirective],
+      imports: [HlmInputDirective, HlmLabelDirective, HlmButtonDirective, FormsModule],
     }),
   ],
 };
@@ -41,6 +42,23 @@ export const Disabled: Story = {
   }),
 };
 
+export const Required: Story = {
+  render: () => ({
+    props: { value: '' },
+    template: `
+    <input aria-label='Email *' [(ngModel)]="value" class='w-80' hlmInput type='email' required placeholder='Email *'/>
+    `,
+  }),
+};
+
+export const Error: Story = {
+  render: () => ({
+    template: `
+    <input aria-label='Email' class='w-80' hlmInput type='email' placeholder='Email' [error]="true"/>
+    `,
+  }),
+};
+
 export const WithButton: Story = {
   name: 'With Button',
   render: () => ({

diff --git a/libs/ui/label/helm/src/lib/hlm-label.directive.ts b/libs/ui/label/helm/src/lib/hlm-label.directive.ts
@@ -9,11 +9,15 @@ const labelVariants = cva(
     variants: {
       variant: {
         default: '',
-        error: 'text-destructive',
+      },
+      error: {
+        auto: '[&:has([hlmInput].ng-invalid.ng-touched)]:text-destructive',
+        true: 'text-destructive',
       },
     },
     defaultVariants: {
-      variant: 'error',
+      variant: 'default',
+      error: 'auto',
     },
   }
 );
@@ -38,6 +42,17 @@ export class HlmLabelDirective {
     this._class = this.generateClasses();
   }
 
+  private _error: LabelVariants['error'] = 'auto';
+  @Input()
+  get error(): LabelVariants['error'] {
+    return this._error;
+  }
+
+  set error(value: LabelVariants['error']) {
+    this._error = value;
+    this._class = this.generateClasses();
+  }
+
   @Input()
   set class(labels: ClassValue) {
     this._inputs = labels;
@@ -48,6 +63,6 @@ export class HlmLabelDirective {
   private _class = this.generateClasses();
 
   private generateClasses() {
-    return hlm(labelVariants({ variant: this._variant }), this._inputs);
+    return hlm(labelVariants({ variant: this._variant, error: this._error }), this._inputs);
   }
 }
diff --git a/libs/ui/label/label.stories.ts b/libs/ui/label/label.stories.ts
@@ -1,12 +1,13 @@
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { FormsModule } from '@angular/forms';
 import { HlmLabelDirective } from './helm/src';
 import { HlmInputDirective } from '../input/helm/src';
 
 const meta: Meta<{}> = {
   title: 'Label',
   decorators: [
     moduleMetadata({
-      imports: [HlmInputDirective, HlmLabelDirective],
+      imports: [HlmInputDirective, HlmLabelDirective, FormsModule],
     }),
   ],
 };
@@ -23,3 +24,14 @@ export const Default: Story = {
     `,
   }),
 };
+
+export const InputRequired: Story = {
+  render: () => ({
+    props: { value: '' },
+    template: `
+    <label hlmLabel>E-Mail *
+        <input [(ngModel)]="value" class='w-80' hlmInput type='email' placeholder='Email *' required/>
+    </label>
+    `,
+  }),
+};