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

package/src/lib/file-input/file-input.component.ts

@@ -0,0 +1,168 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+  ElementRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import {
+  fileInputVariants,
+  type FileInputVariant,
+  type FileInputSize,
+} from './file-input.variants';
+
+@Component({
+  selector: 'sny-file-input',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': '"w-full"',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyFileInputComponent), multi: true },
+  ],
+  template: `
+    <label
+      [class]="labelClass()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="placeholder()"
+        [attr.aria-invalid]="variant() === 'error' || null"
+        (change)="onFileSelected($event)"
+        (blur)="onTouched()"
+      />
+      <span class="truncate text-muted-foreground">{{ fileName() }}</span>
+    </label>
+  `,
+})
+export class SnyFileInputComponent implements ControlValueAccessor {
+  readonly accept = input('');
+  readonly multiple = input(false);
+  readonly disabled = input(false);
+  readonly placeholder = input('Choose file...');
+  readonly variant = input<FileInputVariant>('default');
+  readonly size = input<FileInputSize>('md');
+  readonly maxSize = input(0);
+  readonly class = input<string>('');
+
+  readonly value = model<FileList | null>(null);
+  readonly fileChange = output<FileList>();
+  readonly error = output<string>();
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private readonly fileInputRef = viewChild<ElementRef<HTMLInputElement>>('fileInput');
+  readonly isDragOver = signal(false);
+
+  private _onChange: (value: FileList | null) => void = () => {};
+  protected onTouched: () => void = () => {};
+  private _writing = false;
+
+  constructor() {
+    effect(() => {
+      const val = this.value();
+      if (this._writing) {
+        this._writing = false;
+        return;
+      }
+      this._onChange(val);
+    });
+  }
+
+  writeValue(val: FileList | null): void {
+    this._writing = true;
+    this.value.set(val ?? null);
+  }
+
+  registerOnChange(fn: (value: FileList | null) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  readonly fileName = computed(() => {
+    const files = this.value();
+    if (!files || files.length === 0) return this.placeholder();
+    if (files.length === 1) return files[0].name;
+    return `${files.length} files selected`;
+  });
+
+  protected readonly labelClass = computed(() =>
+    cn(
+      fileInputVariants({ variant: this.variant(), size: this.size() }),
+      this.isDragOver() && 'ring-2 ring-ring',
+      this.class()
+    )
+  );
+
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files) {
+      this.processFiles(input.files);
+    }
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    if (!this.isDisabled()) {
+      this.isDragOver.set(true);
+    }
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver.set(false);
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver.set(false);
+    if (!this.isDisabled() && event.dataTransfer?.files) {
+      this.processFiles(event.dataTransfer.files);
+    }
+  }
+
+  clear(): void {
+    this.value.set(null);
+    const inputEl = this.fileInputRef()?.nativeElement;
+    if (inputEl) inputEl.value = '';
+  }
+
+  private processFiles(files: FileList): void {
+    const maxSize = this.maxSize();
+    if (maxSize > 0) {
+      for (let i = 0; i < files.length; i++) {
+        if (files[i].size > maxSize) {
+          this.error.emit(`File "${files[i].name}" exceeds maximum size of ${maxSize} bytes`);
+          return;
+        }
+      }
+    }
+    this.value.set(files);
+    this.fileChange.emit(files);
+  }
+}

