@particle-academy/react-fancy 2.7.0 → 2.8.0

package/dist/index.js

@@ -11113,35 +11113,151 @@ var KanbanColumnContext = createContext("");
 function useKanbanColumn() {
   return useContext(KanbanColumnContext);
 }
+var DEFAULT_CARD_CLASSES = "rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900";
+function KanbanCard({ children, id, className, unstyled }) {
+  const { setDraggedCard, setDragSource } = useKanban();
+  const columnId = useKanbanColumn();
+  const handleDragStart = useCallback(() => {
+    setDraggedCard(id);
+    setDragSource(columnId);
+  }, [id, columnId, setDraggedCard, setDragSource]);
+  const handleDragEnd = useCallback(() => {
+    setDraggedCard(null);
+    setDragSource(null);
+  }, [setDraggedCard, setDragSource]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-kanban-card": "",
+      draggable: true,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      className: cn(
+        // Drag affordance — kept even when unstyled so users still see grab cursors.
+        "cursor-grab active:cursor-grabbing",
+        !unstyled && DEFAULT_CARD_CLASSES,
+        className
+      ),
+      children
+    }
+  );
+}
+KanbanCard.displayName = "KanbanCard";
 var DEFAULT_COLUMN_CLASSES = "min-h-[200px] w-72 rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50";
+function countCardChildren(children) {
+  let n = 0;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.type === KanbanCard) {
+      n += 1;
+      return;
+    }
+    if (child.type === Fragment$1) {
+      n += countCardChildren(child.props.children);
+    }
+  });
+  return n;
+}
 function KanbanColumn({
   children,
   id,
   title,
   className,
-  unstyled
+  unstyled,
+  wipLimit,
+  hideWhenEmpty
 }) {
-  const { onCardMove, draggedCard, dragSource } = useKanban();
+  const { onCardMove, draggedCard, dragSource, registerColumn } = useKanban();
   const [dragOver, setDragOver] = useState(false);
+  const [dropIndex, setDropIndex] = useState(null);
+  const cardsRef = useRef(null);
+  useEffect(() => registerColumn(id), [id, registerColumn]);
+  const updateDropIndex = useCallback((clientY) => {
+    const container = cardsRef.current;
+    if (!container) {
+      setDropIndex(null);
+      return;
+    }
+    const cards = container.querySelectorAll(
+      ":scope > [data-react-fancy-kanban-card]"
+    );
+    let idx = cards.length;
+    for (let i = 0; i < cards.length; i++) {
+      const rect = cards[i].getBoundingClientRect();
+      if (clientY < rect.top + rect.height / 2) {
+        idx = i;
+        break;
+      }
+    }
+    setDropIndex(idx);
+  }, []);
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!draggedCard) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(true);
+      updateDropIndex(e.clientY);
+    },
+    [draggedCard, updateDropIndex]
+  );
+  const handleDragLeave = useCallback((e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setDragOver(false);
+    setDropIndex(null);
+  }, []);
   const handleDrop = useCallback(
     (e) => {
+      if (!draggedCard) return;
       e.preventDefault();
-      setDragOver(false);
-      if (draggedCard && dragSource && dragSource !== id) {
-        onCardMove?.(draggedCard, dragSource, id);
+      e.stopPropagation();
+      const target = dropIndex ?? 0;
+      if (dragSource && draggedCard) {
+        let finalIdx = target;
+        if (dragSource === id) {
+          const srcIdx = findCardIndex(children, draggedCard);
+          if (srcIdx !== -1 && target > srcIdx) {
+            finalIdx = target - 1;
+          }
+          if (srcIdx === finalIdx) {
+            setDragOver(false);
+            setDropIndex(null);
+            return;
+          }
+        }
+        onCardMove?.(draggedCard, dragSource, id, finalIdx);
       }
+      setDragOver(false);
+      setDropIndex(null);
     },
-    [draggedCard, dragSource, id, onCardMove]
+    [draggedCard, dragSource, dropIndex, id, onCardMove, children]
   );
-  const handleDragOver = useCallback((e) => {
-    e.preventDefault();
-    setDragOver(true);
-  }, []);
-  const handleDragLeave = useCallback(() => setDragOver(false), []);
+  const cardCount = countCardChildren(children);
+  if (hideWhenEmpty && cardCount === 0 && !draggedCard) {
+    return null;
+  }
+  let cardSeen = 0;
+  const showIndicator = draggedCard !== null && dropIndex !== null && dragOver;
+  const renderedChildren = Children.toArray(children).map((child, i) => {
+    const isCard = isValidElement(child) && child.type === KanbanCard;
+    const indicator = showIndicator && isCard && cardSeen === dropIndex ? /* @__PURE__ */ jsx(DropIndicator, {}, `drop-${i}`) : null;
+    if (isCard) cardSeen += 1;
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      indicator,
+      child
+    ] }, i);
+  });
+  if (showIndicator && dropIndex === cardCount) {
+    renderedChildren.push(/* @__PURE__ */ jsx(DropIndicator, {}, "drop-end"));
+  }
+  const overWip = wipLimit !== void 0 && cardCount > wipLimit;
   return /* @__PURE__ */ jsx(KanbanColumnContext.Provider, { value: id, children: /* @__PURE__ */ jsxs(
     "div",
     {
       "data-react-fancy-kanban-column": "",
+      "data-column-id": id,
+      role: "group",
+      "aria-label": title,
       onDrop: handleDrop,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
@@ -11152,55 +11268,181 @@ function KanbanColumn({
         className
       ),
       children: [
-        title && /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold text-zinc-600 dark:text-zinc-400", children: title }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children })
+        title && /* @__PURE__ */ jsxs("h3", { className: "mb-3 flex items-center gap-2 text-sm font-semibold text-zinc-600 dark:text-zinc-400", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-1.5 py-0.5 text-[10px] font-semibold",
+                overWip ? "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300" : "bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300"
+              ),
+              children: [
+                cardCount,
+                wipLimit !== void 0 ? `/${wipLimit}` : ""
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: cardsRef, className: "flex flex-1 flex-col gap-2", children: renderedChildren })
       ]
     }
   ) });
 }
 KanbanColumn.displayName = "KanbanColumn";
