@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/test-utils.js

@@ -0,0 +1,65 @@
+import { mkdirSync, writeFileSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { randomUUID } from 'node:crypto';
+export const createFixture = (options = {}) => {
+    const dir = join(tmpdir(), `dolan-test-${randomUUID().slice(0, 8)}`);
+    const uiDir = join(dir, '__ui_source');
+    mkdirSync(dir, { recursive: true });
+    mkdirSync(uiDir, { recursive: true });
+    if (options.config) {
+        writeFileSync(join(dir, 'dolan.config.json'), JSON.stringify(options.config, null, 2));
+        // Create the directories referenced in config
+        mkdirSync(join(dir, options.config.aliases.components), {
+            recursive: true,
+        });
+        if (options.config.aliases.utils) {
+            mkdirSync(join(dir, options.config.aliases.utils), { recursive: true });
+        }
+        mkdirSync(join(dir, options.config.aliases.theme), { recursive: true });
+    }
+    if (options.lockfile) {
+        writeFileSync(join(dir, 'dolan.lock.json'), JSON.stringify(options.lockfile, null, 2));
+    }
+    if (options.components && options.config) {
+        const componentsDir = join(dir, options.config.aliases.components);
+        for (const [name, files] of Object.entries(options.components)) {
+            const componentDir = join(componentsDir, name);
+            mkdirSync(componentDir, { recursive: true });
+            for (const [fileName, content] of Object.entries(files)) {
+                writeFileSync(join(componentDir, fileName), content);
+            }
+        }
+    }
+    if (options.uiSource) {
+        const componentsDir = join(uiDir, 'components');
+        mkdirSync(componentsDir, { recursive: true });
+        for (const [name, files] of Object.entries(options.uiSource)) {
+            const componentDir = join(componentsDir, name);
+            mkdirSync(componentDir, { recursive: true });
+            for (const [fileName, content] of Object.entries(files)) {
+                writeFileSync(join(componentDir, fileName), content);
+            }
+        }
+    }
+    if (options.themeFiles) {
+        const themeDir = join(uiDir, 'theme');
+        mkdirSync(themeDir, { recursive: true });
+        for (const [fileName, content] of Object.entries(options.themeFiles)) {
+            writeFileSync(join(themeDir, fileName), content);
+        }
+    }
+    return {
+        dir,
+        uiDir,
+        cleanup: () => rmSync(dir, { recursive: true, force: true }),
+    };
+};
+export const DEFAULT_CONFIG = {
+    aliases: {
+        components: 'src/components/ui',
+        utils: 'src/lib/utils',
+        theme: 'src/styles',
+    },
+};
+//# sourceMappingURL=test-utils.js.map

package/dist/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.js","sourceRoot":"","sources":["../src/test-utils.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,194 @@
+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 {
+  UiAccordion,
+  UiAccordionContent,
+  UiAccordionItem,
+  UiAccordionTrigger,
+} from './accordion';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiAccordion,
+    UiAccordionItem,
+    UiAccordionTrigger,
+    UiAccordionContent,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-accordion [type]="type">
+      <ui-accordion-item value="a">
+        <ui-accordion-trigger>A</ui-accordion-trigger>
+        <ui-accordion-content><text>Alpha</text></ui-accordion-content>
+      </ui-accordion-item>
+      <ui-accordion-item value="b">
+        <ui-accordion-trigger>B</ui-accordion-trigger>
+        <ui-accordion-content><text>Beta</text></ui-accordion-content>
+      </ui-accordion-item>
+    </ui-accordion>
+  `,
+})
+class AccordionHost {
+  type: 'single' | 'multiple' = 'single';
+}
+
+describe('UiAccordion', () => {
+  it('renders each item trigger', async () => {
+    const { getByText } = await render(AccordionHost);
+    expect(getByText('A')).toBeTruthy();
+    expect(getByText('B')).toBeTruthy();
+  });
+
+  it('toggle() in single mode replaces the expanded value', async () => {
+    const { componentRef } = await render(UiAccordion);
+    const acc = componentRef.instance as UiAccordion;
+    acc.toggle('a');
+    expect(acc.isExpanded('a')).toBe(true);
+    acc.toggle('b');
+    expect(acc.isExpanded('a')).toBe(false);
+    expect(acc.isExpanded('b')).toBe(true);
+    acc.toggle('b');
+    expect(acc.isExpanded('b')).toBe(false);
+  });
+
+  it('renders type="multiple" host without throwing', async () => {
+    @Component({
+      standalone: true,
+      imports: [UiAccordion, LYNX_ELEMENTS],
+      template: `<ui-accordion type="multiple" />`,
+    })
+    class MultiHost {}
+    const { container } = await render(MultiHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('type="multiple" retains previously expanded items', async () => {
+    // Directly exercises the multiple-mode branch of `toggle()`. Without this,
+    // the `.clear()`-skip branch stays uncovered.
+    const { componentRef } = await render(UiAccordion);
+    const acc = componentRef.instance as UiAccordion;
+    setInputSignal(acc.type, 'multiple');
+    await waitForUpdate();
+    acc.toggle('a');
+    acc.toggle('b');
+    expect(acc.isExpanded('a')).toBe(true);
+    expect(acc.isExpanded('b')).toBe(true);
+  });
+});
+
+describe('UiAccordionItem / Trigger / Content', () => {
+  /**
+   * Render UiAccordionItem directly with a UiAccordion instance provided via
+   * DI. Using `render(UiAccordionItem, { providers: [...] })` alone would fail
+   * because the required `value` input has no template binding and the
+   * component's initial computed reads it — so we set the input before any
+   * effect fires. The parent instance comes from rendering UiAccordion (which
+   * sets up the internal injection context inputs) and stashing its instance.
+   */
+  const renderItemWithParent = async () => {
+    // Render the accordion first so we have an instance with initialized signals.
+    const parentResult = await render(UiAccordion);
+    const parent = parentResult.componentRef.instance as UiAccordion;
+
+    // Now render the child with the parent as a DI value. This unmounts the
+    // previous render but the parent instance object (a plain JS class) still
+    // holds its signals.
+    const childResult = await render(UiAccordionItem, {
+      providers: [{ provide: UiAccordion, useValue: parent }],
+    });
+    const item = childResult.componentRef.instance as UiAccordionItem;
+    setInputSignal(item.itemValue, 'a');
+    await waitForUpdate();
+    return { parent, item, result: childResult };
+  };
+
+  it('item.toggle() delegates to the parent accordion', async () => {
+    const { parent, item } = await renderItemWithParent();
+    item.toggle();
+    expect(parent.isExpanded('a')).toBe(true);
+  });
+
+  it('trigger onTap toggles the parent item', async () => {
+    // The trigger injects UiAccordionItem (not UiAccordion) — same pattern.
+    const parentResult = await render(UiAccordion);
+    const parent = parentResult.componentRef.instance as UiAccordion;
+
+    const itemResult = await render(UiAccordionItem, {
+      providers: [{ provide: UiAccordion, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiAccordionItem;
+    setInputSignal(item.itemValue, 'a');
+    await waitForUpdate();
+
+    const triggerResult = await render(UiAccordionTrigger, {
+      providers: [{ provide: UiAccordionItem, useValue: item }],
+    });
+    const trigger = triggerResult.componentRef.instance as UiAccordionTrigger;
+    (trigger as unknown as { onTap: () => void }).onTap();
+    expect(parent.isExpanded('a')).toBe(true);
+  });
+
+  describe('content effect', () => {
+    it('runs the reveal animation after expansion via setTimeout', async () => {
+      const parentResult = await render(UiAccordion);
+      const parent = parentResult.componentRef.instance as UiAccordion;
+
+      const itemResult = await render(UiAccordionItem, {
+        providers: [{ provide: UiAccordion, useValue: parent }],
+      });
+      const item = itemResult.componentRef.instance as UiAccordionItem;
+      setInputSignal(item.itemValue, 'a');
+      await waitForUpdate();
+
+      const contentResult = await render(UiAccordionContent, {
+        providers: [{ provide: UiAccordionItem, useValue: item }],
+      });
+      const content = contentResult.componentRef.instance as UiAccordionContent;
+      // JIT + jsdom doesn't populate the `#content` viewChild — patch it with a
+      // signal returning the outer view so the setTimeout body's `el` check
+      // passes and revealIn/cancel actually run.
+      const view = contentResult.container.querySelector('view') as Element;
+      (content as unknown as { contentRef: unknown }).contentRef = signal({
+        nativeElement: view,
+      });
+
+      parent.toggle('a');
+      await waitForUpdate();
+      await waitForUpdate(); // wait for the effect's setTimeout(_, 0) to fire
+
+      // Cancellation path: toggle off then on to re-schedule with `#anim` set.
+      parent.toggle('a');
+      await waitForUpdate();
+      parent.toggle('a');
+      await waitForUpdate();
+      await waitForUpdate();
+      expect(parent.isExpanded('a')).toBe(true);
+    });
+
+    it('returns early inside setTimeout when contentRef is undefined', async () => {
+      // Covers the `if (!el) return;` true branch — no monkey-patch here, so
+      // the viewChild is unresolved and the setTimeout body bails out.
+      const parentResult = await render(UiAccordion);
+      const parent = parentResult.componentRef.instance as UiAccordion;
+
+      const itemResult = await render(UiAccordionItem, {
+        providers: [{ provide: UiAccordion, useValue: parent }],
+      });
+      const item = itemResult.componentRef.instance as UiAccordionItem;
+      setInputSignal(item.itemValue, 'a');
+      await waitForUpdate();
+
+      await render(UiAccordionContent, {
+        providers: [{ provide: UiAccordionItem, useValue: item }],
+      });
+      parent.toggle('a');
+      await waitForUpdate();
+      await waitForUpdate();
+      expect(parent.isExpanded('a')).toBe(true);
+    });
+  });
+});

