@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-X7NF2HZV.mjs

@@ -0,0 +1,551 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/TaskBoard.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getTaskBoardLabels,
+  mergeTigerLocale,
+  resolveLocaleText,
+  taskBoardBaseClasses,
+  taskBoardColumnClasses,
+  taskBoardColumnHeaderClasses,
+  taskBoardColumnBodyClasses,
+  taskBoardCardClasses,
+  taskBoardCardDraggingClasses,
+  taskBoardDropIndicatorClasses,
+  taskBoardColumnDropTargetClasses,
+  taskBoardColumnDraggingClasses,
+  taskBoardEmptyClasses,
+  taskBoardWipExceededClasses,
+  taskBoardAddCardClasses,
+  kanbanCardCountClasses,
+  kanbanSwimlaneClasses,
+  kanbanSwimlaneHeaderClasses,
+  kanbanSwimlaneDotClasses,
+  kanbanAddColumnClasses,
+  kanbanFilterHighlightClasses,
+  getColumnCardCount,
+  moveCard,
+  reorderColumns,
+  isWipExceeded,
+  appendDefaultTaskBoardCard,
+  appendDefaultTaskBoardColumn,
+  createTaskBoardDragController,
+  createDefaultDragSnapshot,
+  resolveTaskBoardView
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function cardMatchesFilter(card, filterText) {
+  if (!filterText.trim()) return false;
+  const lower = filterText.toLowerCase();
+  return (card.title ?? "").toLowerCase().includes(lower) || (card.description ?? "").toLowerCase().includes(lower);
+}
+var CardItem = ({
+  card,
+  column,
+  isDragging,
+  isKbGrabbed,
+  draggable,
+  dragHintText,
+  filterHit,
+  renderCard,
+  dragCtrl
+}) => {
+  const cardClasses = classNames(
+    taskBoardCardClasses,
+    isDragging && taskBoardCardDraggingClasses,
+    filterHit && kanbanFilterHighlightClasses,
+    isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)] ring-offset-2 shadow-[0_0_12px_rgba(37,99,235,0.25)]"
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cardClasses,
+      draggable,
+      tabIndex: 0,
+      role: "listitem",
+      title: dragHintText,
+      "data-tiger-taskboard-card": "",
+      "data-tiger-taskboard-card-id": String(card.id),
+      onDragStart: (e) => {
+        if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+      },
+      onDragEnd: () => dragCtrl.dragEnd(),
+      onTouchStart: (e) => dragCtrl.cardTouchStart(e.nativeEvent, e.currentTarget, card, column),
+      onTouchMove: (e) => dragCtrl.cardTouchMove(e.nativeEvent),
+      onTouchEnd: () => dragCtrl.cardTouchEnd(),
+      onKeyDown: (e) => {
+        if (dragCtrl.cardKeyDown(e.key, card, column)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-[var(--tiger-text,#1f2937)]", children: card.title }),
+        card.description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2", children: card.description })
+      ] })
+    }
+  );
+};
+var ColumnItem = ({
+  viewColumn,
+  isDropTarget,
+  isColDragging,
+  dropIdx,
+  draggable,
+  columnDraggable,
+  labels,
+  filterText,
+  renderCardProp,
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  onCardAdd,
+  addDisabled,
+  dragType,
+  dragCtrl,
+  dragStateId,
+  kbDragStateId,
+  showCardCount,
+  onToggleSwimlane
+}) => {
+  const column = viewColumn.source;
+  const wipOver = isWipExceeded(column);
+  const cardCount = getColumnCardCount(column);
+  const colClasses = classNames(
+    taskBoardColumnClasses,
+    isDropTarget && taskBoardColumnDropTargetClasses,
+    isColDragging && taskBoardColumnDraggingClasses
+  );
+  const renderCardNode = (card, visibleIndex) => {
+    const nodes = [];
+    if (isDropTarget && dropIdx === visibleIndex) {
+      nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, `drop-${visibleIndex}`));
+    }
+    nodes.push(
+      /* @__PURE__ */ jsx(
+        CardItem,
+        {
+          card,
+          column,
+          isDragging: dragStateId === card.id,
+          isKbGrabbed: kbDragStateId === card.id,
+          draggable,
+          dragHintText: labels.dragHintText,
+          filterHit: cardMatchesFilter(card, filterText),
+          renderCard: renderCardProp,
+          dragCtrl
+        },
+        String(card.id)
+      )
+    );
+    return nodes;
+  };
+  let cardsContent;
+  if (viewColumn.groups && viewColumn.groups.length > 0) {
+    let offset = 0;
+    const nodes = viewColumn.groups.map((group) => {
+      const prefix = offset;
+      if (!group.swimlane.collapsed) offset += group.cards.length;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: kanbanSwimlaneClasses,
+          "data-tiger-kanban-swimlane": "",
+          "data-tiger-kanban-swimlane-id": String(group.swimlane.id),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: kanbanSwimlaneHeaderClasses,
+                "aria-expanded": !group.swimlane.collapsed,
+                onClick: () => onToggleSwimlane(group.swimlane.id, !group.swimlane.collapsed),
+                children: [
+                  group.swimlane.color && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: kanbanSwimlaneDotClasses,
+                      style: { backgroundColor: group.swimlane.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: group.swimlane.label }),
+                  /* @__PURE__ */ jsx("span", { className: "ms-auto text-xs text-[var(--tiger-text-muted,#6b7280)]", children: group.cards.length })
+                ]
+              }
+            ),
+            !group.swimlane.collapsed && group.cards.flatMap((card, i) => renderCardNode(card, prefix + i))
+          ]
+        },
+        String(group.swimlane.id)
+      );
+    });
+    if (isDropTarget && dropIdx >= viewColumn.visibleCards.length) {
+      nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-end"));
+    }
+    cardsContent = nodes;
+  } else if (viewColumn.visibleCards.length > 0) {
+    const nodes = viewColumn.visibleCards.flatMap(
+      (card, i) => renderCardNode(card, i)
+    );
+    if (isDropTarget && dropIdx >= viewColumn.visibleCards.length) {
+      nodes.push(/* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-end"));
+    }
+    cardsContent = nodes;
+  } else {
+    cardsContent = isDropTarget ? /* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }, "drop-empty") : renderEmptyColumn ? renderEmptyColumn(column) : /* @__PURE__ */ jsx("div", { className: taskBoardEmptyClasses, children: resolveLocaleText(labels.emptyColumnText) });
+  }
+  const wipTitle = column.wipLimit != null ? resolveLocaleText(labels.wipLimitText.replace("{limit}", String(column.wipLimit))) : void 0;
+  const countLabel = cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: colClasses,
+      "data-tiger-taskboard-column": "",
+      "data-tiger-taskboard-column-id": String(column.id),
+      onDragOver: dragType === "column" ? (e) => {
+        e.preventDefault();
+        dragCtrl.columnDragOver();
+      } : void 0,
+      onDrop: dragType === "column" ? (e) => {
+        e.preventDefault();
+        if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: taskBoardColumnHeaderClasses,
+            draggable: columnDraggable,
+            tabIndex: columnDraggable ? 0 : void 0,
+            onDragStart: (e) => {
+              if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column);
+            },
+            onDragEnd: () => dragCtrl.dragEnd(),
+            onTouchStart: (e) => dragCtrl.columnTouchStart(e.nativeEvent, e.currentTarget, column),
+            onTouchMove: (e) => dragCtrl.columnTouchMove(e.nativeEvent),
+            onTouchEnd: () => dragCtrl.columnTouchEnd(),
+            onKeyDown: (e) => {
+              if (dragCtrl.columnKeyDown(e.key, column)) e.preventDefault();
+            },
+            style: columnDraggable ? { cursor: "grab" } : void 0,
+            children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { className: wipOver ? taskBoardWipExceededClasses : void 0, children: [
+                column.title,
+                !showCardCount && cardCount.limit != null ? /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: classNames(
+                      "ms-2 text-xs font-normal transition-all duration-200 px-1.5 py-0.5 rounded",
+                      wipOver ? "bg-red-50 dark:bg-red-950/30 text-[var(--tiger-error,#ef4444)] font-semibold border border-red-200/30 dark:border-red-900/30 shadow-xs" : "opacity-70 bg-[var(--tiger-border,#e5e7eb)]/20 text-[var(--tiger-text-secondary,#6b7280)]"
+                    ),
+                    title: wipTitle,
+                    children: [
+                      "(",
+                      countLabel,
+                      ")"
+                    ]
+                  }
+                ) : null
+              ] }),
+              showCardCount ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    kanbanCardCountClasses,
+                    wipOver && `${taskBoardWipExceededClasses} bg-red-50 dark:bg-red-950/30 border border-red-200/50 dark:border-red-900/30 font-semibold shadow-xs`
+                  ),
+                  title: wipTitle,
+                  children: countLabel
+                }
+              ) : null,
+              column.description && /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]", children: column.description })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: taskBoardColumnBodyClasses,
+            role: "list",
+            "aria-label": column.title,
+            tabIndex: viewColumn.visibleCards.length === 0 ? 0 : void 0,
+            onDragOver: (e) => {
+              e.preventDefault();
+              dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+            },
+            onDragLeave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget),
+            onKeyDown: (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (dragCtrl.columnBodyKeyDown(e.key, column)) e.preventDefault();
+            },
+            children: cardsContent
+          }
+        ),
+        renderColumnFooter ? renderColumnFooter(column) : onCardAdd ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: classNames(
+              "border-t border-[var(--tiger-border,#e5e7eb)]",
+              taskBoardAddCardClasses
+            ),
+            disabled: addDisabled,
+            onClick: () => onCardAdd(column.id),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "+" }),
+              /* @__PURE__ */ jsx("span", { children: resolveLocaleText(labels.addCardText) })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var TaskBoard = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  filterText = "",
+  hiddenColumns,
+  showCardCount = false,
+  allowAddCard = false,
+  allowAddColumn = false,
+  onColumnAdd,
+  renderCard: renderCardProp,
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  swimlanes,
+  swimlaneField,
+  onSwimlaneCollapse,
+  locale,
+  labels: labelsOverride,
+  className,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getTaskBoardLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const [currentColumns, setCurrentColumns] = useControlledState({
+    value: controlledColumns,
+    defaultValue: defaultColumns,
+    onChange: onColumnsChange
+  });
+  const [collapsedOverride, setCollapsedOverride] = useState({});
+  const view = useMemo(
+    () => resolveTaskBoardView({
+      columns: currentColumns,
+      filterText,
+      hiddenColumns,
+      swimlanes,
+      swimlaneField,
+      unassignedLabel: labels.unassignedSwimlaneText,
+      collapsedLaneState: collapsedOverride
+    }),
+    [
+      currentColumns,
+      filterText,
+      hiddenColumns,
+      swimlanes,
+      swimlaneField,
+      collapsedOverride,
+      labels.unassignedSwimlaneText
+    ]
+  );
+  const columnsRef = useRef(currentColumns);
+  columnsRef.current = currentColumns;
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const dirRef = useRef(dir);
+  dirRef.current = dir;
+  const consumerOnCardAdd = onCardAdd;
+  const showAddCard = Boolean(allowAddCard || consumerOnCardAdd);
+  const handleCardAdd = useCallback(
+    (columnId) => {
+      if (consumerOnCardAdd == null) {
+        const col = columnsRef.current.find((item) => item.id === columnId);
+        if (enforceWipLimit && col && col.wipLimit != null && col.wipLimit > 0 && col.cards.length >= col.wipLimit) {
+          return;
+        }
+        setCurrentColumns(
+          appendDefaultTaskBoardCard(columnsRef.current, columnId, labels.newCardTitle)
+        );
+      }
+      consumerOnCardAdd?.(columnId);
+    },
+    [consumerOnCardAdd, enforceWipLimit, labels.newCardTitle, setCurrentColumns]
+  );
+  const handleColumnAdd = useCallback(() => {
+    if (onColumnAdd == null) {
+      setCurrentColumns(appendDefaultTaskBoardColumn(columnsRef.current, labels.newColumnTitle));
+    }
+    onColumnAdd?.();
+  }, [onColumnAdd, labels.newColumnTitle, setCurrentColumns]);
+  const handleToggleSwimlane = useCallback(
+    (laneId, collapsed) => {
+      if (onSwimlaneCollapse) {
+        onSwimlaneCollapse(laneId, collapsed);
+        return;
+      }
+      setCollapsedOverride((prev) => ({ ...prev, [String(laneId)]: collapsed }));
+    },
+    [onSwimlaneCollapse]
+  );
+  const [dragSnap, setDragSnap] = useState(createDefaultDragSnapshot);
+  const boardRef = useRef(null);
+  const beforeCardMoveRef = useRef(beforeCardMove);
+  beforeCardMoveRef.current = beforeCardMove;
+  const beforeColumnMoveRef = useRef(beforeColumnMove);
+  beforeColumnMoveRef.current = beforeColumnMove;
+  const onCardMoveRef = useRef(onCardMove);
+  onCardMoveRef.current = onCardMove;
+  const onColumnMoveRef = useRef(onColumnMove);
+  onColumnMoveRef.current = onColumnMove;
+  const enforceWipLimitRef = useRef(enforceWipLimit);
+  enforceWipLimitRef.current = enforceWipLimit;
+  const applyCardMove = useCallback(
+    async (cardId, fromColumnId, toColumnId, toIdx) => {
+      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+        enforceWipLimit: enforceWipLimitRef.current
+      });
+      if (!result) return;
+      if (beforeCardMoveRef.current) {
+        const ok = await beforeCardMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      setCurrentColumns(result.columns);
+      onCardMoveRef.current?.(result.event);
+    },
+    [setCurrentColumns]
+  );
+  const applyColumnMove = useCallback(
+    async (fromIdx, toIdx) => {
+      const result = reorderColumns(columnsRef.current, fromIdx, toIdx);
+      if (!result) return;
+      if (beforeColumnMoveRef.current) {
+        const ok = await beforeColumnMoveRef.current(result.event);
+        if (!ok) return;
+      }
+      setCurrentColumns(result.columns);
+      onColumnMoveRef.current?.(result.event);
+    },
+    [setCurrentColumns]
+  );
+  const applyCardMoveRef = useRef(applyCardMove);
+  applyCardMoveRef.current = applyCardMove;
+  const applyColumnMoveRef = useRef(applyColumnMove);
+  applyColumnMoveRef.current = applyColumnMove;
+  const dragCtrlRef = useRef(null);
+  if (!dragCtrlRef.current) {
+    dragCtrlRef.current = createTaskBoardDragController(
+      {
+        onStateChange: setDragSnap,
+        applyCardMove: (...args) => applyCardMoveRef.current(...args),
+        applyColumnMove: (...args) => applyColumnMoveRef.current(...args),
+        getBoardEl: () => boardRef.current,
+        getView: () => viewRef.current,
+        getSourceColumns: () => columnsRef.current,
+        getDir: () => dirRef.current
+      },
+      { draggable, columnDraggable }
+    );
+  }
+  const dragCtrl = dragCtrlRef.current;
+  useEffect(() => {
+    dragCtrl.setOptions({ draggable, columnDraggable });
+  }, [draggable, columnDraggable, dragCtrl]);
+  useEffect(() => {
+    dragCtrl.init();
+    return () => dragCtrl.dispose();
+  }, [dragCtrl]);
+  const wrapperClasses = useMemo(() => classNames(taskBoardBaseClasses, className), [className]);
+  const dragType = dragSnap.drag?.type ?? null;
+  const dragStateId = dragSnap.drag?.type === "card" ? dragSnap.drag.id : null;
+  const kbDragStateId = dragSnap.kbDrag?.id ?? null;
+  const kbGrabbing = dragSnap.kbDrag?.type === "card";
+  const liveMessage = dragSnap.kbDrag ? labels.dragHintText : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: boardRef,
+      className: wrapperClasses,
+      style,
+      role: "region",
+      "aria-label": resolveLocaleText(labels.boardAriaLabel),
+      "data-tiger-task-board": "",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", children: liveMessage }),
+        view.columns.map((viewColumn) => {
+          const col = viewColumn.source;
+          const isDropTarget = (dragSnap.drag?.type === "card" || kbGrabbing) && dragSnap.dropTargetColumnId === col.id;
+          const isColDragging = dragSnap.drag?.type === "column" && dragSnap.drag.id === col.id;
+          const atWip = enforceWipLimit && col.wipLimit != null && col.wipLimit > 0 && col.cards.length >= col.wipLimit;
+          return /* @__PURE__ */ jsx(
+            ColumnItem,
+            {
+              viewColumn,
+              isDropTarget: Boolean(isDropTarget),
+              isColDragging,
+              dropIdx: isDropTarget ? dragSnap.dropIndex : -1,
+              draggable,
+              columnDraggable,
+              labels,
+              filterText,
+              renderCardProp,
+              renderColumnHeader,
+              renderColumnFooter,
+              renderEmptyColumn,
+              onCardAdd: showAddCard ? handleCardAdd : void 0,
+              addDisabled: Boolean(atWip),
+              dragType,
+              dragCtrl,
+              dragStateId,
+              kbDragStateId,
+              showCardCount,
+              onToggleSwimlane: handleToggleSwimlane
+            },
+            String(col.id)
+          );
+        }),
+        allowAddColumn && /* @__PURE__ */ jsxs("button", { type: "button", className: kanbanAddColumnClasses, onClick: handleColumnAdd, children: [
+          "+ ",
+          resolveLocaleText(labels.addColumnText)
+        ] })
+      ]
+    }
+  );
+};
+var TaskBoard_default = TaskBoard;
+
+export {
+  TaskBoard,
+  TaskBoard_default
+};