@blotch/dolan 0.0.0-stage → 22.2.0

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

@@ -0,0 +1,134 @@
+import { signal } from '@angular/core';
+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 { UiInput } from './input';
+
+describe('UiInput', () => {
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiInput);
+    expect(container).toBeTruthy();
+  });
+
+  it('onInput() updates the model and emits `changed`', async () => {
+    const { componentRef } = await render(UiInput);
+    const inst = componentRef.instance as unknown as UiInput & {
+      onInput: (e: { detail: { value: string } }) => void;
+    };
+    const emitted: string[] = [];
+    inst.changed.subscribe((v) => emitted.push(v));
+    inst.onInput({ detail: { value: 'hello' } });
+    expect(inst.value()).toBe('hello');
+    expect(emitted).toEqual(['hello']);
+  });
+
+  it('onInput() is a no-op when disabled', async () => {
+    const { componentRef } = await render(UiInput);
+    const inst = componentRef.instance as unknown as UiInput & {
+      onInput: (e: { detail: { value: string } }) => void;
+    };
+    setInputSignal(inst.disabled, true);
+    const emitted = vi.fn();
+    inst.changed.subscribe(emitted);
+    inst.onInput({ detail: { value: 'blocked' } });
+    expect(inst.value()).toBe('');
+    expect(emitted).not.toHaveBeenCalled();
+  });
+
+  it('onFocus() flips the focused state and emits `focused`', async () => {
+    const { componentRef, container } = await render(UiInput);
+    const inst = componentRef.instance as unknown as UiInput & {
+      onFocus: () => void;
+    };
+    const emitted = vi.fn();
+    inst.focused.subscribe(emitted);
+    inst.onFocus();
+    await waitForUpdate();
+    expect(emitted).toHaveBeenCalledTimes(1);
+    // Focus turns the overlay opacity to 1 via ringVisible().
+    const overlay = container.querySelector('[style*="box-shadow"]');
+    expect(overlay?.getAttribute('style')).toContain('opacity');
+  });
+
+  it('onBlur() clears focused state and emits `blurred`', async () => {
+    const { componentRef } = await render(UiInput);
+    const inst = componentRef.instance as unknown as UiInput & {
+      onFocus: () => void;
+      onBlur: () => void;
+    };
+    const emitted = vi.fn();
+    inst.blurred.subscribe(emitted);
+    inst.onFocus();
+    inst.onBlur();
+    expect(emitted).toHaveBeenCalledTimes(1);
+  });
+
+  it('error input triggers the shake animation via effect', async () => {
+    // The effect reads error() + containerRef.nativeElement and calls shake().
+    // Setting error to a non-empty value while it was empty exercises the branch.
+    // JIT + jsdom doesn't populate template-ref viewChild queries, so we
+    // monkey-patch containerRef with a signal returning a fake ElementRef so the
+    // effect's `el` check passes and the shake path runs.
+    const { componentRef, container } = await render(UiInput);
+    const inst = componentRef.instance as UiInput;
+    const view = container.querySelector('view') as Element;
+    (inst as unknown as { containerRef: unknown }).containerRef = signal({
+      nativeElement: view,
+    });
+    setInputSignal(inst.error, 'Required');
+    await waitForUpdate();
+    await waitForUpdate();
+    // The error text should render and the destructive ring shadow should apply.
+    expect(container.textContent).toContain('Required');
+
+    // Re-trigger the shake (previous error cleared → then set) so `#shakeAnim`
+    // is set once and canceled the next time — covers both branches of `?.`.
+    setInputSignal(inst.error, '');
+    await waitForUpdate();
+    await waitForUpdate();
+    setInputSignal(inst.error, 'Required again');
+    await waitForUpdate();
+    await waitForUpdate();
+    expect(container.textContent).toContain('Required again');
+  });
+
+  it('renders helper text when no error is present', async () => {
+    const { componentRef, container } = await render(UiInput);
+    const inst = componentRef.instance as UiInput;
+    setInputSignal(inst.helperText, 'Enter your name');
+    await waitForUpdate();
+    expect(container.textContent).toContain('Enter your name');
+  });
+
+  it('renders the label when provided', async () => {
+    const { componentRef, container } = await render(UiInput);
+    const inst = componentRef.instance as UiInput;
+    setInputSignal(inst.label, 'Name');
+    await waitForUpdate();
+    expect(container.textContent).toContain('Name');
+  });
+
+  it('makes the wrapper a stacking context so the field scrolls with it', async () => {
+    // On Lynx a z-indexed element inside a scroll-view only follows the scroll
+    // when an ancestor inside the scroll content is a stacking context. Without
+    // z-0 on the wrapper, the native field (and its placeholder) stays fixed on
+    // screen while the page scrolls.
+    const { container } = await render(UiInput);
+    const wrapper = container.querySelector(
+      '[class*="rounded-xl"][class*="bg-muted"]',
+    );
+    expect(wrapper?.getAttribute('class')?.split(/\s+/)).toContain('z-0');
+  });
+
+  it('applies the disabled dim class when disabled', async () => {
+    // Covers the true branch of `disabled() && 'opacity-50'` in inputWrapperClass.
+    const { componentRef, container } = await render(UiInput);
+    const inst = componentRef.instance as UiInput;
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    const wrapper = container.querySelector(
+      '[class*="rounded-xl"][class*="bg-muted"]',
+    );
+    expect(wrapper?.getAttribute('class')).toContain('opacity-50');
+  });
+});

