@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/ArrayContainer.tsx

@@ -1,542 +0,0 @@
-
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-    closestCenter,
-    DndContext,
-    DragEndEvent,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors
-} from "@dnd-kit/core";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-
-import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import {
-    Button,
-    ChevronDownIcon,
-    ChevronUpIcon,
-    cls,
-    CopyIcon,
-    HandleIcon,
-    IconButton,
-    iconSize,
-    Menu,
-    MenuItem,
-    MinusIcon,
-    PlusIcon,
-    Tooltip,
-    useOutsideAlerter
-} from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import { getHashValue } from "@rebasepro/utils";
-
-export type ArrayEntryParams = {
-    index: number;
-    internalId: number;
-    isDragging: boolean;
-    storedProps?: object;
-    storeProps: (props: object) => void;
-};
-
-export type ArrayEntryBuilder = (params: ArrayEntryParams) => React.ReactNode;
-
-export interface ArrayContainerProps<T> {
-    droppableId: string;
-    value: T[];
-    addLabel: string;
-    buildEntry: ArrayEntryBuilder;
-    disabled?: boolean;
-    size?: "small" | "medium";
-    onInternalIdAdded?: (id: number) => void;
-
-    canAddElements?: boolean;
-    sortable?: boolean;
-    newDefaultEntry: T;
-    onValueChange: (value: T[]) => void;
-    className?: string;
-    min?: number;
-    max?: number;
-}
-
-const buildIdsMap = (value: unknown[]) =>
-    value && Array.isArray(value) && value.length > 0
-        ? value
-            .map((v, index) => {
-                if (!v) return {};
-                return {
-                    [getHashValue(v) ?? String(index) + index]: getRandomId()
-                };
-            })
-            .reduce((a, b) => ({ ...a,
-...b }), {})
-        : {};
-
-type SortableItemProps = {
-    id: number;
-    index: number;
-    size?: "small" | "medium";
-    disabled: boolean;
-    buildEntry: ArrayEntryBuilder;
-    remove: (index: number) => void;
-    copy: (index: number) => void;
-    addInIndex?: (index: number) => void;
-    canAddElements?: boolean;
-    sortable: boolean;
-    storedProps?: object;
-    updateItemCustomProps: (internalId: number, props: object) => void;
-};
-
-function SortableItem({
-    id,
-    index,
-    size,
-    disabled,
-    buildEntry,
-    remove,
-    copy,
-    addInIndex,
-    canAddElements,
-    sortable,
-    storedProps,
-    updateItemCustomProps
-}: SortableItemProps) {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging
-    } = useSortable({ id });
-
-    const style = transform ? {
-        transform: CSS.Transform.toString(transform),
-        transition
-    } : {};
-    const dragHandleProps = { ...listeners,
-...attributes };
-
-    return (
-        <ArrayContainerItem
-            nodeRef={setNodeRef}
-            style={style}
-            dragHandleProps={dragHandleProps}
-            internalId={id}
-            index={index}
-            size={size}
-            disabled={disabled}
-            buildEntry={buildEntry}
-            remove={remove}
-            copy={copy}
-            addInIndex={addInIndex}
-            canAddElements={canAddElements}
-            sortable={sortable}
-            isDragging={isDragging}
-            storedProps={storedProps}
-            updateItemCustomProps={updateItemCustomProps}
-        />
-    );
-}
-
-type ArrayContainerItemProps = {
-    nodeRef: (node: HTMLElement | null) => void;
-    style: React.CSSProperties;
-    dragHandleProps: Record<string, unknown>;
-    index: number;
-    internalId: number;
-    size?: "small" | "medium";
-    disabled: boolean;
-    buildEntry: ArrayEntryBuilder;
-    remove: (index: number) => void;
-    copy: (index: number) => void;
-    addInIndex?: (index: number) => void;
-    canAddElements?: boolean;
-    sortable: boolean;
-    isDragging: boolean;
-    storedProps?: object;
-    updateItemCustomProps: (internalId: number, props: object) => void;
-};
-
-export function ArrayContainerItem({
-    nodeRef,
-    style,
-    dragHandleProps,
-    index,
-    internalId,
-    size,
-    disabled,
-    buildEntry,
-    remove,
-    copy,
-    addInIndex,
-    canAddElements,
-    sortable,
-    isDragging,
-    storedProps,
-    updateItemCustomProps
-}: ArrayContainerItemProps) {
-    return (
-        <div
-            ref={nodeRef}
-            style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
-        >
-            <div className="flex items-start">
-                <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
-                    {buildEntry({
-                        index,
-                        internalId,
-                        isDragging,
-                        storedProps,
-                        storeProps: (props: object) => updateItemCustomProps(internalId, props)
-                    })}
-                </div>
-                <ArrayItemOptions
-                    dragHandleProps={dragHandleProps}
-                    direction={size === "small" ? "row" : "column"}
-                    disabled={disabled}
-                    remove={remove}
-                    index={index}
-                    copy={copy}
-                    canAddElements={canAddElements}
-                    sortable={sortable}
-                    addInIndex={addInIndex}
-                />
-            </div>
-        </div>
-    );
-}
-
-export function ArrayItemOptions({
-    dragHandleProps,
-    direction,
-    disabled,
-    remove,
-    index,
-    copy,
-    canAddElements,
-    sortable,
-    addInIndex
-}: {
-    dragHandleProps: Record<string, unknown>;
-    direction?: "row" | "column";
-    disabled: boolean;
-    remove: (index: number) => void;
-    index: number;
-    copy: (index: number) => void;
-    sortable: boolean;
-    canAddElements?: boolean;
-    addInIndex?: (index: number) => void;
-}) {
-    const [menuOpen, setMenuOpen] = useState(false);
-    const iconRef = useRef<HTMLDivElement>(null);
-    const { t } = useTranslation();
-    useOutsideAlerter(iconRef, () => {
-        if (menuOpen) setMenuOpen(false);
-    });
-
-    const showMenu = canAddElements ?? false;
-
-    const handleIconButtonClick = (e: React.MouseEvent) => {
-        if (showMenu) {
-            e.stopPropagation();
-            e.preventDefault();
-            setMenuOpen(o => !o);
-        } else if (sortable) {
-            // Allow drag to propagate if menu is not shown
-        } else {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-
-    const title = !disabled && sortable && showMenu ? "Drag to move. Click for options" :
-        !disabled && showMenu ? "Click for options" :
-            !disabled && sortable ? "Drag to move" : undefined;
-
-    return (
-        <div ref={iconRef}
-            className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}>
-            <Tooltip
-                delayDuration={400}
-                open={menuOpen ? false : undefined}
-                side={direction === "column" ? "left" : undefined}
-                title={title}
-            >
-                <IconButton
-                    size="small"
-                    disabled={disabled || (!showMenu && !sortable)}
-                    {...(sortable ? dragHandleProps : {})}
-                    onClick={handleIconButtonClick}
-                    onFocus={() => {
-                        if (sortable && menuOpen) setMenuOpen(false);
-                    }}
-                    className={cls(
-                        (disabled || (!sortable && !showMenu)) ? "cursor-inherit" : "",
-                        sortable && !disabled ? "cursor-grab" : "",
-                        !sortable && showMenu && !disabled ? "cursor-pointer" : ""
-                    )}
-                >
-                    <HandleIcon/>
-                </IconButton>
-            </Tooltip>
-            {showMenu && (
-                <Menu portalContainer={iconRef.current} open={menuOpen} trigger={<div tabIndex={-1}/>}>
-                    <MenuItem
-                        dense
-                        onClick={(e: React.MouseEvent) => {
-                            setMenuOpen(false);
-                            remove(index);
-                        }}
-                    >
-                        <MinusIcon size={iconSize.small}/>
-                        {t("remove")}
-                    </MenuItem>
-                    <MenuItem
-                        dense
-                        onClick={() => {
-                            setMenuOpen(false);
-                            copy(index);
-                        }}
-                    >
-                        <CopyIcon size={iconSize.small}/>
-                        {t("copy")}
-                    </MenuItem>
-                    {addInIndex && (
-                        <MenuItem
-                            dense
-                            onClick={() => {
-                                setMenuOpen(false);
-                                addInIndex(index);
-                            }}
-                        >
-                            <ChevronUpIcon size={iconSize.small}/>
-                            {t("add_on_top")}
-                        </MenuItem>
-                    )}
-                    {addInIndex && (
-                        <MenuItem
-                            dense
-                            onClick={() => {
-                                setMenuOpen(false);
-                                addInIndex(index + 1);
-                            }}
-                        >
-                            <ChevronDownIcon size={iconSize.small}/>
-                            {t("add_below")}
-                        </MenuItem>
-                    )}
-                </Menu>
-            )}
-        </div>
-    );
-}
-
-export function ArrayContainer<T>({
-    droppableId,
-    addLabel,
-    value,
-    disabled = false,
-    buildEntry,
-    size = "medium",
-    onInternalIdAdded,
-    canAddElements: canAddElementsProp = true,
-    sortable = true,
-    newDefaultEntry,
-    onValueChange,
-    className,
-    min = 0,
-    max = Infinity
-}: ArrayContainerProps<T>) {
-    const canAddElements = canAddElementsProp;
-
-    const hasValue = value && Array.isArray(value) && value.length > 0;
-    const internalIdsRef = useRef<Record<string, number>>(buildIdsMap(value));
-    const [internalIds, setInternalIds] = useState<number[]>(
-        hasValue ? Object.values(internalIdsRef.current) : []
-    );
-    const itemCustomPropsRef = useRef<Record<number, object>>({});
-
-    const updateItemCustomProps = useCallback((internalId: number, customProps: object) => {
-        itemCustomPropsRef.current[internalId] = customProps;
-    }, []);
-
-    const pointerSensor = useSensor(PointerSensor, {
-        activationConstraint: {
-            distance: 5
-        }
-    });
-    const keyboardSensor = useSensor(KeyboardSensor, {});
-    const sensors = useSensors(pointerSensor, keyboardSensor);
-
-    useEffect(() => {
-        if (hasValue && value && value.length !== internalIds.length) {
-            const newInternalIds = value.map((v, index) => {
-                const hashValue = (getHashValue(v) ?? String(index)) + index;
-                if (hashValue in internalIdsRef.current) {
-                    return internalIdsRef.current[hashValue];
-                } else {
-                    const newInternalId = getRandomId();
-                    internalIdsRef.current[hashValue] = newInternalId;
-                    return newInternalId;
-                }
-            });
-            setInternalIds(newInternalIds);
-        }
-    }, [hasValue, internalIds.length, value]);
-
-    const insertInEnd = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        if (disabled || (value ?? []).length >= max) return;
-        const id = getRandomId();
-        const newIds: number[] = [...internalIds, id];
-        if (onInternalIdAdded) onInternalIdAdded(id);
-        setInternalIds(newIds);
-        onValueChange([...(value ?? []), newDefaultEntry]);
-    };
-
-    const remove = (index: number) => {
-        if ((value ?? []).length <= min) return;
-        const newIds = [...internalIds];
-        newIds.splice(index, 1);
-        setInternalIds(newIds);
-        onValueChange((value ?? []).filter((_, i) => i !== index));
-    };
-
-    const copy = (index: number) => {
-        if ((value ?? []).length >= max) return;
-        const id = getRandomId();
-        const copyingItem = (value ?? [])[index];
-        const newIds: number[] = [
-            ...internalIds.slice(0, index + 1),
-            id,
-            ...internalIds.slice(index + 1)
-        ];
-        if (onInternalIdAdded) onInternalIdAdded(id);
-        setInternalIds(newIds);
-        onValueChange([...(value ?? []).slice(0, index + 1), copyingItem, ...(value ?? []).slice(index + 1)]);
-    };
-
-    const addInIndex = (index: number) => {
-        if ((value ?? []).length >= max) return;
-        const id = getRandomId();
-        const newIds: number[] = [
-            ...internalIds.slice(0, index),
-            id,
-            ...internalIds.slice(index)
-        ];
-        if (onInternalIdAdded) onInternalIdAdded(id);
-        setInternalIds(newIds);
-        onValueChange([...(value ?? []).slice(0, index), newDefaultEntry, ...(value ?? []).slice(index)]);
-    };
-
-    const onDragEnd = (event: DragEndEvent) => {
-        const {
-            active,
-            over
-        } = event;
-        if (!over || active.id === over.id) return;
-
-        const oldIndex = internalIds.indexOf(active.id as number);
-        const newIndex = internalIds.indexOf(over.id as number);
-        if (oldIndex === -1 || newIndex === -1) return;
-        const newIds = arrayMove(internalIds, oldIndex, newIndex);
-        setInternalIds(newIds);
-        onValueChange(arrayMove(value ?? [], oldIndex, newIndex));
-    };
-
-    return sortable ? (
-        <DndContext sensors={sensors}
-            modifiers={[restrictToVerticalAxis]}
-            collisionDetection={closestCenter}
-            onDragEnd={onDragEnd}>
-            <SortableContext items={internalIds} strategy={verticalListSortingStrategy}>
-                <div className={cls("space-y-1", className)} id={droppableId}>
-                    {hasValue &&
-                        internalIds.map((internalId: number, index: number) => (
-                            <SortableItem
-                                key={`array_field_${internalId}`}
-                                id={internalId}
-                                index={index}
-                                size={size}
-                                disabled={disabled}
-                                buildEntry={buildEntry}
-                                remove={remove}
-                                copy={copy}
-                                addInIndex={addInIndex}
-                                canAddElements={canAddElements}
-                                sortable={sortable}
-                                storedProps={itemCustomPropsRef.current[internalId]}
-                                updateItemCustomProps={updateItemCustomProps}
-                            />
-                        ))}
-                    {canAddElements && (
-                        <div className="my-4 justify-center text-left">
-                            <Button
-                                variant={"text"}
-                                size={size === "small" ? "small" : "medium"}
-                                disabled={disabled || (value?.length ?? 0) >= max}
-                                startIcon={<PlusIcon/>}
-                                onClick={insertInEnd}
-                            >
-                                {addLabel ?? "Add"}
-                            </Button>
-                        </div>
-                    )}
-                </div>
-            </SortableContext>
-        </DndContext>
-    ) : (
-        <div className={cls("space-y-1", className)} id={droppableId}>
-            {hasValue &&
-                internalIds.map((internalId: number, index: number) => (
-                    <ArrayContainerItem
-                        key={`array_field_${internalId}`}
-                        nodeRef={(node: HTMLElement | null) => {
-                        }}
-                        style={{}}
-                        dragHandleProps={{}}
-                        internalId={internalId}
-                        index={index}
-                        size={size}
-                        disabled={disabled}
-                        buildEntry={buildEntry}
-                        remove={remove}
-                        copy={copy}
-                        addInIndex={addInIndex}
-                        canAddElements={canAddElements}
-                        sortable={false}
-                        isDragging={false}
-                        storedProps={itemCustomPropsRef.current[internalId]}
-                        updateItemCustomProps={updateItemCustomProps}
-                    />
-                ))}
-            {canAddElements && (
-                <div className="my-4 justify-center text-left">
-                    <Button
-                        variant={"text"}
-                        size={size === "small" ? "small" : "medium"}
-                        disabled={disabled || (value?.length ?? 0) >= max}
-                        startIcon={<PlusIcon/>}
-                        onClick={insertInEnd}
-                    >
-                        {addLabel ?? "Add"}
-                    </Button>
-                </div>
-            )}
-        </div>
-    );
-}
-
-function arrayMove<T>(value: T[], sourceIndex: number, destinationIndex: number): T[] {
-    const result = Array.from(value);
-    const [removed] = result.splice(sourceIndex, 1);
-    result.splice(destinationIndex, 0, removed);
-    return result;
-}
-
-export function getRandomId() {
-    return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
-}

