@assistant-ui/react-generative-ui 0.0.7 → 0.0.9

package/src/vocabulary/collectFormValues.ts

@@ -0,0 +1,58 @@
+import type { FormEvent } from "react";
+
+/**
+ * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.
+ */
+export type FormControlElementLike = {
+  readonly name: string;
+  readonly type: string;
+  readonly value: string;
+  readonly checked?: boolean;
+  readonly disabled: boolean;
+};
+
+/**
+ * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, or that are `disabled`, are skipped entirely.
+ */
+export function collectFormValues(
+  elements: ArrayLike<FormControlElementLike>,
+): Record<string, unknown> {
+  const values: Record<string, unknown> = Object.create(null);
+
+  for (const element of Array.from(elements)) {
+    const { name, disabled } = element;
+    if (!name || disabled) continue;
+
+    if (element.type === "radio") {
+      if (element.checked) values[name] = element.value;
+      else if (!Object.hasOwn(values, name)) values[name] = undefined;
+      continue;
+    }
+
+    const value: string | boolean =
+      element.type === "checkbox" ? (element.checked ?? false) : element.value;
+
+    if (Object.hasOwn(values, name)) {
+      const existing = values[name];
+      values[name] = Array.isArray(existing)
+        ? [...existing, value]
+        : [existing, value];
+    } else {
+      values[name] = value;
+    }
+  }
+
+  return values;
+}
+
+/**
+ * Convenience wrapper around {@link collectFormValues} for a native form submit event; the cast from `HTMLFormControlsCollection` to `ArrayLike<FormControlElementLike>` lives here once instead of at every call site.
+ */
+export function collectFormValuesFromEvent(
+  event: FormEvent<HTMLFormElement>,
+): Record<string, unknown> {
+  return collectFormValues(
+    event.currentTarget
+      .elements as unknown as ArrayLike<FormControlElementLike>,
+  );
+}

package/src/vocabulary/data.test.tsx

@@ -52,16 +52,516 @@ describe("dataVocabulary", () => {
     ).toBe('<div data-aui="markdown">partial</div>');
   });
 
