@rebasepro/admin 0.6.1 → 0.7.0

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -1,11 +1,12 @@
 import type { EntityCollection } from "@rebasepro/types";
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { CollectionSize, Entity, EntityTableController, SelectionController } from "@rebasepro/types";
 import { EntityCard } from "./EntityCard";
 import {
     cls,
     CircularProgress,
-    Typography
+    Typography,
+    CardView
 } from "@rebasepro/ui";
 import { useComponentOverride } from "@rebasepro/core";
 
@@ -92,8 +93,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 }: EntityCollectionCardViewProps<M>) {
 
     const ResolvedEntityCard = useComponentOverride("Collection.Card", EntityCard) as typeof EntityCard;
-    const containerRef = useRef<HTMLDivElement>(null);
-    const hasRestoredScroll = useRef(false);
 
     const {
         data,
@@ -106,116 +105,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
         paginationEnabled
     } = tableController;
 
-    // Track if we're currently loading to prevent multiple simultaneous load requests
-    const isLoadingMore = useRef(false);
-
-    // Keep mutable refs for values used in the scroll listener callback
-    // to avoid re-attaching the listener every time pagination state changes.
-    const paginationStateRef = useRef({ paginationEnabled,
-noMoreToLoad,
-dataLoading,
-itemCount,
-pageSize });
-    useEffect(() => {
-        paginationStateRef.current = { paginationEnabled,
-noMoreToLoad,
-dataLoading,
-itemCount,
-pageSize };
-    }, [paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize]);
-
-    // Reset loading flag when new data arrives (separate effect, like list view)
-    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;
-
-            // Infinite scroll: trigger load-more when near the bottom
-            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(); // initial measurement
-
-        return () => {
-            scrollEl.removeEventListener("scroll", onScrollEvent);
-            ro.disconnect();
-            if (rafId !== null) cancelAnimationFrame(rafId);
-        };
-    }, [setItemCount]);
-
-    // Scroll restoration — deferred to after layout paint
-    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 when user scrolls
-    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 handleEntityClick = useCallback((entity: Entity<M>) => {
         onEntityClick?.(entity);
     }, [onEntityClick]);
@@ -224,84 +113,45 @@ pageSize };
         selectionController?.toggleEntitySelection(entity, selected);
     }, [selectionController]);
 
-    const isEntitySelected = useCallback((entity: Entity<M>) => {
-        return selectionController?.isEntitySelected(entity) ?? false;
-    }, [selectionController]);
-
-    const isEntityHighlighted = useCallback((entity: Entity<M>) => {
-        return highlightedEntities?.some(e => e.id === entity.id && e.path === entity.path) ?? false;
-    }, [highlightedEntities]);
+    const selectedIds = useMemo(() => new Set(selectionController?.selectedEntities.map(e => e.id)), [selectionController?.selectedEntities]);
+    const highlightedIds = useMemo(() => new Set(highlightedEntities?.map(e => e.id)), [highlightedEntities]);
 
-    const gridColumnsClass = getGridColumnsClass(size);
-
-    // Initial loading state (no data yet)
-    const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;
-    // Empty state
-    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+    const handleRowSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        handleSelectionChange(entity, selected);
+    }, [handleSelectionChange]);
 
     return (
-        <div
-            ref={containerRef}
-            className="w-full p-4"
-        >
-            {/* Error state */}
-            {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>
-            ) : (
-                <>
-                    {/* Card Grid with max-width container */}
-                    <div className="max-w-7xl mx-auto">
-                        <div className={cls(
-                            "grid gap-4",
-                            gridColumnsClass
-                        )}>
-                            {data.map((entity) => (
-                                <ResolvedEntityCard
-                                    key={`${entity.path}_${entity.id}`}
-                                    entity={entity}
-                                    collection={collection}
-                                    onClick={handleEntityClick}
-                                    selected={isEntitySelected(entity)}
-                                    highlighted={isEntityHighlighted(entity)}
-                                    onSelectionChange={handleSelectionChange}
-                                    selectionEnabled={selectionEnabled}
-                                    size={size}
-                                />
-                            ))}
-                        </div>
-
-                        {/* Load more trigger / Loading indicator */}
-                        <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>
+        <CardView<Entity<M>>
+            data={data}
+            dataLoading={dataLoading}
+            noMoreToLoad={noMoreToLoad}
+            dataLoadingError={dataLoadingError}
+            itemCount={itemCount}
+            setItemCount={setItemCount}
+            pageSize={pageSize}
+            paginationEnabled={paginationEnabled}
+            onItemClick={handleEntityClick}
+            selectedIds={selectedIds}
+            highlightedIds={highlightedIds}
+            selectionEnabled={selectionEnabled}
+            onSelectionChange={handleRowSelectionChange}
+            onScroll={onScroll}
+            initialScroll={initialScroll}
+            size={size}
+            emptyComponent={emptyComponent}
+            renderCard={useCallback((entity, { selected, highlighted, onClick }) => (
+                <ResolvedEntityCard
+                    key={`${entity.path}_${entity.id}`}
+                    entity={entity}
+                    collection={collection}
+                    onClick={onClick as any}
+                    selected={selected}
+                    highlighted={highlighted}
+                    onSelectionChange={handleRowSelectionChange}
+                    selectionEnabled={selectionEnabled}
+                    size={size}
+                />
+            ), [collection, selectionEnabled, size, handleRowSelectionChange, ResolvedEntityCard])}
+        />
     );
 }

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -10,7 +10,8 @@ import {
     defaultBorderMixin,
     IconButton,
     Tooltip,
-    Typography
+    Typography,
+    ListView
 } from "@rebasepro/ui";
 import { PropertyPreview } from "../../preview";
 import {
@@ -510,192 +511,62 @@ customEntityActions });
 
     const rowClasses = getRowClasses(size);
 
