@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/CollectionViewBinding/ViewModeToggle.tsx

@@ -1,250 +0,0 @@
-
-import React, { useMemo } from "react";
-import { CollectionCustomView, CollectionSize, ViewMode } from "@rebasepro/cms-types";
-import {
-    Button,
-    ColumnsIcon,
-    iconSize,
-    KanbanIcon,
-    LayoutGridIcon,
-    ListIcon,
-    Popover,
-    Select,
-    SelectItem,
-    TableIcon,
-    ToggleButtonGroup,
-    ToggleButtonOption
-} from "@rebasepro/ui";
-import { getIcon, useTranslation } from "@rebasepro/app";
-
-export type KanbanPropertyOption = {
-    key: string;
-    label: string;
-};
-
-export type ViewModeToggleProps = {
-    viewMode?: ViewMode;
-    onViewModeChange?: (mode: ViewMode) => void;
-    /**
-     * Which view modes are enabled for this collection, in the order they
-     * should appear. Only these modes appear in the toggle.
-     * Defaults to the four built-ins.
-     */
-    enabledViews?: ViewMode[];
-    /**
-     * Custom views this collection can render, already resolved. Their `key`s
-     * appear in `enabledViews` alongside the built-ins, and each supplies the
-     * name and icon its entry is drawn with.
-     */
-    customViews?: CollectionCustomView<any>[];
-    /**
-     * Current size for card/table views
-     */
-    size?: CollectionSize;
-    /**
-     * Callback when size changes
-     */
-    onSizeChanged?: (size: CollectionSize) => void;
-    /**
-     * Controlled open state for the popover
-     */
-    open?: boolean;
-    /**
-     * Callback when popover open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Available properties that can be used for kanban columns (enum properties)
-     */
-    kanbanPropertyOptions?: KanbanPropertyOption[];
-    /**
-     * Currently selected property for kanban columns
-     */
-    selectedKanbanProperty?: string;
-    /**
-     * Callback when the kanban column property changes
-     */
-    onKanbanPropertyChange?: (property: string) => void;
-}
-
-const ALL_VIEW_MODES: ViewMode[] = ["list", "table", "cards", "kanban"];
-
-export function ViewModeToggle({
-    viewMode = "table",
-    onViewModeChange,
-    enabledViews = ALL_VIEW_MODES,
-    customViews,
-    size,
-    onSizeChanged,
-    open,
-    onOpenChange,
-    kanbanPropertyOptions,
-    selectedKanbanProperty,
-    onKanbanPropertyChange
-}: ViewModeToggleProps) {
-
-    const { t } = useTranslation();
-
-
-    // Get icon for current view mode.
-    //
-    // `small` on the trigger, matching the filters button beside it — the two
-    // labelled buttons open the toolbar together, and at 16 against its 20 this
-    // one read as the smaller of the pair. The options inside the popover stay
-    // at `smallest`, which is the size every other menu icon uses.
-    const activeCustomView = customViews?.find((v) => v.key === viewMode);
-
-    const getViewModeIcon = () => {
-        if (activeCustomView) {
-            // Falls back to the list glyph rather than rendering nothing, so a
-            // custom view that declared no icon still gets a trigger the same
-            // width as every other mode's.
-            return getIcon(activeCustomView.icon, undefined, undefined, "small")
-                ?? <ListIcon size={iconSize.small}/>;
-        }
-        if (viewMode === "kanban") return <KanbanIcon size={iconSize.small}/>;
-        if (viewMode === "cards") return <LayoutGridIcon size={iconSize.small}/>;
-        if (viewMode === "table") return <TableIcon size={iconSize.small}/>;
-        return <ListIcon size={iconSize.small}/>;
-    };
-
-    const getViewModeName = () => {
-        // The declared name, untranslated — it is app-supplied copy, and there
-        // is no key for it in the admin's bundles.
-        if (activeCustomView) return activeCustomView.name;
-        if (viewMode === "kanban") return t("board");
-        if (viewMode === "cards") return t("cards");
-        if (viewMode === "table") return t("table_view_mode");
-        return t("list");
-    };
-
-    const showSizeSelector = size && onSizeChanged &&
-        (activeCustomView
-            ? activeCustomView.sizeable
-            : viewMode === "list" || viewMode === "table" || viewMode === "cards");
-    const showKanbanPropertySelector = viewMode === "kanban" &&
-        kanbanPropertyOptions &&
-        kanbanPropertyOptions.length > 0 &&
-        onKanbanPropertyChange;
-
-    // Build toggle options, in `enabledViews` order.
-    //
-    // This used to return all four built-ins unconditionally: `enabledViews`
-    // was destructured and then read nowhere, so a collection that asked for
-    // `["list", "table"]` still offered cards and kanban, and picking one
-    // rendered it. Honouring the prop is what the doc comment always claimed,
-    // and it is what lets a custom-only `enabledViews` hide the switcher.
-    const viewModeOptions: ToggleButtonOption<ViewMode>[] = useMemo(() => {
-        const builtIns: Record<string, { label: string, icon: React.ReactNode }> = {
-            list: { label: t("list"), icon: <ListIcon size={iconSize.smallest}/> },
-            table: { label: t("table_view_mode"), icon: <TableIcon size={iconSize.smallest}/> },
-            cards: { label: t("cards"), icon: <LayoutGridIcon size={iconSize.smallest}/> },
-            kanban: { label: t("board"), icon: <KanbanIcon size={iconSize.smallest}/> }
-        };
-
-        return enabledViews.flatMap((mode) => {
-            const builtIn = builtIns[mode];
-            if (builtIn) return [{ value: mode, ...builtIn }];
-
-            const custom = customViews?.find((v) => v.key === mode);
-            // An `enabledViews` entry naming nothing registered is skipped
-            // rather than drawn as a nameless button.
-            if (!custom) return [];
-            return [{
-                value: mode,
-                label: custom.name,
-                icon: getIcon(custom.icon, undefined, undefined, "smallest")
-                    ?? <ListIcon size={iconSize.smallest}/>
-            }];
-        });
-    }, [t, enabledViews, customViews]);
-
-    // ── Guard (after hooks to preserve Rules of Hooks) ──────────────
-    if (!onViewModeChange) {
-        return null;
-    }
-
-    // Nothing to switch between and nothing else in the popover: a trigger
-    // that opens an empty panel is worse than no trigger. The size and
-    // group-by selectors live behind the same button, so a single-mode
-    // collection that still has one of those keeps it.
-    if (viewModeOptions.length <= 1 && !showSizeSelector && !showKanbanPropertySelector) {
-        return null;
-    }
-
-    return (
-        <div className="overflow-visible">
-            <Popover
-                open={open}
-                onOpenChange={onOpenChange}
-                modal={false}
-                trigger={
-                    <Button size="small">
-                        {getViewModeIcon()}
-                        <span className="ml-1 text-sm">{getViewModeName()}</span>
-                    </Button>
-                }
-            >
-                <div className="p-3 flex flex-col gap-3 min-w-[240px]">
-                    {/* View mode toggle using ToggleButtonGroup */}
-                    {viewModeOptions.length > 1 && (
-                        <ToggleButtonGroup
-                            value={viewMode}
-                            onValueChange={onViewModeChange}
-                            options={viewModeOptions}
-                        />
-                    )}
-
-                    {/* Size selector */}
-                    {showSizeSelector && (
-                        <div className="flex flex-row items-center justify-between gap-2">
-                            <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
-                                <ColumnsIcon size={iconSize.smallest}/>
-                                <span>{t("size_label")}</span>
-                            </div>
-                            <Select
-                                value={size}
-                                size="small"
-                                className="w-20"
-                                onValueChange={(v) => onSizeChanged?.(v as CollectionSize)}
-                                renderValue={(v) => <span className="font-medium">{v.toUpperCase()}</span>}
-                            >
-                                {["xs", "s", "m", "l", "xl"].map((s) => (
-                                    <SelectItem key={s} value={s} className="font-medium text-center">
-                                        {s.toUpperCase()}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </div>
-                    )}
-
-                    {/* KanbanIcon column property selector */}
-                    {showKanbanPropertySelector && (
-                        <div className="flex flex-row items-center justify-between gap-2">
-                            <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
-                                <KanbanIcon size={iconSize.smallest}/>
-                                <span>{t("group_by")}</span>
-                            </div>
-                            <Select
-                                value={selectedKanbanProperty}
-                                size="small"
-                                className="w-32"
-                                onValueChange={(v) => onKanbanPropertyChange?.(v)}
-                                renderValue={(v) => {
-                                    const option = kanbanPropertyOptions?.find(o => o.key === v);
-                                    return <span className="font-medium truncate">{option?.label ?? v}</span>;
-                                }}
-                            >
-                                {kanbanPropertyOptions?.map((option) => (
-                                    <SelectItem key={option.key} value={option.key}>
-                                        {option.label}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </div>
-                    )}
-                </div>
-            </Popover>
-        </div>
-    );
-}

package/src/components/CollectionViewBinding/hooks/useCollectionInlineEditor.ts

@@ -1,81 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { setIn } from "@rebasepro/forms";
-import { RebaseData } from "@rebasepro/types";
-import { RebaseContext, AdminCollection } from "@rebasepro/cms-types";
-import { OnCellValueChange, saveEntityWithCallbacks, SaveEntityWithCallbacksProps, UniqueFieldValidator } from "@rebasepro/app";
-
-export interface UseCollectionInlineEditorParams<M extends Record<string, unknown>> {
-    path: string;
-    collection: AdminCollection<M>;
-    dataClient: RebaseData;
-    context: RebaseContext;
-}
-
-export function useCollectionInlineEditor<M extends Record<string, unknown>>({
-    path,
-    collection,
-    dataClient,
-    context
-}: UseCollectionInlineEditorParams<M>) {
-
-    // Unique field validator (ported from CollectionViewBinding)
-    const uniqueFieldValidator: UniqueFieldValidator = useCallback(
-        async ({ name, value, property, entityId }: Parameters<UniqueFieldValidator>[0]) => {
-            const accessor = dataClient.collection(path);
-            const res = await accessor.find({
-                where: { [name]: ["==", value] }
-            });
-
-            const conflictingEntities = res.data;
-            const isUnique = conflictingEntities.length === 0 ||
-                (conflictingEntities.length === 1 && conflictingEntities[0].id === entityId);
-
-            return isUnique;
-        },
-        [path, dataClient]
-    );
-
-    // Partial update payload builder
-    const onValueChange: OnCellValueChange<any, any> = useCallback(({
-        value,
-        propertyKey,
-        onValueUpdated,
-        setError,
-        data: entity
-    }) => {
-        if (!entity) return;
-
-        const updatedValues = setIn({}, propertyKey, value) as Partial<Record<string, unknown>>;
-
-        const saveProps: SaveEntityWithCallbacksProps<Record<string, unknown>> = {
-            path: entity.path ?? path,
-            entityId: entity.id,
-            values: updatedValues,
-            previousValues: entity.values,
-            collection,
-            status: "existing"
-        };
-
-        return saveEntityWithCallbacks({
-            ...saveProps,
-            collection,
-            data: dataClient,
-            context,
-            afterSave: () => {
-                setError(undefined);
-                onValueUpdated();
-            },
-            afterSaveError: (e: Error) => {
-                console.error("Save failure");
-                console.error(e);
-                setError(e);
-            }
-        }).then();
-
-    }, [path, collection, dataClient, context]);
-
-    return useMemo(() => ({
-        onValueChange,
-        uniqueFieldValidator
-    }), [onValueChange, uniqueFieldValidator]);
-}

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

@@ -1,181 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { setIn } from "@rebasepro/forms";
-import { RebaseData, Entity } from "@rebasepro/types";
-import { RebaseContext, AnalyticsController, AdminCollection } from "@rebasepro/cms-types";
-import { saveEntityWithCallbacks, SaveEntityWithCallbacksProps } from "@rebasepro/app";
-import { BoardItem } from "@rebasepro/ui";
-import { BoardDataController } from "../useBoardDataController";
-import { generateKeyBetween } from "fractional-indexing";
-
-/**
- * The digits a board order key is built from: base36, lower case only.
- *
- * The library's default alphabet is base62, and its keys only sort correctly
- * under byte ordering. The column is sorted by the *database*, and Postgres'
- * default collation is not byte ordering — under `en_US.UTF-8`, `"aa"` sorts
- * before `"aC"`, so as soon as a board had been dragged around enough to reach
- * the upper-case digits its order stopped matching the keys. One case has no
- * such ambiguity: digits before letters is true of every collation in use.
- *
- * A key written with the old alphabet no longer validates, which is what makes
- * the board offer to initialise the column — one click, and the order is
- * rewritten in a form the database can sort.
- */
-export const ORDER_KEY_DIGITS = "0123456789abcdefghijklmnopqrstuvwxyz";
-
-/**
- * Whether a stored order value is a key `fractional-indexing` can interpolate
- * against.
- *
- * Anything else — a plain `"12"` from a seed or a migration, an empty string —
- * makes `generateKeyBetween` throw, and the fallback below then hands out the
- * same first key to every card, so each drag lands at the bottom of the column
- * on top of the last one that did. Asking the library itself is the only
- * definition of "valid" worth trusting.
- */
-export function isValidOrderKey(value: unknown): value is string {
-    if (typeof value !== "string" || value.length === 0) return false;
-    try {
-        generateKeyBetween(value, null, ORDER_KEY_DIGITS);
-        return true;
-    } catch {
-        return false;
-    }
-}
-
-export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
-    collection: AdminCollection<M>;
-    fullPath: string;
-    columnProperty: string;
-    orderProperty?: string;
-    dataClient: RebaseData;
-    context: RebaseContext;
-    boardDataController: BoardDataController<M>;
-    analyticsController: AnalyticsController;
-}
-
-export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
-    collection,
-    fullPath,
-    columnProperty,
-    orderProperty,
-    dataClient,
-    context,
-    boardDataController,
-    analyticsController
-}: UseKanbanDragAndDropParams<M>) {
-
-    // Handle item reorder and column changes.
-    // Uses string-based fractional indexing via `generateKeyBetween`
-    // 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<Entity<M>>[],
-        moveInfo?: { itemId: string; sourceColumn: string; targetColumn: string; }
-    ) => {
-        const entity = items.find(item => item.id === moveInfo?.itemId)?.data;
-        if (!entity || !moveInfo) return;
-
-        analyticsController.onAnalyticsEvent?.("kanban_card_moved", {
-            path: fullPath,
-            entityId: entity.id,
-            sourceColumn: moveInfo.sourceColumn,
-            targetColumn: moveInfo.targetColumn
-        });
-
-        const isColumnChange = moveInfo.sourceColumn !== moveInfo.targetColumn;
-
-        // If no orderProperty and not a column change, nothing to do
-        if (!orderProperty && !isColumnChange) return;
-
-        // Build updated values
-        let updatedValues: Record<string, unknown> = {};
-
-        // Calculate new order key using string fractional indexing
-        if (orderProperty) {
-            // Get items in the target column in their new visual order
-            // 'items' passed from Board.tsx is exactly the array of items in the target column
-            const targetColumnItems = items;
-
-            const movedIndex = targetColumnItems.findIndex(item => item.id === moveInfo.itemId);
-
-            // The order keys of the neighbours. A neighbour whose key is not a
-            // valid one counts as no neighbour at all: interpolating against it
-            // throws, and the whole move then falls back to a key that ignores
-            // where the card was actually dropped.
-            const keyAt = (index: number): string | null => {
-                const value = targetColumnItems[index]?.data.values?.[orderProperty];
-                return isValidOrderKey(value) ? value : null;
-            };
-            const prevKey = movedIndex > 0 ? keyAt(movedIndex - 1) : null;
-            const nextKey = movedIndex < targetColumnItems.length - 1 ? keyAt(movedIndex + 1) : null;
-
-            try {
-                const a = prevKey;
-                let b = nextKey;
-                if (a !== null && b !== null && a >= b) {
-                    // Handle duplicate or out-of-order keys to prevent fractional-indexing crash
-                    b = null;
-                }
-                const newKey = generateKeyBetween(a, b, ORDER_KEY_DIGITS);
-                updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
-            } catch (e) {
-                // Fallback: if keys are somehow invalid, generate from scratch
-                console.warn("fractional-indexing error, falling back:", e);
-                const newKey = generateKeyBetween(null, null, ORDER_KEY_DIGITS);
-                updatedValues = setIn(updatedValues, orderProperty, newKey) as Record<string, unknown>;
-            }
-        }
-
-        // Update column if it changed
-        if (isColumnChange) {
-            updatedValues = setIn(updatedValues, columnProperty, moveInfo.targetColumn) as Record<string, unknown>;
-        }
-
-        // Apply optimistic UI update to boardDataController's internal state
-        // This ensures the backend state matches the dragged UI state instantly
-        // and prevents the Board component from reverting the dragged item
-        if (boardDataController.moveItemOptimistically) {
-            const targetIndex = items.findIndex(item => item.id === moveInfo.itemId);
-            boardDataController.moveItemOptimistically(
-                moveInfo.itemId,
-                moveInfo.sourceColumn,
-                moveInfo.targetColumn,
-                updatedValues,
-                targetIndex !== -1 ? targetIndex : undefined
-            );
-        }
-
-        const saveProps: SaveEntityWithCallbacksProps<Record<string, unknown>> = {
-            path: entity.path,
-            entityId: entity.id,
-            values: updatedValues as M,
-            previousValues: entity.values,
-            collection,
-            status: "existing"
-        };
-
-        try {
-            await saveEntityWithCallbacks({
-                ...saveProps,
-                collection,
-                data: dataClient,
-                context,
-                afterSave: () => {},
-                afterSaveError: (e: Error) => {
-                    console.error("Failed to save entity after reorder:", e);
-                    if (boardDataController.refreshAll) {
-                        boardDataController.refreshAll();
-                    }
-                }
-            });
-        } catch (e) {
-            console.error("Error saving entity:", e);
-            if (boardDataController.refreshAll) {
-                boardDataController.refreshAll();
-            }
-        }
-    }, [collection, columnProperty, orderProperty, context, dataClient, boardDataController, analyticsController, fullPath]);
-
-    return useMemo(() => ({ handleItemsReorder }), [handleItemsReorder]);
-}