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

package/src/lib/select/select.component.ts

@@ -0,0 +1,250 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  HostListener,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { selectTriggerVariants, type SelectSize } from './select.variants';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+@Component({
+  selector: 'sny-select',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'relative inline-block w-full',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySelectComponent), multi: true },
+  ],
+  template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="listbox"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+      (blur)="onTouched()"
+    >
+      <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <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" class="shrink-0 opacity-50"><path d="m6 9 6 6 6-6"/></svg>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
+      >
+        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          @for (opt of options(); track opt.value; let i = $index) {
+            <li
+              role="option"
+              [attr.aria-selected]="value() === opt.value"
+              [class]="optionClass(i)"
+              (mousedown)="select(opt); $event.preventDefault()"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              <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"
+                [class]="value() === opt.value ? 'mr-2 shrink-0 opacity-100' : 'mr-2 shrink-0 opacity-0'"
+              ><path d="M20 6 9 17l-5-5"/></svg>
+              {{ opt.label }}
+            </li>
+          }
+        </ul>
+      </div>
+    }
+  `,
+})
+export class SnySelectComponent implements ControlValueAccessor, OnDestroy {
+  readonly options = input<SelectOption[]>([]);
+  readonly placeholder = input('Select...');
+  readonly size = input<SelectSize>('md');
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+  readonly value = model<string>('');
+
+  readonly open = signal(false);
+  readonly activeIndex = signal(0);
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private readonly triggerRef = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+  private readonly dropdownRef = viewChild<ElementRef<HTMLDivElement>>('dropdownEl');
+  private readonly elRef = inject(ElementRef);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  private _onChange: (value: string) => void = () => {};
+  protected onTouched: () => void = () => {};
+  private _writing = false;
+
+  constructor() {
+    effect(() => {
+      const val = this.value();
+      if (this._writing) {
+        this._writing = false;
+        return;
+      }
+      this._onChange(val);
+    });
+  }
+
+  writeValue(val: string): void {
+    this._writing = true;
+    this.value.set(val ?? '');
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  readonly selectedLabel = computed(() => {
+    const v = this.value();
+    if (!v) return '';
+    const opt = this.options().find(o => o.value === v);
+    return opt?.label ?? '';
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(selectTriggerVariants({ size: this.size() }), this.class())
+  );
+
+  optionClass(index: number): string {
+    const base = 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors';
+    const active = index === this.activeIndex() ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50';
+    return cn(base, active);
+  }
+
+  private updateDropdownPosition(): void {
+    const trigger = this.triggerRef()?.nativeElement;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const dropdown = this.dropdownRef()?.nativeElement;
+    if (dropdown) {
+      dropdown.style.top = `${rect.bottom + 4}px`;
+      dropdown.style.left = `${rect.left}px`;
+      dropdown.style.width = `${rect.width}px`;
+    }
+  }
+
+  private addGlobalListeners(): void {
+    this.removeGlobalListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeGlobalListeners(): void {
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler, { capture: true } as EventListenerOptions);
+      this.scrollHandler = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeGlobalListeners();
+  }
+
+  toggle(): void {
+    if (this.open()) {
+      this.close();
+    } else {
+      this.open.set(true);
+      this.activeIndex.set(
+        Math.max(0, this.options().findIndex(o => o.value === this.value()))
+      );
+      this.addGlobalListeners();
+      setTimeout(() => this.updateDropdownPosition());
+    }
+  }
+
+  close(): void {
+    this.open.set(false);
+    this.removeGlobalListeners();
+  }
+
+  select(opt: SelectOption): void {
+    this.value.set(opt.value);
+    this.close();
+  }
+
+  onTriggerKeydown(event: KeyboardEvent): void {
+    const items = this.options();
+    if (!this.open()) {
+      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.toggle();
+      }
+      return;
+    }
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.activeIndex.update(i => Math.min(i + 1, items.length - 1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.activeIndex.update(i => Math.max(i - 1, 0));
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (items[this.activeIndex()]) {
+          this.select(items[this.activeIndex()]);
+        }
+        break;
+      case 'Escape':
+        this.close();
+        break;
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+}

package/src/lib/select/select.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const selectTriggerVariants = cva(
+  'inline-flex w-full items-center justify-between whitespace-nowrap rounded-sm border border-border bg-background px-3 py-2 text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground 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: {
+      size: {
+        sm: 'h-9 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type SelectSize = 'sm' | 'md' | 'lg';

package/src/lib/sheet/index.ts

@@ -0,0 +1,10 @@
+export { SnySheetService, SNY_SHEET_DATA } from './sheet.service';
+export { SnySheetRef } from './sheet-ref';
+export {
+  SnySheetHeaderDirective,
+  SnySheetTitleDirective,
+  SnySheetDescriptionDirective,
+  SnySheetContentDirective,
+  SnySheetCloseDirective,
+} from './sheet.directives';
+export { type SnySheetConfig, type SheetSide } from './sheet.types';

package/src/lib/sheet/sheet-ref.ts

@@ -0,0 +1,18 @@
+import type { Observable } from 'rxjs';
+
+interface CdkDialogRefLike<R> {
+  close(result?: R): void;
+  readonly closed: Observable<R | undefined>;
+}
+
+export class SnySheetRef<R = unknown> {
+  constructor(private readonly cdkRef: CdkDialogRefLike<R>) {}
+
+  close(result?: R): void {
+    this.cdkRef.close(result);
+  }
+
+  get closed(): Observable<R | undefined> {
+    return this.cdkRef.closed;
+  }
+}

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,63 @@
+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');
+  });
+
+  it('should have aria-busy="true"', () => {
+    expect(el.getAttribute('aria-busy')).toBe('true');
+  });
+
+  it('should have aria-hidden="true"', () => {
+    expect(el.getAttribute('aria-hidden')).toBe('true');
+  });
+});

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

@@ -0,0 +1,22 @@
+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()',
+    'aria-busy': 'true',
+    'aria-hidden': 'true',
+  },
+})
+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';