package/dist/ui/components/accordion/accordion.ts

@@ -0,0 +1,173 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, revealIn } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-accordion',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiAccordion {
+  readonly type = input<'single' | 'multiple'>('single');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly expandedItems = signal<Set<string>>(new Set());
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col flex', this.userClass()),
+  );
+
+  toggle(value: string): void {
+    // `new Set(current)` creates a fresh Set on every toggle. Angular signals
+    // use reference equality — mutating the existing Set in-place wouldn't
+    // trigger change detection since the signal value (the Set reference) stays
+    // the same. A new Set forces the signal to see a changed reference.
+    const current = new Set(this.expandedItems());
+    if (current.has(value)) {
+      current.delete(value);
+    } else {
+      if (this.type() === 'single') {
+        current.clear();
+      }
+      current.add(value);
+    }
+    this.expandedItems.set(current);
+  }
+
+  isExpanded(value: string): boolean {
+    return this.expandedItems().has(value);
+  }
+}
+
+@Component({
+  selector: 'ui-accordion-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="itemClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiAccordionItem {
+  readonly #accordion = inject(UiAccordion);
+
+  readonly itemValue = input.required<string>({ alias: 'value' });
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly isExpanded = computed(() =>
+    this.#accordion.expandedItems().has(this.itemValue()),
+  );
+
+  protected readonly itemClass = computed(() =>
+    cn('flex-col border-b border-border flex', this.userClass()),
+  );
+
+  toggle(): void {
+    this.#accordion.toggle(this.itemValue());
+  }
+}
+
+@Component({
+  selector: 'ui-accordion-trigger',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="triggerClass()" (bindtap)="onTap()">
+      <text [class]="textClass()"><ng-content /></text>
+      <text [class]="chevronClass()">{{ item.isExpanded() ? '▼' : '▶' }}</text>
+    </view>
+  `,
+})
+export class UiAccordionTrigger {
+  protected readonly item = inject(UiAccordionItem);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly triggerClass = computed(() =>
+    cn('flex-row items-center py-4 flex justify-between', this.userClass()),
+  );
+
+  protected readonly textClass = computed(() =>
+    cn('text-sm font-medium text-foreground'),
+  );
+
+  protected readonly chevronClass = computed(() =>
+    cn('text-xs text-muted-foreground'),
+  );
+
+  protected onTap(): void {
+    this.item.toggle();
+  }
+}
+
+@Component({
+  selector: 'ui-accordion-content',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // Mount the content only while expanded, via `@if`. On Lynx this works because
+  // the renderer recreates a destroyed element's native painting node when it is
+  // re-inserted (see LynxElement.#recreateSubtree in @blotch/angular-lynx): when
+  // the panel re-expands, the projected `<ng-content>` — recycled with the
+  // re-created wrapper — is rebuilt from cache and renders again, cycle after
+  // cycle. The inline opacity/transform is the resting state; revealIn animates
+  // from opacity:0 / translateY(-8px) with fill:'none' so the inline style takes
+  // over once the animation ends.
+  template: `
+    @if (item.isExpanded()) {
+      <view
+        #content
+        [class]="contentClass()"
+        style="opacity: 1; transform: translateY(0);"
+      >
+        <ng-content />
+      </view>
+    }
+  `,
+})
+export class UiAccordionContent {
+  protected readonly item = inject(UiAccordionItem);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly contentRef = viewChild<ElementRef>('content');
+  #anim?: AnimationHandle;
+
+  constructor() {
+    // Animate the reveal whenever the panel expands. contentRef only resolves
+    // while the `@if` content is mounted; defer one macrotask so the freshly
+    // (re)created element is committed to the native tree before we animate it.
+    effect(() => {
+      if (!this.item.isExpanded()) return;
+      setTimeout(() => {
+        const el = this.contentRef()?.nativeElement;
+        if (!el) return;
+        this.#anim?.cancel();
+        this.#anim = revealIn(el, { fromY: -8, fill: 'none' });
+      }, 0);
+    });
+  }
+
+  protected readonly contentClass = computed(() =>
+    cn('flex-col pb-4 flex', this.userClass()),
+  );
+}

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

@@ -0,0 +1,6 @@
+export {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+} from './accordion';

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

@@ -0,0 +1,211 @@
+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, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  UiActionSheet,
+  UiActionSheetCancel,
+  UiActionSheetItem,
+  UiActionSheetTitle,
+} from './action-sheet';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiActionSheet,
+    UiActionSheetTitle,
+    UiActionSheetItem,
+    UiActionSheetCancel,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-action-sheet [(open)]="open">
+      <ui-action-sheet-title>Pick</ui-action-sheet-title>
+      <ui-action-sheet-item>Option</ui-action-sheet-item>
+      <ui-action-sheet-cancel>Cancel</ui-action-sheet-cancel>
+    </ui-action-sheet>
+  `,
+})
+class ActionSheetHost {
+  open = true;
+}
+
+describe('UiActionSheet', () => {
+  const patchRefs = (inst: UiActionSheet, view: Element) => {
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: view,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: view,
+    });
+  };
+
+  it('renders the sheet, title, item, and cancel content', async () => {
+    const { getByText } = await render(ActionSheetHost);
+    expect(getByText('Pick')).toBeTruthy();
+    expect(getByText('Option')).toBeTruthy();
+    expect(getByText('Cancel')).toBeTruthy();
+  });
+
+  it('backdrop tap closes the sheet', async () => {
+    const { componentRef } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    inst.open.set(true);
+    await waitForUpdate();
+    (inst as unknown as { onBackdropTap: () => void }).onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('close() sets open to false', async () => {
+    const { componentRef } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    inst.open.set(true);
+    inst.close();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('panel tap is a no-op', async () => {
+    const { componentRef } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    expect(() =>
+      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
+    ).not.toThrow();
+  });
+
+  it('open effect runs the animate-in and animate-out lifecycles', async () => {
+    const { componentRef, container } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    const view = container.querySelector('view') as Element;
+    patchRefs(inst, 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 () => {
+    const { componentRef } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    inst.open.set(false);
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('applies user class on the panel', async () => {
+    const { componentRef, container } = await render(UiActionSheet);
+    const inst = componentRef.instance as UiActionSheet;
+    setInputSignal(inst.userClass, 'my-panel');
+    await waitForUpdate();
+    expect(
+      Array.from(container.querySelectorAll('view')).some((el) =>
+        el.getAttribute('class')?.includes('my-panel'),
+      ),
+    ).toBe(true);
+  });
+});
+
+describe('UiActionSheetTitle', () => {
+  it('renders projected content', async () => {
+    const { container } = await render(UiActionSheetTitle);
+    expect(container.querySelector('view')).toBeTruthy();
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+});
+
+describe('UiActionSheetItem', () => {
+  const renderItem = async () => {
+    const parentResult = await render(UiActionSheet);
+    const parent = parentResult.componentRef.instance as UiActionSheet;
+    parent.open.set(true);
+    await waitForUpdate();
+
+    const itemResult = await render(UiActionSheetItem, {
+      providers: [{ provide: UiActionSheet, useValue: parent }],
+    });
+    return { parent, itemResult };
+  };
+
+  it('onTap emits `pressed` and closes the parent sheet', async () => {
+    const { parent, itemResult } = await renderItem();
+    const inst = itemResult.componentRef
+      .instance as unknown as UiActionSheetItem & {
+      onTap: () => void;
+    };
+    const emitted = vi.fn();
+    inst.pressed.subscribe(emitted);
+    inst.onTap();
+    expect(emitted).toHaveBeenCalledTimes(1);
+    expect(parent.open()).toBe(false);
+  });
+
+  it('press handlers run cleanly', async () => {
+    const { itemResult } = await renderItem();
+    const inst = itemResult.componentRef.instance as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+  });
+
+  it('applies destructive variant text class', async () => {
+    const { itemResult } = await renderItem();
+    const inst = itemResult.componentRef.instance as UiActionSheetItem;
+    setInputSignal(inst.variant, 'destructive');
+    await waitForUpdate();
+    const text = itemResult.container.querySelector('text');
+    expect(text?.getAttribute('class')).toContain('text-destructive');
+  });
+});
+
+describe('UiActionSheetCancel', () => {
+  const renderCancel = async () => {
+    const parentResult = await render(UiActionSheet);
+    const parent = parentResult.componentRef.instance as UiActionSheet;
+    parent.open.set(true);
+    await waitForUpdate();
+
+    const cancelResult = await render(UiActionSheetCancel, {
+      providers: [{ provide: UiActionSheet, useValue: parent }],
+    });
+    return { parent, cancelResult };
+  };
+
+  it('renders the default cancel label', async () => {
+    const { cancelResult } = await renderCancel();
+    expect(cancelResult.container.textContent).toContain('Cancel');
+  });
+
+  it('onTap closes the parent sheet', async () => {
+    const { parent, cancelResult } = await renderCancel();
+    const inst = cancelResult.componentRef.instance as unknown as {
+      onTap: () => void;
+    };
+    inst.onTap();
+    expect(parent.open()).toBe(false);
+  });
+
+  it('press handlers run cleanly', async () => {
+    const { cancelResult } = await renderCancel();
+    const inst = cancelResult.componentRef.instance as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+  });
+});