@rebasepro/admin 0.6.1 → 0.8.0

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
-import { TableSize } from "@rebasepro/core";
+import { TableSize, useCustomizationController } from "@rebasepro/core";
+import {
+    VirtualTableInput,
+    VirtualTableNumberInput,
+    VirtualTableSwitch,
+    VirtualTableDateField
+} from "@rebasepro/ui";
 
-import { VirtualTableInput } from "./fields/VirtualTableInput";
 import { VirtualTableSelect } from "./fields/VirtualTableSelect";
-import { VirtualTableNumberInput } from "./fields/VirtualTableNumberInput";
-import { VirtualTableSwitch } from "./fields/VirtualTableSwitch";
-import { VirtualTableDateField } from "./fields/VirtualTableDateField";
 import { VirtualTableUserSelect } from "./fields/VirtualTableUserSelect";
 import { TableStorageUpload } from "./fields/TableStorageUpload";
 import { TableReferenceField } from "./fields/TableReferenceField";
@@ -63,33 +65,7 @@ export function getTableBindingForProperty(
 ): TableFieldConfig | undefined {
     const isAStorageProperty = isStorageProperty(property);
 
-    if (property.type === "string" && (property as StringProperty).reference?.path) {
-        return {
-            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }: TableFieldBindingProps) => {
-                const referenceProperty = (property as StringProperty).reference;
-                if (!referenceProperty) return null;
-                const referenceValue = internalValue ? new EntityReference({ id: internalValue as string,
- path: referenceProperty.path as string }) : undefined;
-                return (
-                    <TableReferenceField
-                        name={propertyKey}
-                        internalValue={referenceValue}
-                        updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
-                        disabled={disabled}
-                        size={size}
-                        path={referenceProperty.path as string}
-                        multiselect={false}
-                        previewProperties={referenceProperty.ui?.previewProperties}
-                        includeId={referenceProperty.includeId}
-                        includeEntityLink={referenceProperty.includeEntityLink}
-                        title={property.name}
-                        fixedFilter={referenceProperty.fixedFilter}
-                    />
-                );
-            },
-            allowScroll: false
-        };
-    } else if (isAStorageProperty) {
+    if (isAStorageProperty) {
         return {
             Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: TableFieldBindingProps) => (
                 <TableStorageUpload
@@ -183,7 +159,7 @@ export function getTableBindingForProperty(
                 ),
                 fullHeight: true
             };
-        } else if (stringProperty.ui?.markdown || !stringProperty.storage || !stringProperty.reference) {
+        } else if (stringProperty.ui?.markdown || !stringProperty.storage) {
             const multiline = Boolean(stringProperty.ui?.multiline) || Boolean(stringProperty.ui?.markdown);
             return {
                 Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
@@ -213,17 +189,21 @@ export function getTableBindingForProperty(
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => (
-                <VirtualTableDateField
-                    name={propertyKey}
-                    error={validationError ?? error}
-                    disabled={disabled}
-                    mode={(property as DateProperty).mode}
-                    focused={selected}
-                    internalValue={internalValue as Date}
-                    updateValue={updateValue}
-                />
-            ),
+            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => {
+                const { locale } = useCustomizationController();
+                return (
+                    <VirtualTableDateField
+                        name={propertyKey}
+                        error={validationError ?? error}
+                        disabled={disabled}
+                        mode={(property as DateProperty).mode}
+                        focused={selected}
+                        internalValue={internalValue as Date}
+                        updateValue={updateValue}
+                        locale={locale}
+                    />
+                );
+            },
             fullHeight: true,
             hideOverflow: false,
             allowScroll: false

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -5,10 +5,10 @@ import { Checkbox, Chip, cls, defaultBorderMixin, Markdown } from "@rebasepro/ui
 import { PropertyPreview } from "../../preview";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { IconForView } from "@rebasepro/core";
-import { BoardItemViewProps } from "./board_types";
+import { BoardItemViewProps } from "@rebasepro/ui";
 import { useCollectionSlotKeys, resolveEntitySlots } from "./useEntityPreviewSlots";
 
-export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<M> & {
+export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<Entity<M>> & {
     collection: EntityCollection<M>;
     onClick?: (entity: Entity<M>) => void;
     selected?: boolean;
@@ -35,7 +35,7 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
     onSelectionChange,
     selectionEnabled = false
 }: EntityBoardCardProps<M>) {
-    const entity = item.entity;
+    const entity = item.data;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -247,14 +247,14 @@ export function createEntityBoardCardComponent<M extends Record<string, unknown>
         onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
         selectionEnabled?: boolean;
     }
-): React.ComponentType<BoardItemViewProps<M>> {
-    return function EntityBoardCardWrapper(props: BoardItemViewProps<M>) {
+): React.ComponentType<BoardItemViewProps<Entity<M>>> {
+    return function EntityBoardCardWrapper(props: BoardItemViewProps<Entity<M>>) {
         return (
             <EntityBoardCard
                 {...props}
                 collection={collection}
                 onClick={options.onClick}
-                selected={options.isEntitySelected?.(props.item.entity)}
+                selected={options.isEntitySelected?.(props.item.data)}
                 onSelectionChange={options.onSelectionChange}
                 selectionEnabled={options.selectionEnabled}
             />

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -1,9 +1,6 @@
-
 import type { EntityCollection } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityTableController, EnumValueConfig, SaveEntityProps, SelectionController } from "@rebasepro/types";
-import { Board } from "./Board";
-import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./board_types";
 import { EntityBoardCard } from "./EntityBoardCard";
 import {
     Button,
@@ -19,7 +16,11 @@ import {
     iconSize,
     RefreshCwIcon,
     Tooltip,
-    Typography
+    Typography,
+    KanbanView,
+    BoardItem,
+    BoardItemViewProps,
+    ColumnLoadingState
 } from "@rebasepro/ui";
 import { resolveEnumValues } from "@rebasepro/common";
 import { getPropertyInPath } from "../../util/property_utils";
@@ -280,7 +281,7 @@ parentEntityIds,
         }).catch(e => console.warn("Failed to get total count:", e));
 
         accessor.count({
-            where: { [orderProperty]: "neq.null" }
+            where: { [orderProperty]: ["!=", null] }
         }).then(count => {
             orderedCount = count;
             completed++;
@@ -318,10 +319,10 @@ parentEntityIds,
     }, [columns, boardDataController.columnData]);
 
     // Convert entities to board items per column (data already sorted by orderProperty from controller)
-    const boardItems: BoardItem<M>[] = useMemo(() => {
+    const boardItems: BoardItem<Entity<M>>[] = useMemo(() => {
         return allEntities.map((entity: Entity<M>) => ({
             id: String(entity.id),
-            entity
+            data: entity
         }));
     }, [allEntities]);
 
@@ -341,11 +342,11 @@ parentEntityIds,
     }, [columns, boardDataController.columnData]);
 
     // Use the lookup map to assign columns - ensures items stay in the column they were fetched for
-    const assignColumn = useCallback((item: BoardItem<M>): string => {
+    const assignColumn = useCallback((item: BoardItem<Entity<M>>): string => {
         const column = entityColumnMap[item.id];
         if (column) return column;
         // Fallback: read from entity values (for newly created items or edge cases)
-        const value = item.entity.values?.[columnProperty];
+        const value = item.data.values?.[columnProperty];
         if (value && columns.includes(String(value))) return String(value);
         return columns[0] || "";
     }, [entityColumnMap, columnProperty, columns]);
@@ -462,12 +463,12 @@ parentEntityIds,
     // When ItemComponent identity changes, React.memo'd SortableItem remounts
     // the card → DOM is destroyed/recreated → CSS :hover state is lost → flicker.
     const ItemComponent = useMemo(() => {
-        const Comp = (props: BoardItemViewProps<M>) => (
+        const Comp = (props: BoardItemViewProps<Entity<M>>) => (
             <EntityBoardCard
                 {...props}
                 collection={collectionRef.current as EntityCollection<M>}
                 onClick={stableOnClick}
-                selected={isEntitySelectedRef.current(props.item.entity)}
+                selected={isEntitySelectedRef.current(props.item.data)}
                 onSelectionChange={stableOnSelectionChange}
                 selectionEnabled={selectionEnabledRef.current}
             />
@@ -592,7 +593,7 @@ parentEntityIds,
 
             {/* Main board */}
             <div className="flex-1 overflow-auto no-scrollbar">
-                <Board
+                <KanbanView
                     data={boardItems}
                     columns={columns}
                     columnLabels={columnLabels}

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])}
+        />
     );
 }