@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/ArrayContainer.tsx

@@ -0,0 +1,538 @@
+
+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, cls, HandleIcon, IconButton, Menu, MenuItem, Tooltip, useOutsideAlerter , iconSize } from "@rebasepro/ui";
+import { PlusIcon, CopyIcon, ChevronDownIcon, ChevronUpIcon, MinusIcon } from "lucide-react";
+import { useTranslation } from "@rebasepro/core";
+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: any[]) =>
+    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
+    } = sortable
+            ? useSortable({ id })
+            : {
+                attributes: {},
+                listeners: {},
+                setNodeRef: (node: HTMLElement | null) => {
+                },
+                transform: null,
+                transition: undefined,
+                isDragging: false
+            };
+
+    const style = transform ? {
+        transform: CSS.Transform.toString(transform),
+        transition
+    } : {};
+    const dragHandleProps = sortable ? { ...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: any;
+    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: any;
+    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

@@ -0,0 +1,48 @@
+import { Button, Tooltip , iconSize } from "@rebasepro/ui";
+import { FilterXIcon } from "lucide-react";
+import { EntityTableController } from "@rebasepro/types";
+import { useTranslation } from "@rebasepro/core";
+
+export function ClearFilterSortButton({
+    tableController,
+    enabled
+}: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    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}>
+                <Button
+                    size={"small"}
+                    variant={"text"}
+                    aria-label={label}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        tableController.setSortBy?.(undefined);
+                    }}
+                >
+                    <FilterXIcon size={iconSize.small}/>
+                </Button>
+            </Tooltip>
+        );
+    }
+    return null;
+}

package/src/components/CollectionEditorDialogs.tsx

@@ -0,0 +1,68 @@
+import React, { lazy, Suspense } from "react";
+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 = lazy(() =>
+    import("../collection_editor/ui/collection_editor/CollectionEditorDialog")
+        .then(m => ({ default: m.CollectionEditorDialog }))
+);
+
+const PropertyFormDialog = lazy(() =>
+    import("../collection_editor/ui/collection_editor/PropertyEditView")
+        .then(m => ({ default: m.PropertyFormDialog }))
+);
+
+/**
+ * Renders the CollectionEditorDialog and PropertyFormDialog inside
+ * the RebaseShell tree where CMS-internal contexts
+ * (CollectionRegistryContext, NavigationStateContext, UrlContext)
+ * are available.
+ *
+ * Both dialog components are loaded dynamically via React.lazy so that
+ * production CMS 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={{} as any}
+                    handleClose={() => {}}
+                    {...collectionDialogProps}
+                />
+            )}
+            {propertyDialogProps?.open && (
+                <PropertyFormDialog
+                    open={false}
+                    existingProperty={false}
+                    autoOpenTypeSelect={false}
+                    inArray={false}
+                    allowDataInference={false}
+                    propertyConfigs={{}}
+                    {...propertyDialogProps}
+                />
+            )}
+        </Suspense>
+    );
+}