@sonny-ui/core 0.1.0-alpha.7 → 0.1.0-alpha.8

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

@@ -0,0 +1,67 @@
+import { Component, inject } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { DialogModule, DialogRef } from '@angular/cdk/dialog';
+import { SnySheetService } from './sheet.service';
+import {
+  SnySheetHeaderDirective,
+  SnySheetTitleDirective,
+  SnySheetDescriptionDirective,
+  SnySheetCloseDirective,
+} from './sheet.directives';
+import { SnyButtonDirective } from '../button/button.directive';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnySheetHeaderDirective,
+    SnySheetTitleDirective,
+    SnySheetDescriptionDirective,
+    SnySheetCloseDirective,
+    SnyButtonDirective,
+  ],
+  template: `
+    <div>
+      <div snySheetHeader>
+        <h2 snySheetTitle>Test Sheet</h2>
+        <p snySheetDescription>A test sheet.</p>
+      </div>
+      <button snySheetClose aria-label="Close">X</button>
+      <button snyBtn (click)="dialogRef.close('done')">Done</button>
+    </div>
+  `,
+})
+class TestSheetComponent {
+  readonly dialogRef = inject(DialogRef);
+}
+
+describe('SnySheetService', () => {
+  let service: SnySheetService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogModule],
+    }).compileComponents();
+
+    service = TestBed.inject(SnySheetService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should open a sheet', () => {
+    const ref = service.open(TestSheetComponent, { side: 'right' });
+    expect(ref).toBeTruthy();
+    ref.close();
+  });
+
+  it('should open from different sides', () => {
+    const refLeft = service.open(TestSheetComponent, { side: 'left' });
+    expect(refLeft).toBeTruthy();
+    refLeft.close();
+
+    const refTop = service.open(TestSheetComponent, { side: 'top' });
+    expect(refTop).toBeTruthy();
+    refTop.close();
+  });
+});

package/src/lib/sheet/sheet.directives.ts

@@ -0,0 +1,75 @@
+import { Directive, computed, input, inject } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { cn } from '../core/utils/cn';
+
+@Directive({
+  selector: '[snySheetHeader]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnySheetHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-2', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snySheetTitle]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnySheetTitleDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-lg font-semibold text-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snySheetDescription]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnySheetDescriptionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snySheetContent]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnySheetContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('py-4', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snySheetClose]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick()',
+  },
+})
+export class SnySheetCloseDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      this.class()
+    )
+  );
+
+  private readonly dialogRef = inject(DialogRef, { optional: true });
+
+  onClick(): void {
+    this.dialogRef?.close();
+  }
+}

package/src/lib/sheet/sheet.service.ts

