@rebasepro/ui 0.17.3 → 0.18.0

package/src/views/Kanban/BoardSortableList.tsx

@@ -1,182 +0,0 @@
-import React, { memo, useEffect, useMemo, useRef } from "react";
-import { useDroppable } from "@dnd-kit/core";
-import { useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { CircularProgress } from "../../components";
-import { cls } from "../../util";
-import { BoardItem, BoardItemViewProps } from "./board_types";
-
-interface BoardSortableListProps<T> {
-    columnId: string;
-    items: BoardItem<T>[];
-    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
-    isDragging: boolean;
-    isDragOverColumn: boolean;
-    loading?: boolean;
-    hasMore?: boolean;
-    error?: Error;
-    onLoadMore?: () => void;
-}
-
-export function BoardSortableList<T>({
-    columnId,
-    items,
-    ItemComponent,
-    isDragging,
-    isDragOverColumn,
-    loading = false,
-    hasMore = false,
-    error,
-    onLoadMore
-}: BoardSortableListProps<T>) {
-    const {
-        setNodeRef
-    } = useDroppable({
-        id: columnId,
-        data: { type: "ITEM-LIST" }
-    });
-
-    const sentinelRef = useRef<HTMLDivElement>(null);
-    const isLoadingRef = useRef(loading);
-    isLoadingRef.current = loading;
-    const lastLoadTimeRef = useRef(0);
-
-    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);
-
-        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]);
-
-    const containerClassName = useMemo(() => cls(
-        // The scrollbar stays: this is the only thing on the page that scrolls
-        // vertically, and hiding it left a column of cards with no sign that
-        // there were more below the fold.
-        "flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 rounded-md",
-        isDragging && isDragOverColumn
-            ? "bg-surface-accent-200 dark:bg-surface-900"
-            : isDragging
-                ? "bg-surface-50 dark:bg-surface-900 hover:bg-surface-accent-100 dark:hover:bg-surface-800"
-                : "bg-surface-50 dark:bg-surface-900"
-    ), [isDragging, isDragOverColumn]);
-
-    return (
-        <div
-            ref={setNodeRef}
-            className={containerClassName}
-            style={{ minHeight: 80 }}
-        >
-            <SortableContext
-                items={items.map(i => i.id)}
-                strategy={verticalListSortingStrategy}
-            >
-                {items.length === 0 && !loading ? (
-                    <div className="flex-1 flex items-center justify-center px-3 text-center">
-                        {/* "No items" over a header counting eleven of them is
-                            the wrong thing to say when the read failed. */}
-                        <span className={cls(
-                            "text-xs",
-                            error
-                                ? "text-red-600 dark:text-red-400"
-                                : "text-surface-400 dark:text-surface-500"
-                        )}>
-                            {error ? "Could not load this column" : "No items"}
-                        </span>
-                    </div>
-                ) : (
-                    <>
-                        {items.map((item, index) => (
-                            <SortableItem
-                                key={item.id}
-                                item={item}
-                                index={index}
-                                columnId={columnId}
-                                ItemComponent={ItemComponent}
-                            />
-                        ))}
-                        {(loading || hasMore) && (
-                            <div ref={sentinelRef} className="flex items-center justify-center py-2 min-h-6">
-                                {loading && <CircularProgress size="smallest"/>}
-                            </div>
-                        )}
-                    </>
-                )}
-            </SortableContext>
-        </div>
-    );
-}
-
-interface SortableItemProps<T> {
-    item: BoardItem<T>;
-    index: number;
-    columnId: string;
-    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
-}
-
-const SortableItem = memo(function SortableItem<T>({
-    item,
-    index,
-    columnId,
-    ItemComponent
-}: SortableItemProps<T>) {
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        isDragging: isItemBeingDragged,
-        transform,
-        transition
-    } = useSortable({
-        id: item.id,
-        data: {
-            type: "ITEM",
-            columnId
-        }
-    });
-
-    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 <T>(props: SortableItemProps<T>) => React.ReactElement;

package/src/views/Kanban/board_types.ts

@@ -1,80 +0,0 @@
-import { CSSProperties } from "react";
-
-export type ChipColorKey = "primary" | "secondary" | "success" | "warning" | "error" | "info" | "neutral" | string;
-export type ChipColorScheme = "filled" | "outlined" | "tinted" | string;
-
-/**
- * Item wrapper for elements in the Board component
- */
-export interface BoardItem<T = any> {
-    id: string;
-    data: T;
-}
-
-/**
- * Map of column keys to arrays of board items
- */
-export interface BoardItemMap<T = any> {
-    [columnKey: string]: BoardItem<T>[];
-}
-
-/**
- * Props passed to custom item render components
- */
-export interface BoardItemViewProps<T = any> {
-    item: BoardItem<T>;
-    isDragging: boolean;
-    isClone?: boolean;
-    isGroupedOver?: boolean;
-    style?: CSSProperties;
-    index?: number;
-}
-
-/**
- * Per-column loading state
- */
-export interface ColumnLoadingState {
-    [columnKey: string]: {
-        loading: boolean;
-        hasMore: boolean;
-        itemCount: number;
-        totalCount?: number;
-        /** Set when the column could not be read at all. */
-        error?: Error;
-    };
-}
-
-/**
- * Props for the Board component
- */
-export interface BoardProps<T, COLUMN extends string> {
-    data: BoardItem<T>[];
-    columns: COLUMN[];
-    columnLabels?: Record<COLUMN, string>;
-    columnColors?: Record<COLUMN, any>;
-    className?: string;
-    assignColumn: (item: BoardItem<T>) => COLUMN;
-    allowColumnReorder?: boolean;
-    onColumnReorder?: (columns: COLUMN[]) => void;
-    /**
-     * A card was dropped.
-     *
-     * `items` is the target column's contents in their new order — the moved
-     * card included — so the neighbours of the moved card are the cards it
-     * actually landed between. `sourceColumn` is where the card was picked up,
-     * which is not where it now sits whenever the two differ.
-     */
-    onItemsReorder?: (
-        items: BoardItem<T>[],
-        moveInfo?: {
-            itemId: string;
-            sourceColumn: COLUMN;
-            targetColumn: COLUMN;
-        }
-    ) => void;
-    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
-    columnLoadingState?: ColumnLoadingState;
-    onLoadMoreColumn?: (column: COLUMN) => void;
-    onAddItemToColumn?: (column: COLUMN) => void;
-    AddColumnComponent?: React.ReactNode;
-}

package/src/views/Kanban/index.tsx

@@ -1,5 +0,0 @@
-export * from "./board_types";
-export * from "./BoardColumnTitle";
-export * from "./BoardSortableList";
-export * from "./BoardColumn";
-export * from "./Board";

package/src/views/Kanban/placement.ts

@@ -1,62 +0,0 @@
-import { arrayMove } from "@dnd-kit/sortable";
-import { BoardItem } from "./board_types";
-
-export interface PlaceDroppedCardParams<T> {
-    /**
-     * The destination column as it stands at the moment of the drop. When the
-     * card came from another column it is normally already in here:
-     * `handleDragOver` moves it while the pointer is still down, which is what
-     * opens the gap under the cursor.
-     */
-    targetItems: BoardItem<T>[];
-    /** The card being dropped. */
-    movedItem: BoardItem<T>;
-    /** What the pointer was over — a card id, or the column's own droppable id. */
-    overId: string;
-    /** Whether the card was picked up in a different column than it landed in. */
-    changedColumn: boolean;
-}
-
-/**
- * Where a dropped card ends up in its destination column.
- *
- * Pulled out of the drop handler because it is the part that was wrong twice:
- * once appending a card that had been dropped into the middle of a column, and
- * once refusing to place a card at all when it was released over an empty
- * column rather than over another card. It is pure, so it can be checked
- * without driving a pointer.
- */
-export function placeDroppedCard<T>({
-    targetItems,
-    movedItem,
-    overId,
-    changedColumn
-}: PlaceDroppedCardParams<T>): BoardItem<T>[] {
-
-    const indexInTarget = targetItems.findIndex(i => i.id === movedItem.id);
-    const overIndex = targetItems.findIndex(i => i.id === overId);
-
-    // Not placed during the drag — drop straight into the slot. `-1` means the
-    // pointer was over the column itself (an empty one, or the space below the
-    // last card), which appends.
-    if (indexInTarget === -1) {
-        const placed = [...targetItems];
-        placed.splice(overIndex === -1 ? targetItems.length : overIndex, 0, movedItem);
-        return placed;
-    }
-
-    // Released over another card: that card's slot is the one the user chose.
-    if (overIndex !== -1) {
-        return arrayMove(targetItems, indexInTarget, overIndex);
-    }
-
-    // Released over the column rather than a card. The card is already sitting
-    // in the gap the drag opened, so its position is the one on screen —
-    // appending here is what used to send it to the bottom.
-    if (changedColumn) {
-        return targetItems;
-    }
-
-    // Same column, released below the last card.
-    return arrayMove(targetItems, indexInTarget, targetItems.length - 1);
-}

package/src/views/KanbanView.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Board } from "./Kanban/Board";
-import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./Kanban/board_types";
-
-export type KanbanViewProps<T, COLUMN extends string> = {
-    columns: COLUMN[];
-    columnLabels?: Record<COLUMN, string>;
-    columnColors?: Record<COLUMN, any>;
-    className?: string;
-    assignColumn: (item: BoardItem<T>) => COLUMN;
-    allowColumnReorder?: boolean;
-    onColumnReorder?: (columns: COLUMN[]) => void;
-    onItemsReorder?: (
-        items: BoardItem<T>[],
-        moveInfo?: {
-            itemId: string;
-            sourceColumn: COLUMN;
-            targetColumn: COLUMN;
-        }
-    ) => void;
-    ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
-    columnLoadingState?: ColumnLoadingState;
-    onLoadMoreColumn?: (column: COLUMN) => void;
-    onAddItemToColumn?: (column: COLUMN) => void;
-    AddColumnComponent?: React.ReactNode;
-    data: BoardItem<T>[];
-};
-
-export function KanbanView<T, COLUMN extends string>(props: KanbanViewProps<T, COLUMN>) {
-    return <Board {...props} />;
-}
-export type { BoardItem, BoardItemViewProps, ColumnLoadingState };

