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

package/src/lib/tooltip/tooltip.directive.ts

@@ -0,0 +1,131 @@
+import {
+  Directive,
+  ElementRef,
+  OnDestroy,
+  Renderer2,
+  computed,
+  inject,
+  input,
+  signal,
+  afterNextRender,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { tooltipVariants, type TooltipPosition } from './tooltip.variants';
+
+let tooltipIdCounter = 0;
+
+@Directive({
+  selector: '[snyTooltip]',
+  standalone: true,
+  exportAs: 'snyTooltip',
+  host: {
+    '(mouseenter)': 'show()',
+    '(mouseleave)': 'hide()',
+    '(focus)': 'show()',
+    '(blur)': 'hide()',
+    '(keydown.escape)': 'hide()',
+    '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
+  },
+})
+export class SnyTooltipDirective implements OnDestroy {
+  readonly snyTooltip = input.required<string>();
+  readonly tooltipPosition = input<TooltipPosition>('top');
+  readonly tooltipDelay = input(300);
+  readonly tooltipDisabled = input(false);
+  readonly class = input<string>('');
+
+  readonly isOpen = signal(false);
+  readonly tooltipId = `sny-tooltip-${++tooltipIdCounter}`;
+
+  private readonly el = inject(ElementRef<HTMLElement>);
+  private readonly renderer = inject(Renderer2);
+  private showTimeout: ReturnType<typeof setTimeout> | null = null;
+  private tooltipEl: HTMLElement | null = null;
+
+  constructor() {
+    afterNextRender(() => {
+      // cleanup handled in ngOnDestroy
+    });
+  }
+
+  show(): void {
+    if (this.tooltipDisabled()) return;
+    this.showTimeout = setTimeout(() => {
+      this.createTooltip();
+      this.isOpen.set(true);
+    }, this.tooltipDelay());
+  }
+
+  hide(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+    this.destroyTooltip();
+    this.isOpen.set(false);
+  }
+
+  ngOnDestroy(): void {
+    this.hide();
+  }
+
+  private createTooltip(): void {
+    if (this.tooltipEl) return;
+
+    const tooltip = this.renderer.createElement('div') as HTMLElement;
+    tooltip.id = this.tooltipId;
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.className = cn(
+      tooltipVariants({ position: this.tooltipPosition() }),
+      'fixed pointer-events-none',
+      this.class()
+    );
+    tooltip.textContent = this.snyTooltip();
+
+    this.renderer.appendChild(document.body, tooltip);
+    this.tooltipEl = tooltip;
+
+    this.positionTooltip();
+  }
+
+  private positionTooltip(): void {
+    if (!this.tooltipEl) return;
+
+    const hostRect = this.el.nativeElement.getBoundingClientRect();
+    const tooltipRect = this.tooltipEl.getBoundingClientRect();
+    const position = this.tooltipPosition();
+    const gap = 8;
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case 'top':
+        top = hostRect.top - tooltipRect.height - gap;
+        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = hostRect.bottom + gap;
+        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.left - tooltipRect.width - gap;
+        break;
+      case 'right':
+        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.right + gap;
+        break;
+    }
+
+    this.tooltipEl.style.top = `${top}px`;
+    this.tooltipEl.style.left = `${left}px`;
+  }
+
+  private destroyTooltip(): void {
+    if (this.tooltipEl) {
+      this.tooltipEl.remove();
+      this.tooltipEl = null;
+    }
+  }
+}

package/src/lib/tooltip/tooltip.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const tooltipVariants = cva(
+  'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
+  {
+    variants: {
+      position: {
+        top: 'slide-in-from-bottom-2',
+        bottom: 'slide-in-from-top-2',
+        left: 'slide-in-from-right-2',
+        right: 'slide-in-from-left-2',
+      },
+    },
+    defaultVariants: {
+      position: 'top',
+    },
+  }
+);
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

package/src/lib/validator/index.ts

@@ -0,0 +1,5 @@
+export {
+  SnyValidatorDirective,
+  SnyValidatorHintDirective,
+  type ValidatorHintVariant,
+} from './validator.directives';

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

@@ -0,0 +1,47 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyValidatorDirective, SnyValidatorHintDirective } from './validator.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyValidatorDirective, SnyValidatorHintDirective],
+  template: `
+    <div snyValidator>
+      <div snyValidatorHint when="required" variant="error">Required</div>
+      <div snyValidatorHint when="minlength" variant="error">Too short</div>
+      <div snyValidatorHint variant="success">Looks good!</div>
+    </div>
+  `,
+})
+class TestHostComponent {}
+
+describe('SnyValidatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render validator container', () => {
+    const el = fixture.nativeElement.querySelector('[snyValidator]');
+    expect(el).toBeTruthy();
+  });
+
+  it('should render hints with alert role', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints.length).toBe(3);
+    hints.forEach((h: HTMLElement) => expect(h.getAttribute('role')).toBe('alert'));
+  });
+
+  it('should apply error variant to error hints', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints[0].className).toContain('text-destructive');
+  });
+
+  it('should apply success variant', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints[2].className).toContain('text-green-600');
+  });
+});

package/src/lib/validator/validator.directives.ts

@@ -0,0 +1,52 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import type { AbstractControl } from '@angular/forms';
+
+export type ValidatorHintVariant = 'error' | 'success' | 'warning' | 'info';
+
+@Directive({
+  selector: '[snyValidator]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyValidatorDirective {
+  readonly control = input<AbstractControl | null>(null);
+  readonly state = input<'default' | 'error' | 'success' | 'warning'>('default');
+  readonly class = input<string>('');
+
+  readonly errors = computed(() => this.control()?.errors ?? null);
+  readonly showErrors = computed(() => {
+    const c = this.control();
+    return c ? c.touched && c.invalid : false;
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-1 mt-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyValidatorHint]',
+  standalone: true,
+  host: {
+    'role': 'alert',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyValidatorHintDirective {
+  readonly when = input<string>('');
+  readonly type = input<ValidatorHintVariant>('error');
+  /** @deprecated Use `type` instead */
+  readonly variant = input<ValidatorHintVariant | undefined>(undefined);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant() ?? this.type();
+    const variantClass =
+      v === 'success' ? 'text-green-600 dark:text-green-400' :
+      v === 'warning' ? 'text-amber-600 dark:text-amber-400' :
+      v === 'info' ? 'text-blue-600 dark:text-blue-400' :
+      'text-destructive';
+    return cn('text-xs', variantClass, this.class());
+  });
+}