@rebasepro/ui 0.6.1 → 0.7.0

package/src/views/Kanban/BoardSortableList.tsx

@@ -0,0 +1,170 @@
+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;
+    onLoadMore?: () => void;
+}
+
+export function BoardSortableList<T>({
+    columnId,
+    items,
+    ItemComponent,
+    isDragging,
+    isDragOverColumn,
+    loading = false,
+    hasMore = false,
+    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(
+        "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-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">
+                        <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}
+                            />
+                        ))}
+                        {(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

@@ -0,0 +1,70 @@
+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;
+    };
+}
+
+/**
+ * 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;
+    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

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

package/src/views/KanbanView.tsx

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,281 @@
+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;
+
+    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,
+    renderRow
+}: ListViewProps<T>) {
+    const containerRef = 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 = 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>
+            ) : (
+                <div 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 },
+                                        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/TableView.tsx

@@ -0,0 +1,7 @@
+export { VirtualTable as TableView } from "../components/VirtualTable/VirtualTable";
+export type { VirtualTableProps as TableViewProps } from "../components/VirtualTable/VirtualTableProps";
+
+export type OnColumnResizeParams = {
+    width: number;
+    key: string;
+};

package/src/views/index.ts

@@ -0,0 +1,5 @@
+export * from "./ListView";
+export * from "./CardView";
+export * from "./KanbanView";
+export * from "./TableView";
+export * from "./CollectionView";