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

package/src/lib/pagination/pagination.component.ts

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  paginationItemVariants,
+  type PaginationVariant,
+  type PaginationSize,
+} from './pagination.variants';
+
+function computePageRange(
+  totalPages: number,
+  currentPage: number,
+  siblingCount: number,
+  boundaryCount: number
+): (number | 'ellipsis')[] {
+  const range = (start: number, end: number) =>
+    Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+
+  const siblingsStart = Math.max(
+    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
+  );
+
+  const result: (number | 'ellipsis')[] = [...startPages];
+
+  if (siblingsStart > boundaryCount + 2) {
+    result.push('ellipsis');
+  } else if (boundaryCount + 1 < totalPages - boundaryCount) {
+    result.push(boundaryCount + 1);
+  }
+
+  result.push(...range(siblingsStart, siblingsEnd));
+
+  if (siblingsEnd < totalPages - boundaryCount - 1) {
+    result.push('ellipsis');
+  } else if (totalPages - boundaryCount > boundaryCount) {
+    result.push(totalPages - boundaryCount);
+  }
+
+  result.push(...endPages);
+
+  return [...new Set(result)].sort((a, b) => {
+    if (a === 'ellipsis') return 0;
+    if (b === 'ellipsis') return 0;
+    return a - b;
+  });
+}
+
+@Component({
+  selector: 'sny-pagination',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'navigation',
+    'aria-label': 'Pagination',
+  },
+  template: `
+    <div class="flex items-center gap-1">
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasPrev()"
+        [attr.aria-label]="'Go to previous page'"
+        (click)="prev()"
+      >
+        <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"><path d="m15 18-6-6 6-6"/></svg>
+      </button>
+
+      @for (page of pages(); track $index) {
+        @if (page === 'ellipsis') {
+          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
+        } @else {
+          <button
+            [class]="pageClass(page)"
+            [attr.aria-label]="'Page ' + page"
+            [attr.aria-current]="page === currentPage() ? 'page' : null"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasNext()"
+        [attr.aria-label]="'Go to next page'"
+        (click)="next()"
+      >
+        <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"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    </div>
+  `,
+})
+export class SnyPaginationComponent {
+  readonly currentPage = model(1);
+  readonly totalPages = input.required<number>();
+  readonly siblingCount = input(1);
+  readonly boundaryCount = input(1);
+  readonly size = input<PaginationSize>('md');
+  readonly variant = input<PaginationVariant>('default');
+  readonly class = input<string>('');
+
+  readonly pages = computed(() =>
+    computePageRange(this.totalPages(), this.currentPage(), this.siblingCount(), this.boundaryCount())
+  );
+
+  readonly hasPrev = computed(() => this.currentPage() > 1);
+  readonly hasNext = computed(() => this.currentPage() < this.totalPages());
+
+  goToPage(page: number | 'ellipsis'): void {
+    if (page === 'ellipsis') return;
+    this.currentPage.set(page);
+  }
+
+  prev(): void {
+    if (this.hasPrev()) this.currentPage.update((p) => p - 1);
+  }
+
+  next(): void {
+    if (this.hasNext()) this.currentPage.update((p) => p + 1);
+  }
+
+  pageClass(page: number): string {
+    return cn(
+      paginationItemVariants({
+        variant: this.variant(),
+        size: this.size(),
+        active: page === this.currentPage(),
+      })
+    );
+  }
+
+  navBtnClass(): string {
+    return cn(
+      paginationItemVariants({ variant: this.variant(), size: this.size(), active: false })
+    );
+  }
+}

package/src/lib/pagination/pagination.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const paginationItemVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        sm: 'h-8 w-8 text-xs',
+        md: 'h-9 w-9',
+        lg: 'h-10 w-10',
+      },
+      active: {
+        true: 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      active: false,
+    },
+  }
+);
+
+export type PaginationVariant = 'default' | 'outline' | 'ghost';
+export type PaginationSize = 'sm' | 'md' | 'lg';

package/src/lib/popover/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+  SNY_POPOVER,
+} from './popover.directives';

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