-    // Initial loading state (no data yet)
-    const isInitialLoading = dataLoading && data.length === 0;
-    // Empty state
-    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
-
-    // ── Virtualization: scroll-parent windowing ──
-    const estimatedRowHeight = getEstimatedRowHeight(size);
-    const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
-    const [viewportHeight, setViewportHeight] = useState(800);
-
-    // Keep mutable refs for values used in the scroll handler to avoid
-    // re-attaching the listener every time pagination state changes.
-    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();
-
-            // How much of the list has scrolled past the viewport top
-            const listTopRelative = listRect.top - scrollRect.top;
-            setEffectiveScrollTop(Math.max(0, -listTopRelative));
-            setViewportHeight(scrollRect.height);
-
-            // Infinite scroll: trigger load-more when near the bottom
-            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);
-        };
+    const selectedIds = useMemo(() => new Set(selectionController?.selectedEntities.map(e => e.id)), [selectionController?.selectedEntities]);
+    const highlightedIds = useMemo(() => new Set(highlightedEntities?.map(e => e.id)), [highlightedEntities]);
 
-        scrollEl.addEventListener("scroll", onScroll, { passive: true });
-        const ro = new ResizeObserver(() => update());
-        ro.observe(scrollEl);
-        update(); // initial measurement
-
-        return () => {
-            scrollEl.removeEventListener("scroll", onScroll);
-            ro.disconnect();
-            if (rafId !== null) cancelAnimationFrame(rafId);
-        };
-    }, [setItemCount]); // stable deps only — mutable state via refs
-
-    // Compute the visible window of rows
-    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;
-
-    // Footer height for loading/end indicators
-    const footerHeight = dataLoading ? 48 : (!dataLoading && noMoreToLoad && data.length > 0) ? 32 : 0;
+    const handleRowSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        handleSelectionChange(entity, selected);
+    }, [handleSelectionChange]);
 
     return (
-        <div
-            ref={containerRef}
-            className={cls(
-                "w-full",
-                selectedEntityId === undefined && "rounded-lg overflow-hidden border " + defaultBorderMixin
-            )}
-        >
-            {/* Error state */}
-            {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>
-            ) : (
-                /* Spacer with total height — no internal scroll.
-                   The nearest scrollable ancestor provides the scrollbar. */
-                <div style={{ height: totalHeight + footerHeight,
-position: "relative" }}>
-                    {/* Windowed rows */}
-                    <div style={{ position: "absolute",
-top: offsetY,
-left: 0,
-right: 0 }}>
-                        {visibleData.map((entity, i) => {
-                            const actualIndex = startIndex + i;
-                            const isLast = actualIndex === data.length - 1;
-                            return (
-                                <div
-                                    key={entity.id}
-                                    style={{ height: estimatedRowHeight }}
-                                    className={cls(
-                                        !isLast && "border-b",
-                                        !isLast && defaultBorderMixin
-                                    )}
-                                >
-                                    <ListRow
-                                        entity={entity}
-                                        collection={resolvedCollection}
-                                        onClick={handleEntityClick}
-                                        selected={isEntitySelected(entity)}
-                                        highlighted={isEntityHighlighted(entity)}
-                                        onSelectionChange={handleSelectionChange}
-                                        selectionEnabled={selectionEnabled}
-                                        columns={visibleColumns}
-                                        slotKeys={slotKeys}
-                                        rowClasses={rowClasses}
-                                        showImage={showImage}
-                                        size={size}
-                                        isLast={isLast}
-                                        isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
-                                        listViewActions={getListViewActions(entity)}
-                                        context={context}
-                                        path={path}
-                                        selectionController={selectionController}
-                                        openEntityMode={openEntityMode}
-                                    />
-                                </div>
-                            );
-                        })}
+        <ListView<Entity<M>>
+            data={data}
+            dataLoading={dataLoading}
+            noMoreToLoad={noMoreToLoad}
+            dataLoadingError={dataLoadingError}
+            itemCount={itemCount}
+            setItemCount={setItemCount}
+            pageSize={pageSize}
+            paginationEnabled={paginationEnabled}
+            onItemClick={handleEntityClick}
+            selectedIds={selectedIds}
+            highlightedIds={highlightedIds}
+            selectionEnabled={selectionEnabled}
+            emptyComponent={emptyComponent}
+            size={size}
+            selectedEntityId={selectedEntityId}
+            renderRow={useCallback(({ item: entity, style, className, selected, highlighted, isLast, onClick, onSelectionChange }) => {
+                return (
+                    <div
+                        key={entity.id}
+                        style={style}
+                        className={className}
+                    >
+                        <ListRow
+                            entity={entity}
+                            collection={resolvedCollection}
+                            onClick={handleEntityClick}
+                            selected={selected}
+                            highlighted={highlighted}
+                            onSelectionChange={handleRowSelectionChange}
+                            selectionEnabled={selectionEnabled}
+                            columns={visibleColumns}
+                            slotKeys={slotKeys}
+                            rowClasses={rowClasses}
+                            showImage={showImage}
+                            size={size}
+                            isLast={isLast}
+                            isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
+                            listViewActions={getListViewActions(entity)}
+                            context={context}
+                            path={path}
+                            selectionController={selectionController}
+                            openEntityMode={openEntityMode}
+                        />
                     </div>
-
-                    {/* Loading / end indicators pinned at the bottom */}
-                    {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>
+                );
+            }, [resolvedCollection, selectionEnabled, visibleColumns, slotKeys, rowClasses, showImage, size, selectedEntityId, getListViewActions, context, path, selectionController, openEntityMode, handleRowSelectionChange, handleEntityClick])}
+        />
     );
 }
 

package/src/components/EntityCollectionView/hooks/useKanbanDragAndDrop.ts

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from "react";
 import { setIn } from "@rebasepro/formex";
-import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext, AnalyticsController } from "@rebasepro/types";
+import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext, AnalyticsController, Entity } from "@rebasepro/types";
 import { saveEntityWithCallbacks } from "@rebasepro/core";
