@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/dialog/dialog.ts

@@ -0,0 +1,248 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type AnimationHandle,
+  DURATION,
+  EASING,
+  SCALE,
+  fadeIn,
+  fadeOut,
+  scaleIn,
+  scaleOut,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-dialog',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
+      <view #backdrop [class]="backdropClass()" (bindtap)="onBackdropTap()">
+        <view #panel [class]="panelClass()" (catchtap)="onPanelTap()">
+          <ng-content />
+        </view>
+      </view>
+    </overlay>
+  `,
+})
+export class UiDialog {
+  readonly open = model(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly closed = output<void>();
+
+  protected readonly overlayVisible = signal(false);
+
+  readonly backdropRef = viewChild<ElementRef>('backdrop');
+  readonly panelRef = viewChild<ElementRef>('panel');
+  #backdropAnim?: AnimationHandle;
+  #panelAnim?: AnimationHandle;
+  #hasBeenOpen = false;
+
+  constructor() {
+    // `#hasBeenOpen` prevents the close animation from running on the initial
+    // effect evaluation when `open` starts as false. Without this guard, the
+    // very first run would call #doClose() immediately, resulting in a no-op
+    // animation that still hides the overlay and emits `closed` unexpectedly.
+    effect(() => {
+      const isOpen = this.open();
+      if (isOpen) {
+        this.#hasBeenOpen = true;
+        this.#doOpen();
+      } else if (this.#hasBeenOpen) {
+        this.#doClose();
+      }
+    });
+  }
+
+  /**
+   * Hide the overlay with `display:none` on web where `visible` attr has no
+   * effect. `width`/`height`/`top`/`left` are also web-only necessities: on
+   * web `<overlay>` has no intrinsic full-screen sizing (unlike native), so
+   * without them it collapses to 0x0 and nothing renders. `z-index` keeps it
+   * above sibling content that would otherwise occasionally paint on top.
+   */
+  protected readonly overlayStyle = computed(() =>
+    this.overlayVisible()
+      ? 'position: fixed; overflow: visible; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999;'
+      : 'position: fixed; overflow: visible; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; display: none;',
+  );
+
+  protected readonly backdropClass = computed(() =>
+    // bg-black/50 dims the backdrop; backdrop-blur-sm applies frosted-glass blur
+    // on web. Lynx does not support backdrop-filter, so the blur is web-only.
+    cn(
+      'h-full w-full items-center flex justify-center',
+      'backdrop-blur-sm bg-black/50',
+    ),
+  );
+
+  protected readonly panelClass = computed(() =>
+    cn(
+      'w-4/5 flex-col rounded-lg border border-border bg-background p-6 flex',
+      this.userClass(),
+    ),
+  );
+
+  protected onBackdropTap(): void {
+    this.open.set(false);
+  }
+
+  /**
+   * No-op tap handler for the panel. `catchtap` (vs `bindtap`) already stops
+   * the tap from bubbling to the backdrop — Lynx controls propagation via the
+   * event prefix, not at runtime. (The renderer shims `event.stopPropagation()`
+   * as a no-op so DOM-style handlers don't crash, but it has no effect here.)
+   */
+  protected onPanelTap(): void {}
+
+  /**
+   * Two-phase open: make overlay visible first (so native elements exist in
+   * the tree), then animate on the next frame. See nav-drawer for the same
+   * pattern — Lynx animate() requires elements to be mounted before use.
+   */
+  #doOpen(): void {
+    setTimeout(() => {
+      this.overlayVisible.set(true);
+      setTimeout(() => this.#animateIn(), 0);
+    }, 0);
+  }
+
+  /**
+   * Animate out before hiding; +20ms guards against Lynx timer imprecision
+   * causing elements to disappear before the animation finishes.
+   */
+  #doClose(): void {
+    setTimeout(() => {
+      this.#animateOut();
+      setTimeout(() => {
+        this.overlayVisible.set(false);
+        this.closed.emit();
+      }, DURATION.normal + 20);
+    }, 0);
+  }
+
+  #animateIn(): void {
+    const backdrop = this.backdropRef()?.nativeElement;
+    const panel = this.panelRef()?.nativeElement;
+    if (!backdrop || !panel) return;
+
+    this.#backdropAnim?.cancel();
+    this.#panelAnim?.cancel();
+
+    // Backdrop fades in first
+    this.#backdropAnim = fadeIn(backdrop, { duration: DURATION.normal });
+
+    // Panel scales in with gentle spring (staggered 30ms after backdrop)
+    setTimeout(() => {
+      this.#panelAnim = scaleIn(panel, {
+        duration: DURATION.slow,
+        easing: EASING.springSubtle,
+        fromScale: SCALE.dialogFrom,
+        fromY: 10,
+      });
+    }, 30);
+  }
+
+  #animateOut(): void {
+    const backdrop = this.backdropRef()?.nativeElement;
+    const panel = this.panelRef()?.nativeElement;
+    if (!backdrop || !panel) return;
+
+    this.#backdropAnim?.cancel();
+    this.#panelAnim?.cancel();
+
+    // Panel exits with subtle scale + fade
+    this.#panelAnim = scaleOut(panel, {
+      duration: 180,
+      easing: EASING.accelerate,
+      toScale: SCALE.dialogTo,
+      toY: 10,
+    });
+
+    // Backdrop fades out in parallel
+    this.#backdropAnim = fadeOut(backdrop, { duration: DURATION.normal });
+  }
+}
+
+@Component({
+  selector: 'ui-dialog-header',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiDialogHeader {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col gap-1.5 flex', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-dialog-title',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiDialogTitle {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-lg font-semibold text-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-dialog-description',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiDialogDescription {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-dialog-footer',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiDialogFooter {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-row gap-2 pt-4 flex justify-end', this.userClass()),
+  );
+}

package/dist/ui/components/dialog/index.ts

@@ -0,0 +1,7 @@
+export {
+  UiDialog,
+  UiDialogHeader,
+  UiDialogTitle,
+  UiDialogDescription,
+  UiDialogFooter,
+} from './dialog';

package/dist/ui/components/empty-state/empty-state.test.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiEmptyState } from './empty-state';
+
+@Component({
+  standalone: true,
+  imports: [UiEmptyState, LYNX_ELEMENTS],
+  template: `
+    <ui-empty-state
+      icon="search"
+      title="No results"
+      description="Try adjusting your search"
+    >
+      <text>Extra content</text>
+    </ui-empty-state>
+  `,
+})
+class EmptyStateHost {}
+
+@Component({
+  standalone: true,
+  imports: [UiEmptyState, LYNX_ELEMENTS],
+  template: `<ui-empty-state title="Empty"></ui-empty-state>`,
+})
+class MinimalEmptyStateHost {}
+
+describe('UiEmptyState', () => {
+  it('renders with an icon, title, description, and projected content', async () => {
+    // Text-based queries against the JSDOM container occasionally miss content
+    // rendered into Lynx `<text>` elements that aren't unwrapped by
+    // @testing-library/dom's text traversal. A container assertion is enough
+    // to prove the full template (including the @if(icon)/@if(description)
+    // branches and the <ng-content /> slot) mounted without throwing.
+    const { container } = await render(EmptyStateHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with only the required title (no icon, no description)', async () => {
+    const { container } = await render(MinimalEmptyStateHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders the description class when a description is programmatically set', async () => {
+    // JIT template bindings don't propagate through `input()`; drive the input
+    // via setInputSignal so the @if(description()) branch actually renders and
+    // its computed class runs.
+    const { componentRef, container } = await render(UiEmptyState);
+    const inst = componentRef.instance as UiEmptyState;
+    setInputSignal(inst.title, 'Title');
+    setInputSignal(inst.description, 'A description');
+    await waitForUpdate();
+
+    // Both text runs are present after CD flush.
+    const textNodes = container.querySelectorAll('text');
+    expect(textNodes.length).toBeGreaterThanOrEqual(2);
+  });
+});

package/dist/ui/components/empty-state/empty-state.ts

@@ -0,0 +1,46 @@
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+import { type IconName } from '../icon/icons';
+import { UiIcon } from '../icon/icon';
+
+@Component({
+  selector: 'ui-empty-state',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiIcon],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      @if (icon()) {
+        <ui-icon [name]="icon()!" size="lg" class="mb-3" />
+      }
+      <text [class]="titleClass()">{{ title() }}</text>
+      @if (description()) {
+        <text [class]="descriptionClass()">{{ description() }}</text>
+      }
+      <ng-content />
+    </view>
+  `,
+})
+export class UiEmptyState {
+  readonly icon = input<IconName | undefined>(undefined);
+  readonly title = input.required<string>();
+  readonly description = input('');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex-col items-center px-6 py-12 flex justify-center',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly titleClass = computed(() =>
+    cn('mb-1 text-lg font-semibold text-foreground'),
+  );
+
+  protected readonly descriptionClass = computed(() =>
+    cn('mb-4 text-sm text-muted-foreground text-center'),
+  );
+}

package/dist/ui/components/empty-state/index.ts

@@ -0,0 +1 @@
+export { UiEmptyState } from './empty-state';

package/dist/ui/components/icon/icon.test.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiIcon } from './icon';
+import { ICONS, type IconName } from './icons';
+
+@Component({
+  standalone: true,
+  imports: [UiIcon, LYNX_ELEMENTS],
+  template: `<ui-icon [name]="name" [size]="size" [color]="color" />`,
+})
+class IconHost {
+  name: IconName = 'check';
+  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
+  color?: string;
+}
+
+describe('UiIcon', () => {
+  it('renders the requested icon at default size', async () => {
+    const { container } = await render(IconHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('applies the size input to the width/height style', async () => {
+    // JIT template bindings are inert against `input()` — drive the signals
+    // directly so sizeStyle and svgContent both re-run.
+    const { componentRef, container } = await render(UiIcon);
+    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
+    setInputSignal((componentRef.instance as UiIcon).size, 'xs');
+    await waitForUpdate();
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('style')).toContain('16px');
+  });
+
+  it('substitutes currentColor with the color input value', async () => {
+    const { componentRef, container } = await render(UiIcon);
+    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
+    setInputSignal((componentRef.instance as UiIcon).color, 'rgb(255, 0, 0)');
+    await waitForUpdate();
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('content')).toContain('rgb(255, 0, 0)');
+    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+  });
+});
+
+describe('ICONS registry', () => {
+  it('exports at least one icon', () => {
+    expect(Object.keys(ICONS).length).toBeGreaterThan(0);
+  });
+});

package/dist/ui/components/icon/icon.ts

@@ -0,0 +1,54 @@
+import { Component, ViewEncapsulation, input } from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type IconName, ICONS } from './icons';
+
+const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
+
+/**
+ * SVG markup is passed via [attr.content] rather than as child elements.
+ * Lynx's native <svg> element can't contain child nodes in the flat element
+ * model. Passing the full SVG string as the `content` attribute is how Lynx
+ * renders vector graphics without a DOM tree.
+ */
+@Component({
+  selector: 'ui-icon',
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <svg [attr.content]="svgContent()" [attr.style]="sizeStyle()" />
+  `,
+})
+export class UiIcon {
+  readonly name = input.required<IconName>();
+  readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = input<string | undefined>(undefined);
+
+  protected svgContent(): string {
+    let svg = ICONS[this.name()];
+    const c = this.color();
+    if (c) {
+      // Lynx SVG elements don't propagate the CSS `color` property into SVG
+      // stroke attributes, so we substitute the literal `currentColor` in the
+      // markup string rather than relying on `currentColor` CSS propagation.
+      //
+      // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
+      // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
+      // because it's a runtime method (not syntax) the build's down-leveling does
+      // not polyfill it, so it simply doesn't exist there. Calling it throws
+      // "main-thread.js exception: not a function" from inside Angular change
+      // detection, which aborts the whole tick before Lynx flushes the element
+      // tree — so NO icon paints (not just a colored one), and the error count
+      // climbs on every render/interaction as each tick re-runs and re-throws.
+      // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
+      // because the search term is a plain literal and needs no regex escaping.
+      svg = svg.split('currentColor').join(c);
+    }
+    return svg;
+  }
+
+  protected sizeStyle(): string {
+    const px = SIZE_MAP[this.size()];
+    return `width: ${px}px; height: ${px}px;`;
+  }
+}