@blotch/dolan 0.0.0-stage → 22.2.0

package/dist/ui/components/cartesian-chart/index.ts

@@ -0,0 +1,18 @@
+export {
+  UiCartesianChart,
+  linearScale,
+  invertLinear,
+  niceNum,
+  niceScale,
+  generateTicks,
+  generateAlignedTicks,
+  isValueOutsideDomain,
+  gridlineOffset,
+  clampWindow,
+  panWindow,
+  zoomWindow,
+  type ChartPoint,
+  type ChartDomain,
+  type ChartScale,
+  type ChartPadding,
+} from './cartesian-chart';

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

@@ -0,0 +1,59 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiCheckbox } from './checkbox';
+
+describe('UiCheckbox', () => {
+  it('renders unchecked by default', async () => {
+    const { container } = await render(UiCheckbox);
+    expect(container).toBeTruthy();
+  });
+
+  it('toggle() flips checked and emits the `changed` output', async () => {
+    const { componentRef } = await render(UiCheckbox);
+    const inst = componentRef.instance as UiCheckbox;
+    const changes: boolean[] = [];
+    inst.changed.subscribe((v) => changes.push(v));
+
+    inst.toggle();
+    expect(inst.checked()).toBe(true);
+    inst.toggle();
+    expect(inst.checked()).toBe(false);
+    expect(changes).toEqual([true, false]);
+  });
+
+  it('toggle() is a no-op when disabled is true', async () => {
+    const { componentRef } = await render(UiCheckbox);
+    const inst = componentRef.instance as UiCheckbox;
+    setInputSignal(inst.disabled, true);
+    const changed = vi.fn();
+    inst.changed.subscribe(changed);
+
+    inst.toggle();
+    expect(inst.checked()).toBe(false);
+    expect(changed).not.toHaveBeenCalled();
+  });
+
+  it('applies the "checked" box class and reveals the check mark opacity', async () => {
+    const { componentRef, container } = await render(UiCheckbox);
+    const inst = componentRef.instance as UiCheckbox;
+    inst.checked.set(true);
+    await waitForUpdate();
+
+    // The inner check-glyph is opacity: 1 when checked (opacity: 0 otherwise).
+    const check = container.querySelector('text');
+    expect(check?.getAttribute('style')).toContain('opacity: 1');
+  });
+
+  it('applies the disabled dim when disabled input is set', async () => {
+    const { componentRef, container } = await render(UiCheckbox);
+    setInputSignal((componentRef.instance as UiCheckbox).disabled, true);
+    await waitForUpdate();
+    // opacity-50 class lands on the box wrapper's class attribute.
+    const boxes = container.querySelectorAll('view');
+    const hasDim = Array.from(boxes).some((el) =>
+      el.getAttribute('class')?.includes('opacity-50'),
+    );
+    expect(hasDim).toBe(true);
+  });
+});

package/dist/ui/components/checkbox/checkbox.ts