@@ -0,0 +1,147 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+} from './popover.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyPopoverDirective, SnyPopoverTriggerDirective, SnyPopoverContentDirective],
+  template: `
+    <div snyPopover [matchWidth]="matchWidth()" [closeOnOutside]="closeOnOutside()" [closeOnEscape]="closeOnEscape()" #pop="snyPopover">
+      <button snyPopoverTrigger>Open</button>
+      <div snyPopoverContent class="p-4">
+        <p>Popover content</p>
+        <button class="close-btn" (click)="pop.close()">Close</button>
+      </div>
+    </div>
+  `,
+})
+class TestHost {
+  matchWidth = signal(false);
+  closeOnOutside = signal(true);
+  closeOnEscape = signal(true);
+}
+
+describe('SnyPopoverDirective', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getTrigger(): HTMLButtonElement {
+    return el.querySelector('[snypopovertrigger]') as HTMLButtonElement;
+  }
+
+  function getContent(): HTMLElement | null {
+    return el.querySelector('[snyPopoverContent], [snypopovercontent]');
+  }
+
+  function isVisible(): boolean {
+    const content = getContent();
+    return content ? content.style.display !== 'none' : false;
+  }
+
+  it('should render trigger and hidden content', () => {
+    expect(getTrigger()).not.toBeNull();
+    expect(getContent()).not.toBeNull();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should open on trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on second trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should set aria-expanded on trigger', () => {
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('false');
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have aria-haspopup on trigger', () => {
+    expect(getTrigger().getAttribute('aria-haspopup')).toBe('dialog');
+  });
+
+  it('should have role=dialog on content', () => {
+    expect(getContent()?.getAttribute('role')).toBe('dialog');
+  });
+
+  it('should close on click outside', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on click outside when closeOnOutside=false', () => {
+    fixture.componentInstance.closeOnOutside.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on escape', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on escape when closeOnEscape=false', () => {
+    fixture.componentInstance.closeOnEscape.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close programmatically via template ref', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const closeBtn = el.querySelector('.close-btn') as HTMLButtonElement;
+    closeBtn.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+});

package/src/lib/popover/popover.directives.ts

@@ -0,0 +1,151 @@
+import {
+  Directive,
+  ElementRef,
+  InjectionToken,
+  OnDestroy,
+  computed,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_POPOVER = new InjectionToken<SnyPopoverDirective>('SnyPopover');
+
+@Directive({
+  selector: '[snyPopover]',
+  exportAs: 'snyPopover',
+  providers: [{ provide: SNY_POPOVER, useExisting: SnyPopoverDirective }],
+  host: {
+    '[class]': '"relative inline-block"',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
+})
+export class SnyPopoverDirective implements OnDestroy {
+  private readonly elRef = inject(ElementRef);
+
+  readonly matchWidth = input(false);
+  readonly offset = input(4);
+  readonly closeOnOutside = input(true);
+  readonly closeOnEscape = input(true);
+
+  readonly isOpen = signal(false);
+  readonly triggerEl = signal<HTMLElement | null>(null);
+  readonly panelEl = signal<HTMLElement | null>(null);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  toggle(): void {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open(): void {
+    this.isOpen.set(true);
+    this.addListeners();
+    setTimeout(() => this.updatePosition());
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    this.removeListeners();
+  }
+
+  updatePosition(): void {
+    const trigger = this.triggerEl();
+    const panel = this.panelEl();
+    if (!trigger || !panel) return;
+    const rect = trigger.getBoundingClientRect();
+    panel.style.top = `${rect.bottom + this.offset()}px`;
+    panel.style.left = `${rect.left}px`;
+    if (this.matchWidth()) {
+      panel.style.width = `${rect.width}px`;
+    }
+  }
+
+  private addListeners(): void {
+    this.removeListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeListeners(): 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;
+    }
+  }
+
+  onDocumentClick(event: MouseEvent): void {
+    if (this.closeOnOutside() && this.isOpen() && !this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  onEscape(): void {
+    if (this.closeOnEscape() && this.isOpen()) {
+      this.close();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeListeners();
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverTrigger]',
+  host: {
+    '(click)': 'popover.toggle()',
+    '[attr.aria-expanded]': 'popover.isOpen()',
+    'aria-haspopup': 'dialog',
+  },
+})
+export class SnyPopoverTriggerDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+
+  constructor() {
+    this.popover.triggerEl.set(this.elRef.nativeElement);
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverContent]',
+  host: {
+    'role': 'dialog',
+    '[style.display]': 'popover.isOpen() ? "" : "none"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyPopoverContentDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95',
+      this.class()
+    )
+  );
+
+  constructor() {
+    this.popover.panelEl.set(this.elRef.nativeElement);
+  }
+}

package/src/lib/progress/index.ts

@@ -0,0 +1,7 @@
+export { SnyProgressComponent } from './progress.component';
+export {
+  progressTrackVariants,
+  progressBarVariants,
+  type ProgressVariant,
+  type ProgressSize,
+} from './progress.variants';

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

@@ -0,0 +1,117 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyProgressComponent } from './progress.component';
+import type { ProgressVariant, ProgressSize } from './progress.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyProgressComponent],
+  template: `
+    <sny-progress
+      [value]="value()"
+      [max]="max()"
+      [variant]="variant()"
+      [size]="size()"
+      [indeterminate]="indeterminate()"
+      [label]="label()"
+    />
+  `,
+})
+class TestHostComponent {
+  value = signal(50);
+  max = signal(100);
+  variant = signal<ProgressVariant>('default');
+  size = signal<ProgressSize>('md');
+  indeterminate = signal(false);
+  label = signal('Loading');
+}
+
+describe('SnyProgressComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-progress');
+  });
+
+  it('should render with progressbar role', () => {
+    expect(host.getAttribute('role')).toBe('progressbar');
+  });
+
+  it('should set aria-valuenow to current value', () => {
+    expect(host.getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('should set aria-valuemin to 0', () => {
+    expect(host.getAttribute('aria-valuemin')).toBe('0');
+  });
+
+  it('should set aria-valuemax to max value', () => {
+    expect(host.getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  it('should set aria-label', () => {
+    expect(host.getAttribute('aria-label')).toBe('Loading');
+  });
+
+  it('should calculate percentage correctly', () => {
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.style.width).toBe('50%');
+  });
+
+  it('should update percentage when value changes', () => {
+    fixture.componentInstance.value.set(75);
+    fixture.detectChanges();
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.style.width).toBe('75%');
+    expect(host.getAttribute('aria-valuenow')).toBe('75');
+  });
+
+  it('should cap percentage at 100%', () => {
+    fixture.componentInstance.value.set(150);
+    fixture.detectChanges();
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.style.width).toBe('100%');
+  });
+
+  it('should omit aria-valuenow when indeterminate', () => {
+    fixture.componentInstance.indeterminate.set(true);
+    fixture.detectChanges();
+    expect(host.getAttribute('aria-valuenow')).toBeNull();
+  });
+
+  it('should apply indeterminate animation class', () => {
+    fixture.componentInstance.indeterminate.set(true);
+    fixture.detectChanges();
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.className).toContain('animate-progress-indeterminate');
+  });
+
+  it('should apply size variant', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    const track = host.querySelector('div') as HTMLElement;
+    expect(track.className).toContain('h-4');
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.className).toContain('bg-green-600');
+  });
+
+  it('should work with custom max value', () => {
+    fixture.componentInstance.max.set(200);
+    fixture.componentInstance.value.set(100);
+    fixture.detectChanges();
+    const bar = host.querySelector('div > div') as HTMLElement;
+    expect(bar.style.width).toBe('50%');
+    expect(host.getAttribute('aria-valuemax')).toBe('200');
+  });
+});

