@object-ui/plugin-kanban 3.0.2 → 3.1.0

package/src/useColumnWidths.ts

@@ -0,0 +1,125 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback, useMemo } from "react"
+import type { KanbanColumn, ColumnWidthConfig } from "./types"
+
+const STORAGE_KEY = "objectui:kanban-column-widths"
+
+export interface UseColumnWidthsOptions {
+  /** Columns on the board */
+  columns: KanbanColumn[]
+  /** Default width in pixels applied to every column */
+  defaultWidth?: number
+  /** Minimum allowed column width in pixels */
+  minWidth?: number
+  /** Maximum allowed column width in pixels */
+  maxWidth?: number
+  /** Optional persistence key suffix (to scope per-board) */
+  storageKey?: string
+}
+
+export interface UseColumnWidthsReturn {
+  /** Get the current width for a column (in px) */
+  getColumnWidth: (columnId: string) => number
+  /** Set an override width for a column */
+  setColumnWidth: (columnId: string, width: number) => void
+  /** Reset all overrides back to default widths */
+  resetWidths: () => void
+  /** The full config (useful for serialization) */
+  config: ColumnWidthConfig
+}
+
+function loadPersistedWidths(key: string): Record<string, number> {
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        return parsed as Record<string, number>
+      }
+    }
+  } catch {
+    /* ignore corrupt data */
+  }
+  return {}
+}
+
+function persistWidths(key: string, overrides: Record<string, number>) {
+  try {
+    localStorage.setItem(key, JSON.stringify(overrides))
+  } catch {
+    /* quota exceeded */
+  }
+}
+
+/**
+ * Hook for managing custom per-column widths with localStorage persistence.
+ * Supports per-column overrides clamped between minWidth and maxWidth.
+ */
+export function useColumnWidths({
+  columns: _columns,
+  defaultWidth = 320,
+  minWidth = 200,
+  maxWidth = 600,
+  storageKey,
+}: UseColumnWidthsOptions): UseColumnWidthsReturn {
+  const fullKey = storageKey ? `${STORAGE_KEY}:${storageKey}` : STORAGE_KEY
+
+  const [overrides, setOverrides] = useState<Record<string, number>>(() =>
+    loadPersistedWidths(fullKey),
+  )
+
+  const clamp = useCallback(
+    (value: number) => Math.max(minWidth, Math.min(maxWidth, value)),
+    [minWidth, maxWidth],
+  )
+
+  const getColumnWidth = useCallback(
+    (columnId: string): number => {
+      const override = overrides[columnId]
+      return override != null ? clamp(override) : defaultWidth
+    },
+    [overrides, defaultWidth, clamp],
+  )
+
+  const setColumnWidth = useCallback(
+    (columnId: string, width: number) => {
+      const clamped = clamp(width)
+      setOverrides(prev => {
+        const next = { ...prev, [columnId]: clamped }
+        persistWidths(fullKey, next)
+        return next
+      })
+    },
+    [clamp, fullKey],
+  )
+
+  const resetWidths = useCallback(() => {
+    setOverrides({})
+    try {
+      localStorage.removeItem(fullKey)
+    } catch {
+      /* ignore */
+    }
+  }, [fullKey])
+
+  const config: ColumnWidthConfig = useMemo(
+    () => ({
+      defaultWidth,
+      minWidth,
+      maxWidth,
+      overrides: { ...overrides },
+    }),
+    [defaultWidth, minWidth, maxWidth, overrides],
+  )
+
+  return { getColumnWidth, setColumnWidth, resetWidths, config }
+}
+
+export default useColumnWidths

package/src/useCrossSwimlaneMove.ts

