@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.21

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,21 @@
+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]',
+  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';

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

@@ -0,0 +1,104 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+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');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnySliderComponent],
+  template: `<sny-slider [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(50);
+}
+
+describe('SnySliderComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let thumb: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    thumb = fixture.nativeElement.querySelector('button[role="slider"]');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(75);
+    fixture.detectChanges();
+    expect(thumb.getAttribute('aria-valuenow')).toBe('75');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    const host = fixture.nativeElement.querySelector('sny-slider');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(51);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(thumb.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    thumb.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

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

@@ -0,0 +1,181 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, input, model, OnDestroy, signal, viewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { sliderTrackVariants, sliderThumbSize, type SliderSize } from './slider.variants';
+
+@Component({
+  selector: 'sny-slider',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'block',
+    '(keydown)': 'onKeydown($event)',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySliderComponent), multi: true },
+  ],
+  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]="isDisabled()"
+        [class]="thumbClass()"
+        [style.left.%]="percentage()"
+        tabindex="0"
+        (blur)="onTouched()"
+      ></button>
+    </div>
+  `,
+})
+export class SnySliderComponent implements ControlValueAccessor, 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 _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private readonly trackRef = viewChild<ElementRef<HTMLDivElement>>('trackEl');
+  private moveHandler: ((e: MouseEvent | TouchEvent) => void) | null = null;
+  private upHandler: (() => void) | null = null;
+
+  private _onChange: (value: number) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(val: number): void {
+    this.value.set(val ?? 0);
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  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.isDisabled() && '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.isDisabled()) 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();
+    const clamped = Math.max(this.min(), Math.min(this.max(), stepped));
+    this.value.set(clamped);
+    this._onChange(clamped);
+  }
+
+  onTrackMousedown(event: MouseEvent): void {
+    if (this.isDisabled()) 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.onTouched();
+      this.removeListeners();
+    };
+    document.addEventListener('mousemove', this.moveHandler as EventListener);
+    document.addEventListener('mouseup', this.upHandler);
+  }
+
+  onTrackTouchstart(event: TouchEvent): void {
+    if (this.isDisabled()) 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.onTouched();
+      this.removeListeners();
+    };
+    document.addEventListener('touchmove', this.moveHandler as EventListener, { passive: true });
+    document.addEventListener('touchend', this.upHandler);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.isDisabled()) return;
+    const step = this.step();
+    let newVal: number | undefined;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        newVal = Math.min(this.max(), this.value() + step);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        newVal = Math.max(this.min(), this.value() - step);
+        break;
+      case 'Home':
+        event.preventDefault();
+        newVal = this.min();
+        break;
+      case 'End':
+        event.preventDefault();
+        newVal = this.max();
+        break;
+    }
+    if (newVal !== undefined) {
+      this.value.set(newVal);
+      this._onChange(newVal);
+    }
+  }
+
+  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/stat/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyStatDirective,
+  SnyStatTitleDirective,
+  SnyStatValueDirective,
+  SnyStatDescriptionDirective,
+  SnyStatFigureDirective,
+  type StatDescriptionVariant,
+} from './stat.directives';

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

