makersclaw 0.1.0 → 0.3.0

package/registry/blocks/spreadsheet/chrome.jsx

@@ -0,0 +1,325 @@
+"use client";
+
+// The panels around the grid: filter, sort, fields, add a field, the
+// keyboard sheet. Each edits one part of the view and hands it back.
+import { useState } from "react";
+import { Avatar, Button, Combobox, Field, Icon, IconButton, Input, KbdGroup, Select, Switch, cx } from "../../ui";
+import { COLUMN_TYPES, parseNumberText, typeOf } from "./types";
+
+let seq = 0;
+export const uid = (p) => `${p}-${Date.now().toString(36)}${(seq++).toString(36)}`;
+
+/** What "ascending" and "descending" mean for a type, in words. */
+export function sortWords(type) {
+  switch (type.name) {
+    case "number":
+    case "currency":
+    case "rating":
+      return { asc: "1 → 9", desc: "9 → 1" };
+    case "date":
+      return { asc: "Oldest first", desc: "Newest first" };
+    case "checkbox":
+      return { asc: "Checked first", desc: "Unchecked first" };
+    case "select":
+    case "multi-select":
+      return { asc: "First → last", desc: "Last → first" };
+    default:
+      return { asc: "A → Z", desc: "Z → A" };
+  }
+}
+
+// ── filter ──────────────────────────────────────────────────────────────
+
+function NumberValue({ value, onChange }) {
+  const [text, setText] = useState(value == null || value === "" ? "" : String(value));
+  const n = parseNumberText(text);
+  return (
+    <Input
+      inputMode="decimal"
+      placeholder="Number"
+      aria-label="Value"
+      value={text}
+      invalid={text !== "" && Number.isNaN(n)}
+      onChange={(e) => {
+        setText(e.target.value);
+        const next = parseNumberText(e.target.value);
+        onChange(next === null ? "" : Number.isNaN(next) ? "" : next);
+      }}
+    />
+  );
+}
+
+function FilterValue({ op, column, value, onChange, ctx }) {
+  switch (op?.arg) {
+    case "text":
+      return <Input placeholder="Text" aria-label="Value" value={value ?? ""} onChange={(e) => onChange(e.target.value)} />;
+    case "number":
+      return <NumberValue key={column.key + op.id} value={value} onChange={onChange} />;
+    case "date":
+      return <Input type="date" aria-label="Value" value={value ?? ""} onChange={(e) => onChange(e.target.value)} />;
+    case "options":
+      return (
+        <Combobox
+          multiple
+          label="Values"
+          placeholder="Pick options"
+          options={(column.options ?? []).map((o) => ({ value: o.value, label: o.label }))}
+          value={Array.isArray(value) ? value : []}
+          onValueChange={(v) => onChange(v)}
+        />
+      );
+    case "person":
+      return (
+        <Combobox
+          multiple
+          label="People"
+          placeholder="Pick people"
+          options={(ctx.people ?? []).map((p) => ({ value: p.id, label: p.name, icon: <Avatar name={p.name} src={p.src} size="xs" /> }))}
+          value={Array.isArray(value) ? value : []}
+          onValueChange={(v) => onChange(v)}
+        />
+      );
+    default:
+      return <span aria-hidden="true" />;
+  }
+}
+
+export function FilterPanel({ columns, filters, onChange, ctx, custom }) {
+  const byKey = new Map(columns.map((c) => [c.key, c]));
+  function set(id, patch) {
+    onChange(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)));
+  }
+  function add() {
+    const col = columns[0];
+    if (!col) return;
+    onChange([...filters, { id: uid("f"), key: col.key, op: typeOf(col, custom).allFilters[0].id, value: "" }]);
+  }
+  return (
+    <div className="grid w-[38rem] max-w-full gap-3">
+      <p className="text-sm font-medium">Filter rows</p>
+      {filters.length === 0 ? (
+        <p className="text-sm text-muted-foreground">Nothing filtered. Add a condition to show only the rows you need.</p>
+      ) : (
+        <ul className="grid gap-2">
+          {filters.map((f, i) => {
+            const col = byKey.get(f.key) ?? columns[0];
+            const t = typeOf(col, custom);
+            const op = t.allFilters.find((o) => o.id === f.op) ?? t.allFilters[0];
+            return (
+              <li
+                key={f.id}
+                className="grid gap-2 max-sm:rounded-md max-sm:border max-sm:border-border max-sm:p-2 sm:grid-cols-[3rem_minmax(0,1fr)_minmax(0,9rem)_minmax(0,1fr)_auto] sm:items-center"
+              >
+                <div className="flex items-center justify-between sm:contents">
+                  <span className="text-xs text-muted-foreground">{i === 0 ? "Where" : "and"}</span>
+                  <IconButton icon="x" size="sm" label="Remove this condition" className="sm:hidden" onClick={() => onChange(filters.filter((x) => x.id !== f.id))} />
+                </div>
+                <Select
+                  aria-label="Field"
+                  value={col.key}
+                  options={columns.map((c) => ({ value: c.key, label: c.name }))}
+                  onChange={(e) => {
+                    const next = byKey.get(e.target.value);
+                    set(f.id, { key: next.key, op: typeOf(next, custom).allFilters[0].id, value: "" });
+                  }}
+                />
+                <Select
+                  aria-label="Condition"
+                  value={op.id}
+                  options={t.allFilters.map((o) => ({ value: o.id, label: o.label }))}
+                  onChange={(e) => set(f.id, { op: e.target.value, value: t.allFilters.find((o) => o.id === e.target.value)?.arg === op.arg ? f.value : "" })}
+                />
+                <div className="min-w-0">
+                  <FilterValue key={f.key + op.arg} op={op} column={col} value={f.value} ctx={ctx} onChange={(value) => set(f.id, { value })} />
+                </div>
+                <IconButton icon="x" size="sm" label="Remove this condition" className="max-sm:hidden" onClick={() => onChange(filters.filter((x) => x.id !== f.id))} />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <div className="flex items-center justify-between gap-2">
+        <Button variant="quiet" size="sm" icon="plus" onClick={add} disabled={!columns.length}>
+          Add condition
+        </Button>
+        {filters.length ? (
+          <Button variant="quiet" size="sm" onClick={() => onChange([])}>
+            Clear all
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ── sort ────────────────────────────────────────────────────────────────
+
+export function SortPanel({ columns, sort, onChange, custom }) {
+  const used = new Set(sort.map((s) => s.key));
+  const free = columns.filter((c) => !used.has(c.key));
+  return (
+    <div className="grid w-[26rem] max-w-full gap-3">
+      <p className="text-sm font-medium">Sort rows</p>
+      {sort.length === 0 ? (
+        <p className="text-sm text-muted-foreground">Rows show in the order they were added. Pick a field to sort by.</p>
+      ) : (
+        <ol className="grid gap-2">
+          {sort.map((s, i) => {
+            const col = columns.find((c) => c.key === s.key);
+            if (!col) return null;
+            const words = sortWords(typeOf(col, custom));
+            return (
+              <li key={s.key} className="grid grid-cols-[3rem_minmax(0,1fr)_minmax(0,9rem)_auto] items-center gap-2">
+                <span className="text-xs text-muted-foreground">{i === 0 ? "Sort by" : "then"}</span>
+                <Select
+                  aria-label="Field"
+                  value={s.key}
+                  options={[col, ...free].map((c) => ({ value: c.key, label: c.name }))}
+                  onChange={(e) => onChange(sort.map((x, j) => (j === i ? { ...x, key: e.target.value } : x)))}
+                />
+                <Select
+                  aria-label="Direction"
+                  value={s.dir}
+                  options={[
+                    { value: "asc", label: words.asc },
+                    { value: "desc", label: words.desc },
+                  ]}
+                  onChange={(e) => onChange(sort.map((x, j) => (j === i ? { ...x, dir: e.target.value } : x)))}
+                />
+                <IconButton icon="x" size="sm" label="Remove this sort" onClick={() => onChange(sort.filter((_, j) => j !== i))} />
+              </li>
+            );
+          })}
+        </ol>
+      )}
+      <div className="flex items-center justify-between gap-2">
+        <Button variant="quiet" size="sm" icon="plus" disabled={!free.length} onClick={() => onChange([...sort, { key: free[0].key, dir: "asc" }])}>
+          {sort.length ? "Add another sort" : "Add a sort"}
+        </Button>
+        {sort.length ? (
+          <Button variant="quiet" size="sm" onClick={() => onChange([])}>
+            Clear
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ── fields (show / hide) ────────────────────────────────────────────────
+
+export function FieldsPanel({ columns, hidden, onChange, custom }) {
+  const off = new Set(hidden);
+  const [q, setQ] = useState("");
+  const shown = columns.filter((c) => c.name.toLowerCase().includes(q.trim().toLowerCase()));
+  const visibleCount = columns.filter((c) => !off.has(c.key)).length;
+  return (
+    <div className="grid w-72 max-w-full gap-2">
+      {columns.length > 8 ? <Input placeholder="Find a field" aria-label="Find a field" value={q} onChange={(e) => setQ(e.target.value)} /> : null}
+      <ul className="grid max-h-80 overflow-y-auto">
+        {shown.map((c) => {
+          const t = typeOf(c, custom);
+          const on = !off.has(c.key);
+          return (
+            <li key={c.key} className="flex items-center gap-2">
+              <Icon name={t.icon} size={14} className="shrink-0 text-muted-foreground" />
+              <Switch
+                id={`field-${c.key}`}
+                checked={on}
+                disabled={on && visibleCount <= 1}
+                onChange={() => onChange(on ? [...hidden, c.key] : hidden.filter((k) => k !== c.key))}
+                label={c.name}
+                className="min-w-0 flex-1 flex-row-reverse justify-between"
+              />
+            </li>
+          );
+        })}
+      </ul>
+      <div className="flex items-center justify-between gap-2 border-t border-border pt-2">
+        <Button variant="quiet" size="sm" onClick={() => onChange(columns.slice(1).map((c) => c.key))} disabled={visibleCount <= 1}>
+          Hide all
+        </Button>
+        <Button variant="quiet" size="sm" onClick={() => onChange([])} disabled={!hidden.length}>
+          Show all
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ── add a field ─────────────────────────────────────────────────────────
+
+export const TYPE_ORDER = ["text", "number", "currency", "date", "select", "multi-select", "person", "checkbox", "url", "rating"];
+
+export function AddFieldPanel({ onAdd, names, custom }) {
+  const [name, setName] = useState("");
+  const [type, setType] = useState("text");
+  const kinds = [...TYPE_ORDER, ...Object.keys(custom ?? {}).filter((k) => !TYPE_ORDER.includes(k))];
+  const clash = names.some((n) => n.toLowerCase() === name.trim().toLowerCase());
+  function submit(e) {
+    e.preventDefault();
+    if (!name.trim() || clash) return;
+    onAdd({ name: name.trim(), type });
+    setName("");
+    setType("text");
+  }
+  return (
+    <form className="grid w-80 max-w-full gap-3" onSubmit={submit}>
+      <Field id="new-field-name" label="Field name" error={clash ? "A field already has that name" : undefined}>
+        <Input id="new-field-name" placeholder="Renewal date" value={name} onChange={(e) => setName(e.target.value)} autoComplete="off" />
+      </Field>
+      <div className="grid gap-1.5">
+        <p className="text-sm font-medium" id="new-field-type">
+          Type
+        </p>
+        <div role="radiogroup" aria-labelledby="new-field-type" className="grid grid-cols-2 gap-1">
+          {kinds.map((k) => {
+            const t = typeOf({ type: k }, custom);
+            const on = type === k;
+            return (
+              <Button key={k} variant={on ? "secondary" : "quiet"} size="sm" align="start" icon={t.icon} role="radio" aria-checked={on} onClick={() => setType(k)} className={cx("font-normal", on && "ring-1 ring-primary")}>
+                {t.label}
+              </Button>
+            );
+          })}
+        </div>
+      </div>
+      <Button type="submit" variant="primary" size="sm" disabled={!name.trim() || clash}>
+        Add field
+      </Button>
+    </form>
+  );
+}
+
+// ── keys ────────────────────────────────────────────────────────────────
+
+const KEYS = [
+  [["↑", "↓", "←", "→"], "Move"],
+  [["⇧", "↑"], "Select more"],
+  [["↵"], "Edit (or start typing)"],
+  [["Esc"], "Cancel an edit"],
+  [["⌫"], "Clear cells"],
+  [["⌘", "C"], "Copy · ⌘V paste"],
+  [["⌘", "D"], "Fill down"],
+  [["⌘", "Z"], "Undo · ⇧⌘Z redo"],
+  [["Space"], "Tick a box · open a row"],
+  [["⇧", "Space"], "Select the row"],
+];
+
+export function ShortcutsPanel() {
+  return (
+    <div className="grid w-72 gap-2">
+      <p className="text-sm font-medium">Keyboard</p>
+      <ul className="grid gap-1.5">
+        {KEYS.map(([keys, what]) => (
+          <li key={what} className="flex items-center justify-between gap-3 text-sm">
+            <span className="text-muted-foreground">{what}</span>
+            <KbdGroup keys={keys} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export { COLUMN_TYPES };

package/registry/blocks/spreadsheet/demo.jsx

@@ -0,0 +1,177 @@
+"use client";
+
+// The Spreadsheet over a sales pipeline in memory — the gallery's and the
+// smoke test's surface. Not installed into apps: `makersclaw add
+// spreadsheet` lays index.js and the block's files only.
+import { useMemo, useState } from "react";
+import { Card, Sheet, Switch, ToggleGroup } from "../components/ui";
+import { Spreadsheet } from "../components/blocks/spreadsheet";
+
+const TEAM = [
+  { id: "u-maya", name: "Maya Okafor", email: "maya@northpeak.io" },
+  { id: "u-leon", name: "Leon Brandt", email: "leon@northpeak.io" },
+  { id: "u-priya", name: "Priya Raman", email: "priya@northpeak.io" },
+  { id: "u-tomas", name: "Tomás Ferreira", email: "tomas@northpeak.io" },
+  { id: "u-hana", name: "Hana Sato", email: "hana@northpeak.io" },
+];
+
+const STAGES = [
+  { value: "lead", label: "Lead", hue: 5 },
+  { value: "qualified", label: "Qualified", hue: 2 },
+  { value: "proposal", label: "Proposal", hue: 3 },
+  { value: "negotiation", label: "Negotiation", hue: 4 },
+  { value: "won", label: "Won", hue: 1 },
+  { value: "lost", label: "Lost", hue: 5 },
+];
+
+const SEGMENTS = [
+  { value: "saas", label: "SaaS", hue: 1 },
+  { value: "fintech", label: "Fintech", hue: 2 },
+  { value: "health", label: "Health", hue: 3 },
+  { value: "retail", label: "Retail", hue: 4 },
+  { value: "enterprise", label: "Enterprise", hue: 5 },
+];
+
+const PIPELINE_COLUMNS = [
+  { key: "company", name: "Company", type: "text", width: 200, required: true },
+  { key: "stage", name: "Stage", type: "select", options: STAGES },
+  { key: "value", name: "Deal value", type: "currency", currency: "USD", precision: 0 },
+  { key: "owner", name: "Owner", type: "person" },
+  { key: "close", name: "Close date", type: "date" },
+  { key: "segments", name: "Segments", type: "multi-select", options: SEGMENTS },
+  { key: "seats", name: "Seats", type: "number", width: 96 },
+  { key: "fit", name: "Fit", type: "rating", max: 5, width: 120 },
+  { key: "contacted", name: "Contacted", type: "checkbox" },
+  { key: "website", name: "Website", type: "url" },
+];
+
+const FIRST = ["North", "Blue", "Silver", "Bright", "Iron", "Maple", "Harbor", "Summit", "Cedar", "Atlas", "Nova", "Pine", "River", "Stone", "Lumen", "Orbit", "Vista", "Juniper"];
+const SECOND = ["Labs", "Health", "Logistics", "Foods", "Studio", "Capital", "Robotics", "Media", "Dental", "Freight", "Analytics", "Apparel", "Energy", "Legal", "Clinics", "Software"];
+
+// The same rows every render: a small seeded generator, so the gallery
+// render does not change between runs.
+function makeDeals(n) {
+  let seed = 11;
+  const rnd = () => {
+    seed = (seed * 16807) % 2147483647;
+    return seed / 2147483647;
+  };
+  const pick = (list) => list[Math.floor(rnd() * list.length)];
+  return Array.from({ length: n }, (_, i) => {
+    const company = `${pick(FIRST)} ${pick(SECOND)}${i >= FIRST.length * 4 ? ` ${Math.floor(i / 97) + 2}` : ""}`;
+    const slug = company.toLowerCase().replace(/[^a-z0-9]+/g, "");
+    const stage = pick(STAGES).value;
+    const d = new Date(Date.UTC(2026, 8, 1) + Math.floor(rnd() * 150) * 86400000).toISOString().slice(0, 10);
+    const segs = SEGMENTS.filter(() => rnd() < 0.28).map((s) => s.value);
+    return {
+      id: `deal-${1000 + i}`,
+      company,
+      stage,
+      value: Math.round(2 + rnd() * 120) * 500,
+      owner: pick(TEAM).id,
+      close: rnd() < 0.08 ? null : d,
+      segments: segs,
+      seats: Math.round(5 + rnd() * 400),
+      fit: Math.floor(rnd() * 6),
+      contacted: rnd() < 0.55,
+      website: rnd() < 0.1 ? "" : `https://${slug}.com`,
+    };
+  });
+}
+
+const MANY = makeDeals(10000);
+let made = 0;
+const FEW = makeDeals(60);
+
+export default function SpreadsheetDemo() {
+  const [size, setSize] = useState("many");
+  const [failing, setFailing] = useState(false);
+  const [data, setData] = useState({ many: MANY, few: FEW, empty: [] });
+  const [columns, setColumns] = useState(PIPELINE_COLUMNS);
+  const [open, setOpen] = useState(null);
+  const rows = size === "loading" ? [] : data[size];
+
+  const save = (fn) => async (...args) => {
+    await new Promise((r) => setTimeout(r, 250));
+    if (failing) return { ok: false, error: "The server said no (the demo's “Saves fail” switch is on)." };
+    fn(...args);
+    return { ok: true };
+  };
+  const onChange = save((changes) =>
+    setData((d) => {
+      const by = new Map();
+      for (const c of changes) by.set(c.rowId, { ...(by.get(c.rowId) ?? {}), [c.key]: c.value });
+      return { ...d, [size]: d[size].map((r) => (by.has(r.id) ? { ...r, ...by.get(r.id) } : r)) };
+    }),
+  );
+  const onAddRows = save((added, { index }) =>
+    setData((d) => {
+      const list = d[size];
+      const at = index ?? list.length;
+      return { ...d, [size]: [...list.slice(0, at), ...added, ...list.slice(at)] };
+    }),
+  );
+  const onDeleteRows = save((ids) => setData((d) => ({ ...d, [size]: d[size].filter((r) => !ids.includes(r.id)) })));
+  const onColumnsChange = save((next) => setColumns(next));
+
+  const openRow = useMemo(() => (open ? rows.find((r) => r.id === open) : null), [open, rows]);
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold">Pipeline</h2>
+          <p className="text-sm text-muted-foreground">Click a cell and type. Drag the corner to fill, paste from Sheets, right-click for more.</p>
+        </div>
+        <div className="flex flex-wrap items-center gap-3">
+          <ToggleGroup
+            size="sm"
+            aria-label="Rows"
+            value={size}
+            onChange={setSize}
+            items={[
+              { value: "many", label: "10,000 rows" },
+              { value: "few", label: "60 rows" },
+              { value: "empty", label: "Empty" },
+              { value: "loading", label: "Loading" },
+            ]}
+          />
+          <Switch id="sheet-fail" label="Saves fail" checked={failing} onChange={(e) => setFailing(e.target.checked)} />
+        </div>
+      </div>
+      <Spreadsheet
+        key={size}
+        label="Pipeline"
+        noun="deal"
+        rows={rows}
+        columns={columns}
+        people={TEAM}
+        loading={size === "loading"}
+        today="2026-09-23"
+        locale="en-US"
+        defaultView={{ frozen: 1, widths: {}, sort: [], filters: [] }}
+        onChange={onChange}
+        onAddRows={onAddRows}
+        onDeleteRows={onDeleteRows}
+        onColumnsChange={onColumnsChange}
+        onExpandRow={(row) => setOpen(row.id)}
+        createRow={() => ({ id: `deal-new-${++made}`, stage: "lead", contacted: false, segments: [] })}
+        height={560}
+      />
+      <Sheet open={Boolean(openRow)} onClose={() => setOpen(null)} title={openRow?.company || "Untitled deal"} description="The row, opened: base-view draws a record here.">
+        {openRow ? (
+          <Card padding="sm">
+            <dl className="grid grid-cols-[8rem_1fr] gap-x-3 gap-y-2 text-sm">
+              {columns.map((c) => (
+                <div key={c.key} className="contents">
+                  <dt className="text-muted-foreground">{c.name}</dt>
+                  <dd className="truncate">{Array.isArray(openRow[c.key]) ? openRow[c.key].join(", ") : String(openRow[c.key] ?? "—")}</dd>
+                </div>
+              ))}
+            </dl>
+          </Card>
+        ) : null}
+      </Sheet>
+    </div>
+  );
+}