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

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

@@ -0,0 +1,84 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTextareaDirective } from './textarea.directive';
+import type { TextareaVariant, TextareaSize, TextareaResize } from './textarea.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyTextareaDirective],
+  template: `
+    <textarea
+      snyTextarea
+      [variant]="variant()"
+      [textareaSize]="textareaSize()"
+      [resize]="resize()"
+      [autoResize]="autoResize()"
+    ></textarea>
+  `,
+})
+class TestHostComponent {
+  variant = signal<TextareaVariant>('default');
+  textareaSize = signal<TextareaSize>('md');
+  resize = signal<TextareaResize>('vertical');
+  autoResize = signal(false);
+}
+
+describe('SnyTextareaDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLTextAreaElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('textarea');
+  });
+
+  it('should apply default variant classes', () => {
+    expect(el.className).toContain('border-input');
+    expect(el.className).toContain('rounded-md');
+  });
+
+  it('should apply error variant classes', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(el.className).toContain('border-destructive');
+  });
+
+  it('should set aria-invalid for error variant', () => {
+    expect(el.getAttribute('aria-invalid')).toBeNull();
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('should apply small size', () => {
+    fixture.componentInstance.textareaSize.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-xs');
+  });
+
+  it('should apply large size', () => {
+    fixture.componentInstance.textareaSize.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-base');
+  });
+
+  it('should apply resize-none when resize is "none"', () => {
+    fixture.componentInstance.resize.set('none');
+    fixture.detectChanges();
+    expect(el.className).toContain('resize-none');
+  });
+
+  it('should apply resize-y by default', () => {
+    expect(el.className).toContain('resize-y');
+  });
+
+  it('should force resize-none when autoResize is true', () => {
+    fixture.componentInstance.autoResize.set(true);
+    fixture.detectChanges();
+    expect(el.className).toContain('resize-none');
+  });
+});

package/src/lib/textarea/textarea.directive.ts

@@ -0,0 +1,71 @@
+import {
+  Directive,
+  computed,
+  input,
+  effect,
+  inject,
+  ElementRef,
+  afterNextRender,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  textareaVariants,
+  type TextareaVariant,
+  type TextareaSize,
+  type TextareaResize,
+} from './textarea.variants';
+
+@Directive({
+  selector: 'textarea[snyTextarea]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-invalid]': 'variant() === "error" || null',
+    '(input)': 'onInput()',
+  },
+})
+export class SnyTextareaDirective {
+  readonly variant = input<TextareaVariant>('default');
+  readonly textareaSize = input<TextareaSize>('md');
+  readonly resize = input<TextareaResize>('vertical');
+  readonly autoResize = input(false);
+  readonly class = input<string>('');
+
+  private readonly el = inject(ElementRef<HTMLTextAreaElement>);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      textareaVariants({
+        variant: this.variant(),
+        textareaSize: this.textareaSize(),
+        resize: this.autoResize() ? 'none' : this.resize(),
+      }),
+      this.class()
+    )
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      if (this.autoResize()) {
+        this.adjustHeight();
+      }
+    });
+
+    effect(() => {
+      if (this.autoResize()) {
+        this.adjustHeight();
+      }
+    });
+  }
+
+  protected onInput(): void {
+    if (this.autoResize()) {
+      this.adjustHeight();
+    }
+  }
+
+  private adjustHeight(): void {
+    const textarea = this.el.nativeElement;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }
+}

package/src/lib/textarea/textarea.variants.ts

@@ -0,0 +1,34 @@
+import { cva } from 'class-variance-authority';
+
+export const textareaVariants = cva(
+  'flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background 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 text-destructive placeholder:text-destructive/60',
+      },
+      textareaSize: {
+        sm: 'min-h-[60px] text-xs',
+        md: 'min-h-[80px] text-sm',
+        lg: 'min-h-[120px] text-base',
+      },
+      resize: {
+        none: 'resize-none',
+        vertical: 'resize-y',
+        horizontal: 'resize-x',
+        both: 'resize',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      textareaSize: 'md',
+      resize: 'vertical',
+    },
+  }
+);
+
+export type TextareaVariant = 'default' | 'error';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';

package/src/lib/timeline/index.ts

