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

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

@@ -0,0 +1,136 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyTabsDirective,
+  SnyTabsListDirective,
+  SnyTabsTriggerDirective,
+  SnyTabsContentDirective,
+} from './tabs.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTabsContentDirective],
+  template: `
+    <div snyTabs [(value)]="activeTab">
+      <div snyTabsList>
+        <button snyTabsTrigger value="tab1">Tab 1</button>
+        <button snyTabsTrigger value="tab2">Tab 2</button>
+      </div>
+      <div snyTabsContent value="tab1">Content 1</div>
+      <div snyTabsContent value="tab2">Content 2</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  activeTab = signal('tab1');
+}
+
+describe('Tabs Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should show active tab content', () => {
+    const contents = fixture.nativeElement.querySelectorAll('[role="tabpanel"]');
+    expect(contents[0].style.display).not.toBe('none');
+    expect(contents[1].style.display).toBe('none');
+  });
+
+  it('should set aria-selected on active trigger', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(triggers[0].getAttribute('aria-selected')).toBe('true');
+    expect(triggers[1].getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('should switch tabs on click', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    triggers[1].click();
+    fixture.detectChanges();
+    const contents = fixture.nativeElement.querySelectorAll('[role="tabpanel"]');
+    expect(contents[0].style.display).toBe('none');
+    expect(contents[1].style.display).not.toBe('none');
+  });
+
+  it('should have tablist role', () => {
+    const list = fixture.nativeElement.querySelector('[role="tablist"]');
+    expect(list).toBeTruthy();
+    expect(list.className).toContain('bg-muted');
+  });
+
+  it('should implement roving tabindex on triggers', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(triggers[0].getAttribute('tabindex')).toBe('0');
+    expect(triggers[1].getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('should move focus with ArrowRight', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[1]);
+  });
+
+  it('should move focus with ArrowLeft', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[0]);
+  });
+
+  it('should move focus to first with Home', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[0]);
+  });
+
+  it('should move focus to last with End', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    const updatedTriggers = fixture.nativeElement.querySelectorAll('[role="tab"]');
+    expect(document.activeElement).toBe(updatedTriggers[1]);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTabsContentDirective],
+  template: `
+    <div snyTabs #t="snyTabs" [(value)]="activeTab">
+      <div snyTabsList>
+        <button snyTabsTrigger value="tab1">Tab 1</button>
+      </div>
+      <div snyTabsContent value="tab1">Content 1</div>
+    </div>
+  `,
+})
+class ExportAsHost {
+  activeTab = signal('tab1');
+  tabs = viewChild<SnyTabsDirective>('t');
+}
+
+describe('Tabs exportAs', () => {
+  it('should expose snyTabs via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.tabs();
+    expect(ref).toBeTruthy();
+    expect(ref!.value()).toBe('tab1');
+  });
+});

package/src/lib/tabs/tabs.directives.ts

@@ -0,0 +1,130 @@
+import { Directive, ElementRef, computed, inject, input, model, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_TABS = new InjectionToken<SnyTabsDirective>('SnyTabs');
+
+@Directive({
+  selector: '[snyTabs]',
+  standalone: true,
+  exportAs: 'snyTabs',
+  providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTabsDirective {
+  readonly value = model<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('', this.class())
+  );
+
+  select(value: string): void {
+    this.value.set(value);
+  }
+}
+
+@Directive({
+  selector: '[snyTabsList]',
+  standalone: true,
+  host: {
+    role: 'tablist',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyTabsListDirective {
+  readonly class = input<string>('');
+  private readonly elRef = inject(ElementRef);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground',
+      this.class()
+    )
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    const triggers = Array.from(
+      (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('[role="tab"]')
+    );
+    if (triggers.length === 0) return;
+
+    const currentIndex = triggers.indexOf(document.activeElement as HTMLElement);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number | null = null;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      triggers[nextIndex].focus();
+    }
+  }
+}
+
+@Directive({
+  selector: '[snyTabsTrigger]',
+  standalone: true,
+  host: {
+    role: 'tab',
+    '[class]': 'computedClass()',
+    '[attr.aria-selected]': 'isActive()',
+    '[attr.tabindex]': 'isActive() ? 0 : -1',
+    '(click)': 'tabs.select(value())',
+  },
+})
+export class SnyTabsTriggerDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  readonly tabs = inject(SNY_TABS);
+
+  readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
+      this.isActive()
+        ? 'bg-background text-foreground shadow-sm'
+        : 'hover:bg-background/50',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyTabsContent]',
+  standalone: true,
+  host: {
+    role: 'tabpanel',
+    '[class]': 'computedClass()',
+    '[style.display]': 'isActive() ? null : "none"',
+  },
+})
+export class SnyTabsContentDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  private readonly tabs = inject(SNY_TABS);
+
+  readonly isActive = computed(() => this.tabs.value() === this.value());
+
+  protected readonly computedClass = computed(() =>
+    cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', this.class())
+  );
+}

package/src/lib/tabs/tabs.variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const tabsListVariants = cva(
+  'inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);
+
+export const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all 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: {},
+    defaultVariants: {},
+  }
+);

package/src/lib/textarea/index.ts

@@ -0,0 +1,7 @@
+export { SnyTextareaDirective } from './textarea.directive';
+export {
+  textareaVariants,
+  type TextareaVariant,
+  type TextareaSize,
+  type TextareaResize,
+} from './textarea.variants';

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,72 @@
+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]',
+  standalone: true,
+  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,90 @@
+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]',
+  standalone: true,
+  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]',
+  standalone: true,
+  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]',
+  standalone: true,
+  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]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTimelineEndDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 pb-8', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyTimeline]',
+  standalone: true,
+  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';