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

package/src/lib/divider/divider.component.spec.ts

@@ -0,0 +1,48 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDividerComponent } from './divider.component';
+import type { DividerOrientation } from './divider.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyDividerComponent],
+  template: `<sny-divider [orientation]="orientation()" [label]="label()" />`,
+})
+class TestHostComponent {
+  orientation = signal<DividerOrientation>('horizontal');
+  label = signal('');
+}
+
+describe('SnyDividerComponent', () => {
+  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-divider');
+  });
+
+  it('should have separator role', () => {
+    expect(host.getAttribute('role')).toBe('separator');
+  });
+
+  it('should set aria-orientation', () => {
+    expect(host.getAttribute('aria-orientation')).toBe('horizontal');
+    fixture.componentInstance.orientation.set('vertical');
+    fixture.detectChanges();
+    expect(host.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('should render simple divider without label', () => {
+    const div = host.querySelector('div');
+    expect(div!.className).toContain('bg-border');
+  });
+
+  it('should render label when provided', () => {
+    fixture.componentInstance.label.set('OR');
+    fixture.detectChanges();
+    expect(host.textContent).toContain('OR');
+  });
+});

package/src/lib/divider/divider.component.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  dividerVariants,
+  type DividerOrientation,
+  type DividerVariant,
+} from './divider.variants';
+
+@Component({
+  selector: 'sny-divider',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'separator',
+    '[attr.aria-orientation]': 'orientation()',
+  },
+  template: `
+    @if (hasLabel()) {
+      <div [class]="labelContainerClass()">
+        <div [class]="lineClass()"></div>
+        <span class="px-2 text-xs text-muted-foreground">{{ label() }}</span>
+        <div [class]="lineClass()"></div>
+      </div>
+    } @else {
+      <div [class]="dividerClass()"></div>
+    }
+  `,
+})
+export class SnyDividerComponent {
+  readonly orientation = input<DividerOrientation>('horizontal');
+  readonly variant = input<DividerVariant>('solid');
+  readonly label = input<string>('');
+  readonly class = input<string>('');
+
+  readonly hasLabel = computed(() => !!this.label());
+
+  protected readonly dividerClass = computed(() =>
+    cn(dividerVariants({ orientation: this.orientation(), variant: this.variant() }), this.class())
+  );
+
+  protected readonly lineClass = computed(() =>
+    cn('flex-1 bg-border', this.orientation() === 'horizontal' ? 'h-[1px]' : 'w-[1px]')
+  );
+
+  protected readonly labelContainerClass = computed(() =>
+    cn(
+      'flex items-center',
+      this.orientation() === 'horizontal' ? 'flex-row' : 'flex-col',
+      this.class()
+    )
+  );
+}

