makersclaw 0.2.0 → 0.3.0

package/registry/blocks/task-model/parts.jsx

@@ -0,0 +1,449 @@
+"use client";
+
+import { useState } from "react";
+import { Avatar, Button, Calendar, Icon, Menu, Popover, StatusDot, cx } from "../../ui";
+import { addDays, dayOf, dueBucket, endOfWeek, formatDay, formatTime, minutesOf, withTime } from "./dates";
+import { NONE, PRIORITIES, createTaskContext, isDone } from "./model";
+
+// The small pieces every task view draws the same way: a status, the
+// people on it, its due date, its priority, a compact chip. Each is a
+// label by default and a picker when given `onChange` — the view hands
+// the picked value to its commit. Tokens only: a status says its tone,
+// a project its hue (chart-1…5).
+
+const ctxOf = (ctx) => (ctx && ctx.statusById ? ctx : createTaskContext(ctx ?? {}));
+
+export const TONE_TEXT = {
+  neutral: "text-muted-foreground",
+  primary: "text-primary",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-destructive",
+};
+
+export const HUE_EDGE = {
+  1: "border-s-chart-1",
+  2: "border-s-chart-2",
+  3: "border-s-chart-3",
+  4: "border-s-chart-4",
+  5: "border-s-chart-5",
+};
+
+export const HUE_BG = {
+  1: "bg-chart-1",
+  2: "bg-chart-2",
+  3: "bg-chart-3",
+  4: "bg-chart-4",
+  5: "bg-chart-5",
+};
+
+// A trigger that looks like its label until hovered: the pickers' face.
+const PICK = "rounded-md px-1.5 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring";
+
+/** A status as a dot and its words. With `onChange(id)`, a menu of the
+ *  statuses. `size` sm (a row) · md. `hideLabel` for a dense cell. */
+export function StatusPill({ status, ctx, onChange, size = "sm", hideLabel = false, className }) {
+  const c = ctxOf(ctx);
+  const s = c.statusById.get(String(status));
+  const face = (
+    <span className={cx("relative inline-flex min-w-0 items-center gap-1.5", size === "sm" ? "text-xs" : "text-sm")}>
+      <StatusDot tone={s ? s.tone ?? (s.hue ? undefined : "neutral") : "neutral"} hue={s?.hue} size={size === "sm" ? "sm" : "md"} />
+      <span className={cx("truncate", hideLabel && "sr-only", s ? "text-foreground" : "text-muted-foreground")}>{s?.label ?? "No status"}</span>
+    </span>
+  );
+  if (!onChange) return <span className={cx("inline-flex min-w-0", className)}>{face}</span>;
+  return (
+    <Menu
+      label={`Status: ${s?.label ?? "none"}. Change status`}
+      trigger={face}
+      align="start"
+      className={cx(PICK, className)}
+      items={[
+        {
+          type: "radio",
+          value: s?.id ?? "",
+          onValueChange: (v) => v !== s?.id && onChange(v),
+          options: c.statuses.map((x) => ({ value: x.id, label: x.label })),
+        },
+      ]}
+    />
+  );
+}
+
+/** The round check that completes a task (not the square one that
+ *  selects it). Shows the done state; `onToggle()` when pressed. */
+export function CompleteToggle({ done, onToggle, label = "task", disabled, size = "md", className }) {
+  const box = size === "sm" ? "size-4" : "size-[18px]";
+  return (
+    // raw: a completion check is round and toggles a status, not a form
+    // value — the kit's Checkbox is the square selection box beside it.
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={Boolean(done)}
+      aria-label={done ? `Mark ${label} not done` : `Complete ${label}`}
+      disabled={disabled || !onToggle}
+      onClick={onToggle}
+      className={cx(
+        "group/check inline-flex size-9 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default",
+        className,
+      )}
+    >
+      <span
+        className={cx(
+          "inline-flex items-center justify-center rounded-full border transition-colors duration-150",
+          box,
+          done ? "border-success bg-success text-background" : "border-muted-foreground/50 text-transparent group-hover/check:border-success group-hover/check:text-success",
+        )}
+      >
+        <Icon name="check" size={size === "sm" ? 10 : 12} />
+      </span>
+    </button>
+  );
+}
+
+/** The people on a task: overlapping faces, or a dashed "assign" circle.
+ *  With `onChange(ids)`, a menu of people to tick (it stays open). */
+export function AssigneeStack({ ids, ctx, onChange, max = 3, size = "xs", className }) {
+  const c = ctxOf(ctx);
+  const list = (ids ?? []).map((id) => c.personById.get(String(id)) ?? { id, name: String(id) });
+  // Spans, not the kit's AvatarGroup (a div): the faces sit inside the
+  // picker's button, where a div is invalid HTML.
+  const shown = list.slice(0, max);
+  const rest = list.length - shown.length;
+  const face = list.length ? (
+    <span className="inline-flex items-center -space-x-1.5" title={list.map((p) => p.name).join(", ")}>
+      {shown.map((p) => (
+        <Avatar key={p.id} name={p.name} src={p.src} size={size} className="ring-2 ring-card" />
+      ))}
+      {rest > 0 ? (
+        <span data-nums className="relative inline-flex size-6 items-center justify-center rounded-full bg-muted text-2xs font-medium text-muted-foreground ring-2 ring-card">
+          +{rest}
+        </span>
+      ) : null}
+    </span>
+  ) : (
+    <span aria-hidden="true" className="inline-flex size-6 items-center justify-center rounded-full border border-dashed border-muted-foreground/50 text-muted-foreground">
+      <Icon name="user" size={12} />
+    </span>
+  );
+  if (!onChange) {
+    return list.length ? (
+      <span className={cx("inline-flex", className)}>{face}</span>
+    ) : (
+      <span className={cx("relative inline-flex", className)}>
+        {face}
+        <span className="sr-only">Unassigned</span>
+      </span>
+    );
+  }
+  const set = new Set((ids ?? []).map(String));
+  return (
+    <Menu
+      label={list.length ? `Assigned to ${list.map((p) => p.name).join(", ")}. Change` : "Assign"}
+      trigger={face}
+      className={cx(PICK, className)}
+      items={
+        c.people.length
+          ? c.people.map((p) => ({
+              type: "checkbox",
+              label: p.name,
+              checked: set.has(p.id),
+              onCheckedChange: (on) => onChange(on ? [...set, p.id] : [...set].filter((x) => x !== p.id)),
+            }))
+          : [{ type: "label", label: "No people to assign yet" }]
+      }
+    />
+  );
+}
+
+/** One person: a face and a name (a group header, a workload row). */
+export function PersonLabel({ id, ctx, size = "xs", className }) {
+  const c = ctxOf(ctx);
+  if (!id || id === NONE) {
+    return (
+      <span className={cx("inline-flex items-center gap-2", className)}>
+        <span aria-hidden="true" className="inline-flex size-6 items-center justify-center rounded-full border border-dashed border-muted-foreground/50 text-muted-foreground">
+          <Icon name="user" size={12} />
+        </span>
+        <span className="truncate">Unassigned</span>
+      </span>
+    );
+  }
+  const p = c.personById.get(String(id)) ?? { name: String(id) };
+  return (
+    <span className={cx("inline-flex min-w-0 items-center gap-2", className)}>
+      <Avatar name={p.name} src={p.src} size={size} />
+      <span className="truncate">{p.name}</span>
+    </span>
+  );
+}
+
+const DUE_TONE = { overdue: "text-destructive", today: "text-warning" };
+
+/** A due date the way a person says it ("Today", "Fri", "Oct 30"), red
+ *  when overdue and amber today — unless the task is done. With
+ *  `onChange(day | null)`, a calendar with quick picks; an empty one
+ *  shows only its glyph until the row is hovered (`quiet`, default) —
+ *  pass quiet={false} to always say `placeholder`. */
+export function DueLabel({ value, done = false, ctx, onChange, placeholder = "Due date", quiet = true, className }) {
+  const c = ctxOf(ctx);
+  const [open, setOpen] = useState(false);
+  const day = dayOf(value);
+  const bucket = dueBucket(value, c.today, { done, weekStartsOn: c.weekStartsOn });
+  const time = formatTime(value);
+  const words = day ? `${formatDay(day, c.today)}${time ? ` ${time}` : ""}` : "";
+  const face = (
+    <span className={cx("inline-flex items-center gap-1 whitespace-nowrap text-xs", day ? DUE_TONE[bucket] ?? "text-muted-foreground" : "text-muted-foreground")}>
+      <Icon name="calendar" size={14} className={day ? undefined : "opacity-60"} />
+      {day ? (
+        <span data-nums>{words}</span>
+      ) : onChange ? (
+        <span className={quiet ? "sr-only sm:not-sr-only sm:opacity-0 sm:transition-opacity sm:duration-150 sm:group-hover/row:opacity-100 sm:group-focus-within/row:opacity-100" : undefined}>{placeholder}</span>
+      ) : null}
+    </span>
+  );
+  if (!onChange) {
+    return day ? (
+      <span className={cx("inline-flex", className)} title={bucket === "overdue" ? "Overdue" : undefined}>
+        {face}
+      </span>
+    ) : null;
+  }
+  const pick = (d) => {
+    setOpen(false);
+    onChange(d ? withTime(d, minutesOf(value)) : null);
+  };
+  const quick = [
+    { label: "Today", day: c.today },
+    { label: "Tomorrow", day: addDays(c.today, 1) },
+    { label: "Next week", day: addDays(endOfWeek(c.today, c.weekStartsOn), 1) },
+  ];
+  return (
+    <Popover
+      label={day ? `Due ${words}. Change due date` : "Set a due date"}
+      open={open}
+      onOpenChange={setOpen}
+      width="auto"
+      align="end"
+      className="p-2"
+      trigger={(props) => (
+        // raw: Popover hands its trigger props (ref, popoverTarget) to a
+        // button of ours; the face is a date's words, not a kit Button.
+        <button type="button" {...props} aria-label={day ? `Due ${words}. Change due date` : "Set a due date"} className={cx("inline-flex min-h-9 items-center outline-none", PICK, className)}>
+          {face}
+        </button>
+      )}
+    >
+      <div className="grid gap-2">
+        <div className="flex flex-wrap gap-1">
+          {quick.map((q) => (
+            <Button key={q.label} size="sm" variant={q.day === day ? "secondary" : "quiet"} onClick={() => pick(q.day)}>
+              {q.label}
+            </Button>
+          ))}
+        </div>
+        <Calendar value={day} onChange={(d) => pick(d)} today={c.today} weekStartsOn={c.weekStartsOn} size="sm" autoFocus={open} label="Due date" />
+        {day ? (
+          <Button size="sm" variant="quiet" icon="x" align="start" onClick={() => pick(null)}>
+            Remove due date
+          </Button>
+        ) : null}
+      </div>
+    </Popover>
+  );
+}
+
+/** A priority as a flag in its tone. With `onChange(id | null)`, a menu. */
+export function PriorityFlag({ value, onChange, showLabel = false, className }) {
+  const p = PRIORITIES.find((x) => x.id === value);
+  const face = (
+    <span className={cx("relative inline-flex items-center gap-1 text-xs", p ? TONE_TEXT[p.tone] : "text-muted-foreground")}>
+      <Icon name="flag" size={14} className={p ? undefined : "opacity-40"} />
+      {showLabel && p ? <span className="text-foreground">{p.label}</span> : null}
+      {!p ? <span className="sr-only">No priority</span> : null}
+    </span>
+  );
+  if (!onChange) {
+    if (!p) return null;
+    return (
+      // relative: its sr-only label is absolute, and without a positioned
+      // parent inside a sideways-scrolling row it escaped the scroller and
+      // widened the page (task-model at 390px, 2026-09-24).
+      <span className={cx("relative inline-flex", className)} title={`${p.label} priority`}>
+        {face}
+        <span className="sr-only">{p.label} priority</span>
+      </span>
+    );
+  }
+  return (
+    <Menu
+      label={p ? `${p.label} priority. Change priority` : "Set priority"}
+      trigger={face}
+      className={cx(PICK, !p && "opacity-0 transition-opacity duration-150 group-hover/row:opacity-100 group-focus-within/row:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100", className)}
+      items={[
+        {
+          type: "radio",
+          value: p?.id ?? NONE,
+          onValueChange: (v) => onChange(v === NONE ? null : v),
+          options: [...PRIORITIES.map((x) => ({ value: x.id, label: x.label })), { value: NONE, label: "No priority" }],
+        },
+      ]}
+    />
+  );
+}
+
+/** Tags as quiet chips; the first `max`, then "+N". */
+export function TagList({ tags, max = 2, className }) {
+  const list = tags ?? [];
+  if (!list.length) return null;
+  const shown = list.slice(0, max);
+  const rest = list.length - shown.length;
+  return (
+    <span className={cx("inline-flex min-w-0 items-center gap-1", className)}>
+      {shown.map((t) => (
+        <span key={t} className="max-w-28 truncate rounded-sm bg-muted px-1.5 py-0.5 text-2xs text-muted-foreground">
+          {t}
+        </span>
+      ))}
+      {rest > 0 ? (
+        <span className="text-2xs text-muted-foreground" title={list.slice(max).join(", ")}>
+          +{rest}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+/** "2/5" subtasks done, with the list glyph. */
+export function SubtaskCount({ done, total, className }) {
+  if (!total) return null;
+  return (
+    <span className={cx("inline-flex items-center gap-1 text-xs text-muted-foreground", className)} title={`${done} of ${total} subtasks done`}>
+      <Icon name="list" size={14} />
+      <span data-nums>
+        {done}/{total}
+      </span>
+    </span>
+  );
+}
+
+/** A thin progress line (0–100) for a row or a bar. */
+export function ProgressLine({ value, className }) {
+  const v = Math.max(0, Math.min(100, Number(value) || 0));
+  return (
+    <span className={cx("relative block h-1 w-full overflow-hidden rounded-full bg-muted", className)} role="img" aria-label={`${Math.round(v)}% done`}>
+      <span className={cx("absolute inset-y-0 start-0 rounded-full", v >= 100 ? "bg-success" : "bg-primary")} style={{ width: `${v}%` }} />
+    </span>
+  );
+}
+
+/** A task as one compact line: the chip a calendar day, a gantt label or
+ *  a workload cell draws. Status dot, title, time (when it has one), the
+ *  first face; a project's hue on its leading edge. `onOpen(task)` makes
+ *  it a button. Spread drag props (`dragProps`) onto it for dragging. */
+export function TaskChip({ task, ctx, onOpen, showTime = true, showPeople = true, dragging = false, lifted = false, dragProps, className }) {
+  const c = ctxOf(ctx);
+  const s = c.statusById.get(String(task.status));
+  const project = c.projectById.get(String(task.project));
+  const done = isDone(task, c);
+  const time = showTime ? formatTime(task.start ?? task.due) : "";
+  const first = task.assignees?.[0] ? c.personById.get(task.assignees[0]) : null;
+  const Tag = onOpen ? "button" : "div";
+  return (
+    // raw: a chip is a draggable, openable card-let; a kit Button would
+    // centre and pad it as an action.
+    <Tag
+      type={onOpen ? "button" : undefined}
+      onClick={onOpen ? () => onOpen(task) : undefined}
+      {...dragProps}
+      className={cx(
+        "flex w-full min-w-0 items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-left text-xs text-card-foreground outline-none transition-[box-shadow,opacity] duration-150",
+        project?.hue && HUE_EDGE[project.hue] ? cx("border-s-[3px]", HUE_EDGE[project.hue]) : null,
+        onOpen && "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+        dragging && "opacity-40",
+        lifted && "cursor-grabbing shadow-lg ring-1 ring-border",
+        className,
+      )}
+    >
+      <StatusDot tone={s?.tone ?? (s?.hue ? undefined : "neutral")} hue={s?.hue} size="sm" />
+      {time ? (
+        <span data-nums className="shrink-0 text-muted-foreground">
+          {time}
+        </span>
+      ) : null}
+      <span className={cx("min-w-0 flex-1 truncate font-medium", done && "text-muted-foreground line-through")}>{task.title || "Untitled"}</span>
+      {showPeople && first ? <Avatar name={first.name} src={first.src} size="xs" /> : null}
+    </Tag>
+  );
+}
+
+/** A group's heading face: the status dot, a person, a flag, a project
+ *  hue, or the plain words — whatever the view is grouped by. */
+export function GroupLabel({ group, by, ctx, className }) {
+  const c = ctxOf(ctx);
+  const kind = by ? c.fields.find((f) => f.key === by)?.kind : null;
+  if (kind === "people") return <PersonLabel id={group.key} ctx={c} className={cx("text-sm font-semibold", className)} />;
+  let lead = null;
+  if (kind === "status") lead = <StatusDot tone={group.tone ?? (group.hue ? undefined : "neutral")} hue={group.hue} />;
+  else if (kind === "priority") lead = <Icon name="flag" size={14} className={group.tone ? TONE_TEXT[group.tone] : "text-muted-foreground opacity-50"} />;
+  else if (kind === "project" && group.hue && HUE_BG[group.hue]) lead = <span aria-hidden="true" className={cx("size-2 shrink-0 rounded-sm", HUE_BG[group.hue])} />;
+  else if (kind === "date") lead = <Icon name="calendar" size={14} className={group.tone ? TONE_TEXT[group.tone] : "text-muted-foreground"} />;
+  return (
+    <span className={cx("inline-flex min-w-0 items-center gap-2 text-sm font-semibold", className)}>
+      {lead}
+      <span className="truncate">{group.label}</span>
+    </span>
+  );
+}
+
+/** DataTable columns for toTableRows rows: name, status, assignees, due,
+ *  priority, project, estimate, progress, tags — sortable, drawn with the
+ *  parts above. `keys` picks and orders them. Pass `onChange(change)` to
+ *  make status / people / due / priority cells pickers. */
+export function taskColumns(ctx, { keys = ["title", "status", "assignees", "due", "priority"], onChange } = {}) {
+  const c = ctxOf(ctx);
+  const set = (row, patch) => onChange?.({ type: "update", id: row.id, patch });
+  const edit = typeof onChange === "function";
+  const all = {
+    title: { key: "title", header: "Name", sortable: true, hideable: false, cell: (r) => <span className={cx("font-medium", r.done && "text-muted-foreground line-through")}>{r.title}</span> },
+    status: {
+      key: "status",
+      header: "Status",
+      sortable: true,
+      sortValue: (r) => r.statusIndex,
+      searchValue: (r) => r.statusLabel,
+      cell: (r) => <StatusPill status={r.status} ctx={c} onChange={edit ? (v) => set(r, { status: v }) : undefined} />,
+    },
+    assignees: {
+      key: "assignees",
+      header: "Assignee",
+      sortable: true,
+      sortValue: (r) => r.assigneeNames || null,
+      searchValue: (r) => r.assigneeNames,
+      cell: (r) => <AssigneeStack ids={r.assignees} ctx={c} onChange={edit ? (v) => set(r, { assignees: v }) : undefined} />,
+    },
+    due: {
+      key: "due",
+      header: "Due",
+      sortable: true,
+      sortValue: (r) => r.dueDay,
+      cell: (r) => <DueLabel value={r.due} done={r.done} ctx={c} onChange={edit ? (v) => set(r, { due: v }) : undefined} />,
+    },
+    start: { key: "start", header: "Start", sortable: true, sortValue: (r) => dayOf(r.start), cell: (r) => (r.start ? formatDay(r.start, c.today) : "") },
+    priority: {
+      key: "priority",
+      header: "Priority",
+      sortable: true,
+      sortValue: (r) => r.priorityRank,
+      searchValue: (r) => r.priorityLabel,
+      cell: (r) => <PriorityFlag value={r.priority} showLabel onChange={edit ? (v) => set(r, { priority: v }) : undefined} />,
+    },
+    project: { key: "project", header: "Project", sortable: true, sortValue: (r) => r.projectName || null, searchValue: (r) => r.projectName, cell: (r) => r.projectName },
+    estimate: { key: "estimate", header: "Estimate", sortable: true, align: "end", cell: (r) => (r.estimate ? `${r.estimate}h` : "") },
+    progress: { key: "progress", header: "Progress", sortable: true, width: "8rem", cell: (r) => (typeof r.progress === "number" ? <ProgressLine value={r.progress} /> : null) },
+    tags: { key: "tags", header: "Tags", searchValue: (r) => (r.tags ?? []).join(" "), cell: (r) => <TagList tags={r.tags} /> },
+  };
+  return keys.map((k) => all[k]).filter(Boolean);
+}