package/src/components/ClearFilterSortButton.tsx

@@ -1,56 +0,0 @@
-import { FilterXIcon, iconSize, IconButton, Tooltip } from "@rebasepro/ui";
-import { EntityTableController } from "@rebasepro/cms-types";
-import { useTranslation } from "@rebasepro/app";
-
-export function ClearFilterSortButton({
-    tableController,
-    enabled,
-    compact
-}: {
-    enabled: boolean;
-    tableController: EntityTableController;
-    /**
-     * Toolbar showing icon-only controls (split view, or a layout too narrow
-     * for the filters button's label). Only decides the icon size, which
-     * follows that button — see `CollectionViewStartActions`.
-     */
-    compact?: boolean;
-}) {
-    const { t } = useTranslation();
-
-    if (!enabled) {
-        return null;
-    }
-
-    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
-    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
-
-    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
-        let label;
-        if (filterIsSet && sortIsSet) {
-            label = t("clear_filter_sort");
-        } else if (filterIsSet) {
-            label = t("clear_filter");
-        } else {
-            label = t("clear_sort");
-        }
-        return (
-            <Tooltip title={label}>
-                {/* An `IconButton`, like every other icon-only control in this
-                    toolbar. As a `Button` it was a rounded-md box with text
-                    padding sitting between two circular icon buttons. */}
-                <IconButton
-                    size={"small"}
-                    aria-label={label}
-                    onClick={() => {
-                        tableController.clearFilter?.();
-                        tableController.setSortBy?.(undefined);
-                    }}
-                >
-                    <FilterXIcon size={compact ? iconSize.smallest : iconSize.small}/>
-                </IconButton>
-            </Tooltip>
-        );
-    }
-    return null;
-}