package/src/views/ListView.tsx

@@ -1,296 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-    CircularProgress,
-    Typography
-} from "../components";
-import { cls } from "../util";
-
-export type CollectionSize = "xs" | "s" | "m" | "l" | "xl";
-
-export type ListViewColumnDef<T> = {
-    key: string;
-    label: string;
-    align?: "left" | "center" | "right";
-    width?: string;
-    renderCell: (item: T) => React.ReactNode;
-    isTitle?: boolean;
-};
-
-export type ListViewProps<T> = {
-    data: T[];
-    dataLoading?: boolean;
-    noMoreToLoad?: boolean;
-    dataLoadingError?: Error;
-    itemCount?: number;
-    setItemCount?: (itemCount: number) => void;
-    pageSize?: number;
-    paginationEnabled?: boolean;
-
-    onItemClick?: (item: T) => void;
-    selectedIds?: Set<string | number>;
-    highlightedIds?: Set<string | number>;
-    selectionEnabled?: boolean;
-    onSelectionChange?: (item: T, selected: boolean) => void;
-    emptyComponent?: React.ReactNode;
-
-    size?: CollectionSize;
-    selectedEntityId?: string | number;
-
-    /**
-     * Rendered above the rows, inside the list's own frame, and only when there
-     * are rows to head. A column header over an empty state or a spinner labels
-     * nothing.
-     */
-    header?: React.ReactNode;
-
-    renderRow: (params: {
-        item: T;
-        index: number;
-        style: React.CSSProperties;
-        className: string;
-        selected: boolean;
-        highlighted: boolean;
-        isLast: boolean;
-        onClick: (e: React.MouseEvent) => void;
-        onSelectionChange: (selected: boolean) => void;
-    }) => React.ReactNode;
-};
-
-function getEstimatedRowHeight(size: CollectionSize): number {
-    switch (size) {
-        case "xs": return 44;
-        case "s": return 52;
-        case "m": return 64;
-        case "l": return 76;
-        case "xl": return 88;
-        default: return 64;
-    }
-}
-
-const OVERSCAN_COUNT = 8;
-const LOAD_MORE_THRESHOLD = 400;
-
-function getScrollParent(element: HTMLElement | null): HTMLElement | null {
-    let parent = element?.parentElement ?? null;
-    while (parent) {
-        const style = getComputedStyle(parent);
-        if (
-            style.overflowY === "auto" || style.overflowY === "scroll" ||
-            style.overflow === "auto" || style.overflow === "scroll"
-        ) {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    return document.documentElement;
-}
-
-export function ListView<T>({
-    data,
-    dataLoading = false,
-    noMoreToLoad = false,
-    dataLoadingError,
-    itemCount,
-    setItemCount,
-    pageSize = 50,
-    paginationEnabled = true,
-
-    onItemClick,
-    selectedIds,
-    highlightedIds,
-    selectionEnabled = true,
-    onSelectionChange,
-    emptyComponent,
-
-    size = "m",
-    selectedEntityId,
-    header,
-    renderRow
-}: ListViewProps<T>) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    // The rows' own box, which a header shifts down from the container's top.
-    // Virtualization measures against it rather than against the container, so
-    // the window of rendered rows stays the one the viewport is actually over.
-    const rowsRef = useRef<HTMLDivElement>(null);
-    const isLoadingMore = useRef(false);
-
-    // Reset loading gate when loading stops
-    useEffect(() => {
-        if (!dataLoading) isLoadingMore.current = false;
-    }, [dataLoading]);
-
-    // Virtualization scroll states
-    const estimatedRowHeight = getEstimatedRowHeight(size);
-    const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
-    const [viewportHeight, setViewportHeight] = useState(800);
-
-    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });
-    useEffect(() => {
-        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };
-    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
-
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el) return;
-        const scrollEl = getScrollParent(el);
-        if (!scrollEl) return;
-
-        let rafId: number | null = null;
-
-        const update = () => {
-            rafId = null;
-            const scrollRect = scrollEl.getBoundingClientRect();
-            const listRect = (rowsRef.current ?? el).getBoundingClientRect();
-
-            const listTopRelative = listRect.top - scrollRect.top;
-            setEffectiveScrollTop(Math.max(0, -listTopRelative));
-            setViewportHeight(scrollRect.height);
-
-            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
-            if (
-                pe &&
-                !nm &&
-                !isLoadingMore.current &&
-                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD
-            ) {
-                isLoadingMore.current = true;
-                setItemCount?.((ic ?? ps) + ps);
-            }
-        };
-
-        const onScroll = () => {
-            if (rafId === null) rafId = requestAnimationFrame(update);
-        };
-
-        scrollEl.addEventListener("scroll", onScroll, { passive: true });
-        const ro = new ResizeObserver(() => update());
-        ro.observe(scrollEl);
-        update();
-
-        return () => {
-            scrollEl.removeEventListener("scroll", onScroll);
-            ro.disconnect();
-            if (rafId !== null) cancelAnimationFrame(rafId);
-        };
-    }, [setItemCount]);
-
-    const totalHeight = data.length * estimatedRowHeight;
-    const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
-    const endIndex = Math.min(
-        data.length,
-        Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT
-    );
-    const visibleData = data.slice(startIndex, endIndex);
-    const offsetY = startIndex * estimatedRowHeight;
-
-    const footerHeight = dataLoading ? 48 : (!dataLoading && noMoreToLoad && data.length > 0) ? 32 : 0;
-
-    const isInitialLoading = dataLoading && data.length === 0;
-    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
-
-    const getItemId = useCallback((item: T): string | number => {
-        if (item && typeof item === "object" && "id" in item) {
-            const id = (item as Record<"id", unknown>).id;
-            return typeof id === "number" ? id : String(id);
-        }
-        return String(item);
-    }, []);
-
-    const borderMixinClass = "border-surface-200 dark:border-surface-800";
-
-    return (
-        <div
-            ref={containerRef}
-            className={cls(
-                "w-full",
-                selectedEntityId === undefined && `rounded-lg overflow-hidden border ${borderMixinClass}`
-            )}
-        >
-            {dataLoadingError && data.length === 0 ? (
-                <div className="flex items-center justify-center p-8">
-                    <Typography className="text-red-500">
-                        Error loading data: {dataLoadingError.message}
-                    </Typography>
-                </div>
-            ) : isInitialLoading ? (
-                <div className="flex items-center justify-center py-12 px-8">
-                    <CircularProgress size="small" />
-                </div>
-            ) : isEmpty ? (
-                <div className="w-full flex items-center justify-center py-12 px-8">
-                    {emptyComponent ?? (
-                        <Typography variant="label" color="secondary">
-                            No entries found
-                        </Typography>
-                    )}
-                </div>
-            ) : (
-                <>
-                    {header}
-                    <div ref={rowsRef} style={{ height: totalHeight + footerHeight, position: "relative" }}>
-                        <div style={{ position: "absolute", top: offsetY, left: 0, right: 0 }}>
-                            {visibleData.map((item, i) => {
-                                const actualIndex = startIndex + i;
-                                const isLast = actualIndex === data.length - 1;
-                                const id = getItemId(item);
-                                const selected = selectedIds?.has(id) ?? false;
-                                const highlighted = highlightedIds?.has(id) ?? false;
-
-                                const handleClick = (e: React.MouseEvent) => {
-                                    if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
-                                        e.preventDefault();
-                                        onSelectionChange?.(item, !selected);
-                                        return;
-                                    }
-                                    onItemClick?.(item);
-                                };
-
-                                const handleSelectionChange = (val: boolean) => {
-                                    onSelectionChange?.(item, val);
-                                };
-
-                                return (
-                                    <React.Fragment key={id || actualIndex}>
-                                        {renderRow({
-                                            item,
-                                            index: actualIndex,
-                                            style: { height: estimatedRowHeight, overflow: "hidden" },
-                                            className: cls(
-                                                !isLast && "border-b",
-                                                !isLast && borderMixinClass
-                                            ),
-                                            selected,
-                                            highlighted,
-                                            isLast,
-                                            onClick: handleClick,
-                                            onSelectionChange: handleSelectionChange
-                                        })}
-                                    </React.Fragment>
-                                );
-                            })}
-                        </div>
-
-                        {dataLoading && (
-                            <div
-                                className="flex items-center justify-center py-3"
-                                style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
-                            >
-                                <CircularProgress size="small" />
-                            </div>
-                        )}
-                        {!dataLoading && noMoreToLoad && data.length > 0 && (
-                            <div
-                                className="flex items-center justify-center py-2 dark:bg-surface-900"
-                                style={{ position: "absolute", top: totalHeight, left: 0, right: 0 }}
-                            >
-                                <Typography variant="caption" color="secondary">
-                                    All {data.length} entries loaded
-                                </Typography>
-                            </div>
-                        )}
-                    </div>
-                </>
-            )}
-        </div>
-    );
-}

package/src/views/index.ts

@@ -1,5 +0,0 @@
-export * from "./ListView";
-export * from "./CardView";
-export * from "./KanbanView";
-export * from "./CollectionView";
-// ./TableView was a pure alias of VirtualTable — import VirtualTable instead.