@gostack-framework/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,241 @@
+import { cn } from "../../../support/utils";
+import { useDroppable } from "@dnd-kit/core";
+import {
+    SortableContext,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import {
+    ChevronLeft,
+    ChevronRight,
+    Plus,
+} from "lucide-react";
+import { motion } from "motion/react";
+import React from "react";
+import { SortableKanbanCard } from "./KanbanCard";
+import type { KanbanColumnDef } from "./types";
+
+export interface KanbanColumnProps<TItem extends { id: string | number } = any> {
+    column: KanbanColumnDef<TItem>;
+    items: TItem[];
+    isCollapsed: boolean;
+    onToggleCollapse: (columnId: string) => void;
+    allowColumnCollapse?: boolean;
+    showItemCount?: boolean;
+    onAddCard?: (columnId: string) => void;
+    renderCard?: (item: TItem, isDragging?: boolean) => React.ReactNode;
+    renderColumnHeader?: (
+        column: KanbanColumnDef<TItem>,
+        isCollapsed: boolean,
+        toggleCollapse: () => void,
+        itemCount: number,
+    ) => React.ReactNode;
+    onCardClick?: (item: TItem) => void;
+    allowDragAndDrop?: boolean;
+    emptyPlaceholder?: (column: KanbanColumnDef<TItem>) => React.ReactNode;
+    columnWidth?: number | string;
+    columnClassName?: string;
+}
+
+export function KanbanColumn<TItem extends { id: string | number } = any>({
+    column,
+    items,
+    isCollapsed,
+    onToggleCollapse,
+    allowColumnCollapse = true,
+    showItemCount = true,
+    onAddCard,
+    renderCard,
+    renderColumnHeader,
+    onCardClick,
+    allowDragAndDrop = true,
+    emptyPlaceholder,
+    columnWidth = 320,
+    columnClassName,
+}: KanbanColumnProps<TItem>) {
+    const { setNodeRef, isOver } = useDroppable({
+        id: column.id,
+        data: {
+            type: "Column",
+            columnId: column.id,
+        },
+    });
+
+    const Icon = column.icon;
+    const toggleCollapse = () => onToggleCollapse(column.id);
+
+    // Collapsed View
+    if (isCollapsed) {
+        return (
+            <motion.div
+                layout
+                initial={{ width: 48, opacity: 0.8 }}
+                animate={{ width: 48, opacity: 1 }}
+                exit={{ width: 0, opacity: 0 }}
+                transition={{ duration: 0.25, ease: "easeInOut" }}
+                ref={setNodeRef}
+                onClick={toggleCollapse}
+                role="region"
+                aria-label={`${column.title} column (collapsed)`}
+                className={cn(
+                    "shrink-0 h-full flex flex-col items-center py-3 select-none rounded-xl border transition-colors cursor-pointer group relative overflow-hidden",
+                    isOver
+                        ? "bg-dashboard-primary/10 border-dashboard-primary/70 ring-1 ring-dashboard-primary/30"
+                        : "bg-dashboard-card/60 hover:bg-dashboard-secondary border-dashboard-border",
+                    columnClassName,
+                )}
+            >
+                {/* Expand button */}
+                {allowColumnCollapse && (
+                    <button
+                        type="button"
+                        aria-label={`Expand ${column.title} column`}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            toggleCollapse();
+                        }}
+                        className="w-7 h-7 rounded-lg flex items-center justify-center text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-card transition-colors mb-4 cursor-pointer"
+                    >
+                        <ChevronRight className="w-3.5 h-3.5" />
+                    </button>
+                )}
+
+                {/* Column icon if present */}
+                {Icon && (
+                    <div className="mb-3 text-dashboard-muted-foreground group-hover:text-dashboard-foreground transition-colors">
+                        <Icon className="w-4 h-4" />
+                    </div>
+                )}
+
+                {/* Vertical title text */}
+                <div className="flex-1 flex items-center justify-center py-2 overflow-hidden">
+                    <span className="[writing-mode:vertical-rl] rotate-180 text-xs font-semibold tracking-wider text-dashboard-foreground/80 group-hover:text-dashboard-foreground whitespace-nowrap transition-colors">
+                        {column.title}
+                    </span>
+                </div>
+
+                {/* Item count badge */}
+                {showItemCount && (
+                    <span className="mt-auto px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-dashboard-secondary text-dashboard-muted-foreground border border-dashboard-border shrink-0">
+                        {items.length}
+                    </span>
+                )}
+            </motion.div>
+        );
+    }
+
+    // Expanded View
+    return (
+        <motion.div
+            layout
+            initial={{ width: columnWidth, opacity: 0.8 }}
+            animate={{ width: columnWidth, opacity: 1 }}
+            exit={{ width: 0, opacity: 0 }}
+            transition={{ duration: 0.25, ease: "easeInOut" }}
+            className={cn(
+                "shrink-0 h-full flex flex-col rounded-xl border border-dashboard-border bg-dashboard-card/40 overflow-hidden",
+                isOver && "ring-1 ring-dashboard-primary/40 border-dashboard-primary/50",
+                columnClassName,
+            )}
+            style={{ width: typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth }}
+        >
+            {/* Column Header */}
+            {renderColumnHeader ? (
+                renderColumnHeader(column, isCollapsed, toggleCollapse, items.length)
+            ) : (
+                <div className="px-3.5 py-3 border-b border-dashboard-border bg-dashboard-card flex items-center justify-between gap-2 shrink-0">
+                    <div className="flex items-center gap-2 min-w-0">
+                        {Icon && (
+                            <div className="text-dashboard-primary shrink-0">
+                                <Icon className="w-4 h-4" />
+                            </div>
+                        )}
+                        <h3 className="text-xs font-semibold text-dashboard-foreground truncate">
+                            {column.title}
+                        </h3>
+                        {showItemCount && (
+                            <span className="inline-flex items-center px-1.5 py-0.2 rounded-full text-[10px] font-semibold bg-dashboard-secondary text-dashboard-muted-foreground border border-dashboard-border shrink-0">
+                                {items.length}
+                                {column.limit ? ` / ${column.limit}` : ""}
+                            </span>
+                        )}
+                    </div>
+
+                    <div className="flex items-center gap-1 shrink-0">
+                        {column.headerAction}
+
+                        {onAddCard && (
+                            <button
+                                type="button"
+                                aria-label={`Add item to ${column.title}`}
+                                onClick={() => onAddCard(column.id)}
+                                className="w-6 h-6 rounded-md flex items-center justify-center text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary transition-colors cursor-pointer"
+                            >
+                                <Plus className="w-3.5 h-3.5" />
+                            </button>
+                        )}
+
+                        {allowColumnCollapse && (
+                            <button
+                                type="button"
+                                aria-label={`Collapse ${column.title} column`}
+                                onClick={toggleCollapse}
+                                className="w-6 h-6 rounded-md flex items-center justify-center text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary transition-colors cursor-pointer"
+                            >
+                                <ChevronLeft className="w-3.5 h-3.5" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Droppable Card List */}
+            <div
+                ref={setNodeRef}
+                className={cn(
+                    "flex-1 overflow-y-auto p-3 space-y-2.5 transition-colors",
+                    isOver && "bg-dashboard-secondary/30",
+                )}
+            >
+                <SortableContext
+                    items={items.map((item) => item.id.toString())}
+                    strategy={verticalListSortingStrategy}
+                >
+                    {items.map((item) => (
+                        <SortableKanbanCard
+                            key={item.id}
+                            item={item}
+                            renderCard={renderCard}
+                            onCardClick={onCardClick}
+                            allowDragAndDrop={allowDragAndDrop}
+                        />
+                    ))}
+                </SortableContext>
+
+                {/* Empty State Dropzone */}
+                {items.length === 0 && (
+                    <div className="h-28 flex flex-col items-center justify-center rounded-lg border border-dashed border-dashboard-border/80 text-dashboard-muted-foreground/60 p-4 text-center">
+                        {emptyPlaceholder ? (
+                            emptyPlaceholder(column)
+                        ) : (
+                            <span className="text-[11px] select-none">
+                                {allowDragAndDrop ? "Drop cards here" : "No items"}
+                            </span>
+                        )}
+                    </div>
+                )}
+
+                {/* Optional Bottom Add Card Button */}
+                {onAddCard && (
+                    <button
+                        type="button"
+                        onClick={() => onAddCard(column.id)}
+                        className="w-full py-2 px-2.5 rounded-lg border border-transparent hover:border-dashboard-border hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground text-xs font-medium flex items-center justify-center gap-1.5 transition-all cursor-pointer mt-2"
+                    >
+                        <Plus className="w-3.5 h-3.5" />
+                        <span>Add card</span>
+                    </button>
+                )}
+            </div>
+        </motion.div>
+    );
+}

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

@@ -0,0 +1,77 @@
+import { cn } from "../../../support/utils";
+import {
+    ChevronsLeftRight,
+    Columns3,
+    FoldHorizontal,
+    UnfoldHorizontal,
+} from "lucide-react";
+import React from "react";
+
+export interface KanbanToolbarProps {
+    totalItems: number;
+    columnsCount: number;
+    allCollapsed: boolean;
+    onToggleCollapseAll: () => void;
+    allowCollapseAll?: boolean;
+    toolbarExtra?: React.ReactNode;
+    className?: string;
+}
+
+export function KanbanToolbar({
+    totalItems,
+    columnsCount,
+    allCollapsed,
+    onToggleCollapseAll,
+    allowCollapseAll = true,
+    toolbarExtra,
+    className,
+}: KanbanToolbarProps) {
+    if (!allowCollapseAll && !toolbarExtra) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-between gap-3 px-4 py-2 border-b border-dashboard-border bg-dashboard-card/50 text-xs text-dashboard-muted-foreground shrink-0",
+                className,
+            )}
+        >
+            <div className="flex items-center gap-3">
+                {allowCollapseAll && (
+                    <button
+                        type="button"
+                        onClick={onToggleCollapseAll}
+                        aria-label={allCollapsed ? "Expand all columns" : "Collapse all columns"}
+                        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-dashboard-card hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-foreground border border-dashboard-border transition-colors text-xs font-medium cursor-pointer shadow-2xs"
+                    >
+                        {allCollapsed ? (
+                            <>
+                                <UnfoldHorizontal className="w-3.5 h-3.5 text-dashboard-primary" />
+                                <span>Expand All</span>
+                            </>
+                        ) : (
+                            <>
+                                <FoldHorizontal className="w-3.5 h-3.5 text-dashboard-primary" />
+                                <span>Collapse All</span>
+                            </>
+                        )}
+                    </button>
+                )}
+
+                <span className="text-[11px] text-dashboard-muted-foreground">
+                    <span className="font-semibold text-dashboard-foreground">{totalItems}</span>{" "}
+                    {totalItems === 1 ? "item" : "items"} across{" "}
+                    <span className="font-semibold text-dashboard-foreground">{columnsCount}</span>{" "}
+                    columns
+                </span>
+            </div>
+
+            {toolbarExtra && (
+                <div className="flex items-center gap-2">
+                    {toolbarExtra}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/layout/kanban/index.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./KanbanCard";
+export * from "./KanbanColumn";
+export * from "./KanbanToolbar";
+export * from "./FeatureLayoutKanban";
+export { FeatureLayoutKanban as KanbanBoard } from "./FeatureLayoutKanban";

package/src/components/layout/kanban/types.ts

@@ -0,0 +1,96 @@
+import type { StatusBadgeVariant } from "../../../index";
+import type React from "react";
+
+export interface KanbanColumnDef<TItem = any> {
+    id: string;
+    title: string;
+    badgeVariant?: StatusBadgeVariant;
+    icon?: React.ComponentType<{ className?: string }>;
+    limit?: number;
+    headerAction?: React.ReactNode;
+}
+
+export interface KanbanItemMoveEvent<TItem = any> {
+    itemId: string | number;
+    item: TItem;
+    sourceColumnId: string;
+    targetColumnId: string;
+    oldIndex: number;
+    newIndex: number;
+}
+
+export interface FeatureLayoutKanbanProps<
+    TItem extends { id: string | number } = any,
+> {
+    /** The dataset of items to display on the board */
+    items: TItem[];
+
+    /** Explicit column definitions */
+    columns: KanbanColumnDef<TItem>[];
+
+    /** Extract the column ID for an item (e.g. item => item.status). Defaults to item.status */
+    getItemColumnId?: (item: TItem) => string;
+
+    /** Callback invoked when an item moves across columns or within a column */
+    onItemMove?: (event: KanbanItemMoveEvent<TItem>) => void;
+
+    /** Simple callback when an item's status / column changes via drag-and-drop */
+    onItemStatusChange?: (
+        itemId: string | number,
+        newColumnId: string,
+        item: TItem,
+    ) => void;
+
+    /** Custom renderer for an item card */
+    renderCard?: (item: TItem, isDragging?: boolean) => React.ReactNode;
+
+    /** Custom column header renderer */
+    renderColumnHeader?: (
+        column: KanbanColumnDef<TItem>,
+        isCollapsed: boolean,
+        toggleCollapse: () => void,
+        itemCount: number,
+    ) => React.ReactNode;
+
+    /** Click handler when a card is clicked */
+    onCardClick?: (item: TItem) => void;
+
+    /** Callback when user clicks "+ Add" in a column */
+    onAddCard?: (columnId: string) => void;
+
+    /** FLAG PROP: Enable / disable individual column collapse/expand. Default: true */
+    allowColumnCollapse?: boolean;
+
+    /** FLAG PROP: Enable / disable button for horizontally collapse/expand all columns. Default: true */
+    allowCollapseAll?: boolean;
+
+    /** FLAG PROP: Show or hide item count badge on column headers. Default: true */
+    showItemCount?: boolean;
+
+    /** FLAG PROP: Enable or disable drag-and-drop. Default: true */
+    allowDragAndDrop?: boolean;
+
+    /** Controlled collapsed column IDs */
+    collapsedColumns?: string[];
+
+    /** Callback when collapsed columns change */
+    onCollapsedColumnsChange?: (collapsedIds: string[]) => void;
+
+    /** Loading state */
+    isLoading?: boolean;
+
+    /** Optional empty placeholder for a column */
+    emptyPlaceholder?: (column: KanbanColumnDef<TItem>) => React.ReactNode;
+
+    /** Extra content to render in the Kanban top toolbar */
+    toolbarExtra?: React.ReactNode;
+
+    /** Optional footer (e.g. pagination controls) rendered at the bottom of the Kanban board */
+    footer?: React.ReactNode;
+
+    /** Class name overrides */
+    className?: string;
+    columnsContainerClassName?: string;
+    columnClassName?: string;
+    columnWidth?: number | string;
+}

package/src/components/popover.tsx

@@ -0,0 +1,66 @@
+import { cn } from "../support/utils";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverPortal({ ...props }: PopoverPrimitive.Portal.Props) {
+    return <PopoverPrimitive.Portal data-slot="popover-portal" {...props} />;
+}
+
+function PopoverPositioner({
+    className,
+    ...props
+}: PopoverPrimitive.Positioner.Props) {
+    return (
+        <PopoverPrimitive.Positioner
+            data-slot="popover-positioner"
+            className={cn("z-[99999]", className)}
+            {...props}
+        />
+    );
+}
+
+function PopoverContent({
+    className,
+    align = "center",
+    side = "bottom",
+    sideOffset = 4,
+    ...props
+}: PopoverPrimitive.Popup.Props & {
+    align?: any;
+    side?: any;
+    sideOffset?: number;
+}) {
+    return (
+        <PopoverPortal>
+            <PopoverPositioner
+                align={align}
+                side={side}
+                sideOffset={sideOffset}
+            >
+                <PopoverPrimitive.Popup
+                    data-slot="popover-content"
+                    className={cn(
+                        "z-[99999] w-auto rounded-xl bg-dashboard-card p-2 text-dashboard-foreground shadow-2xl border border-dashboard-border backdrop-blur-md outline-none duration-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                        className,
+                    )}
+                    {...props}
+                />
+            </PopoverPositioner>
+        </PopoverPortal>
+    );
+}
+
+export {
+    Popover,
+    PopoverContent,
+    PopoverPortal,
+    PopoverPositioner,
+    PopoverTrigger,
+};

package/src/components/react-flow/FlowGraphHeader.tsx

@@ -0,0 +1,68 @@
+import { cn } from "../../support/utils";
+import { ArrowLeft } from "lucide-react";
+import type { FlowGraphHeaderConfig } from "./types";
+
+export function FlowGraphHeader({
+    show = true,
+    backButton,
+    title,
+    badge,
+    actions = [],
+    children,
+    className,
+}: FlowGraphHeaderConfig) {
+    if (!show) return null;
+
+    const showBackButton = backButton?.show !== false && !!backButton?.onClick;
+
+    return (
+        <div
+            className={cn(
+                "absolute top-4 left-4 z-10 flex items-center gap-4",
+                className,
+            )}
+        >
+            {showBackButton && (
+                <button
+                    type="button"
+                    onClick={backButton.onClick}
+                    aria-label="Go back"
+                    className="flex items-center justify-center w-10 h-10 rounded-full bg-dashboard-card border border-dashboard-border shadow-lg hover:bg-dashboard-secondary transition-colors text-dashboard-muted-foreground hover:text-dashboard-foreground cursor-pointer"
+                >
+                    <ArrowLeft size={18} />
+                </button>
+            )}
+
+            {(title || badge) && (
+                <div className="bg-dashboard-card/95 backdrop-blur-md border border-dashboard-border shadow-md px-4 py-2 rounded-2xl flex items-center gap-3">
+                    {title && (
+                        <span className="font-bold text-dashboard-foreground text-sm">
+                            {title}
+                        </span>
+                    )}
+                    {badge && (
+                        <span className="text-xs text-dashboard-muted-foreground">
+                            {badge}
+                        </span>
+                    )}
+                </div>
+            )}
+
+            {actions.map((action) => (
+                <button
+                    key={action.id}
+                    onClick={action.onClick}
+                    className={cn(
+                        "flex items-center justify-center gap-1.5 h-9 px-4 rounded-2xl bg-dashboard-card/95 backdrop-blur-md border border-dashboard-border shadow-md hover:bg-dashboard-secondary transition-all text-dashboard-foreground text-xs font-semibold cursor-pointer",
+                        action.className,
+                    )}
+                >
+                    {action.icon}
+                    <span>{action.label}</span>
+                </button>
+            ))}
+
+            {children}
+        </div>
+    );
+}