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

package/src/lib/toast/toast.service.spec.ts

@@ -0,0 +1,71 @@
+import { TestBed } from '@angular/core/testing';
+import { SnyToastService } from './toast.service';
+
+describe('SnyToastService', () => {
+  let service: SnyToastService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SnyToastService);
+  });
+
+  it('should create a toast', () => {
+    const id = service.show({ title: 'Test', duration: 0 });
+    expect(id).toBeTruthy();
+    expect(service.toasts().length).toBe(1);
+    expect(service.toasts()[0].title).toBe('Test');
+  });
+
+  it('should create toast with variant', () => {
+    service.show({ title: 'Error', variant: 'destructive', duration: 0 });
+    expect(service.toasts()[0].variant).toBe('destructive');
+  });
+
+  it('should dismiss a toast', () => {
+    const id = service.show({ title: 'Test', duration: 0 });
+    service.dismiss(id);
+    expect(service.toasts().length).toBe(0);
+  });
+
+  it('should dismiss all toasts', () => {
+    service.show({ title: 'Test 1', duration: 0 });
+    service.show({ title: 'Test 2', duration: 0 });
+    expect(service.toasts().length).toBe(2);
+    service.dismissAll();
+    expect(service.toasts().length).toBe(0);
+  });
+
+  it('should auto-dismiss after duration', async () => {
+    service.show({ title: 'Test', duration: 50 });
+    expect(service.toasts().length).toBe(1);
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(service.toasts().length).toBe(0);
+  });
+
+  it('should provide success shortcut', () => {
+    service.success('Done', 'Task completed');
+    const toast = service.toasts()[0];
+    expect(toast.variant).toBe('success');
+    expect(toast.description).toBe('Task completed');
+    service.dismiss(toast.id);
+  });
+
+  it('should provide error shortcut', () => {
+    service.error('Failed');
+    expect(service.toasts()[0].variant).toBe('destructive');
+    service.dismissAll();
+  });
+
+  it('should provide warning shortcut', () => {
+    service.warning('Caution');
+    expect(service.toasts()[0].variant).toBe('warning');
+    service.dismissAll();
+  });
+
+  it('should track count', () => {
+    expect(service.count()).toBe(0);
+    service.show({ title: 'A', duration: 0 });
+    service.show({ title: 'B', duration: 0 });
+    expect(service.count()).toBe(2);
+  });
+});

package/src/lib/toast/toast.service.ts

@@ -0,0 +1,60 @@
+import { Injectable, signal, computed } from '@angular/core';
+import type { ToastConfig, ToastData } from './toast.variants';
+
+@Injectable({ providedIn: 'root' })
+export class SnyToastService {
+  private readonly _toasts = signal<ToastData[]>([]);
+  private readonly _timers = new Map<string, ReturnType<typeof setTimeout>>();
+  private _idCounter = 0;
+
+  readonly toasts = this._toasts.asReadonly();
+  readonly count = computed(() => this._toasts().length);
+
+  show(config: ToastConfig): string {
+    const id = `sny-toast-${++this._idCounter}`;
+    const toast: ToastData = {
+      id,
+      variant: 'default',
+      duration: 5000,
+      ...config,
+    };
+
+    this._toasts.update(toasts => [...toasts, toast]);
+
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => this.dismiss(id), toast.duration);
+      this._timers.set(id, timer);
+    }
+
+    return id;
+  }
+
+  dismiss(id: string): void {
+    const timer = this._timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this._timers.delete(id);
+    }
+    this._toasts.update(toasts => toasts.filter(t => t.id !== id));
+  }
+
+  dismissAll(): void {
+    for (const timer of this._timers.values()) {
+      clearTimeout(timer);
+    }
+    this._timers.clear();
+    this._toasts.set([]);
+  }
+
+  success(title: string, description?: string): string {
+    return this.show({ title, description, variant: 'success' });
+  }
+
+  error(title: string, description?: string): string {
+    return this.show({ title, description, variant: 'destructive' });
+  }
+
+  warning(title: string, description?: string): string {
+    return this.show({ title, description, variant: 'warning' });
+  }
+}

