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

package/src/lib/progress/progress.variants.ts

@@ -0,0 +1,43 @@
+import { cva } from 'class-variance-authority';
+
+export const progressTrackVariants = cva(
+  'relative w-full overflow-hidden rounded-full bg-secondary',
+  {
+    variants: {
+      size: {
+        sm: 'h-1.5',
+        md: 'h-2.5',
+        lg: 'h-4',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const progressBarVariants = cva(
+  'h-full rounded-full transition-all duration-300 ease-in-out',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary',
+        success: 'bg-green-600 dark:bg-green-500',
+        warning: 'bg-yellow-500 dark:bg-yellow-400',
+        error: 'bg-destructive',
+        info: 'bg-blue-600 dark:bg-blue-500',
+      },
+      indeterminate: {
+        true: 'animate-progress-indeterminate w-1/3',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      indeterminate: false,
+    },
+  }
+);
+
+export type ProgressVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type ProgressSize = 'sm' | 'md' | 'lg';

package/src/lib/radial-progress/index.ts

@@ -0,0 +1,5 @@
+export {
+  SnyRadialProgressComponent,
+  type RadialProgressSize,
+  type RadialProgressVariant,
+} from './radial-progress.component';

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

@@ -0,0 +1,41 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyRadialProgressComponent } from './radial-progress.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyRadialProgressComponent],
+  template: `<sny-radial-progress [value]="value()">{{ value() }}%</sny-radial-progress>`,
+})
+class TestHostComponent {
+  value = signal(75);
+}
+
+describe('SnyRadialProgressComponent', () => {
+  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-radial-progress');
+  });
+
+  it('should render with progressbar role', () => {
+    expect(host.getAttribute('role')).toBe('progressbar');
+  });
+
+  it('should set aria-valuenow', () => {
+    expect(host.getAttribute('aria-valuenow')).toBe('75');
+  });
+
+  it('should render SVG circles', () => {
+    const circles = host.querySelectorAll('circle');
+    expect(circles.length).toBe(2);
+  });
+
+  it('should project content', () => {
+    expect(host.textContent).toContain('75%');
+  });
+});

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

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type RadialProgressSize = 'sm' | 'md' | 'lg';
+export type RadialProgressVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+const sizeMap: Record<RadialProgressSize, number> = { sm: 48, md: 72, lg: 96 };
+
+const variantColorMap: Record<RadialProgressVariant, string> = {
+  default: 'stroke-primary',
+  success: 'stroke-green-600 dark:stroke-green-500',
+  warning: 'stroke-yellow-500',
+  error: 'stroke-destructive',
+  info: 'stroke-blue-600 dark:stroke-blue-500',
+};
+
+@Component({
+  selector: 'sny-radial-progress',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'progressbar',
+    '[attr.aria-valuenow]': 'value()',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': '100',
+    '[class]': '"inline-flex items-center justify-center"',
+  },
+  template: `
+    <div class="relative" [style.width.px]="svgSize()" [style.height.px]="svgSize()">
+      <svg [attr.width]="svgSize()" [attr.height]="svgSize()" class="-rotate-90">
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          class="stroke-muted"
+          [attr.stroke-width]="thickness()"
+        />
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          [class]="strokeClass()"
+          [attr.stroke-width]="thickness()"
+          [attr.stroke-dasharray]="circumference()"
+          [attr.stroke-dashoffset]="offset()"
+          stroke-linecap="round"
+          class="transition-all duration-300"
+        />
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <ng-content />
+      </div>
+    </div>
+  `,
+})
+export class SnyRadialProgressComponent {
+  readonly value = input(0);
+  readonly size = input<RadialProgressSize>('md');
+  readonly thickness = input(4);
+  readonly variant = input<RadialProgressVariant>('default');
+  readonly class = input<string>('');
+
+  readonly svgSize = computed(() => sizeMap[this.size()]);
+  readonly radius = computed(() => (this.svgSize() - this.thickness()) / 2);
+  readonly circumference = computed(() => 2 * Math.PI * this.radius());
+  readonly offset = computed(() => this.circumference() - (this.value() / 100) * this.circumference());
+
+  readonly strokeClass = computed(() => variantColorMap[this.variant()]);
+}

