@blotch/dolan 0.0.0-stage → 22.2.1

package/dist/ui/components/action-sheet/action-sheet.ts

@@ -0,0 +1,353 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type AnimationHandle,
+  DURATION,
+  EASING,
+  SCALE,
+  fadeIn,
+  fadeOut,
+  pressDown,
+  pressRelease,
+  slideIn,
+  slideOut,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-action-sheet',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
+      <!-- bg-black/50 dims the content behind the sheet. The fadeIn/fadeOut in
+           #animateIn/#animateOut already tween this element's opacity over
+           DURATION.normal, so the dim animates in lockstep with the panel slide —
+           matching the dialog/bottom-sheet backdrop. A named color with an opacity
+           modifier is required here: bg-black/50 compiles to rgb(0 0 0 / 0.5),
+           which Lynx accepts, whereas opacity modifiers on semantic tokens don't. -->
+      <view
+        #backdrop
+        class="h-full w-full bg-black/50"
+        (bindtap)="onBackdropTap()"
+      >
+        <view
+          #panel
+          [class]="panelClass()"
+          [style]="panelPositionStyle()"
+          (catchtap)="onPanelTap()"
+        >
+          <!-- The elevation shadow is an inline rgba() box-shadow rather than a
+               \`shadow-*\` Tailwind class: the Lynx tailwind preset doesn't wire
+               up the \`--tw-shadow\`/\`--tw-ring-*\` variables those utilities
+               depend on, so \`shadow-*\` renders nothing on Lynx. \`overflow-hidden\`
+               clips this tile's children to the rounded corners but not its own
+               box-shadow (painted outside the border box), so the shadow shows. -->
+          <view
+            class="flex-col rounded-lg border border-border bg-card flex overflow-hidden"
+            style="box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);"
+          >
+            <ng-content />
+          </view>
+          <!-- Cancel button is slotted separately so it renders outside the
+               rounded card — matching the iOS action sheet visual convention
+               where cancel is a distinct tile below the action group. -->
+          <ng-content select="ui-action-sheet-cancel" />
+        </view>
+      </view>
+    </overlay>
+  `,
+})
+export class UiActionSheet {
+  readonly open = model(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly closed = output<void>();
+
+  protected readonly overlayVisible = signal(false);
+  /**
+   * `width`/`height`/`top`/`left` are 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;',
+  );
+
+  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
+    // first run would call #doClose() and emit `closed` before the action
+    // sheet has ever been opened.
+    effect(() => {
+      const isOpen = this.open();
+      if (isOpen) {
+        this.#hasBeenOpen = true;
+        this.#doOpen();
+      } else if (this.#hasBeenOpen) {
+        this.#doClose();
+      }
+    });
+  }
+
+  protected readonly panelClass = computed(() =>
+    cn('w-full flex-col gap-2 px-4 pb-6 flex', this.userClass()),
+  );
+
+  protected readonly panelPositionStyle = computed(
+    () => 'position: absolute; bottom: 0; left: 0; right: 0;',
+  );
+
+  protected onBackdropTap(): void {
+    this.open.set(false);
+  }
+
+  close(): 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();
+
+    this.#backdropAnim = fadeIn(backdrop, { duration: DURATION.normal });
+    this.#panelAnim = slideIn(panel, 'up', {
+      duration: DURATION.slow,
+      easing: EASING.sheet,
+    });
+  }
+
+  #animateOut(): void {
+    const backdrop = this.backdropRef()?.nativeElement;
+    const panel = this.panelRef()?.nativeElement;
+    if (!backdrop || !panel) return;
+
+    this.#backdropAnim?.cancel();
+    this.#panelAnim?.cancel();
+
+    this.#backdropAnim = fadeOut(backdrop, { duration: DURATION.normal });
+    this.#panelAnim = slideOut(panel, 'down', {
+      duration: DURATION.normal,
+      easing: EASING.accelerate,
+    });
+  }
+}
+
+@Component({
+  selector: 'ui-action-sheet-title',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <text [class]="textClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiActionSheetTitle {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('items-center px-4 py-3 flex justify-center', this.userClass()),
+  );
+
+  protected readonly textClass = computed(() =>
+    cn('text-sm text-muted-foreground'),
+  );
+}
+
+@Component({
+  selector: 'ui-action-sheet-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      #container
+      [class]="containerClass()"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      <text [class]="textClass()"><ng-content /></text>
+    </view>
+  `,
+})
+export class UiActionSheetItem {
+  readonly #sheet = inject(UiActionSheet);
+
+  readonly variant = input<'default' | 'destructive'>('default');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly pressed = output<void>();
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'items-center border-t border-border px-4 py-3 flex justify-center',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly textClass = computed(() =>
+    cn(
+      'text-base',
+      this.variant() === 'destructive' ? 'text-destructive' : 'text-primary',
+    ),
+  );
+
+  protected onPressStart(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(
+      this.containerRef()?.nativeElement,
+      SCALE.pressDownLight,
+    );
+  }
+
+  protected onPressEnd(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    this.pressed.emit();
+    this.#sheet.close();
+  }
+}
+
+@Component({
+  selector: 'ui-action-sheet-cancel',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      #container
+      [class]="containerClass()"
+      style="box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      <text [class]="textClass()">{{ label() }}</text>
+    </view>
+  `,
+})
+export class UiActionSheetCancel {
+  readonly #sheet = inject(UiActionSheet);
+
+  readonly label = input('Cancel');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'items-center rounded-lg border border-border bg-card px-4 py-3 flex justify-center',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly textClass = computed(() =>
+    cn('text-base font-semibold text-primary'),
+  );
+
+  protected onPressStart(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(
+      this.containerRef()?.nativeElement,
+      SCALE.pressDownLight,
+    );
+  }
+
+  protected onPressEnd(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    this.#sheet.close();
+  }
+}

package/dist/ui/components/action-sheet/index.ts

@@ -0,0 +1,6 @@
+export {
+  UiActionSheet,
+  UiActionSheetTitle,
+  UiActionSheetItem,
+  UiActionSheetCancel,
+} from './action-sheet';

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

@@ -0,0 +1,48 @@
+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 { UiAlert, alertVariants } from './alert';
+
+@Component({
+  standalone: true,
+  imports: [UiAlert, LYNX_ELEMENTS],
+  template: `<ui-alert [variant]="variant"><text>Message</text></ui-alert>`,
+})
+class AlertHost {
+  variant: 'default' | 'destructive' = 'default';
+}
+
+describe('alertVariants', () => {
+  it('returns default variant classes', () => {
+    expect(alertVariants()).toContain('bg-background');
+  });
+
+  it('returns destructive variant classes', () => {
+    expect(alertVariants({ variant: 'destructive' })).toContain(
+      'bg-destructive-subtle',
+    );
+  });
+});
+
+describe('UiAlert', () => {
+  it('renders projected content', async () => {
+    const { getByText } = await render(AlertHost);
+    expect(getByText('Message')).toBeTruthy();
+  });
+
+  it('renders title and description slots when their inputs are set', async () => {
+    // JIT template bindings don't propagate through input(); drive the signals
+    // directly so the @if(title()) / @if(description()) branches render and
+    // their computed class functions run.
+    const { componentRef, container } = await render(UiAlert);
+    const inst = componentRef.instance as UiAlert;
+    setInputSignal(inst.title, 'Heads up');
+    setInputSignal(inst.description, 'Your download is ready.');
+    await waitForUpdate();
+
+    const texts = container.querySelectorAll('text');
+    expect(texts.length).toBeGreaterThanOrEqual(2);
+  });
+});

package/dist/ui/components/alert/alert.ts

@@ -0,0 +1,104 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { revealIn } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+export const alertVariants = cva('flex-col rounded-lg border p-4 flex', {
+  variants: {
+    variant: {
+      default: 'border-border bg-background',
+      // Opacity modifiers on semantic colors don't work on Lynx (opaque rgba
+      // values with no separable channels): use a solid destructive border and
+      // the pre-composed translucent bg-destructive-subtle for the tint.
+      destructive: 'border-destructive bg-destructive-subtle',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+const alertTitleVariants = cva('mb-1 font-medium', {
+  variants: {
+    variant: {
+      default: 'text-foreground',
+      destructive: 'text-destructive',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+const alertDescriptionVariants = cva('text-sm', {
+  variants: {
+    variant: {
+      default: 'text-muted-foreground',
+      destructive: 'text-destructive',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+export type AlertVariant = NonNullable<
+  VariantProps<typeof alertVariants>['variant']
+>;
+
+@Component({
+  selector: 'ui-alert',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view #container [class]="containerClass()">
+      @if (title()) {
+        <text [class]="titleClass()">{{ title() }}</text>
+      }
+      @if (description()) {
+        <text [class]="descriptionClass()">{{ description() }}</text>
+      }
+      <ng-content />
+    </view>
+  `,
+})
+export class UiAlert {
+  readonly variant = input<AlertVariant>('default');
+  readonly title = input<string>('');
+  readonly description = input<string>('');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+
+  constructor() {
+    // Subtle entrance animation on first render
+    effect(() => {
+      const el = this.containerRef()?.nativeElement;
+      // revealIn calls el.animate() which is inert in jsdom — the animation
+      // never plays and the effect can't be verified from a JIT render test.
+      /* v8 ignore next 3 */
+      if (el) {
+        revealIn(el, { fromY: 4 });
+      }
+    });
+  }
+
+  protected readonly containerClass = computed(() =>
+    cn(alertVariants({ variant: this.variant() }), this.userClass()),
+  );
+
+  protected readonly titleClass = computed(() =>
+    cn(alertTitleVariants({ variant: this.variant() })),
+  );
+
+  protected readonly descriptionClass = computed(() =>
+    cn(alertDescriptionVariants({ variant: this.variant() })),
+  );
+}

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