package/src/components/CollectionEditorDialogs.tsx

@@ -1,69 +0,0 @@
-import React, { Suspense } from "react";
-import { lazyChunk } from "@rebasepro/ui";
-import { useCollectionEditorDialogsState } from "../collection_editor/CollectionEditorDialogsContext";
-
-// Dynamic imports targeting the separate collection_editor_ui entry point.
-// This ensures the heavy editor UI lands in its own chunk and is only fetched
-// when a dialog is actually opened.
-const CollectionEditorDialog = lazyChunk(() =>
-    import("../collection_editor/ui/collection_editor/CollectionEditorDialog")
-        .then(m => ({ default: m.CollectionEditorDialog }))
-);
-
-const PropertyFormDialog = lazyChunk(() =>
-    import("../collection_editor/ui/collection_editor/PropertyEditView")
-        .then(m => ({ default: m.PropertyFormDialog }))
-);
-
-/**
- * Renders the CollectionEditorDialog and PropertyFormDialog inside
- * the RebaseShell tree where admin-internal contexts
- * (CollectionRegistryContext, NavigationStateContext, UrlContext)
- * are available.
- *
- * Both dialog components are loaded dynamically via React.lazy so that
- * production admin bundles that never open the collection editor don't pay
- * the download/parse cost up-front.
- *
- * The dialog state (open/close, props) is managed by ConfigControllerProvider
- * (a root-scope plugin provider that wraps the shell) and exposed via
- * CollectionEditorDialogsContext.
- */
-export function CollectionEditorDialogs() {
-    const state = useCollectionEditorDialogsState();
-
-    if (!state) return null;
-
-    const { collectionDialogProps, propertyDialogProps } = state;
-
-    // Don't even mount the Suspense boundary until a dialog is actually open.
-    const hasOpenDialog =
-        collectionDialogProps?.open || propertyDialogProps?.open;
-
-    if (!hasOpenDialog) return null;
-
-    return (
-        <Suspense fallback={null}>
-            {collectionDialogProps?.open && (
-                <CollectionEditorDialog
-                    open={false}
-                    isNewCollection={false}
-                    configController={undefined!}
-                    handleClose={() => {}}
-                    {...collectionDialogProps}
-                />
-            )}
-            {propertyDialogProps?.open && (
-                <PropertyFormDialog
-                    open={false}
-                    existingProperty={false}
-                    autoOpenTypeSelect={false}
-                    inArray={false}
-                    allowDataInference={false}
-                    propertyConfigs={{}}
-                    {...propertyDialogProps}
-                />
-            )}
-        </Suspense>
-    );
-}