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

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

@@ -0,0 +1,60 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStatDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatDescriptionDirective, type StatDescriptionVariant } from './stat.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyStatDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatDescriptionDirective],
+  template: `
+    <div snyStat>
+      <div snyStatTitle>Total Revenue</div>
+      <div snyStatValue>$45,231</div>
+      <div snyStatDescription [variant]="descVariant()">+20.1% from last month</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  descVariant = signal<StatDescriptionVariant>('default');
+}
+
+describe('SnyStatDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render stat sections', () => {
+    expect(fixture.nativeElement.querySelector('[snyStat]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatTitle]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatValue]')).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('[snyStatDescription]')).toBeTruthy();
+  });
+
+  it('should apply success variant to description', () => {
+    fixture.componentInstance.descVariant.set('success');
+    fixture.detectChanges();
+    const desc = fixture.nativeElement.querySelector('[snyStatDescription]');
+    expect(desc.className).toContain('text-green-600');
+  });
+
+  it('should apply error variant to description', () => {
+    fixture.componentInstance.descVariant.set('error');
+    fixture.detectChanges();
+    const desc = fixture.nativeElement.querySelector('[snyStatDescription]');
+    expect(desc.className).toContain('text-destructive');
+  });
+
+  it('should have auto-generated id on title', () => {
+    const title = fixture.nativeElement.querySelector('[snyStatTitle]');
+    expect(title.id).toContain('sny-stat-title-');
+  });
+
+  it('should set aria-labelledby on value pointing to title id', () => {
+    const title = fixture.nativeElement.querySelector('[snyStatTitle]');
+    const value = fixture.nativeElement.querySelector('[snyStatValue]');
+    expect(value.getAttribute('aria-labelledby')).toBe(title.id);
+  });
+});

package/src/lib/stat/stat.directives.ts

@@ -0,0 +1,84 @@
+import { Directive, InjectionToken, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_STAT = new InjectionToken<SnyStatDirective>('SnyStat');
+
+let statIdCounter = 0;
+
+@Directive({
+  selector: '[snyStat]',
+  standalone: true,
+  providers: [{ provide: SNY_STAT, useExisting: SnyStatDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatDirective {
+  readonly class = input<string>('');
+  readonly titleId = `sny-stat-title-${++statIdCounter}`;
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-0.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyStatTitle]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[id]': 'stat.titleId',
+  },
+})
+export class SnyStatTitleDirective {
+  readonly class = input<string>('');
+  readonly stat = inject(SNY_STAT);
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyStatValue]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-labelledby]': 'stat.titleId',
+  },
+})
+export class SnyStatValueDirective {
+  readonly class = input<string>('');
+  readonly stat = inject(SNY_STAT);
+  protected readonly computedClass = computed(() =>
+    cn('text-2xl font-bold', this.class())
+  );
+}
+
+export type StatDescriptionVariant = 'default' | 'success' | 'error';
+
+@Directive({
+  selector: '[snyStatDescription]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatDescriptionDirective {
+  readonly variant = input<StatDescriptionVariant>('default');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'success' ? 'text-green-600 dark:text-green-400' :
+      v === 'error' ? 'text-destructive' :
+      'text-muted-foreground';
+    return cn('text-xs', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyStatFigure]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyStatFigureDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-muted-foreground', this.class())
+  );
+}

package/src/lib/status/index.ts

@@ -0,0 +1,2 @@
+export { SnyStatusDirective } from './status.directive';
+export { statusVariants, type StatusVariant, type StatusSize } from './status.variants';

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

@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStatusDirective } from './status.directive';
+import type { StatusVariant } from './status.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyStatusDirective],
+  template: `<span snyStatus [variant]="variant()" [pulse]="pulse()"></span>`,
+})
+class TestHostComponent {
+  variant = signal<StatusVariant>('default');
+  pulse = signal(false);
+}
+
+describe('SnyStatusDirective', () => {
+  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('[snyStatus]');
+  });
+
+  it('should have status role', () => {
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-green-500');
+    expect(el.getAttribute('aria-label')).toBe('Online');
+  });
+
+  it('should apply pulse animation', () => {
+    fixture.componentInstance.pulse.set(true);
+    fixture.detectChanges();
+    expect(el.className).toContain('animate-pulse');
+  });
+});

package/src/lib/status/status.directive.ts

@@ -0,0 +1,38 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { statusVariants, type StatusVariant, type StatusSize } from './status.variants';
+
+const variantLabels: Record<StatusVariant, string> = {
+  default: 'Active',
+  success: 'Online',
+  warning: 'Away',
+  error: 'Error',
+  info: 'Info',
+  neutral: 'Offline',
+};
+
+@Directive({
+  selector: '[snyStatus]',
+  standalone: true,
+  host: {
+    'role': 'status',
+    '[attr.aria-label]': 'ariaLabel()',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyStatusDirective {
+  readonly variant = input<StatusVariant>('default');
+  readonly size = input<StatusSize>('md');
+  readonly pulse = input(false);
+  readonly class = input<string>('');
+
+  protected readonly ariaLabel = computed(() => variantLabels[this.variant()]);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      statusVariants({ variant: this.variant(), size: this.size() }),
+      this.pulse() && 'animate-pulse',
+      this.class()
+    )
+  );
+}

package/src/lib/status/status.variants.ts

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority';
+
+export const statusVariants = cva('inline-block rounded-full', {
+  variants: {
+    variant: {
+      default: 'bg-primary',
+      success: 'bg-green-500',
+      warning: 'bg-yellow-500',
+      error: 'bg-destructive',
+      info: 'bg-blue-500',
+      neutral: 'bg-muted-foreground',
+    },
+    size: {
+      xs: 'h-1.5 w-1.5',
+      sm: 'h-2 w-2',
+      md: 'h-2.5 w-2.5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+});
+
+export type StatusVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export type StatusSize = 'xs' | 'sm' | 'md';

package/src/lib/steps/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyStepsDirective,
+  SnyStepDirective,
+  SNY_STEPS,
+  type StepStatus,
+  type StepsOrientation,
+  type StepsSize,
+} from './steps.directives';

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

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStepsDirective, SnyStepDirective, type StepStatus } from './steps.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyStepsDirective, SnyStepDirective],
+  template: `
+    <div snySteps>
+      <div snyStep status="completed">Register</div>
+      <div snyStep [status]="activeStatus()">Payment</div>
+      <div snyStep status="default">Confirm</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  activeStatus = signal<StepStatus>('active');
+}
+
+describe('SnyStepsDirective', () => {
+  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 steps = fixture.nativeElement.querySelector('[snySteps]');
+    expect(steps.getAttribute('role')).toBe('list');
+  });
+
+  it('should render steps with listitem role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items.length).toBe(3);
+    items.forEach((item: HTMLElement) => {
+      expect(item.getAttribute('role')).toBe('listitem');
+    });
+  });
+
+  it('should mark active step with aria-current', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items[1].getAttribute('aria-current')).toBe('step');
+    expect(items[0].getAttribute('aria-current')).toBeNull();
+  });
+
+  it('should apply completed styling', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items[0].className).toContain('text-primary');
+  });
+});