-  it("Chart renders a placeholder div with variant/color/data hooks", () => {
+  it("Chart bar variant renders one rect per data point", () => {
     const html = render({
       $type: "Chart",
       variant: "bar",
-      data: [{ label: "a", value: 1 }],
+      data: [{ value: 1 }, { value: 2 }, { value: 3 }],
       color: "#f00",
     });
     expect(html).toContain('data-aui="chart"');
     expect(html).toContain('data-aui-variant="bar"');
     expect(html).toContain('data-aui-color="#f00"');
-    expect(html).toContain("&quot;value&quot;:1");
+    expect((html.match(/<rect/g) ?? []).length).toBe(3);
+    expect(html).not.toContain("<polyline");
+    expect(html).not.toContain("data-aui-data");
+  });
+
+  it("Chart line variant renders a single polyline through all points", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      data: [{ value: 0 }, { value: 20 }, { value: 40 }],
+    });
+    expect((html.match(/<polyline/g) ?? []).length).toBe(1);
+    expect(html).not.toContain("<rect");
+    expect(html).toContain('points="0,40 50,20 100,0"');
+  });
+
+  it("Chart line variant with a single data point renders a circle, not a polyline", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      data: [{ value: 20 }],
+    });
+    expect(html).not.toContain("<polyline");
+    expect((html.match(/<circle/g) ?? []).length).toBe(1);
+    expect(html).toContain('cx="50"');
+    expect(html).toContain('cy="0"');
+    expect(html).toContain('r="2"');
+  });
+
+  it("Chart sparkline variant is structurally identical to line, differentiated by the variant attribute", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "sparkline",
+      data: [{ value: 0 }, { value: 20 }, { value: 40 }],
+    });
+    expect((html.match(/<polyline/g) ?? []).length).toBe(1);
+    expect(html).toContain('data-aui-variant="sparkline"');
+    expect(html).toContain('points="0,40 50,20 100,0"');
+  });
+
+  it("Chart renders an aria-label describing the variant and point count", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: 1 }, { value: 2 }],
+    });
+    expect(html).toContain('aria-label="bar chart with 2 data points"');
+  });
+
+  it("Chart with empty data renders an empty svg without throwing", () => {
+    expect(() =>
+      render({ $type: "Chart", variant: "bar", data: [] }),
+    ).not.toThrow();
+    const html = render({ $type: "Chart", variant: "line", data: [] });
+    expect(html).toContain('data-aui="chart"');
+    expect(html).not.toContain("<rect");
+    expect(html).not.toContain("<polyline");
+    expect(html).toContain('aria-label="line chart with 0 data points"');
+  });
+
+  it("Chart with missing data renders an empty svg without throwing", () => {
+    expect(() => render({ $type: "Chart", variant: "bar" })).not.toThrow();
+    const html = render({ $type: "Chart", variant: "bar" });
+    expect(html).toContain('data-aui="chart"');
+    expect(html).not.toContain("<rect");
+  });
+
+  it("Chart clamps negative and non-finite values to 0", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: -5 }, { value: Number.NaN }, { value: 10 }],
+    });
+    expect((html.match(/<rect/g) ?? []).length).toBe(3);
+    expect(html).toContain('height="0"');
+    expect(html).toContain('height="40"');
+  });
+
+  it("Chart with all-zero data renders flat baseline marks", () => {
+    const barHtml = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: 0 }, { value: 0 }],
+    });
+    expect((barHtml.match(/height="0"/g) ?? []).length).toBe(2);
+
+    const lineHtml = render({
+      $type: "Chart",
+      variant: "line",
+      data: [{ value: 0 }, { value: 0 }, { value: 0 }],
+    });
+    expect(lineHtml).toContain('points="0,40 50,40 100,40"');
+  });
+});
+
+describe("dataVocabulary Chart multi-series", () => {
+  it("wraps each series' marks in its own data-aui=chart-series group, indexed", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      series: [
+        { label: "A", data: [{ value: 1 }, { value: 2 }] },
+        { label: "B", data: [{ value: 3 }, { value: 4 }] },
+        { label: "C", data: [{ value: 5 }, { value: 6 }] },
+      ],
+    });
+    expect((html.match(/data-aui="chart-series"/g) ?? []).length).toBe(3);
+    expect(html).toContain('data-aui-series="0"');
+    expect(html).toContain('data-aui-series="1"');
+    expect(html).toContain('data-aui-series="2"');
+    expect((html.match(/<polyline/g) ?? []).length).toBe(3);
+  });
+
+  it("falls back to the data prop when series is an empty array", () => {
+    const withEmptySeries = render({
+      $type: "Chart",
+      variant: "bar",
+      series: [],
+      data: [{ value: 1 }, { value: 2 }],
+    });
+    const withDataOnly = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: 1 }, { value: 2 }],
+    });
+    expect((withEmptySeries.match(/<rect/g) ?? []).length).toBe(2);
+    expect(withDataOnly).toContain('data-aui-variant="bar"');
+  });
+
+  it("series takes precedence over data when both are present", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      data: [{ value: 999 }],
+      series: [{ data: [{ value: 1 }, { value: 2 }] }],
+    });
+    expect((html.match(/<rect/g) ?? []).length).toBe(2);
+  });
+
+  it("pads a shorter series with 0-valued points instead of throwing or misaligning", () => {
+    expect(() =>
+      render({
+        $type: "Chart",
+        variant: "bar",
+        series: [
+          { data: [{ value: 10 }, { value: 20 }, { value: 30 }] },
+          { data: [{ value: 5 }] },
+        ],
+      }),
+    ).not.toThrow();
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      series: [
+        { data: [{ value: 10 }, { value: 20 }, { value: 30 }] },
+        { data: [{ value: 5 }] },
+      ],
+    });
+    expect((html.match(/<rect/g) ?? []).length).toBe(6);
+    expect(html).toContain('aria-label="bar chart with 3 data points"');
+  });
+
+  it("treats a missing series data array as empty rather than throwing", () => {
+    expect(() =>
+      render({
+        $type: "Chart",
+        variant: "bar",
+        series: [{ label: "A" }, { data: [{ value: 1 }] }] as never,
+      }),
+    ).not.toThrow();
+  });
+});
+
+describe("dataVocabulary Chart stacking", () => {
+  it("stacked bars accumulate per x across series (known input)", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      stacked: true,
+      series: [
+        { data: [{ value: 10 }] },
+        { data: [{ value: 20 }] },
+        { data: [{ value: 30 }] },
+      ],
+    });
+    // total at the single x is 60 -> scaleMax (unstacked axis, plain max) = 60.
+    // series 0: height (10/60)*40 ≈ 6.667 at y = 40 - 0 - 6.667 ≈ 33.333
+    // series 1: height (20/60)*40 ≈ 13.333 at y = 40 - 6.667 - 13.333 ≈ 20
+    // series 2: height (30/60)*40 = 20 at y = 40 - 20 - 20 = 0
+    expect(html).toContain('y="33.333333333333336"');
+    expect(html).toContain('height="6.666666666666666"');
+    expect(html).toContain('y="20.000000000000004"');
+    expect(html).toContain('height="13.333333333333332"');
+    expect(html).toContain('y="0" width="80" height="20"');
+  });
+
+  it("unstacked (overlaid) bars all start from the baseline regardless of series order", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      series: [{ data: [{ value: 10 }] }, { data: [{ value: 20 }] }],
+    });
+    expect((html.match(/y="0"/g) ?? []).length).toBe(1); // only the tallest bar touches y=0
+  });
+
+  it("stacked areas build cumulative top/bottom polygons per series", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      stacked: true,
+      series: [
+        { data: [{ value: 10 }, { value: 10 }] },
+        { data: [{ value: 10 }, { value: 10 }] },
+      ],
+    });
+    expect((html.match(/<polygon/g) ?? []).length).toBe(2);
+    // series 0 (bottom band): top=10/20*40=20 -> y=20, bottom=0 -> y=40
+    expect(html).toContain('points="0,20 100,20 100,40 0,40"');
+    // series 1 (top band): top=20/20*40=40 -> y=0, bottom=10/20*40=20 -> y=20
+    expect(html).toContain('points="0,0 100,0 100,20 0,20"');
+  });
+
+  it("stacked bars with showAxis keep the bottom segment on the baseline, abut exactly, and share one denominator with the ticks (totals crossing a tick boundary)", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      stacked: true,
+      showAxis: true,
+      series: [
+        { data: [{ value: 50 }] },
+        { data: [{ value: 30 }] },
+        { data: [{ value: 25 }] },
+      ],
+    });
+    // total 105 crosses the 50*10^n boundary, so niceMax must fall back to the
+    // next power of ten (200) instead of resolving to an under-sized 100.
+    expect(html).toContain("<div>200</div><div>150</div>");
+    expect(html).toContain("<div>100</div><div>50</div><div>0</div>");
+
+    // series 0 (bottom): height=(50/200)*40=10 at y=40-0-10=30; bottom edge
+    // y+height=40, the chart baseline.
+    expect(html).toContain('y="30" width="80" height="10"');
+    // series 1: height=(30/200)*40=6 at y=40-10-6=24; abuts series 0's y=30
+    // exactly (24+6=30, no gap or overlap).
+    expect(html).toContain('y="24" width="80" height="6"');
+    // series 2 (top): height=(25/200)*40=5 at y=40-16-5=19; abuts series 1's
+    // y=24 exactly (19+5=24). The stack top (y=19) equals
+    // 40-(105/200)*40=19, the same denominator (200) the ticks above use.
+    expect(html).toContain('y="19" width="80" height="5"');
+  });
+
+  it("stacked areas keep the bottom band's baseline at the chart bottom regardless of scale", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      stacked: true,
+      showAxis: true,
+      series: [
+        { data: [{ value: 60 }, { value: 60 }] },
+        { data: [{ value: 60 }, { value: 60 }] },
+      ],
+    });
+    // total 120 crosses the same tick boundary (niceMax -> 200); the bottom
+    // band's own bottom edge must still sit at the chart baseline (y=40)
+    // regardless of scale, since it is built from an all-zero `bottoms` array.
+    expect(html).toContain("<div>200</div>");
+    expect(html).toContain('points="0,28 100,28 100,40 0,40"');
+  });
+});
+
+describe("dataVocabulary Chart area variant", () => {
+  it("renders a closed filled polygon with fill-opacity and a stroke on top", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      data: [{ value: 0 }, { value: 40 }],
+    });
+    expect(html).toContain("<polygon");
+    expect(html).toContain('fill="currentColor"');
+    expect(html).toContain('fill-opacity="0.25"');
+    expect(html).toContain('stroke="currentColor"');
+    // top line 0,40 -> 100,0 then closed back down to the baseline in reverse.
+    expect(html).toContain('points="0,40 100,0 100,40 0,40"');
+  });
+
+  it("renders a circle instead of a degenerate polygon for a single point", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      data: [{ value: 20 }],
+    });
+    expect(html).not.toContain("<polygon");
+    expect((html.match(/<circle/g) ?? []).length).toBe(1);
+  });
+
+  it("renders an empty series group without throwing when data is empty", () => {
+    expect(() =>
+      render({ $type: "Chart", variant: "area", data: [] }),
+    ).not.toThrow();
+    const html = render({ $type: "Chart", variant: "area", data: [] });
+    expect(html).not.toContain("<polygon");
+    expect(html).not.toContain("<circle");
+  });
+});
+
+describe("dataVocabulary Chart showAxis niceMax ticks", () => {
+  it("derives a round niceMax and renders 5 ticks from it down to 0", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showAxis: true,
+      data: [{ value: 42 }],
+    });
+    // niceMax(42): exponent=1, candidates 10,20,50 -> 50 is the first >= 42.
+    expect(html).toContain('data-aui="chart-frame"');
+    expect(html).toContain('data-aui="chart-ticks"');
+    const ticksMatch = html.match(
+      /<div data-aui="chart-ticks">(.*?)<\/div><svg/,
+    );
+    expect(ticksMatch).not.toBeNull();
+    const ticksHtml = ticksMatch![1]!;
+    expect((ticksHtml.match(/<div>/g) ?? []).length).toBe(5);
+    expect(ticksHtml).toContain("<div>50</div>");
+    expect(ticksHtml).toContain("<div>37.5</div>");
+    expect(ticksHtml).toContain("<div>25</div>");
+    expect(ticksHtml).toContain("<div>12.5</div>");
+    expect(ticksHtml).toContain("<div>0</div>");
+  });
+
+  it("scales marks against niceMax (not the raw max) when the axis is shown", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showAxis: true,
+      data: [{ value: 42 }],
+    });
+    // niceMax = 50, so height = (42/50)*40 = 33.6, not (42/42)*40 = 40.
+    expect(html).toContain('height="33.6"');
+  });
+
+  it("stays a bare svg (no frame) when neither showAxis nor showLegend is set, even with new props", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      stacked: true,
+      series: [{ data: [{ value: 1 }] }],
+    });
+    expect(html).not.toContain("chart-frame");
+    expect(html.startsWith("<svg")).toBe(true);
+  });
+});
+
+describe("dataVocabulary Chart legend and x-labels", () => {
+  it("renders an x-label row from the first series' point labels", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      showAxis: true,
+      data: [
+        { label: "Mon", value: 1 },
+        { label: "Tue", value: 2 },
+      ],
+    });
+    expect(html).toContain('data-aui="chart-xlabels">');
+    expect(html).toContain("<div>Mon</div>");
+    expect(html).toContain("<div>Tue</div>");
+  });
+
+  it("omits the legend row when showLegend is not set", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      showAxis: true,
+      series: [{ label: "A", data: [{ value: 1 }] }],
+    });
+    expect(html).not.toContain("chart-legend");
+  });
+
+  it("renders a legend item per series with an indexed swatch when showLegend is set", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      showLegend: true,
+      series: [
+        { label: "Revenue", data: [{ value: 1 }] },
+        { label: "Cost", data: [{ value: 2 }] },
+      ],
+    });
+    expect((html.match(/data-aui="chart-legend-item"/g) ?? []).length).toBe(2);
+    expect(html).toContain(
+      '<span data-aui="chart-legend-item" data-aui-series="0">',
+    );
+    expect(html).toContain(
+      '<span data-aui="chart-legend-item" data-aui-series="1">',
+    );
+    expect(html).toContain("Revenue");
+    expect(html).toContain("Cost");
+    expect((html.match(/data-aui="chart-legend-swatch"/g) ?? []).length).toBe(
+      2,
+    );
+  });
+
+  it("falls back to a positional label when a series has no label", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      showLegend: true,
+      series: [{ data: [{ value: 1 }] }],
+    });
+    expect(html).toContain("Series 1");
+  });
+
+  it("area series overlay from the baseline when not stacked", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      series: [
+        { data: [{ value: 10 }, { value: 20 }] },
+        { data: [{ value: 30 }, { value: 40 }] },
+      ],
+    });
+    const points = [...html.matchAll(/points="([^"]+)"/g)].map((m) => m[1]!);
+    expect(points).toHaveLength(2);
+    for (const polygon of points) {
+      expect(polygon).toContain("100,40");
+      expect(polygon).not.toContain("-");
+    }
+    expect(points[1]).toContain("100,0");
+  });
+
+  it("area series accumulate when stacked", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "area",
+      stacked: true,
+      series: [
+        { data: [{ value: 10 }, { value: 20 }] },
+        { data: [{ value: 30 }, { value: 40 }] },
+      ],
+    });
+    const points = [...html.matchAll(/points="([^"]+)"/g)].map((m) => m[1]!);
+    expect(points).toHaveLength(2);
+    expect(points[1]).toContain("100,0");
+    expect(points[1]).not.toContain("100,40");
+  });
+
+  it("line charts ignore stacked for the scale", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "line",
+      stacked: true,
+      series: [{ data: [{ value: 100 }] }, { data: [{ value: 100 }] }],
+    });
+    expect((html.match(/cy="0"/g) ?? []).length).toBe(2);
+  });
+
+  it("cycles series colors past the palette size", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showLegend: true,
+      series: Array.from({ length: 6 }, (_, i) => ({
+        label: `S${i + 1}`,
+        data: [{ value: i + 1 }],
+      })),
+    });
+    expect(html).toContain('<g data-aui="chart-series" data-aui-series="4">');
+    expect(
+      (html.match(/<g data-aui="chart-series" data-aui-series="0">/g) ?? [])
+        .length,
+    ).toBe(2);
+    expect(
+      (
+        html.match(
+          /<span data-aui="chart-legend-item" data-aui-series="0">/g,
+        ) ?? []
+      ).length,
+    ).toBe(2);
+  });
+
+  it("legend without axis renders no ticks or x labels", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showLegend: true,
+      series: [{ label: "A", data: [{ value: 1, label: "Jan" }] }],
+    });
+    expect(html).toContain('data-aui="chart-legend"');
+    expect(html).not.toContain('data-aui="chart-ticks"');
+    expect(html).not.toContain('data-aui="chart-xlabels"');
+  });
+
+  it("axis renders ticks and x labels", () => {
+    const html = render({
+      $type: "Chart",
+      variant: "bar",
+      showAxis: true,
+      series: [{ label: "A", data: [{ value: 1, label: "Jan" }] }],
+    });
+    expect(html).toContain('data-aui="chart-ticks"');
+    expect(html).toContain('data-aui="chart-xlabels"');
   });
 });