package/src/lib/toast/toast.variants.ts

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-sm border p-6 pr-8 shadow-lg transition-all',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background border-border text-foreground',
+        destructive: 'bg-destructive border-destructive text-destructive-foreground',
+        success: 'bg-green-600 border-green-600 text-white',
+        warning: 'bg-yellow-500 border-yellow-500 text-white',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastConfig {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: ToastAction;
+}
+
+export interface ToastData extends ToastConfig {
+  id: string;
+}

package/src/lib/toast/toaster.component.spec.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyToasterComponent } from './toaster.component';
+import { SnyToastService } from './toast.service';
+
+@Component({
+  standalone: true,
+  imports: [SnyToasterComponent],
+  template: `<sny-toaster />`,
+})
+class TestHostComponent {}
+
+describe('SnyToasterComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let service: SnyToastService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    service = TestBed.inject(SnyToastService);
+    fixture.detectChanges();
+  });
+
+  it('should render region with aria-label', () => {
+    const region = fixture.nativeElement.querySelector('[role="region"]');
+    expect(region).toBeTruthy();
+    expect(region.getAttribute('aria-label')).toBe('Notifications');
+  });
+
+  it('should render toast items with aria-atomic="true"', () => {
+    service.show({ title: 'Test toast' });
+    fixture.detectChanges();
+    const alert = fixture.nativeElement.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+    expect(alert.getAttribute('aria-atomic')).toBe('true');
+    expect(alert.getAttribute('aria-live')).toBe('polite');
+  });
+});

package/src/lib/toast/toaster.component.ts

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, inject, input, computed } from '@angular/core';
+import { SnyToastService } from './toast.service';
+import { toastVariants, type ToastPosition, type ToastVariant } from './toast.variants';
+import { cn } from '../core/utils/cn';
+
+@Component({
+  selector: 'sny-toaster',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div [class]="containerClass()" role="region" aria-label="Notifications" tabindex="-1">
+      @for (toast of visibleToasts(); track toast.id) {
+        <div
+          [class]="toastClasses[toast.variant ?? 'default']"
+          role="alert"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          <div class="grid gap-1">
+            <div class="text-sm font-semibold">{{ toast.title }}</div>
+            @if (toast.description) {
+              <div class="text-sm opacity-90">{{ toast.description }}</div>
+            }
+          </div>
+          <div class="flex items-center gap-2">
+            @if (toast.action) {
+              <button
+                class="inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary"
+                (click)="toast.action!.onClick()"
+              >
+                {{ toast.action!.label }}
+              </button>
+            }
+            <button
+              class="absolute right-2 top-2 rounded-sm p-1 opacity-0 transition-opacity hover:opacity-100 group-hover:opacity-100 focus:opacity-100"
+              aria-label="Close"
+              (click)="dismiss(toast.id)"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class SnyToasterComponent {
+  private readonly toastService = inject(SnyToastService);
+
+  readonly position = input<ToastPosition>('bottom-right');
+  readonly maxToasts = input(5);
+
+  readonly visibleToasts = computed(() =>
+    this.toastService.toasts().slice(-this.maxToasts())
+  );
+
+  readonly containerClass = computed(() => {
+    const pos = this.position();
+    const base = 'fixed z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:max-w-[420px]';
+    const posMap: Record<ToastPosition, string> = {
+      'top-right': 'top-0 right-0',
+      'top-left': 'top-0 left-0',
+      'bottom-right': 'bottom-0 right-0',
+      'bottom-left': 'bottom-0 left-0',
+      'top-center': 'top-0 left-1/2 -translate-x-1/2',
+      'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    };
+    return cn(base, posMap[pos]);
+  });
+
+  /** Pre-computed toast classes by variant — avoids method calls in the template. */
+  readonly toastClasses: Record<ToastVariant, string> = {
+    default: cn(toastVariants({ variant: 'default' })),
+    destructive: cn(toastVariants({ variant: 'destructive' })),
+    success: cn(toastVariants({ variant: 'success' })),
+    warning: cn(toastVariants({ variant: 'warning' })),
+  };
+
+  dismiss(id: string): void {
+    this.toastService.dismiss(id);
+  }
+}

package/src/lib/toggle/index.ts

@@ -0,0 +1,2 @@
+export { SnyToggleDirective } from './toggle.directive';
+export { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';

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

@@ -0,0 +1,100 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyToggleDirective } from './toggle.directive';
+import type { ToggleVariant, ToggleSize } from './toggle.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyToggleDirective],
+  template: `<button snyToggle [variant]="variant()" [size]="size()" [(pressed)]="pressed">Toggle</button>`,
+})
+class TestHostComponent {
+  variant = signal<ToggleVariant>('default');
+  size = signal<ToggleSize>('md');
+  pressed = signal(false);
+}
+
+describe('SnyToggleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should apply default classes', () => {
+    expect(button.className).toContain('inline-flex');
+    expect(button.className).toContain('rounded-sm');
+  });
+
+  it('should be unpressed by default', () => {
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('should toggle pressed on click', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+    expect(button.className).toContain('bg-accent');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(button.className).toContain('border');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyToggleDirective],
+  template: `<button snyToggle [formControl]="ctrl">Toggle</button>`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(false);
+}
+
+describe('SnyToggleDirective — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(true);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    button.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

package/src/lib/toggle/toggle.directive.ts

@@ -0,0 +1,73 @@
+import { Directive, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';
+
+@Directive({
+  selector: 'button[snyToggle]',
+  standalone: true,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
+  ],
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-pressed]': 'pressed()',
+    '[attr.disabled]': 'isDisabled() || null',
+    '(click)': 'toggle()',
+    '(blur)': 'onTouched()',
+  },
+})
+export class SnyToggleDirective implements ControlValueAccessor {
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('md');
+  readonly pressed = model(false);
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this._disabledByCva());
+
+  private _onChange: (value: boolean) => void = () => {};
+  protected onTouched: () => void = () => {};
+  private _writing = false;
+
+  constructor() {
+    effect(() => {
+      const val = this.pressed();
+      if (this._writing) {
+        this._writing = false;
+        return;
+      }
+      this._onChange(val);
+    });
+  }
+
+  writeValue(val: boolean): void {
+    this._writing = true;
+    this.pressed.set(val ?? false);
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  protected toggle(): void {
+    if (this.isDisabled()) return;
+    this.pressed.set(!this.pressed());
+  }
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      toggleVariants({ variant: this.variant(), size: this.size() }),
+      this.pressed() ? 'bg-accent text-accent-foreground' : '',
+      this.class()
+    )
+  );
+}