@@ -0,0 +1,116 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback, useMemo } from "react"
+
+export interface Swimlane {
+  /** Unique identifier for the swimlane row */
+  id: string
+  /** Display label */
+  title: string
+  /** Optional list of swimlane IDs this lane accepts cards from. Omit for unrestricted. */
+  acceptFrom?: string[]
+}
+
+export interface CrossSwimlaneMoveEvent {
+  cardId: string
+  fromSwimlane: string
+  toSwimlane: string
+  columnId: string
+}
+
+export interface UseCrossSwimlaneOptions {
+  /** Swimlane definitions */
+  swimlanes: Swimlane[]
+  /** Callback executed after a successful cross-swimlane move */
+  onCardMove?: (event: CrossSwimlaneMoveEvent) => void
+}
+
+export interface UseCrossSwimlaneMoveReturn {
+  /** Execute a cross-swimlane move. Returns true if the move was allowed. */
+  handleCrossSwimlaneMove: (
+    cardId: string,
+    fromSwimlane: string,
+    toSwimlane: string,
+    columnId: string,
+  ) => boolean
+  /** Whether a card is currently being dragged across swimlanes */
+  isDraggingAcrossSwimlanes: boolean
+  /** Start tracking a cross-swimlane drag */
+  startCrossSwimlaneDrag: (fromSwimlane: string) => void
+  /** End the cross-swimlane drag */
+  endCrossSwimlaneDrag: () => void
+  /** Check whether a card may be moved into the target swimlane */
+  canMoveTo: (fromSwimlane: string, toSwimlane: string) => boolean
+}
+
+/**
+ * Hook for managing cross-swimlane card movements.
+ * Validates movement constraints (acceptFrom rules) and tracks drag state.
+ */
+export function useCrossSwimlaneMove({
+  swimlanes,
+  onCardMove,
+}: UseCrossSwimlaneOptions): UseCrossSwimlaneMoveReturn {
+  const [dragSource, setDragSource] = useState<string | null>(null)
+
+  const swimlaneMap = useMemo(() => {
+    const map = new Map<string, Swimlane>()
+    for (const lane of swimlanes) {
+      map.set(lane.id, lane)
+    }
+    return map
+  }, [swimlanes])
+
+  const canMoveTo = useCallback(
+    (fromSwimlane: string, toSwimlane: string): boolean => {
+      if (fromSwimlane === toSwimlane) return true
+      const target = swimlaneMap.get(toSwimlane)
+      if (!target) return false
+      // When acceptFrom is not specified the lane is unrestricted
+      if (!target.acceptFrom) return true
+      return target.acceptFrom.includes(fromSwimlane)
+    },
+    [swimlaneMap],
+  )
+
+  const handleCrossSwimlaneMove = useCallback(
+    (
+      cardId: string,
+      fromSwimlane: string,
+      toSwimlane: string,
+      columnId: string,
+    ): boolean => {
+      if (!canMoveTo(fromSwimlane, toSwimlane)) return false
+      onCardMove?.({ cardId, fromSwimlane, toSwimlane, columnId })
+      setDragSource(null)
+      return true
+    },
+    [canMoveTo, onCardMove],
+  )
+
+  const startCrossSwimlaneDrag = useCallback((fromSwimlane: string) => {
+    setDragSource(fromSwimlane)
+  }, [])
+
+  const endCrossSwimlaneDrag = useCallback(() => {
+    setDragSource(null)
+  }, [])
+
+  const isDraggingAcrossSwimlanes = dragSource !== null
+
+  return {
+    handleCrossSwimlaneMove,
+    isDraggingAcrossSwimlanes,
+    startCrossSwimlaneDrag,
+    endCrossSwimlaneDrag,
+    canMoveTo,
+  }
+}
+
+export default useCrossSwimlaneMove

package/src/useQuickAddReorder.ts

@@ -0,0 +1,107 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useState, useCallback } from "react"
+import type { KanbanCard } from "./types"
+
+export interface UseQuickAddReorderOptions {
+  /** Initial set of cards in the column */
+  cards: KanbanCard[]
+  /** Called when the user finishes reordering */
+  onReorderComplete?: (reorderedCards: KanbanCard[]) => void
+}
+
+export interface UseQuickAddReorderReturn {
+  /** Cards in their current (possibly reordered) order */
+  reorderedCards: KanbanCard[]
+  /** Move a card from one index to another within the list */
+  onReorder: (fromIndex: number, toIndex: number) => void
+  /** Whether a card is currently being dragged for reorder */
+  isDragging: boolean
+  /** Signal the start of a drag-to-reorder interaction */
+  startDrag: () => void
+  /** Signal the end of a drag-to-reorder interaction */
+  endDrag: () => void
+  /** Reset reordered state back to the source cards */
+  reset: () => void
+}
+
+/**
+ * Hook for drag-to-reorder of quick-add cards within a single column.
+ * Manages local ordering state and exposes drag lifecycle helpers.
+ */
+export function useQuickAddReorder({
+  cards,
+  onReorderComplete,
+}: UseQuickAddReorderOptions): UseQuickAddReorderReturn {
+  const [reorderedCards, setReorderedCards] = useState<KanbanCard[]>(cards)
+  const [isDragging, setIsDragging] = useState(false)
+
+  // Keep reorderedCards in sync when the source cards change externally
+  // (e.g. when a new card is added via quick-add)
+  if (!cardsMatch(reorderedCards, cards) && !isDragging) {
+    setReorderedCards(cards)
+  }
+
+  const reset = useCallback(() => {
+    setReorderedCards(cards)
+    setIsDragging(false)
+  }, [cards])
+
+  const onReorder = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      setReorderedCards(prev => {
+        if (
+          fromIndex < 0 ||
+          toIndex < 0 ||
+          fromIndex >= prev.length ||
+          toIndex >= prev.length
+        ) {
+          return prev
+        }
+        const next = [...prev]
+        const [moved] = next.splice(fromIndex, 1)
+        next.splice(toIndex, 0, moved)
+        return next
+      })
+    },
+    [],
+  )
+
+  const startDrag = useCallback(() => {
+    setIsDragging(true)
+  }, [])
+
+  const endDrag = useCallback(() => {
+    setIsDragging(false)
+    setReorderedCards(current => {
+      onReorderComplete?.(current)
+      return current
+    })
+  }, [onReorderComplete])
+
+  return {
+    reorderedCards,
+    onReorder,
+    isDragging,
+    startDrag,
+    endDrag,
+    reset,
+  }
+}
+
+/** Shallow check that two card arrays contain the same IDs in the same order. */
+function cardsMatch(a: KanbanCard[], b: KanbanCard[]): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].id !== b[i].id) return false
+  }
+  return true
+}
+
+export default useQuickAddReorder