@@ -0,0 +1,100 @@
+import { Injectable, inject, InjectionToken, Injector } from '@angular/core';
+import { Dialog, DialogRef as CdkDialogRef } from '@angular/cdk/dialog';
+import { type ComponentType, createGlobalPositionStrategy, type GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { SnySheetRef } from './sheet-ref';
+import { DEFAULT_SHEET_CONFIG, SHEET_PANEL_CLASS, type SheetSide, type SnySheetConfig } from './sheet.types';
+
+export const SNY_SHEET_DATA = new InjectionToken<unknown>('SNY_SHEET_DATA');
+
+interface SheetOverlayConfig {
+  positionStrategy: GlobalPositionStrategy;
+  width?: string;
+  maxWidth?: string;
+  height?: string;
+  maxHeight?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class SnySheetService {
+  private readonly cdkDialog = inject(Dialog);
+  private readonly injector = inject(Injector);
+
+  open<T, R = unknown>(component: ComponentType<T>, config: SnySheetConfig = {}): SnySheetRef<R> {
+    const merged = { ...DEFAULT_SHEET_CONFIG, ...config };
+    const side = merged.side ?? 'right';
+    const disableClose = !merged.closeOnBackdrop || !merged.closeOnEsc;
+    const overlay = this._getOverlayConfig(side);
+
+    const cdkRef: CdkDialogRef<R, T> = this.cdkDialog.open(component, {
+      disableClose,
+      hasBackdrop: true,
+      backdropClass: 'sny-dialog-backdrop',
+      panelClass: ['sny-sheet-panel', SHEET_PANEL_CLASS[side]],
+      positionStrategy: overlay.positionStrategy,
+      width: overlay.width,
+      maxWidth: overlay.maxWidth,
+      height: overlay.height,
+      maxHeight: overlay.maxHeight,
+      ariaLabelledBy: merged.ariaLabelledBy,
+      ariaDescribedBy: merged.ariaDescribedBy,
+      data: merged.data,
+      providers: merged.data != null
+        ? [{ provide: SNY_SHEET_DATA, useValue: merged.data }]
+        : [],
+    });
+
+    if (disableClose) {
+      if (merged.closeOnBackdrop) {
+        const sub = cdkRef.backdropClick.subscribe(() => cdkRef.close());
+        cdkRef.closed.subscribe(() => sub.unsubscribe());
+      }
+      if (merged.closeOnEsc) {
+        const sub = cdkRef.keydownEvents.subscribe(event => {
+          if (event.key === 'Escape') cdkRef.close();
+        });
+        cdkRef.closed.subscribe(() => sub.unsubscribe());
+      }
+    }
+
+    return new SnySheetRef<R>(cdkRef);
+  }
+
+  closeAll(): void {
+    this.cdkDialog.closeAll();
+  }
+
+  private _getOverlayConfig(side: SheetSide): SheetOverlayConfig {
+    const strategy = createGlobalPositionStrategy(this.injector);
+
+    switch (side) {
+      case 'right':
+        return {
+          positionStrategy: strategy.top('0').right('0'),
+          width: '75%',
+          maxWidth: '24rem',
+          height: '100vh',
+          maxHeight: '100vh',
+        };
+      case 'left':
+        return {
+          positionStrategy: strategy.top('0').left('0'),
+          width: '75%',
+          maxWidth: '24rem',
+          height: '100vh',
+          maxHeight: '100vh',
+        };
+      case 'top':
+        return {
+          positionStrategy: strategy.top('0').centerHorizontally(),
+          width: '100vw',
+          maxWidth: '100vw',
+        };
+      case 'bottom':
+        return {
+          positionStrategy: strategy.bottom('0').centerHorizontally(),
+          width: '100vw',
+          maxWidth: '100vw',
+        };
+    }
+  }
+}

package/src/lib/sheet/sheet.types.ts

@@ -0,0 +1,23 @@
+export type SheetSide = 'left' | 'right' | 'top' | 'bottom';
+
+export interface SnySheetConfig {
+  side?: SheetSide;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  data?: unknown;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+}
+
+export const DEFAULT_SHEET_CONFIG: SnySheetConfig = {
+  side: 'right',
+  closeOnBackdrop: true,
+  closeOnEsc: true,
+};
+
+export const SHEET_PANEL_CLASS: Record<SheetSide, string> = {
+  right: 'sny-sheet-right',
+  left: 'sny-sheet-left',
+  top: 'sny-sheet-top',
+  bottom: 'sny-sheet-bottom',
+};

package/src/lib/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { SnySkeletonDirective } from './skeleton.directive';
+export { skeletonVariants, type SkeletonVariant, type SkeletonSize } from './skeleton.variants';

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

@@ -0,0 +1,55 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnySkeletonDirective } from './skeleton.directive';
+import type { SkeletonVariant, SkeletonSize } from './skeleton.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnySkeletonDirective],
+  template: `<div snySkeleton [variant]="variant()" [size]="size()"></div>`,
+})
+class TestHostComponent {
+  variant = signal<SkeletonVariant>('line');
+  size = signal<SkeletonSize>('md');
+}
+
+describe('SnySkeletonDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('div');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('animate-pulse');
+    expect(el.className).toContain('bg-muted');
+    expect(el.className).toContain('rounded-sm');
+    expect(el.className).toContain('h-6');
+  });
+
+  it('should apply circular variant', () => {
+    fixture.componentInstance.variant.set('circular');
+    fixture.detectChanges();
+    expect(el.className).toContain('rounded-full');
+    expect(el.className).toContain('aspect-square');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-4');
+  });
+
+  it('should apply xl size', () => {
+    fixture.componentInstance.size.set('xl');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-12');
+  });
+});

