@blotch/dolan 0.0.0-stage → 22.2.0

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

@@ -0,0 +1,110 @@
+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 {
+  UiCard,
+  UiCardContent,
+  UiCardDescription,
+  UiCardFooter,
+  UiCardHeader,
+  UiCardTitle,
+} from './card';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiCard,
+    UiCardHeader,
+    UiCardTitle,
+    UiCardDescription,
+    UiCardContent,
+    UiCardFooter,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-card>
+      <ui-card-header>
+        <ui-card-title>Title</ui-card-title>
+        <ui-card-description>Desc</ui-card-description>
+      </ui-card-header>
+      <ui-card-content><text>Body</text></ui-card-content>
+      <ui-card-footer><text>Actions</text></ui-card-footer>
+    </ui-card>
+  `,
+})
+class CardHost {}
+
+describe('UiCard', () => {
+  it('renders each sub-component with projected content', async () => {
+    const { getByText } = await render(CardHost);
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Desc')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+    expect(getByText('Actions')).toBeTruthy();
+  });
+
+  it('renders without a host wrapper', async () => {
+    const { container } = await render(UiCard);
+    expect(container).toBeTruthy();
+  });
+
+  it('press handlers are no-ops when pressable is false', async () => {
+    const { componentRef } = await render(UiCard);
+    const inst = 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('press handlers fire animations when pressable is true', async () => {
+    const { componentRef } = await render(UiCard);
+    const inst = componentRef.instance as UiCard;
+    setInputSignal(inst.pressable, true);
+    await waitForUpdate();
+    const cast = inst as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    // Run twice so `#pressAnim?.cancel()` gets exercised on the second call.
+    cast.onPressStart();
+    cast.onPressStart();
+    cast.onPressEnd();
+    cast.onPressCancel();
+    // No assertion — coverage-only paths. Confirm no throw.
+    expect(true).toBe(true);
+  });
+});
+
+describe('Card sub-components', () => {
+  it('UiCardHeader renders projected content', async () => {
+    const { container } = await render(UiCardHeader);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+
+  it('UiCardTitle renders projected content', async () => {
+    const { container } = await render(UiCardTitle);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiCardDescription renders projected content', async () => {
+    const { container } = await render(UiCardDescription);
+    expect(container.querySelector('text')).toBeTruthy();
+  });
+
+  it('UiCardContent renders projected content', async () => {
+    const { container } = await render(UiCardContent);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+
+  it('UiCardFooter renders projected content', async () => {
+    const { container } = await render(UiCardFooter);
+    expect(container.querySelector('view')).toBeTruthy();
+  });
+});

package/dist/ui/components/card/card.ts

@@ -0,0 +1,162 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type AnimationHandle,
+  SCALE,
+  pressDown,
+  pressRelease,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-card',
+  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()"
+    >
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCard {
+  /**
+   * When true, the card responds to touch with a subtle scale animation
+   */
+  readonly pressable = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly containerClass = computed(() =>
+    cn('rounded-lg border border-border bg-card', this.userClass()),
+  );
+
+  protected onPressStart(): void {
+    if (!this.pressable()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(
+      this.containerRef()?.nativeElement,
+      SCALE.pressDownLight,
+    );
+  }
+
+  protected onPressEnd(): void {
+    if (!this.pressable()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    // Restore scale on cancel — without this, a scroll gesture taking over
+    // mid-press would leave the card stuck in its pressed-down state.
+    if (!this.pressable()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+}
+
+@Component({
+  selector: 'ui-card-header',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCardHeader {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-col p-6 flex', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-card-title',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiCardTitle {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-2xl font-semibold text-card-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-card-description',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiCardDescription {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-card-content',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCardContent {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('p-6 pt-0', this.userClass()),
+  );
+}
+
+@Component({
+  selector: 'ui-card-footer',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiCardFooter {
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('items-center p-6 pt-0 flex', this.userClass()),
+  );
+}

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

@@ -0,0 +1,8 @@
+export {
+  UiCard,
+  UiCardHeader,
+  UiCardTitle,
+  UiCardDescription,
+  UiCardContent,
+  UiCardFooter,
+} from './card';

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

@@ -0,0 +1,188 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiCartesianChart } from './cartesian-chart';
+
+// These tests exercise the class methods and template-facing computed signals of the
+// full chart component (the sibling test file covers just the exported pure
+// geometry helpers with a mocked Angular).
+describe('UiCartesianChart — component', () => {
+  const readComputedSignals = (inst: UiCartesianChart) => {
+    const cast = inst as unknown as {
+      containerClass: () => string;
+      containerStyle: () => string;
+      plotStyle: () => string;
+      gridlines: () => { style: string }[];
+      verticalGridlines: () => { style: string }[];
+      yLabels: () => { style: string; text: string }[];
+      xLabels: () => { style: string; text: string }[];
+      yAxisLabelStyle: () => string;
+      xAxisLabelStyle: () => string;
+      zoomControlsStyle: () => string;
+    };
+    return {
+      containerClass: cast.containerClass(),
+      containerStyle: cast.containerStyle(),
+      plotStyle: cast.plotStyle(),
+      gridlines: cast.gridlines(),
+      verticalGridlines: cast.verticalGridlines(),
+      yLabels: cast.yLabels(),
+      xLabels: cast.xLabels(),
+      yAxisLabelStyle: cast.yAxisLabelStyle(),
+      xAxisLabelStyle: cast.xAxisLabelStyle(),
+      zoomControlsStyle: cast.zoomControlsStyle(),
+    };
+  };
+
+  it('renders with default configuration', async () => {
+    const { container } = await render(UiCartesianChart);
+    expect(container).toBeTruthy();
+  });
+
+  it('exposes shared scales that project data into the plot area', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 50]);
+    await waitForUpdate();
+    expect(typeof inst.xScale()).toBe('function');
+    expect(typeof inst.yScale()).toBe('function');
+    expect(inst.plotWidth()).toBeGreaterThan(0);
+    expect(inst.plotHeight()).toBeGreaterThan(0);
+  });
+
+  it('produces gridlines, tick labels, and axis label styles', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 100]);
+    setInputSignal(inst.xAxisLabel, 'X label');
+    setInputSignal(inst.yAxisLabel, 'Y label');
+    setInputSignal(inst.showGrid, true);
+    setInputSignal(inst.showXGrid, true);
+    await waitForUpdate();
+    const c = readComputedSignals(inst);
+    expect(c.gridlines.length).toBeGreaterThan(0);
+    expect(c.verticalGridlines.length).toBeGreaterThan(0);
+    expect(c.yLabels.length).toBeGreaterThan(0);
+    expect(c.xLabels.length).toBeGreaterThan(0);
+    expect(c.yAxisLabelStyle).toContain('transform');
+    expect(c.xAxisLabelStyle.length).toBeGreaterThan(0);
+  });
+
+  it('uses explicit tick arrays when provided', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 10]);
+    setInputSignal(inst.yDomain, [0, 10]);
+    setInputSignal(inst.xTicks, [0, 5, 10]);
+    setInputSignal(inst.yTicks, [0, 2, 5, 10]);
+    await waitForUpdate();
+    const c = readComputedSignals(inst);
+    expect(c.yLabels.map((l) => l.text).join(',')).toContain('5');
+    expect(c.xLabels.map((l) => l.text).join(',')).toContain('5');
+  });
+
+  it('hides gridlines when disabled', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.showGrid, false);
+    setInputSignal(inst.showXGrid, false);
+    await waitForUpdate();
+    // Even with showGrid=false the computed still runs — just verify the
+    // container mounts cleanly.
+    expect(readComputedSignals(inst).plotStyle.length).toBeGreaterThan(0);
+  });
+
+  it('applies inner padding to shrink the projected range', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 100]);
+    setInputSignal(inst.padding, {
+      top: 0.1,
+      bottom: 0.1,
+      left: 0.1,
+      right: 0.1,
+    });
+    await waitForUpdate();
+    const scaleAtZero = inst.xScale()(0);
+    expect(scaleAtZero).toBeGreaterThan(0);
+  });
+
+  it('zoomIn / zoomOut / resetZoom on the xy axes', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 100]);
+    setInputSignal(inst.zoomable, true);
+    await waitForUpdate();
+    inst.zoomIn();
+    inst.zoomOut();
+    inst.zoomIn();
+    inst.resetZoom();
+    // No throw; the internal view domains reset to null at rest.
+    expect(inst.xScale()(0)).toBeLessThan(inst.xScale()(100));
+  });
+
+  it('zoomIn only along the x-axis when zoomAxes = "x"', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 100]);
+    setInputSignal(inst.zoomable, true);
+    setInputSignal(inst.zoomAxes, 'x');
+    await waitForUpdate();
+    inst.zoomIn();
+    inst.zoomIn();
+    expect(typeof inst.xScale()).toBe('function');
+  });
+
+  it('zoomIn only along the y-axis when zoomAxes = "y"', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.xDomain, [0, 100]);
+    setInputSignal(inst.yDomain, [0, 100]);
+    setInputSignal(inst.zoomable, true);
+    setInputSignal(inst.zoomAxes, 'y');
+    await waitForUpdate();
+    inst.zoomIn();
+    inst.zoomIn();
+    expect(typeof inst.yScale()).toBe('function');
+  });
+
+  it('shows zoom controls only when zoomable', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.zoomable, true);
+    setInputSignal(inst.showZoomControls, true);
+    await waitForUpdate();
+    expect(readComputedSignals(inst).zoomControlsStyle.length).toBeGreaterThan(
+      0,
+    );
+  });
+
+  it('containerClass includes user class alias', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    setInputSignal(inst.userClass, 'my-chart');
+    await waitForUpdate();
+    expect(readComputedSignals(inst).containerClass).toContain('my-chart');
+  });
+
+  it('zoomIn on a zero-width x-domain collapses back to rest (full-span guard)', async () => {
+    const { componentRef } = await render(UiCartesianChart);
+    const inst = componentRef.instance as UiCartesianChart;
+    // A degenerate domain forces the #isFullSpan(baseSpan === 0) branch when
+    // any zoom write is attempted.
+    setInputSignal(inst.xDomain, [5, 5]);
+    setInputSignal(inst.yDomain, [5, 5]);
+    setInputSignal(inst.zoomable, true);
+    await waitForUpdate();
+    inst.zoomIn();
+    inst.zoomOut();
+    inst.resetZoom();
+    // Scales remain callable and produce a finite pixel value at the domain point.
+    expect(Number.isFinite(inst.xScale()(5))).toBe(true);
+  });
+});