@assistant-ui/react-generative-ui 0.0.24 → 0.1.0

package/src/vocabulary/layout.test.tsx

@@ -1,323 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import type { ReactElement } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { renderGenerativeUI } from "../renderGenerativeUI";
-import { createActionRegistry } from "../actionRegistry";
-import { layoutVocabulary } from "./layout";
-import type { FormControlElementLike } from "./collectFormValues";
-
-const render = (node: unknown) =>
-  renderToStaticMarkup(<>{renderGenerativeUI(node, layoutVocabulary)}</>);
-
-const el = (
-  partial: Partial<FormControlElementLike>,
-): FormControlElementLike => ({
-  name: "",
-  type: "text",
-  value: "",
-  disabled: false,
-  hasAttribute: () => false,
-  ...partial,
-});
-
-const getFooterButtons = (out: ReactElement) => {
-  const footer = (out.props as { children: unknown[] })
-    .children[2] as ReactElement;
-  const [confirmBtn, cancelBtn] = (
-    footer.props as { children: [ReactElement | null, ReactElement | null] }
-  ).children;
-  return { confirmBtn, cancelBtn };
-};
-
-describe("layoutVocabulary", () => {
-  it("Card renders a section with optional title and padding/background hooks", () => {
-    expect(
-      render({
-        $type: "Card",
-        title: "T",
-        padding: 2,
-        background: "var(--muted)",
-      }),
-    ).toBe(
-      '<section data-aui="card" data-aui-padding="2" data-aui-background="var(--muted)" data-aui-surface="" style="background:var(--muted);color:white"><header data-aui="card-title">T</header></section>',
-    );
-  });
-
-  it("Card flags itself as a surface only when a background or a footer makes it one", () => {
-    expect(render({ $type: "Card", title: "Plain" })).not.toContain(
-      "data-aui-surface",
-    );
-    expect(render({ $type: "Card", background: "var(--muted)" })).toContain(
-      "data-aui-surface",
-    );
-    expect(render({ $type: "Card", confirm: { label: "Yes" } })).toContain(
-      "data-aui-surface",
-    );
-    expect(render({ $type: "Card", cancel: { label: "No" } })).toContain(
-      "data-aui-surface",
-    );
-  });
-
-  it("Card applies background as an inline style so arbitrary CSS values (colors, gradients) render", () => {
-    const html = render({
-      $type: "Card",
-      background: "linear-gradient(90deg, #3b82f6, #1d4ed8)",
-    });
-    expect(html).toContain(
-      'style="background:linear-gradient(90deg, #3b82f6, #1d4ed8);color:white"',
-    );
-  });
-
-  it("Card sets its text color to white whenever a background is provided", () => {
-    const html = render({ $type: "Card", background: "#1d4ed8" });
-    expect(html).toContain("color:white");
-  });
-
-  it("Card omits the style attribute when background is not provided", () => {
-    expect(render({ $type: "Card", title: "T" })).not.toContain("style=");
-  });
-
-  it("Card without a title omits the header", () => {
-    expect(render({ $type: "Card" })).toBe(
-      '<section data-aui="card"></section>',
-    );
-  });
-
-  it("Col renders a div with gap/align hooks and nested children", () => {
-    expect(
-      render({
-        $type: "Col",
-        gap: 2,
-        align: "center",
-        children: { $type: "Text", value: "x" } as never,
-      }),
-    ).toContain('data-aui="col"');
-  });
-
-  it("Row renders a div with gap/align/justify hooks", () => {
-    const html = render({
-      $type: "Row",
-      gap: 4,
-      align: "start",
-      justify: "between",
-    });
-    expect(html).toBe(
-      '<div data-aui="row" data-aui-gap="4" data-aui-align="start" data-aui-justify="between"></div>',
-    );
-  });
-
-  it("Spacer renders an empty div", () => {
-    expect(render({ $type: "Spacer" })).toBe('<div data-aui="spacer"></div>');
-  });
-
-  it("Badge renders a span with the value and variant hook", () => {
-    expect(render({ $type: "Badge", value: "new", variant: "success" })).toBe(
-      '<span data-aui="badge" data-aui-variant="success">new</span>',
-    );
-  });
-
-  it("ignores malformed card and badge text properties", () => {
-    expect(
-      render({
-        $type: "Card",
-        title: { unexpected: true },
-        confirm: { label: { unexpected: true } },
-        cancel: { label: { unexpected: true } },
-      }),
-    ).toBe(
-      '<section data-aui="card" data-aui-surface=""><footer data-aui="card-footer"><button type="button" data-aui="card-confirm"></button><button type="button" data-aui="card-cancel"></button></footer></section>',
-    );
-    expect(render({ $type: "Badge", value: { unexpected: true } })).toBe(
-      '<span data-aui="badge"></span>',
-    );
-  });
-});
-
-describe("layoutVocabulary Box", () => {
-  it("renders a bare div with no style attribute when no props are given", () => {
-    expect(render({ $type: "Box" })).toBe('<div data-aui="box"></div>');
-  });
-
-  it("applies width/height as inline pixel lengths when given numbers", () => {
-    const html = render({ $type: "Box", width: 200, height: 8 });
-    expect(html).toContain('style="width:200px;height:8px"');
-  });
-
-  it("applies width/height verbatim when given strings", () => {
-    const html = render({ $type: "Box", width: "100%", height: "1.5rem" });
-    expect(html).toContain('style="width:100%;height:1.5rem"');
-  });
-
-  it("applies a numeric radius as an inline pixel border-radius", () => {
-    const html = render({ $type: "Box", radius: 6 });
-    expect(html).toContain('style="border-radius:6px"');
-    expect(html).not.toContain("data-aui-radius");
-  });
-
-  it('applies radius "full" as a 9999px inline border-radius and a data-aui-radius hook', () => {
-    const html = render({ $type: "Box", radius: "full" });
-    expect(html).toContain('data-aui-radius="full"');
-    expect(html).toContain('style="border-radius:9999px"');
-  });
-
-  it("applies background as an inline style", () => {
-    const html = render({ $type: "Box", background: "#3b82f6" });
-    expect(html).toContain('style="background:#3b82f6"');
-  });
-
-  it("renders a progress bar as a track Box containing a partial-width fill Box", () => {
-    const html = render({
-      $type: "Box",
-      width: "100%",
-      height: 8,
-      radius: "full",
-      background: "var(--muted)",
-      children: {
-        $type: "Box",
-        width: "60%",
-        height: 8,
-        radius: "full",
-        background: "var(--primary)",
-      },
-    });
-    expect(html).toBe(
-      '<div data-aui="box" data-aui-radius="full" style="width:100%;height:8px;background:var(--muted);border-radius:9999px">' +
-        '<div data-aui="box" data-aui-radius="full" style="width:60%;height:8px;background:var(--primary);border-radius:9999px"></div>' +
-        "</div>",
-    );
-  });
-
-  it("renders nested children alongside style props", () => {
-    const html = render({
-      $type: "Box",
-      background: "red",
-      children: "content",
-    });
-    expect(html).toBe(
-      '<div data-aui="box" style="background:red">content</div>',
-    );
-  });
-});
-
-describe("layoutVocabulary Card asForm/confirm/cancel", () => {
-  it("Card with asForm renders a form element with the data-aui-asform hook", () => {
-    const html = render({ $type: "Card", asForm: true, title: "T" });
-    expect(html).toContain("<form ");
-    expect(html).toContain('data-aui-asform="true"');
-    expect(html).not.toContain("<section");
-  });
-
-  it("Card without asForm renders a section with no data-aui-asform hook", () => {
-    const html = render({ $type: "Card" });
-    expect(html).toContain("<section");
-    expect(html).not.toContain("data-aui-asform");
-  });
-
-  it("Card omits the footer when neither confirm nor cancel is present", () => {
-    expect(render({ $type: "Card" })).not.toContain("card-footer");
-  });
-
-  it("Card renders a footer when only confirm is present", () => {
-    expect(render({ $type: "Card", confirm: { label: "OK" } })).toContain(
-      'data-aui="card-footer"',
-    );
-  });
-
-  it("Card renders a footer when only cancel is present", () => {
-    expect(render({ $type: "Card", cancel: { label: "Cancel" } })).toContain(
-      'data-aui="card-footer"',
-    );
-  });
-
-  it("Card confirm renders a submit button when asForm is set", () => {
-    const html = render({
-      $type: "Card",
-      asForm: true,
-      confirm: { label: "Save" },
-    });
-    expect(html).toContain('type="submit" data-aui="card-confirm"');
-    expect(html).toContain("Save");
-  });
-
-  it("Card confirm renders a click button when asForm is not set", () => {
-    const html = render({ $type: "Card", confirm: { label: "Save" } });
-    expect(html).toContain('type="button" data-aui="card-confirm"');
-  });
-
-  it("Card cancel always renders a plain button regardless of asForm", () => {
-    const html = render({
-      $type: "Card",
-      asForm: true,
-      cancel: { label: "Dismiss" },
-    });
-    expect(html).toContain('type="button" data-aui="card-cancel"');
-  });
-});
-
-describe("layoutVocabulary Card asForm/confirm/cancel dispatch", () => {
-  it("Card asForm submit collects named values and dispatches confirm.$action with $input", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ save: handler });
-    const out = layoutVocabulary.Card.render({
-      asForm: true,
-      confirm: { label: "Save", $action: { type: "save" } },
-      $status: "done",
-      $dispatch: registry.dispatch,
-    }) as ReactElement;
-    const onSubmit = (out.props as { onSubmit: (e: unknown) => void }).onSubmit;
-    const event = {
-      preventDefault: vi.fn(),
-      currentTarget: {
-        elements: [el({ name: "email", type: "email", value: "a@x.com" })],
-      },
-    };
-    onSubmit(event);
-    expect(event.preventDefault).toHaveBeenCalled();
-    expect(handler).toHaveBeenCalledWith({
-      payload: { type: "save", $input: { email: "a@x.com" } },
-    });
-  });
-
-  it("Card confirm click (non-asForm) fires confirm.$action without $input", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ save: handler });
-    const out = layoutVocabulary.Card.render({
-      confirm: { label: "Save", $action: { type: "save" } },
-      $status: "done",
-      $dispatch: registry.dispatch,
-    }) as ReactElement;
-    const { confirmBtn } = getFooterButtons(out);
-    const onClick = (confirmBtn!.props as { onClick: (e: object) => void })
-      .onClick;
-    onClick({ currentTarget: {} });
-    expect(handler).toHaveBeenCalledWith({ payload: { type: "save" } });
-  });
-
-  it("Card confirm button has no onClick when asForm is set (the form submit handles it)", () => {
-    const out = layoutVocabulary.Card.render({
-      asForm: true,
-      confirm: { label: "Save", $action: { type: "save" } },
-      $status: "done",
-    }) as ReactElement;
-    const { confirmBtn } = getFooterButtons(out);
-    expect(
-      (confirmBtn!.props as { onClick?: unknown }).onClick,
-    ).toBeUndefined();
-  });
-
-  it("Card cancel click fires cancel.$action without $input regardless of asForm", () => {
-    const handler = vi.fn();
-    const registry = createActionRegistry({ dismiss: handler });
-    const out = layoutVocabulary.Card.render({
-      asForm: true,
-      cancel: { label: "Dismiss", $action: { type: "dismiss" } },
-      $status: "done",
-      $dispatch: registry.dispatch,
-    }) as ReactElement;
-    const { cancelBtn } = getFooterButtons(out);
-    const onClick = (cancelBtn!.props as { onClick: (e: object) => void })
-      .onClick;
-    onClick({ currentTarget: {} });
-    expect(handler).toHaveBeenCalledWith({ payload: { type: "dismiss" } });
-  });
-});