@@ -0,0 +1 @@
+export { UiAlert, alertVariants, type AlertVariant } from './alert';

package/dist/ui/components/alert-dialog/alert-dialog.test.ts

@@ -0,0 +1,141 @@
+import { Component, signal } 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 {
+  UiAlertDialog,
+  UiAlertDialogDescription,
+  UiAlertDialogFooter,
+  UiAlertDialogHeader,
+  UiAlertDialogTitle,
+} from './alert-dialog';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiAlertDialog,
+    UiAlertDialogHeader,
+    UiAlertDialogTitle,
+    UiAlertDialogDescription,
+    UiAlertDialogFooter,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-alert-dialog [(open)]="open">
+      <ui-alert-dialog-header>
+        <ui-alert-dialog-title>Sure?</ui-alert-dialog-title>
+        <ui-alert-dialog-description>Cannot undo</ui-alert-dialog-description>
+      </ui-alert-dialog-header>
+      <ui-alert-dialog-footer><text>Buttons</text></ui-alert-dialog-footer>
+    </ui-alert-dialog>
+  `,
+})
+class AlertDialogHost {
+  open = true;
+}
+
+describe('UiAlertDialog', () => {
+  it('renders header, title, description, and footer', async () => {
+    const { getByText } = await render(AlertDialogHost);
+    expect(getByText('Sure?')).toBeTruthy();
+    expect(getByText('Cannot undo')).toBeTruthy();
+    expect(getByText('Buttons')).toBeTruthy();
+  });
+
+  it('panel tap is a no-op (catchtap stops bubbling)', async () => {
+    const { componentRef } = await render(UiAlertDialog);
+    const inst = componentRef.instance as UiAlertDialog;
+    expect(() =>
+      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
+    ).not.toThrow();
+  });
+
+  it('open effect: showing then hiding runs the animate-in/out lifecycles', async () => {
+    // Monkey-patch backdrop/panel refs so #animateIn / #animateOut execute in
+    // full instead of bailing on !backdrop || !panel.
+    const { componentRef, container } = await render(UiAlertDialog);
+    const inst = componentRef.instance as UiAlertDialog;
+    const view = container.querySelector('view') as Element;
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: view,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: view,
+    });
+
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    await waitForUpdate();
+
+    inst.open.set(false);
+    await new Promise((r) => setTimeout(r, 320));
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('open effect bails when backdrop/panel refs are undefined', async () => {
+    // Covers the early-return branches in #animateIn / #animateOut.
+    const { componentRef } = await render(UiAlertDialog);
+    const inst = componentRef.instance as UiAlertDialog;
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    inst.open.set(false);
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('overlayStyle switches between visible and hidden variants', async () => {
+    const { componentRef, container } = await render(UiAlertDialog);
+    const inst = componentRef.instance as UiAlertDialog;
+    let overlay = container.querySelector('overlay');
+    expect(overlay?.getAttribute('style')).toContain('display: none');
+
+    const view = container.querySelector('view') as Element;
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: view,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: view,
+    });
+    inst.open.set(true);
+    for (let i = 0; i < 10; i++) await waitForUpdate();
+    overlay = container.querySelector('overlay');
+    expect(overlay?.getAttribute('style')).not.toContain('display: none');
+  });
+
+  it('accepts a user class on the panel', async () => {
+    const { componentRef, container } = await render(UiAlertDialog);
+    const inst = componentRef.instance as UiAlertDialog;
+    setInputSignal(inst.userClass, 'custom-panel');
+    await waitForUpdate();
+    const views = Array.from(container.querySelectorAll('view'));
+    expect(
+      views.some((el) => el.getAttribute('class')?.includes('custom-panel')),
+    ).toBe(true);
+  });
+});
+
+describe('Alert dialog sub-components', () => {
+  it('UiAlertDialogHeader renders projected content', async () => {
+    const { container } = await render(UiAlertDialogHeader);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+
+  it('UiAlertDialogTitle renders projected content', async () => {
+    const { container } = await render(UiAlertDialogTitle);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiAlertDialogDescription renders projected content', async () => {
+    const { container } = await render(UiAlertDialogDescription);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiAlertDialogFooter renders projected content', async () => {
+    const { container } = await render(UiAlertDialogFooter);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+});