@@ -0,0 +1,96 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, popIn, popOut } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-checkbox',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      class="h-11 w-11 items-center flex justify-center"
+      (bindtap)="toggle()"
+    >
+      <view [class]="boxClass()">
+        <text
+          #checkmark
+          [class]="checkClass()"
+          [style]="checked() ? 'opacity: 1;' : 'opacity: 0;'"
+        >
+          ✓
+        </text>
+      </view>
+    </view>
+  `,
+})
+export class UiCheckbox {
+  readonly checked = model(false);
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<boolean>();
+
+  readonly checkmarkRef = viewChild<ElementRef>('checkmark');
+  #checkAnim?: AnimationHandle;
+  #previousChecked?: boolean;
+
+  constructor() {
+    // Animate the checkmark on state transitions (skip initial render).
+    // `#previousChecked === undefined` guards the first run — we don't want to
+    // pop-in the checkmark when the component mounts already-checked.
+    // The `isChecked === this.#previousChecked` guard prevents a second animation
+    // from firing if the effect re-runs without an actual state change.
+    effect(() => {
+      const isChecked = this.checked();
+      const el = this.checkmarkRef()?.nativeElement;
+      // popIn/popOut call el.animate() which is inert in jsdom — the
+      // check-mark animation is exercised on-device.
+      /* v8 ignore start */
+      if (!el || this.#previousChecked === undefined) {
+        this.#previousChecked = isChecked;
+        return;
+      }
+      if (isChecked === this.#previousChecked) return;
+      this.#previousChecked = isChecked;
+
+      this.#checkAnim?.cancel();
+      this.#checkAnim = isChecked ? popIn(el) : popOut(el);
+      /* v8 ignore stop */
+    });
+  }
+
+  protected readonly boxClass = computed(() =>
+    cn(
+      'h-5 w-5 items-center rounded-sm border flex justify-center',
+      this.checked()
+        ? 'border-primary bg-primary'
+        : 'border-primary bg-transparent',
+      this.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected readonly checkClass = computed(() =>
+    cn('text-[10px] font-bold text-primary-foreground'),
+  );
+
+  toggle(): void {
+    if (this.disabled()) return;
+    const next = !this.checked();
+    this.checked.set(next);
+    this.changed.emit(next);
+  }
+}

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

@@ -0,0 +1 @@
+export { UiCheckbox } from './checkbox';

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

@@ -0,0 +1,112 @@
+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 {
+  UiCollapsible,
+  UiCollapsibleContent,
+  UiCollapsibleTrigger,
+} from './collapsible';
+
+@Component({
+  standalone: true,
+  imports: [UiCollapsible, LYNX_ELEMENTS],
+  template: `<ui-collapsible><text>Content</text></ui-collapsible>`,
+})
+class CollapsibleHost {}
+
+describe('UiCollapsible', () => {
+  it('renders projected content', async () => {
+    const { getByText } = await render(CollapsibleHost);
+    expect(getByText('Content')).toBeTruthy();
+  });
+
+  it('toggle() flips the open state', async () => {
+    const { componentRef } = await render(UiCollapsible);
+    const inst = componentRef.instance as UiCollapsible;
+    expect(inst.open()).toBe(false);
+    inst.toggle();
+    expect(inst.open()).toBe(true);
+    inst.toggle();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('toggle() is a no-op when disabled', async () => {
+    const { componentRef } = await render(UiCollapsible);
+    const inst = componentRef.instance as UiCollapsible;
+    setInputSignal(inst.disabled, true);
+    inst.toggle();
+    expect(inst.open()).toBe(false);
+  });
+});
+
+describe('UiCollapsibleTrigger', () => {
+  it('onTap delegates to the parent collapsible.toggle()', async () => {
+    const parentResult = await render(UiCollapsible);
+    const parent = parentResult.componentRef.instance as UiCollapsible;
+
+    const triggerResult = await render(UiCollapsibleTrigger, {
+      providers: [{ provide: UiCollapsible, useValue: parent }],
+    });
+    const trigger = triggerResult.componentRef.instance as UiCollapsibleTrigger;
+    (trigger as unknown as { onTap: () => void }).onTap();
+    expect(parent.open()).toBe(true);
+  });
+
+  it('applies disabled dim class when parent is disabled', async () => {
+    const parentResult = await render(UiCollapsible);
+    const parent = parentResult.componentRef.instance as UiCollapsible;
+    setInputSignal(parent.disabled, true);
+
+    const triggerResult = await render(UiCollapsibleTrigger, {
+      providers: [{ provide: UiCollapsible, useValue: parent }],
+    });
+    await waitForUpdate();
+    const view = triggerResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('opacity-50');
+  });
+});
+
+describe('UiCollapsibleContent', () => {
+  it('runs the reveal animation on open via setTimeout', async () => {
+    const parentResult = await render(UiCollapsible);
+    const parent = parentResult.componentRef.instance as UiCollapsible;
+
+    const contentResult = await render(UiCollapsibleContent, {
+      providers: [{ provide: UiCollapsible, useValue: parent }],
+    });
+    const content = contentResult.componentRef.instance as UiCollapsibleContent;
+    // 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 actually runs.
+    const view = contentResult.container.querySelector('view') as Element;
+    (content as unknown as { contentRef: unknown }).contentRef = signal({
+      nativeElement: view,
+    });
+
+    parent.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate(); // wait for the effect's setTimeout(_, 0) to fire
+
+    // Toggle off then on again to hit the cancel path with `#anim` already set.
+    parent.open.set(false);
+    await waitForUpdate();
+    parent.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(parent.open()).toBe(true);
+  });
+
+  it('bails out inside setTimeout when contentRef is undefined', async () => {
+    const parentResult = await render(UiCollapsible);
+    const parent = parentResult.componentRef.instance as UiCollapsible;
+    await render(UiCollapsibleContent, {
+      providers: [{ provide: UiCollapsible, useValue: parent }],
+    });
+    parent.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(parent.open()).toBe(true);
+  });
+});

package/dist/ui/components/collapsible/collapsible.ts

@@ -0,0 +1,122 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  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-collapsible',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCollapsible {
+  readonly open = model(false);
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col flex', this.userClass()),
+  );
+
+  toggle(): void {
+    if (!this.disabled()) {
+      this.open.update((v) => !v);
+    }
+  }
+}
+
+@Component({
+  selector: 'ui-collapsible-trigger',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="triggerClass()" (bindtap)="onTap()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCollapsibleTrigger {
+  readonly #collapsible = inject(UiCollapsible);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex-row items-center flex',
+      this.#collapsible.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected onTap(): void {
+    this.#collapsible.toggle();
+  }
+}
+
+@Component({
+  selector: 'ui-collapsible-content',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // Mount the content only while open, 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 reopens, the projected `<ng-content>` — recycled with the re-created
+  // wrapper — is rebuilt from cache and renders again on every open. 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 (collapsible.open()) {
+      <view
+        #content
+        [class]="contentClass()"
+        style="opacity: 1; transform: translateY(0);"
+      >
+        <ng-content />
+      </view>
+    }
+  `,
+})
+export class UiCollapsibleContent {
+  protected readonly collapsible = inject(UiCollapsible);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly contentRef = viewChild<ElementRef>('content');
+  #anim?: AnimationHandle;
+
+  constructor() {
+    // Animate the reveal whenever the panel opens. 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.collapsible.open()) 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 flex', this.userClass()),
+  );
+}

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

@@ -0,0 +1,5 @@
+export {
+  UiCollapsible,
+  UiCollapsibleTrigger,
+  UiCollapsibleContent,
+} from './collapsible';

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

@@ -0,0 +1,157 @@
+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 {
+  UiDialog,
+  UiDialogDescription,
+  UiDialogFooter,
+  UiDialogHeader,
+  UiDialogTitle,
+} from './dialog';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiDialog,
+    UiDialogHeader,
+    UiDialogTitle,
+    UiDialogDescription,
+    UiDialogFooter,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-dialog [(open)]="open">
+      <ui-dialog-header>
+        <ui-dialog-title>Title</ui-dialog-title>
+        <ui-dialog-description>Description</ui-dialog-description>
+      </ui-dialog-header>
+      <ui-dialog-footer><text>Actions</text></ui-dialog-footer>
+    </ui-dialog>
+  `,
+})
+class DialogHost {
+  open = true;
+}
+
+describe('UiDialog', () => {
+  it('renders header, title, description, and footer', async () => {
+    const { getByText } = await render(DialogHost);
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Description')).toBeTruthy();
+    expect(getByText('Actions')).toBeTruthy();
+  });
+
+  it('backdrop tap closes the dialog', async () => {
+    const { componentRef } = await render(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    inst.open.set(true);
+    await waitForUpdate();
+    (inst as unknown as { onBackdropTap: () => void }).onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('panel tap is a no-op (catchtap stops bubbling)', async () => {
+    const { componentRef } = await render(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    expect(() =>
+      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
+    ).not.toThrow();
+  });
+
+  it('open effect: showing then hiding runs the animate-in and animate-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(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    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();
+    // Wait for setTimeout chains to flush (nested setTimeouts inside #doOpen).
+    await waitForUpdate();
+    await waitForUpdate();
+
+    // Now close it — exercises #doClose + #animateOut. The nested setTimeout
+    // inside #doClose runs DURATION.normal (250ms) + 20ms later; wait real time.
+    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(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    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(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    // Default hidden — overlay carries display:none.
+    let overlay = container.querySelector('overlay');
+    expect(overlay?.getAttribute('style')).toContain('display: none');
+
+    // Open + advance so overlayVisible flips true.
+    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(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    setInputSignal(inst.userClass, 'custom-panel');
+    await waitForUpdate();
+    const panelCandidates = Array.from(container.querySelectorAll('view'));
+    expect(
+      panelCandidates.some((el) =>
+        el.getAttribute('class')?.includes('custom-panel'),
+      ),
+    ).toBe(true);
+  });
+});
+
+describe('Dialog sub-components', () => {
+  it('UiDialogHeader renders projected content', async () => {
+    const { container } = await render(UiDialogHeader);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+
+  it('UiDialogTitle renders projected content', async () => {
+    const { container } = await render(UiDialogTitle);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiDialogDescription renders projected content', async () => {
+    const { container } = await render(UiDialogDescription);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiDialogFooter renders projected content', async () => {
+    const { container } = await render(UiDialogFooter);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+});