@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/collection_editor/ui/collection_editor/CollectionStudioView.tsx

@@ -0,0 +1,101 @@
+
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { useUrlController } from "../../_cms_internals";
+import * as React from "react";
+import { useState, useMemo, useEffect } from "react";
+import { Typography, Button } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { useSnackbarController } from "@rebasepro/core";
+import { CollectionEditorDialogProps } from "./CollectionEditorDialog";
+import { AIModifiedPathsProvider } from "./AIModifiedPathsContext";
+import { CollectionEditor } from "./CollectionEditorDialog";
+import { useNavigate } from "react-router-dom";
+
+export type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, "open" | "isNewCollection" | "editedCollectionId" | "handleClose" | "handleCancel"> & {
+    collectionId?: string | "new";
+};
+
+export function CollectionStudioView({ collectionId, ...props }: CollectionStudioViewProps) {
+    const snackbarController = useSnackbarController();
+    const navigate = useNavigate();
+    const urlController = useUrlController();
+
+    // Form state from the editor
+    const [formDirty, setFormDirty] = useState<boolean>(false);
+    const [cancelRequested, setCancelRequested] = useState<boolean>(false);
+
+    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(
+        formDirty,
+        () => setFormDirty(false)
+    );
+
+    // Map collectionId from URL params if missing? We can pass it directly.
+    const activeCollectionId = collectionId;
+
+    const handleCancelClick = () => {
+        if (!formDirty) {
+            navigate(urlController.buildAppUrlPath("/"));
+        } else {
+            setCancelRequested(true);
+            triggerDialog();
+        }
+    };
+
+    return (
+        <div className="flex-grow flex flex-col h-full w-full bg-white dark:bg-surface-800">
+            <AIModifiedPathsProvider>
+                {activeCollectionId ? (
+                    <CollectionEditor
+                        key={activeCollectionId}
+                        {...props}
+                        fullScreen={true}
+                        open={true}
+                        isNewCollection={activeCollectionId === "new"}
+                        editedCollectionId={activeCollectionId !== "new" ? activeCollectionId : undefined}
+                        handleCancel={handleCancelClick}
+                        handleClose={(savedCollection) => {
+                            setFormDirty(false);
+                            if (savedCollection) {
+                                snackbarController.open({
+                                    type: "success",
+                                    message: `Collection ${savedCollection.name || savedCollection.slug} saved`
+                                });
+                                if (activeCollectionId === "new") {
+                                    navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));
+                                }
+                            }
+                        }}
+                        setFormDirty={setFormDirty}
+                    />
+                ) : (
+                    <div className="flex-grow flex flex-col items-center justify-center h-full gap-4">
+                        <Typography variant="label">
+                            Select a collection or create a new one
+                        </Typography>
+                        <Button
+                            onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                        >
+                            <PlusIcon/>
+                            Add new collection
+                        </Button>
+                    </div>
+                )}
+
+                <UnsavedChangesDialog
+                    {...dialogProps}
+                    handleOk={() => {
+                        dialogProps.handleOk();
+                        if (cancelRequested) {
+                            navigate(urlController.buildAppUrlPath("/"));
+                            setCancelRequested(false);
+                        }
+                    }}
+                    handleCancel={() => {
+                        dialogProps.handleCancel();
+                        setCancelRequested(false);
+                    }}
+                />
+            </AIModifiedPathsProvider>
+        </div>
+    );
+}

package/src/collection_editor/ui/collection_editor/CollectionYupValidation.tsx

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const CollectionEditorSchema = z.object({
+    slug: z.string().min(1, "Required"),
+    name: z.string().min(1, "Required"),
+    table: z.string().min(1, "Required")
+});
+
+

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

@@ -0,0 +1,133 @@
+
+import { IconForView } from "@rebasepro/core";
+;
+import { useUrlController } from "../../_cms_internals";
+import React, { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { cls, defaultBorderMixin, ResizablePanels, Typography, IconButton, Button , iconSize } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+;
+import { CollectionsConfigController } from "../../types/config_controller";
+import { CollectionStudioView } from "./CollectionStudioView";
+
+export interface CollectionsStudioViewProps {
+    configController: CollectionsConfigController;
+}
+
+export function CollectionsStudioView({ configController }: CollectionsStudioViewProps) {
+    const navigate = useNavigate();
+    const urlController = useUrlController();
+    const location = useLocation();
+
+    // Determine the active collection from the URL segment after "schema/"
+    const basePath = urlController.buildAppUrlPath("schema");
+    const relativePath = location.pathname.replace(basePath, "").replace(/^\//, "");
+
+    // The collectionId could be "new", empty (no selection), or a collection slug
+    const activeCollectionId = relativePath.split("/")[0] || undefined;
+
+    const [sidebarSize, setSidebarSize] = useState(() => {
+        try {
+            const saved = localStorage.getItem("rebase_collections_editor_sidebar_size");
+            return saved !== null ? parseFloat(saved) : 25;
+        } catch (e) {
+            return 25;
+        }
+    });
+
+    useEffect(() => {
+        try {
+            localStorage.setItem("rebase_collections_editor_sidebar_size", sidebarSize.toString());
+        } catch (e) {
+            // ignore local storage error
+        }
+    }, [sidebarSize]);
+
+    const collections = configController.collections || [];
+
+    return (
+        <div className="flex h-full w-full bg-white 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-white 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-800 min-h-[48px]", defaultBorderMixin)}>
+                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                                Collections
+                            </Typography>
+                            <IconButton
+                                size="small"
+                                onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                className={activeCollectionId === "new" ? "text-primary dark:text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark"}
+                            >
+                                <PlusIcon size={iconSize.smallest}/>
+                            </IconButton>
+                        </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={() => navigate(urlController.buildAppUrlPath(`schema/${collectionKey}`))}
+                                        className={cls(
+                                            "flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md text-sm transition-colors",
+                                            isSelected
+                                                ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light"
+                                                : "hover:bg-surface-100 dark:hover:bg-surface-800 text-text-secondary dark:text-text-secondary-dark"
+                                        )}
+                                    >
+                                        <IconForView collectionOrView={collection} size={"small"} className={cls(
+                                            isSelected
+                                                ? "text-primary dark:text-primary-light"
+                                                : "text-text-secondary 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}
+                            />
+                        ) : (
+                            <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
+                                    onClick={() => navigate(urlController.buildAppUrlPath("schema/new"))}
+                                >
+                                    <PlusIcon/>
+                                    Add new collection
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                }
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,302 @@
+
+import { FieldCaption } from "../../_cms_internals";
+import React, { useMemo, useState } from "react";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { getFieldConfig } from "../../../components/field_configs";
+import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
+import { EntityCollection, Property } from "@rebasepro/types";
+import { BooleanSwitchWithLabel, Container, IconButton, Select, SelectItem, TextField, Typography, Button , iconSize } from "@rebasepro/ui";
+import { XIcon } from "lucide-react";
+
+import { useFormex } from "@rebasepro/formex";
+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";
+
+export function DisplaySettingsForm({
+    expandKanban
+}: {
+    expandKanban?: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue,
+        handleChange,
+        submitCount
+    } = useFormex<EntityCollection>();
+
+    const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const configController = useCollectionsConfigController();
+
+    // 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,
+                                                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>
+    );
+}