@@ -0,0 +1,11 @@
+export {
+  SnyTimelineDirective,
+  SnyTimelineItemDirective,
+  SnyTimelineStartDirective,
+  SnyTimelineMiddleDirective,
+  SnyTimelineEndDirective,
+  SNY_TIMELINE,
+  type TimelineOrientation,
+  type TimelineConnect,
+  type TimelineMiddleVariant,
+} from './timeline.directives';

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

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyTimelineDirective,
+  SnyTimelineItemDirective,
+  SnyTimelineStartDirective,
+  SnyTimelineMiddleDirective,
+  SnyTimelineEndDirective,
+} from './timeline.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyTimelineDirective, SnyTimelineItemDirective, SnyTimelineStartDirective, SnyTimelineMiddleDirective, SnyTimelineEndDirective],
+  template: `
+    <div snyTimeline>
+      <div snyTimelineItem>
+        <div snyTimelineStart>2024</div>
+        <div snyTimelineMiddle variant="primary"></div>
+        <div snyTimelineEnd>Event 1</div>
+      </div>
+      <div snyTimelineItem>
+        <div snyTimelineStart>2025</div>
+        <div snyTimelineMiddle></div>
+        <div snyTimelineEnd>Event 2</div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {}
+
+describe('SnyTimelineDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with list role', () => {
+    const timeline = fixture.nativeElement.querySelector('[snyTimeline]');
+    expect(timeline.getAttribute('role')).toBe('list');
+  });
+
+  it('should render items with listitem role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyTimelineItem]');
+    expect(items.length).toBe(2);
+    expect(items[0].getAttribute('role')).toBe('listitem');
+  });
+
+  it('should mark middle as aria-hidden', () => {
+    const middles = fixture.nativeElement.querySelectorAll('[snyTimelineMiddle]');
+    expect(middles[0].getAttribute('aria-hidden')).toBe('true');
+  });
+});

package/src/lib/timeline/timeline.directives.ts

@@ -0,0 +1,85 @@
+import { Directive, InjectionToken, computed, contentChildren, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_TIMELINE = new InjectionToken<SnyTimelineDirective>('SnyTimeline');
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineConnect = 'start' | 'end' | 'both' | 'none';
+export type TimelineMiddleVariant = 'default' | 'primary' | 'success' | 'error';
+
+@Directive({
+  selector: '[snyTimelineItem]',
+  host: { 'role': 'listitem', '[class]': 'computedClass()' },
+})
+export class SnyTimelineItemDirective {
+  readonly connect = input<TimelineConnect>('both');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('relative flex gap-4', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyTimelineStart]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTimelineStartDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground min-w-[80px] text-right', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyTimelineMiddle]',
+  host: { '[class]': 'computedClass()', 'aria-hidden': 'true' },
+})
+export class SnyTimelineMiddleDirective {
+  readonly variant = input<TimelineMiddleVariant>('default');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'primary' ? 'bg-primary' :
+      v === 'success' ? 'bg-green-600 dark:bg-green-500' :
+      v === 'error' ? 'bg-destructive' :
+      'bg-border';
+    return cn('flex flex-col items-center', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyTimelineEnd]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTimelineEndDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 pb-8', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyTimeline]',
+  exportAs: 'snyTimeline',
+  providers: [{ provide: SNY_TIMELINE, useExisting: SnyTimelineDirective }],
+  host: {
+    'role': 'list',
+    'aria-label': 'Timeline',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyTimelineDirective {
+  readonly orientation = input<TimelineOrientation>('vertical');
+  readonly class = input<string>('');
+
+  readonly items = contentChildren(SnyTimelineItemDirective);
+
+  protected readonly computedClass = computed(() => {
+    const o = this.orientation();
+    return cn(
+      'relative',
+      o === 'vertical' ? 'flex flex-col' : 'flex flex-row',
+      this.class()
+    );
+  });
+}

package/src/lib/toast/index.ts

@@ -0,0 +1,3 @@
+export { SnyToastService } from './toast.service';
+export { SnyToasterComponent } from './toaster.component';
+export { toastVariants, type ToastVariant, type ToastPosition, type ToastConfig, type ToastData, type ToastAction } from './toast.variants';

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,81 @@
+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',
+  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';