@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/collection_editor/GeneralSettingsForm.tsx

@@ -1,288 +0,0 @@
-
-import { IconForView, useTranslation } from "@rebasepro/app";
-import { FieldCaption } from "../../_cms_internals";
-import React, { useState } from "react";
-
-import { SearchIconsView } from "../../_cms_internals";
-
-import {
-    BooleanSwitchWithLabel,
-    Chip,
-    cls,
-    Container,
-    DebouncedTextField,
-    Dialog,
-    ExpandablePanel,
-    HistoryIcon,
-    IconButton,
-    iconSize,
-    SearchIcon,
-    Select,
-    SelectItem,
-    TextField,
-    Tooltip,
-    Typography
-} from "@rebasepro/ui";
-import { Field, getIn, useFormex } from "@rebasepro/forms";
-import { useCollectionsConfigController } from "../../useCollectionsConfigController";
-import { singular, toSnakeCase } from "@rebasepro/utils";
-import type { ExtraCollectionFieldsParams } from "../../extensibility_types";
-import { toSerializableCollectionConfig } from "../../serializable_utils";
-import type { AdminCollection, AdminPostgresCollection } from "@rebasepro/cms-types";
-
-export function GeneralSettingsForm({
-    isNewCollection,
-    existingPaths,
-    existingIds,
-    parentCollection,
-    renderExtraCollectionFields,
-    standalone,
-}: {
-    isNewCollection: boolean;
-    existingPaths?: string[];
-    existingIds?: string[];
-    parentCollection?: AdminCollection;
-    renderExtraCollectionFields?: (params: ExtraCollectionFieldsParams) => React.ReactNode;
-    standalone?: boolean;
-}) {
-
-    const {
-        values,
-        setFieldValue,
-        handleChange,
-        touched,
-        errors,
-        setFieldTouched,
-        submitCount
-    } = useFormex<AdminPostgresCollection>();
-
-    const [iconDialogOpen, setIconDialogOpen] = useState(false);
-
-    const configControllerFromContext = useCollectionsConfigController();
-    const configController = standalone ? { readOnly: false } : configControllerFromContext;
-
-    const updateDatabaseId = (databaseId: string) => {
-        setFieldValue("databaseId", databaseId ?? undefined);
-    }
-
-    const updateName = (name: string) => {
-        setFieldValue("name", name);
-
-        const pathTouched = getIn(touched, "table");
-        if (!pathTouched && isNewCollection && name) {
-            setFieldValue("table", toSnakeCase(name));
-        }
-
-        const idTouched = getIn(touched, "slug");
-        if (!idTouched && isNewCollection && name) {
-            setFieldValue("slug", toSnakeCase(name));
-        }
-
-        const singularNameTouched = getIn(touched, "singularName");
-        if (!singularNameTouched && isNewCollection && name) {
-            setFieldValue("singularName", singular(name));
-        }
-    };
-
-    const collectionIcon = <IconForView collectionOrView={values}/>;
-    const isSubcollection = !!parentCollection;
-    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>
-                    <div className="flex flex-row gap-2 items-center">
-                        <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
-                            {isNewCollection ? "New collection" : `${values?.name} collection`}
-                        </Typography>
-                        <DefaultDatabaseField databaseId={values.databaseId}
-                            disabled={configController?.readOnly}
-                            onDatabaseIdUpdate={updateDatabaseId}/>
-
-                        <Tooltip title={"Change icon"}
-                            asChild={true}>
-                            <IconButton
-                                shape={"square"}
-                                disabled={configController?.readOnly}
-                                onClick={() => setIconDialogOpen(true)}>
-                                {collectionIcon}
-                            </IconButton>
-                        </Tooltip>
-                    </div>
-
-                    {parentCollection && <Chip colorScheme={"teal"}>
-                        <Typography variant={"caption"}>
-                            This is a subcollection of <b>{parentCollection.name}</b>
-                        </Typography>
-                    </Chip>}
-
-                </div>
-
-                <fieldset disabled={configController?.readOnly} className="contents">
-                    <div className={"grid grid-cols-12 gap-4"}>
-
-                        {/* Name */}
-                        <div className={"col-span-12"}>
-                            <TextField
-                                value={values.name ?? ""}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => updateName(e.target.value)}
-                                label={"Name"}
-                                autoFocus={true}
-                                required
-                                error={showErrors && Boolean(errors.name)}/>
-                            <FieldCaption error={touched.name && Boolean(errors.name)}>
-                                {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
-                            </FieldCaption>
-                        </div>
-
-                        {/* Table name */}
-                        <div className={cls("col-span-12")}>
-                            <Field name={"table"}
-                                as={DebouncedTextField}
-                                label={"Table name"}
-                                required
-                                error={showErrors && Boolean(errors.table)}/>
-
-                            <FieldCaption error={touched.table && Boolean(errors.table)}>
-                                {touched.table && Boolean(errors.table)
-                                    ? errors.table
-                                    : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "PostgreSQL table name for this collection"}
-                            </FieldCaption>
-                        </div>
-
-                        {/* Singular Name */}
-                        <div className={"col-span-12"}>
-                            <TextField
-                                error={showErrors && Boolean(errors.singularName)}
-                                name={"singularName"}
-                                aria-describedby={"singularName-helper"}
-                                onChange={(e) => {
-                                    setFieldTouched("singularName", true);
-                                    return handleChange(e);
-                                }}
-                                value={values.singularName ?? ""}
-                                label={"Singular name"}/>
-                            <FieldCaption error={showErrors && Boolean(errors.singularName)}>
-                                {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
-                            </FieldCaption>
-                        </div>
-
-                        {/* Description */}
-                        <div className={"col-span-12"}>
-                            <TextField
-                                error={showErrors && Boolean(errors.description)}
-                                name="description"
-                                value={values.description ?? ""}
-                                onChange={handleChange}
-                                multiline
-                                minRows={2}
-                                aria-describedby="description-helper-text"
-                                label="Description"
-                            />
-                            <FieldCaption error={showErrors && Boolean(errors.description)}>
-                                {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
-                            </FieldCaption>
-                        </div>
-
-                        {/* Collection ID */}
-                        <div className={"col-span-12"}>
-                            <DebouncedTextField
-                                name={"slug"}
-                                value={values.slug ?? ""}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setFieldValue("slug", e.target.value)}
-                                disabled={!isNewCollection}
-                                label={"Collection ID"}
-                                error={showErrors && Boolean(errors.slug)}/>
-                            <FieldCaption error={touched.slug && Boolean(errors.slug)}>
-                                {touched.slug && Boolean(errors.slug) ? errors.slug : "This ID identifies this collection. Typically the same as the path."}
-                            </FieldCaption>
-                        </div>
-
-                    </div>
-
-                    {/* Advanced Settings */}
-                    {/* eslint-disable-next-line no-constant-condition */}
-                    {false ? <ExpandablePanel
-                        title={<Typography variant="subtitle2">Advanced settings</Typography>}
-                        initiallyExpanded={false}
-                        className="mt-4"
-                        innerClassName="p-4 flex flex-col gap-4"
-                    >
-                        {/* HistoryIcon revisions */}
-                        <div>
-                            <BooleanSwitchWithLabel
-                                position={"start"}
-                                allowIndeterminate={true}
-                                label={<span className="flex items-center gap-2"><HistoryIcon size={iconSize.smallest}/>{values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
-                                    values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
-                                )}</span>}
-                                onValueChange={(v) => setFieldValue("history", v)}
-                                value={values.history ?? null}
-                            />
-                            <FieldCaption>
-                                When enabled, each document in this collection will have a history of changes.
-                                This is useful for auditing purposes. The data is stored in a subcollection of the document
-                                in your database, called <b>__history</b>.
-                            </FieldCaption>
-                        </div>
-
-                    </ExpandablePanel> : null}
-                </fieldset>
-
-                <div style={{ height: "52px" }}/>
-
-                <Dialog
-                    open={iconDialogOpen}
-                    onOpenChange={setIconDialogOpen}
-                    maxWidth={"xl"}
-                    fullWidth
-                >
-                    <div className={"p-4 overflow-auto min-h-[200px]"}>
-                        <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
-                            onIconSelected={(icon: string) => {
-                                setIconDialogOpen(false);
-                                setFieldValue("icon", icon);
-                            }}/>
-                    </div>
-                </Dialog>
-
-                {renderExtraCollectionFields && (
-                    <div className="mt-4">
-                        {renderExtraCollectionFields({
-                            metadata: (values.metadata ?? {}) as Record<string, unknown>,
-                            onMetadataChange: (key: string, value: unknown) => {
-                                setFieldValue(`metadata.${key}`, value);
-                            },
-                            collection: toSerializableCollectionConfig(values),
-                        })}
-                    </div>
-                )}
-
-            </Container>
-        </div>
-    );
-}
-
-function DefaultDatabaseField({
-    databaseId,
-    disabled = false,
-    onDatabaseIdUpdate
-}: { databaseId?: string, disabled?: boolean, onDatabaseIdUpdate: (databaseId: string) => void }) {
-
-    const { t } = useTranslation();
-
-    return <Tooltip title={t("database_id")}
-        side={"top"}
-        align={"start"}>
-        <TextField size={"small"}
-            aria-label={t("database_id")}
-            invisible={true}
-            inputClassName={"text-end"}
-            disabled={disabled}
-            value={databaseId ?? ""}
-            onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => onDatabaseIdUpdate(e.target.value)}
-            placeholder={"(default)"}></TextField>
-    </Tooltip>
-}

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -1,141 +0,0 @@
-import { useSafeSnackbarController } from "../../useSafeSnackbarController";
-
-import { Button, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import React from "react";
-import JSON5 from "json5";
-import { Highlight, themes } from "prism-react-renderer"
-import { camelCase } from "./utils/strings";
-import { clone } from "@rebasepro/forms";
-import { isEmptyObject } from "@rebasepro/utils";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export function GetCodeDialog({
-    collection,
-    onOpenChange,
-    open
-}: { onOpenChange: (open: boolean) => void, collection: AdminCollection, open: boolean }) {
-
-    const snackbarController = useSafeSnackbarController();
-
-    const code = collection
-        ? "import { AdminCollection } from \"@rebasepro/app\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:AdminCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
-        : "No collection selected";
-    return <Dialog open={open}
-        onOpenChange={onOpenChange}
-        maxWidth={"4xl"}>
-        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
-        <DialogContent>
-
-            <Typography variant={"body2"} className={"my-4 mb-8"}>
-                If you want to customise the collection in code, you can add this collection code to your admin
-                app configuration.
-                More info in the <a
-                    rel="noopener noreferrer"
-                    href={"https://rebase.pro/docs/cloud/quickstart"}>docs</a>.
-            </Typography>
-            <Highlight
-                theme={themes.vsDark}
-                code={code}
-                language="typescript"
-            >
-                {({
-                    className,
-                    style,
-                    tokens,
-                    getLineProps,
-                    getTokenProps
-                }) => (
-                    <pre style={style} className={"p-4 rounded-xs text-sm"}>
-                        {tokens.map((line, i) => (
-                            <div key={i} {...getLineProps({ line })}>
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token })}/>
-                                ))}
-                            </div>
-                        ))}
-                    </pre>
-                )}
-            </Highlight>
-
-        </DialogContent>
-        <DialogActions>
-            <Button
-                variant={"text"}
-                size={"small"}
-                onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    snackbarController?.open({
-                        type: "success",
-                        message: "Copied"
-                    })
-                    return navigator.clipboard.writeText(code);
-                }}>
-                <CopyIcon/>
-                CopyIcon to clipboard
-            </Button>
-            <Button onClick={() => onOpenChange(false)}>Close</Button>
-        </DialogActions>
-    </Dialog>;
-}
-
-function collectionToCode(collection: AdminCollection): object {
-
-    const propertyCleanup = (value: unknown): unknown => {
-        if (value === undefined || value === null) {
-            return value;
-        }
-        const valueCopy = clone(value);
-        if (typeof valueCopy === "function") {
-            return valueCopy;
-        }
-        if (Array.isArray(valueCopy)) {
-            return valueCopy.map((v: unknown) => propertyCleanup(v));
-        }
-        if (typeof valueCopy === "object") {
-            if (valueCopy === null)
-                return valueCopy;
-            const obj = valueCopy as Record<string, any>;
-            Object.keys(obj).forEach((key) => {
-                if (!isEmptyObject(obj)) {
-                    const childRes = propertyCleanup(obj[key]);
-                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
-                        obj[key] = childRes;
-                    } else {
-                        delete obj[key];
-                    }
-                }
-            });
-            delete obj.resolved;
-            delete obj.propertiesOrder;
-            delete obj.propertyConfig;
-
-        }
-
-        return valueCopy;
-    }
-
-    return {
-        id: collection.slug,
-        name: collection.name,
-        singularName: collection.singularName,
-        path: collection.slug,
-        description: collection.description,
-
-        icon: collection.icon,
-        defaultFilter: collection.defaultFilter,
-        sort: collection.sort,
-        properties: Object.entries({
-            ...(collection.properties ?? {})
-        })
-            .map(([key, value]) => ({
-                [key]: propertyCleanup(value)
-            }))
-            .reduce((a, b) => ({
-                ...a,
-                ...b
-            }), {})
-        // subcollections: (collection.subcollections ?? []).map(collectionToCode)
-    }
-
-}

