@schandlergarcia/sf-web-components 2.4.0 → 2.5.0

package/src/components/library/cards/KanbanBoard.jsx

@@ -0,0 +1,507 @@
+import React, { useMemo, useState, useCallback } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  useDroppable,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import BaseCard from "./BaseCard";
+import UIText from "../ui/Text";
+import UIChip from "../ui/Chip";
+
+/**
+ * KanbanBoard
+ *
+ * A swim-lane / board view with structured cards and (optional) drag-and-drop
+ * powered by @dnd-kit. Designed to live inside a CommandCenter dashboard and
+ * to behave consistently with ListCard / TableCard.
+ *
+ * Data shapes:
+ *   columns: [{ id, title, accent?, limit?, footer?, emptyMessage? }]
+ *   cards:   [{ id, columnId, title, subtitle?, description?, badges?,
+ *               status?, avatar?, meta?, actions?, accent? }]
+ *
+ * Callbacks:
+ *   onCardClick(card)
+ *   onCardMove({ cardId, fromColumnId, toColumnId, fromIndex, toIndex })
+ */
+
+const ACCENT_RING = {
+  default: "ring-slate-200 dark:ring-slate-800",
+  primary: "ring-brand-500/40",
+  success: "ring-emerald-500/40",
+  warning: "ring-amber-500/40",
+  danger: "ring-rose-500/40",
+  info: "ring-sky-500/40",
+};
+
+const ACCENT_DOT = {
+  default: "bg-slate-400",
+  primary: "bg-brand-500",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-rose-500",
+  info: "bg-sky-500",
+};
+
+const ACCENT_BORDER_LEFT = {
+  default: "border-l-slate-300 dark:border-l-slate-700",
+  primary: "border-l-brand-500",
+  success: "border-l-emerald-500",
+  warning: "border-l-amber-500",
+  danger: "border-l-rose-500",
+  info: "border-l-sky-500",
+};
+
+function CardBadges({ badges }) {
+  if (!badges || badges.length === 0) return null;
+  return (
+    <div className="mt-2 flex flex-wrap gap-1.5">
+      {badges.map((b, i) => {
+        if (React.isValidElement(b)) return <span key={i}>{b}</span>;
+        if (typeof b === "string") {
+          return (
+            <UIChip key={i} size="sm" variant="default">
+              {b}
+            </UIChip>
+          );
+        }
+        return (
+          <UIChip
+            key={b.id ?? i}
+            size={b.size ?? "sm"}
+            variant={b.variant ?? "default"}
+            color={b.color}
+          >
+            {b.label ?? b.text}
+          </UIChip>
+        );
+      })}
+    </div>
+  );
+}
+
+function CardAvatar({ avatar, title }) {
+  if (!avatar) return null;
+  if (typeof avatar === "string") {
+    return (
+      <img
+        src={avatar}
+        alt=""
+        className="h-7 w-7 shrink-0 rounded-full border border-slate-200 object-cover dark:border-slate-800"
+      />
+    );
+  }
+  if (React.isValidElement(avatar)) {
+    return (
+      <div className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-800">
+        {avatar}
+      </div>
+    );
+  }
+  return (
+    <div className="grid h-7 w-7 shrink-0 place-items-center rounded-full border border-slate-200 bg-slate-100 text-[10px] font-semibold text-slate-700 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200">
+      {String(title ?? "??")
+        .slice(0, 2)
+        .toUpperCase()}
+    </div>
+  );
+}
+
+function KanbanCardBody({ card, accent, dragging, onClick, dense }) {
+  const accentBorder =
+    ACCENT_BORDER_LEFT[card?.accent ?? accent ?? "default"] ?? ACCENT_BORDER_LEFT.default;
+
+  const Comp = onClick ? "button" : "div";
+
+  return (
+    <Comp
+      type={onClick ? "button" : undefined}
+      onClick={onClick ? () => onClick(card) : undefined}
+      className={[
+        "group block w-full rounded-xl border bg-white text-left shadow-sm transition",
+        "border-slate-200 dark:border-slate-800 dark:bg-slate-900",
+        "border-l-4",
+        accentBorder,
+        dense ? "p-2.5" : "p-3",
+        dragging ? "opacity-60 ring-2 ring-brand-500" : "hover:-translate-y-[1px] hover:shadow-md",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="flex items-start gap-2">
+        <CardAvatar avatar={card.avatar} title={card.title} />
+        <div className="min-w-0 flex-1">
+          <UIText as="div" size="sm" weight="medium" className="truncate">
+            {card.title}
+          </UIText>
+          {card.subtitle ? (
+            <UIText as="div" size="xs" muted className="mt-0.5 truncate">
+              {card.subtitle}
+            </UIText>
+          ) : null}
+        </div>
+        {card.status ? (
+          <span
+            aria-label={String(card.status)}
+            className={[
+              "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+              ACCENT_DOT[card.status] ?? ACCENT_DOT.default,
+            ].join(" ")}
+          />
+        ) : null}
+      </div>
+
+      {card.description ? (
+        <UIText as="div" size="xs" muted className="mt-2 line-clamp-3 text-left">
+          {card.description}
+        </UIText>
+      ) : null}
+
+      <CardBadges badges={card.badges} />
+
+      {card.meta && card.meta.length > 0 ? (
+        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 dark:text-slate-400">
+          {card.meta.map((m, i) => {
+            if (React.isValidElement(m)) return <span key={i}>{m}</span>;
+            if (typeof m === "string") return <span key={i}>{m}</span>;
+            return (
+              <span key={m.id ?? i} className="inline-flex items-center gap-1">
+                {m.icon ? <span className="opacity-70">{m.icon}</span> : null}
+                <span>{m.label ?? m.text}</span>
+              </span>
+            );
+          })}
+        </div>
+      ) : null}
+
+      {card.actions ? (
+        <div
+          className="mt-2 flex justify-end gap-1.5"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {card.actions}
+        </div>
+      ) : null}
+    </Comp>
+  );
+}
+
+function SortableKanbanCard({ card, accent, onClick, isDraggable, dense }) {
+  const sortable = useSortable({
+    id: card.id,
+    data: { columnId: card.columnId, type: "card" },
+    disabled: !isDraggable,
+  });
+
+  const style = {
+    transform: CSS.Translate.toString(sortable.transform),
+    transition: sortable.transition,
+  };
+
+  return (
+    <div
+      ref={sortable.setNodeRef}
+      style={style}
+      {...(isDraggable ? sortable.attributes : {})}
+      {...(isDraggable ? sortable.listeners : {})}
+      className={isDraggable ? "touch-none" : undefined}
+    >
+      <KanbanCardBody
+        card={card}
+        accent={accent}
+        dragging={sortable.isDragging}
+        onClick={onClick}
+        dense={dense}
+      />
+    </div>
+  );
+}
+
+function KanbanColumn({
+  column,
+  cards,
+  accent,
+  onCardClick,
+  isDraggable,
+  dense,
+  showCounts,
+  showLimits,
+  emptyMessage,
+}) {
+  const droppable = useDroppable({
+    id: `column:${column.id}`,
+    data: { columnId: column.id, type: "column" },
+  });
+
+  const count = cards.length;
+  const overLimit = column.limit != null && count > column.limit;
+
+  return (
+    <div className="flex w-72 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/60">
+      <div className="flex items-center justify-between gap-2 border-b border-slate-200 px-3 py-2 dark:border-slate-800">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            aria-hidden
+            className={[
+              "h-2 w-2 shrink-0 rounded-full",
+              ACCENT_DOT[column.accent ?? accent ?? "default"] ?? ACCENT_DOT.default,
+            ].join(" ")}
+          />
+          <UIText as="div" size="sm" weight="medium" className="truncate">
+            {column.title}
+          </UIText>
+          {showCounts ? (
+            <UIChip
+              size="sm"
+              variant="default"
+              className={overLimit ? "ring-1 ring-rose-500" : undefined}
+            >
+              {showLimits && column.limit != null ? `${count} / ${column.limit}` : count}
+            </UIChip>
+          ) : null}
+        </div>
+        {column.actions ? <div className="shrink-0">{column.actions}</div> : null}
+      </div>
+
+      <div
+        ref={droppable.setNodeRef}
+        className={[
+          "flex flex-1 flex-col gap-2 overflow-y-auto p-2",
+          droppable.isOver ? "bg-brand-50/50 dark:bg-brand-950/30" : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{ minHeight: 80 }}
+      >
+        <SortableContext
+          items={cards.map((c) => c.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          {cards.length === 0 ? (
+            <div className="grid flex-1 place-items-center px-2 py-6">
+              <UIText as="div" size="xs" muted className="text-center">
+                {column.emptyMessage ?? emptyMessage ?? "No items"}
+              </UIText>
+            </div>
+          ) : (
+            cards.map((card) => (
+              <SortableKanbanCard
+                key={card.id}
+                card={card}
+                accent={accent}
+                onClick={onCardClick}
+                isDraggable={isDraggable}
+                dense={dense}
+              />
+            ))
+          )}
+        </SortableContext>
+      </div>
+
+      {column.footer ? (
+        <div className="border-t border-slate-200 px-3 py-2 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400">
+          {column.footer}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default function KanbanBoard({
+  columns = [],
+  cards = [],
+  title,
+  subtitle,
+  accent = "default",
+  isDraggable = true,
+  dense = false,
+  showColumnCounts = true,
+  showWipLimits = true,
+  emptyMessage = "No items",
+  loading = false,
+  error,
+  actions,
+  onCardClick,
+  onCardMove,
+  className = "",
+  ...cardProps
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const [internalCards, setInternalCards] = useState(null);
+
+  const liveCards = internalCards ?? cards;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const cardsByColumn = useMemo(() => {
+    const map = {};
+    for (const col of columns) map[col.id] = [];
+    for (const c of liveCards) {
+      const colId = c.columnId;
+      if (!map[colId]) map[colId] = [];
+      map[colId].push(c);
+    }
+    return map;
+  }, [columns, liveCards]);
+
+  const findColumnIdForCard = useCallback(
+    (cardId) => {
+      const card = liveCards.find((c) => c.id === cardId);
+      return card?.columnId ?? null;
+    },
+    [liveCards]
+  );
+
+  const resolveColumnId = useCallback(
+    (id) => {
+      if (!id) return null;
+      if (typeof id === "string" && id.startsWith("column:")) return id.slice("column:".length);
+      const card = liveCards.find((c) => c.id === id);
+      return card?.columnId ?? null;
+    },
+    [liveCards]
+  );
+
+  const handleDragStart = (event) => setActiveId(event.active.id);
+
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    const { active, over } = event;
+    if (!over) return;
+
+    const fromColumnId = findColumnIdForCard(active.id);
+    const toColumnId = resolveColumnId(over.id);
+    if (!fromColumnId || !toColumnId) return;
+
+    const fromList = (cardsByColumn[fromColumnId] ?? []).slice();
+    const toList =
+      fromColumnId === toColumnId ? fromList : (cardsByColumn[toColumnId] ?? []).slice();
+
+    const fromIndex = fromList.findIndex((c) => c.id === active.id);
+    let toIndex;
+
+    if (over.data?.current?.type === "column" || over.id === `column:${toColumnId}`) {
+      toIndex = toList.length;
+    } else {
+      toIndex = toList.findIndex((c) => c.id === over.id);
+      if (toIndex === -1) toIndex = toList.length;
+    }
+
+    if (fromColumnId === toColumnId && fromIndex === toIndex) return;
+
+    let nextCards;
+    if (fromColumnId === toColumnId) {
+      const reordered = arrayMove(fromList, fromIndex, toIndex);
+      const others = liveCards.filter((c) => c.columnId !== fromColumnId);
+      nextCards = [...others, ...reordered];
+    } else {
+      const moved = { ...fromList[fromIndex], columnId: toColumnId };
+      const newFrom = fromList.filter((c) => c.id !== active.id);
+      const newTo = toList.slice();
+      newTo.splice(toIndex, 0, moved);
+      const others = liveCards.filter(
+        (c) => c.columnId !== fromColumnId && c.columnId !== toColumnId
+      );
+      nextCards = [...others, ...newFrom, ...newTo];
+    }
+
+    if (onCardMove) {
+      onCardMove({
+        cardId: active.id,
+        fromColumnId,
+        toColumnId,
+        fromIndex,
+        toIndex,
+      });
+    } else {
+      setInternalCards(nextCards);
+    }
+  };
+
+  const activeCard = activeId ? liveCards.find((c) => c.id === activeId) : null;
+
+  const header =
+    title || subtitle || actions ? (
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          {title ? (
+            <UIText as="div" size="sm" weight="medium">
+              {title}
+            </UIText>
+          ) : null}
+          {subtitle ? (
+            <UIText as="div" size="xs" muted className="mt-1">
+              {subtitle}
+            </UIText>
+          ) : null}
+        </div>
+        {actions ? <div className="shrink-0">{actions}</div> : null}
+      </div>
+    ) : null;
+
+  const board = (
+    <div className="flex gap-3 overflow-x-auto pb-1">
+      {columns.map((col) => (
+        <KanbanColumn
+          key={col.id}
+          column={col}
+          cards={cardsByColumn[col.id] ?? []}
+          accent={accent}
+          onCardClick={onCardClick}
+          isDraggable={isDraggable}
+          dense={dense}
+          showCounts={showColumnCounts}
+          showLimits={showWipLimits}
+          emptyMessage={emptyMessage}
+        />
+      ))}
+    </div>
+  );
+
+  return (
+    <BaseCard
+      padding="default"
+      isLoading={loading}
+      className={className}
+      {...cardProps}
+    >
+      {header}
+      {error ? (
+        <div className="rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300">
+          {String(error)}
+        </div>
+      ) : (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragCancel={() => setActiveId(null)}
+        >
+          {board}
+          <DragOverlay>
+            {activeCard ? (
+              <KanbanCardBody card={activeCard} accent={accent} dragging dense={dense} />
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+      )}
+    </BaseCard>
+  );
+}

package/src/components/library/index.jsx

@@ -29,6 +29,7 @@ export { default as ActivityCard } from "./cards/ActivityCard";
 export { default as MetricsStrip } from "./cards/MetricsStrip";
 export { default as CalloutCard } from "./cards/CalloutCard";
 export { default as ActionList } from "./cards/ActionList";
+export { default as KanbanBoard } from "./cards/KanbanBoard";
 
 // Charts
 export { default as D3Chart } from "./charts/D3Chart";