@primitiv-ui/react 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./src/index.ts",

package/src/Field/__tests__/Field.contract.test.tsx

@@ -0,0 +1,87 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+import { render } from "@testing-library/react";
+
+import { Field } from "../Field";
+
+/**
+ * Auto-verification of the Field styling contract (RFC 0004 §3.4 / D15). The
+ * `data-*` half of `registry/components/field/contract.json` is *derived from and
+ * asserted against the rendered headless `Field.Root`* so it can never drift from
+ * what the component emits. The root always carries `data-field`, plus
+ * `data-field-invalid` / `data-field-disabled` / `data-field-required` when the
+ * matching flag is set. The authored half (part classes, custom properties) is a
+ * styling convention the headless layer does not emit and is checked by the
+ * generator drift-guards instead.
+ */
+const contractPath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../../../registry/components/field/contract.json",
+);
+
+const contract = JSON.parse(readFileSync(contractPath, "utf8"));
+
+/** Every `data-*` attribute name present on an element. */
+function dataAttributeNames(element: Element): string[] {
+  return [...element.attributes]
+    .map((attribute) => attribute.name)
+    .filter((name) => name.startsWith("data-"))
+    .sort();
+}
+
+/** Render a `Field.Root` with the given flags and return its `[data-field]` element. */
+function renderRoot(props: Record<string, boolean>): Element {
+  const { container } = render(<Field.Root {...props} />);
+  return container.querySelector("[data-field]")!;
+}
+
+describe("Field styling contract", () => {
+  const autoAttributes = contract.dataAttributes.filter(
+    (attribute: { source: string }) => attribute.source === "auto",
+  );
+
+  it("declares every data-* attribute as auto-verified against the component", () => {
+    // The Field has no authored data-* surface; the whole contract is derived.
+    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
+  });
+
+  it("emits exactly the contracted data-* attribute names across its states", () => {
+    const emitted = new Set<string>();
+    for (const props of [{}, { invalid: true, disabled: true, required: true }]) {
+      for (const name of dataAttributeNames(renderRoot(props))) {
+        emitted.add(name);
+      }
+    }
+
+    const contracted = new Set(
+      autoAttributes.map((attribute: { name: string }) => attribute.name),
+    );
+    expect([...emitted].sort()).toEqual([...contracted].sort());
+  });
+
+  it("always emits data-field regardless of state", () => {
+    expect(renderRoot({})).toHaveAttribute("data-field", "");
+  });
+
+  it("emits each conditional attribute exactly as the contract documents it", () => {
+    const conditional = autoAttributes.filter(
+      (attribute: { when: string }) => attribute.when !== "always",
+    );
+
+    for (const entry of conditional) {
+      const root = renderRoot({ [entry.when]: true });
+      expect(root).toHaveAttribute(entry.name, entry.value);
+    }
+  });
+
+  it("omits each conditional attribute when its flag is not set", () => {
+    const root = renderRoot({});
+    for (const entry of autoAttributes.filter(
+      (attribute: { when: string }) => attribute.when !== "always",
+    )) {
+      expect(root).not.toHaveAttribute(entry.name);
+    }
+  });
+});

package/src/Input/__tests__/Input.contract.test.tsx

