@kinetixui/ui 0.11.0 → 0.13.0

package/src/components/json-viewer.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronRight, Copy } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface JsonViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  data: unknown;
+  /** tree depth (root = 0) to auto-expand; deeper nodes start collapsed. Default 1. */
+  expandDepth?: number;
+  hideCopy?: boolean;
+}
+
+/**
+ * JsonViewer — a collapsible, syntax-colored tree for arbitrary JSON data
+ * (API responses, registry payloads, token diffs — a dev-tool surface the
+ * site itself needs for `/docs/kinetixui-json` and friends). Distinct from
+ * `TreeView`: this renders a *data structure* (object/array/primitive),
+ * not a caller-composed hierarchy of `TreeItem`s, so expand state is
+ * per-node uncontrolled rather than a lifted `expanded` prop — there's no
+ * stable "value" to key a node by beyond its position in the data, and
+ * nothing external needs to drive which nodes are open. Value colors reuse
+ * the existing semantic tokens (`--success`/`--info`/`--warning`) rather
+ * than introducing a separate syntax-highlighting palette. Gap-fill
+ * addition (not in the original Figma source).
+ */
+const JsonViewer = React.forwardRef<HTMLDivElement, JsonViewerProps>(
+  ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      } catch {
+        // clipboard unavailable — no-op
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("relative overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs", className)}
+        {...props}
+      >
+        {!hideCopy && (
+          <button
+            type="button"
+            onClick={copy}
+            aria-label="Copy JSON"
+            className="absolute right-2 top-2 inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+          </button>
+        )}
+        <div role="tree">
+          <JsonNode value={data} depth={0} expandDepth={expandDepth} isLast />
+        </div>
+      </div>
+    );
+  },
+);
+JsonViewer.displayName = "JsonViewer";
+
+function JsonNode({
+  name,
+  value,
+  depth,
+  expandDepth,
+  isLast,
+}: {
+  name?: string;
+  value: unknown;
+  depth: number;
+  expandDepth: number;
+  isLast: boolean;
+}) {
+  const isContainer = value !== null && typeof value === "object";
+  const [expanded, setExpanded] = React.useState(depth < expandDepth);
+
+  if (!isContainer) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <JsonPrimitive value={value} />
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  const isArray = Array.isArray(value);
+  const entries: [string, unknown][] = isArray
+    ? (value as unknown[]).map((v, i) => [String(i), v])
+    : Object.entries(value as Record<string, unknown>);
+  const openBracket = isArray ? "[" : "{";
+  const closeBracket = isArray ? "]" : "}";
+
+  if (entries.length === 0) {
+    return (
+      <div role="treeitem" style={{ paddingLeft: depth * 16 + 20 }}>
+        {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+        <span>
+          {openBracket}
+          {closeBracket}
+        </span>
+        {!isLast && <span className="text-muted-foreground">,</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div role="treeitem" aria-expanded={expanded}>
+      <div style={{ paddingLeft: depth * 16 }} className="flex items-start gap-1">
+        <button
+          type="button"
+          onClick={() => setExpanded((e) => !e)}
+          aria-label={expanded ? "Collapse" : "Expand"}
+          className="mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+        >
+          <ChevronRight className={cn("size-3 transition-transform", expanded && "rotate-90")} />
+        </button>
+        <span>
+          {name !== undefined && <span className="text-muted-foreground">{JSON.stringify(name)}: </span>}
+          <span>{openBracket}</span>
+          {!expanded && (
+            <span className="text-muted-foreground">
+              {" "}
+              {entries.length} {isArray ? "item" : "key"}
+              {entries.length === 1 ? "" : "s"}{" "}
+            </span>
+          )}
+          {!expanded && <span>{closeBracket}</span>}
+          {!expanded && !isLast && <span className="text-muted-foreground">,</span>}
+        </span>
+      </div>
+      {expanded && (
+        <>
+          {entries.map(([key, val], i) => (
+            <JsonNode
+              key={key}
+              name={isArray ? undefined : key}
+              value={val}
+              depth={depth + 1}
+              expandDepth={expandDepth}
+              isLast={i === entries.length - 1}
+            />
+          ))}
+          <div style={{ paddingLeft: depth * 16 }}>
+            <span>{closeBracket}</span>
+            {!isLast && <span className="text-muted-foreground">,</span>}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function JsonPrimitive({ value }: { value: unknown }) {
+  if (value === null) return <span className="italic text-muted-foreground">null</span>;
+  if (value === undefined) return <span className="italic text-muted-foreground">undefined</span>;
+  if (typeof value === "string") return <span className="text-success">{JSON.stringify(value)}</span>;
+  if (typeof value === "number") return <span className="text-info">{value}</span>;
+  if (typeof value === "boolean") return <span className="text-warning">{String(value)}</span>;
+  return <span>{String(value)}</span>;
+}
+
+export { JsonViewer };

package/src/components/kanban-board.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import * as React from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  getFirstCollision,
+  pointerWithin,
+  rectIntersection,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type CollisionDetection,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { tokens } from "@kinetixui/tokens";
+import { cn } from "../lib/utils";
+
+export interface KanbanCard {
+  id: string;
+  content: React.ReactNode;
+}
+
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  cards: KanbanCard[];
+}
+
+export interface KanbanBoardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  columns: KanbanColumn[];
+  onColumnsChange: (columns: KanbanColumn[]) => void;
+}
+
+/**
+ * KanbanBoard — draggable cards across columns, with keyboard DnD. No DnD
+ * primitive existed in this package at all, and hand-rolling accessible
+ * drag-and-drop (pointer + touch + keyboard, collision detection, live
+ * screen-reader announcements) from scratch would both take far longer
+ * than this component's own logic and likely be worse than a battle-tested
+ * library — unlike `DiffViewer`'s hand-rolled LCS diff, there's no
+ * cross-platform-identical-algorithm argument here, since each native
+ * platform reaches for its own idiomatic drag primitive anyway (Compose's
+ * drag gestures, SwiftUI's `.draggable`/`.dropDestination`, Flutter's
+ * `Draggable`/`DragTarget`). `@dnd-kit` is the dependency: no runtime CSS,
+ * accessible by default, and this is exactly its documented "multiple
+ * containers" sortable pattern — `onDragOver` re-parents a card into the
+ * hovered column live (the standard approach; a little re-render churn
+ * mid-drag is expected/upstream-documented), `onDragEnd` commits the
+ * final within-column reorder. Column order itself isn't draggable — the
+ * `COMPONENT-ADDITIONS.md` entry only asked for card dragging.
+ *
+ * `collisionDetectionStrategy` below is dnd-kit's own documented fix for a
+ * specific multi-container gotcha: each column is both a `useDroppable`
+ * (so an empty column, or the space below its last card, is still a valid
+ * drop target) and wraps a `SortableContext` of its cards. A column's rect
+ * is a strict superset of its cards' rects, so plain `closestCorners` (or
+ * `closestCenter`/`rectIntersection` alone) almost always reports the
+ * column itself as the collision, never a specific card underneath — over
+ * gets stuck on the column id and item-level reordering never fires. The
+ * fix (lifted from dnd-kit's own multiple-containers example): try
+ * `pointerWithin` first, fall back to `rectIntersection`, and if the
+ * winning id is a column, re-run `closestCenter` scoped to just that
+ * column's cards to find the specific one under the pointer.
+ */
+const KanbanBoard = React.forwardRef<HTMLDivElement, KanbanBoardProps>(
+  ({ columns, onColumnsChange, className, ...props }, ref) => {
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: tokens.interaction.drag.threshold } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    );
+    const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null);
+    const lastOverId = React.useRef<string | null>(null);
+
+    const findColumn = React.useCallback(
+      (id: string) => columns.find((col) => col.id === id || col.cards.some((c) => c.id === id)),
+      [columns],
+    );
+
+    const collisionDetectionStrategy: CollisionDetection = React.useCallback(
+      (args) => {
+        const pointerIntersections = pointerWithin(args);
+        const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+        let overId = getFirstCollision(intersections, "id");
+
+        if (overId != null) {
+          const overColumn = columns.find((col) => col.id === overId);
+          if (overColumn && overColumn.cards.length > 0) {
+            const cardIds = new Set(overColumn.cards.map((c) => c.id));
+            const cardCollision = getFirstCollision(
+              closestCenter({
+                ...args,
+                droppableContainers: args.droppableContainers.filter((c) => cardIds.has(String(c.id))),
+              }),
+              "id",
+            );
+            if (cardCollision != null) overId = cardCollision;
+          }
+          lastOverId.current = String(overId);
+          return [{ id: overId }];
+        }
+
+        return lastOverId.current ? [{ id: lastOverId.current }] : [];
+      },
+      [columns],
+    );
+
+    function handleDragStart(event: DragStartEvent) {
+      lastOverId.current = String(event.active.id);
+      const column = findColumn(String(event.active.id));
+      const card = column?.cards.find((c) => c.id === event.active.id);
+      setActiveCard(card ?? null);
+    }
+
+    function handleDragOver(event: DragOverEvent) {
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      if (activeId === overId) return;
+
+      const activeColumn = findColumn(activeId);
+      const overColumn = findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id === overColumn.id) return;
+
+      onColumnsChange(
+        columns.map((col) => {
+          if (col.id === activeColumn.id) {
+            return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };
+          }
+          if (col.id === overColumn.id) {
+            const movedCard = activeColumn.cards.find((c) => c.id === activeId);
+            if (!movedCard) return col;
+            const overIndex = col.cards.findIndex((c) => c.id === overId);
+            const insertAt = overIndex >= 0 ? overIndex : col.cards.length;
+            const nextCards = [...col.cards];
+            nextCards.splice(insertAt, 0, movedCard);
+            return { ...col, cards: nextCards };
+          }
+          return col;
+        }),
+      );
+    }
+
+    function handleDragEnd(event: DragEndEvent) {
+      setActiveCard(null);
+      lastOverId.current = null;
+      const { active, over } = event;
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      const activeColumn = findColumn(activeId);
+      // overId may be the column itself (dropped in empty space / an empty column)
+      const overColumn = columns.find((col) => col.id === overId) ?? findColumn(overId);
+      if (!activeColumn || !overColumn || activeColumn.id !== overColumn.id) return;
+
+      const activeIndex = activeColumn.cards.findIndex((c) => c.id === activeId);
+      const rawOverIndex = overColumn.cards.findIndex((c) => c.id === overId);
+      const overIndex = rawOverIndex >= 0 ? rawOverIndex : overColumn.cards.length - 1;
+      if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) return;
+
+      onColumnsChange(
+        columns.map((col) =>
+          col.id === activeColumn.id ? { ...col, cards: arrayMove(col.cards, activeIndex, overIndex) } : col,
+        ),
+      );
+    }
+
+    return (
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetectionStrategy}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={() => {
+          setActiveCard(null);
+          lastOverId.current = null;
+        }}
+      >
+        <div ref={ref} role="group" className={cn("flex items-start gap-4 overflow-x-auto font-sans", className)} {...props}>
+          {columns.map((column) => (
+            <KanbanColumnView key={column.id} column={column} />
+          ))}
+        </div>
+        <DragOverlay>{activeCard ? <KanbanCardView card={activeCard} /> : null}</DragOverlay>
+      </DndContext>
+    );
+  },
+);
+KanbanBoard.displayName = "KanbanBoard";
+
+function KanbanColumnView({ column }: { column: KanbanColumn }) {
+  const { setNodeRef } = useDroppable({ id: column.id });
+  return (
+    <div className="flex w-64 shrink-0 flex-col gap-2 rounded-md border bg-muted/30 p-2">
+      <div className="flex items-center justify-between px-1 py-1">
+        <span className="text-sm font-medium text-foreground">{column.title}</span>
+        <span className="text-xs text-muted-foreground">{column.cards.length}</span>
+      </div>
+      <SortableContext items={column.cards.map((c) => c.id)} strategy={verticalListSortingStrategy}>
+        <div ref={setNodeRef} className="flex min-h-10 flex-col gap-2">
+          {column.cards.map((card) => (
+            <SortableKanbanCard key={card.id} card={card} />
+          ))}
+        </div>
+      </SortableContext>
+    </div>
+  );
+}
+
+function SortableKanbanCard({ card }: { card: KanbanCard }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: card.id });
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <KanbanCardView card={card} />
+    </div>
+  );
+}
+
+function KanbanCardView({ card }: { card: KanbanCard }) {
+  return (
+    <div className="cursor-grab touch-none rounded-md border bg-background p-3 text-sm text-foreground shadow-sm outline-none active:cursor-grabbing focus-visible:ring-1 focus-visible:ring-ring">
+      {card.content}
+    </div>
+  );
+}
+
+export { KanbanBoard };