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

package/src/lib/link/link.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { linkVariants, type LinkVariant } from './link.variants';
+
+@Directive({
+  selector: 'a[snyLink]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyLinkDirective {
+  readonly variant = input<LinkVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(linkVariants({ variant: this.variant() }), this.class())
+  );
+}

package/src/lib/link/link.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const linkVariants = cva(
+  'inline-flex items-center gap-1 underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded',
+  {
+    variants: {
+      variant: {
+        default: 'text-foreground underline hover:text-foreground/80',
+        primary: 'text-primary underline hover:text-primary/80',
+        secondary: 'text-muted-foreground underline hover:text-foreground',
+        hover: 'text-foreground no-underline hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type LinkVariant = 'default' | 'primary' | 'secondary' | 'hover';

package/src/lib/list/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyListDirective,
+  SnyListItemDirective,
+  SnyListItemIconDirective,
+  SnyListItemContentDirective,
+  SnyListItemActionDirective,
+  type ListVariant,
+} from './list.directives';

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

@@ -0,0 +1,65 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyListDirective, SnyListItemDirective, SnyListItemContentDirective, type ListVariant } from './list.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyListDirective, SnyListItemDirective, SnyListItemContentDirective],
+  template: `
+    <div snyList [variant]="variant()">
+      <div snyListItem [active]="active()" [disabled]="disabled()">
+        <div snyListItemContent>Item 1</div>
+      </div>
+      <div snyListItem>
+        <div snyListItemContent>Item 2</div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<ListVariant>('default');
+  active = signal(false);
+  disabled = signal(false);
+}
+
+describe('SnyListDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with list role', () => {
+    const list = fixture.nativeElement.querySelector('[snyList]');
+    expect(list.getAttribute('role')).toBe('list');
+  });
+
+  it('should render items with listitem role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyListItem]');
+    expect(items.length).toBe(2);
+    expect(items[0].getAttribute('role')).toBe('listitem');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    const list = fixture.nativeElement.querySelector('[snyList]');
+    expect(list.className).toContain('border');
+  });
+
+  it('should apply active state', () => {
+    fixture.componentInstance.active.set(true);
+    fixture.detectChanges();
+    const item = fixture.nativeElement.querySelector('[snyListItem]');
+    expect(item.className).toContain('bg-accent');
+  });
+
+  it('should set aria-disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    const item = fixture.nativeElement.querySelector('[snyListItem]');
+    expect(item.getAttribute('aria-disabled')).toBe('true');
+  });
+});

package/src/lib/list/list.directives.ts

@@ -0,0 +1,86 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type ListVariant = 'default' | 'bordered' | 'hover';
+
+@Directive({
+  selector: '[snyList]',
+  standalone: true,
+  host: {
+    'role': 'list',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyListDirective {
+  readonly variant = input<ListVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'bordered' ? 'divide-y divide-border border rounded-md' :
+      v === 'hover' ? '[&>[snyListItem]]:hover:bg-accent' :
+      '';
+    return cn('flex flex-col', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyListItem]',
+  standalone: true,
+  host: {
+    'role': 'listitem',
+    '[class]': 'computedClass()',
+    '[attr.aria-disabled]': 'disabled() || null',
+  },
+})
+export class SnyListItemDirective {
+  readonly active = input(false);
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex items-center gap-3 px-3 py-2 transition-colors',
+      this.active() && 'bg-accent text-accent-foreground',
+      this.disabled() && 'opacity-50 pointer-events-none',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyListItemIcon]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemIconDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0 text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyListItemContent]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 min-w-0', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyListItemAction]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemActionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0', this.class())
+  );
+}

package/src/lib/loader/index.ts

@@ -0,0 +1,2 @@
+export { SnyLoaderComponent } from './loader.component';
+export { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.variants';

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

@@ -0,0 +1,58 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyLoaderComponent } from './loader.component';
+import type { LoaderVariant, LoaderSize } from './loader.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyLoaderComponent],
+  template: `<sny-loader [variant]="variant()" [size]="size()" />`,
+})
+class TestHostComponent {
+  variant = signal<LoaderVariant>('spinner');
+  size = signal<LoaderSize>('md');
+}
+
+describe('SnyLoaderComponent', () => {
+  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('sny-loader');
+  });
+
+  it('should have status role', () => {
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('should render spinner by default', () => {
+    expect(el.querySelector('svg')).toBeTruthy();
+    expect(el.className).toContain('h-6');
+  });
+
+  it('should render dots variant', () => {
+    fixture.componentInstance.variant.set('dots');
+    fixture.detectChanges();
+    const dots = el.querySelectorAll('.rounded-full');
+    expect(dots.length).toBe(3);
+  });
+
+  it('should render bars variant', () => {
+    fixture.componentInstance.variant.set('bars');
+    fixture.detectChanges();
+    const bars = el.querySelectorAll('.rounded-sm');
+    expect(bars.length).toBe(4);
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-8');
+  });
+});

package/src/lib/loader/loader.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.variants';
+
+@Component({
+  selector: 'sny-loader',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'status',
+    '[attr.aria-label]': '"Loading"',
+  },
+  template: `
+    @switch (variant()) {
+      @case ('spinner') {
+        <svg class="animate-spin h-full w-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      }
+      @case ('dots') {
+        <span class="flex items-center gap-1">
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]"></span>
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]"></span>
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce"></span>
+        </span>
+      }
+      @case ('bars') {
+        <span class="flex items-end gap-0.5 h-full">
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.3s]" style="height:60%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.15s]" style="height:100%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm" style="height:40%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.2s]" style="height:80%"></span>
+        </span>
+      }
+    }
+  `,
+})
+export class SnyLoaderComponent {
+  readonly variant = input<LoaderVariant>('spinner');
+  readonly size = input<LoaderSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(loaderVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/loader/loader.variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const loaderVariants = cva(
+  'inline-flex items-center justify-center text-current',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LoaderVariant = 'spinner' | 'dots' | 'bars';

package/src/lib/modal/dialog-ref.ts

@@ -0,0 +1,19 @@
+import type { Observable } from 'rxjs';
+
+/** Structural interface for the subset of CDK DialogRef we consume. */
+interface CdkDialogRefLike<R> {
+  close(result?: R): void;
+  readonly closed: Observable<R | undefined>;
+}
+
+export class SnyDialogRef<R = unknown> {
+  constructor(private readonly cdkRef: CdkDialogRefLike<R>) {}
+
+  close(result?: R): void {
+    this.cdkRef.close(result);
+  }
+
+  get closed(): Observable<R | undefined> {
+    return this.cdkRef.closed;
+  }
+}

package/src/lib/modal/dialog.directives.ts

@@ -0,0 +1,90 @@
+import { Directive, computed, input, inject } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { cn } from '../core/utils/cn';
+
+@Directive({
+  selector: '[snyDialogHeader]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-1.5 text-center sm:text-left', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogTitle]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogTitleDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-lg font-semibold leading-none tracking-tight', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogDescription]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogDescriptionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogContent]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative bg-background rounded-sm border border-border shadow-lg p-6 w-full max-w-lg mx-auto',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyDialogFooter]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogClose]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick()',
+  },
+})
+export class SnyDialogCloseDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
+      this.class()
+    )
+  );
+
+  private readonly dialogRef = inject(DialogRef, { optional: true });
+
+  onClick(): void {
+    this.dialogRef?.close();
+  }
+}

package/src/lib/modal/dialog.service.spec.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { DialogModule } from '@angular/cdk/dialog';
+import { SnyDialogService } from './dialog.service';
+
+@Component({
+  standalone: true,
+  template: `<div>Dialog Content</div>`,
+})
+class TestDialogComponent {}
+
+describe('SnyDialogService', () => {
+  let service: SnyDialogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DialogModule],
+    });
+    service = TestBed.inject(SnyDialogService);
+  });
+
+  afterEach(() => {
+    service.closeAll();
+  });
+
+  it('should open a dialog', () => {
+    const ref = service.open(TestDialogComponent);
+    expect(ref).toBeTruthy();
+    ref.close();
+  });
+
+  it('should close a dialog', async () => {
+    const ref = service.open(TestDialogComponent);
+    let closed = false;
+    ref.closed.subscribe(() => (closed = true));
+    ref.close();
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(closed).toBe(true);
+  });
+
+  it('should close all dialogs', () => {
+    service.open(TestDialogComponent);
+    service.open(TestDialogComponent);
+    service.closeAll();
+  });
+
+  it('should accept width config', () => {
+    const ref = service.open(TestDialogComponent, { width: '600px' });
+    expect(ref).toBeTruthy();
+    ref.close();
+  });
+});

package/src/lib/modal/dialog.service.ts

@@ -0,0 +1,61 @@
+import { Injectable, inject, InjectionToken } from '@angular/core';
+import { Dialog, DialogRef as CdkDialogRef } from '@angular/cdk/dialog';
+import type { ComponentType } from '@angular/cdk/overlay';
+import { SnyDialogRef } from './dialog-ref';
+import { DEFAULT_DIALOG_CONFIG, type SnyDialogConfig } from './dialog.types';
+
+export const SNY_DIALOG_DATA = new InjectionToken<unknown>('SNY_DIALOG_DATA');
+
+@Injectable({ providedIn: 'root' })
+export class SnyDialogService {
+  private readonly cdkDialog = inject(Dialog);
+
+  open<T, R = unknown>(
+    component: ComponentType<T>,
+    config: SnyDialogConfig = {}
+  ): SnyDialogRef<R> {
+    const merged = { ...DEFAULT_DIALOG_CONFIG, ...config };
+
+    // CDK's disableClose controls both backdrop and ESC together.
+    // To support independent closeOnBackdrop / closeOnEsc, we disable both
+    // at the CDK level and handle them manually.
+    const disableClose = !merged.closeOnBackdrop || !merged.closeOnEsc;
+
+    const cdkRef: CdkDialogRef<R, T> = this.cdkDialog.open(component, {
+      width: merged.width,
+      maxWidth: merged.maxWidth,
+      disableClose,
+      hasBackdrop: true,
+      backdropClass: 'sny-dialog-backdrop',
+      panelClass: 'sny-dialog-panel',
+      ariaLabelledBy: merged.ariaLabelledBy,
+      ariaDescribedBy: merged.ariaDescribedBy,
+      data: merged.data,
+      providers: merged.data != null
+        ? [{ provide: SNY_DIALOG_DATA, useValue: merged.data }]
+        : [],
+    });
+
+    // When CDK disableClose is true, manually handle backdrop/ESC based on config
+    if (disableClose) {
+      if (merged.closeOnBackdrop) {
+        const sub = cdkRef.backdropClick.subscribe(() => cdkRef.close());
+        cdkRef.closed.subscribe(() => sub.unsubscribe());
+      }
+      if (merged.closeOnEsc) {
+        const sub = cdkRef.keydownEvents.subscribe(event => {
+          if (event.key === 'Escape') {
+            cdkRef.close();
+          }
+        });
+        cdkRef.closed.subscribe(() => sub.unsubscribe());
+      }
+    }
+
+    return new SnyDialogRef<R>(cdkRef);
+  }
+
+  closeAll(): void {
+    this.cdkDialog.closeAll();
+  }
+}

package/src/lib/modal/dialog.types.ts

@@ -0,0 +1,16 @@
+export interface SnyDialogConfig {
+  width?: string;
+  maxWidth?: string;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  data?: unknown;
+  ariaLabelledBy?: string;
+  ariaDescribedBy?: string;
+}
+
+export const DEFAULT_DIALOG_CONFIG: SnyDialogConfig = {
+  width: '28rem',
+  maxWidth: '90vw',
+  closeOnBackdrop: true,
+  closeOnEsc: true,
+};

package/src/lib/modal/index.ts

@@ -0,0 +1,11 @@
+export { SnyDialogService, SNY_DIALOG_DATA } from './dialog.service';
+export { SnyDialogRef } from './dialog-ref';
+export {
+  SnyDialogHeaderDirective,
+  SnyDialogTitleDirective,
+  SnyDialogDescriptionDirective,
+  SnyDialogContentDirective,
+  SnyDialogFooterDirective,
+  SnyDialogCloseDirective,
+} from './dialog.directives';
+export { type SnyDialogConfig } from './dialog.types';

package/src/lib/navbar/index.ts

@@ -0,0 +1,7 @@
+export {
+  SnyNavbarDirective,
+  SnyNavbarBrandDirective,
+  SnyNavbarContentDirective,
+  SnyNavbarEndDirective,
+  type NavbarVariant,
+} from './navbar.directives';

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

@@ -0,0 +1,59 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyNavbarDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarEndDirective, type NavbarVariant } from './navbar.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyNavbarDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarEndDirective],
+  template: `
+    <nav snyNavbar [variant]="variant()" [sticky]="sticky()">
+      <div snyNavbarBrand>Logo</div>
+      <div snyNavbarContent>Links</div>
+      <div snyNavbarEnd>Actions</div>
+    </nav>
+  `,
+})
+class TestHostComponent {
+  variant = signal<NavbarVariant>('default');
+  sticky = signal(false);
+}
+
+describe('SnyNavbarDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let nav: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    nav = fixture.nativeElement.querySelector('[snyNavbar]');
+  });
+
+  it('should apply default classes', () => {
+    expect(nav.className).toContain('bg-background');
+    expect(nav.className).toContain('flex');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    expect(nav.className).toContain('border-b');
+  });
+
+  it('should apply sticky class', () => {
+    fixture.componentInstance.sticky.set(true);
+    fixture.detectChanges();
+    expect(nav.className).toContain('sticky');
+    expect(nav.className).toContain('top-0');
+  });
+
+  it('should render brand, content, end sections', () => {
+    expect(fixture.nativeElement.querySelector('[snyNavbarBrand]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyNavbarContent]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyNavbarEnd]')).toBeTruthy();
+  });
+
+  it('should have default aria-label "Main navigation"', () => {
+    expect(nav.getAttribute('aria-label')).toBe('Main navigation');
+  });
+});