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

package/src/lib/color-picker/color-picker.utils.ts

@@ -0,0 +1,183 @@
+import type { RGB, HSL, HSV, ColorFormat } from './color-picker.types';
+
+export function hexToRgb(hex: string): RGB | null {
+  const clean = hex.replace(/^#/, '');
+  if (!/^[0-9a-fA-F]+$/.test(clean)) return null;
+  if (clean.length === 3) {
+    const r = parseInt(clean[0] + clean[0], 16);
+    const g = parseInt(clean[1] + clean[1], 16);
+    const b = parseInt(clean[2] + clean[2], 16);
+    return { r, g, b };
+  }
+  if (clean.length === 6) {
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  return null;
+}
+
+export function rgbToHex(rgb: RGB): string {
+  const toHex = (n: number) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0');
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+
+export function rgbToHsl(rgb: RGB): HSL {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+export function hslToRgb(hsl: HSL): RGB {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return { r: v, g: v, b: v };
+  }
+
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+
+  return {
+    r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, h) * 255),
+    b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+  };
+}
+
+export function rgbToHsv(rgb: RGB): HSV {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+
+  if (max !== min) {
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return { h: Math.round(h * 360), s, v };
+}
+
+export function hsvToRgb(hsv: HSV): RGB {
+  const h = hsv.h / 360;
+  const s = hsv.s;
+  const v = hsv.v;
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+
+  let r: number, g: number, b: number;
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    default: r = v; g = p; b = q; break;
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+}
+
+export function parseColor(input: string): RGB | null {
+  const trimmed = input.trim().toLowerCase();
+
+  // HEX
+  if (trimmed.startsWith('#')) {
+    return hexToRgb(trimmed);
+  }
+
+  // rgb(r, g, b)
+  const rgbMatch = trimmed.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: Math.min(255, parseInt(rgbMatch[1])),
+      g: Math.min(255, parseInt(rgbMatch[2])),
+      b: Math.min(255, parseInt(rgbMatch[3])),
+    };
+  }
+
+  // hsl(h, s%, l%)
+  const hslMatch = trimmed.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/);
+  if (hslMatch) {
+    return hslToRgb({
+      h: Math.min(360, parseInt(hslMatch[1])),
+      s: Math.min(100, parseInt(hslMatch[2])),
+      l: Math.min(100, parseInt(hslMatch[3])),
+    });
+  }
+
+  return null;
+}
+
+export function formatColor(rgb: RGB, format: ColorFormat, alpha?: number): string {
+  switch (format) {
+    case 'hex':
+      return rgbToHex(rgb);
+    case 'rgb':
+      if (alpha !== undefined && alpha < 1) {
+        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+      }
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    case 'hsl': {
+      const hsl = rgbToHsl(rgb);
+      if (alpha !== undefined && alpha < 1) {
+        return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+      }
+      return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+    }
+  }
+}
+
+export function isValidColor(input: string): boolean {
+  return parseColor(input) !== null;
+}

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

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const colorPickerTriggerVariants = cva(
+  'inline-flex w-full items-center gap-2 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 ColorPickerSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,20 @@
+export { SnyColorPickerComponent } from './color-picker.component';
+export { colorPickerTriggerVariants, type ColorPickerSize } from './color-picker.variants';
+export type {
+  ColorFormat,
+  RGB,
+  HSL,
+  HSV,
+  ColorPickerPreset,
+} from './color-picker.types';
+export {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsl,
+  hslToRgb,
+  rgbToHsv,
+  hsvToRgb,
+  parseColor,
+  formatColor,
+  isValidColor,
+} from './color-picker.utils';

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

@@ -0,0 +1,151 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyComboboxComponent, type ComboboxOption } from './combobox.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyComboboxComponent],
+  template: `<sny-combobox [options]="options" [(value)]="value" placeholder="Select..." searchPlaceholder="Search..." />`,
+})
+class TestHostComponent {
+  value = signal('');
+  options: ComboboxOption[] = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+  ];
+}
+
+describe('SnyComboboxComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+  let trigger: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('sny-combobox');
+    trigger = el.querySelector('button')!;
+  });
+
+  it('should render the trigger button', () => {
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('role')).toBe('combobox');
+  });
+
+  it('should show placeholder when no value selected', () => {
+    expect(trigger.textContent).toContain('Select...');
+  });
+
+  it('should set aria-expanded=false initially', () => {
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should open dropdown on trigger click', () => {
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    const listbox = el.querySelector('[role="listbox"]');
+    expect(listbox).toBeTruthy();
+  });
+
+  it('should show search input in dropdown', () => {
+    trigger.click();
+    fixture.detectChanges();
+    const searchInput = el.querySelector('input[type="text"]') as HTMLInputElement;
+    expect(searchInput).toBeTruthy();
+    expect(searchInput.getAttribute('placeholder')).toBe('Search...');
+  });
+
+  it('should show all options when no query', () => {
+    trigger.click();
+    fixture.detectChanges();
+    const options = el.querySelectorAll('[role="option"]');
+    expect(options.length).toBe(3);
+  });
+
+  it('should select option on click and show label', () => {
+    trigger.click();
+    fixture.detectChanges();
+
+    const option = el.querySelector('[role="option"]') as HTMLElement;
+    option.dispatchEvent(new Event('mousedown'));
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.value()).toBe('us');
+    expect(trigger.textContent).toContain('United States');
+  });
+
+  it('should close dropdown after selecting', () => {
+    trigger.click();
+    fixture.detectChanges();
+
+    const option = el.querySelector('[role="option"]') as HTMLElement;
+    option.dispatchEvent(new Event('mousedown'));
+    fixture.detectChanges();
+
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyComboboxComponent],
+  template: `<sny-combobox [options]="options" [formControl]="ctrl" placeholder="Select..." />`,
+})
+class ReactiveFormHost {
+  options: ComboboxOption[] = [
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+  ];
+  ctrl = new FormControl('');
+}
+
+describe('SnyComboboxComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let el: HTMLElement;
+  let trigger: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('sny-combobox');
+    trigger = el.querySelector('button')!;
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue('uk');
+    fixture.detectChanges();
+    expect(trigger.textContent).toContain('United Kingdom');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    trigger.click();
+    fixture.detectChanges();
+    const option = el.querySelector('[role="option"]') as HTMLElement;
+    option.dispatchEvent(new Event('mousedown'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe('us');
+  });
+
+  it('should handle FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    trigger.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

package/src/lib/combobox/combobox.component.ts

@@ -0,0 +1,264 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { comboboxTriggerVariants, type ComboboxSize } from './combobox.variants';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+@Component({
+  selector: 'sny-combobox',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyComboboxComponent), multi: true },
+  ],
+  template: `
+    <!-- Trigger button -->
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="listbox"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (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="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+    </button>
+
+    <!-- Dropdown popover -->
+    @if (open()) {
+      <div
+        #dropdownEl
+        class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
+      >
+        <!-- Search input -->
+        <div class="flex items-center border-b border-border px-3">
+          <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="mr-2 shrink-0 opacity-50"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input
+            #searchEl
+            type="text"
+            class="flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+            [placeholder]="searchPlaceholder()"
+            [value]="query()"
+            (input)="onSearchInput($event)"
+            (keydown)="onKeydown($event)"
+          />
+        </div>
+
+        <!-- Options list -->
+        @if (filtered().length > 0) {
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
+            @for (opt of filtered(); track opt.value; let i = $index) {
+              <li
+                role="option"
+                [id]="'sny-cb-opt-' + opt.value"
+                [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>
+        } @else {
+          <div class="py-6 text-center text-sm text-muted-foreground">No results found.</div>
+        }
+      </div>
+    }
+  `,
+})
+export class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
+  readonly options = input<ComboboxOption[]>([]);
+  readonly placeholder = input('Select...');
+  readonly searchPlaceholder = input('Search...');
+  readonly size = input<ComboboxSize>('md');
+  readonly class = input<string>('');
+  readonly value = model<string>('');
+
+  readonly open = signal(false);
+  readonly query = signal('');
+  readonly activeIndex = signal(0);
+
+  private readonly _disabledByCva = signal(false);
+
+  private readonly triggerRef = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+  private readonly searchRef = viewChild<ElementRef<HTMLInputElement>>('searchEl');
+  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 = () => {};
+
+  writeValue(val: string): void {
+    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 ?? '';
+  });
+
+  readonly filtered = computed(() => {
+    const q = this.query().toLowerCase();
+    if (!q) return this.options();
+    return this.options().filter(o => o.label.toLowerCase().includes(q));
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(comboboxTriggerVariants({ 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.updateDropdownPosition();
+      this.open.set(true);
+      this.query.set('');
+      this.activeIndex.set(0);
+      this.addGlobalListeners();
+      setTimeout(() => {
+        this.updateDropdownPosition();
+        this.searchRef()?.nativeElement.focus();
+      });
+    }
+  }
+
+  close(): void {
+    this.open.set(false);
+    this.query.set('');
+    this.removeGlobalListeners();
+  }
+
+  onSearchInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.query.set(val);
+    this.activeIndex.set(0);
+  }
+
+  select(opt: ComboboxOption): void {
+    this.value.set(opt.value);
+    this._onChange(opt.value);
+    this.close();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const items = this.filtered();
+    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':
+        event.preventDefault();
+        if (items[this.activeIndex()]) {
+          this.select(items[this.activeIndex()]);
+        }
+        break;
+      case 'Escape':
+        this.close();
+        break;
+    }
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+}

package/src/lib/combobox/combobox.variants.ts

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

package/src/lib/combobox/index.ts

@@ -0,0 +1,2 @@
+export { SnyComboboxComponent, type ComboboxOption } from './combobox.component';
+export { comboboxTriggerVariants, type ComboboxSize } from './combobox.variants';