@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/collection_editor/CollectionsStudioView.tsx

@@ -1,199 +0,0 @@
-
-import { IconForView } from "@rebasepro/app";
-import React, { useState, useEffect } from "react";
-import {
-    Button,
-    cls,
-    defaultBorderMixin,
-    IconButton,
-    iconSize,
-    PlusIcon,
-    ResizablePanels,
-    Tooltip,
-    Typography
-} from "@rebasepro/ui";
-
-import { CollectionsConfigController } from "../../types/config_controller";
-import { CollectionStudioView } from "./CollectionStudioView";
-import type { CollectionEditorExtensionProps } from "../../extensibility_types";
-import type { AdminCollection } from "@rebasepro/cms-types";
-import { readStoredString, writeStoredString } from "@rebasepro/utils";
-
-export interface CollectionsStudioViewProps extends CollectionEditorExtensionProps {
-    configController: CollectionsConfigController;
-
-    /**
-     * Collections to show in the sidebar.
-     * When provided, overrides the collections from `configController`.
-     * Use this to control exactly which collections the editor displays.
-     */
-    collections?: AdminCollection[];
-
-    /**
-     * Controlled active collection ID.
-     * When provided together with `onActiveCollectionChange`,
-     * navigation is fully external — no internal state is used.
-     */
-    activeCollectionId?: string;
-
-    /**
-     * Called when the user clicks a collection, "new", or navigates.
-     * When provided, the component is fully controlled (no internal state).
-     * When not provided, the component manages selection via internal state.
-     *
-     * Pass `"new"` to create a new collection. Pass `undefined` to deselect.
-     */
-    onActiveCollectionChange?: (collectionId: string | undefined) => void;
-}
-
-export function CollectionsStudioView({
-    configController,
-    collections: collectionsProp,
-    activeCollectionId: controlledActiveId,
-    onActiveCollectionChange,
-    propertyTypePresets,
-    hiddenPropertyTypes,
-    renderExtraPropertyFields,
-    renderExtraCollectionFields,
-    visibleTabs,
-    standalone,
-}: CollectionsStudioViewProps) {
-
-    // ── Navigation state ────────────────────────────────────────────────
-    // If onActiveCollectionChange is provided, the component is controlled.
-    // Otherwise, use internal state.
-    const [internalActiveId, setInternalActiveId] = useState<string | undefined>(undefined);
-    const isControlled = onActiveCollectionChange !== undefined;
-    const activeCollectionId = isControlled ? controlledActiveId : internalActiveId;
-
-    const setActiveCollectionId = (id: string | undefined) => {
-        if (isControlled) {
-            onActiveCollectionChange?.(id);
-        } else {
-            setInternalActiveId(id);
-        }
-    };
-
-    // ── Collections list ────────────────────────────────────────────────
-    const collections = collectionsProp ?? configController.collections ?? [];
-
-    // ── Sidebar sizing ──────────────────────────────────────────────────
-    // Checked, not just parsed: `parseFloat` answers NaN for anything it cannot
-    // read, and a NaN pane size lays the sidebar out to nothing — with the bad
-    // value still in storage on reload. `SplitListView.getSavedPanelSize` is the
-    // same read, done this way.
-    const [sidebarSize, setSidebarSize] = useState(() => {
-        const saved = readStoredString("rebase_collections_editor_sidebar_size");
-        const parsed = saved === null ? NaN : parseFloat(saved);
-        return Number.isFinite(parsed) && parsed > 0 && parsed < 100 ? parsed : 25;
-    });
-
-    useEffect(() => {
-        writeStoredString("rebase_collections_editor_sidebar_size", sidebarSize.toString());
-    }, [sidebarSize]);
-
-    return (
-        <div className="flex h-full w-full bg-surface-50 dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark">
-            <ResizablePanels
-                orientation="horizontal"
-                panelSizePercent={sidebarSize}
-                onPanelSizeChange={setSidebarSize}
-                minPanelSizePx={220}
-                firstPanel={
-                    <div className={cls("flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800 border-r", defaultBorderMixin)}>
-                        <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400">
-                                Collections
-                            </Typography>
-                            <Tooltip title={configController.readOnly ? configController.readOnlyReason || "Read only" : "Add collection"}>
-                                <div>
-                                    <IconButton
-                                        size="small"
-                                        disabled={configController.readOnly}
-                                        onClick={() => setActiveCollectionId("new")}
-                                        className={activeCollectionId === "new" ? "text-primary dark:text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark"}
-                                    >
-                                        <PlusIcon size={iconSize.smallest}/>
-                                    </IconButton>
-                                </div>
-                            </Tooltip>
-                        </div>
-
-                        <div className="flex-grow overflow-y-auto w-full no-scrollbar p-2 space-y-0.5">
-                            {collections.length === 0 && (
-                                <div className="p-4 text-center">
-                                    <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark italic">
-                                        No collections yet.
-                                    </Typography>
-                                </div>
-                            )}
-                            {collections.map((collection) => {
-                                const collectionKey = collection.slug;
-                                const isSelected = activeCollectionId === collectionKey;
-                                return (
-                                    <div
-                                        key={collectionKey}
-                                        onClick={() => setActiveCollectionId(collectionKey)}
-                                        className={cls(
-                                            "flex items-center gap-2.5 px-3 h-[30px] cursor-pointer rounded-lg text-[13px] font-medium transition-colors",
-                                            isSelected
-                                                ? "bg-primary/8 text-primary dark:bg-primary/10 dark:text-primary-light font-semibold"
-                                                : "hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white"
-                                        )}
-                                    >
-                                        <IconForView collectionOrView={collection} size={"smallest"} className={cls(
-                                            isSelected
-                                                ? "text-primary dark:text-primary-light"
-                                                : "text-surface-500 dark:text-text-secondary-dark"
-                                        )}/>
-                                        <span className="truncate flex-1">
-                                            {collection.name || collection.slug}
-                                        </span>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                }
-                secondPanel={
-                    <div className="flex-grow flex flex-col min-w-0 h-full w-full">
-                        {/* We use key to force unmount when switching collections, preventing stale state */}
-                        {activeCollectionId ? (
-                            <CollectionStudioView
-                                key={activeCollectionId}
-                                configController={configController}
-                                collectionId={activeCollectionId}
-                                onSave={(savedCollection) => {
-                                    // After creating a new collection, switch to it
-                                    if (activeCollectionId === "new" && savedCollection?.slug) {
-                                        setActiveCollectionId(savedCollection.slug);
-                                    }
-                                }}
-                                onCancel={() => setActiveCollectionId(undefined)}
-                                propertyTypePresets={propertyTypePresets}
-                                hiddenPropertyTypes={hiddenPropertyTypes}
-                                renderExtraPropertyFields={renderExtraPropertyFields}
-                                renderExtraCollectionFields={renderExtraCollectionFields}
-                                visibleTabs={visibleTabs}
-                                standalone={standalone}
-                            />
-                        ) : (
-                            <div className="flex flex-col items-center justify-center h-full gap-4">
-                                <Typography variant="label">
-                                    Select a collection or create a new one to start editing
-                                </Typography>
-                                <Button
-                                    disabled={configController.readOnly}
-                                    onClick={() => setActiveCollectionId("new")}
-                                >
-                                    <PlusIcon/>
-                                    Add new collection
-                                </Button>
-                            </div>
-                        )}
-                    </div>
-                }
-            />
-        </div>
-    );
-}

package/src/collection_editor/ui/collection_editor/DisplaySettingsForm.tsx

@@ -1,315 +0,0 @@
-
-import { FieldCaption } from "../../_cms_internals";
-import React, { useMemo, useState } from "react";
-import { useCustomizationController } from "@rebasepro/app";
-import { getFieldConfig } from "../../../components/field_configs";
-import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { Property } from "@rebasepro/types";
-import {
-    BooleanSwitchWithLabel,
-    Button,
-    Container,
-    IconButton,
-    iconSize,
-    Select,
-    SelectItem,
-    TextField,
-    Typography,
-    XIcon
-} from "@rebasepro/ui";
-
-import { useFormex } from "@rebasepro/forms";
-import { LayoutModeSwitch } from "./LayoutModeSwitch";
-import { ViewModeSwitch } from "./ViewModeSwitch";
-import { KanbanConfigSection } from "./KanbanConfigSection";
-import { PropertyFormDialog } from "./PropertyEditView";
-import { useCollectionsConfigController } from "../../useCollectionsConfigController";
-import { unslugify } from "@rebasepro/utils";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export function DisplaySettingsForm({
-    expandKanban,
-    standalone,
-}: {
-    expandKanban?: boolean;
-    standalone?: boolean;
-}) {
-
-    const {
-        values,
-        setFieldValue,
-        handleChange,
-        submitCount
-    } = useFormex<AdminCollection>();
-
-    const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
-
-    const customizationController = useCustomizationController();
-    const configControllerFromContext = useCollectionsConfigController();
-    const configController = standalone ? { readOnly: false } : configControllerFromContext;
-
-    // Get text properties (for orderProperty - uses string fractional indexing keys)
-    const textProperties = useMemo(() => {
-        const result: { key: string; label: string; property: Property; }[] = [];
-        if (!values.properties) return result;
-
-        Object.entries(values.properties).forEach(([key, prop]) => {
-            if (prop && "type" in prop && prop.type === "string") {
-                result.push({
-                    key,
-                    label: (prop as Property).name || key,
-                    property: prop as Property
-                });
-            }
-        });
-        return result;
-    }, [values.properties]);
-
-    const showErrors = submitCount > 0;
-
-    return (
-        <div className={"overflow-auto my-auto"}>
-            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-
-                <div>
-                    <Typography variant={"h5"} className={"flex-grow"}>
-                        Display settings
-                    </Typography>
-                </div>
-
-                <fieldset disabled={configController?.readOnly} className="contents">
-                    <div className={"grid grid-cols-12 gap-4"}>
-
-                        {/* Layout Mode (Side dialog vs Full screen) */}
-                        <LayoutModeSwitch
-                            className={"col-span-12"}
-                            value={values.openEntityMode ?? "side_panel"}
-                            onChange={(value) => setFieldValue("openEntityMode", value)}/>
-
-                        {/* View Mode (Table/Cards/Kanban) */}
-                        <ViewModeSwitch
-                            className={"col-span-12"}
-                            value={values.defaultViewMode ?? "table"}
-                            onChange={(value) => setFieldValue("defaultViewMode", value)}/>
-
-                        {/* Kanban Column Property */}
-                        <KanbanConfigSection className={"col-span-12"} forceExpanded={expandKanban}/>
-
-                        {/* Order Property */}
-                        <div className={"col-span-12 mt-4"}>
-                            {(() => {
-                                const orderPropertyMissing = Boolean(values.orderProperty) &&
-                                    !textProperties.some(p => p.key === values.orderProperty);
-
-                                return (
-                                    <>
-                                        <Select
-                                            key={`order-select-${textProperties.length}`}
-                                            name="orderProperty"
-                                            label="Order Property"
-                                            fullWidth={true}
-                                            position={"item-aligned"}
-                                            disabled={textProperties.length === 0}
-                                            error={orderPropertyMissing}
-                                            value={values.orderProperty ?? ""}
-                                            onValueChange={(v) => {
-                                                setFieldValue("orderProperty", v || undefined);
-                                            }}
-                                            renderValue={(value) => {
-                                                if (orderPropertyMissing) {
-                                                    return <span className="text-red-500">{value} (not found)</span>;
-                                                }
-                                                const prop = textProperties.find(p => p.key === value);
-                                                if (!prop) return "Select a property";
-                                                const fieldConfig = getFieldConfig(prop.property, customizationController?.propertyConfigs ?? {});
-                                                return (
-                                                    <div className="flex items-center gap-2">
-                                                        <PropertyConfigBadge propertyConfig={fieldConfig}/>
-                                                        <span>{prop.label}</span>
-                                                    </div>
-                                                );
-                                            }}
-                                            endAdornment={values.orderProperty ? (
-                                                <IconButton
-                                                    size="small"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        setFieldValue("orderProperty", undefined);
-                                                    }}
-                                                >
-                                                    <XIcon size={iconSize.smallest}/>
-                                                </IconButton>
-                                            ) : undefined}
-                                        >
-                                            {textProperties.map((prop) => {
-                                                const fieldConfig = getFieldConfig(prop.property, customizationController?.propertyConfigs ?? {});
-                                                return (
-                                                    <SelectItem key={prop.key} value={prop.key}>
-                                                        <div className="flex items-center gap-3">
-                                                            <PropertyConfigBadge propertyConfig={fieldConfig}/>
-                                                            <div>
-                                                                <div>{prop.label}</div>
-                                                                <Typography variant="caption" color="secondary">
-                                                                    {fieldConfig?.name || "Text"}
-                                                                </Typography>
-                                                            </div>
-                                                        </div>
-                                                    </SelectItem>
-                                                );
-                                            })}
-                                        </Select>
-                                        <FieldCaption error={orderPropertyMissing}>
-                                            {orderPropertyMissing
-                                                ? `Property "${values.orderProperty}" does not exist or is not a text property. Please select a valid property or clear the selection.`
-                                                : textProperties.length === 0
-                                                    ? "No text properties found. Add a text property to enable ordering."
-                                                    : "Select a text property to persist the order of items"
-                                            }
-                                        </FieldCaption>
-                                    </>
-                                );
-                            })()}
-                            {(() => {
-                                const orderPropertyMissing = Boolean(values.orderProperty) &&
-                                    !textProperties.some(p => p.key === values.orderProperty);
-                                const showCreateButton = !values.orderProperty || orderPropertyMissing;
-
-                                const dialogPropertyKey = orderPropertyMissing && values.orderProperty
-                                    ? values.orderProperty
-                                    : "__order";
-                                const dialogPropertyName = orderPropertyMissing && values.orderProperty
-                                    ? unslugify(values.orderProperty)
-                                    : "Order";
-
-                                if (!showCreateButton) return null;
-
-                                return (
-                                    <>
-                                        <Button
-                                            variant="text"
-                                            size="small"
-                                            className="ml-3.5 mt-2"
-                                            onClick={() => setOrderPropertyDialogOpen(true)}
-                                        >
-                                            + Create &quot;{dialogPropertyKey}&quot; property
-                                        </Button>
-                                        <PropertyFormDialog
-                                            open={orderPropertyDialogOpen}
-                                            onCancel={() => setOrderPropertyDialogOpen(false)}
-                                            property={{
-                                                type: "string",
-                                                name: dialogPropertyName,
-                                                admin: { disabled: true,
-hideFromCollection: true }
-                                            }}
-                                            propertyKey={dialogPropertyKey}
-                                            existingProperty={false}
-                                            autoOpenTypeSelect={false}
-                                            autoUpdateId={false}
-                                            inArray={false}
-                                            allowDataInference={false}
-                                            propertyConfigs={customizationController?.propertyConfigs ?? {}}
-
-                                            existingPropertyKeys={Object.keys(values.properties ?? {})}
-                                            onPropertyChanged={({ id, property }) => {
-                                                const newProperties = {
-                                                    ...values.properties,
-                                                    [id!]: property
-                                                };
-                                                const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties ?? {})), id];
-                                                setFieldValue("properties", newProperties);
-                                                setFieldValue("propertiesOrder", newPropertiesOrder);
-                                                setFieldValue("orderProperty", id);
-                                                setOrderPropertyDialogOpen(false);
-                                            }}
-                                        />
-                                    </>
-                                );
-                            })()}
-                        </div>
-
-                        {/* Default row size */}
-                        <div className={"col-span-12"}>
-                            <Select
-                                name="defaultSize"
-                                fullWidth={true}
-                                label="Default row size"
-                                position={"item-aligned"}
-                                onChange={handleChange}
-                                value={values.defaultSize ?? ""}
-                                renderValue={(value: string) => value.toUpperCase()}
-                            >
-                                {["xs", "s", "m", "l", "xl"].map((value) => (
-                                    <SelectItem
-                                        key={`size-select-${value}`}
-                                        value={value}>
-                                        {value.toUpperCase()}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </div>
-
-                        {/* Side dialog width */}
-                        <div className={"col-span-12"}>
-                            <TextField
-                                name={"sideDialogWidth"}
-                                type={"number"}
-                                aria-describedby={"sideDialogWidth-helper"}
-                                onChange={(e) => {
-                                    const value = e.target.value;
-                                    if (!value) {
-                                        setFieldValue("sideDialogWidth", null);
-                                    } else if (!isNaN(Number(value))) {
-                                        setFieldValue("sideDialogWidth", Number(value));
-                                    }
-                                }}
-                                endAdornment={<IconButton
-                                    size={"small"}
-                                    onClick={() => {
-                                        setFieldValue("sideDialogWidth", null);
-                                    }}
-                                    disabled={!values.sideDialogWidth}>
-                                    <XIcon size={iconSize.small}/>
-                                </IconButton>}
-                                value={values.sideDialogWidth ?? ""}
-                                label={"Side dialog width"}/>
-                            <FieldCaption>
-                                Optionally define the width (in pixels) of entities side dialog. Default is 768px
-                            </FieldCaption>
-                        </div>
-
-                        {/* Inline editing */}
-                        <div className={"col-span-12"}>
-                            <BooleanSwitchWithLabel
-                                position={"start"}
-                                label={values.inlineEditing === undefined || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only in the form view"}
-                                onValueChange={(v) => setFieldValue("inlineEditing", v)}
-                                value={values.inlineEditing === undefined ? true : values.inlineEditing}
-                            />
-                            <FieldCaption>
-                                Allow editing data directly in the table view, without opening the form view.
-                            </FieldCaption>
-                        </div>
-
-                        {/* Include JSON view */}
-                        <div className={"col-span-12"}>
-                            <BooleanSwitchWithLabel
-                                position={"start"}
-                                label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
-                                onValueChange={(v) => setFieldValue("includeJsonView", v)}
-                                value={values.includeJsonView === undefined ? true : values.includeJsonView}
-                            />
-                            <FieldCaption>
-                                Allows removing the form view JSON tab if you think it is confusing for your users.
-                            </FieldCaption>
-                        </div>
-
-                    </div>
-                </fieldset>
-
-                <div style={{ height: "52px" }}/>
-
-            </Container>
-        </div>
-    );
-}