package/src/lib/toggle/toggle.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent hover:bg-muted hover:text-muted-foreground',
+        outline: 'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        sm: 'h-9 px-2.5',
+        md: 'h-10 px-3',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type ToggleVariant = 'default' | 'outline';
+export type ToggleSize = 'sm' | 'md' | 'lg';

package/src/lib/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { SnyTooltipDirective } from './tooltip.directive';
+export { tooltipVariants, type TooltipPosition } from './tooltip.variants';

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

@@ -0,0 +1,113 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTooltipDirective } from './tooltip.directive';
+import type { TooltipPosition } from './tooltip.variants';
+import { vi } from 'vitest';
+
+@Component({
+  standalone: true,
+  imports: [SnyTooltipDirective],
+  template: `
+    <button
+      [snyTooltip]="text()"
+      [tooltipPosition]="position()"
+      [tooltipDelay]="delay()"
+      [tooltipDisabled]="disabled()"
+    >
+      Hover me
+    </button>
+  `,
+})
+class TestHostComponent {
+  text = signal('Tooltip text');
+  position = signal<TooltipPosition>('top');
+  delay = signal(0);
+  disabled = signal(false);
+}
+
+describe('SnyTooltipDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.querySelectorAll('[role="tooltip"]').forEach((el) => el.remove());
+  });
+
+  it('should not show tooltip initially', () => {
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+    expect(button.getAttribute('aria-describedby')).toBeNull();
+  });
+
+  it('should show tooltip on mouseenter after delay', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    const tooltip = document.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip!.textContent).toBe('Tooltip text');
+  });
+
+  it('should hide tooltip on mouseleave', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new MouseEvent('mouseleave'));
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should set aria-describedby when visible', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    expect(button.getAttribute('aria-describedby')).toBeTruthy();
+  });
+
+  it('should not show when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should hide on Escape key', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should show on focus and hide on blur', () => {
+    button.dispatchEvent(new Event('focus'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+    expect(document.querySelector('[role="tooltip"]')).not.toBeNull();
+
+    button.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+});