package/src/collection_editor/ui/collection_editor/KanbanConfigSection.tsx

@@ -1,194 +0,0 @@
-
-import { FieldCaption } from "../../_cms_internals";
-import React, { useMemo, useRef, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-import { Property } from "@rebasepro/types";
-import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { getFieldConfig } from "../../../components/field_configs";
-import { Button, IconButton, iconSize, Select, SelectItem, Typography, XIcon } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/forms";
-import { PropertyFormDialog } from "./PropertyEditView";
-import { unslugify } from "@rebasepro/utils";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export function KanbanConfigSection({
-    className,
-    forceExpanded
-}: {
-    className?: string;
-    forceExpanded?: boolean;
-}) {
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-    const { values, setFieldValue } = useFormex<AdminCollection>();
-    const panelRef = useRef<HTMLDivElement>(null);
-    const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
-
-    // Get enum string properties (for columnProperty)
-    const enumStringProperties = 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" && prop.enum) {
-                result.push({
-                    key,
-                    label: (prop as Property).name || key,
-                    property: prop as Property
-                });
-            }
-        });
-        return result;
-    }, [values.properties]);
-
-    const kanbanConfig = values.kanban;
-
-    // Check if columnProperty references a non-existent property
-    const columnPropertyMissing = Boolean(kanbanConfig?.columnProperty) &&
-        !enumStringProperties.some(p => p.key === kanbanConfig?.columnProperty);
-
-    // Scroll to section when forceExpanded
-    React.useEffect(() => {
-        if (forceExpanded && panelRef.current) {
-            setTimeout(() => {
-                panelRef.current?.scrollIntoView({ behavior: "smooth",
-block: "center" });
-            }, 100);
-        }
-    }, [forceExpanded]);
-
-    const showCreateButton = !kanbanConfig?.columnProperty || columnPropertyMissing;
-    const dialogPropertyKey = columnPropertyMissing && kanbanConfig?.columnProperty
-        ? kanbanConfig.columnProperty
-        : "status";
-    const dialogPropertyName = columnPropertyMissing && kanbanConfig?.columnProperty
-        ? unslugify(kanbanConfig.columnProperty)
-        : "Status";
-
-    return (
-        <div className={className} ref={panelRef}>
-            <Select
-                key={`column-select-${enumStringProperties.length}`}
-                name="kanban.columnProperty"
-                label="Kanban Column Property"
-                fullWidth={true}
-                position={"item-aligned"}
-                disabled={enumStringProperties.length === 0}
-                error={columnPropertyMissing}
-                value={kanbanConfig?.columnProperty ?? ""}
-                onValueChange={(v) => {
-                    if (v) {
-                        setFieldValue("kanban", {
-                            ...kanbanConfig,
-                            columnProperty: v
-                        });
-                    } else {
-                        setFieldValue("kanban", undefined);
-                    }
-                }}
-                renderValue={(value) => {
-                    if (columnPropertyMissing) {
-                        return <span className="text-red-500">{value} (not found)</span>;
-                    }
-                    const prop = enumStringProperties.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={kanbanConfig?.columnProperty ? (
-                    <IconButton
-                        size="small"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            setFieldValue("kanban", undefined);
-                        }}
-                    >
-                        <XIcon size={iconSize.smallest}/>
-                    </IconButton>
-                ) : undefined}
-            >
-                {enumStringProperties.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 || "Enum"}
-                                    </Typography>
-                                </div>
-                            </div>
-                        </SelectItem>
-                    );
-                })}
-            </Select>
-            <FieldCaption error={columnPropertyMissing}>
-                {columnPropertyMissing
-                    ? `Property "${kanbanConfig?.columnProperty}" does not exist or is not an enum string property. Please select a valid property or clear the selection.`
-                    : enumStringProperties.length === 0
-                        ? "No enum string properties found. Add a string property with enum to use Kanban view."
-                        : "Select a string property with enum values to group entities into columns"
-                }
-            </FieldCaption>
-
-            {showCreateButton && (
-                <>
-                    <Button
-                        variant="text"
-                        size="small"
-                        className="ml-3.5 mt-2"
-                        onClick={() => setColumnPropertyDialogOpen(true)}
-                    >
-                        + Create &quot;{dialogPropertyKey}&quot; property
-                    </Button>
-                    <PropertyFormDialog
-                        open={columnPropertyDialogOpen}
-                        onCancel={() => setColumnPropertyDialogOpen(false)}
-                        property={{
-                            type: "string",
-                            name: dialogPropertyName,
-                            enum: [
-                                { id: "todo",
-label: "To Do" },
-                                { id: "in_progress",
-label: "In Progress" },
-                                { id: "done",
-label: "Done" }
-                            ]
-                        } as Property}
-                        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("kanban", {
-                                ...kanbanConfig,
-                                columnProperty: id
-                            });
-                            setColumnPropertyDialogOpen(false);
-                        }}
-                    />
-                </>
-            )}
-        </div>
-    );
-}