@@ -0,0 +1,77 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+import { render, screen } from "@testing-library/react";
+
+import { Input } from "../Input";
+
+/**
+ * Auto-verification of the Input styling contract (RFC 0004 §3.4 / D15). The
+ * `data-*` half of `registry/components/input/contract.json` is *derived from and
+ * asserted against the rendered headless component* so it can never drift from
+ * what the component actually emits. Input's only data-* surface is
+ * `data-disabled=""` when disabled — `invalid` is an `aria-invalid` concern, not
+ * a data attribute. The authored half (root class, custom properties) is a
+ * styling convention the headless layer does not emit and is checked by the
+ * generator drift-guards instead.
+ */
+const contractPath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../../../registry/components/input/contract.json",
+);
+
+const contract = JSON.parse(readFileSync(contractPath, "utf8"));
+
+/** Every `data-*` attribute name present on an element. */
+function dataAttributeNames(element: Element): string[] {
+  return [...element.attributes]
+    .map((attribute) => attribute.name)
+    .filter((name) => name.startsWith("data-"))
+    .sort();
+}
+
+describe("Input styling contract", () => {
+  const autoAttributes = contract.dataAttributes.filter(
+    (attribute: { source: string }) => attribute.source === "auto",
+  );
+
+  it("declares every data-* attribute as auto-verified against the component", () => {
+    // The Input has no authored data-* surface; the whole contract is derived.
+    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
+  });
+
+  it("emits exactly the contracted data-* attribute names across its states", () => {
+    const emitted = new Set<string>();
+    for (const ui of [
+      <Input key="default" aria-label="x" />,
+      <Input key="disabled" aria-label="x" disabled />,
+    ]) {
+      const { unmount } = render(ui);
+      for (const name of dataAttributeNames(screen.getByRole("textbox"))) {
+        emitted.add(name);
+      }
+      unmount();
+    }
+
+    const contracted = new Set(
+      autoAttributes.map((attribute: { name: string }) => attribute.name),
+    );
+    expect([...emitted].sort()).toEqual([...contracted].sort());
+  });
+
+  it("emits data-disabled exactly as the contract documents it", () => {
+    const entry = autoAttributes.find(
+      (attribute: { name: string }) => attribute.name === "data-disabled",
+    );
+
+    render(<Input aria-label="x" disabled />);
+    expect(screen.getByRole("textbox")).toHaveAttribute(entry.name, entry.value);
+  });
+
+  it("omits data-disabled when the documented condition does not hold", () => {
+    render(<Input aria-label="x" />);
+
+    expect(screen.getByRole("textbox")).not.toHaveAttribute("data-disabled");
+  });
+});

package/src/InputGroup/__tests__/InputGroup.contract.test.tsx

@@ -0,0 +1,60 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+import { render } from "@testing-library/react";
+
+import { InputGroup } from "../InputGroup";
+
+/**
+ * Auto-verification of the InputGroup styling contract (RFC 0004 §3.4 / D15). The
+ * `data-*` half of `registry/components/input-group/contract.json` is *derived
+ * from and asserted against the rendered headless `InputGroup.Root`* so it can
+ * never drift. The root always carries `data-input-group`; the adornment slots
+ * are styled through their part classes, not a contracted data attribute. The
+ * authored half (part classes, custom properties) is a styling convention the
+ * headless layer does not emit and is checked by the generator drift-guards.
+ */
+const contractPath = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../../../registry/components/input-group/contract.json",
+);
+
+const contract = JSON.parse(readFileSync(contractPath, "utf8"));
+
+/** Every `data-*` attribute name present on an element. */
+function dataAttributeNames(element: Element): string[] {
+  return [...element.attributes]
+    .map((attribute) => attribute.name)
+    .filter((name) => name.startsWith("data-"))
+    .sort();
+}
+
+describe("InputGroup styling contract", () => {
+  const autoAttributes = contract.dataAttributes.filter(
+    (attribute: { source: string }) => attribute.source === "auto",
+  );
+
+  it("declares every data-* attribute as auto-verified against the component", () => {
+    // The InputGroup root has no authored data-* surface; the contract is derived.
+    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
+  });
+
+  it("emits exactly the contracted data-* attribute names on the root", () => {
+    const { container } = render(<InputGroup.Root />);
+    const root = container.querySelector("[data-input-group]")!;
+
+    const contracted = autoAttributes
+      .map((attribute: { name: string }) => attribute.name)
+      .sort();
+    expect(dataAttributeNames(root)).toEqual(contracted);
+  });
+
+  it("always emits data-input-group", () => {
+    const { container } = render(<InputGroup.Root />);
+    expect(container.querySelector("[data-input-group]")).toHaveAttribute(
+      "data-input-group",
+      "",
+    );
+  });
+});