@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/collection_editor/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback } from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { Field, getIn, useFormex } from "@rebasepro/formex";
+
+import {
+    BooleanSwitchWithLabel,
+    CloudUploadIcon,
+    DebouncedTextField,
+    ExpandablePanel,
+    SettingsIcon,
+    TextField,
+    Typography
+} from "@rebasepro/ui";
+
+export function MarkdownPropertyField({
+    disabled,
+    showErrors
+}: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex();
+
+    const baseStoragePath = "storage";
+    const baseMarkdownPath = "markdown";
+
+    const metadata = `${baseStoragePath}.metadata`;
+    const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+
+    // Markdown config paths
+    const htmlPath = `${baseMarkdownPath}.html`;
+    const transformPastedTextPath = `${baseMarkdownPath}.transformPastedText`;
+
+    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
+
+    // Markdown config values - check if markdown is an object or boolean
+    const markdownValue = getIn(values, "markdown");
+    const isMarkdownObject = typeof markdownValue === "object" && markdownValue !== null;
+    const htmlValue = isMarkdownObject ? (markdownValue.html ?? true) : true;
+    const transformPastedTextValue = isMarkdownObject ? (markdownValue.transformPastedText ?? false) : false;
+
+    const hasFilenameCallback = typeof fileNameValue === "function";
+    const hasStoragePathCallback = typeof storagePathValue === "function";
+
+    // Handler to update markdown config - converts from boolean to object if needed
+    const updateMarkdownConfig = useCallback((key: "html" | "transformPastedText", value: boolean) => {
+        const currentMarkdown = getIn(values, "markdown");
+        if (typeof currentMarkdown === "object" && currentMarkdown !== null) {
+            // Already an object, update the key
+            setFieldValue(`markdown.${key}`, value);
+        } else {
+            // Convert from boolean to object
+            const defaultConfig = {
+                html: true,
+                transformPastedText: false
+            };
+            setFieldValue("markdown", {
+                ...defaultConfig,
+                [key]: value
+            });
+        }
+    }, [values, setFieldValue]);
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <StringPropertyValidation disabled={disabled}
+                        length={true}
+                        lowercase={true}
+                        max={true}
+                        min={true}
+                        trim={true}
+                        uppercase={true}
+                        showErrors={showErrors} />
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+                <ExpandablePanel
+                    title={
+                        <div className="flex flex-row text-surface-500">
+                            <SettingsIcon />
+                            <Typography variant={"subtitle2"}
+                                className="ml-4">
+                                Paste behavior
+                            </Typography>
+                        </div>
+                    }>
+
+                    <div className={"flex flex-col gap-2 p-4"}>
+                        <BooleanSwitchWithLabel
+                            size={"small"}
+                            disabled={disabled}
+                            value={!htmlValue}
+                            onValueChange={(value) => updateMarkdownConfig("html", !value)}
+                            label={"Strip HTML on paste"}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            Remove HTML tags and inline styles when pasting content from external sources
+                        </Typography>
+
+                        <BooleanSwitchWithLabel
+                            size={"small"}
+                            disabled={disabled}
+                            value={transformPastedTextValue}
+                            onValueChange={(value) => updateMarkdownConfig("transformPastedText", value)}
+                            label={"Convert pasted text to markdown"}
+                        />
+                        <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                            Convert rich text (from Google Docs, Word, etc.) to clean markdown format
+                        </Typography>
+                    </div>
+                </ExpandablePanel>
+            </div>
+
+            <div className={"col-span-12"}>
+                <ExpandablePanel
+                    title={
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon />
+                            <Typography variant={"subtitle2"}
+                                className="ml-4">
+                                File upload config
+                            </Typography>
+                        </div>
+                    }>
+
+                    <div className={"grid grid-cols-12 gap-2 p-4"}>
+
+
+                        <div className={"col-span-12"}>
+                            <Field name={fileName}
+                                as={DebouncedTextField}
+                                label={"File name"}
+                                size={"small"}
+                                disabled={hasFilenameCallback || disabled}
+                                value={hasFilenameCallback ? "-" : fileNameValue}
+                            />
+                        </div>
+                        <div className={"col-span-12"}>
+                            <Field name={storagePath}
+                                as={DebouncedTextField}
+                                label={"Storage path"}
+                                disabled={hasStoragePathCallback || disabled}
+                                size={"small"}
+                                value={hasStoragePathCallback ? "-" : storagePathValue}
+                            />
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                <p>You can use the following placeholders in
+                                    the file name
+                                    and storage path values:</p>
+                                <ul>
+                                    <li>{"{file} - Full name of the uploaded file"}</li>
+                                    <li>{"{file.name} - Name of the uploaded file without extension"}</li>
+                                    <li>{"{file.ext} - Extension of the uploaded file"}</li>
+                                    <li>{"{entityId} - ID of the entity"}</li>
+                                    <li>{"{propertyKey} - ID of this field"}</li>
+                                    <li>{"{path} - Path of this entity"}</li>
+                                    <li>{"{rand} - Random value used to avoid name collisions"}</li>
+                                </ul>
+                            </Typography>
+
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                When using Markdown, the URL of the uploaded files are always saved in the text value
+                                (not
+                                the path).
+                            </Typography>
+                        </div>
+
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField name={maxSize}
+                                type={"number"}
+                                label={"Max size (in bytes)"}
+                                size={"small"}
+                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    if (value === "") setFieldValue(maxSize, undefined);
+                                    else setFieldValue(maxSize, parseInt(value));
+                                }}
+                            />
+                        </div>
+
+                    </div>
+                </ExpandablePanel>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                    disabled={disabled}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+                        setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                    }}
+                    label={"Default value"}
+                    value={getIn(values, "defaultValue") ?? ""} />
+
+            </div>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/NumberPropertyField.tsx

