@sonny-ui/core 0.1.0-alpha.14 → 0.1.0-alpha.16

package/src/lib/date-picker/date-picker.component.spec.ts

@@ -0,0 +1,131 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDatePickerComponent } from './date-picker.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyDatePickerComponent],
+  template: `
+    <sny-date-picker
+      [(value)]="selectedDate"
+      [placeholder]="placeholder()"
+      [clearable]="clearable()"
+      [disabled]="disabled()"
+    />
+  `,
+})
+class TestHostComponent {
+  selectedDate = signal<Date | null>(null);
+  placeholder = signal('Pick a date...');
+  clearable = signal(true);
+  disabled = signal(false);
+}
+
+describe('SnyDatePickerComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  it('should render trigger with placeholder', () => {
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Pick a date...');
+  });
+
+  it('should open dropdown on click', () => {
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const calendar = el.querySelector('sny-calendar');
+    expect(calendar).not.toBeNull();
+  });
+
+  it('should close dropdown when date is selected', () => {
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+
+    const dayBtn = el.querySelectorAll('sny-calendar [role="grid"] button:not([disabled])');
+    const btn = Array.from(dayBtn).find((b) => b.textContent?.trim() === '15') as HTMLButtonElement;
+    btn?.click();
+    fixture.detectChanges();
+
+    const calendar = el.querySelector('sny-calendar');
+    expect(calendar).toBeNull();
+    expect(fixture.componentInstance.selectedDate()).not.toBeNull();
+  });
+
+  it('should show clear button when value is set', () => {
+    fixture.componentInstance.selectedDate.set(new Date(2026, 2, 15));
+    fixture.detectChanges();
+    const clearBtn = el.querySelector('[aria-label="Clear date"]');
+    expect(clearBtn).not.toBeNull();
+  });
+
+  it('should clear value on clear button click', () => {
+    fixture.componentInstance.selectedDate.set(new Date(2026, 2, 15));
+    fixture.detectChanges();
+    const clearBtn = el.querySelector('[aria-label="Clear date"]') as HTMLButtonElement;
+    clearBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.selectedDate()).toBeNull();
+  });
+
+  it('should not open when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
+  });
+
+  it('should display formatted date', () => {
+    fixture.componentInstance.selectedDate.set(new Date(2026, 2, 15));
+    fixture.detectChanges();
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Mar');
+    expect(trigger?.textContent).toContain('15');
+    expect(trigger?.textContent).toContain('2026');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyDatePickerComponent],
+  template: `<sny-date-picker [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl<Date | null>(null);
+}
+
+describe('SnyDatePickerComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveFormHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  it('should update display when FormControl value changes', () => {
+    fixture.componentInstance.ctrl.setValue(new Date(2026, 5, 20));
+    fixture.detectChanges();
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Jun');
+    expect(trigger?.textContent).toContain('20');
+  });
+
+  it('should disable via FormControl.disable()', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
+  });
+});

package/src/lib/date-picker/date-picker.component.ts

@@ -0,0 +1,220 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  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 { SnyCalendarComponent } from '../calendar/calendar.component';
+import { datePickerTriggerVariants, type DatePickerSize } from './date-picker.variants';
+
+@Component({
+  selector: 'sny-date-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SnyCalendarComponent],
+  host: { class: 'relative inline-block w-full' },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
+  ],
+  template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        }
+        <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 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <sny-calendar
+          [(value)]="internalValue"
+          [min]="min()"
+          [max]="max()"
+          [locale]="locale()"
+          (valueChange)="onDateSelected($event)"
+        />
+      </div>
+    }
+  `,
+})
+export class SnyDatePickerComponent implements ControlValueAccessor, OnDestroy {
+  readonly value = model<Date | null>(null);
+  readonly placeholder = input('Pick a date...');
+  readonly size = input<DatePickerSize>('md');
+  readonly locale = input('en-US');
+  readonly dateFormat = input<Intl.DateTimeFormatOptions>({
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  readonly min = input<Date | undefined>(undefined);
+  readonly max = input<Date | undefined>(undefined);
+  readonly clearable = input(true);
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+
+  readonly open = signal(false);
+  readonly internalValue = signal<Date | null>(null);
+
+  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: Date | null) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  // CVA
+  writeValue(val: Date | null): void {
+    this.value.set(val ?? null);
+    this.internalValue.set(val ?? null);
+  }
+
+  registerOnChange(fn: (value: Date | null) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  // Display
+  readonly displayValue = computed(() => {
+    const d = this.value();
+    if (!d) return '';
+    return d.toLocaleDateString(this.locale(), this.dateFormat());
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(datePickerTriggerVariants({ size: this.size() }), this.class())
+  );
+
+  // Actions
+  onDateSelected(date: Date | null): void {
+    this.value.set(date);
+    this._onChange(date);
+    this.close();
+  }
+
+  clear(event: Event): void {
+    event.stopPropagation();
+    this.value.set(null);
+    this.internalValue.set(null);
+    this._onChange(null);
+  }
+
+  toggle(): void {
+    if (this.open()) {
+      this.close();
+    } else {
+      this.internalValue.set(this.value());
+      this.updateDropdownPosition();
+      this.open.set(true);
+      this.addGlobalListeners();
+      setTimeout(() => this.updateDropdownPosition());
+    }
+  }
+
+  close(): void {
+    this.open.set(false);
+    this.removeGlobalListeners();
+  }
+
+  // Positioning (combobox pattern)
+  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`;
+    }
+  }
+
+  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();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  @HostListener('keydown.escape')
+  onEscape(): void {
+    this.close();
+  }
+}

package/src/lib/date-picker/date-picker.variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const datePickerTriggerVariants = 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 DatePickerSize = 'sm' | 'md' | 'lg';

package/src/lib/date-picker/index.ts

@@ -0,0 +1,2 @@
+export { SnyDatePickerComponent } from './date-picker.component';
+export { datePickerTriggerVariants, type DatePickerSize } from './date-picker.variants';

package/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -0,0 +1,151 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDateRangePickerComponent } from './date-range-picker.component';
+import type { DateRange, DatePickerPreset } from '../calendar/calendar.types';
+
+@Component({
+  standalone: true,
+  imports: [SnyDateRangePickerComponent],
+  template: `
+    <sny-date-range-picker
+      [(value)]="range"
+      [placeholder]="placeholder()"
+      [dualCalendar]="dualCalendar()"
+      [presets]="presets()"
+      [clearable]="clearable()"
+    />
+  `,
+})
+class TestHostComponent {
+  range = signal<DateRange | null>(null);
+  placeholder = signal('Pick a date range...');
+  dualCalendar = signal(false);
+  clearable = signal(true);
+  presets = signal<DatePickerPreset[]>([]);
+}
+
+describe('SnyDateRangePickerComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  it('should render trigger with placeholder', () => {
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Pick a date range...');
+  });
+
+  it('should open dropdown with single calendar by default', () => {
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const calendars = el.querySelectorAll('sny-calendar');
+    expect(calendars.length).toBe(1);
+  });
+
+  it('should render dual calendars when dualCalendar is true', () => {
+    fixture.componentInstance.dualCalendar.set(true);
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const calendars = el.querySelectorAll('sny-calendar');
+    expect(calendars.length).toBe(2);
+  });
+
+  it('should display formatted range', () => {
+    fixture.componentInstance.range.set({
+      start: new Date(2026, 2, 10),
+      end: new Date(2026, 2, 20),
+    });
+    fixture.detectChanges();
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Mar');
+    expect(trigger?.textContent).toContain('10');
+    expect(trigger?.textContent).toContain('20');
+  });
+
+  it('should render presets sidebar when presets provided', () => {
+    fixture.componentInstance.presets.set([
+      { label: 'Last 7 days', range: { start: new Date(), end: new Date() } },
+      { label: 'Last 30 days', range: { start: new Date(), end: new Date() } },
+    ]);
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const presetBtns = el.querySelectorAll('[class*="hover:bg-accent"]');
+    const presetLabels = Array.from(presetBtns).map((b) => b.textContent?.trim());
+    expect(presetLabels).toContain('Last 7 days');
+    expect(presetLabels).toContain('Last 30 days');
+  });
+
+  it('should clear value on clear button click', () => {
+    fixture.componentInstance.range.set({
+      start: new Date(2026, 2, 10),
+      end: new Date(2026, 2, 20),
+    });
+    fixture.detectChanges();
+    const clearBtn = el.querySelector('[aria-label="Clear date range"]') as HTMLButtonElement;
+    clearBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.range()).toBeNull();
+  });
+
+  it('should show navigation arrows in dual mode', () => {
+    fixture.componentInstance.dualCalendar.set(true);
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const prevBtn = el.querySelector('[aria-label="Previous month"]');
+    const nextBtn = el.querySelector('[aria-label="Next month"]');
+    expect(prevBtn).not.toBeNull();
+    expect(nextBtn).not.toBeNull();
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyDateRangePickerComponent],
+  template: `<sny-date-range-picker [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl<DateRange | null>(null);
+}
+
+describe('SnyDateRangePickerComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveFormHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  it('should update display when FormControl value changes', () => {
+    fixture.componentInstance.ctrl.setValue({
+      start: new Date(2026, 5, 10),
+      end: new Date(2026, 5, 20),
+    });
+    fixture.detectChanges();
+    const trigger = el.querySelector('button');
+    expect(trigger?.textContent).toContain('Jun');
+    expect(trigger?.textContent).toContain('10');
+  });
+
+  it('should disable via FormControl.disable()', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    const trigger = el.querySelector('button') as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
+  });
+});