-import { BoardItem } from "../board_types";
+import { BoardItem } from "@rebasepro/ui";
 import { BoardDataController } from "../useBoardDataController";
 import { generateKeyBetween } from "fractional-indexing";
 
@@ -33,10 +33,10 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
     // to compute a single new sort key for the moved item.
     // Only one DB write per drag — the moved item gets its new key.
     const handleItemsReorder = useCallback(async (
-        items: BoardItem<M>[],
+        items: BoardItem<Entity<M>>[],
         moveInfo?: { itemId: string; sourceColumn: string; targetColumn: string; }
     ) => {
-        const entity = items.find(item => item.id === moveInfo?.itemId)?.entity;
+        const entity = items.find(item => item.id === moveInfo?.itemId)?.data;
         if (!entity || !moveInfo) return;
 
         analyticsController.onAnalyticsEvent?.("kanban_card_moved", {
@@ -64,10 +64,10 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
 
             // Get the order keys of the neighbours
             const prevKey = movedIndex > 0
-                ? (targetColumnItems[movedIndex - 1].entity.values?.[orderProperty] as string | null) ?? null
+                ? (targetColumnItems[movedIndex - 1].data.values?.[orderProperty] as string | null) ?? null
                 : null;
             const nextKey = movedIndex < targetColumnItems.length - 1
-                ? (targetColumnItems[movedIndex + 1].entity.values?.[orderProperty] as string | null) ?? null
+                ? (targetColumnItems[movedIndex + 1].data.values?.[orderProperty] as string | null) ?? null
                 : null;
 
             try {

package/src/components/EntityEditView.tsx

@@ -39,8 +39,9 @@ import {
     getIcon
 } from "@rebasepro/core";
 import { getEntityFromMemoryCache } from "@rebasepro/core";
-import { EntityForm } from "../form";
-import type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+import { EntityFormBinding } from "../form";
+import type { EntityFormBindingProps } from "../form";
+import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 // Lazy-load history view — only loaded when user clicks the HistoryIcon tab
@@ -85,7 +86,7 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     navigateBack?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
-    formProps?: Partial<EntityFormProps<M>>,
+    formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
      * Only applied when the form is in "new" mode (no entityId).
@@ -197,7 +198,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 }) {
 
     const ResolvedFormActions = useComponentOverride("Entity.FormActions", EntityEditViewFormActions);
-    const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityForm) as typeof EntityForm;
+    const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityFormBinding) as typeof EntityFormBinding;
     const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
 
     const context = useRebaseContext();