@rebasepro/admin 0.6.0 → 0.7.0

package/src/components/EntityCollectionView/BoardSortableList.tsx

@@ -1,177 +0,0 @@
-import React, { memo, useEffect, useMemo, useRef } from "react";
-import { useDroppable } from "@dnd-kit/core";
-import { useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { CircularProgress, cls } from "@rebasepro/ui";
-import { BoardItem, BoardItemViewProps } from "./board_types";
-
-interface BoardSortableListProps<M extends Record<string, unknown>> {
-    columnId: string;
-    items: BoardItem<M>[];
-    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
-    isDragging: boolean;
-    isDragOverColumn: boolean;
-    loading?: boolean;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
-}
-
-export function BoardSortableList<M extends Record<string, unknown>>({
-    columnId,
-    items,
-    ItemComponent,
-    isDragging,
-    isDragOverColumn,
-    loading = false,
-    hasMore = false,
-    onLoadMore
-}: BoardSortableListProps<M>) {
-    const {
-        setNodeRef
-    } = useDroppable({
-        id: columnId,
-        data: { type: "ITEM-LIST" }
-    });
-
-    // Infinite scroll sentinel ref - must be inside scrollable container
-    const sentinelRef = useRef<HTMLDivElement>(null);
-    const isLoadingRef = useRef(false);
-    isLoadingRef.current = loading;
-    const lastLoadTimeRef = useRef(0);
-
-    // Set up IntersectionObserver for infinite scroll
-    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);
-
-        // Check if sentinel is already visible when effect runs
-        // This handles the case where the sentinel was visible before the observer was created
-        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]);
-
-    // Memoize className to avoid recomputation on every render
-    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}
-                            />
-                        ))}
-                        {/* Infinite scroll sentinel - inside scrollable container */}
-                        {(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<M extends Record<string, unknown>> {
-    item: BoardItem<M>;
-    index: number;
-    columnId: string;
-    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
-}
-
-// Memoized to prevent unnecessary re-renders when other items in the list change
-const SortableItem = memo(function SortableItem<M extends Record<string, unknown>>({
-    item,
-    index,
-    columnId,
-    ItemComponent
-}: SortableItemProps<M>) {
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        isDragging: isItemBeingDragged,
-        transform,
-        transition
-    } = useSortable({
-        id: item.id,
-        data: {
-            type: "ITEM",
-            columnId
-        }
-    });
-
-    // Memoize style object to prevent object recreation on each render
-    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 <M extends Record<string, unknown>>(props: SortableItemProps<M>) => React.ReactElement;

package/src/components/EntityCollectionView/board_types.ts

@@ -1,113 +0,0 @@
-import { CSSProperties } from "react";
-import { ChipColorKey, ChipColorScheme } from "@rebasepro/ui";
-import { Entity } from "@rebasepro/types";
-
-/**
- * Item wrapper for entities in the Board component
- */
-export interface BoardItem<M extends Record<string, unknown> = Record<string, unknown>> {
-    id: string;
-    entity: Entity<M>;
-}
-
-/**
- * Map of column keys to arrays of board items
- */
-export interface BoardItemMap<M extends Record<string, unknown> = Record<string, unknown>> {
-    [columnKey: string]: BoardItem<M>[];
-}
-
-/**
- * Props passed to custom item render components
- */
-export interface BoardItemViewProps<M extends Record<string, unknown> = Record<string, unknown>> {
-    item: BoardItem<M>;
-    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;
-        /** Total count of entities in column (may differ from itemCount if some lack orderProperty) */
-        totalCount?: number;
-    };
-}
-
-/**
- * Props for the Board component
- */
-export interface BoardProps<M extends Record<string, unknown>, COLUMN extends string> {
-    /**
-     * Array of board items (entities wrapped with id)
-     */
-    data: BoardItem<M>[];
-    /**
-     * Array of column keys/identifiers
-     */
-    columns: COLUMN[];
-    /**
-     * Labels for each column (optional, uses column key if not provided)
-     */
-    columnLabels?: Record<COLUMN, string>;
-    /**
-     * Colors for each column from enum values (optional)
-     */
-    columnColors?: Record<COLUMN, ChipColorKey | ChipColorScheme | undefined>;
-    /**
-     * CSS class name for the board container
-     */
-    className?: string;
-    /**
-     * Function to determine which column an item belongs to
-     */
-    assignColumn: (item: BoardItem<M>) => COLUMN;
-    /**
-     * Whether column reordering is allowed.
-     * Set to true only when a plugin provides persistence for column order.
-     */
-    allowColumnReorder?: boolean;
-    /**
-     * Callback when columns are reordered
-     */
-    onColumnReorder?: (columns: COLUMN[]) => void;
-    /**
-     * Callback when items are reordered or moved between columns
-     */
-    onItemsReorder?: (
-        items: BoardItem<M>[],
-        moveInfo?: {
-            itemId: string;
-            sourceColumn: COLUMN;
-            targetColumn: COLUMN;
-        }
-    ) => void;
-    /**
-     * Component to render individual items
-     */
-    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
-    /**
-     * Per-column loading state for pagination
-     */
-    columnLoadingState?: ColumnLoadingState;
-    /**
-     * Callback to load more items for a column
-     */
-    onLoadMoreColumn?: (column: COLUMN) => void;
-    /**
-     * Callback to add a new item to a specific column
-     */
-    onAddItemToColumn?: (column: COLUMN) => void;
-    /**
-     * Optional component to render at the end of the board for adding new columns
-     */
-    AddColumnComponent?: React.ReactNode;
-}

package/src/hooks/navigation/useNavigationRegistry.ts

@@ -1,164 +0,0 @@
-import type { EntityCollection } from "@rebasepro/types";
-import { useCallback, useRef, useMemo } from "react";
-import { CollectionRegistry, getParentReferencesFromPath, getSubcollections, removeInitialAndTrailingSlashes } from "@rebasepro/common";
-import { EntityReference, UserConfigurationPersistence } from "@rebasepro/types";
-import { mergeDeep } from "@rebasepro/utils";
-
-export function useNavigationRegistry(userConfigPersistence?: UserConfigurationPersistence) {
-    const collectionRegistryRef = useRef<CollectionRegistry>(new CollectionRegistry());
-
-    const getCollection = useCallback((
-        slugOrPath: string,
-        includeUserOverride = false
-    ): EntityCollection | undefined => {
-
-        const registry = collectionRegistryRef.current;
-
-        const cleanedPath = removeInitialAndTrailingSlashes(slugOrPath);
-        if (!cleanedPath) return undefined;
-
-        const pathSegments = cleanedPath.split("/");
-
-        let collectionPath = cleanedPath;
-        // If the path has an even number of segments, it points to an entity, so we get the parent collection
-        if (pathSegments.length > 0 && pathSegments.length % 2 === 0) {
-            collectionPath = pathSegments.slice(0, -1).join("/");
-        }
-
-        if (!collectionPath) return undefined;
-
-        let collection: EntityCollection | undefined;
-        try {
-            collection = registry.resolvePathToCollections(collectionPath).finalCollection;
-        } catch (e) {
-            console.debug(`Could not resolve path to collection: ${collectionPath}`, e);
-            return undefined;
-        }
-
-        if (!collection) {
-            return undefined;
-        }
-
-        const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(slugOrPath) : undefined;
-        const overriddenCollection = collection ? mergeDeep(collection, userOverride ?? {}) : undefined;
-
-        if (!overriddenCollection) return undefined;
-
-        let result: Partial<EntityCollection> | undefined = overriddenCollection;
-        const subcollections = "subcollections" in overriddenCollection ? overriddenCollection.subcollections : undefined;
-        const callbacks = overriddenCollection.callbacks;
-        result = {
-            ...result,
-            callbacks: result?.callbacks ?? callbacks
-        };
-        if (subcollections && "subcollections" in result) {
-            (result as Record<string, unknown>).subcollections = (result as Record<string, unknown>).subcollections ?? subcollections;
-        }
-
-        return { ...overriddenCollection,
-...result } as EntityCollection;
-
-    }, [userConfigPersistence]);
-
-    const getRawCollection = useCallback((slugOrPath: string): EntityCollection | undefined => {
-        const registry = collectionRegistryRef.current;
-        if (registry === undefined) return undefined;
-
-        const cleanedPath = removeInitialAndTrailingSlashes(slugOrPath);
-        if (!cleanedPath) return undefined;
-
-        return registry.getRaw(cleanedPath) as EntityCollection | undefined;
-    }, []);
-
-    const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
-        const registry = collectionRegistryRef.current;
-        if (registry === undefined)
-            throw Error("getCollectionFromPaths: Collections have not been initialised yet");
-
-        if (!pathSegments?.length) {
-            return undefined;
-        }
-
-        const path = pathSegments.reduce((acc, segment, i) => {
-            if (i === 0) return segment;
-            return `${acc}/fake_id/${segment}`;
-        }, "");
-
-        try {
-            const { finalCollection } = registry.resolvePathToCollections(path);
-            return finalCollection as EC | undefined;
-        } catch (e) {
-            console.debug(`Could not resolve path segments to collection: ${pathSegments.join("/")}`, e);
-            return undefined;
-        }
-    }, []);
-
-    const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
-        const registry = collectionRegistryRef.current;
-        if (!registry) {
-            return [];
-        }
-        return getParentReferencesFromPath({
-            path,
-            collections: registry.getCollections()
-        });
-    }, []);
-
-    const getParentCollectionSlugs = useCallback((path: string): string[] => {
-        const strings = path.split("/");
-        const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
-        oddPathSegments.pop();
-
-        const result: string[][] = [];
-
-        for (let i = 1; i <= oddPathSegments.length; i++) {
-            result.push(oddPathSegments.slice(0, i));
-        }
-
-        return result.map(r => getCollectionFromPaths(r)?.slug).filter(Boolean) as string[];
-    }, [getAllParentReferencesForPath, getCollectionFromPaths]);
-
-    const getParentEntityIds = useCallback((path: string): string[] => {
-        const strings = path.split("/");
-        const evenPathSegments = strings.filter((_, i) => i % 2 !== 0);
-        if (strings.length % 2 === 0) {
-            evenPathSegments.pop();
-        }
-        return evenPathSegments;
-    }, []);
-
-    const convertIdsToPaths = useCallback((ids: string[]): string[] => {
-        const registry = collectionRegistryRef.current;
-        if (!registry) {
-            throw new Error("convertIdsToPaths: collectionRegistryRef not initialised");
-        }
-        let currentCollections: EntityCollection[] = registry.getCollections();
-        const paths: string[] = [];
-        for (let i = 0; i < ids.length; i++) {
-            const id = ids[i];
-            const collection: EntityCollection | undefined = currentCollections.find(c => c.slug === id);
-            if (!collection)
-                throw Error(`Collection with id ${id} not found`);
-            paths.push(collection.slug);
-            currentCollections = getSubcollections(collection) ?? [];
-        }
-        return paths;
-    }, []);
-
-    return useMemo(() => ({
-        collectionRegistryRef,
-        getCollection,
-        getRawCollection,
-        getParentReferencesFromPath: getAllParentReferencesForPath,
-        getParentCollectionSlugs,
-        getParentEntityIds,
-        convertIdsToPaths
-    }), [
-        getCollection,
-        getRawCollection,
-        getAllParentReferencesForPath,
-        getParentCollectionSlugs,
-        getParentEntityIds,
-        convertIdsToPaths
-    ]);
-}

