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

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

@@ -0,0 +1,111 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyTableDirective,
+  SnyTableHeaderDirective,
+  SnyTableBodyDirective,
+  SnyTableRowDirective,
+  SnyTableHeadDirective,
+  SnyTableCellDirective,
+  SnyTableFooterDirective,
+  SnyTableCaptionDirective,
+} from './table.directives';
+import type { TableVariant, TableDensity } from './table.variants';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyTableDirective, SnyTableHeaderDirective, SnyTableBodyDirective,
+    SnyTableRowDirective, SnyTableHeadDirective, SnyTableCellDirective,
+    SnyTableFooterDirective, SnyTableCaptionDirective,
+  ],
+  template: `
+    <table snyTable [variant]="variant()" [density]="density()" [hoverable]="hoverable()" [stickyHeader]="stickyHeader()">
+      <caption snyTableCaption>Test table</caption>
+      <thead snyTableHeader>
+        <tr snyTableRow>
+          <th snyTableHead>Name</th>
+          <th snyTableHead>Value</th>
+        </tr>
+      </thead>
+      <tbody snyTableBody>
+        <tr snyTableRow>
+          <td snyTableCell>A</td>
+          <td snyTableCell>1</td>
+        </tr>
+      </tbody>
+      <tfoot snyTableFooter>
+        <tr snyTableRow>
+          <td snyTableCell>Total</td>
+          <td snyTableCell>1</td>
+        </tr>
+      </tfoot>
+    </table>
+  `,
+})
+class TestHostComponent {
+  variant = signal<TableVariant>('default');
+  density = signal<TableDensity>('normal');
+  hoverable = signal(false);
+  stickyHeader = signal(false);
+}
+
+describe('Table Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let table: HTMLTableElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    table = fixture.nativeElement.querySelector('table');
+  });
+
+  it('should apply base table classes', () => {
+    expect(table.className).toContain('w-full');
+    expect(table.className).toContain('caption-bottom');
+  });
+
+  it('should apply striped variant', () => {
+    fixture.componentInstance.variant.set('striped');
+    fixture.detectChanges();
+    expect(table.className).toContain('nth-child');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    expect(table.className).toContain('border');
+  });
+
+  it('should apply compact density to cells', () => {
+    fixture.componentInstance.density.set('compact');
+    fixture.detectChanges();
+    const th = fixture.nativeElement.querySelector('th');
+    expect(th.className).toContain('px-2');
+    expect(th.className).toContain('text-xs');
+  });
+
+  it('should apply hoverable to rows', () => {
+    fixture.componentInstance.hoverable.set(true);
+    fixture.detectChanges();
+    const row = fixture.nativeElement.querySelector('tbody tr');
+    expect(row.className).toContain('hover:bg-muted/50');
+  });
+
+  it('should apply sticky header', () => {
+    fixture.componentInstance.stickyHeader.set(true);
+    fixture.detectChanges();
+    const thead = fixture.nativeElement.querySelector('thead');
+    expect(thead.className).toContain('sticky');
+  });
+
+  it('should render caption', () => {
+    const caption = fixture.nativeElement.querySelector('caption');
+    expect(caption.className).toContain('text-muted-foreground');
+    expect(caption.textContent).toContain('Test table');
+  });
+});

package/src/lib/table/table.directives.ts

@@ -0,0 +1,134 @@
+import { Directive, computed, inject, input, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { tableVariants, tableCellVariants, type TableVariant, type TableDensity } from './table.variants';
+
+export const SNY_TABLE = new InjectionToken<SnyTableDirective>('SnyTable');
+
+@Directive({
+  selector: 'table[snyTable]',
+  standalone: true,
+  providers: [{ provide: SNY_TABLE, useExisting: SnyTableDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableDirective {
+  readonly variant = input<TableVariant>('default');
+  readonly density = input<TableDensity>('normal');
+  readonly hoverable = input(false);
+  readonly stickyHeader = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(tableVariants({ variant: this.variant() }), this.class())
+  );
+}
+
+@Directive({
+  selector: 'thead[snyTableHeader]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableHeaderDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      '[&_tr]:border-b',
+      this.table?.stickyHeader() ? 'sticky top-0 z-10 bg-background' : '',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'tbody[snyTableBody]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableBodyDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('[&_tr:last-child]:border-0', this.class())
+  );
+}
+
+@Directive({
+  selector: 'tr[snyTableRow]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableRowDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'border-b border-border transition-colors data-[state=selected]:bg-muted',
+      this.table?.hoverable() ? 'hover:bg-muted/50' : '',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'th[snyTableHead]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableHeadDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-left font-medium text-muted-foreground [&[align=center]]:text-center [&[align=right]]:text-right',
+      tableCellVariants({ density: this.table?.density() ?? 'normal' }),
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'td[snyTableCell]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableCellDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      '[&[align=center]]:text-center [&[align=right]]:text-right',
+      tableCellVariants({ density: this.table?.density() ?? 'normal' }),
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'tfoot[snyTableFooter]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableFooterDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('border-t border-border font-medium [&>tr]:last:border-b-0', this.class())
+  );
+}
+
+@Directive({
+  selector: 'caption[snyTableCaption]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableCaptionDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('mt-4 text-sm text-muted-foreground', this.class())
+  );
+}

package/src/lib/table/table.variants.ts

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+export const tableVariants = cva(
+  'w-full caption-bottom text-sm border-collapse',
+  {
+    variants: {
+      variant: {
+        default: '',
+        striped: '[&_tbody_tr:nth-child(even)]:bg-muted/50',
+        bordered: 'border border-border [&_th]:border [&_th]:border-border [&_td]:border [&_td]:border-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export const tableCellVariants = cva(
+  '',
+  {
+    variants: {
+      density: {
+        compact: 'px-2 py-1 text-xs',
+        normal: 'px-4 py-3 text-sm',
+        comfortable: 'px-6 py-4 text-base',
+      },
+    },
+    defaultVariants: {
+      density: 'normal',
+    },
+  }
+);
+
+export type TableVariant = 'default' | 'striped' | 'bordered';
+export type TableDensity = 'compact' | 'normal' | 'comfortable';

package/src/lib/tabs/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyTabsDirective,
+  SnyTabsListDirective,
+  SnyTabsTriggerDirective,
+  SnyTabsContentDirective,
+  SNY_TABS,
+} from './tabs.directives';
+export { tabsListVariants, tabsTriggerVariants } from './tabs.variants';

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');
+  });
+});