package/src/lib/divider/divider.variants.ts

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const dividerVariants = cva('shrink-0 bg-border', {
+  variants: {
+    orientation: {
+      horizontal: 'h-[1px] w-full',
+      vertical: 'h-full w-[1px]',
+    },
+    variant: {
+      solid: '',
+      dashed: 'border-dashed',
+      dotted: 'border-dotted',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'solid',
+  },
+});
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';

package/src/lib/divider/index.ts

@@ -0,0 +1,2 @@
+export { SnyDividerComponent } from './divider.component';
+export { dividerVariants, type DividerOrientation, type DividerVariant } from './divider.variants';

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

@@ -0,0 +1,85 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDockDirective, SnyDockItemDirective, type DockPosition } from './dock.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyDockDirective, SnyDockItemDirective],
+  template: `
+    <div snyDock [position]="position()">
+      <button snyDockItem [active]="true">Home</button>
+      <button snyDockItem>Settings</button>
+    </div>
+  `,
+})
+class TestHostComponent {
+  position = signal<DockPosition>('bottom');
+}
+
+describe('SnyDockDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with toolbar role', () => {
+    const dock = fixture.nativeElement.querySelector('[snyDock]');
+    expect(dock.getAttribute('role')).toBe('toolbar');
+  });
+
+  it('should position at bottom by default', () => {
+    const dock = fixture.nativeElement.querySelector('[snyDock]');
+    expect(dock.className).toContain('bottom-4');
+  });
+
+  it('should position at top', () => {
+    fixture.componentInstance.position.set('top');
+    fixture.detectChanges();
+    const dock = fixture.nativeElement.querySelector('[snyDock]');
+    expect(dock.className).toContain('top-4');
+  });
+
+  it('should apply active state to dock item', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    expect(items[0].className).toContain('bg-primary');
+  });
+
+  it('should move focus with ArrowRight', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    (items[0] as HTMLElement).focus();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+
+  it('should move focus with ArrowLeft', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    (items[1] as HTMLElement).focus();
+    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to first with Home', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    (items[1] as HTMLElement).focus();
+    items[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to last with End', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    (items[0] as HTMLElement).focus();
+    items[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[snyDockItem]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+});

package/src/lib/dock/dock.directives.ts

@@ -0,0 +1,83 @@
+import { Directive, ElementRef, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type DockPosition = 'bottom' | 'top';
+
+@Directive({
+  selector: '[snyDock]',
+  standalone: true,
+  host: {
+    'role': 'toolbar',
+    'aria-label': 'Dock',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyDockDirective {
+  readonly position = input<DockPosition>('bottom');
+  readonly class = input<string>('');
+
+  private readonly elRef = inject(ElementRef);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2 shadow-lg',
+      this.position() === 'bottom' ? 'bottom-4' : 'top-4',
+      this.class()
+    )
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    const items = Array.from(
+      (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('[snyDockItem]')
+    );
+    if (items.length === 0) return;
+
+    const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number | null = null;
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % items.length;
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + items.length) % items.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = items.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      items[nextIndex].focus();
+    }
+  }
+}
+
+@Directive({
+  selector: '[snyDockItem]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.tabindex]': 'active() ? 0 : -1',
+  },
+})
+export class SnyDockItemDirective {
+  readonly active = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full p-2 transition-all hover:scale-110',
+      this.active() && 'bg-primary text-primary-foreground',
+      this.class()
+    )
+  );
+}

package/src/lib/dock/index.ts

@@ -0,0 +1 @@
+export { SnyDockDirective, SnyDockItemDirective, type DockPosition } from './dock.directives';

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