package/src/hooks/navigation/useNavigationURLs.ts

@@ -1,56 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { removeInitialAndTrailingSlashes, resolveCollectionPathIds } from "@rebasepro/common";
-import { CollectionRegistry } from "@rebasepro/common";
-
-export function encodePath(input: string) {
-    return encodeURIComponent(removeInitialAndTrailingSlashes(input))
-        .replaceAll("%2F", "/")
-        .replaceAll("%23", "#");
-}
-
-export function useNavigationURLs(basePath: string, baseCollectionPath: string, collectionRegistryRef: React.MutableRefObject<CollectionRegistry>) {
-
-    const cleanBasePath = removeInitialAndTrailingSlashes(basePath);
-    const cleanBaseCollectionPath = removeInitialAndTrailingSlashes(baseCollectionPath);
-
-    const homeUrl = cleanBasePath ? `/${cleanBasePath}` : "/";
-    const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
-
-    const buildAppUrlPath = useCallback((path: string): string => {
-        // Strip trailing /* wildcard from paths (used for nested routes in React Router)
-        const cleanPath = path.replace(/\/\*$/, "");
-        return cleanBasePath ? `/${cleanBasePath}/${encodePath(cleanPath)}` : `/${encodePath(cleanPath)}`;
-    }, [cleanBasePath]);
-
-    const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
-        [baseCollectionPath]);
-
-    const isUrlCollectionPath = useCallback(
-        (path: string): boolean => removeInitialAndTrailingSlashes(path + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"),
-        [fullCollectionPath]);
-
-    const urlPathToDataPath = useCallback((path: string): string => {
-        const decodedPath = decodeURIComponent(path);
-        if (decodedPath.startsWith(fullCollectionPath))
-            return decodedPath.replace(fullCollectionPath, "");
-        throw Error("Expected path starting with " + fullCollectionPath);
-    }, [fullCollectionPath]);
-
-    const resolveDatabasePathsFrom = useCallback((path: string): string => {
-        const registry = collectionRegistryRef.current;
-        if (!registry) {
-            return resolveCollectionPathIds(path, []);
-        }
-        return resolveCollectionPathIds(path, registry.getCollections());
-    }, [collectionRegistryRef]);
-
-    return useMemo(() => ({
-        homeUrl,
-        fullCollectionPath,
-        buildAppUrlPath,
-        buildUrlCollectionPath,
-        isUrlCollectionPath,
-        urlPathToDataPath,
-        resolveDatabasePathsFrom
-    }), [homeUrl, fullCollectionPath, buildAppUrlPath, buildUrlCollectionPath, isUrlCollectionPath, urlPathToDataPath, resolveDatabasePathsFrom]);
-}