package/dist/ui/components/input/input.ts

@@ -0,0 +1,189 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { type FormValueControl } from '@angular/forms/signals';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { type AnimationHandle, shake } from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-input',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view #container [class]="containerClass()">
+      @if (label()) {
+        <text [class]="labelClass()">{{ label() }}</text>
+      }
+      <!-- Focus ring is an inline box-shadow on a dedicated overlay layer, not a
+           Tailwind ring-* class (the Lynx preset doesn't wire up --tw-ring-*, so
+           ring-* renders nothing on device). It rides its OWN layer so it can
+           fade: box-shadow is animatable:no on Lynx (the core rejects a
+           transition: box-shadow), but opacity is animatable, so we transition
+           the layer's opacity instead. The overlay is the FIRST child so Lynx,
+           which paints in strict source order, keeps the <input> on top and
+           tappable. Source order alone is NOT enough on web: CSS paints a
+           positioned (absolute) sibling above a static one regardless of source
+           order, so this transparent overlay would swallow every tap — no focus,
+           no typing. The <input> below therefore carries position:relative +
+           z-index:1 so it sits above the overlay on BOTH platforms (required on
+           web). On Lynx, though, a z-indexed element is stacked against its
+           nearest stacking context, and a scroll-view isn't one unless it sets
+           z-index itself — so the native input would stay fixed on screen while
+           the page scrolled (only its placeholder visibly floats). The wrapper's
+           z-0 makes it that stacking context, keeping the input's z-index local
+           so it scrolls with the field. pointer-events is avoided — it errors
+           the Lynx build. The shadow is OUTSET only: Lynx doesn't render inset box-shadows,
+           so the crisp 1px "border" is an outset ring hugging the edge, not a
+           real inset border. -->
+      <view [class]="inputWrapperClass()">
+        <view
+          class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
+          [style.transition]="'opacity 150ms ease'"
+          [style.box-shadow]="ringShadow()"
+          [style.opacity]="ringVisible() ? 1 : 0"
+        ></view>
+        <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
+             removes the attribute entirely; passing 'false' would set
+             disabled="false" which Lynx still treats as disabled. -->
+        <!-- [value] not [attr.value]: [attr.value] calls renderer.setAttribute()
+             which routes to __SetAttribute — a no-op for live text on Lynx native
+             inputs. [value] is an Angular input binding that triggers
+             LynxInput.ngOnChanges, where the setValue UIMethod override lives.
+             Without this, form model resets would update the signal but the
+             native input would keep showing the user's old typed text. -->
+        <input
+          [attr.placeholder]="placeholder()"
+          [attr.type]="type()"
+          [value]="value()"
+          [attr.disabled]="disabled() || undefined"
+          class="text-sm text-foreground"
+          style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
+          (bindinput)="onInput($any($event))"
+          (bindfocus)="onFocus()"
+          (bindblur)="onBlur()"
+        />
+      </view>
+      @if (error()) {
+        <text [class]="errorClass()">{{ error() }}</text>
+      } @else if (helperText()) {
+        <text [class]="helperClass()">{{ helperText() }}</text>
+      }
+    </view>
+  `,
+})
+export class UiInput implements FormValueControl<string> {
+  readonly value = model<string>('');
+  readonly label = input<string>('');
+  readonly placeholder = input<string>('');
+  readonly type = input<string>('text');
+  readonly helperText = input<string>('');
+  readonly error = input<string>('');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly changed = output<string>();
+  readonly focused = output<void>();
+  readonly blurred = output<void>();
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #isFocused = signal(false);
+  #shakeAnim?: AnimationHandle;
+  #previousError = '';
+
+  constructor() {
+    // Shake the input when an error appears (transition from no-error to error)
+    effect(() => {
+      const err = this.error();
+      const el = this.containerRef()?.nativeElement;
+      if (err && !this.#previousError && el) {
+        this.#shakeAnim?.cancel();
+        this.#shakeAnim = shake(el);
+      }
+      this.#previousError = err;
+    });
+  }
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col gap-1.5 flex', this.userClass()),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn('text-sm font-medium text-foreground'),
+  );
+
+  protected readonly inputWrapperClass = computed(() =>
+    // z-0: stacking context for the input's z-index (see the template comment).
+    cn(
+      'z-0 h-10 rounded-xl bg-muted px-3.5 py-2',
+      this.disabled() && 'opacity-50',
+    ),
+  );
+
+  /**
+   * Focus ring, drawn as an OUTSET box-shadow on a dedicated overlay layer (see
+   * the template comment for why it can't be a Tailwind ring-* class and why it
+   * needs its own layer). Two stacked outset shadows: a solid 1px ring hugging
+   * the edge (reads as a crisp border) and a softer 3px ring around it — both
+   * follow the wrapper's rounded-xl corners. Focus pairs var(--ring) with the
+   * translucent var(--ring-subtle); error uses solid var(--destructive) for both
+   * since it flags a problem. The value is always set (never null) so the shadow
+   * stays painted while the layer fades OUT — visibility is driven by
+   * ringVisible()/opacity, not by adding/removing the shadow. Colors resolve at
+   * runtime and track dark mode.
+   */
+  protected readonly ringShadow = computed(() =>
+    this.error()
+      ? '0 0 0 1px var(--destructive), 0 0 0 3px var(--destructive)'
+      : '0 0 0 1px var(--ring), 0 0 0 3px var(--ring-subtle)',
+  );
+
+  /**
+   * Whether the focus ring is shown. The overlay's opacity transitions between 0
+   * and 1 on this, fading the ring in/out (opacity is animatable on Lynx;
+   * box-shadow is not). Shown while focused, or while an error is present so an
+   * invalid field always carries the destructive ring.
+   */
+  protected readonly ringVisible = computed(
+    () => this.#isFocused() || this.error() !== '',
+  );
+
+  protected readonly helperClass = computed(() =>
+    cn('text-xs text-muted-foreground'),
+  );
+
+  protected readonly errorClass = computed(() =>
+    cn('text-xs text-destructive'),
+  );
+
+  protected onFocus(): void {
+    this.#isFocused.set(true);
+    this.focused.emit();
+  }
+
+  protected onBlur(): void {
+    this.#isFocused.set(false);
+    this.blurred.emit();
+  }
+
+  /**
+   * Lynx input events carry the updated value in `event.detail.value`,
+   * not in `event.target.value` as on the web — hence the custom type.
+   */
+  protected onInput(event: { detail: { value: string } }): void {
+    if (this.disabled()) return;
+    this.value.set(event.detail.value);
+    this.changed.emit(event.detail.value);
+  }
+}

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

@@ -0,0 +1 @@
+export { UiLabel } from './label';

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

@@ -0,0 +1,38 @@
+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 { UiLabel } from './label';
+
+@Component({
+  standalone: true,
+  imports: [UiLabel, LYNX_ELEMENTS],
+  template: `<ui-label>{{ label }}</ui-label>`,
+})
+class LabelHost {
+  label = 'Name';
+}
+
+describe('UiLabel', () => {
+  it('renders projected text', async () => {
+    const { getByText } = await render(LabelHost);
+    expect(getByText('Name')).toBeTruthy();
+  });
+
+  it('renders standalone with no host wrapper (default disabled=false)', async () => {
+    const { container } = await render(UiLabel);
+    const textEl = container.querySelector('text');
+    expect(textEl?.getAttribute('class')).toContain('font-medium');
+  });
+
+  it('applies opacity when disabled flips to true', async () => {
+    // JIT template bindings don't wire signal inputs — drive the input
+    // directly to exercise the `disabled() && 'opacity-50'` truthy branch.
+    const { componentRef, container } = await render(UiLabel);
+    setInputSignal((componentRef.instance as UiLabel).disabled, true);
+    await waitForUpdate();
+    const textEl = container.querySelector('text');
+    expect(textEl?.getAttribute('class')).toContain('opacity-50');
+  });
+});

package/dist/ui/components/label/label.ts

@@ -0,0 +1,24 @@
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-label',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="labelClass()"><ng-content /></text>`,
+})
+export class UiLabel {
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly labelClass = computed(() =>
+    cn(
+      'text-sm font-medium text-foreground',
+      this.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+}

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

@@ -0,0 +1,6 @@
+export {
+  UiLineChart,
+  UiLineSeries,
+  computeLineSegments,
+  type LineSegment,
+} from './line-chart';

package/dist/ui/components/line-chart/line-chart-render.test.ts

@@ -0,0 +1,121 @@
+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 { UiCartesianChart } from '../cartesian-chart/cartesian-chart';
+import { UiLineChart, UiLineSeries } from './line-chart';
+
+describe('UiLineChart', () => {
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiLineChart);
+    expect(container).toBeTruthy();
+  });
+
+  it('computes axis domains from data', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const inst = componentRef.instance as UiLineChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 0 },
+      { x: 5, y: 10 },
+      { x: 10, y: 5 },
+    ]);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number]; ticks: number[] };
+      yAxis: () => { domain: readonly [number, number]; ticks: number[] };
+    };
+    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(0);
+    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(10);
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(10);
+  });
+
+  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const inst = componentRef.instance as UiLineChart;
+    setInputSignal(inst.data, [
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+    ]);
+    setInputSignal(inst.xMin, -5);
+    setInputSignal(inst.xMax, 20);
+    setInputSignal(inst.yMin, -1);
+    setInputSignal(inst.yMax, 15);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      xAxis: () => { domain: readonly [number, number] };
+      yAxis: () => { domain: readonly [number, number] };
+    };
+    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(-5);
+    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(20);
+    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(-1);
+    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(15);
+  });
+
+  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const inst = componentRef.instance as UiLineChart;
+    // JIT doesn't wire the child cartesian chart's [xTickFormat] input, so the
+    // default formatter is never invoked through the template. Invoke it
+    // directly to cover its two-decimal rounding branch.
+    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
+    expect(inst.yTickFormat()(1.005)).toBe('1');
+  });
+});
+
+describe('UiLineSeries', () => {
+  const renderSeries = async () => {
+    const parentResult = await render(UiCartesianChart);
+    const parent = parentResult.componentRef.instance as UiCartesianChart;
+    setInputSignal(parent.xDomain, [0, 10]);
+    setInputSignal(parent.yDomain, [0, 10]);
+    await waitForUpdate();
+    const seriesResult = await render(UiLineSeries, {
+      providers: [{ provide: UiCartesianChart, useValue: parent }],
+    });
+    const series = seriesResult.componentRef.instance as UiLineSeries;
+    setInputSignal(series.data, [
+      { x: 0, y: 0 },
+      { x: 5, y: 5 },
+      { x: 10, y: 10 },
+    ]);
+    await waitForUpdate();
+    return { parent, series, seriesResult };
+  };
+
+  it('renders segments and dots for the projected data', async () => {
+    const { series } = await renderSeries();
+    const cast = series as unknown as {
+      segments: () => { style: string }[];
+      dots: () => { style: string }[];
+    };
+    expect(cast.segments().length).toBeGreaterThan(0);
+    expect(cast.dots().length).toBe(3);
+  });
+
+  it('hides dots when showDots is false', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.showDots, false);
+    await waitForUpdate();
+    const cast = series as unknown as { dots: () => { style: string }[] };
+    expect(cast.dots()).toEqual([]);
+  });
+
+  it('emits pointTap when onPointTap is invoked', async () => {
+    const { series } = await renderSeries();
+    const cb = vi.fn();
+    series.pointTap.subscribe(cb);
+    (series as unknown as { onPointTap: (p: unknown) => void }).onPointTap({
+      x: 1,
+      y: 2,
+    });
+    expect(cb).toHaveBeenCalledWith({ x: 1, y: 2 });
+  });
+
+  it('smooth mode resamples through sampleSmoothLine', async () => {
+    const { series } = await renderSeries();
+    setInputSignal(series.smooth, true);
+    await waitForUpdate();
+    const cast = series as unknown as { segments: () => { style: string }[] };
+    expect(cast.segments().length).toBeGreaterThan(2);
+  });
+});