package/src/collection_editor/ui/collection_editor/LayoutModeSwitch.tsx

@@ -1,53 +0,0 @@
-import {
-    AppWindow,
-    cls,
-    ColumnsIcon,
-    PanelLeftIcon,
-    SquareIcon,
-    ToggleButtonGroup,
-    Typography
-} from "@rebasepro/ui";
-
-export function LayoutModeSwitch({
-    value,
-    onChange,
-    className
-}: {
-    value: "side_panel" | "full_screen" | "split" | "dialog";
-    onChange: (value: "side_panel" | "full_screen" | "split" | "dialog") => void;
-    className?: string;
-}) {
-
-    return <div className={cls(className)}>
-        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
-        <div className={"my-2"}>
-            <ToggleButtonGroup
-                value={value}
-                onValueChange={onChange}
-                options={[
-                    {
-                        value: "side_panel",
-                        label: "Side panel",
-                        icon: <ColumnsIcon/>
-                    },
-                    {
-                        value: "full_screen",
-                        label: "Full screen",
-                        icon: <SquareIcon/>
-                    },
-                    {
-                        value: "split",
-                        label: "Split view",
-                        icon: <PanelLeftIcon/>
-                    },
-                    {
-                        value: "dialog",
-                        label: "Centered dialog",
-                        icon: <AppWindow/>
-                    }
-                ]}
-            />
-        </div>
-        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen, inline side dialog, or centered dialog</Typography>
-    </div>
-}