-var DEFAULT_CARD_CLASSES = "rounded-lg border border-zinc-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900";
-function KanbanCard({ children, id, className, unstyled }) {
-  const { setDraggedCard, setDragSource } = useKanban();
+function DropIndicator() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-kanban-drop-indicator": "",
+      className: "h-0.5 -my-1 rounded-full bg-blue-500/80"
+    }
+  );
+}
+function findCardIndex(children, cardId) {
+  let idx = -1;
+  let i = 0;
+  Children.forEach(children, (child) => {
+    if (idx !== -1) return;
+    if (!isValidElement(child)) return;
+    if (child.type === KanbanCard) {
+      if (child.props.id === cardId) {
+        idx = i;
+      }
+      i += 1;
+    }
+  });
+  return idx;
+}
+function KanbanColumnHandle({
+  children,
+  className
+}) {
+  const { setDraggedColumn } = useKanban();
   const columnId = useKanbanColumn();
-  const handleDragStart = useCallback(() => {
-    setDraggedCard(id);
-    setDragSource(columnId);
-  }, [id, columnId, setDraggedCard, setDragSource]);
+  const handleDragStart = useCallback(
+    (e) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", columnId);
+      e.stopPropagation();
+      setDraggedColumn(columnId);
+    },
+    [columnId, setDraggedColumn]
+  );
   const handleDragEnd = useCallback(() => {
-    setDraggedCard(null);
-    setDragSource(null);
-  }, [setDraggedCard, setDragSource]);
+    setDraggedColumn(null);
+  }, [setDraggedColumn]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-react-fancy-kanban-card": "",
       draggable: true,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
