@rebasepro/ui 0.17.3 → 0.18.0

package/src/views/Kanban/Board.tsx

@@ -1,384 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import {
-    closestCorners,
-    DndContext,
-    DragEndEvent,
-    DragOverEvent,
-    DragOverlay,
-    DragStartEvent,
-    PointerSensor,
-    useSensor,
-    useSensors
-} from "@dnd-kit/core";
-import { arrayMove, SortableContext } from "@dnd-kit/sortable";
-import { BoardColumn } from "./BoardColumn";
-import { placeDroppedCard } from "./placement";
-import { BoardItem, BoardItemMap, BoardProps } from "./board_types";
-import { cls } from "../../util";
-
-export function Board<T, COLUMN extends string>({
-    data,
-    columns: columnsProp,
-    columnLabels,
-    columnColors,
-    className,
-    assignColumn,
-    allowColumnReorder = false,
-    onColumnReorder,
-    onItemsReorder,
-    ItemComponent,
-    columnLoadingState,
-    onLoadMoreColumn,
-    onAddItemToColumn,
-    AddColumnComponent
-}: BoardProps<T, COLUMN>) {
-
-    const [activeItem, setActiveItem] = useState<BoardItem<T> | null>(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
-
-    /**
-     * Which column the card was picked up from.
-     *
-     * `handleDragOver` moves the card between columns in `itemMapState` while
-     * the pointer is still down — that is what makes the gap open up under the
-     * cursor. So by the time the drop is handled, looking the card up by id
-     * finds it in its *destination*, and the board was reporting the move as
-     * source === target: a cross-column drop looked like a plain reorder and
-     * the column property was never written. The card snapped back on the next
-     * fetch.
-     */
-    const dragSourceColumnRef = useRef<COLUMN | null>(null);
-
-    const [itemMapState, setItemMapState] = useState<BoardItemMap<T>>(() => {
-        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item: BoardItem<T>) => ({
-            ...prev,
-            [item.id]: assignColumn(item)
-        }), {});
-        return columnsProp.reduce(
-            (previous: BoardItemMap<T>, column: COLUMN) => ({
-                ...previous,
-                [column]: data.filter((item: BoardItem<T>) => dataColumnMap[item.id] === column)
-            }),
-            {} as BoardItemMap<T>
-        );
-    });
-
-    const sensors = useSensors(
-        useSensor(PointerSensor, {
-            activationConstraint: {
-                distance: 5
-            }
-        })
-    );
-
-    useEffect(() => {
-        if (isDragging) return;
-
-        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item) => ({
-            ...prev,
-            [item.id]: assignColumn(item)
-        }), {});
-
-        const newItemMap = columnsProp.reduce(
-            (previous: BoardItemMap<T>, column: COLUMN) => ({
-                ...previous,
-                [column]: data.filter((item: BoardItem<T>) => dataColumnMap[item.id] === column)
-            }),
-            {} as BoardItemMap<T>
-        );
-
-        setItemMapState(prevMap => {
-            let changed = false;
-
-            for (const col of columnsProp) {
-                const prevItems = prevMap[col] ?? [];
-                const newItems = newItemMap[col] ?? [];
-
-                if (prevItems.length !== newItems.length) {
-                    changed = true;
-                    continue;
-                }
-                for (let i = 0; i < prevItems.length; i++) {
-                    if (prevItems[i].id !== newItems[i].id || prevItems[i].data !== newItems[i].data) {
-                        changed = true;
-                        break;
-                    }
-                }
-            }
-
-            if (!changed) {
-                return prevMap;
-            }
-
-            const updated: BoardItemMap<T> = {};
-            for (const col of columnsProp) {
-                const prevItems = prevMap[col] ?? [];
-                const newItems = newItemMap[col] ?? [];
-
-                const prevById = new Map<string, BoardItem<T>>();
-                for (const item of prevItems) {
-                    prevById.set(item.id, item);
-                }
-
-                updated[col] = newItems.map(newItem => {
-                    const prev = prevById.get(newItem.id);
-                    if (prev && prev.data === newItem.data) {
-                        return prev;
-                    }
-                    return newItem;
-                });
-            }
-            return updated;
-        });
-    }, [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 === "ITEM") {
-            const columnId = findColumnByItemId(active.id as string);
-            dragSourceColumnRef.current = (columnId as COLUMN | undefined) ?? null;
-            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);
-
-        if (active.data.current?.type !== "ITEM") {
-            return;
-        }
-
-        const activeId = active.id as string;
-        const activeItemColumn = findColumnByItemId(activeId);
-        let overColumnForMove = findColumnByItemId(overId);
-
-        if (!overColumnForMove && overDataType === "ITEM-LIST") {
-            overColumnForMove = overId;
-        }
-        if (!overColumnForMove && columnsProp.includes(overId as COLUMN)) {
-            overColumnForMove = overId;
-        }
-
-        if (!activeItemColumn || !overColumnForMove) return;
-        if (activeItemColumn === overColumnForMove) return;
-
-        if (itemMapState[overColumnForMove]?.some(i => i.id === activeId)) {
-            return;
-        }
-
-        setItemMapState(currentMap => {
-            const activeItems = [...(currentMap[activeItemColumn] || [])];
-            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 activeTop = active.rect.current.translated?.top ?? 0;
-                    const activeHeight = active.rect.current.translated?.height ?? 0;
-                    const activeCenter = activeTop + activeHeight / 2;
-
-                    const overTop = over?.rect.top ?? 0;
-                    const overHeight = over?.rect.height ?? 0;
-                    const overCenter = overTop + overHeight / 2;
-
-                    const isBelowOverItem = activeCenter > overCenter;
-
-                    const modifier = isBelowOverItem ? 1 : 0;
-                    overIndex = overIndex >= 0 ? overIndex + modifier : overItems.length;
-                } else {
-                    overIndex = overItems.length;
-                }
-            }
-
-            const newItemMap = { ...currentMap };
-            const [moved] = activeItems.splice(activeIndex, 1);
-            overItems.splice(overIndex, 0, moved);
-            newItemMap[activeItemColumn] = activeItems;
-            newItemMap[overColumnForMove!] = overItems;
-            return newItemMap;
-        });
-    };
-
-    // Escape, or a drop outside the board. `handleDragOver` may already have
-    // moved the card between columns, so the next `data` effect has to be
-    // allowed to put it back.
-    const handleDragCancel = () => {
-        setIsDragging(false);
-        setActiveItem(null);
-        setDragOverColumnId(null);
-        dragSourceColumnRef.current = null;
-    };
-
-    const handleDragEnd = (event: DragEndEvent) => {
-        const {
-            active,
-            over
-        } = event;
-
-        const sourceColumn = dragSourceColumnRef.current;
-
-        setIsDragging(false);
-        setActiveItem(null);
-        setDragOverColumnId(null);
-        dragSourceColumnRef.current = null;
-
-        if (!over) return;
-
-        const activeId = active.id as string;
-        const overId = over.id as string;
-
-        if (active.data.current?.type === "COLUMN") {
-            if (activeId !== overId) {
-                const oldIndex = columnsProp.indexOf(activeId as COLUMN);
-                const newIndex = columnsProp.indexOf(overId as COLUMN);
-                if (oldIndex !== -1 && newIndex !== -1) {
-                    const reordered = arrayMove(columnsProp, oldIndex, newIndex);
-                    onColumnReorder?.(reordered);
-                }
-            }
-            return;
-        }
-
-        // Where the card sits right now — `handleDragOver` has already put it in
-        // the column being hovered, so this is the destination, not the origin.
-        const currentCol = findColumnByItemId(activeId) as COLUMN | undefined;
-        let targetCol = findColumnByItemId(overId) as COLUMN | undefined;
-
-        if (!targetCol) {
-            const overDataType = over.data.current?.type;
-            if (overDataType === "ITEM-LIST" || columnsProp.includes(overId as COLUMN)) {
-                targetCol = overId as COLUMN;
-            }
-        }
-        targetCol = targetCol ?? currentCol;
-
-        if (!currentCol || !targetCol) return;
-
-        const targetItems = itemMapState[targetCol] || [];
-        const movedItem = (itemMapState[currentCol] || []).find(i => i.id === activeId);
-        if (!movedItem) return;
-
-        const finalTargetItems = placeDroppedCard({
-            targetItems,
-            movedItem,
-            overId,
-            changedColumn: (sourceColumn ?? currentCol) !== targetCol
-        });
-
-        onItemsReorder?.(finalTargetItems, {
-            itemId: activeId,
-            // The column the pointer went down in. `currentCol` would report a
-            // cross-column move as a same-column reorder.
-            sourceColumn: (sourceColumn ?? currentCol),
-            targetColumn: targetCol
-        });
-    };
-
-    return (
-        <DndContext
-            sensors={sensors}
-            // `rectIntersection`, the default, only reports a target while the
-            // dragged rect physically overlaps it, and prefers whichever
-            // overlap is largest — on a board of tall columns that means a card
-            // held over a gap reports nothing, and one held near a column edge
-            // reports the neighbour. `closestCorners` is the sortable-list
-            // recommendation and is what makes the drop land where it looks
-            // like it will.
-            collisionDetection={closestCorners}
-            onDragStart={handleDragStart}
-            onDragOver={handleDragOver}
-            onDragEnd={handleDragEnd}
-            onDragCancel={handleDragCancel}
-        >
-            <div className={cls("flex flex-row h-full w-full overflow-x-auto p-4 select-none items-start", className)}>
-                <SortableContext items={columnsProp}>
-                    {columnsProp.map((col, index) => {
-                        const colItems = itemMapState[col] || [];
-                        const loadingState = columnLoadingState?.[col];
-                        return (
-                            <BoardColumn
-                                key={String(col)}
-                                id={String(col)}
-                                title={columnLabels?.[col] ?? String(col)}
-                                items={colItems}
-                                index={index}
-                                ItemComponent={ItemComponent}
-                                isDragging={isDragging}
-                                isDragOverColumn={dragOverColumnId === String(col)}
-                                allowReorder={allowColumnReorder}
-                                loading={loadingState?.loading}
-                                hasMore={loadingState?.hasMore}
-                                error={loadingState?.error}
-                                totalCount={loadingState?.totalCount}
-                                color={columnColors?.[col]}
-                                onLoadMore={onLoadMoreColumn ? () => onLoadMoreColumn(col) : undefined}
-                                onAddItem={onAddItemToColumn ? () => onAddItemToColumn(col) : undefined}
-                            />
-                        );
-                    })}
-                </SortableContext>
-                {AddColumnComponent}
-            </div>
-
-            {/* The overlay used to be positioned by hand, from `mousemove`
-                listeners on `window` and a grab offset measured off whatever
-                `[role='button']` the pointer went down on. dnd-kit already
-                tracks the pointer and already knows the grab offset — the
-                hand-rolled copy drifted from the position collision detection
-                was actually using, so the card you saw and the slot you got
-                were two different things. */}
-            {typeof document !== "undefined" && createPortal(
-                <DragOverlay dropAnimation={null} zIndex={9999}>
-                    {activeItem && (
-                        <ItemComponent
-                            item={activeItem}
-                            isDragging={true}
-                            isClone={true}
-                        />
-                    )}
-                </DragOverlay>,
-                document.body
-            )}
-        </DndContext>
-    );
-}

