@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/lib/fieldset/fieldset.directives.spec.ts

@@ -0,0 +1,74 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyFieldsetDirective,
+  SnyFieldsetLegendDirective,
+  SnyFieldsetContentDirective,
+} from './fieldset.directives';
+import type { FieldsetVariant } from './fieldset.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFieldsetContentDirective],
+  template: `
+    <fieldset snyFieldset [variant]="variant()" [disabled]="disabled()">
+      <legend snyFieldsetLegend>Personal Info</legend>
+      <div snyFieldsetContent>
+        <input type="text" />
+      </div>
+    </fieldset>
+  `,
+})
+class TestHostComponent {
+  variant = signal<FieldsetVariant>('default');
+  disabled = signal(false);
+}
+
+describe('SnyFieldsetDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let fieldset: HTMLFieldSetElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    fieldset = fixture.nativeElement.querySelector('fieldset');
+  });
+
+  it('should apply default classes', () => {
+    expect(fieldset.className).toContain('space-y-4');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    expect(fieldset.className).toContain('border');
+    expect(fieldset.className).toContain('rounded-lg');
+  });
+
+  it('should set disabled attribute', () => {
+    expect(fieldset.disabled).toBe(false);
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(fieldset.disabled).toBe(true);
+  });
+
+  it('should apply legend classes', () => {
+    const legend = fixture.nativeElement.querySelector('legend');
+    expect(legend.className).toContain('font-medium');
+  });
+
+  it('should apply content classes', () => {
+    const content = fixture.nativeElement.querySelector('[snyFieldsetContent]');
+    expect(content.className).toContain('space-y-2');
+  });
+
+  it('should set aria-disabled when disabled', () => {
+    expect(fieldset.getAttribute('aria-disabled')).toBeNull();
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(fieldset.getAttribute('aria-disabled')).toBe('true');
+  });
+});

package/src/lib/fieldset/fieldset.directives.ts

@@ -0,0 +1,49 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { fieldsetVariants, type FieldsetVariant } from './fieldset.variants';
+
+@Directive({
+  selector: 'fieldset[snyFieldset]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.disabled]': 'disabled() || null',
+    '[attr.aria-disabled]': 'disabled() || null',
+  },
+})
+export class SnyFieldsetDirective {
+  readonly variant = input<FieldsetVariant>('default');
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(fieldsetVariants({ variant: this.variant() }), this.class())
+  );
+}
+
+@Directive({
+  selector: 'legend[snyFieldsetLegend]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFieldsetLegendDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('text-sm font-medium leading-none', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyFieldsetContent]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFieldsetContentDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('space-y-2', this.class())
+  );
+}