package/src/lib/steps/steps.directives.ts

@@ -0,0 +1,80 @@
+import { Directive, InjectionToken, computed, contentChildren, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_STEPS = new InjectionToken<SnyStepsDirective>('SnySteps');
+
+export type StepStatus = 'default' | 'active' | 'completed' | 'error';
+export type StepsOrientation = 'horizontal' | 'vertical';
+export type StepsSize = 'sm' | 'md' | 'lg';
+
+@Directive({
+  selector: '[snyStep]',
+  standalone: true,
+  host: {
+    'role': 'listitem',
+    '[class]': 'computedClass()',
+    '[attr.aria-current]': 'status() === "active" ? "step" : null',
+  },
+})
+export class SnyStepDirective {
+  readonly status = input<StepStatus>('default');
+  readonly icon = input<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const s = this.status();
+    const base = 'flex items-center gap-2';
+
+    // Step indicator via before: pseudo-element
+    const indicatorBase = 'before:flex before:items-center before:justify-center before:w-8 before:h-8 before:rounded-full before:border-2 before:text-xs before:shrink-0';
+
+    const statusIndicator =
+      s === 'completed' ? 'before:bg-primary before:border-primary before:text-primary-foreground before:content-["✓"]' :
+      s === 'active' ? 'before:border-primary before:text-primary before:content-["●"]' :
+      s === 'error' ? 'before:border-destructive before:text-destructive before:content-["!"]' :
+      'before:border-muted-foreground/30 before:text-muted-foreground before:content-["○"]';
+
+    const statusClass =
+      s === 'completed' ? 'text-primary' :
+      s === 'active' ? 'text-primary font-medium' :
+      s === 'error' ? 'text-destructive' :
+      'text-muted-foreground';
+
+    return cn(base, indicatorBase, statusIndicator, statusClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snySteps]',
+  standalone: true,
+  exportAs: 'snySteps',
+  providers: [{ provide: SNY_STEPS, useExisting: SnyStepsDirective }],
+  host: {
+    'role': 'list',
+    'aria-label': 'Progress steps',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyStepsDirective {
+  readonly orientation = input<StepsOrientation>('horizontal');
+  readonly size = input<StepsSize>('md');
+  readonly class = input<string>('');
+
+  readonly steps = contentChildren(SnyStepDirective);
+
+  readonly activeIndex = computed(() => {
+    const s = this.steps();
+    return s.findIndex((step) => step.status() === 'active');
+  });
+
+  protected readonly computedClass = computed(() => {
+    const o = this.orientation();
+    const s = this.size();
+    const base = 'flex';
+    const orientationClass = o === 'horizontal'
+      ? 'flex-row items-center gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:flex-1 [&>*+*]:before:h-px [&>*+*]:before:bg-border [&>*+*]:before:mx-2 [&>*+*]:before:min-w-[2rem]'
+      : 'flex-col gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:w-px [&>*+*]:before:h-4 [&>*+*]:before:bg-border [&>*+*]:before:ml-4';
+    const sizeClass = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-base' : 'text-sm';
+    return cn(base, orientationClass, sizeClass, this.class());
+  });
+}

package/src/lib/switch/index.ts

@@ -0,0 +1,2 @@
+export { SnySwitchComponent } from './switch.component';
+export { switchTrackVariants, type SwitchSize } from './switch.variants';

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

@@ -0,0 +1,98 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnySwitchComponent } from './switch.component';
+
+@Component({
+  standalone: true,
+  imports: [SnySwitchComponent],
+  template: `<sny-switch [(checked)]="checked" [disabled]="disabled()" />`,
+})
+class TestHostComponent {
+  checked = signal(false);
+  disabled = signal(false);
+}
+
+describe('SnySwitchComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should have switch role', () => {
+    expect(button.getAttribute('role')).toBe('switch');
+  });
+
+  it('should be unchecked by default', () => {
+    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(button.className).toContain('bg-input');
+  });
+
+  it('should toggle on click', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-checked')).toBe('true');
+    expect(button.className).toContain('bg-primary');
+  });
+
+  it('should not toggle when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnySwitchComponent],
+  template: `<sny-switch [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(false);
+}
+
+describe('SnySwitchComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(true);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    button.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

package/src/lib/switch/switch.component.ts

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { switchTrackVariants, switchThumbSize, switchThumbTranslate, type SwitchSize } from './switch.variants';
+
+@Component({
+  selector: 'sny-switch',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'inline-flex' },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySwitchComponent), multi: true },
+  ],
+  template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked()"
+      [disabled]="isDisabled()"
+      [class]="trackClass()"
+      (click)="checked.set(!checked())"
+      (blur)="onTouched()"
+    >
+      <span [class]="thumbClass()"></span>
+    </button>
+  `,
+})
+export class SnySwitchComponent implements ControlValueAccessor {
+  readonly checked = model(false);
+  readonly disabled = input(false);
+  readonly size = input<SwitchSize>('md');
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private _onChange: (value: boolean) => void = () => {};
+  protected onTouched: () => void = () => {};
+  private _writing = false;
+
+  constructor() {
+    effect(() => {
+      const val = this.checked();
+      if (this._writing) {
+        this._writing = false;
+        return;
+      }
+      this._onChange(val);
+    });
+  }
+
+  writeValue(val: boolean): void {
+    this._writing = true;
+    this.checked.set(val ?? false);
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  protected readonly trackClass = computed(() =>
+    cn(
+      switchTrackVariants({ size: this.size() }),
+      this.checked() ? 'bg-primary' : 'bg-input',
+      this.class()
+    )
+  );
+
+  protected readonly thumbClass = computed(() =>
+    cn(
+      'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+      switchThumbSize[this.size()],
+      this.checked() ? switchThumbTranslate[this.size()] : 'translate-x-0'
+    )
+  );
+}

package/src/lib/switch/switch.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const switchTrackVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors 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-5 w-9',
+        md: 'h-6 w-11',
+        lg: 'h-7 w-14',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const switchThumbSize: Record<string, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const switchThumbTranslate: Record<string, string> = {
+  sm: 'translate-x-4',
+  md: 'translate-x-5',
+  lg: 'translate-x-7',
+};
+
+export type SwitchSize = 'sm' | 'md' | 'lg';

package/src/lib/table/index.ts

@@ -0,0 +1,12 @@
+export {
+  SnyTableDirective,
+  SnyTableHeaderDirective,
+  SnyTableBodyDirective,
+  SnyTableRowDirective,
+  SnyTableHeadDirective,
+  SnyTableCellDirective,
+  SnyTableFooterDirective,
+  SnyTableCaptionDirective,
+  SNY_TABLE,
+} from './table.directives';
+export { tableVariants, tableCellVariants, type TableVariant, type TableDensity } from './table.variants';