@firecms/core 3.0.1 → 3.1.0-canary.9e89e98

package/src/components/EntityCollectionView/Board.tsx

@@ -0,0 +1,324 @@
+import React, { useEffect, useState } from "react";
+import {
+    DndContext,
+    DragEndEvent,
+    DragOverEvent,
+    DragOverlay,
+    DragStartEvent,
+    PointerSensor,
+    pointerWithin,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import { BoardColumn } from "./BoardColumn";
+import { BoardItem, BoardItemMap, BoardItemViewProps, BoardProps } from "./board_types";
+import { cls } from "@firecms/ui";
+
+export function Board<M extends Record<string, any>, COLUMN extends string>({
+    data,
+    columns: columnsProp,
+    columnLabels,
+    columnColors,
+    className,
+    assignColumn,
+    allowColumnReorder = false,
+    onColumnReorder,
+    onItemsReorder,
+    ItemComponent,
+    columnLoadingState,
+    onLoadMoreColumn,
+    onAddItemToColumn,
+    AddColumnComponent,
+}: BoardProps<M, COLUMN>) {
+
+    const [activeItem, setActiveItem] = useState<BoardItem<M> | null>(null);
+    const [activeColumn, setActiveColumn] = useState<COLUMN | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
+    const [itemMapState, setItemMapState] = useState<BoardItemMap<M>>(() => {
+        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item: BoardItem<M>) => ({
+            ...prev,
+            [item.id]: assignColumn(item)
+        }), {});
+        return columnsProp.reduce(
+            (previous: BoardItemMap<M>, column: COLUMN) => ({
+                ...previous,
+                [column]: data.filter((item: BoardItem<M>) => dataColumnMap[item.id] === column)
+            }),
+            {}
+        );
+    });
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5,
+            },
+        })
+    );
+
+    useEffect(() => {
+        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item) => ({
+            ...prev,
+            [item.id]: assignColumn(item)
+        }), {});
+
+        setItemMapState(() => columnsProp.reduce(
+            (previous: BoardItemMap<M>, column: COLUMN) => ({
+                ...previous,
+                [column]: data.filter((item: BoardItem<M>) => dataColumnMap[item.id] === column)
+            }),
+            {}
+        ));
+    }, [data, columnsProp, assignColumn]);
+
+    const findColumnByItemId = (id: string): string | undefined => {
+        return Object.keys(itemMapState).find(col => itemMapState[col]?.some(i => i.id === id));
+    };
+
+    const handleDragStart = (event: DragStartEvent) => {
+        setIsDragging(true);
+        setDragOverColumnId(null);
+        const { active } = event;
+
+        if (active.data.current?.type === "COLUMN") {
+            const columnId = active.id as string;
+            const column = columnsProp.find(col => String(col) === columnId);
+            if (column) {
+                setActiveColumn(column);
+            }
+        } else if (active.data.current?.type === "ITEM") {
+            const columnId = findColumnByItemId(active.id as string);
+            if (columnId) {
+                const item = itemMapState[columnId]?.find(i => i.id === active.id);
+                setActiveItem(item || null);
+            }
+        }
+    };
+
+    const handleDragOver = (event: DragOverEvent) => {
+        const {
+            active,
+            over
+        } = event;
+
+        if (!over) {
+            setDragOverColumnId(null);
+            return;
+        }
+
+        let currentHoveredColumnId: string | null = null;
+        const overId = over.id as string;
+        const overDataType = over.data.current?.type as string | undefined;
+
+        if (overDataType === "ITEM-LIST" || overDataType === "COLUMN") {
+            currentHoveredColumnId = overId;
+        } else if (overDataType === "ITEM") {
+            currentHoveredColumnId = findColumnByItemId(overId) || null;
+        } else if (columnsProp.includes(overId as COLUMN)) {
+            currentHoveredColumnId = overId;
+        }
+
+        setDragOverColumnId(currentHoveredColumnId);
+
+        // Skip item reordering if dragging a column
+        if (active.data.current?.type !== "ITEM") {
+            return;
+        }
+
+        const activeId = active.id as string;
+        const activeColumn = findColumnByItemId(activeId);
+        let overColumnForMove = findColumnByItemId(overId);
+
+        if (!overColumnForMove && overDataType === "ITEM-LIST") {
+            overColumnForMove = overId;
+        }
+        if (!overColumnForMove && columnsProp.includes(overId as COLUMN)) {
+            overColumnForMove = overId;
+        }
+
+        if (!activeColumn || !overColumnForMove) return;
+        if (activeColumn === overColumnForMove && activeId === overId && overDataType !== "ITEM-LIST") return;
+
+        // Prevent moving to a column if item with same ID already exists there
+        if (overColumnForMove !== activeColumn &&
+            itemMapState[overColumnForMove]?.some(i => i.id === activeId)) {
+            return;
+        }
+
+        setItemMapState(currentMap => {
+            const activeItems = [...(currentMap[activeColumn] || [])];
+            const overItems = [...(currentMap[overColumnForMove!] || [])];
+            const activeIndex = activeItems.findIndex(i => i.id === activeId);
+
+            if (activeIndex === -1) return currentMap;
+
+            let overIndex;
+            if (overDataType === "ITEM-LIST" || (columnsProp.includes(overId as COLUMN) && !findColumnByItemId(overId))) {
+                overIndex = overItems.length;
+            } else {
+                overIndex = overItems.findIndex(i => i.id === overId);
+                if (overIndex !== -1) {
+                    const { y } = event.delta;
+                    const overRect = over.rect;
+                    if (overRect) {
+                        const threshold = overRect.height / 2;
+                        if (y > threshold) {
+                            overIndex += 1;
+                        }
+                    }
+                } else {
+                    overIndex = overItems.length;
+                }
+            }
+
+            if (activeColumn === overColumnForMove && activeIndex === overIndex) return currentMap;
+
+            const newItemMap = { ...currentMap };
+            if (activeColumn === overColumnForMove) {
+                newItemMap[activeColumn] = arrayMove(activeItems, activeIndex, overIndex);
+            } else {
+                const [moved] = activeItems.splice(activeIndex, 1);
+                overItems.splice(overIndex, 0, moved);
+                newItemMap[activeColumn] = activeItems;
+                newItemMap[overColumnForMove] = overItems;
+            }
+            return newItemMap;
+        });
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const {
+            active,
+            over
+        } = event;
+
+        setIsDragging(false);
+        setActiveItem(null);
+        setActiveColumn(null);
+        setDragOverColumnId(null);
+
+        if (!over) return;
+
+        const activeId = active.id as string;
+        const overId = over.id as string;
+
+        if (active.data.current?.type === "COLUMN" &&
+            over.data.current?.type === "COLUMN" &&
+            activeId !== overId) {
+
+            const oldIndex = columnsProp.findIndex(col => String(col) === activeId);
+            const newIndex = columnsProp.findIndex(col => String(col) === overId);
+
+            if (oldIndex !== -1 && newIndex !== -1 && onColumnReorder && allowColumnReorder) {
+                const newOrder = arrayMove([...columnsProp], oldIndex, newIndex);
+                onColumnReorder(newOrder);
+            }
+        } else if (active.data.current?.type === "ITEM" && onItemsReorder) {
+            // Find the original column assignment from the input data
+            const originalColumn = data.find(item => item.id === activeId)
+                ? assignColumn(data.find(item => item.id === activeId)!)
+                : undefined;
+
+            // Find the current column assignment from our internal state
+            const currentColumn = findColumnByItemId(activeId) as COLUMN | undefined;
+
+            // When items have been reordered, convert itemMapState to a flat list
+            const allItems: BoardItem<M>[] = [];
+
+            // Collect all items from all columns in their current order
+            Object.entries(itemMapState).forEach(([, columnItems]) => {
+                if (columnItems && (columnItems as BoardItem<M>[]).length > 0) {
+                    allItems.push(...(columnItems as BoardItem<M>[]));
+                }
+            });
+
+            // Notify parent component of the change, including column movement information
+            if (originalColumn !== currentColumn && originalColumn && currentColumn) {
+                // Item has moved between columns - provide this context to parent
+                onItemsReorder(allItems, {
+                    itemId: activeId,
+                    sourceColumn: originalColumn,
+                    targetColumn: currentColumn
+                });
+            } else if (currentColumn) {
+                // Reordering within the same column - still need to provide moveInfo
+                onItemsReorder(allItems, {
+                    itemId: activeId,
+                    sourceColumn: currentColumn,
+                    targetColumn: currentColumn
+                });
+            }
+        }
+    };
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={pointerWithin}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+        >
+            <DragOverlay dropAnimation={{
+                duration: 300,
+                easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
+            }}>
+                {activeItem ? (
+                    <ItemComponent
+                        item={activeItem}
+                        isDragging={true}
+                        index={-1}
+                        style={{
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
+                            opacity: 0.9,
+                        }}
+                    />
+                ) : activeColumn ? (
+                    <BoardColumn
+                        key={String(activeColumn)}
+                        index={-1}
+                        id={String(activeColumn)}
+                        title={columnLabels?.[activeColumn] ?? String(activeColumn)}
+                        items={itemMapState[String(activeColumn)] || []}
+                        ItemComponent={ItemComponent}
+                        isDragging={true}
+                        isDragOverColumn={false}
+                    />
+                ) : null}
+            </DragOverlay>
+
+            <SortableContext
+                items={columnsProp.map(String)}
+                strategy={horizontalListSortingStrategy}
+            >
+                <div className={cls("p-2 md:p-3 lg:p-4 h-full min-w-full inline-flex", className)}>
+                    {columnsProp.map((key: COLUMN, index: number) => (
+                        <BoardColumn
+                            key={String(key)}
+                            index={index}
+                            id={String(key)}
+                            title={columnLabels?.[key] ?? String(key)}
+                            color={columnColors?.[key]}
+                            items={itemMapState[String(key)] || []}
+                            ItemComponent={ItemComponent}
+                            isDragging={isDragging}
+                            isDragOverColumn={String(key) === dragOverColumnId}
+                            allowReorder={allowColumnReorder}
+                            loading={columnLoadingState?.[String(key)]?.loading}
+                            hasMore={columnLoadingState?.[String(key)]?.hasMore}
+                            totalCount={columnLoadingState?.[String(key)]?.totalCount}
+                            onLoadMore={onLoadMoreColumn ? () => onLoadMoreColumn(key) : undefined}
+                            onAddItem={onAddItemToColumn ? () => onAddItemToColumn(key) : undefined}
+                            style={{
+                                opacity: activeColumn === key ? 0 : 1
+                            }}
+                        />
+                    ))}
+                    {AddColumnComponent}
+                </div>
+            </SortableContext>
+        </DndContext>
+    );
+}

