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

package/src/lib/carousel/carousel.directives.ts

@@ -0,0 +1,164 @@
+import {
+  Directive, InjectionToken, computed, contentChildren, inject, input, signal, effect, OnDestroy,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_CAROUSEL = new InjectionToken<SnyCarouselDirective>('SnyCarousel');
+
+@Directive({
+  selector: '[snyCarouselItem]',
+  standalone: true,
+  host: {
+    'role': 'group',
+    '[attr.aria-roledescription]': '"slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselItemDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('min-w-0 shrink-0 grow-0 basis-full pl-4', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselContent]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[style.transform]': 'transformStyle()',
+  },
+})
+export class SnyCarouselContentDirective {
+  private readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex -ml-4 transition-transform duration-300 ease-in-out', this.class())
+  );
+
+  protected readonly transformStyle = computed(() =>
+    `translateX(-${this.carousel.currentIndex() * 100}%)`
+  );
+}
+
+@Directive({
+  selector: '[snyCarousel]',
+  standalone: true,
+  exportAs: 'snyCarousel',
+  providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }],
+  host: {
+    'role': 'region',
+    '[attr.aria-roledescription]': '"carousel"',
+    'aria-label': 'Carousel',
+    'tabindex': '0',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyCarouselDirective implements OnDestroy {
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+  readonly loop = input(false);
+  readonly autoplay = input(0);
+  readonly class = input<string>('');
+
+  readonly items = contentChildren(SnyCarouselItemDirective, { descendants: true });
+  readonly currentIndex = signal(0);
+  readonly totalItems = computed(() => this.items().length);
+
+  private autoplayInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    effect(() => {
+      const ms = this.autoplay();
+      this.clearAutoplay();
+      if (ms > 0) {
+        this.autoplayInterval = setInterval(() => this.next(), ms);
+      }
+    });
+  }
+
+  next(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i >= total - 1) return this.loop() ? 0 : i;
+      return i + 1;
+    });
+  }
+
+  prev(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i <= 0) return this.loop() ? total - 1 : i;
+      return i - 1;
+    });
+  }
+
+  goTo(index: number): void {
+    this.currentIndex.set(Math.max(0, Math.min(index, this.totalItems() - 1)));
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.prev();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.next();
+        break;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearAutoplay();
+  }
+
+  private clearAutoplay(): void {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+      this.autoplayInterval = null;
+    }
+  }
+
+  protected readonly computedClass = computed(() =>
+    cn('relative overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselPrev]',
+  standalone: true,
+  host: {
+    '(click)': 'carousel.prev()',
+    '[attr.aria-label]': '"Previous slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselPrevDirective {
+  readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute left-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselNext]',
+  standalone: true,
+  host: {
+    '(click)': 'carousel.next()',
+    '[attr.aria-label]': '"Next slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselNextDirective {
+  readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute right-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}

package/src/lib/carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyCarouselDirective,
+  SnyCarouselContentDirective,
+  SnyCarouselItemDirective,
+  SnyCarouselPrevDirective,
+  SnyCarouselNextDirective,
+  SNY_CAROUSEL,
+} from './carousel.directives';

package/src/lib/chat-bubble/chat-bubble.directives.spec.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyChatBubbleDirective, SnyChatBubbleContentDirective, type ChatBubbleAlign, type ChatBubbleContentVariant } from './chat-bubble.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyChatBubbleDirective, SnyChatBubbleContentDirective],
+  template: `
+    <div snyChatBubble [align]="align()">
+      <div snyChatBubbleContent [variant]="variant()">Hello!</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  align = signal<ChatBubbleAlign>('start');
+  variant = signal<ChatBubbleContentVariant>('default');
+}
+
+describe('SnyChatBubbleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with article role', () => {
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.getAttribute('role')).toBe('article');
+  });
+
+  it('should apply start alignment by default', () => {
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.className).toContain('flex');
+    expect(bubble.className).not.toContain('flex-row-reverse');
+  });
+
+  it('should apply end alignment', () => {
+    fixture.componentInstance.align.set('end');
+    fixture.detectChanges();
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.className).toContain('flex-row-reverse');
+  });
+
+  it('should apply primary content variant', () => {
+    fixture.componentInstance.variant.set('primary');
+    fixture.detectChanges();
+    const content = fixture.nativeElement.querySelector('[snyChatBubbleContent]');
+    expect(content.className).toContain('bg-primary');
+  });
+});

package/src/lib/chat-bubble/chat-bubble.directives.ts

@@ -0,0 +1,102 @@
+import { Directive, InjectionToken, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type ChatBubbleAlign = 'start' | 'end';
+export type ChatBubbleContentVariant = 'default' | 'primary' | 'secondary' | 'accent';
+
+export const SNY_CHAT_BUBBLE = new InjectionToken<SnyChatBubbleDirective>('SnyChatBubble');
+
+@Directive({
+  selector: '[snyChatBubble]',
+  standalone: true,
+  providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }],
+  host: {
+    'role': 'article',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyChatBubbleDirective {
+  readonly align = input<ChatBubbleAlign>('start');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex gap-3 mb-4',
+      this.align() === 'end' && 'flex-row-reverse',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleAvatar]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleAvatarDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0 w-10 h-10 rounded-full overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleHeader]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mb-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleContent]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleContentDirective {
+  readonly variant = input<ChatBubbleContentVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'primary' ? 'bg-primary text-primary-foreground' :
+      v === 'secondary' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100' :
+      v === 'accent' ? 'bg-violet-100 text-violet-900 dark:bg-violet-900 dark:text-violet-100' :
+      'bg-muted';
+    return cn('rounded-lg px-3 py-2 text-sm max-w-[80%]', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyChatBubbleFooter]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mt-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleBody]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleBodyDirective {
+  private readonly chatBubble = inject(SNY_CHAT_BUBBLE);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col',
+      this.chatBubble.align() === 'end' && 'items-end',
+      this.class()
+    )
+  );
+}

package/src/lib/chat-bubble/index.ts

@@ -0,0 +1,11 @@
+export {
+  SnyChatBubbleDirective,
+  SnyChatBubbleAvatarDirective,
+  SnyChatBubbleHeaderDirective,
+  SnyChatBubbleContentDirective,
+  SnyChatBubbleFooterDirective,
+  SnyChatBubbleBodyDirective,
+  SNY_CHAT_BUBBLE,
+  type ChatBubbleAlign,
+  type ChatBubbleContentVariant,
+} from './chat-bubble.directives';

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

@@ -0,0 +1,57 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyCheckboxDirective } from './checkbox.directive';
+import type { CheckboxSize } from './checkbox.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyCheckboxDirective],
+  template: `<input type="checkbox" snyCheckbox [size]="size()" />`,
+})
+class TestHostComponent {
+  size = signal<CheckboxSize>('md');
+}
+
+describe('SnyCheckboxDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('input[type="checkbox"]');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('appearance-none');
+    expect(el.className).toContain('rounded-sm');
+    expect(el.className).toContain('border');
+  });
+
+  it('should apply default md size', () => {
+    expect(el.className).toContain('h-4');
+    expect(el.className).toContain('w-4');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-3.5');
+    expect(el.className).toContain('w-3.5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+    expect(el.className).toContain('w-5');
+  });
+
+  it('should have checked styles in class list', () => {
+    expect(el.className).toContain('checked:bg-primary');
+  });
+});

package/src/lib/checkbox/checkbox.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { checkboxVariants, type CheckboxSize } from './checkbox.variants';
+
+@Directive({
+  selector: 'input[type="checkbox"][snyCheckbox]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCheckboxDirective {
+  readonly size = input<CheckboxSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(checkboxVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/checkbox/checkbox.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const checkboxVariants = cva(
+  'peer appearance-none shrink-0 rounded-sm border border-border bg-background transition-colors checked:bg-primary checked:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-3.5 w-3.5',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';

package/src/lib/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { SnyCheckboxDirective } from './checkbox.directive';
+export { checkboxVariants, type CheckboxSize } from './checkbox.variants';

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);
+  });
+});