package/src/vocabulary/layout.tsx

@@ -1,247 +0,0 @@
-import type { CSSProperties, FormEvent } from "react";
-import { z } from "zod";
-import type { GenerativeUILibrary } from "../types";
-import { ALIGNS, JUSTIFIES } from "../ir";
-import { fire } from "./dispatch";
-import { collectFormValuesFromEvent } from "./collectFormValues";
-import { toTextContent } from "./toTextContent";
-
-const toCssLength = (value: string | number): string =>
-  typeof value === "number" ? `${value}px` : value;
-
-const cardActionSchema = z.looseObject({
-  type: z
-    .string()
-    .describe("The action type, resolved by the host's action registry."),
-});
-
-const cardFooterButtonSchema = z.object({
-  label: z.string().describe("Footer button label."),
-  $action: cardActionSchema
-    .optional()
-    .describe("Action fired when the button is activated."),
-});
-
-export const layoutVocabulary = {
-  Card: {
-    description:
-      "A titled section of related content, the default way to break a response into parts. It renders as plain content, so several in a row read as one answer rather than a stack of boxes; it takes on a framed surface only when `background` is set, when `confirm`/`cancel` add a footer, or when it is a slot in a `Carousel`. Set `asForm` to collect named child control values on submit.",
-    properties: z.object({
-      title: z.string().optional().describe("Optional card title."),
-      padding: z
-        .number()
-        .min(0)
-        .max(8)
-        .optional()
-        .describe(
-          "Padding in 4px units (e.g. 2 = 8px). 0 to 8 is the supported range.",
-        ),
-      background: z
-        .string()
-        .optional()
-        .describe(
-          "Background color or gradient (any CSS background value). Setting this also switches the card's own text to white, since a custom background makes the card a tinted surface; children can still opt into a different color explicitly.",
-        ),
-      asForm: z
-        .boolean()
-        .optional()
-        .describe(
-          "Render as a form; submitting it fires `confirm.$action` with every named child control's value, keyed by `name`.",
-        ),
-      confirm: cardFooterButtonSchema
-        .optional()
-        .describe("Confirm button shown in the footer."),
-      cancel: cardFooterButtonSchema
-        .optional()
-        .describe("Cancel button shown in the footer."),
-    }),
-    render: ({
-      title,
-      padding,
-      background,
-      asForm,
-      confirm,
-      cancel,
-      $dispatch,
-      children,
-    }) => {
-      const Root = asForm ? "form" : "section";
-      const cardTitle = toTextContent(title);
-      const footer =
-        confirm || cancel ? (
-          <footer data-aui="card-footer">
-            {confirm ? (
-              <button
-                type={asForm ? "submit" : "button"}
-                data-aui="card-confirm"
-                onClick={
-                  asForm
-                    ? undefined
-                    : (e) =>
-                        fire(
-                          confirm.$action,
-                          $dispatch,
-                          undefined,
-                          e.currentTarget,
-                        )
-                }
-              >
-                {toTextContent(confirm.label)}
-              </button>
-            ) : null}
-            {cancel ? (
-              <button
-                type="button"
-                data-aui="card-cancel"
-                onClick={(e) =>
-                  fire(cancel.$action, $dispatch, undefined, e.currentTarget)
-                }
-              >
-                {toTextContent(cancel.label)}
-              </button>
-            ) : null}
-          </footer>
-        ) : null;
-
-      return (
-        <Root
-          data-aui="card"
-          data-aui-padding={padding}
-          data-aui-background={background}
-          data-aui-surface={
-            background !== undefined || footer !== null ? "" : undefined
-          }
-          style={
-            background !== undefined
-              ? { background, color: "white" }
-              : undefined
-          }
-          data-aui-asform={asForm || undefined}
-          onSubmit={
-            asForm
-              ? (event: FormEvent<HTMLFormElement>) => {
-                  event.preventDefault();
-                  fire(
-                    confirm?.$action,
-                    $dispatch,
-                    collectFormValuesFromEvent(event),
-                    event.currentTarget,
-                  );
-                }
-              : undefined
-          }
-        >
-          {cardTitle ? (
-            <header data-aui="card-title">{cardTitle}</header>
-          ) : null}
-          {children}
-          {footer}
-        </Root>
-      );
-    },
-  },
-  Col: {
-    description: "A vertical stack; children laid out top to bottom.",
-    properties: z.object({
-      gap: z
-        .number()
-        .min(0)
-        .max(8)
-        .optional()
-        .describe(
-          "Gap between children in 4px units. 0 to 8 is the supported range.",
-        ),
-      align: z.enum(ALIGNS).optional().describe("Cross-axis alignment."),
-    }),
-    render: ({ gap, align, children }) => (
-      <div data-aui="col" data-aui-gap={gap} data-aui-align={align}>
-        {children}
-      </div>
-    ),
-  },
-  Row: {
-    description: "A horizontal row; children laid out left to right.",
-    properties: z.object({
-      gap: z
-        .number()
-        .min(0)
-        .max(8)
-        .optional()
-        .describe(
-          "Gap between children in 4px units. 0 to 8 is the supported range.",
-        ),
-      align: z.enum(ALIGNS).optional().describe("Cross-axis alignment."),
-      justify: z.enum(JUSTIFIES).optional().describe("Main-axis distribution."),
-    }),
-    render: ({ gap, align, justify, children }) => (
-      <div
-        data-aui="row"
-        data-aui-gap={gap}
-        data-aui-align={align}
-        data-aui-justify={justify}
-      >
-        {children}
-      </div>
-    ),
-  },
-  Spacer: {
-    description: "Empty space that pushes neighbors apart.",
-    properties: z.object({}),
-    render: () => <div data-aui="spacer" />,
-  },
-  Badge: {
-    description: "A small labeled tag, e.g. for status or category.",
-    properties: z.object({
-      value: z.string().describe("Badge text."),
-      variant: z.string().optional().describe("Visual variant token."),
-    }),
-    render: ({ value, variant, children }) => (
-      <span data-aui="badge" data-aui-variant={variant}>
-        {toTextContent(value)}
-        {children}
-      </span>
-    ),
-  },
-  Box: {
-    description:
-      "A generic container for composition, e.g. a progress bar built from an outer track Box containing a partial-width fill Box. Size, radius, and background accept arbitrary values, so they render as inline styles rather than data-attribute hooks.",
-    properties: z.object({
-      width: z
-        .union([z.string(), z.number()])
-        .optional()
-        .describe("Width; a number is pixels."),
-      height: z
-        .union([z.string(), z.number()])
-        .optional()
-        .describe("Height; a number is pixels."),
-      radius: z
-        .union([z.literal("full"), z.number()])
-        .optional()
-        .describe(
-          'Corner radius; "full" is a pill/circle, a number is pixels.',
-        ),
-      background: z
-        .string()
-        .optional()
-        .describe("Background color or gradient (any CSS background value)."),
-    }),
-    render: ({ width, height, radius, background, children }) => {
-      const style: CSSProperties = {};
-      if (width !== undefined) style.width = toCssLength(width);
-      if (height !== undefined) style.height = toCssLength(height);
-      if (background !== undefined) style.background = background;
-      if (radius === "full") style.borderRadius = "9999px";
-      else if (typeof radius === "number") style.borderRadius = `${radius}px`;
-
-      return (
-        <div
-          data-aui="box"
-          data-aui-radius={radius === "full" ? "full" : undefined}
-          style={style}
-        >
-          {children}
-        </div>
-      );
-    },
-  },
-} satisfies GenerativeUILibrary;