package/dist/KanbanImpl-BfOKAnJS.js

@@ -1,194 +0,0 @@
-import { j as e } from "./index-CWGTi2xn.js";
-import * as h from "react";
-import { u as H, a as B, D as L, c as q, b as z, d as G, T as J, P as M, e as E, S as Q, v as U, C as V } from "./sortable.esm-CNNHgHk5.js";
-import { Badge as K, ScrollArea as W, Card as X, CardHeader as Y, CardTitle as Z, CardDescription as _, CardContent as ee } from "@object-ui/components";
-import { useHasDndProvider as se, useDnd as re } from "@object-ui/react";
-const R = (...s) => s.filter(Boolean).join(" ");
-function T({ card: s, onCardClick: i }) {
-  const {
-    attributes: x,
-    listeners: n,
-    setNodeRef: t,
-    transform: d,
-    transition: c,
-    isDragging: C
-  } = E({ id: s.id }), o = {
-    transform: V.Transform.toString(d),
-    transition: c,
-    opacity: C ? 0.5 : void 0
-  };
-  return /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      ref: t,
-      style: o,
-      ...x,
-      ...n,
-      role: "listitem",
-      "aria-label": s.title,
-      onClick: () => i?.(s),
-      children: /* @__PURE__ */ e.jsxs(X, { className: "mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group touch-manipulation", children: [
-        /* @__PURE__ */ e.jsxs(Y, { className: "p-2 sm:p-4", children: [
-          /* @__PURE__ */ e.jsx(Z, { className: "text-xs sm:text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors", children: s.title }),
-          s.description && /* @__PURE__ */ e.jsx(_, { className: "text-xs text-muted-foreground font-mono line-clamp-2 sm:line-clamp-none", children: s.description })
-        ] }),
-        s.badges && s.badges.length > 0 && /* @__PURE__ */ e.jsx(ee, { className: "p-2 sm:p-4 pt-0", children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1", children: s.badges.map((b, S) => /* @__PURE__ */ e.jsx(K, { variant: b.variant || "default", className: "text-xs", children: b.label }, S)) }) })
-      ] })
-    }
-  );
-}
-function te({
-  column: s,
-  cards: i,
-  onCardClick: x
-}) {
-  const n = i || [], { setNodeRef: t } = E({
-    id: s.id,
-    data: {
-      type: "column"
-    }
-  }), d = s.limit && n.length >= s.limit;
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      ref: t,
-      role: "group",
-      "aria-label": s.title,
-      className: R(
-        "flex flex-col w-[85vw] sm:w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl snap-start",
-        s.className
-      ),
-      children: [
-        /* @__PURE__ */ e.jsx("div", { className: "p-3 sm:p-4 border-b border-border/50 bg-muted/20", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ e.jsx("h3", { id: `kanban-col-${s.id}`, className: "font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate", children: s.title }),
-          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e.jsxs("span", { className: "font-mono text-xs text-muted-foreground", "aria-label": `${n.length} cards${s.limit ? ` of ${s.limit} maximum` : ""}`, children: [
-              n.length,
-              s.limit && ` / ${s.limit}`
-            ] }),
-            d && /* @__PURE__ */ e.jsx(K, { variant: "destructive", className: "text-xs", children: "Full" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ e.jsx(W, { className: "flex-1 p-4", children: /* @__PURE__ */ e.jsx(
-          Q,
-          {
-            items: n.map((c) => c.id),
-            strategy: U,
-            children: /* @__PURE__ */ e.jsx("div", { className: "space-y-2", role: "list", "aria-label": `${s.title} cards`, children: n.map((c) => /* @__PURE__ */ e.jsx(T, { card: c, onCardClick: x }, c.id)) })
-          }
-        ) })
-      ]
-    }
-  );
-}
-function ae({ children: s }) {
-  const i = re();
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: s(i) });
-}
-function le({ columns: s, onCardMove: i, onCardClick: x, className: n }) {
-  return se() ? /* @__PURE__ */ e.jsx(ae, { children: (d) => /* @__PURE__ */ e.jsx($, { columns: s, onCardMove: i, onCardClick: x, className: n, dnd: d }) }) : /* @__PURE__ */ e.jsx($, { columns: s, onCardMove: i, onCardClick: x, className: n, dnd: null });
-}
-function $({ columns: s, onCardMove: i, onCardClick: x, className: n, dnd: t }) {
-  const [d, c] = h.useState(null), C = h.useMemo(() => (s || []).map((r) => ({
-    ...r,
-    cards: r.cards || []
-  })), [s]), [o, b] = h.useState(C);
-  h.useEffect(() => {
-    b(C);
-  }, [C]);
-  const S = H(
-    B(M, {
-      activationConstraint: {
-        distance: 5
-      }
-    }),
-    B(J, {
-      activationConstraint: {
-        delay: 200,
-        tolerance: 5
-      }
-    })
-  ), O = (r) => {
-    const { active: m } = r, a = A(m.id);
-    if (c(a), t && a) {
-      const l = w(a.id);
-      l && t.startDrag({ id: a.id, type: "kanban-card", data: a, sourceId: l.id });
-    }
-  }, P = (r) => {
-    const { active: m, over: a } = r;
-    if (c(null), !a) {
-      t && t.endDrag();
-      return;
-    }
-    const l = m.id, v = a.id;
-    if (l === v) {
-      t && t.endDrag();
-      return;
-    }
-    const u = w(l), p = w(v) || F(v);
-    if (!u || !p) {
-      t && t.endDrag();
-      return;
-    }
-    if (u.id === p.id) {
-      const g = [...u.cards], j = g.findIndex((f) => f.id === l), I = g.findIndex((f) => f.id === v), k = G(g, j, I);
-      b(
-        (f) => f.map(
-          (D) => D.id === u.id ? { ...D, cards: k } : D
-        )
-      );
-    } else {
-      const g = [...u.cards], j = [...p.cards], I = g.findIndex((N) => N.id === l), f = v === p.id ? j.length : j.findIndex((N) => N.id === v), [D] = g.splice(I, 1);
-      j.splice(f, 0, D), b(
-        (N) => N.map((y) => y.id === u.id ? { ...y, cards: g } : y.id === p.id ? { ...y, cards: j } : y)
-      ), i && i(l, u.id, p.id, f);
-    }
-    t && t.endDrag(p.id);
-  }, A = h.useCallback(
-    (r) => {
-      for (const m of o) {
-        const a = m.cards.find((l) => l.id === r);
-        if (a) return a;
-      }
-      return null;
-    },
-    [o]
-  ), w = h.useCallback(
-    (r) => o.find((m) => m.cards.some((a) => a.id === r)) || null,
-    [o]
-  ), F = h.useCallback(
-    (r) => o.find((m) => m.id === r) || null,
-    [o]
-  );
-  return /* @__PURE__ */ e.jsxs(
-    L,
-    {
-      sensors: S,
-      collisionDetection: q,
-      onDragStart: O,
-      onDragEnd: P,
-      children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex sm:hidden items-center justify-between px-3 pb-2 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ e.jsxs("span", { children: [
-            o.length,
-            " columns"
-          ] }),
-          /* @__PURE__ */ e.jsx("span", { children: "← Swipe to navigate →" })
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: R("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 [-webkit-overflow-scrolling:touch]", n), role: "region", "aria-label": "Kanban board", children: o.map((r) => /* @__PURE__ */ e.jsx(
-          te,
-          {
-            column: r,
-            cards: r.cards,
-            onCardClick: x
-          },
-          r.id
-        )) }),
-        /* @__PURE__ */ e.jsx(z, { children: /* @__PURE__ */ e.jsx("div", { "aria-live": "assertive", "aria-label": d ? `Dragging ${d.title}` : void 0, children: d ? /* @__PURE__ */ e.jsx(T, { card: d }) : null }) })
-      ]
-    }
-  );
-}
-export {
-  le as default
-};