package/dist/ui/components/line-chart/line-chart.test.ts

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock Angular (and the sibling cartesian-chart's Angular usage, which loads
+// transitively) so importing the module needs no framework runtime. Only the
+// exported pure `computeLineSegments` is exercised; components are never built.
+vi.mock('@angular/core', () => ({
+  Component: () => () => {},
+  ViewEncapsulation: { None: 0 },
+  computed: () => () => {},
+  inject: () => ({}),
+  input: () => () => {},
+  output: () => () => {},
+}));
+
+vi.mock('@blotch/angular-lynx', () => ({
+  LYNX_ELEMENTS: [],
+  // cartesian-chart (imported transitively) registers these in its decorator.
+  LynxGestureDetector: class {},
+  PanGesture: class {},
+  PinchGesture: class {},
+  Gesture: { Simultaneous: () => ({}) },
+}));
+
+const { computeLineSegments } = await import('./line-chart');
+
+describe('computeLineSegments', () => {
+  it('produces a horizontal segment (angle 0)', () => {
+    const segments = computeLineSegments([
+      { x: 0, y: 10 },
+      { x: 100, y: 10 },
+    ]);
+    expect(segments).toHaveLength(1);
+    expect(segments[0].x).toBe(0);
+    expect(segments[0].y).toBe(10);
+    expect(segments[0].length).toBeCloseTo(100);
+    expect(segments[0].angle).toBeCloseTo(0);
+  });
+
+  it('measures a vertical segment as 90 degrees (screen y-down)', () => {
+    const segments = computeLineSegments([
+      { x: 0, y: 0 },
+      { x: 0, y: 50 },
+    ]);
+    expect(segments[0].length).toBeCloseTo(50);
+    expect(segments[0].angle).toBeCloseTo(90);
+  });
+
+  it('measures a 45-degree diagonal', () => {
+    const segments = computeLineSegments([
+      { x: 0, y: 0 },
+      { x: 10, y: 10 },
+    ]);
+    expect(segments[0].length).toBeCloseTo(Math.sqrt(200));
+    expect(segments[0].angle).toBeCloseTo(45);
+  });
+
+  it('emits one segment per consecutive pair', () => {
+    const segments = computeLineSegments([
+      { x: 0, y: 0 },
+      { x: 10, y: 5 },
+      { x: 20, y: 0 },
+    ]);
+    expect(segments).toHaveLength(2);
+  });
+
+  it('skips zero-length (duplicate) points', () => {
+    const segments = computeLineSegments([
+      { x: 5, y: 5 },
+      { x: 5, y: 5 },
+      { x: 10, y: 5 },
+    ]);
+    expect(segments).toHaveLength(1);
+    expect(segments[0].x).toBe(5);
+    expect(segments[0].length).toBeCloseTo(5);
+  });
+
+  it('returns no segments for fewer than two points', () => {
+    expect(computeLineSegments([])).toEqual([]);
+    expect(computeLineSegments([{ x: 1, y: 1 }])).toEqual([]);
+  });
+});