@designtools/blocks 0.0.0-stage → 0.1.0

package/registry/variant-matrix.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { coerce, componentFor, Missing } from "./lib/lookup";
+import type { ComponentEntry, VariantAxis } from "./lib/manifest-types";
+
+/**
+ * Every variant, rendered live. The first two axes form a grid; each further
+ * axis gets its own row, with the others at their defaults. Pass `props` for
+ * anything the component needs to render (an `options` list, a `value`).
+ */
+export function VariantMatrix({
+  entry,
+  props = {},
+  children,
+  axes: only,
+}: {
+  entry: ComponentEntry;
+  props?: Record<string, unknown>;
+  /** What to render inside each instance. Defaults to the component's name. */
+  children?: ReactNode;
+  /** Limit and order the axes shown. */
+  axes?: string[];
+}) {
+  const Component = componentFor(entry);
+  const all = entry.variants?.axes ?? [];
+  const axes = only ? only.map((n) => all.find((a) => a.name === n)).filter((a): a is VariantAxis => !!a) : all;
+  if (!Component) return <Missing name={entry.name} />;
+  if (axes.length === 0) return <p className="text-sm text-muted-foreground">{entry.name} has no variants.</p>;
+
+  const content = children ?? entry.name;
+  const render = (extra: Record<string, string>) => (
+    <Component {...props} {...coerce(extra)}>
+      {content}
+    </Component>
+  );
+  const [rows, cols, ...rest] = axes;
+
+  return (
+    <div data-slot="variant-matrix" className="flex flex-col gap-8">
+      {cols ? (
+        <div className="overflow-x-auto">
+          <table className="border-collapse text-sm">
+            <caption className="sr-only">
+              {entry.name}: {rows.name} by {cols.name}
+            </caption>
+            <thead>
+              <tr>
+                <th scope="col" className="p-2 text-left text-xs font-normal text-muted-foreground">
+                  <span className="font-mono">{rows.name}</span> \ <span className="font-mono">{cols.name}</span>
+                </th>
+                {cols.options.map((c) => (
+                  <th key={c.name} scope="col" className="p-2 text-left font-mono text-xs font-medium">
+                    {label(cols, c.name)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.options.map((r) => (
+                <tr key={r.name}>
+                  <th scope="row" className="p-2 text-left font-mono text-xs font-medium">
+                    {label(rows, r.name)}
+                  </th>
+                  {cols.options.map((c) => (
+                    <td key={c.name} data-slot="variant-cell" className="p-2 align-middle">
+                      {render({ [rows.name]: r.name, [cols.name]: c.name })}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <AxisRow axis={rows} render={render} />
+      )}
+      {rest.map((axis) => (
+        <AxisRow key={axis.name} axis={axis} render={render} />
+      ))}
+    </div>
+  );
+}
+
+function AxisRow({ axis, render }: { axis: VariantAxis; render: (extra: Record<string, string>) => ReactNode }) {
+  return (
+    <div data-slot="variant-axis" className="flex flex-col gap-2">
+      <p className="font-mono text-xs text-muted-foreground">{axis.name}</p>
+      <div className="flex flex-wrap items-center gap-4">
+        {axis.options.map((o) => (
+          <figure key={o.name} className="flex flex-col items-start gap-1.5">
+            {render({ [axis.name]: o.name })}
+            <figcaption className="font-mono text-xs text-muted-foreground" title={o.description}>
+              {label(axis, o.name)}
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function label(axis: VariantAxis, option: string): string {
+  return axis.default === option ? `${option} (default)` : option;
+}

package/registry/voice-terms.tsx

@@ -0,0 +1,45 @@
+import type { TermEntry } from "./lib/manifest-types";
+import { inline } from "./lib/text";
+
+/** The words to use, beside the ones not to: product terms first, then the system's names that have wrong forms. */
+export function VoiceTerms({ terms }: { terms: TermEntry[] }) {
+  const shown = [...terms.filter((t) => t.kind === "product"), ...terms.filter((t) => t.kind !== "product" && t.wrong?.length)];
+  if (shown.length === 0) return <p className="text-sm text-muted-foreground">No terms yet. Add them to the taxonomy file.</p>;
+  return (
+    <div data-slot="voice-terms" className="overflow-x-auto">
+      <table className="w-full min-w-[28rem] border-collapse text-left text-sm">
+        <thead>
+          <tr className="border-b border-border text-xs text-muted-foreground">
+            <th scope="col" className="py-2 pr-4 font-medium">
+              Say
+            </th>
+            <th scope="col" className="py-2 pr-4 font-medium">
+              Not
+            </th>
+            <th scope="col" className="py-2 font-medium">
+              Why
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {shown.map((t) => (
+            <tr key={`${t.kind}:${t.name}`} className="border-b border-border align-top">
+              <th scope="row" className="py-2 pr-4 font-medium">
+                {t.name}
+              </th>
+              <td className="py-2 pr-4 text-muted-foreground">
+                {(t.wrong ?? []).map((w, i) => (
+                  <span key={w}>
+                    {i > 0 && ", "}
+                    <s>{w}</s>
+                  </span>
+                ))}
+              </td>
+              <td className="py-2 text-muted-foreground">{t.note ? inline(t.note) : t.kind === "product" ? "" : `The ${t.kind}'s name in the code.`}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}