makersclaw 0.2.0 → 0.3.1

package/registry/blocks/spreadsheet/cells.jsx

@@ -0,0 +1,455 @@
+"use client";
+
+// How each column type is DRAWN in a cell and EDITED in place. The logic
+// (parse, format, sort, filter) is types.js; this file is keyed by a
+// type's `editor` name. A custom type (the `types` prop) may bring its own
+// `render(value, column, ctx)` and `Editor` component.
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Avatar, AvatarGroup, Badge, Calendar, Command, Icon, Rating, cx, panelClass, usePopoverPosition } from "../../ui";
+import { optionOf, optionValue } from "./types";
+
+const asList = (v) => (Array.isArray(v) ? v : v == null || v === "" ? [] : [v]);
+
+// ── display ─────────────────────────────────────────────────────────────
+
+export function OptionBadge({ option, fallback }) {
+  return (
+    <Badge variant="soft" hue={option?.hue ?? 1} className="max-w-full shrink-0 truncate">
+      {option?.label ?? fallback}
+    </Badge>
+  );
+}
+
+/** A cell's content, not editing. `active` is the selected cell (a rating
+ *  is an input there). */
+export function CellValue({ value, column, type, ctx, active, readOnly, onSet }) {
+  if (type.render) return type.render(value, column, ctx);
+  switch (type.editor) {
+    case "number":
+      return <span className="block min-w-0 flex-1 truncate text-right tabular-nums">{type.format(value, column, ctx)}</span>;
+    case "select": {
+      const list = asList(value);
+      if (!list.length) return null;
+      return (
+        <span className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+          {list.map((v) => (
+            <OptionBadge key={v} option={optionOf(column, v)} fallback={v} />
+          ))}
+        </span>
+      );
+    }
+    case "person": {
+      const people = asList(value).map((id) => (ctx.people ?? []).find((p) => p.id === id) ?? { id, name: String(id) });
+      if (!people.length) return null;
+      if (people.length > 1) return <AvatarGroup people={people} size="xs" max={3} />;
+      return (
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <Avatar name={people[0].name} src={people[0].src} size="xs" />
+          <span className="truncate">{people[0].name}</span>
+        </span>
+      );
+    }
+    case "toggle":
+      return (
+        <span className="flex flex-1 justify-center">
+          <span
+            aria-hidden="true"
+            data-toggle=""
+            className={cx(
+              "grid size-4 place-items-center rounded-sm border transition-colors duration-150",
+              value ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background",
+              !readOnly && "cursor-pointer",
+            )}
+          >
+            {value ? <Icon name="check" size={12} /> : null}
+          </span>
+        </span>
+      );
+    case "rating": {
+      const max = column.max ?? 5;
+      if (active && !readOnly) {
+        return <Rating value={value || 0} max={max} size="sm" label={column.name} onChange={(n) => onSet?.(n === value ? 0 : n)} />;
+      }
+      return value ? <Rating value={value} max={max} size="sm" label={column.name} /> : null;
+    }
+    case "url": {
+      if (!value) return null;
+      const href = /^[a-z]+:/i.test(value) ? value : `https://${value}`;
+      return (
+        <span className="flex min-w-0 flex-1 items-center gap-1">
+          <span className="truncate text-primary">{type.format(value, column, ctx)}</span>
+          {/^https?:/i.test(href) ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer noopener"
+              tabIndex={-1}
+              aria-label={`Open ${type.format(value, column, ctx)}`}
+              onPointerDown={(e) => e.stopPropagation()}
+              className={cx("ml-auto grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground", active ? "opacity-100" : "opacity-0 group-hover/row:opacity-100")}
+            >
+              <Icon name="external" size={14} />
+            </a>
+          ) : null}
+        </span>
+      );
+    }
+    default:
+      return <span className="block min-w-0 flex-1 truncate">{type.format(value, column, ctx)}</span>;
+  }
+}
+
+// ── the floating panel an editor opens beside its cell ──────────────────
+
+/** A top-layer panel under `anchorRef` (it floats above the grid's scroll
+ *  box, which would clip it). Dismissed by a press outside it and the cell. */
+export function CellPanel({ anchorRef, onDismiss, width = "sm", className, label, children }) {
+  const ref = useRef(null);
+  const dismiss = useRef(onDismiss);
+  dismiss.current = onDismiss;
+  usePopoverPosition(anchorRef, ref, { side: "bottom", align: "start", offset: 4 });
+  useLayoutEffect(() => {
+    const p = ref.current;
+    if (p && !p.matches(":popover-open")) p.showPopover?.();
+    return () => {
+      if (p?.matches(":popover-open")) p.hidePopover?.();
+    };
+  }, []);
+  useEffect(() => {
+    function down(e) {
+      const inside = ref.current?.contains(e.target) || anchorRef.current?.parentElement?.contains(e.target);
+      if (!inside) dismiss.current?.();
+    }
+    document.addEventListener("pointerdown", down, true);
+    return () => document.removeEventListener("pointerdown", down, true);
+  }, [anchorRef]);
+  return (
+    <div ref={ref} popover="manual" role="dialog" aria-label={label} className={panelClass(width, cx("overflow-hidden p-0 text-sm", className))}>
+      {children}
+    </div>
+  );
+}
+
+// ── editors ─────────────────────────────────────────────────────────────
+// Every editor gets { value, column, type, ctx, initial, today, onCommit,
+// onCancel }. onCommit(value, move, extra) — move: "down" · "up" · "right"
+// · "left" · null (stay); extra.create: new options for a select column.
+
+const TAB_MOVE = (e) => (e.shiftKey ? "left" : "right");
+
+/** Text, number, currency, link: an input laid over the cell. */
+function TextEditor({ value, column, type, ctx, initial, onCommit, onCancel }) {
+  const [text, setText] = useState(() => (initial != null ? initial : type.toText(value, column, ctx)));
+  const [error, setError] = useState(null);
+  const input = useRef(null);
+  const anchor = useRef(null);
+  const done = useRef(false);
+
+  useLayoutEffect(() => {
+    const el = input.current;
+    if (!el) return;
+    el.focus({ preventScroll: true });
+    const end = el.value.length;
+    el.setSelectionRange?.(end, end);
+  }, []);
+
+  function commit(move) {
+    const res = type.parse(text, column, ctx);
+    if ("error" in res) {
+      setError(res.error);
+      input.current?.focus({ preventScroll: true });
+      return false;
+    }
+    done.current = true;
+    onCommit(res.value, move, res.create ? { create: res.create } : undefined);
+    return true;
+  }
+
+  return (
+    <>
+      <span ref={anchor} aria-hidden="true" className="pointer-events-none absolute inset-0" />
+      {/* raw: an input the size of the cell with no chrome of its own; the kit's Input is a 44px field with a border. */}
+      <input
+        ref={input}
+        value={text}
+        aria-label={column.name}
+        aria-invalid={error ? true : undefined}
+        inputMode={type.editor === "number" ? "decimal" : type.editor === "url" ? "url" : undefined}
+        spellCheck={type.editor === "text"}
+        onChange={(e) => {
+          setText(e.target.value);
+          if (error) setError(null);
+        }}
+        onKeyDown={(e) => {
+          if (e.nativeEvent.isComposing) return;
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit(e.shiftKey ? "up" : "down");
+          } else if (e.key === "Tab") {
+            e.preventDefault();
+            commit(TAB_MOVE(e));
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            done.current = true;
+            onCancel();
+          }
+          e.stopPropagation();
+        }}
+        onBlur={() => {
+          if (done.current) return;
+          // Leaving with text that does not parse keeps the old value.
+          const res = type.parse(text, column, ctx);
+          done.current = true;
+          if ("error" in res) onCancel();
+          else onCommit(res.value, null, res.create ? { create: res.create } : undefined);
+        }}
+        className={cx(
+          "absolute inset-0 z-10 h-full w-full bg-background px-2 text-sm text-foreground outline-none",
+          "rounded-none shadow-[inset_0_0_0_2px_var(--color-primary)]",
+          type.editor === "number" && "text-right tabular-nums",
+          error && "shadow-[inset_0_0_0_2px_var(--color-destructive)]",
+        )}
+      />
+      {error ? (
+        <CellPanel anchorRef={anchor} onDismiss={() => {}} width="auto" label="Problem">
+          <p role="alert" className="flex items-center gap-2 px-3 py-2 text-xs text-destructive">
+            <Icon name="warning" size={14} />
+            {error}
+          </p>
+        </CellPanel>
+      ) : null}
+    </>
+  );
+}
+
+/** A date: type it, or pick it on the calendar. */
+function DateEditor({ value, column, type, ctx, initial, today, onCommit, onCancel }) {
+  const anchor = useRef(null);
+  const input = useRef(null);
+  const [text, setText] = useState(() => (initial != null ? initial : value ? type.format(value, column, ctx) : ""));
+  const [error, setError] = useState(null);
+  const typed = type.parse(text, column, ctx);
+  const shown = !("error" in typed) && typed.value ? typed.value : value || null;
+
+  useLayoutEffect(() => {
+    input.current?.focus({ preventScroll: true });
+    input.current?.select?.();
+  }, []);
+
+  function commitText(move) {
+    if ("error" in typed) {
+      setError(typed.error);
+      return;
+    }
+    onCommit(typed.value, move);
+  }
+
+  return (
+    <>
+      <span ref={anchor} aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 shadow-[inset_0_0_0_2px_var(--color-primary)]" />
+      <CellPanel anchorRef={anchor} onDismiss={onCancel} width="auto" label={column.name}>
+        <div
+          className="grid gap-2 p-2"
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+            e.stopPropagation();
+          }}
+        >
+          {/* raw: a compact date text box inside a 36px-row picker; the kit's Input is a 44px field. */}
+          <input
+            ref={input}
+            value={text}
+            placeholder="Type a date, or pick one"
+            aria-label={`${column.name}, as text`}
+            aria-invalid={error ? true : undefined}
+            onChange={(e) => {
+              setText(e.target.value);
+              setError(null);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitText("down");
+              } else if (e.key === "Tab" && !e.shiftKey && !text) {
+                // Tab with nothing typed walks into the calendar.
+              } else if (e.key === "Tab") {
+                e.preventDefault();
+                commitText(TAB_MOVE(e));
+              }
+            }}
+            className={cx(
+              "h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              error && "border-destructive",
+            )}
+          />
+          {error ? (
+            <p role="alert" className="text-xs text-destructive">
+              {error}
+            </p>
+          ) : null}
+          <Calendar
+            mode="single"
+            size="sm"
+            value={shown}
+            defaultMonth={shown ? shown.slice(0, 7) : undefined}
+            today={today}
+            onChange={(d) => onCommit(d ?? null, null)}
+          />
+          <div className="flex items-center justify-between border-t border-border pt-2">
+            {/* raw: a text-size link-button in a dense picker footer; kit Button's link variant is text-sm with no hit area of its own. */}
+            <button
+              type="button"
+              className="rounded-sm px-1.5 py-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => onCommit(today ?? new Date().toISOString().slice(0, 10), null)}
+            >
+              Today
+            </button>
+            {value ? (
+              // raw: the same dense footer link.
+              <button
+                type="button"
+                className="rounded-sm px-1.5 py-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={() => onCommit(null, null)}
+              >
+                Clear
+              </button>
+            ) : null}
+          </div>
+        </div>
+      </CellPanel>
+    </>
+  );
+}
+
+/** Single and multiple select, and people: a searchable list. A single
+ *  pick commits; a multiple one stays open and commits on close. */
+function PickEditor({ value, column, type, ctx, initial, canCreate, onCommit, onCancel }) {
+  const anchor = useRef(null);
+  const person = type.editor === "person";
+  const multiple = person ? Boolean(column.multiple) : Boolean(type.multiple);
+  const [query, setQuery] = useState(initial ?? "");
+  const [draft, setDraft] = useState(() => asList(value));
+  const [created, setCreated] = useState([]);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const options = person
+    ? (ctx.people ?? []).map((p) => ({ value: p.id, label: p.name, description: p.email, icon: <Avatar name={p.name} src={p.src} size="xs" /> }))
+    : [...(column.options ?? []), ...created].map((o) => ({ value: o.value, label: o.label, icon: <span aria-hidden="true" className={cx("size-2 rounded-full", HUE_DOT[o.hue ?? 1])} /> }));
+
+  const exact = options.some((o) => o.label.toLowerCase() === query.trim().toLowerCase());
+  const items = options.map((o) => ({
+    ...o,
+    icon: multiple ? (
+      <span className={cx("grid size-4 place-items-center rounded-sm border", draft.includes(o.value) ? "border-primary bg-primary text-primary-foreground" : "border-input")}>
+        {draft.includes(o.value) ? <Icon name="check" size={12} /> : null}
+      </span>
+    ) : (
+      o.icon
+    ),
+    description: !multiple && draft[0] === o.value ? "Selected" : o.description,
+  }));
+  if (!person && canCreate && column.allowNew !== false && query.trim() && !exact) {
+    items.push({ value: "__create", label: `Create “${query.trim()}”`, icon: "plus", keywords: [query] });
+  }
+  if (!multiple && draft.length) items.push({ value: "__clear", label: "Clear", icon: "x" });
+
+  function finish(move = null) {
+    const list = draftRef.current;
+    const next = multiple ? list : list[0] ?? null;
+    onCommit(next, move, created.length ? { create: created } : undefined);
+  }
+
+  function pick(item) {
+    if (item.value === "__clear") return onCommit(null, null);
+    if (item.value === "__create") {
+      const label = query.trim();
+      const o = { value: optionValue(label, [...(column.options ?? []), ...created].map((x) => x.value)), label, hue: (((column.options?.length ?? 0) + created.length) % 5) + 1 };
+      setCreated((c) => [...c, o]);
+      setQuery("");
+      if (multiple) setDraft((d) => [...d, o.value]);
+      else onCommit(o.value, null, { create: [...created, o] });
+      return;
+    }
+    if (multiple) {
+      setDraft((d) => (d.includes(item.value) ? d.filter((x) => x !== item.value) : [...d, item.value]));
+      setQuery("");
+    } else onCommit(item.value, null, created.length ? { create: created } : undefined);
+  }
+
+  return (
+    <>
+      <span ref={anchor} aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 shadow-[inset_0_0_0_2px_var(--color-primary)]" />
+      <CellPanel anchorRef={anchor} onDismiss={() => (multiple ? finish() : onCancel())} width="sm" label={column.name}>
+        <div
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              if (multiple) finish();
+              else onCancel();
+            } else if (e.key === "Tab") {
+              e.preventDefault();
+              if (multiple) finish(TAB_MOVE(e));
+              else onCancel();
+            } else if (e.key === "Backspace" && multiple && !query && draft.length) {
+              setDraft((d) => d.slice(0, -1));
+            }
+            e.stopPropagation();
+          }}
+        >
+          {multiple && draft.length ? (
+            <div className="flex flex-wrap gap-1 border-b border-border p-2">
+              {draft.map((v) =>
+                person ? (
+                  <Badge key={v} variant="soft">
+                    {(ctx.people ?? []).find((p) => p.id === v)?.name ?? v}
+                  </Badge>
+                ) : (
+                  <OptionBadge key={v} option={optionOf({ options: [...(column.options ?? []), ...created] }, v)} fallback={v} />
+                ),
+              )}
+            </div>
+          ) : null}
+          <Command
+            bare
+            autoFocus
+            items={items}
+            query={query}
+            onQueryChange={setQuery}
+            onSelect={pick}
+            label={column.name}
+            placeholder={person ? "Find a person" : canCreate && column.allowNew !== false ? "Find or create an option" : "Find an option"}
+            empty={person ? "No one by that name." : "No options yet — type one to create it."}
+            listClassName="max-h-64"
+          />
+          {multiple ? (
+            <p className="border-t border-border px-3 py-2 text-2xs text-muted-foreground">Enter to toggle · Esc when done</p>
+          ) : null}
+        </div>
+      </CellPanel>
+    </>
+  );
+}
+
+const HUE_DOT = { 1: "bg-chart-1", 2: "bg-chart-2", 3: "bg-chart-3", 4: "bg-chart-4", 5: "bg-chart-5" };
+
+/** The editor for a type, or null when it edits in place (a checkbox, a
+ *  rating) or not at all. */
+export function editorFor(type) {
+  if (type.Editor) return type.Editor;
+  switch (type.editor) {
+    case "text":
+    case "number":
+    case "url":
+      return TextEditor;
+    case "date":
+      return DateEditor;
+    case "select":
+    case "person":
+      return PickEditor;
+    default:
+      return null;
+  }
+}