package/src/views/Kanban/BoardColumn.tsx

@@ -1,138 +0,0 @@
-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 {
-    IconButton
-} from "../../components";
-import { cls } from "../../util";
-import { iconSize, PlusIcon } from "../../icons";
-
-export interface BoardColumnProps<T> {
-    id: string;
-    title: string;
-    items: BoardItem<T>[];
-    index: number;
-    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
-    isDragging: boolean;
-    isDragOverColumn: boolean;
-    allowReorder?: boolean;
-    loading?: boolean;
-    hasMore?: boolean;
-    error?: Error;
-    onLoadMore?: () => void;
-    onAddItem?: () => void;
-    totalCount?: number;
-    color?: any;
-    style?: React.CSSProperties;
-}
-
-export const BoardColumn = memo(function BoardColumn<T>({
-    id,
-    title,
-    items,
-    ItemComponent,
-    isDragging,
-    isDragOverColumn,
-    allowReorder = false,
-    loading = false,
-    hasMore = false,
-    error,
-    onLoadMore,
-    onAddItem,
-    totalCount,
-    color,
-    style
-}: BoardColumnProps<T>) {
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        isDragging: isColumnBeingDragged,
-        transform,
-        transition
-    } = useSortable({
-        id,
-        data: { type: "COLUMN" },
-        disabled: !allowReorder
-    });
-
-    const combinedStyle = useMemo(() => ({
-        ...style,
-        transform: CSS.Translate.toString(transform),
-        transition,
-        zIndex: isColumnBeingDragged ? 2 : 1
-    }), [style, transform, transition, isColumnBeingDragged]);
-
-    const dragListeners = allowReorder ? listeners : {};
-
-    const columnClassName = useMemo(() => cls(
-        "border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-surface-200 dark:border-surface-800",
-        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-700"
-            : "bg-surface-50 hover:bg-surface-100 dark:bg-surface-800 dark:hover:bg-surface-700",
-        allowReorder ? "cursor-grab" : ""
-    ), [isColumnBeingDragged, allowReorder]);
-
-    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"
-                    >
-                        <PlusIcon size={iconSize.small}/>
-                    </IconButton>
-                )}
-            </div>
-            <SortableContext
-                items={itemIds}
-                strategy={verticalListSortingStrategy}
-            >
-                <BoardSortableList
-                    columnId={id}
-                    items={items}
-                    ItemComponent={ItemComponent}
-                    isDragging={isDragging}
-                    isDragOverColumn={isDragOverColumn}
-                    loading={loading}
-                    hasMore={hasMore}
-                    error={error}
-                    onLoadMore={onLoadMore}
-                />
-            </SortableContext>
-        </div>
-    );
-}) as <T>(props: BoardColumnProps<T>) => React.ReactElement;

package/src/views/Kanban/BoardColumnTitle.tsx

@@ -1,47 +0,0 @@
-import React, { useMemo } from "react";
-import { Typography } from "../../components";
-import { cls, getColorSchemeForKey } from "../../util";
-
-export interface BoardColumnTitleProps {
-    children: React.ReactNode;
-    className?: string;
-    "aria-label"?: string;
-    color?: any;
-}
-
-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 (
-        <Typography
-            variant="subtitle2"
-            component="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",
-                    className)
-            }
-            {...props}
-        >
-            {colorScheme && (
-                <div
-                    className="w-3 h-3 rounded-full flex-shrink-0"
-                    style={{
-                        backgroundColor: colorScheme.darkColor ?? colorScheme.color
-                    }}
-                />
-            )}
-            {children}
-        </Typography>
-    );
-}