package/src/lib/fieldset/fieldset.variants.ts

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority';
+
+export const fieldsetVariants = cva('space-y-4', {
+  variants: {
+    variant: {
+      default: '',
+      bordered: 'rounded-lg border border-border p-4',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type FieldsetVariant = 'default' | 'bordered';

package/src/lib/fieldset/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyFieldsetDirective,
+  SnyFieldsetLegendDirective,
+  SnyFieldsetContentDirective,
+} from './fieldset.directives';
+export { fieldsetVariants, type FieldsetVariant } from './fieldset.variants';

package/src/lib/file-input/file-input.component.spec.ts

@@ -0,0 +1,114 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyFileInputComponent } from './file-input.component';
+import type { FileInputVariant, FileInputSize } from './file-input.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyFileInputComponent],
+  template: `
+    <sny-file-input
+      [variant]="variant()"
+      [size]="size()"
+      [disabled]="disabled()"
+      [placeholder]="placeholder()"
+      [maxSize]="maxSize()"
+      (error)="lastError = $event"
+    />
+  `,
+})
+class TestHostComponent {
+  variant = signal<FileInputVariant>('default');
+  size = signal<FileInputSize>('md');
+  disabled = signal(false);
+  placeholder = signal('Choose file...');
+  maxSize = signal(0);
+  lastError = '';
+  fileInput = viewChild(SnyFileInputComponent);
+}
+
+describe('SnyFileInputComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-file-input');
+  });
+
+  it('should show placeholder text', () => {
+    expect(host.textContent).toContain('Choose file...');
+  });
+
+  it('should apply default variant classes', () => {
+    const label = host.querySelector('label');
+    expect(label!.className).toContain('border-input');
+  });
+
+  it('should apply error variant classes', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    const label = host.querySelector('label');
+    expect(label!.className).toContain('border-destructive');
+  });
+
+  it('should have file input with sr-only class', () => {
+    const input = host.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.className).toContain('sr-only');
+  });
+
+  it('should disable the input', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    const input = host.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+  });
+
+  it('should clear the selection', () => {
+    const comp = fixture.componentInstance.fileInput();
+    comp!.clear();
+    fixture.detectChanges();
+    expect(host.textContent).toContain('Choose file...');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyFileInputComponent],
+  template: `<sny-file-input [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl<FileList | null>(null);
+}
+
+describe('SnyFileInputComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-file-input');
+  });
+
+  it('should render with FormControl (writeValue)', () => {
+    expect(host).toBeTruthy();
+    expect(host.textContent).toContain('Choose file...');
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    const input = host.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input.disabled).toBe(true);
+  });
+});

package/src/lib/file-input/file-input.component.ts

@@ -0,0 +1,155 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+  ElementRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import {
+  fileInputVariants,
+  type FileInputVariant,
+  type FileInputSize,
+} from './file-input.variants';
+
+@Component({
+  selector: 'sny-file-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': '"w-full"',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyFileInputComponent), multi: true },
+  ],
+  template: `
+    <label
+      [class]="labelClass()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="placeholder()"
+        [attr.aria-invalid]="variant() === 'error' || null"
+        (change)="onFileSelected($event)"
+        (blur)="onTouched()"
+      />
+      <span class="truncate text-muted-foreground">{{ fileName() }}</span>
+    </label>
+  `,
+})
+export class SnyFileInputComponent implements ControlValueAccessor {
+  readonly accept = input('');
+  readonly multiple = input(false);
+  readonly disabled = input(false);
+  readonly placeholder = input('Choose file...');
+  readonly variant = input<FileInputVariant>('default');
+  readonly size = input<FileInputSize>('md');
+  readonly maxSize = input(0);
+  readonly class = input<string>('');
+
+  readonly value = model<FileList | null>(null);
+  readonly fileChange = output<FileList>();
+  readonly error = output<string>();
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');
+  readonly isDragOver = signal(false);
+
+  private _onChange: (value: FileList | null) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(val: FileList | null): void {
+    this.value.set(val ?? null);
+  }
+
+  registerOnChange(fn: (value: FileList | null) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  readonly fileName = computed(() => {
+    const files = this.value();
+    if (!files || files.length === 0) return this.placeholder();
+    if (files.length === 1) return files[0].name;
+    return `${files.length} files selected`;
+  });
+
+  protected readonly labelClass = computed(() =>
+    cn(
+      fileInputVariants({ variant: this.variant(), size: this.size() }),
+      this.isDragOver() && 'ring-2 ring-ring',
+      this.class()
+    )
+  );
+
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files) {
+      this.processFiles(input.files);
+    }
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    if (!this.isDisabled()) {
+      this.isDragOver.set(true);
+    }
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver.set(false);
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver.set(false);
+    if (!this.isDisabled() && event.dataTransfer?.files) {
+      this.processFiles(event.dataTransfer.files);
+    }
+  }
+
+  clear(): void {
+    this.value.set(null);
+    this._onChange(null);
+    const inputEl = this.fileInputRef()?.nativeElement;
+    if (inputEl) inputEl.value = '';
+  }
+
+  private processFiles(files: FileList): void {
+    const maxSize = this.maxSize();
+    if (maxSize > 0) {
+      for (let i = 0; i < files.length; i++) {
+        if (files[i].size > maxSize) {
+          this.error.emit(`File "${files[i].name}" exceeds maximum size of ${maxSize} bytes`);
+          return;
+        }
+      }
+    }
+    this.value.set(files);
+    this._onChange(files);
+    this.fileChange.emit(files);
+  }
+}

package/src/lib/file-input/file-input.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const fileInputVariants = cva(
+  'flex w-full cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium 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: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      size: {
+        sm: 'h-8 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-12 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type FileInputVariant = 'default' | 'error';
+export type FileInputSize = 'sm' | 'md' | 'lg';

package/src/lib/file-input/index.ts

@@ -0,0 +1,6 @@
+export { SnyFileInputComponent } from './file-input.component';
+export {
+  fileInputVariants,
+  type FileInputVariant,
+  type FileInputSize,
+} from './file-input.variants';

package/src/lib/indicator/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyIndicatorDirective,
+  SnyIndicatorBadgeDirective,
+  type IndicatorPosition,
+  type IndicatorVariant,
+} from './indicator.directives';

package/src/lib/indicator/indicator.directives.spec.ts

@@ -0,0 +1,64 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyIndicatorDirective, SnyIndicatorBadgeDirective, type IndicatorPosition, type IndicatorVariant } from './indicator.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyIndicatorDirective, SnyIndicatorBadgeDirective],
+  template: `
+    <div snyIndicator>
+      <span snyIndicatorBadge [position]="position()" [variant]="variant()" [ariaLabel]="badgeLabel()">5</span>
+      <div>Content</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  position = signal<IndicatorPosition>('top-end');
+  variant = signal<IndicatorVariant>('default');
+  badgeLabel = signal('');
+}
+
+describe('SnyIndicatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render indicator container', () => {
+    const el = fixture.nativeElement.querySelector('[snyIndicator]');
+    expect(el.className).toContain('relative');
+    expect(el.className).toContain('inline-flex');
+  });
+
+  it('should position badge at top-end by default', () => {
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('top-0');
+    expect(badge.className).toContain('right-0');
+  });
+
+  it('should change position', () => {
+    fixture.componentInstance.position.set('bottom-start');
+    fixture.detectChanges();
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('bottom-0');
+    expect(badge.className).toContain('left-0');
+  });
+
+  it('should apply error variant', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('bg-destructive');
+  });
+
+  it('should set aria-label on badge when ariaLabel input is provided', () => {
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.getAttribute('aria-label')).toBeNull();
+    fixture.componentInstance.badgeLabel.set('5 notifications');
+    fixture.detectChanges();
+    expect(badge.getAttribute('aria-label')).toBe('5 notifications');
+  });
+});