package/src/lib/radio/index.ts

@@ -0,0 +1,2 @@
+export { SnyRadioDirective } from './radio.directive';
+export { radioVariants, type RadioSize } from './radio.variants';

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

@@ -0,0 +1,46 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyRadioDirective } from './radio.directive';
+import type { RadioSize } from './radio.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyRadioDirective],
+  template: `<input type="radio" snyRadio [size]="size()" />`,
+})
+class TestHostComponent {
+  size = signal<RadioSize>('md');
+}
+
+describe('SnyRadioDirective', () => {
+  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');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('appearance-none');
+    expect(el.className).toContain('rounded-full');
+    expect(el.className).toContain('h-4');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-3.5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+  });
+});

package/src/lib/radio/radio.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { radioVariants, type RadioSize } from './radio.variants';
+
+@Directive({
+  selector: 'input[type="radio"][snyRadio]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyRadioDirective {
+  readonly size = input<RadioSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(radioVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/radio/radio.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const radioVariants = cva(
+  'appearance-none rounded-full border border-border bg-background transition-colors checked:border-primary checked:shadow-[inset_0_0_0_3px] checked:shadow-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 RadioSize = 'sm' | 'md' | 'lg';

package/src/lib/rating/index.ts

@@ -0,0 +1,2 @@
+export { SnyRatingComponent } from './rating.component';
+export { ratingVariants, type RatingSize, type RatingVariant } from './rating.variants';

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

@@ -0,0 +1,157 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyRatingComponent } from './rating.component';
+import type { RatingSize } from './rating.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyRatingComponent],
+  template: `
+    <sny-rating
+      [(value)]="value"
+      [max]="max()"
+      [readonly]="readonly()"
+      [size]="size()"
+      [half]="half()"
+    />
+  `,
+})
+class TestHostComponent {
+  value = signal(0);
+  max = signal(5);
+  readonly = signal(false);
+  size = signal<RatingSize>('md');
+  half = signal(false);
+  rating = viewChild(SnyRatingComponent);
+}
+
+describe('SnyRatingComponent', () => {
+  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-rating');
+  });
+
+  it('should render with slider role', () => {
+    expect(host.getAttribute('role')).toBe('slider');
+  });
+
+  it('should render correct number of stars', () => {
+    const stars = host.querySelectorAll('svg');
+    expect(stars.length).toBe(5);
+  });
+
+  it('should set aria-valuenow', () => {
+    expect(host.getAttribute('aria-valuenow')).toBe('0');
+    fixture.componentInstance.value.set(3);
+    fixture.detectChanges();
+    expect(host.getAttribute('aria-valuenow')).toBe('3');
+  });
+
+  it('should set value on star click', () => {
+    const stars = host.querySelectorAll('svg');
+    stars[2].dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(3);
+  });
+
+  it('should not change value when readonly', () => {
+    fixture.componentInstance.readonly.set(true);
+    fixture.detectChanges();
+    const stars = host.querySelectorAll('svg');
+    stars[2].dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(0);
+  });
+
+  it('should handle keyboard ArrowRight', () => {
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(1);
+  });
+
+  it('should handle keyboard ArrowLeft', () => {
+    fixture.componentInstance.value.set(3);
+    fixture.detectChanges();
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(2);
+  });
+
+  it('should handle Home and End keys', () => {
+    fixture.componentInstance.value.set(3);
+    fixture.detectChanges();
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(0);
+
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe(5);
+  });
+
+  it('should render with custom max', () => {
+    fixture.componentInstance.max.set(10);
+    fixture.detectChanges();
+    const stars = host.querySelectorAll('svg');
+    expect(stars.length).toBe(10);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyRatingComponent],
+  template: `<sny-rating [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(0);
+}
+
+describe('SnyRatingComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-rating');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(4);
+    fixture.detectChanges();
+    expect(host.getAttribute('aria-valuenow')).toBe('4');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    const stars = host.querySelectorAll('svg');
+    stars[2].dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(3);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    const stars = host.querySelectorAll('svg');
+    stars[2].dispatchEvent(new MouseEvent('click'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(0);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    host.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

package/src/lib/rating/rating.component.ts

@@ -0,0 +1,163 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { ratingVariants, type RatingSize, type RatingVariant } from './rating.variants';
+
+interface StarState {
+  index: number;
+  fill: 'full' | 'half' | 'empty';
+}
+
+@Component({
+  selector: 'sny-rating',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'slider',
+    'tabindex': '0',
+    '[attr.aria-valuenow]': 'value()',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': 'max()',
+    '[attr.aria-label]': '"Rating"',
+    '[attr.aria-readonly]': 'readonly() || null',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+    '(mouseleave)': 'onMouseLeave()',
+    '(blur)': 'onTouched()',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyRatingComponent), multi: true },
+  ],
+  template: `
+    @for (star of stars(); track star.index) {
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        [class]="starClass(star)"
+        (click)="onStarClick(star.index + 1)"
+        (mouseenter)="onStarHover(star.index + 1)"
+      >
+        @if (ratingVariant() === 'star') {
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        } @else {
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        }
+      </svg>
+    }
+  `,
+})
+export class SnyRatingComponent implements ControlValueAccessor {
+  readonly value = model(0);
+  readonly max = input(5);
+  readonly readonly = input(false);
+  readonly size = input<RatingSize>('md');
+  readonly ratingVariant = input<RatingVariant>('star');
+  readonly half = input(false);
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.readonly() || this._disabledByCva());
+
+  readonly hoverValue = signal<number | null>(null);
+
+  private _onChange: (value: number) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(val: number): void {
+    this.value.set(val ?? 0);
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  readonly displayValue = computed(() => this.hoverValue() ?? this.value());
+
+  readonly stars = computed<StarState[]>(() => {
+    const display = this.displayValue();
+    const m = this.max();
+    return Array.from({ length: m }, (_, i) => {
+      let fill: 'full' | 'half' | 'empty';
+      if (i + 1 <= display) {
+        fill = 'full';
+      } else if (this.half() && i + 0.5 <= display) {
+        fill = 'half';
+      } else {
+        fill = 'empty';
+      }
+      return { index: i, fill };
+    });
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      ratingVariants({ size: this.size() }),
+      this.isDisabled() && 'pointer-events-none',
+      this.class()
+    )
+  );
+
+  starClass(star: StarState): string {
+    const base = 'cursor-pointer transition-colors';
+    switch (star.fill) {
+      case 'full':
+        return cn(base, 'fill-yellow-400 stroke-yellow-400');
+      case 'half':
+        return cn(base, 'fill-yellow-400/50 stroke-yellow-400');
+      case 'empty':
+        return cn(base, 'fill-none stroke-muted-foreground');
+    }
+  }
+
+  onStarClick(index: number): void {
+    if (this.isDisabled()) return;
+    this.value.set(index);
+    this._onChange(index);
+  }
+
+  onStarHover(index: number): void {
+    if (this.isDisabled()) return;
+    this.hoverValue.set(index);
+  }
+
+  onMouseLeave(): void {
+    this.hoverValue.set(null);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.isDisabled()) return;
+    const step = this.half() ? 0.5 : 1;
+    let newVal: number | undefined;
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        newVal = Math.min(this.max(), this.value() + step);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        newVal = Math.max(0, this.value() - step);
+        break;
+      case 'Home':
+        event.preventDefault();
+        newVal = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        newVal = this.max();
+        break;
+    }
+    if (newVal !== undefined) {
+      this.value.set(newVal);
+      this._onChange(newVal);
+    }
+  }
+}

package/src/lib/rating/rating.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const ratingVariants = cva(
+  'inline-flex items-center gap-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded',
+  {
+    variants: {
+      size: {
+        sm: '[&_svg]:w-4 [&_svg]:h-4',
+        md: '[&_svg]:w-5 [&_svg]:h-5',
+        lg: '[&_svg]:w-7 [&_svg]:h-7',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingVariant = 'star' | 'heart';

package/src/lib/select/index.ts

@@ -0,0 +1,2 @@
+export { SnySelectComponent, type SelectOption } from './select.component';
+export { selectTriggerVariants, type SelectSize } from './select.variants';