@rebasepro/cms 0.17.3 → 0.18.0

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

@@ -1,217 +0,0 @@
-
-import React, { useCallback } from "react";
-import { StringPropertyValidation } from "./validation/StringPropertyValidation";
-import { ValidationPanel } from "./validation/ValidationPanel";
-import { Field, getIn, useFormex } from "@rebasepro/forms";
-import { useTranslation } from "@rebasepro/app";
-
-import {
-    BooleanSwitchWithLabel,
-    DebouncedTextField,
-    ExpandablePanel,
-    SettingsIcon,
-    TextField,
-    Typography,
-    UploadCloudIcon
-} from "@rebasepro/ui";
-
-export function MarkdownPropertyField({
-    disabled,
-    showErrors
-}: {
-    disabled: boolean;
-    showErrors: boolean;
-}) {
-
-    const {
-        values,
-        setFieldValue
-    } = useFormex();
-    const { t } = useTranslation();
-
-    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) as string | undefined) ?? "{rand}_{file}";
-    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
-    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 as Record<string, unknown>).html as boolean | undefined) ?? true) : true;
-    const transformPastedTextValue = isMarkdownObject ? (((markdownValue as Record<string, unknown>).transformPastedText as boolean | undefined) ?? 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={t("markdown_strip_html")}
-                        />
-                        <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={t("markdown_convert_pasted")}
-                        />
-                        <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">
-                            <UploadCloudIcon/>
-                            <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={t("storage_file_name")}
-                                size={"small"}
-                                disabled={hasFilenameCallback || disabled}
-                                value={hasFilenameCallback ? "-" : fileNameValue}
-                            />
-                        </div>
-                        <div className={"col-span-12"}>
-                            <Field name={storagePath}
-                                as={DebouncedTextField}
-                                label={t("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={t("storage_max_size")}
-                                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={t("default_value")}
-                    value={(getIn(values, "defaultValue") as string | undefined) ?? ""}/>
-
-            </div>
-        </>
-    );
-}

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

@@ -1,117 +0,0 @@
-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/forms";
-import { useTranslation } from "@rebasepro/app";
-
-export function NumberPropertyField({ disabled }: {
-    disabled: boolean;
-}) {
-
-    const { values, setFieldValue, touched, errors } = useFormex();
-    const { t } = useTranslation();
-
-    const columnTypePath = "columnType";
-    const columnTypeValue: string | undefined = getIn(values, columnTypePath) as string | undefined;
-    const columnTypeError: string | undefined = (getIn(touched, columnTypePath) && getIn(errors, columnTypePath)) as string | undefined;
-
-    const isIdPath = "isId";
-    const isIdValue: string | boolean | undefined = getIn(values, isIdPath) as string | boolean | undefined;
-    const isIdError: string | undefined = (getIn(touched, isIdPath) && getIn(errors, isIdPath)) as string | undefined;
-
-    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={t("db_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={t("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={t("default_value")}
-                    value={(getIn(values, "defaultValue") as string | number | undefined) ?? ""}/>
-
-            </div>
-        </>
-    );
-}

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

@@ -1,129 +0,0 @@
-import { IconForView, useTranslation } from "@rebasepro/app";
-import { FieldCaption, useCollectionRegistryController } from "../../../_cms_internals";
-import React from "react";
-import { Field, getIn, useFormex } from "@rebasepro/forms";
-;
-import { NumberProperty, StringProperty } from "@rebasepro/types";
-import { CircularProgress, Select, 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) as string | undefined;
-    const pathError: string | undefined = (showErrors && getIn(errors, pathPath)) as string | undefined;
-
-    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();
-    const { t } = useTranslation();
-
-    if (!collectionRegistry.initialised)
-        return <div className={"col-span-12"}>
-            <CircularProgress/>
-        </div>;
-
-    const collections = collectionRegistry.collections ?? [];
-
-    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={t("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}>
-
-                {collections.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>;
-                })}
-
-            </Select>
-
-        </>
-    );
-}