package/src/lib/indicator/indicator.directives.ts

@@ -0,0 +1,59 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type IndicatorPosition = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export type IndicatorVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+
+const positionMap: Record<IndicatorPosition, string> = {
+  'top-start': 'top-0 left-0 -translate-x-1/2 -translate-y-1/2',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2',
+  'top-end': 'top-0 right-0 translate-x-1/2 -translate-y-1/2',
+  'middle-start': 'top-1/2 left-0 -translate-x-1/2 -translate-y-1/2',
+  'middle-end': 'top-1/2 right-0 translate-x-1/2 -translate-y-1/2',
+  'bottom-start': 'bottom-0 left-0 -translate-x-1/2 translate-y-1/2',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+  'bottom-end': 'bottom-0 right-0 translate-x-1/2 translate-y-1/2',
+};
+
+const variantMap: Record<IndicatorVariant, string> = {
+  default: 'bg-primary text-primary-foreground',
+  primary: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  success: 'bg-green-600 text-white dark:bg-green-500',
+  warning: 'bg-yellow-500 text-white dark:bg-yellow-400 dark:text-black',
+  error: 'bg-destructive text-destructive-foreground',
+};
+
+@Directive({
+  selector: '[snyIndicator]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyIndicatorDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('relative inline-flex', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyIndicatorBadge]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-label]': 'ariaLabel() || null',
+  },
+})
+export class SnyIndicatorBadgeDirective {
+  readonly position = input<IndicatorPosition>('top-end');
+  readonly variant = input<IndicatorVariant>('default');
+  readonly ariaLabel = input<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute z-10 inline-flex items-center justify-center rounded-full text-xs font-bold min-w-[1.25rem] h-5 px-1',
+      positionMap[this.position()],
+      variantMap[this.variant()],
+      this.class()
+    )
+  );
+}

package/src/lib/input/index.ts

@@ -0,0 +1,3 @@
+export { SnyInputDirective } from './input.directive';
+export { SnyLabelDirective } from './label.directive';
+export { inputVariants, labelVariants, type InputVariant, type InputSize } from './input.variants';

package/src/lib/input/input.directive.spec.ts

@@ -0,0 +1,103 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyInputDirective } from './input.directive';
+import { SnyLabelDirective } from './label.directive';
+import type { InputVariant, InputSize } from './input.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyInputDirective, SnyLabelDirective],
+  template: `
+    <label snyLabel [variant]="variant()">Name</label>
+    <input snyInput [variant]="variant()" [inputSize]="inputSize()" [ariaDescribedBy]="describedBy()" />
+  `,
+})
+class TestHostComponent {
+  variant = signal<InputVariant>('default');
+  inputSize = signal<InputSize>('md');
+  describedBy = signal('');
+}
+
+describe('SnyInputDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let input: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    input = fixture.nativeElement.querySelector('input');
+  });
+
+  it('should apply default input classes', () => {
+    expect(input.className).toContain('border-input');
+    expect(input.className).toContain('h-10');
+  });
+
+  it('should apply error variant', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-destructive');
+  });
+
+  it('should set aria-invalid on error', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('should not set aria-invalid on default', () => {
+    expect(input.getAttribute('aria-invalid')).toBeNull();
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-green-500');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.inputSize.set('sm');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-9');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.inputSize.set('lg');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-11');
+  });
+
+  it('should set aria-describedby', () => {
+    fixture.componentInstance.describedBy.set('help-text');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-describedby')).toBe('help-text');
+  });
+});
+
+describe('SnyLabelDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let label: HTMLLabelElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    label = fixture.nativeElement.querySelector('label');
+  });
+
+  it('should apply label classes', () => {
+    expect(label.className).toContain('text-sm');
+    expect(label.className).toContain('font-medium');
+  });
+
+  it('should apply error variant to label', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(label.className).toContain('text-destructive');
+  });
+});