+      "data-react-fancy-kanban-column-handle": "",
       className: cn(
-        // Drag affordance — kept even when unstyled so users still see grab cursors.
-        "cursor-grab active:cursor-grabbing",
-        !unstyled && DEFAULT_CARD_CLASSES,
+        "cursor-grab active:cursor-grabbing select-none",
         className
       ),
       children
     }
   );
 }
-KanbanCard.displayName = "KanbanCard";
-function KanbanRoot({ children, onCardMove, className }) {
+KanbanColumnHandle.displayName = "KanbanColumnHandle";
+function KanbanRoot({
+  children,
+  onCardMove,
+  onColumnMove,
+  className
+}) {
   const [draggedCard, setDraggedCard] = useState(null);
   const [dragSource, setDragSource] = useState(null);
+  const [draggedColumn, setDraggedColumn] = useState(null);
+  const orderRef = useRef([]);
+  const [columnIds, setColumnIds] = useState([]);
+  const registerColumn = useCallback((id) => {
+    if (!orderRef.current.includes(id)) {
+      orderRef.current = [...orderRef.current, id];
+      setColumnIds(orderRef.current);
+    }
+    return () => {
+      orderRef.current = orderRef.current.filter((x) => x !== id);
+      setColumnIds(orderRef.current);
+    };
+  }, []);
   const ctx = useMemo(
-    () => ({ onCardMove, draggedCard, setDraggedCard, dragSource, setDragSource }),
-    [onCardMove, draggedCard, dragSource]
+    () => ({
+      draggedCard,
+      setDraggedCard,
+      dragSource,
+      setDragSource,
+      draggedColumn,
+      setDraggedColumn,
+      onCardMove,
+      onColumnMove,
+      columnIds,
+      registerColumn
+    }),
+    [
+      draggedCard,
+      dragSource,
+      draggedColumn,
+      onCardMove,
+      onColumnMove,
+      columnIds,
+      registerColumn
+    ]
+  );
+  const containerRef = useRef(null);
+  const handleDragOver = useCallback(
+    (e) => {
+      if (!draggedColumn) return;
+      e.preventDefault();
+    },
+    [draggedColumn]
   );
-  return /* @__PURE__ */ jsx(KanbanContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { "data-react-fancy-kanban": "", className: cn("flex gap-4 overflow-x-auto p-4", className), children }) });
+  const handleDrop = useCallback(
+    (e) => {
+      if (!draggedColumn || !containerRef.current) return;
+      e.preventDefault();
+      const cols = containerRef.current.querySelectorAll(
+        "[data-react-fancy-kanban-column]"
+      );
+      const x = e.clientX;
+      let dropIdx = cols.length;
+      for (let i = 0; i < cols.length; i++) {
+        const rect = cols[i].getBoundingClientRect();
+        if (x < rect.left + rect.width / 2) {
+          dropIdx = i;
+          break;
+        }
+      }
+      const sourceIdx = columnIds.indexOf(draggedColumn);
+      const finalIdx = sourceIdx >= 0 && dropIdx > sourceIdx ? dropIdx - 1 : dropIdx;
+      if (finalIdx !== sourceIdx) {
+        onColumnMove?.(draggedColumn, finalIdx);
+      }
+      setDraggedColumn(null);
+    },
+    [draggedColumn, columnIds, onColumnMove]
+  );
+  return /* @__PURE__ */ jsx(KanbanContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-react-fancy-kanban": "",
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      role: "application",
+      "aria-roledescription": "kanban board",
+      className: cn("flex gap-4 overflow-x-auto p-4", className),
+      children
+    }
+  ) });
 }
 var Kanban = Object.assign(KanbanRoot, {
   Column: KanbanColumn,
-  Card: KanbanCard
+  Card: KanbanCard,
+  ColumnHandle: KanbanColumnHandle
 });
 var CanvasContext = createContext(null);
 function useCanvas() {