package/src/components/EntityCollectionView/BoardColumn.tsx

@@ -0,0 +1,158 @@
+import React, { memo, useMemo } from "react";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { BoardSortableList } from "./BoardSortableList";
+import { BoardColumnTitle } from "./BoardColumnTitle";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+import { AddIcon, ChipColorKey, ChipColorScheme, cls, defaultBorderMixin, IconButton } from "@firecms/ui";
+
+export interface BoardColumnProps<M extends Record<string, any>> {
+    id: string;
+    title: string;
+    items: BoardItem<M>[];
+    index: number;
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    isDragging: boolean;
+    isDragOverColumn: boolean;
+    /**
+     * Whether column reordering is allowed (shows drag handle)
+     */
+    allowReorder?: boolean;
+    /**
+     * Whether items are loading for this column
+     */
+    loading?: boolean;
+    /**
+     * Whether there are more items to load
+     */
+    hasMore?: boolean;
+    /**
+     * Callback to load more items
+     */
+    onLoadMore?: () => void;
+    /**
+     * Callback to add a new item to this column
+     */
+    onAddItem?: () => void;
+    /**
+     * Total count of entities in this column
+     */
+    totalCount?: number;
+    /**
+     * Color of the column header indicator
+     */
+    color?: ChipColorKey | ChipColorScheme;
+    style?: React.CSSProperties;
+}
+
+// Memoized to prevent unnecessary re-renders when other columns change
+export const BoardColumn = memo(function BoardColumn<M extends Record<string, any>>({
+                                                                                        id,
+                                                                                        title,
+                                                                                        items,
+                                                                                        ItemComponent,
+                                                                                        isDragging,
+                                                                                        isDragOverColumn,
+                                                                                        allowReorder = false,
+                                                                                        loading = false,
+                                                                                        hasMore = false,
+                                                                                        onLoadMore,
+                                                                                        onAddItem,
+                                                                                        totalCount,
+                                                                                        color,
+                                                                                        style
+                                                                                    }: BoardColumnProps<M>) {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        isDragging: isColumnBeingDragged,
+        transform,
+        transition,
+    } = useSortable({
+        id,
+        data: { type: "COLUMN" },
+        disabled: !allowReorder
+    });
+
+    // Memoize combined style to avoid object recreation
+    const combinedStyle = useMemo(() => ({
+        ...style,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isColumnBeingDragged ? 2 : 1,
+    }), [style, transform, transition, isColumnBeingDragged]);
+
+    // Only apply drag listeners if reordering is allowed
+    const dragListeners = allowReorder ? listeners : {};
+
+    // Memoize className to avoid recomputation
+    const columnClassName = useMemo(() => cls(
+        "border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md",
+        defaultBorderMixin,
+        isColumnBeingDragged ? "ring-2 ring-primary" : ""
+    ), [isColumnBeingDragged]);
+
+    const headerClassName = useMemo(() => cls(
+        "flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out",
+        isColumnBeingDragged
+            ? "bg-surface-100 dark:bg-surface-900"
+            : "bg-surface-50 hover:bg-surface-100 dark:bg-surface-950 dark:hover:bg-surface-900",
+        allowReorder ? "cursor-grab" : ""
+    ), [isColumnBeingDragged, allowReorder]);
+
+    // Memoize items IDs array to avoid recreating on each render
+    const itemIds = useMemo(() => items.map(i => i.id), [items]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={combinedStyle}
+            {...attributes}
+            className={columnClassName}
+        >
+            <div
+                {...dragListeners}
+                className={headerClassName}
+            >
+                <div className="flex items-center gap-2">
+                    <BoardColumnTitle aria-label={`${title} item list`} color={color}>
+                        {title}
+                    </BoardColumnTitle>
+                    {totalCount !== undefined && (
+                        <span className="text-xs text-surface-500 dark:text-surface-400">
+                            {totalCount}
+                        </span>
+                    )}
+                </div>
+                {onAddItem && (
+                    <IconButton
+                        size="small"
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            onAddItem();
+                        }}
+                        className="opacity-60 hover:opacity-100"
+                    >
+                        <AddIcon size="small"/>
+                    </IconButton>
+                )}
+            </div>
+            <SortableContext
+                items={itemIds}
+                strategy={verticalListSortingStrategy}
+            >
+                <BoardSortableList
+                    columnId={id}
+                    items={items}
+                    ItemComponent={ItemComponent}
+                    isDragging={isDragging}
+                    isDragOverColumn={isDragOverColumn}
+                    loading={loading}
+                    hasMore={hasMore}
+                    onLoadMore={onLoadMore}
+                />
+            </SortableContext>
+        </div>
+    );
+}) as <M extends Record<string, any>>(props: BoardColumnProps<M>) => React.ReactElement;

