@rebasepro/ui 0.6.0 → 0.7.0

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-export const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
-export const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-export const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
+export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
+export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+export const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+export const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 export const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/src/views/CardView.tsx

@@ -0,0 +1,281 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import {
+    CircularProgress,
+    Typography
+} from "../components";
+import { cls } from "../util";
+
+import { CollectionSize } from "./ListView";
+
+export type CardViewProps<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;
+
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+    initialScroll?: number;
+
+    size?: CollectionSize;
+    renderCard: (
+        item: T,
+        extra: {
+            selected: boolean;
+            highlighted: boolean;
+            onSelectionChange: (selected: boolean) => void;
+            onClick: (e: React.MouseEvent) => void;
+        }
+    ) => React.ReactNode;
+    emptyComponent?: React.ReactNode;
+};
+
+function getGridColumnsClass(size: CollectionSize): string {
+    switch (size) {
+        case "xs":
+            return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
+        case "s":
+            return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
+        case "m":
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+        case "l":
+            return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
+        case "xl":
+            return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
+        default:
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+    }
+}
+
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+    let parent = element.parentElement;
+    while (parent) {
+        const overflowY = window.getComputedStyle(parent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return document.documentElement;
+}
+
+export function CardView<T>({
+    data,
+    dataLoading = false,
+    noMoreToLoad = false,
+    dataLoadingError,
+    itemCount,
+    setItemCount,
+    pageSize = 50,
+    paginationEnabled = true,
+
+    onItemClick,
+    selectedIds,
+    highlightedIds,
+    selectionEnabled = true,
+    onSelectionChange,
+
+    onScroll,
+    initialScroll,
+    size = "m",
+    renderCard,
+    emptyComponent
+}: CardViewProps<T>) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hasRestoredScroll = useRef(false);
+    const isLoadingMore = useRef(false);
+
+    // Sync mutable ref with pagination settings to avoid resetting listeners
+    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });
+    useEffect(() => {
+        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };
+    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
+
+    useEffect(() => {
+        if (!dataLoading) isLoadingMore.current = false;
+    }, [dataLoading]);
+
+    // Infinite scroll and resize observer
+    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 { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+            if (
+                pe &&
+                !nm &&
+                !isLoadingMore.current &&
+                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400
+            ) {
+                isLoadingMore.current = true;
+                setItemCount?.((ic ?? ps) + ps);
+            }
+        };
+
+        const onScrollEvent = () => {
+            if (rafId === null) rafId = requestAnimationFrame(update);
+        };
+
+        scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+        const ro = new ResizeObserver(() => update());
+        ro.observe(scrollEl);
+        update();
+
+        return () => {
+            scrollEl.removeEventListener("scroll", onScrollEvent);
+            ro.disconnect();
+            if (rafId !== null) cancelAnimationFrame(rafId);
+        };
+    }, [setItemCount]);
+
+    // Scroll restoration
+    useEffect(() => {
+        if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
+
+        const scrollEl = getScrollParent(containerRef.current);
+        if (!scrollEl) return;
+
+        let attempts = 0;
+        const maxAttempts = 5;
+
+        const tryRestore = () => {
+            if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
+                scrollEl.scrollTop = initialScroll;
+                hasRestoredScroll.current = true;
+            } else {
+                attempts++;
+                requestAnimationFrame(tryRestore);
+            }
+        };
+
+        requestAnimationFrame(tryRestore);
+    }, [initialScroll, data.length]);
+
+    // Scroll tracking: call onScroll callback
+    const lastScrollOffset = useRef(0);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el || !onScroll) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
+
+        const handleScroll = () => {
+            const currentOffset = scrollEl.scrollTop;
+            const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
+            lastScrollOffset.current = currentOffset;
+            onScroll({
+                scrollDirection: direction,
+                scrollOffset: currentOffset,
+                scrollUpdateWasRequested: false
+            });
+        };
+
+        scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+        return () => scrollEl.removeEventListener("scroll", handleScroll);
+    }, [onScroll]);
+
+    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 gridColumnsClass = getGridColumnsClass(size);
+
+    const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;
+    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+
+    return (
+        <div
+            ref={containerRef}
+            className="w-full p-4"
+        >
+            {dataLoadingError && data.length === 0 ? (
+                <div className="h-full 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 className="max-w-7xl mx-auto">
+                    <div className={cls("grid gap-4", gridColumnsClass)}>
+                        {data.map((item, index) => {
+                            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 || index}>
+                                    {renderCard(item, {
+                                        selected,
+                                        highlighted,
+                                        onSelectionChange: handleSelectionChange,
+                                        onClick: handleClick
+                                    })}
+                                </React.Fragment>
+                            );
+                        })}
+                    </div>
+
+                    <div className="flex items-center justify-center py-8">
+                        {dataLoading && (
+                            <CircularProgress size="small"/>
+                        )}
+                        {!dataLoading && noMoreToLoad && data.length > 0 && (
+                            <Typography variant="caption" color="secondary">
+                                All {data.length} entries loaded
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/views/CollectionView/CollectionCardView.tsx

@@ -0,0 +1,270 @@
+"use client";
+import React, { useCallback, useMemo } from "react";
+import { CardView } from "../CardView";
+import { Card } from "../../components/Card";
+import { Typography } from "../../components/Typography";
+import { Checkbox } from "../../components/Checkbox";
+import { DefaultCellRenderer } from "./DefaultCellRenderer";
+import { cls } from "../../util";
+import { cardSelectedMixin, fieldBackgroundMixin } from "../../styles";
+import type {
+    CollectionPropertyConfig,
+    CollectionDataController,
+    CellRendererOverride,
+    CollectionViewSize,
+    CollectionSelectionController,
+} from "./CollectionViewTypes";
+
+import { getValueInPath } from "./utils";
+
+/**
+ * Props for the {@link CollectionCardView} component.
+ * @group Collection View
+ */
+export type CollectionCardViewProps<T = Record<string, unknown>> = {
+    dataController: CollectionDataController<T>;
+    properties: Record<string, CollectionPropertyConfig>;
+    propertiesOrder?: string[];
+    idProperty?: string;
+    titleProperty?: string;
+    onRowClick?: (row: T) => void;
+    cellRenderer?: CellRendererOverride<T>;
+    size?: CollectionViewSize;
+    selectionEnabled?: boolean;
+    selectionController?: CollectionSelectionController<T>;
+    highlightedItems?: T[];
+    emptyComponent?: React.ReactNode;
+    className?: string;
+};
+
+/**
+ * Headless card grid view that wraps {@link CardView}.
+ *
+ * Renders each item as a card with an optional image, title,
+ * preview properties, and selection support.
+ *
+ * @group Collection View
+ */
+export function CollectionCardView<T extends Record<string, unknown> = Record<string, unknown>>({
+    dataController,
+    properties,
+    propertiesOrder,
+    idProperty = "id",
+    titleProperty,
+    onRowClick,
+    cellRenderer,
+    size = "m",
+    selectionEnabled,
+    selectionController,
+    highlightedItems,
+    emptyComponent,
+    className,
+}: CollectionCardViewProps<T>) {
+    const order = useMemo(
+        () => propertiesOrder ?? Object.keys(properties),
+        [propertiesOrder, properties]
+    );
+
+    // ── Resolve title property ───────────────────────────────────────
+    const titlePropertyKey = useMemo(() => {
+        if (titleProperty) return titleProperty;
+        for (const key of order) {
+            const prop = properties[key];
+            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
+                return key;
+            }
+        }
+        return idProperty;
+    }, [titleProperty, order, properties, idProperty]);
+
+    // ── Resolve image property ───────────────────────────────────────
+    const imageProperty = useMemo(() => {
+        for (const key of order) {
+            const prop = properties[key];
+            if (prop && prop.type === "string" && prop.storage) {
+                return key;
+            }
+        }
+        return undefined;
+    }, [order, properties]);
+
+    // ── Preview properties (up to 3) ─────────────────────────────────
+    const previewProperties = useMemo(() => {
+        const result: { key: string; property: CollectionPropertyConfig }[] = [];
+        for (const key of order) {
+            if (key === titlePropertyKey || key === imageProperty) continue;
+            const prop = properties[key];
+            if (prop && !prop.hideFromCollection) {
+                result.push({ key, property: prop });
+                if (result.length >= 3) break;
+            }
+        }
+        return result;
+    }, [order, properties, titlePropertyKey, imageProperty]);
+
+    // ── Selection IDs ────────────────────────────────────────────────
+    const selectedIds = useMemo(() => {
+        if (!selectionController?.selectedItems) return undefined;
+        const ids = new Set<string | number>();
+        for (const item of selectionController.selectedItems) {
+            const id = getValueInPath(item as Record<string, unknown>, idProperty);
+            if (id !== undefined && id !== null) {
+                ids.add(id as string | number);
+            }
+        }
+        return ids;
+    }, [selectionController?.selectedItems, idProperty]);
+
+    // ── Highlighted IDs ──────────────────────────────────────────────
+    const highlightedIds = useMemo(() => {
+        if (!highlightedItems) return undefined;
+        const ids = new Set<string | number>();
+        for (const item of highlightedItems) {
+            const id = getValueInPath(item as Record<string, unknown>, idProperty);
+            if (id !== undefined && id !== null) {
+                ids.add(id as string | number);
+            }
+        }
+        return ids;
+    }, [highlightedItems, idProperty]);
+
+    // ── Selection handler ────────────────────────────────────────────
+    const handleSelectionChange = useCallback(
+        (item: T, selected: boolean) => {
+            if (!selectionController) return;
+            selectionController.setSelectedItems((prev) => {
+                if (selected) {
+                    return [...prev, item];
+                }
+                const itemId = getValueInPath(item as Record<string, unknown>, idProperty);
+                return prev.filter((existing) => {
+                    const existingId = getValueInPath(existing as Record<string, unknown>, idProperty);
+                    return existingId !== itemId;
+                });
+            });
+        },
+        [selectionController, idProperty]
+    );
+
+    // ── Render card ──────────────────────────────────────────────────
+    const renderCard = useCallback(
+        (
+            item: T,
+            extra: {
+                selected: boolean;
+                highlighted: boolean;
+                onSelectionChange: (selected: boolean) => void;
+                onClick: (e: React.MouseEvent) => void;
+            }
+        ): React.ReactNode => {
+            const titleValue = getValueInPath(item as Record<string, unknown>, titlePropertyKey);
+            const imageValue = imageProperty
+                ? getValueInPath(item as Record<string, unknown>, imageProperty)
+                : undefined;
+            const hasImage = typeof imageValue === "string" && imageValue.length > 0;
+
+            return (
+                <Card
+                    onClick={(e) => { if (e) extra.onClick(e); }}
+                    className={cls(
+                        "overflow-hidden relative",
+                        extra.selected && cardSelectedMixin,
+                        extra.highlighted && !extra.selected && "ring-1 ring-primary/50"
+                    )}
+                >
+                    {/* Image */}
+                    {imageProperty && (
+                        hasImage ? (
+                            <img
+                                src={imageValue as string}
+                                alt=""
+                                className="w-full h-32 object-cover rounded-t-lg"
+                            />
+                        ) : (
+                            <div className={cls("h-24 rounded-t-lg", fieldBackgroundMixin)} />
+                        )
+                    )}
+
+                    {/* Selection checkbox */}
+                    {selectionEnabled && (
+                        <div
+                            className="absolute top-2 right-2"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <Checkbox
+                                checked={extra.selected}
+                                onCheckedChange={extra.onSelectionChange}
+                                size="small"
+                            />
+                        </div>
+                    )}
+
+                    {/* Title */}
+                    <Typography variant="subtitle2" noWrap className="px-3 pt-2 pb-1">
+                        {String(titleValue ?? "")}
+                    </Typography>
+
+                    {/* Preview properties */}
+                    {previewProperties.map(({ key, property }) => {
+                        const value = getValueInPath(item as Record<string, unknown>, key);
+
+                        if (cellRenderer) {
+                            const custom = cellRenderer({
+                                row: item,
+                                propertyKey: key,
+                                property,
+                                value,
+                                size: "small",
+                            });
+                            if (custom !== undefined) {
+                                return (
+                                    <div key={key} className="px-3 py-0.5">
+                                        {custom}
+                                    </div>
+                                );
+                            }
+                        }
+
+                        return (
+                            <div key={key} className="px-3 py-0.5">
+                                <DefaultCellRenderer
+                                    row={item}
+                                    propertyKey={key}
+                                    property={property}
+                                    value={value}
+                                    size="small"
+                                />
+                            </div>
+                        );
+                    })}
+
+                    <div className="pb-2" />
+                </Card>
+            );
+        },
+        [titlePropertyKey, imageProperty, previewProperties, cellRenderer, selectionEnabled]
+    );
+
+    return (
+        <div className={cls("w-full h-full overflow-auto", className)}>
+            <CardView<T>
+                data={dataController.data}
+                dataLoading={dataController.loading}
+                noMoreToLoad={dataController.noMoreToLoad}
+                dataLoadingError={dataController.error}
+                itemCount={dataController.itemCount}
+                setItemCount={dataController.setItemCount}
+                pageSize={dataController.pageSize}
+                paginationEnabled={dataController.paginationEnabled}
+                onItemClick={onRowClick}
+                selectedIds={selectedIds}
+                highlightedIds={highlightedIds}
+                selectionEnabled={!!selectionEnabled}
+                onSelectionChange={handleSelectionChange}
+                size={size}
+                renderCard={renderCard}
+                emptyComponent={emptyComponent}
+            />
+        </div>
+    );
+}