@sonny-ui/core 0.1.0-alpha.1 → 0.1.0-alpha.11

package/src/lib/dropdown/dropdown.directives.ts

@@ -0,0 +1,143 @@
+import { Directive, ElementRef, HostListener, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  dropdownContentVariants,
+  dropdownItemVariants,
+  type DropdownItemVariant,
+} from './dropdown.variants';
+
+export const SNY_DROPDOWN = new InjectionToken<SnyDropdownDirective>('SnyDropdown');
+
+@Directive({
+  selector: '[snyDropdown]',
+  standalone: true,
+  exportAs: 'snyDropdown',
+  providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
+  host: {
+    '[class]': '"relative inline-block"',
+  },
+})
+export class SnyDropdownDirective {
+  private readonly elementRef = inject(ElementRef);
+  readonly isOpen = signal(false);
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  @HostListener('keydown.escape')
+  onEscape(): void {
+    this.close();
+  }
+}
+
+@Directive({
+  selector: '[snyDropdownTrigger]',
+  standalone: true,
+  host: {
+    '(click)': 'dropdown.toggle()',
+    '[attr.aria-expanded]': 'dropdown.isOpen()',
+    '[attr.aria-haspopup]': '"menu"',
+  },
+})
+export class SnyDropdownTriggerDirective {
+  readonly dropdown = inject(SNY_DROPDOWN);
+}
+
+@Directive({
+  selector: '[snyDropdownContent]',
+  standalone: true,
+  host: {
+    'role': 'menu',
+    '[class]': 'computedClass()',
+    '[style.display]': 'dropdown.isOpen() ? "" : "none"',
+  },
+})
+export class SnyDropdownContentDirective {
+  readonly dropdown = inject(SNY_DROPDOWN);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      dropdownContentVariants(),
+      'absolute mt-1 left-0 animate-in fade-in-0 zoom-in-95',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyMenuContent]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuContentDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(dropdownContentVariants(), this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyMenuItem]',
+  standalone: true,
+  host: {
+    'role': 'menuitem',
+    '[class]': 'computedClass()',
+    '(click)': 'onClick()',
+  },
+})
+export class SnyMenuItemDirective {
+  private readonly dropdown = inject(SNY_DROPDOWN, { optional: true });
+  readonly variant = input<DropdownItemVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(dropdownItemVariants({ variant: this.variant() }), 'cursor-pointer hover:bg-accent hover:text-accent-foreground', this.class())
+  );
+
+  onClick(): void {
+    this.dropdown?.close();
+  }
+}
+
+@Directive({
+  selector: '[snyMenuSeparator]',
+  standalone: true,
+  host: {
+    'role': 'separator',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuSeparatorDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('-mx-1 my-1 h-px bg-muted', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyMenuLabel]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuLabelDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('px-2 py-1.5 text-sm font-semibold', this.class())
+  );
+}

package/src/lib/dropdown/dropdown.variants.ts

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+
+export const dropdownContentVariants = cva(
+  'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);
+
+export const dropdownItemVariants = cva(
+  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[active]:bg-accent data-[active]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: '',
+        destructive:
+          'text-destructive data-[active]:bg-destructive/10 data-[active]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type DropdownItemVariant = 'default' | 'destructive';

package/src/lib/dropdown/index.ts

@@ -0,0 +1,15 @@
+export {
+  SnyDropdownDirective,
+  SnyDropdownTriggerDirective,
+  SnyDropdownContentDirective,
+  SnyMenuContentDirective,
+  SnyMenuItemDirective,
+  SnyMenuSeparatorDirective,
+  SnyMenuLabelDirective,
+  SNY_DROPDOWN,
+} from './dropdown.directives';
+export {
+  dropdownContentVariants,
+  dropdownItemVariants,
+  type DropdownItemVariant,
+} from './dropdown.variants';

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

@@ -0,0 +1,60 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyFabDirective, SnyFabTriggerDirective, SnyFabActionDirective } from './fab.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyFabDirective, SnyFabTriggerDirective, SnyFabActionDirective],
+  template: `
+    <div snyFab>
+      <button snyFabAction ariaLabel="Edit item">Action 1</button>
+      <button snyFabAction>Action 2</button>
+      <button snyFabTrigger>+</button>
+    </div>
+  `,
+})
+class TestHostComponent {
+  fab = viewChild(SnyFabDirective);
+}
+
+describe('SnyFabDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should be closed by default', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.className).toContain('scale-0'));
+  });
+
+  it('should open on trigger click', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyFabTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.className).toContain('scale-100'));
+  });
+
+  it('should have aria-expanded on trigger', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyFabTrigger]');
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have menuitem role on actions', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.getAttribute('role')).toBe('menuitem'));
+  });
+
+  it('should set aria-label on action when ariaLabel input is provided', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    expect(actions[0].getAttribute('aria-label')).toBe('Edit item');
+    expect(actions[1].getAttribute('aria-label')).toBeNull();
+  });
+});

package/src/lib/fab/fab.directives.ts

@@ -0,0 +1,80 @@
+import { Directive, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_FAB = new InjectionToken<SnyFabDirective>('SnyFab');
+export type FabPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export type FabDirection = 'up' | 'down' | 'left' | 'right';
+
+const positionMap: Record<FabPosition, string> = {
+  'bottom-right': 'fixed bottom-6 right-6',
+  'bottom-left': 'fixed bottom-6 left-6',
+  'top-right': 'fixed top-6 right-6',
+  'top-left': 'fixed top-6 left-6',
+};
+
+@Directive({
+  selector: '[snyFab]',
+  standalone: true,
+  exportAs: 'snyFab',
+  providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyFabDirective {
+  readonly position = input<FabPosition>('bottom-right');
+  readonly direction = input<FabDirection>('up');
+  readonly class = input<string>('');
+  readonly isOpen = signal(false);
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+
+  protected readonly computedClass = computed(() =>
+    cn('z-50 flex flex-col items-center gap-2', positionMap[this.position()], this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyFabTrigger]',
+  standalone: true,
+  host: {
+    '(click)': 'fab.toggle()',
+    '[attr.aria-expanded]': 'fab.isOpen()',
+    '[attr.aria-haspopup]': '"menu"',
+    'aria-label': 'Quick actions',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFabTriggerDirective {
+  readonly fab = inject(SNY_FAB);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg h-14 w-14 hover:bg-primary/90 transition-transform',
+      this.fab.isOpen() && 'rotate-45',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyFabAction]',
+  standalone: true,
+  host: {
+    'role': 'menuitem',
+    '[attr.aria-label]': 'ariaLabel() || null',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFabActionDirective {
+  readonly fab = inject(SNY_FAB);
+  readonly ariaLabel = input<string>('');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-secondary text-secondary-foreground shadow-md h-10 w-10 transition-all',
+      this.fab.isOpen() ? 'scale-100 opacity-100' : 'scale-0 opacity-0',
+      this.class()
+    )
+  );
+}

package/src/lib/fab/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyFabDirective,
+  SnyFabTriggerDirective,
+  SnyFabActionDirective,
+  SNY_FAB,
+  type FabPosition,
+  type FabDirection,
+} from './fab.directives';

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,52 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { fieldsetVariants, type FieldsetVariant } from './fieldset.variants';
+
+@Directive({
+  selector: 'fieldset[snyFieldset]',
+  standalone: true,
+  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]',
+  standalone: true,
+  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]',
+  standalone: true,
+  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);
+  });
+});