package/src/components/EntityCollectionView/BoardColumnTitle.tsx

@@ -0,0 +1,45 @@
+import { ChipColorKey, ChipColorScheme, getColorSchemeForKey, cls } from "@firecms/ui";
+import React, { useMemo } from "react";
+
+export interface BoardColumnTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    "aria-label"?: string;
+    color?: ChipColorKey | ChipColorScheme;
+}
+
+export function BoardColumnTitle({
+    children,
+    className,
+    color,
+    ...props
+}: BoardColumnTitleProps) {
+    const colorScheme = useMemo(() => {
+        if (!color) return undefined;
+        if (typeof color === "string") {
+            return getColorSchemeForKey(color);
+        }
+        return color;
+    }, [color]);
+
+    return (
+        <h4
+            className={
+                cls("py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3",
+                    "text-sm font-semibold text-surface-800 dark:text-surface-200",
+                    className)
+            }
+            {...props}
+        >
+            {colorScheme && (
+                <div
+                    className="w-3 h-3 rounded-full flex-shrink-0"
+                    style={{
+                        backgroundColor: colorScheme.color
+                    }}
+                />
+            )}
+            {children}
+        </h4>
+    );
+}

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -0,0 +1,172 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { CircularProgress, cls } from "@firecms/ui";
+import { BoardItem, BoardItemViewProps } from "./board_types";
+
+interface BoardSortableListProps<M extends Record<string, any>> {
+    columnId: string;
+    items: BoardItem<M>[];
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    isDragging: boolean;
+    isDragOverColumn: boolean;
+    loading?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+}
+
+export function BoardSortableList<M extends Record<string, any>>({
+    columnId,
+    items,
+    ItemComponent,
+    isDragging,
+    isDragOverColumn,
+    loading = false,
+    hasMore = false,
+    onLoadMore,
+}: BoardSortableListProps<M>) {
+    const {
+        setNodeRef,
+    } = useDroppable({
+        id: columnId,
+        data: { type: "ITEM-LIST" }
+    });
+
+    // Infinite scroll sentinel ref - must be inside scrollable container
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const isLoadingRef = useRef(false);
+    isLoadingRef.current = loading;
+    const lastLoadTimeRef = useRef(0);
+
+    // Set up IntersectionObserver for infinite scroll
+    useEffect(() => {
+        if (!sentinelRef.current || !hasMore || !onLoadMore) return;
+
+        const sentinel = sentinelRef.current;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const now = Date.now();
+                if (
+                    entries[0].isIntersecting &&
+                    hasMore &&
+                    !isLoadingRef.current &&
+                    now - lastLoadTimeRef.current > 500
+                ) {
+                    lastLoadTimeRef.current = now;
+                    onLoadMore();
+                }
+            },
+            { threshold: 0.1 }
+        );
+
+        observer.observe(sentinel);
+
+        // Check if sentinel is already visible when effect runs
+        // This handles the case where the sentinel was visible before the observer was created
+        const rect = sentinel.getBoundingClientRect();
+        const containerRect = sentinel.parentElement?.getBoundingClientRect();
+        if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {
+            const now = Date.now();
+            if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+                lastLoadTimeRef.current = now;
+                onLoadMore();
+            }
+        }
+
+        return () => observer.disconnect();
+    }, [hasMore, onLoadMore]);
+
+    // Memoize className to avoid recomputation on every render
+    const containerClassName = useMemo(() => cls(
+        "flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto no-scrollbar flex-1 rounded-md",
+        isDragging && isDragOverColumn
+            ? "bg-surface-accent-200 dark:bg-surface-800"
+            : isDragging
+                ? "bg-surface-50 dark:bg-surface-950 hover:bg-surface-accent-100 dark:hover:bg-surface-800"
+                : "bg-surface-50 dark:bg-surface-950"
+    ), [isDragging, isDragOverColumn]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={containerClassName}
+            style={{ minHeight: 80 }}
+        >
+            {items.length === 0 && !loading ? (
+                <div className="flex-1 flex items-center justify-center">
+                    <span className="text-xs text-surface-400 dark:text-surface-500">
+                        No items
+                    </span>
+                </div>
+            ) : (
+                <>
+                    {items.map((item, index) => (
+                        <SortableItem
+                            key={item.id}
+                            item={item}
+                            index={index}
+                            columnId={columnId}
+                            ItemComponent={ItemComponent}
+                        />
+                    ))}
+                    {/* Infinite scroll sentinel - inside scrollable container */}
+                    {(loading || hasMore) && (
+                        <div ref={sentinelRef} className="flex items-center justify-center py-2 min-h-6">
+                            {loading && <CircularProgress size="smallest" />}
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+interface SortableItemProps<M extends Record<string, any>> {
+    item: BoardItem<M>;
+    index: number;
+    columnId: string;
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+}
+
+// Memoized to prevent unnecessary re-renders when other items in the list change
+const SortableItem = memo(function SortableItem<M extends Record<string, any>>({
+    item,
+    index,
+    columnId,
+    ItemComponent,
+}: SortableItemProps<M>) {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        isDragging: isItemBeingDragged,
+        transform,
+        transition,
+    } = useSortable({
+        id: item.id,
+        data: {
+            type: "ITEM",
+            columnId
+        }
+    });
+
+    // Memoize style object to prevent object recreation on each render
+    const sortableStyle = useMemo(() => ({
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isItemBeingDragged ? 2 : 1,
+        opacity: isItemBeingDragged ? 0 : 1,
+    }), [transform, transition, isItemBeingDragged]);
+
+    return (
+        <div ref={setNodeRef} style={sortableStyle} {...attributes} {...listeners}>
+            <ItemComponent
+                item={item}
+                isDragging={isItemBeingDragged}
+                index={index}
+            />
+        </div>
+    );
+}) as <M extends Record<string, any>>(props: SortableItemProps<M>) => React.ReactElement;