@assistant-ui/react-generative-ui 0.0.6 → 0.0.8

package/src/vocabulary/alert.tsx

@@ -0,0 +1,66 @@
+import { Children } from "react";
+import { z } from "zod";
+import type { GenerativeUILibrary } from "../types";
+import { ALERT_TONES } from "../ir";
+
+const MAX_CARDS = 10;
+
+export const alertVocabulary = {
+  Alert: {
+    description:
+      "A highlighted message conveying urgency. `tone` drives the severity.",
+    properties: z.object({
+      title: z.string().optional().describe("Alert title."),
+      description: z
+        .string()
+        .optional()
+        .describe("Supporting description text."),
+      tone: z
+        .enum(ALERT_TONES)
+        .optional()
+        .describe("Severity tone; defaults to `info`."),
+    }),
+    render: ({ title, description, tone, children }) => (
+      <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
+        {title ? <header data-aui="alert-title">{title}</header> : null}
+        {description ? <p data-aui="alert-desc">{description}</p> : null}
+        {children}
+      </div>
+    ),
+  },
+  Carousel: {
+    description:
+      "A horizontally scrollable group of `Card` children (max 10). Set `label` for an accessible name.",
+    properties: z.object({
+      label: z
+        .string()
+        .optional()
+        .describe("Accessible label for the carousel."),
+    }),
+    render: ({ label, children }) => {
+      const cards = Children.toArray(children).slice(0, MAX_CARDS);
+      const n = cards.length;
+      return (
+        <div
+          data-aui="carousel"
+          role={label ? "region" : "group"}
+          aria-roledescription="carousel"
+          aria-label={label}
+          tabIndex={0}
+        >
+          {cards.map((card, i) => (
+            <div
+              key={i}
+              data-aui="carousel-slide"
+              role="group"
+              aria-roledescription="slide"
+              aria-label={`${i + 1} of ${n}`}
+            >
+              {card}
+            </div>
+          ))}
+        </div>
+      );
+    },
+  },
+} satisfies GenerativeUILibrary;

package/src/vocabulary/collectFormValues.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect } from "vitest";
+import {
+  collectFormValues,
+  type FormControlElementLike,
+} from "./collectFormValues";
+
+const el = (
+  partial: Partial<FormControlElementLike>,
+): FormControlElementLike => ({
+  name: "",
+  type: "text",
+  value: "",
+  disabled: false,
+  ...partial,
+});
+
+describe("collectFormValues", () => {
+  it("resolves a checkbox to its checked boolean", () => {
+    expect(
+      collectFormValues([
+        el({ name: "agree", type: "checkbox", checked: true }),
+      ]),
+    ).toEqual({ agree: true });
+    expect(
+      collectFormValues([
+        el({ name: "agree", type: "checkbox", checked: false }),
+      ]),
+    ).toEqual({ agree: false });
+  });
+
+  it("resolves a radio set to the checked option's value", () => {
+    expect(
+      collectFormValues([
+        el({ name: "size", type: "radio", value: "sm", checked: false }),
+        el({ name: "size", type: "radio", value: "md", checked: true }),
+        el({ name: "size", type: "radio", value: "lg", checked: false }),
+      ]),
+    ).toEqual({ size: "md" });
+  });
+
+  it("resolves a radio set with no checked option to undefined", () => {
+    const values = collectFormValues([
+      el({ name: "size", type: "radio", value: "sm", checked: false }),
+      el({ name: "size", type: "radio", value: "md", checked: false }),
+    ]);
+    expect("size" in values).toBe(true);
+    expect(values.size).toBeUndefined();
+  });
+
+  it("resolves select/input/textarea/date controls to their string value", () => {
+    expect(
+      collectFormValues([
+        el({ name: "role", type: "select-one", value: "admin" }),
+        el({ name: "email", type: "email", value: "a@example.com" }),
+        el({ name: "bio", type: "textarea", value: "hi" }),
+        el({ name: "dob", type: "date", value: "2026-01-01" }),
+      ]),
+    ).toEqual({
+      role: "admin",
+      email: "a@example.com",
+      bio: "hi",
+      dob: "2026-01-01",
+    });
+  });
+
+  it("collects repeated non-radio names into an array in document order", () => {
+    expect(
+      collectFormValues([
+        el({ name: "tag", type: "text", value: "a" }),
+        el({ name: "tag", type: "text", value: "b" }),
+        el({ name: "tag", type: "text", value: "c" }),
+      ]),
+    ).toEqual({ tag: ["a", "b", "c"] });
+  });
+
+  it("skips controls without a name", () => {
+    expect(
+      collectFormValues([
+        el({ name: "", type: "text", value: "unnamed" }),
+        el({ name: "kept", type: "text", value: "yes" }),
+      ]),
+    ).toEqual({ kept: "yes" });
+  });
+
+  it("skips disabled controls", () => {
+    expect(
+      collectFormValues([
+        el({ name: "off", type: "text", value: "nope", disabled: true }),
+        el({ name: "on", type: "text", value: "yep" }),
+      ]),
+    ).toEqual({ on: "yep" });
+  });
+
+  it("skips a disabled control inside an otherwise-checked radio set", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "size",
+          type: "radio",
+          value: "sm",
+          checked: true,
+          disabled: true,
+        }),
+        el({ name: "size", type: "radio", value: "md", checked: false }),
+      ]),
+    ).toEqual({ size: undefined });
+  });
+
+  it("returns an empty object for no elements", () => {
+    expect(collectFormValues([])).toEqual({});
+  });
+
+  it("a field named __proto__ round-trips as an own data key", () => {
+    const values = collectFormValues([
+      el({ name: "__proto__", type: "text", value: "x" }),
+    ]);
+    expect(Object.hasOwn(values, "__proto__")).toBe(true);
+    expect(values["__proto__"]).toBe("x");
+  });
+
+  it("a field named constructor collects as its submitted string, not an array seeded with the inherited function", () => {
+    const values = collectFormValues([
+      el({ name: "constructor", type: "text", value: "hi" }),
+    ]);
+    expect(values["constructor"]).toBe("hi");
+  });
+});

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>,
+  );
+}