package/src/lib/skeleton/skeleton.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { skeletonVariants, type SkeletonVariant, type SkeletonSize } from './skeleton.variants';
+
+@Directive({
+  selector: '[snySkeleton]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnySkeletonDirective {
+  readonly variant = input<SkeletonVariant>('line');
+  readonly size = input<SkeletonSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(skeletonVariants({ variant: this.variant(), size: this.size() }), this.class())
+  );
+}

package/src/lib/skeleton/skeleton.variants.ts

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+
+export const skeletonVariants = cva(
+  'animate-pulse bg-muted block',
+  {
+    variants: {
+      variant: {
+        line: 'rounded-sm',
+        circular: 'rounded-full aspect-square',
+        rounded: 'rounded-lg',
+      },
+      size: {
+        sm: 'h-4',
+        md: 'h-6',
+        lg: 'h-8',
+        xl: 'h-12',
+      },
+    },
+    defaultVariants: {
+      variant: 'line',
+      size: 'md',
+    },
+  }
+);
+
+export type SkeletonVariant = 'line' | 'circular' | 'rounded';
+export type SkeletonSize = 'sm' | 'md' | 'lg' | 'xl';

package/src/lib/slider/index.ts

@@ -0,0 +1,2 @@
+export { SnySliderComponent } from './slider.component';
+export { sliderTrackVariants, type SliderSize } from './slider.variants';

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

@@ -0,0 +1,55 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnySliderComponent } from './slider.component';
+
+@Component({
+  standalone: true,
+  imports: [SnySliderComponent],
+  template: `<sny-slider [(value)]="value" [min]="min()" [max]="max()" [step]="step()" [disabled]="disabled()" />`,
+})
+class TestHostComponent {
+  value = signal(50);
+  min = signal(0);
+  max = signal(100);
+  step = signal(1);
+  disabled = signal(false);
+}
+
+describe('SnySliderComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let thumb: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    thumb = fixture.nativeElement.querySelector('button[role="slider"]');
+  });
+
+  it('should have slider role', () => {
+    expect(thumb.getAttribute('role')).toBe('slider');
+  });
+
+  it('should set aria values', () => {
+    expect(thumb.getAttribute('aria-valuemin')).toBe('0');
+    expect(thumb.getAttribute('aria-valuemax')).toBe('100');
+    expect(thumb.getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('should increment with ArrowRight', () => {
+    const host = fixture.nativeElement.querySelector('sny-slider');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+    expect(thumb.getAttribute('aria-valuenow')).toBe('51');
+  });
+
+  it('should decrement with ArrowLeft', () => {
+    const host = fixture.nativeElement.querySelector('sny-slider');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+    fixture.detectChanges();
+    expect(thumb.getAttribute('aria-valuenow')).toBe('49');
+  });
+});

package/src/lib/slider/slider.component.ts

@@ -0,0 +1,141 @@
+import { Component, computed, ElementRef, inject, input, model, OnDestroy, viewChild } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { sliderTrackVariants, sliderThumbSize, type SliderSize } from './slider.variants';
+
+@Component({
+  selector: 'sny-slider',
+  standalone: true,
+  host: {
+    class: 'block',
+    '(keydown)': 'onKeydown($event)',
+  },
+  template: `
+    <div
+      #trackEl
+      [class]="trackClass()"
+      (mousedown)="onTrackMousedown($event)"
+      (touchstart)="onTrackTouchstart($event)"
+    >
+      <div class="absolute h-full rounded-full bg-primary" [style.width.%]="percentage()"></div>
+      <button
+        type="button"
+        role="slider"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [disabled]="disabled()"
+        [class]="thumbClass()"
+        [style.left.%]="percentage()"
+        tabindex="0"
+      ></button>
+    </div>
+  `,
+})
+export class SnySliderComponent implements OnDestroy {
+  readonly value = model(0);
+  readonly min = input(0);
+  readonly max = input(100);
+  readonly step = input(1);
+  readonly disabled = input(false);
+  readonly size = input<SliderSize>('md');
+  readonly class = input<string>('');
+
+  private readonly trackRef = viewChild<ElementRef<HTMLDivElement>>('trackEl');
+  private moveHandler: ((e: MouseEvent | TouchEvent) => void) | null = null;
+  private upHandler: (() => void) | null = null;
+
+  protected readonly percentage = computed(() => {
+    const range = this.max() - this.min();
+    if (range <= 0) return 0;
+    return ((this.value() - this.min()) / range) * 100;
+  });
+
+  protected readonly trackClass = computed(() =>
+    cn(sliderTrackVariants({ size: this.size() }), this.disabled() && 'opacity-50 cursor-not-allowed', this.class())
+  );
+
+  protected readonly thumbClass = computed(() =>
+    cn(
+      'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 block rounded-full border-2 border-primary bg-background shadow ring-offset-background 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',
+      sliderThumbSize[this.size()]
+    )
+  );
+
+  private updateValueFromPosition(clientX: number): void {
+    if (this.disabled()) return;
+    const track = this.trackRef()?.nativeElement;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const raw = this.min() + percent * (this.max() - this.min());
+    const stepped = Math.round(raw / this.step()) * this.step();
+    this.value.set(Math.max(this.min(), Math.min(this.max(), stepped)));
+  }
+
+  onTrackMousedown(event: MouseEvent): void {
+    if (this.disabled()) return;
+    event.preventDefault();
+    this.updateValueFromPosition(event.clientX);
+    this.moveHandler = (e: MouseEvent | TouchEvent) => {
+      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+      this.updateValueFromPosition(clientX);
+    };
+    this.upHandler = () => this.removeListeners();
+    document.addEventListener('mousemove', this.moveHandler as EventListener);
+    document.addEventListener('mouseup', this.upHandler);
+  }
+
+  onTrackTouchstart(event: TouchEvent): void {
+    if (this.disabled()) return;
+    this.updateValueFromPosition(event.touches[0].clientX);
+    this.moveHandler = (e: MouseEvent | TouchEvent) => {
+      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+      this.updateValueFromPosition(clientX);
+    };
+    this.upHandler = () => this.removeListeners();
+    document.addEventListener('touchmove', this.moveHandler as EventListener, { passive: true });
+    document.addEventListener('touchend', this.upHandler);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.disabled()) return;
+    const step = this.step();
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        this.value.set(Math.min(this.max(), this.value() + step));
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        this.value.set(Math.max(this.min(), this.value() - step));
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.value.set(this.min());
+        break;
+      case 'End':
+        event.preventDefault();
+        this.value.set(this.max());
+        break;
+    }
+  }
+
+  private removeListeners(): void {
+    if (this.moveHandler) {
+      document.removeEventListener('mousemove', this.moveHandler as EventListener);
+      document.removeEventListener('touchmove', this.moveHandler as EventListener);
+      this.moveHandler = null;
+    }
+    if (this.upHandler) {
+      document.removeEventListener('mouseup', this.upHandler);
+      document.removeEventListener('touchend', this.upHandler);
+      this.upHandler = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeListeners();
+  }
+}