@@ -0,0 +1,60 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStatDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatDescriptionDirective, type StatDescriptionVariant } from './stat.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyStatDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatDescriptionDirective],
+  template: `
+    <div snyStat>
+      <div snyStatTitle>Total Revenue</div>
+      <div snyStatValue>$45,231</div>
+      <div snyStatDescription [variant]="descVariant()">+20.1% from last month</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  descVariant = signal<StatDescriptionVariant>('default');
+}
+
+describe('SnyStatDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render stat sections', () => {
+    expect(fixture.nativeElement.querySelector('[snyStat]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatTitle]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatValue]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatDescription]')).toBeTruthy();
+  });
+
+  it('should apply success variant to description', () => {
+    fixture.componentInstance.descVariant.set('success');
+    fixture.detectChanges();
+    const desc = fixture.nativeElement.querySelector('[snyStatDescription]');
+    expect(desc.className).toContain('text-green-600');
+  });
+
+  it('should apply error variant to description', () => {
+    fixture.componentInstance.descVariant.set('error');
+    fixture.detectChanges();
+    const desc = fixture.nativeElement.querySelector('[snyStatDescription]');
+    expect(desc.className).toContain('text-destructive');
+  });
+
+  it('should have auto-generated id on title', () => {
+    const title = fixture.nativeElement.querySelector('[snyStatTitle]');
+    expect(title.id).toContain('sny-stat-title-');
+  });
+
+  it('should set aria-labelledby on value pointing to title id', () => {
+    const title = fixture.nativeElement.querySelector('[snyStatTitle]');
+    const value = fixture.nativeElement.querySelector('[snyStatValue]');
+    expect(value.getAttribute('aria-labelledby')).toBe(title.id);
+  });
+});

package/src/lib/stat/stat.directives.ts

@@ -0,0 +1,79 @@
+import { Directive, InjectionToken, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_STAT = new InjectionToken<SnyStatDirective>('SnyStat');
+
+let statIdCounter = 0;
+
+@Directive({
+  selector: '[snyStat]',
+  providers: [{ provide: SNY_STAT, useExisting: SnyStatDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatDirective {
+  readonly class = input<string>('');
+  readonly titleId = `sny-stat-title-${++statIdCounter}`;
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-0.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyStatTitle]',
+  host: {
+    '[class]': 'computedClass()',
+    '[id]': 'stat.titleId',
+  },
+})
+export class SnyStatTitleDirective {
+  readonly class = input<string>('');
+  readonly stat = inject(SNY_STAT);
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyStatValue]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-labelledby]': 'stat.titleId',
+  },
+})
+export class SnyStatValueDirective {
+  readonly class = input<string>('');
+  readonly stat = inject(SNY_STAT);
+  protected readonly computedClass = computed(() =>
+    cn('text-2xl font-bold', this.class())
+  );
+}
+
+export type StatDescriptionVariant = 'default' | 'success' | 'error';
+
+@Directive({
+  selector: '[snyStatDescription]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatDescriptionDirective {
+  readonly variant = input<StatDescriptionVariant>('default');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'success' ? 'text-green-600 dark:text-green-400' :
+      v === 'error' ? 'text-destructive' :
+      'text-muted-foreground';
+    return cn('text-xs', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyStatFigure]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatFigureDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-muted-foreground', this.class())
+  );
+}

package/src/lib/status/index.ts

@@ -0,0 +1,2 @@
+export { SnyStatusDirective } from './status.directive';
+export { statusVariants, type StatusVariant, type StatusSize } from './status.variants';

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

@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStatusDirective } from './status.directive';
+import type { StatusVariant } from './status.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyStatusDirective],
+  template: `<span snyStatus [variant]="variant()" [pulse]="pulse()"></span>`,
+})
+class TestHostComponent {
+  variant = signal<StatusVariant>('default');
+  pulse = signal(false);
+}
+
+describe('SnyStatusDirective', () => {
+  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('[snyStatus]');
+  });
+
+  it('should have status role', () => {
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-green-500');
+    expect(el.getAttribute('aria-label')).toBe('Online');
+  });
+
+  it('should apply pulse animation', () => {
+    fixture.componentInstance.pulse.set(true);
+    fixture.detectChanges();
+    expect(el.className).toContain('animate-pulse');
+  });
+});

package/src/lib/status/status.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { statusVariants, type StatusVariant, type StatusSize } from './status.variants';
+
+const variantLabels: Record<StatusVariant, string> = {
+  default: 'Active',
+  success: 'Online',
+  warning: 'Away',
+  error: 'Error',
+  info: 'Info',
+  neutral: 'Offline',
+};
+
+@Directive({
+  selector: '[snyStatus]',
+  host: {
+    'role': 'status',
+    '[attr.aria-label]': 'ariaLabel()',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyStatusDirective {
+  readonly variant = input<StatusVariant>('default');
+  readonly size = input<StatusSize>('md');
+  readonly pulse = input(false);
+  readonly class = input<string>('');
+
+  protected readonly ariaLabel = computed(() => variantLabels[this.variant()]);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      statusVariants({ variant: this.variant(), size: this.size() }),
+      this.pulse() && 'animate-pulse',
+      this.class()
+    )
+  );
+}