@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/layout/kanban/FeatureLayoutKanban.tsx

@@ -0,0 +1,386 @@
+import { cn } from "../../../support/utils";
+import {
+    DndContext,
+    type DragEndEvent,
+    type DragOverEvent,
+    type DragStartEvent,
+    DragOverlay,
+    KeyboardSensor,
+    PointerSensor,
+    closestCorners,
+    useSensor,
+    useSensors,
+} from "@dnd-kit/core";
+import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { KanbanColumn } from "./KanbanColumn";
+import { KanbanToolbar } from "./KanbanToolbar";
+import type { FeatureLayoutKanbanProps, KanbanColumnDef } from "./types";
+
+export function FeatureLayoutKanban<
+    TItem extends { id: string | number } = any,
+>({
+    items,
+    columns,
+    getItemColumnId = (item: TItem) => (item as any)?.status || "",
+    onItemMove,
+    onItemStatusChange,
+    renderCard,
+    renderColumnHeader,
+    onCardClick,
+    onAddCard,
+    allowColumnCollapse = true,
+    allowCollapseAll = true,
+    showItemCount = true,
+    allowDragAndDrop = true,
+    collapsedColumns: controlledCollapsedColumns,
+    onCollapsedColumnsChange,
+    isLoading = false,
+    emptyPlaceholder,
+    toolbarExtra,
+    footer,
+    className,
+    columnsContainerClassName,
+    columnClassName,
+    columnWidth = 320,
+}: FeatureLayoutKanbanProps<TItem>) {
+    // Local copy of items for fluid optimistic updates during drag & drop
+    const [localItems, setLocalItems] = useState<TItem[]>(items);
+
+    // Keep local items synchronized with incoming items prop
+    useEffect(() => {
+        setLocalItems(items);
+    }, [items]);
+
+    // Local state for collapsed columns if uncontrolled
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState<string[]>(
+        [],
+    );
+    const collapsedColumns =
+        controlledCollapsedColumns !== undefined
+            ? controlledCollapsedColumns
+            : uncontrolledCollapsed;
+
+    const setCollapsedColumns = useCallback(
+        (updater: (prev: string[]) => string[]) => {
+            const next = updater(collapsedColumns);
+            if (onCollapsedColumnsChange) {
+                onCollapsedColumnsChange(next);
+            }
+            if (controlledCollapsedColumns === undefined) {
+                setUncontrolledCollapsed(next);
+            }
+        },
+        [collapsedColumns, controlledCollapsedColumns, onCollapsedColumnsChange],
+    );
+
+    // Column collapse toggle
+    const handleToggleColumn = useCallback(
+        (columnId: string) => {
+            setCollapsedColumns((prev) =>
+                prev.includes(columnId)
+                    ? prev.filter((id) => id !== columnId)
+                    : [...prev, columnId],
+            );
+        },
+        [setCollapsedColumns],
+    );
+
+    // Collapse All / Expand All toggle
+    const allCollapsed = useMemo(() => {
+        if (columns.length === 0) return false;
+        return columns.every((col) => collapsedColumns.includes(col.id));
+    }, [columns, collapsedColumns]);
+
+    const handleToggleCollapseAll = useCallback(() => {
+        if (allCollapsed) {
+            setCollapsedColumns(() => []);
+        } else {
+            setCollapsedColumns(() => columns.map((col) => col.id));
+        }
+    }, [allCollapsed, columns, setCollapsedColumns]);
+
+    // Group items by column ID
+    const groupedItems = useMemo(() => {
+        const groups: Record<string, TItem[]> = {};
+        for (const col of columns) {
+            groups[col.id] = [];
+        }
+
+        for (const item of localItems) {
+            const colId = getItemColumnId(item);
+            if (groups[colId]) {
+                groups[colId].push(item);
+            } else {
+                // Try case-insensitive lookup in defined columns
+                const matchedCol = columns.find(
+                    (c) => c.id.toLowerCase() === (colId || "").toLowerCase(),
+                );
+                if (matchedCol && groups[matchedCol.id]) {
+                    groups[matchedCol.id].push(item);
+                } else {
+                    // If column does not exist in definitions, collect in fallback
+                    if (!groups["__other__"]) groups["__other__"] = [];
+                    groups["__other__"].push(item);
+                }
+            }
+        }
+
+        return groups;
+    }, [columns, localItems, getItemColumnId]);
+
+    // Currently dragged item for DragOverlay preview
+    const [activeItem, setActiveItem] = useState<TItem | null>(null);
+    const [activeSourceColumnId, setActiveSourceColumnId] = useState<string | null>(
+        null,
+    );
+
+    // Drag sensors with distance activation so buttons/clicks inside cards work effortlessly
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5,
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
+    const handleDragStart = useCallback(
+        (event: DragStartEvent) => {
+            if (!allowDragAndDrop) return;
+            const { active } = event;
+            const found = localItems.find(
+                (item) => item.id.toString() === active.id.toString(),
+            );
+            if (found) {
+                setActiveItem(found);
+                setActiveSourceColumnId(getItemColumnId(found));
+            }
+        },
+        [allowDragAndDrop, localItems, getItemColumnId],
+    );
+
+    const handleDragOver = useCallback(
+        (event: DragOverEvent) => {
+            if (!allowDragAndDrop) return;
+            const { active, over } = event;
+            if (!over) return;
+
+            const activeId = active.id.toString();
+            const overId = over.id.toString();
+
+            if (activeId === overId) return;
+
+            const isActiveItem = active.data.current?.type === "Item";
+            const isOverItem = over.data.current?.type === "Item";
+            const isOverColumn = over.data.current?.type === "Column";
+
+            if (!isActiveItem) return;
+
+            // Scenario 1: Dropping an Item over another Item
+            if (isActiveItem && isOverItem) {
+                setLocalItems((prevItems) => {
+                    const activeIndex = prevItems.findIndex(
+                        (i) => i.id.toString() === activeId,
+                    );
+                    const overIndex = prevItems.findIndex(
+                        (i) => i.id.toString() === overId,
+                    );
+
+                    if (activeIndex === -1 || overIndex === -1) return prevItems;
+
+                    const sourceCol = getItemColumnId(prevItems[activeIndex]);
+                    const targetCol = getItemColumnId(prevItems[overIndex]);
+
+                    if (sourceCol !== targetCol) {
+                        const updated = [...prevItems];
+                        // Assign target column ID to item
+                        (updated[activeIndex] as any).status = targetCol;
+                        return arrayMove(updated, activeIndex, overIndex);
+                    }
+
+                    return arrayMove(prevItems, activeIndex, overIndex);
+                });
+            }
+
+            // Scenario 2: Dropping an Item over an empty Column dropzone
+            if (isActiveItem && isOverColumn) {
+                const targetColumnId = over.data.current?.columnId || overId;
+                setLocalItems((prevItems) => {
+                    const activeIndex = prevItems.findIndex(
+                        (i) => i.id.toString() === activeId,
+                    );
+                    if (activeIndex === -1) return prevItems;
+
+                    const sourceCol = getItemColumnId(prevItems[activeIndex]);
+                    if (sourceCol === targetColumnId) return prevItems;
+
+                    const updated = [...prevItems];
+                    (updated[activeIndex] as any).status = targetColumnId;
+                    return arrayMove(updated, activeIndex, activeIndex);
+                });
+            }
+        },
+        [allowDragAndDrop, getItemColumnId],
+    );
+
+    const handleDragEnd = useCallback(
+        (event: DragEndEvent) => {
+            if (!allowDragAndDrop) return;
+            const { active, over } = event;
+
+            if (activeItem) {
+                const finalItem = localItems.find(
+                    (i) => i.id.toString() === activeItem.id.toString(),
+                );
+                const newColId = finalItem ? getItemColumnId(finalItem) : null;
+
+                if (finalItem && newColId && activeSourceColumnId && newColId !== activeSourceColumnId) {
+                    onItemStatusChange?.(finalItem.id, newColId, finalItem);
+
+                    if (onItemMove) {
+                        const targetItems = groupedItems[newColId] || [];
+                        const newIdx = targetItems.findIndex(
+                            (i) => i.id.toString() === finalItem.id.toString(),
+                        );
+                        const sourceItems = groupedItems[activeSourceColumnId] || [];
+                        const oldIdx = sourceItems.findIndex(
+                            (i) => i.id.toString() === activeItem.id.toString(),
+                        );
+
+                        onItemMove({
+                            itemId: finalItem.id,
+                            item: finalItem,
+                            sourceColumnId: activeSourceColumnId,
+                            targetColumnId: newColId,
+                            oldIndex: oldIdx >= 0 ? oldIdx : 0,
+                            newIndex: newIdx >= 0 ? newIdx : 0,
+                        });
+                    }
+                }
+            }
+
+            setActiveItem(null);
+            setActiveSourceColumnId(null);
+        },
+        [
+            allowDragAndDrop,
+            activeItem,
+            localItems,
+            activeSourceColumnId,
+            getItemColumnId,
+            onItemStatusChange,
+            onItemMove,
+            groupedItems,
+        ],
+    );
+
+    if (isLoading) {
+        return (
+            <div className="flex-1 flex flex-col h-full overflow-hidden p-6 animate-pulse">
+                <div className="h-8 w-64 bg-dashboard-card rounded-md mb-4" />
+                <div className="flex-1 flex gap-4 overflow-hidden">
+                    {[1, 2, 3, 4].map((i) => (
+                        <div
+                            key={i}
+                            className="w-80 h-full rounded-xl bg-dashboard-card/40 border border-dashboard-border p-4 flex flex-col gap-3"
+                        >
+                            <div className="h-6 w-32 bg-dashboard-secondary rounded" />
+                            <div className="h-24 w-full bg-dashboard-secondary/60 rounded-lg" />
+                            <div className="h-24 w-full bg-dashboard-secondary/60 rounded-lg" />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={cn(
+                "flex-1 flex flex-col h-full min-h-0 overflow-hidden bg-dashboard-background select-none",
+                className,
+            )}
+        >
+            {/* Top Kanban Toolbar with Collapse/Expand All */}
+            <KanbanToolbar
+                totalItems={localItems.length}
+                columnsCount={columns.length}
+                allCollapsed={allCollapsed}
+                onToggleCollapseAll={handleToggleCollapseAll}
+                allowCollapseAll={allowCollapseAll}
+                toolbarExtra={toolbarExtra}
+            />
+
+            {/* DnD Container & Columns Scroll View */}
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCorners}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+            >
+                <div
+                    className={cn(
+                        "flex-1 flex overflow-x-auto overflow-y-hidden p-4 md:p-6 gap-4 min-h-0 custom-scrollbar",
+                        columnsContainerClassName,
+                    )}
+                >
+                    {columns.map((column) => {
+                        const isColCollapsed = collapsedColumns.includes(column.id);
+                        const colItems = groupedItems[column.id] || [];
+
+                        return (
+                            <KanbanColumn
+                                key={column.id}
+                                column={column}
+                                items={colItems}
+                                isCollapsed={isColCollapsed}
+                                onToggleCollapse={handleToggleColumn}
+                                allowColumnCollapse={allowColumnCollapse}
+                                showItemCount={showItemCount}
+                                onAddCard={onAddCard}
+                                renderCard={renderCard}
+                                renderColumnHeader={renderColumnHeader}
+                                onCardClick={onCardClick}
+                                allowDragAndDrop={allowDragAndDrop}
+                                emptyPlaceholder={emptyPlaceholder}
+                                columnWidth={columnWidth}
+                                columnClassName={columnClassName}
+                            />
+                        );
+                    })}
+                </div>
+
+                {/* Drag Overlay for active card */}
+                <DragOverlay dropAnimation={{ duration: 180, easing: "ease" }}>
+                    {activeItem ? (
+                        <div className="scale-105 rotate-1.5 shadow-2xl opacity-95 ring-1 ring-dashboard-primary/40 rounded-xl cursor-grabbing pointer-events-none">
+                            {renderCard ? (
+                                renderCard(activeItem, true)
+                            ) : (
+                                <div className="bg-dashboard-card border border-dashboard-border rounded-xl p-3.5 shadow-xl">
+                                    <span className="text-xs font-semibold text-dashboard-foreground">
+                                        {(activeItem as any).title ||
+                                            (activeItem as any).name ||
+                                            `Item #${activeItem.id}`}
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+                    ) : null}
+                </DragOverlay>
+            </DndContext>
+
+            {footer && (
+                <div className="shrink-0 px-4 py-2.5 border-t border-dashboard-border bg-dashboard-card/30">
+                    {footer}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default FeatureLayoutKanban;

package/src/components/layout/kanban/KanbanCard.tsx

@@ -0,0 +1,132 @@
+import { cn } from "../../../support/utils";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+import React from "react";
+
+export interface SortableKanbanCardProps<
+    TItem extends { id: string | number } = any,
+> {
+    item: TItem;
+    renderCard?: (item: TItem, isDragging?: boolean) => React.ReactNode;
+    onCardClick?: (item: TItem) => void;
+    allowDragAndDrop?: boolean;
+}
+
+export function SortableKanbanCard<
+    TItem extends { id: string | number } = any,
+>({
+    item,
+    renderCard,
+    onCardClick,
+    allowDragAndDrop = true,
+}: SortableKanbanCardProps<TItem>) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({
+        id: item.id.toString(),
+        data: {
+            type: "Item",
+            item,
+        },
+        disabled: !allowDragAndDrop,
+    });
+
+    const style: React.CSSProperties = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.35 : 1,
+    };
+
+    const handleClick = (e: React.MouseEvent) => {
+        // Only trigger click if not dragged
+        if (!isDragging && onCardClick) {
+            onCardClick(item);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if ((e.key === "Enter" || e.key === " ") && onCardClick) {
+            e.preventDefault();
+            onCardClick(item);
+        }
+    };
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            role={onCardClick ? "button" : undefined}
+            tabIndex={onCardClick ? 0 : undefined}
+            aria-label={`Card ${item.id}`}
+            className={cn(
+                "relative group select-none transition-shadow duration-200 outline-none",
+                allowDragAndDrop
+                    ? "cursor-grab active:cursor-grabbing"
+                    : onCardClick
+                      ? "cursor-pointer"
+                      : "cursor-default",
+                isDragging && "z-50",
+            )}
+        >
+            {renderCard ? (
+                renderCard(item, isDragging)
+            ) : (
+                <DefaultKanbanCardContent
+                    item={item}
+                    allowDragAndDrop={allowDragAndDrop}
+                />
+            )}
+        </div>
+    );
+}
+
+function DefaultKanbanCardContent({
+    item,
+    allowDragAndDrop,
+}: {
+    item: any;
+    allowDragAndDrop: boolean;
+}) {
+    const title = item.title || item.name || `Item #${item.id}`;
+    const subtitle = item.description || item.code || item.subtitle;
+
+    return (
+        <div className="bg-dashboard-card hover:bg-dashboard-secondary border border-dashboard-border rounded-xl p-3.5 transition-all shadow-xs group-hover:border-dashboard-primary/40">
+            <div className="flex items-start justify-between gap-2">
+                <span className="text-xs font-semibold text-dashboard-foreground line-clamp-2">
+                    {title}
+                </span>
+                {allowDragAndDrop && (
+                    <GripVertical className="w-3.5 h-3.5 text-dashboard-muted-foreground/40 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                )}
+            </div>
+
+            {subtitle && (
+                <p className="mt-1 text-[11px] text-dashboard-muted-foreground line-clamp-2">
+                    {subtitle}
+                </p>
+            )}
+
+            <div className="mt-2.5 flex items-center justify-between text-[10px] text-dashboard-muted-foreground pt-2 border-t border-dashboard-border/60">
+                <span className="font-mono text-dashboard-muted-foreground/80">
+                    #{item.id}
+                </span>
+                {item.status && (
+                    <span className="inline-flex items-center px-1.5 py-0.5 rounded-md bg-dashboard-secondary text-dashboard-foreground font-medium">
+                        {item.status}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}