package/src/lib/file-input/file-input.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const fileInputVariants = cva(
+  'flex w-full cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+      },
+      size: {
+        sm: 'h-8 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-12 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type FileInputVariant = 'default' | 'error';
+export type FileInputSize = 'sm' | 'md' | 'lg';

package/src/lib/file-input/index.ts

@@ -0,0 +1,6 @@
+export { SnyFileInputComponent } from './file-input.component';
+export {
+  fileInputVariants,
+  type FileInputVariant,
+  type FileInputSize,
+} from './file-input.variants';

package/src/lib/indicator/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyIndicatorDirective,
+  SnyIndicatorBadgeDirective,
+  type IndicatorPosition,
+  type IndicatorVariant,
+} from './indicator.directives';

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

@@ -0,0 +1,64 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyIndicatorDirective, SnyIndicatorBadgeDirective, type IndicatorPosition, type IndicatorVariant } from './indicator.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyIndicatorDirective, SnyIndicatorBadgeDirective],
+  template: `
+    <div snyIndicator>
+      <span snyIndicatorBadge [position]="position()" [variant]="variant()" [ariaLabel]="badgeLabel()">5</span>
+      <div>Content</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  position = signal<IndicatorPosition>('top-end');
+  variant = signal<IndicatorVariant>('default');
+  badgeLabel = signal('');
+}
+
+describe('SnyIndicatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render indicator container', () => {
+    const el = fixture.nativeElement.querySelector('[snyIndicator]');
+    expect(el.className).toContain('relative');
+    expect(el.className).toContain('inline-flex');
+  });
+
+  it('should position badge at top-end by default', () => {
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('top-0');
+    expect(badge.className).toContain('right-0');
+  });
+
+  it('should change position', () => {
+    fixture.componentInstance.position.set('bottom-start');
+    fixture.detectChanges();
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('bottom-0');
+    expect(badge.className).toContain('left-0');
+  });
+
+  it('should apply error variant', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.className).toContain('bg-destructive');
+  });
+
+  it('should set aria-label on badge when ariaLabel input is provided', () => {
+    const badge = fixture.nativeElement.querySelector('[snyIndicatorBadge]');
+    expect(badge.getAttribute('aria-label')).toBeNull();
+    fixture.componentInstance.badgeLabel.set('5 notifications');
+    fixture.detectChanges();
+    expect(badge.getAttribute('aria-label')).toBe('5 notifications');
+  });
+});

package/src/lib/indicator/indicator.directives.ts

@@ -0,0 +1,61 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type IndicatorPosition = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export type IndicatorVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+
+const positionMap: Record<IndicatorPosition, string> = {
+  'top-start': 'top-0 left-0 -translate-x-1/2 -translate-y-1/2',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2',
+  'top-end': 'top-0 right-0 translate-x-1/2 -translate-y-1/2',
+  'middle-start': 'top-1/2 left-0 -translate-x-1/2 -translate-y-1/2',
+  'middle-end': 'top-1/2 right-0 translate-x-1/2 -translate-y-1/2',
+  'bottom-start': 'bottom-0 left-0 -translate-x-1/2 translate-y-1/2',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+  'bottom-end': 'bottom-0 right-0 translate-x-1/2 translate-y-1/2',
+};
+
+const variantMap: Record<IndicatorVariant, string> = {
+  default: 'bg-primary text-primary-foreground',
+  primary: 'bg-primary text-primary-foreground',
+  secondary: 'bg-secondary text-secondary-foreground',
+  success: 'bg-green-600 text-white dark:bg-green-500',
+  warning: 'bg-yellow-500 text-white dark:bg-yellow-400 dark:text-black',
+  error: 'bg-destructive text-destructive-foreground',
+};
+
+@Directive({
+  selector: '[snyIndicator]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyIndicatorDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('relative inline-flex', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyIndicatorBadge]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-label]': 'ariaLabel() || null',
+  },
+})
+export class SnyIndicatorBadgeDirective {
+  readonly position = input<IndicatorPosition>('top-end');
+  readonly variant = input<IndicatorVariant>('default');
+  readonly ariaLabel = input<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute z-10 inline-flex items-center justify-center rounded-full text-xs font-bold min-w-[1.25rem] h-5 px-1',
+      positionMap[this.position()],
+      variantMap[this.variant()],
+      this.class()
+    )
+  );
+}

package/src/lib/input/index.ts

@@ -0,0 +1,3 @@
+export { SnyInputDirective } from './input.directive';
+export { SnyLabelDirective } from './label.directive';
+export { inputVariants, labelVariants, type InputVariant, type InputSize } from './input.variants';

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

@@ -0,0 +1,103 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyInputDirective } from './input.directive';
+import { SnyLabelDirective } from './label.directive';
+import type { InputVariant, InputSize } from './input.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyInputDirective, SnyLabelDirective],
+  template: `
+    <label snyLabel [variant]="variant()">Name</label>
+    <input snyInput [variant]="variant()" [inputSize]="inputSize()" [ariaDescribedBy]="describedBy()" />
+  `,
+})
+class TestHostComponent {
+  variant = signal<InputVariant>('default');
+  inputSize = signal<InputSize>('md');
+  describedBy = signal('');
+}
+
+describe('SnyInputDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let input: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    input = fixture.nativeElement.querySelector('input');
+  });
+
+  it('should apply default input classes', () => {
+    expect(input.className).toContain('border-input');
+    expect(input.className).toContain('h-10');
+  });
+
+  it('should apply error variant', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-destructive');
+  });
+
+  it('should set aria-invalid on error', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('should not set aria-invalid on default', () => {
+    expect(input.getAttribute('aria-invalid')).toBeNull();
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-green-500');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.inputSize.set('sm');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-9');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.inputSize.set('lg');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-11');
+  });
+
+  it('should set aria-describedby', () => {
+    fixture.componentInstance.describedBy.set('help-text');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-describedby')).toBe('help-text');
+  });
+});
+
+describe('SnyLabelDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let label: HTMLLabelElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    label = fixture.nativeElement.querySelector('label');
+  });
+
+  it('should apply label classes', () => {
+    expect(label.className).toContain('text-sm');
+    expect(label.className).toContain('font-medium');
+  });
+
+  it('should apply error variant to label', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(label.className).toContain('text-destructive');
+  });
+});

package/src/lib/input/input.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { inputVariants, type InputVariant, type InputSize } from './input.variants';
+
+@Directive({
+  selector: 'input[snyInput], textarea[snyInput]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-invalid]': 'variant() === "error" || null',
+    '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+  },
+})
+export class SnyInputDirective {
+  readonly variant = input<InputVariant>('default');
+  readonly inputSize = input<InputSize>('md');
+  readonly class = input<string>('');
+  readonly ariaDescribedBy = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      inputVariants({ variant: this.variant(), inputSize: this.inputSize() }),
+      this.class()
+    )
+  );
+}

package/src/lib/input/input.variants.ts

@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  'flex w-full rounded-sm border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+        success: 'border-green-500 focus-visible:ring-green-500',
+      },
+      inputSize: {
+        sm: 'h-9 text-xs',
+        md: 'h-10',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'md',
+    },
+  }
+);
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  {
+    variants: {
+      variant: {
+        default: '',
+        error: 'text-destructive',
+        success: 'text-green-600',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type InputVariant = 'default' | 'error' | 'success';
+export type InputSize = 'sm' | 'md' | 'lg';

package/src/lib/input/label.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { labelVariants, type InputVariant } from './input.variants';
+
+@Directive({
+  selector: 'label[snyLabel]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyLabelDirective {
+  readonly variant = input<InputVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(labelVariants({ variant: this.variant() }), this.class())
+  );
+}

package/src/lib/kbd/index.ts

@@ -0,0 +1,2 @@
+export { SnyKbdDirective } from './kbd.directive';
+export { kbdVariants, type KbdSize } from './kbd.variants';

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

@@ -0,0 +1,42 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyKbdDirective } from './kbd.directive';
+import type { KbdSize } from './kbd.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyKbdDirective],
+  template: `<kbd snyKbd [size]="size()">Ctrl+K</kbd>`,
+})
+class TestHostComponent {
+  size = signal<KbdSize>('md');
+}
+
+describe('SnyKbdDirective', () => {
+  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('kbd');
+  });
+
+  it('should apply default size classes', () => {
+    expect(el.className).toContain('font-mono');
+    expect(el.className).toContain('h-6');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-7');
+  });
+});

package/src/lib/kbd/kbd.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { kbdVariants, type KbdSize } from './kbd.variants';
+
+@Directive({
+  selector: 'kbd[snyKbd]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyKbdDirective {
+  readonly size = input<KbdSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(kbdVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/kbd/kbd.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const kbdVariants = cva(
+  'pointer-events-none inline-flex select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono font-medium text-muted-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-5 text-[10px]',
+        md: 'h-6 text-xs',
+        lg: 'h-7 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type KbdSize = 'sm' | 'md' | 'lg';

package/src/lib/link/index.ts

@@ -0,0 +1,2 @@
+export { SnyLinkDirective } from './link.directive';
+export { linkVariants, type LinkVariant } from './link.variants';

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

@@ -0,0 +1,41 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyLinkDirective } from './link.directive';
+import type { LinkVariant } from './link.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyLinkDirective],
+  template: `<a snyLink [variant]="variant()" href="#">Click me</a>`,
+})
+class TestHostComponent {
+  variant = signal<LinkVariant>('default');
+}
+
+describe('SnyLinkDirective', () => {
+  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('a');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('underline');
+  });
+
+  it('should apply primary variant', () => {
+    fixture.componentInstance.variant.set('primary');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-primary');
+  });
+
+  it('should apply hover variant', () => {
+    fixture.componentInstance.variant.set('hover');
+    fixture.detectChanges();
+    expect(el.className).toContain('no-underline');
+  });
+});