@@ -0,0 +1,62 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDrawerLayoutDirective, SnyDrawerContentDirective, SnyDrawerSideDirective } from './drawer.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyDrawerLayoutDirective, SnyDrawerContentDirective, SnyDrawerSideDirective],
+  template: `
+    <div snyDrawerLayout #drawer="snyDrawerLayout">
+      <div snyDrawerSide>Sidebar</div>
+      <div snyDrawerContent>Main</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  drawer = viewChild(SnyDrawerLayoutDirective);
+}
+
+describe('SnyDrawerLayoutDirective', () => {
+  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 side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('-translate-x-full');
+  });
+
+  it('should open on toggle', () => {
+    fixture.componentInstance.drawer()!.toggle();
+    fixture.detectChanges();
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('translate-x-0');
+  });
+
+  it('should close after open', () => {
+    const d = fixture.componentInstance.drawer()!;
+    d.open();
+    fixture.detectChanges();
+    d.close();
+    fixture.detectChanges();
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('-translate-x-full');
+  });
+
+  it('should have navigation role on drawer side', () => {
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.getAttribute('role')).toBe('navigation');
+  });
+
+  it('should set aria-modal on side when overlay and open', () => {
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.getAttribute('aria-modal')).toBeNull();
+    fixture.componentInstance.drawer()!.open();
+    fixture.detectChanges();
+    expect(side.getAttribute('aria-modal')).toBe('true');
+  });
+});

package/src/lib/drawer/drawer.directives.ts

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, Directive, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_DRAWER = new InjectionToken<SnyDrawerLayoutComponent>('SnyDrawer');
+
+@Component({
+  selector: '[snyDrawerLayout]',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'snyDrawerLayout',
+  providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }],
+  host: {
+    '[class]': 'computedClass()',
+  },
+  template: `
+    <ng-content />
+    @if (isOpen() && overlay()) {
+      <div
+        class="fixed inset-0 z-30 bg-black/50 transition-opacity"
+        (click)="close()"
+      ></div>
+    }
+  `,
+})
+export class SnyDrawerLayoutComponent {
+  readonly class = input<string>('');
+  readonly overlay = input(true);
+  readonly isOpen = signal(false);
+
+  protected readonly computedClass = computed(() =>
+    cn('relative flex h-full w-full overflow-hidden', this.class())
+  );
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+}
+
+/** @deprecated Use SnyDrawerLayoutComponent instead */
+export const SnyDrawerLayoutDirective = SnyDrawerLayoutComponent;
+
+@Directive({
+  selector: '[snyDrawerContent]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyDrawerContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 overflow-auto', this.class())
+  );
+}
+
+export type DrawerSide = 'left' | 'right';
+
+@Directive({
+  selector: '[snyDrawerSide]',
+  standalone: true,
+  host: {
+    'role': 'navigation',
+    'aria-label': 'Sidebar navigation',
+    '[attr.aria-modal]': 'drawer.overlay() && drawer.isOpen() || null',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyDrawerSideDirective {
+  protected readonly drawer = inject(SNY_DRAWER);
+  readonly side = input<DrawerSide>('left');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const isOpen = this.drawer.isOpen();
+    const s = this.side();
+    const base = 'fixed inset-y-0 z-40 w-64 bg-background border-r border-border transition-transform duration-300 ease-in-out';
+    const sideClass = s === 'left' ? 'left-0' : 'right-0 border-l border-r-0';
+    const transformClass = isOpen
+      ? 'translate-x-0'
+      : s === 'left' ? '-translate-x-full' : 'translate-x-full';
+    return cn(base, sideClass, transformClass, this.class());
+  });
+}

package/src/lib/drawer/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyDrawerLayoutComponent,
+  SnyDrawerLayoutDirective,
+  SnyDrawerContentDirective,
+  SnyDrawerSideDirective,
+  SNY_DRAWER,
+  type DrawerSide,
+} from './drawer.directives';

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

@@ -0,0 +1,106 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyMenuContentDirective,
+  SnyMenuItemDirective,
+  SnyMenuSeparatorDirective,
+  SnyMenuLabelDirective,
+} from './dropdown.directives';
+import type { DropdownItemVariant } from './dropdown.variants';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyMenuContentDirective,
+    SnyMenuItemDirective,
+    SnyMenuSeparatorDirective,
+    SnyMenuLabelDirective,
+  ],
+  template: `
+    <div snyMenuContent>
+      <div snyMenuLabel>Actions</div>
+      <div snyMenuItem [variant]="variant()">Edit</div>
+      <div snyMenuSeparator></div>
+      <div snyMenuItem variant="destructive">Delete</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<DropdownItemVariant>('default');
+}
+
+describe('SnyMenuContentDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply content classes', () => {
+    const content = fixture.nativeElement.querySelector('[snyMenuContent]');
+    expect(content.className).toContain('rounded-md');
+    expect(content.className).toContain('bg-popover');
+  });
+});
+
+describe('SnyMenuItemDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply default item classes', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyMenuItem]');
+    expect(items[0].className).toContain('text-sm');
+    expect(items[0].className).toContain('rounded-sm');
+  });
+
+  it('should apply destructive variant', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyMenuItem]');
+    expect(items[1].className).toContain('text-destructive');
+  });
+});
+
+describe('SnyMenuSeparatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply separator classes and role', () => {
+    const separator = fixture.nativeElement.querySelector('[snyMenuSeparator]');
+    expect(separator.getAttribute('role')).toBe('separator');
+    expect(separator.className).toContain('bg-muted');
+  });
+});
+
+describe('SnyMenuLabelDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply label classes', () => {
+    const label = fixture.nativeElement.querySelector('[snyMenuLabel]');
+    expect(label.className).toContain('font-semibold');
+  });
+});