@@ -0,0 +1,115 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React from "react";
+import { NumberPropertyValidation } from "./validation/NumberPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+;
+import { Select, SelectItem, TextField } from "@rebasepro/ui";
+import { getIn, useFormex } from "@rebasepro/formex";
+
+export function NumberPropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const { values, setFieldValue, touched, errors } = useFormex();
+
+    const columnTypePath = "columnType";
+    const columnTypeValue: string | undefined = getIn(values, columnTypePath);
+    const columnTypeError: string | undefined = getIn(touched, columnTypePath) && getIn(errors, columnTypePath);
+
+    const isIdPath = "isId";
+    const isIdValue: string | boolean | undefined = getIn(values, isIdPath);
+    const isIdError: string | undefined = getIn(touched, isIdPath) && getIn(errors, isIdPath);
+
+    return (
+        <>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <NumberPropertyValidation disabled={disabled} />
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+                <Select name={columnTypePath}
+                    disabled={disabled || Boolean(isIdValue)}
+                    fullWidth={true}
+                    value={columnTypeValue ?? "_default_"}
+                    onValueChange={(v) => setFieldValue(columnTypePath, v === "_default_" ? undefined : v)}
+                    renderValue={(v) => {
+                        switch (v) {
+                            case "integer": return "integer";
+                            case "real": return "real (float4)";
+                            case "double precision": return "double precision (float8)";
+                            case "numeric": return "numeric / decimal";
+                            case "bigint": return "bigint";
+                            case "serial": return "serial";
+                            case "bigserial": return "bigserial";
+                            case "_default_": return "Default (integer/numeric)";
+                            default: return "Default (integer/numeric)";
+                        }
+                    }}
+                    error={Boolean(columnTypeError)}
+                    label={"Database Column Type"}>
+                    <SelectItem value={"_default_"}> Default (integer/numeric) </SelectItem>
+                    <SelectItem value={"integer"}> integer </SelectItem>
+                    <SelectItem value={"real"}> real (float4) </SelectItem>
+                    <SelectItem value={"double precision"}> double precision (float8) </SelectItem>
+                    <SelectItem value={"numeric"}> numeric / decimal </SelectItem>
+                    <SelectItem value={"bigint"}> bigint </SelectItem>
+                    <SelectItem value={"serial"}> serial </SelectItem>
+                    <SelectItem value={"bigserial"}> bigserial </SelectItem>
+                </Select>
+                <FieldCaption error={Boolean(columnTypeError)}>
+                    {columnTypeError ?? "Optional database override for this number field."}
+                </FieldCaption>
+            </div>
+
+            <div className={"col-span-12"}>
+                <Select name={isIdPath}
+                    disabled={disabled}
+                    fullWidth={true}
+                    value={isIdValue === true ? "true" : (isIdValue === false ? "false" : (isIdValue ?? "_default_"))}
+                    onValueChange={(v) => {
+                        if (v === "_default_" || v === "false") setFieldValue(isIdPath, undefined);
+                        else if (v === "true") setFieldValue(isIdPath, true);
+                        else setFieldValue(isIdPath, v);
+                    }}
+                    renderValue={(v) => {
+                        switch (v) {
+                            case "true": return "Yes (Auto-increment/identity)";
+                            case "increment": return "Yes (Increment)";
+                            case "manual": return "Yes (Manual input)";
+                            case "false":
+                            case "_default_": return "No";
+                            default: return `Yes (${v})`;
+                        }
+                    }}
+                    error={Boolean(isIdError)}
+                    label={"Primary Key / Unique ID"}>
+                    <SelectItem value={"_default_"}> No </SelectItem>
+                    <SelectItem value={"manual"}> Yes (Manual input) </SelectItem>
+                    <SelectItem value={"true"}> Yes (Auto-increment/identity) </SelectItem>
+                    <SelectItem value={"increment"}> Yes (Increment) </SelectItem>
+                </Select>
+                <FieldCaption error={Boolean(isIdError)}>
+                    {isIdError ?? "Set as Primary Key and configure ID generation strategy."}
+                </FieldCaption>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                    disabled={disabled}
+                    type={"number"}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+                        setFieldValue("defaultValue", e.target.value === "" ? undefined : parseFloat(e.target.value));
+                    }}
+                    label={"Default value"}
+                    value={getIn(values, "defaultValue") ?? ""} />
+
+            </div>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -0,0 +1,162 @@
+import { IconForView } from "@rebasepro/core";
+import { FieldCaption, useCollectionRegistryController } from "../../../_cms_internals";
+import React from "react";
+import { Field, getIn, useFormex } from "@rebasepro/formex";
+;
+import { NumberProperty, StringProperty } from "@rebasepro/types";
+import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@rebasepro/ui";
+
+export function ReferencePropertyField({
+    existing,
+    multiple,
+    disabled,
+    showErrors,
+    asString
+}: {
+    existing: boolean,
+    multiple: boolean,
+    disabled: boolean,
+    showErrors: boolean,
+    asString?: boolean
+}) {
+
+    const {
+        values,
+        errors,
+        setFieldValue,
+    } = useFormex<StringProperty | NumberProperty>();
+
+    const collectionRegistry = useCollectionRegistryController();
+
+    if (!collectionRegistry.initialised)
+        return <div className={"col-span-12"}>
+            <CircularProgress />
+        </div>;
+
+    const pathPath = asString ? "reference.slug" : (multiple ? "of.slug" : "path");
+    const pathValue: string | undefined = getIn(values, pathPath);
+    const pathError: string | undefined = showErrors && getIn(errors, pathPath);
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <Field name={pathPath}
+                    pathPath={pathPath}
+                    type="select"
+                    disabled={disabled}
+                    value={pathValue}
+                    error={pathError}
+                    setFieldValue={setFieldValue}
+                    as={CollectionsSelect} />
+
+            </div>
+
+        </>
+    );
+}
+
+export function CollectionsSelect({
+    disabled,
+    pathPath,
+    value,
+    setFieldValue,
+    error,
+    ...props
+}: {
+    disabled: boolean,
+    pathPath: string,
+    value?: string,
+    setFieldValue: (field: string, value: string) => void,
+    error?: string
+}) {
+
+    const collectionRegistry = useCollectionRegistryController();
+
+    if (!collectionRegistry.initialised)
+        return <div className={"col-span-12"}>
+            <CircularProgress />
+        </div>;
+
+    const collections = collectionRegistry.collections ?? [];
+
+    const groups: string[] = Array.from(new Set(
+        Object.values(collections).map(e => e.group).filter(Boolean) as string[]
+    ).values());
+
+    const ungroupedCollections = collections.filter((col) => !col.group);
+
+    return (
+        <>
+            <Select
+                error={Boolean(error)}
+                disabled={disabled}
+                value={value ?? ""}
+                position={"item-aligned"}
+                name={pathPath}
+                fullWidth={true}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFieldValue(pathPath, e.target.value)}
+                label={"Target collection"}
+                renderValue={(selected: string) => {
+                    const selectedCollection = collections.find(collection => collection.slug === selected);
+                    if (!selectedCollection) return null;
+                    return (
+                        <div className="flex flex-row">
+                            <IconForView collectionOrView={selectedCollection} />
+                            <Typography
+                                variant={"subtitle2"}
+                                className="ml-4">
+                                {selectedCollection?.name.toUpperCase()}
+                            </Typography>
+                        </div>)
+                }}
+                {...props}>
+
+                {groups.flatMap((group) => (
+                    <SelectGroup label={group || "Views"}
+                        key={`group_${group}`}>
+                        {
+                            collections.filter(collection => collection.group === group)
+                                .map((collection) => {
+                                    return <SelectItem
+                                        key={`${collection.slug}-${group}`}
+                                        value={collection.slug}>
+                                        <div className="flex flex-row">
+                                            <IconForView collectionOrView={collection} />
+                                            <Typography
+                                                variant={"subtitle2"}
+                                                className="ml-4">
+                                                {collection?.name.toUpperCase()}
+                                            </Typography>
+                                        </div>
+                                    </SelectItem>;
+                                })
+
+                        }
+                    </SelectGroup>
+                ))}
+
+                {ungroupedCollections && <SelectGroup label={"Views"}>
+                    {ungroupedCollections
+                        .map((collection) => {
+                            return <SelectItem key={collection.slug}
+                                value={collection.slug}>
+                                <div className="flex flex-row">
+                                    <IconForView collectionOrView={collection} />
+                                    <Typography
+                                        variant={"subtitle2"}
+                                        className="ml-4">
+                                        {collection?.name.toUpperCase()}
+                                    </Typography>
+                                </div>
+                            </SelectItem>;
+                        })
+
+                    }
+                </SelectGroup>}
+
+            </Select>
+
+        </>
+    );
+}