package/src/lib/slider/slider.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const sliderTrackVariants = cva(
+  'relative w-full rounded-full bg-secondary cursor-pointer',
+  {
+    variants: {
+      size: {
+        sm: 'h-1.5',
+        md: 'h-2',
+        lg: 'h-3',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const sliderThumbSize: Record<string, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export type SliderSize = 'sm' | 'md' | 'lg';

package/src/lib/switch/index.ts

@@ -0,0 +1,2 @@
+export { SnySwitchComponent } from './switch.component';
+export { switchTrackVariants, type SwitchSize } from './switch.variants';

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

@@ -0,0 +1,50 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnySwitchComponent } from './switch.component';
+
+@Component({
+  standalone: true,
+  imports: [SnySwitchComponent],
+  template: `<sny-switch [(checked)]="checked" [disabled]="disabled()" />`,
+})
+class TestHostComponent {
+  checked = signal(false);
+  disabled = signal(false);
+}
+
+describe('SnySwitchComponent', () => {
+  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 have switch role', () => {
+    expect(button.getAttribute('role')).toBe('switch');
+  });
+
+  it('should be unchecked by default', () => {
+    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(button.className).toContain('bg-input');
+  });
+
+  it('should toggle on click', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-checked')).toBe('true');
+    expect(button.className).toContain('bg-primary');
+  });
+
+  it('should not toggle when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+});