@rebasepro/cms 0.0.1-canary.4d4fb3e

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,137 @@
+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,
+    AddIcon,
+    Button,
+} from "@rebasepro/ui";
+;
+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) { }
+    }, [sidebarSize]);
+
+    const collections = configController.collections || [];
+
+    return (
+        <div className="flex h-full w-full bg-white dark:bg-surface-950 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-950 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-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"}
+                            >
+                                <AddIcon size="small" />
+                            </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={18} 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"))}
+                                >
+                                    <AddIcon />
+                                    Add new collection
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                }
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,312 @@
+import { FieldCaption } from "../../_cms_internals";
+import React, { useMemo, useState } from "react";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { getFieldConfig, PropertyConfigBadge } from "../../_cms_internals";
+import { EntityCollection, Property } from "@rebasepro/types";
+import {
+    BooleanSwitchWithLabel,
+    CloseIcon,
+    Container,
+    IconButton,
+    Select,
+    SelectItem,
+    TextField,
+    Typography,
+    Button
+} from "@rebasepro/ui";
+
+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 number properties (for orderProperty)
+    const numberProperties = 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 === 'number') {
+                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) &&
+                                    !numberProperties.some(p => p.key === values.orderProperty);
+
+                                return (
+                                    <>
+                                        <Select
+                                            key={`order-select-${numberProperties.length}`}
+                                            name="orderProperty"
+                                            label="Order Property"
+                                            fullWidth={true}
+                                            position={"item-aligned"}
+                                            disabled={numberProperties.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 = numberProperties.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);
+                                                    }}
+                                                >
+                                                    <CloseIcon size="small" />
+                                                </IconButton>
+                                            ) : undefined}
+                                        >
+                                            {numberProperties.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 || "Number"}
+                                                                </Typography>
+                                                            </div>
+                                                        </div>
+                                                    </SelectItem>
+                                                );
+                                            })}
+                                        </Select>
+                                        <FieldCaption error={orderPropertyMissing}>
+                                            {orderPropertyMissing
+                                                ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.`
+                                                : numberProperties.length === 0
+                                                    ? "No number properties found. Add a number property to enable ordering."
+                                                    : "Select a number property to persist the order of items"
+                                            }
+                                        </FieldCaption>
+                                    </>
+                                );
+                            })()}
+                            {(() => {
+                                const orderPropertyMissing = Boolean(values.orderProperty) &&
+                                    !numberProperties.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 "{dialogPropertyKey}" property
+                                        </Button>
+                                        <PropertyFormDialog
+                                            open={orderPropertyDialogOpen}
+                                            onCancel={() => setOrderPropertyDialogOpen(false)}
+                                            property={{
+                                                type: "number",
+                                                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}>
+                                    <CloseIcon size={"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>
+    );
+}

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import {
+    ConfirmationDialog,
+    useCustomizationController
+} from "@rebasepro/core";
+import { resolveEntityAction } from "../../_cms_internals";
+import { type EntityCollection } from "@rebasepro/types";
+import { EntityAction } from "@rebasepro/types";
+import {
+    AddIcon,
+    Alert,
+    Button,
+    Container,
+    DeleteIcon,
+    IconButton,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Typography,
+} from "@rebasepro/ui";
+import { useFormex } from "@rebasepro/formex";
+import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
+
+export function EntityActionsEditTab({
+    collection,
+    embedded = false
+}: {
+    collection: EntityCollection,
+    embedded?: boolean;
+}) {
+
+    const { entityActions: contextEntityActions } = useCustomizationController();
+
+    const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React.useState<boolean>(false);
+    const [actionToDelete, setActionToDelete] = React.useState<string | undefined>();
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex<EntityCollection>();
+
+    const resolvedEntityActions = ((values.entityActions ?? []) as (string | EntityAction<any>)[])
+        .filter((e): e is string => typeof e === "string")
+        .map((e: string) => resolveEntityAction(e, contextEntityActions))
+        .filter(Boolean) as EntityAction<any>[] ?? [];
+    const hardCodedEntityActions = collection.entityActions?.filter((e: string | EntityAction<any>): e is EntityAction<any> => typeof e !== "string") ?? [];
+    const totalEntityActions = resolvedEntityActions.length + hardCodedEntityActions.length;
+
+    const content = (
+        <div className={"flex flex-col gap-12"}>
+            <div className={"flex-grow flex flex-col gap-4 items-start w-full"}>
+                <Typography variant={"h6"}>
+                    Custom actions
+                </Typography>
+
+                {<>
+                    <div className={"flex flex-col gap-4 w-full"}>
+                        {totalEntityActions > 0 && <Table>
+                            <TableBody>
+                                {resolvedEntityActions.map((action) => (
+                                    <TableRow key={action.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {action.name}
+                                            </Typography>
+                                        </TableCell>
+                                        <TableCell
+                                            align="right">
+                                            <Tooltip title={"Remove"}
+                                                asChild={true}>
+                                                <IconButton size="small"
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        setActionToDelete(action.key);
+                                                    }}
+                                                    color="inherit">
+                                                    <DeleteIcon size={"small"} />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                                {hardCodedEntityActions.map((action: EntityAction<any>) => (
+                                    <TableRow key={action.key}>
+                                        <TableCell
+                                            align="left">
+                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                {action.name}
+                                            </Typography>
+                                            <Typography variant={"caption"} className={"flex-grow"}>
+                                                This action is defined in code with
+                                                key <code>{action.key}</code>
+                                            </Typography>
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>}
+
+                        <Button
+                            onClick={() => {
+                                setAddEntityActionDialogOpen(true);
+                            }}
+                            variant="filled"
+                            color="neutral"
+                            startIcon={<AddIcon />}>
+                            Add custom entity action
+                        </Button>
+                    </div>
+
+                </>}
+
+
+            </div>
+
+        </div>
+    );
+
+    return (
+        <>
+            {embedded ? (
+                content
+            ) : (
+                <div className={"overflow-auto my-auto"}>
+                    <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+                        {content}
+                    </Container>
+                    <div style={{ height: "52px" }} />
+                </div>
+            )}
+
+            {actionToDelete &&
+                <ConfirmationDialog open={Boolean(actionToDelete)}
+                    onAccept={() => {
+                        setFieldValue("entityActions", values.entityActions?.filter((e: string | EntityAction<any>) => e !== actionToDelete));
+                        setActionToDelete(undefined);
+                    }}
+                    onCancel={() => setActionToDelete(undefined)}
+                    title={<>Remove this action?</>}
+                    body={<>This will <b>not
+                        delete any data</b>, only
+                        the action in the CMS</>} />}
+
+            <EntityActionsSelectDialog
+                open={addEntityActionDialogOpen}
+                onClose={(selectedActionKey) => {
+                    if (selectedActionKey) {
+                        console.log("Selected action key:", selectedActionKey);
+                        const value = [...(values.entityActions ?? []), selectedActionKey]
+                            // only actions that are defined in the registry
+                            .filter((e: string | EntityAction<any>): e is string => typeof e === "string" && (contextEntityActions ?? []).some(action => action.key === e));
+                        ;
+                        setFieldValue("entityActions", value);
+                    }
+                    setAddEntityActionDialogOpen(false);
+                }} />
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -0,0 +1,40 @@
+import { useCustomizationController } from "@rebasepro/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
+import React from "react";
+
+export function EntityActionsSelectDialog({
+    open,
+    onClose
+}: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
+    const {
+        entityActions
+    } = useCustomizationController();
+
+    return <Dialog
+        maxWidth={"md"}
+        open={open}>
+        <DialogTitle>Select custom action</DialogTitle>
+        <DialogContent className={"flex flex-col gap-4"}>
+            {entityActions?.map((action) => {
+                return <Button
+                    key={action.key}
+                    onClick={() => onClose(action.key)}
+                    fullWidth
+                    variant={"text"}
+                >
+                    {action.name} ({action.key})
+                </Button>;
+            })}
+            {(entityActions ?? []).length === 0 &&
+                <Typography variant={"body2"}>
+                    No custom actions defined. Define your custom actions in the customization settings, before using
+                    this
+                    dialog.
+                </Typography>
+            }
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={() => onClose()}>Cancel</Button>
+        </DialogActions>
+    </Dialog>
+}