package/src/lib/progress/progress.component.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  progressTrackVariants,
+  progressBarVariants,
+  type ProgressVariant,
+  type ProgressSize,
+} from './progress.variants';
+
+@Component({
+  selector: 'sny-progress',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'progressbar',
+    '[attr.aria-valuenow]': 'indeterminate() ? null : value()',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': 'max()',
+    '[attr.aria-label]': 'label()',
+    '[class]': '"w-full"',
+  },
+  template: `
+    <div [class]="trackClass()">
+      <div
+        [class]="barClass()"
+        [style.width.%]="indeterminate() ? null : percentage()"
+      ></div>
+    </div>
+  `,
+  styles: `
+    @keyframes progress-indeterminate {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(400%); }
+    }
+    :host .animate-progress-indeterminate {
+      animation: progress-indeterminate 1.5s ease-in-out infinite;
+    }
+  `,
+})
+export class SnyProgressComponent {
+  readonly value = input(0);
+  readonly max = input(100);
+  readonly variant = input<ProgressVariant>('default');
+  readonly size = input<ProgressSize>('md');
+  readonly indeterminate = input(false);
+  readonly label = input('Progress');
+  readonly class = input<string>('');
+
+  readonly percentage = computed(() =>
+    Math.min(100, (this.value() / this.max()) * 100)
+  );
+
+  protected readonly trackClass = computed(() =>
+    cn(progressTrackVariants({ size: this.size() }), this.class())
+  );
+
+  protected readonly barClass = computed(() =>
+    cn(
+      progressBarVariants({
+        variant: this.variant(),
+        indeterminate: this.indeterminate(),
+      })
+    )
+  );
+}