@rebasepro/cms 0.17.3-canary.gdd23447 → 0.18.0

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

@@ -1,403 +0,0 @@
-
-import React from "react";
-import {
-    Button,
-    DebouncedTextField,
-    ExpandablePanel,
-    MultiSelect,
-    MultiSelectItem,
-    Select,
-    SelectItem,
-    Typography,
-    UploadCloudIcon
-} from "@rebasepro/ui";
-
-import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/forms";
-import { useStorageSources, useTranslation } from "@rebasepro/app";
-import { DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
-import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
-import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
-import { ValidationPanel } from "./validation/ValidationPanel";
-import { SwitchControl } from "../SwitchControl";
-
-const fileTypes: Record<string, string> = {
-    "image/*": "Images",
-    "video/*": "Videos",
-    "audio/*": "Audio files",
-    "application/*": "Files (pdf, zip, csv, excel...)",
-    "text/*": "Text files"
-}
-
-export function StoragePropertyField({
-    multiple,
-    existing,
-    disabled
-}: {
-    multiple: boolean;
-    existing: boolean;
-    disabled: boolean;
-}) {
-
-    const {
-        values,
-        setFieldValue
-    } = useFormex();
-    const { t } = useTranslation();
-    const storageSources = useStorageSources();
-
-    const baseStoragePath = multiple ? "of.storage" : "storage";
-    const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
-    const storageSource = `${baseStoragePath}.storageSource`;
-
-    const metadata = `${baseStoragePath}.metadata`;
-    const fileName = `${baseStoragePath}.fileName`;
-    const maxSize = `${baseStoragePath}.maxSize`;
-    const storagePath = `${baseStoragePath}.storagePath`;
-    const storeUrl = `${baseStoragePath}.storeUrl`;
-    const includeBucketUrl = `${baseStoragePath}.includeBucketUrl`;
-
-    // Image resize config paths
-    const imageResize = `${baseStoragePath}.imageResize`;
-    const imageResizeMaxWidth = `${imageResize}.maxWidth`;
-    const imageResizeMaxHeight = `${imageResize}.maxHeight`;
-    const imageResizeMode = `${imageResize}.mode`;
-    const imageResizeFormat = `${imageResize}.format`;
-    const imageResizeQuality = `${imageResize}.quality`;
-
-    const fileNameValue = (getIn(values, fileName) as string | undefined) ?? "{rand}_{file}";
-    const storagePathValue = (getIn(values, storagePath) as string | undefined) ?? "/";
-    const maxSizeValue = getIn(values, maxSize) as number | undefined;
-
-    // Image resize values
-    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth) as number | undefined;
-    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight) as number | undefined;
-    const imageResizeModeValue = (getIn(values, imageResizeMode) as string | undefined) ?? "cover";
-    const imageResizeFormatValue = (getIn(values, imageResizeFormat) as string | undefined) ?? "original";
-    const imageResizeQualityValue = getIn(values, imageResizeQuality) as number | undefined;
-
-    const storedValue = getIn(values, acceptedFiles);
-    const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
-    const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
-
-    // Available storage backends (from `<Rebase storageSources={...}>`).
-    const sourceKeys = Object.keys(storageSources.sources)
-        .filter((key) => key !== DEFAULT_STORAGE_SOURCE_KEY);
-    const storageSourceValue = (getIn(values, storageSource) as string | undefined) ?? DEFAULT_STORAGE_SOURCE_KEY;
-
-    const handleTypesChange = (value: string[]) => {
-        if (!value) setFieldValue(acceptedFiles, undefined);
-        else setFieldValue(acceptedFiles, value);
-    };
-
-    const hasFilenameCallback = typeof fileNameValue === "function";
-    const hasStoragePathCallback = typeof storagePathValue === "function";
-
-    return (
-        <>
-
-            <div className={"col-span-12"}>
-
-                <ExpandablePanel
-                    title={
-                        <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
-                            <UploadCloudIcon/>
-                            <Typography variant={"subtitle2"}
-                                className="ml-4">
-                                File upload config
-                            </Typography>
-                        </div>
-                    }>
-
-                    <div className={"grid grid-cols-12 gap-2 p-4"}>
-
-                        {sourceKeys.length > 0 && (
-                            <div className={"col-span-12"}>
-                                <Select
-                                    className={"w-full"}
-                                    disabled={disabled}
-                                    name={storageSource}
-                                    value={storageSourceValue}
-                                    onValueChange={(value) =>
-                                        setFieldValue(storageSource, !value || value === DEFAULT_STORAGE_SOURCE_KEY ? undefined : value)}
-                                    label={"Storage backend"}
-                                    renderValue={(key) => {
-                                        const label = storageSources.registry[key]?.label;
-                                        return label ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? "Default" : key);
-                                    }}>
-                                    <SelectItem value={DEFAULT_STORAGE_SOURCE_KEY}>
-                                        Default
-                                    </SelectItem>
-                                    {sourceKeys.map((key) => (
-                                        <SelectItem key={key} value={key}>
-                                            {storageSources.registry[key]?.label ?? key}
-                                        </SelectItem>
-                                    ))}
-                                </Select>
-                            </div>
-                        )}
-
-                        <div className={"col-span-12"}>
-
-                            <MultiSelect
-                                className={"w-full"}
-                                placeholder={"All file types allowed"}
-                                disabled={disabled}
-                                name={acceptedFiles}
-                                value={fileTypesValue ?? []}
-                                onValueChange={handleTypesChange}
-                                label={allFileTypesSelected ? undefined : "Allowed file types"}
-                                renderValues={(selected: string[]) => {
-                                    if (!selected || selected.length === 0) return "All file types allowed";
-                                    return selected.map((v: string) => fileTypes[v])
-                                        .filter((v: string) => Boolean(v))
-                                        .join(", ");
-                                }}>
-
-                                {Object.entries(fileTypes).map(([value, label]) => (
-                                    <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
-                                        {/*<Checkbox*/}
-                                        {/*    checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
-                                        <div className={"grow"}>
-                                            {label}
-                                        </div>
-                                        <Button size={"small"}
-                                            variant={"text"}
-                                            onClick={(e: React.MouseEvent) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                return setFieldValue(acceptedFiles, [value]);
-                                            }}>
-                                            Only
-                                        </Button>
-                                    </MultiSelectItem>
-                                ))}
-
-                            </MultiSelect>
-                        </div>
-
-                        <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>
-
-                            <Field name={includeBucketUrl}
-                                type="checkbox">
-                                {({
-                                    field,
-                                    form
-                                }: FormexFieldProps) => {
-                                    return <SwitchControl
-                                        label={t("storage_include_bucket_url")}
-                                        disabled={existing || disabled}
-                                        form={form}
-                                        field={field}/>;
-                                }}
-                            </Field>
-
-                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                Turn this setting on if you want to save a fully-qualified storage URL
-                                (e.g. <code>s3://my-bucket/path/to/file</code>) instead of just the storage path.
-                                You can only change this prop upon creation.
-                            </Typography>
-
-                            <Field name={storeUrl}
-                                type="checkbox">
-                                {({
-                                    field,
-                                    form
-                                }: FormexFieldProps) => {
-                                    return <SwitchControl
-                                        label={t("storage_save_url")}
-                                        disabled={existing || disabled}
-                                        form={form}
-                                        field={field}/>;
-                                }}
-                            </Field>
-
-                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                Turn this setting on, if you prefer to save
-                                the download
-                                URL of the uploaded file instead of the
-                                storage path.
-                                You can only change this prop upon creation.
-                            </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: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                                    const value = e.target.value;
-                                    if (value === "") setFieldValue(maxSize, undefined);
-                                    else setFieldValue(maxSize, parseInt(value));
-                                }}
-                            />
-                        </div>
-
-                        <div className={"col-span-12 mt-4"}>
-                            <Typography variant={"subtitle2"}
-                                color={"secondary"}
-                                className={"mb-2 block"}>
-                                Image Resize Configuration
-                            </Typography>
-                            <Typography variant={"caption"} className={"mb-2 block text-xs"}>
-                                Automatically resize and optimize images before upload (JPEG, PNG, WebP only)
-                            </Typography>
-                        </div>
-
-                        <div className={"col-span-6"}>
-                            <DebouncedTextField
-                                name={imageResizeMaxWidth}
-                                type={"number"}
-                                label={t("storage_max_width")}
-                                size={"small"}
-                                disabled={disabled}
-                                value={imageResizeMaxWidthValue !== undefined && imageResizeMaxWidthValue !== null ? imageResizeMaxWidthValue.toString() : ""}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                                    const value = e.target.value;
-                                    if (value === "") setFieldValue(imageResizeMaxWidth, undefined);
-                                    else setFieldValue(imageResizeMaxWidth, parseInt(value));
-                                }}
-                            />
-                        </div>
-
-                        <div className={"col-span-6"}>
-                            <DebouncedTextField
-                                name={imageResizeMaxHeight}
-                                type={"number"}
-                                label={t("storage_max_height")}
-                                size={"small"}
-                                disabled={disabled}
-                                value={imageResizeMaxHeightValue !== undefined && imageResizeMaxHeightValue !== null ? imageResizeMaxHeightValue.toString() : ""}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                                    const value = e.target.value;
-                                    if (value === "") setFieldValue(imageResizeMaxHeight, undefined);
-                                    else setFieldValue(imageResizeMaxHeight, parseInt(value));
-                                }}
-                            />
-                        </div>
-
-                        <div className={"col-span-6"}>
-                            <Select
-                                disabled={disabled}
-                                name={imageResizeMode}
-                                fullWidth
-                                size={"medium"}
-                                value={imageResizeModeValue || "cover"}
-                                onValueChange={(value) => setFieldValue(imageResizeMode, value || "cover")}
-                                label={t("storage_resize_mode")}
-                                renderValue={(selected) => {
-                                    if (!selected) return "Cover";
-                                    return selected === "contain" ? "Contain (fit within bounds)" : "Cover (fill bounds, may crop)";
-                                }}>
-                                <SelectItem value="contain">
-                                    Contain (fit within bounds)
-                                </SelectItem>
-                                <SelectItem value="cover">
-                                    Cover (fill bounds, may crop)
-                                </SelectItem>
-                            </Select>
-                        </div>
-
-                        <div className={"col-span-6"}>
-                            <Select
-                                disabled={disabled}
-                                size={"medium"}
-                                fullWidth
-                                name={imageResizeFormat}
-                                value={imageResizeFormatValue || "original"}
-                                onValueChange={(value) => setFieldValue(imageResizeFormat, value || "original")}
-                                label={t("storage_output_format")}
-                                renderValue={(selected) => {
-                                    if (!selected) return "Original";
-                                    return selected.charAt(0).toUpperCase() + selected.slice(1);
-                                }}>
-                                <SelectItem value="original">
-                                    Original (keep same format)
-                                </SelectItem>
-                                <SelectItem value="jpeg">
-                                    JPEG
-                                </SelectItem>
-                                <SelectItem value="png">
-                                    PNG
-                                </SelectItem>
-                                <SelectItem value="webp">
-                                    WebP (best compression)
-                                </SelectItem>
-                            </Select>
-                        </div>
-
-                        <div className={"col-span-12"}>
-                            <DebouncedTextField
-                                name={imageResizeQuality}
-                                type={"number"}
-                                label={t("storage_quality")}
-                                size={"small"}
-                                disabled={disabled}
-                                value={imageResizeQualityValue !== undefined && imageResizeQualityValue !== null ? imageResizeQualityValue.toString() : ""}
-                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                                    const value = e.target.value;
-                                    if (value === "") setFieldValue(imageResizeQuality, undefined);
-                                    else {
-                                        const numValue = parseInt(value);
-                                        if (numValue >= 0 && numValue <= 100) {
-                                            setFieldValue(imageResizeQuality, numValue);
-                                        }
-                                    }
-                                }}
-                            />
-                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                Higher quality = larger file size. Recommended: 80-90 for photos, 90-100 for graphics
-                            </Typography>
-                        </div>
-
-                    </div>
-                </ExpandablePanel>
-
-            </div>
-
-            <div className={"col-span-12"}>
-
-                <ValidationPanel>
-                    {!multiple && <div className={"grid grid-cols-12 gap-2"}>
-                        <GeneralPropertyValidation disabled={disabled}/>
-                    </div>}
-                    {multiple && <div className={"col-span-12"}>
-                        <ArrayPropertyValidation disabled={disabled}/>
-                    </div>}
-                </ValidationPanel>
-
-            </div>
-        </>
-    );
-}

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

@@ -1,148 +0,0 @@
-import { FieldCaption } from "../../../_cms_internals";
-import React from "react";
-import { StringPropertyValidation } from "./validation/StringPropertyValidation";
-import { ValidationPanel } from "./validation/ValidationPanel";
-import { getIn, useFormex } from "@rebasepro/forms";
-import { useTranslation } from "@rebasepro/app";
-;
-import { Select, SelectItem, TextField } from "@rebasepro/ui";
-
-export function StringPropertyField({
-    widgetId,
-    disabled,
-    showErrors
-}: {
-    widgetId: "text_field" | "multiline" | "email" | "user_select";
-    disabled: boolean;
-    showErrors: 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>
-
-                    {widgetId === "text_field" &&
-                        <StringPropertyValidation disabled={disabled}
-                            length={true}
-                            lowercase={true}
-                            matches={true}
-                            max={true}
-                            min={true}
-                            trim={true}
-                            uppercase={true}
-                            showErrors={showErrors}/>}
-                    {widgetId === "user_select" &&
-                        <StringPropertyValidation disabled={disabled}
-                            showErrors={showErrors}/>}
-
-                    {widgetId === "multiline" &&
-                        <StringPropertyValidation disabled={disabled}
-                            length={true}
-                            lowercase={true}
-                            max={true}
-                            min={true}
-                            trim={true}
-                            uppercase={true}
-                            showErrors={showErrors}/>}
-
-                    {widgetId === "email" &&
-                        <StringPropertyValidation disabled={disabled}
-                            max={true}
-                            min={true}
-                            trim={true}
-                            showErrors={showErrors}/>}
-
-                </ValidationPanel>
-
-            </div>
-
-            <div className={"col-span-12"}>
-                <Select name={columnTypePath}
-                    disabled={disabled || Boolean(isIdValue)}
-                    fullWidth={true}
-                    value={isIdValue === "uuid" ? "uuid" : (columnTypeValue ?? "_default_")}
-                    onValueChange={(v) => setFieldValue(columnTypePath, v === "_default_" ? undefined : v)}
-                    renderValue={(v) => {
-                        if (isIdValue === "uuid") return "uuid (forced by Primary Key)";
-                        switch (v) {
-                            case "text": return "text (unlimited)";
-                            case "char": return "char (fixed length)";
-                            case "varchar": return "varchar (variable length)";
-                            case "_default_": return "Default (varchar)";
-                            default: return "Default (varchar)";
-                        }
-                    }}
-                    error={Boolean(columnTypeError)}
-                    label={t("db_column_type")}>
-                    {isIdValue === "uuid" && <SelectItem value={"uuid"}> uuid (forced by Primary Key) </SelectItem>}
-                    <SelectItem value={"_default_"}> Default (varchar) </SelectItem>
-                    <SelectItem value={"varchar"}> varchar (variable length) </SelectItem>
-                    <SelectItem value={"text"}> text (unlimited) </SelectItem>
-                    <SelectItem value={"char"}> char (fixed length) </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(columnTypeError)}>
-                    {columnTypeError ?? "Optional database override for this string 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-generated UUID/String)";
-                            case "manual": return "Yes (Manual input)";
-                            case "uuid": return "Yes (UUID)";
-                            case "cuid": return "Yes (CUID)";
-                            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-generated UUID/String) </SelectItem>
-                    <SelectItem value={"uuid"}> Yes (UUID) </SelectItem>
-                    <SelectItem value={"cuid"}> Yes (CUID) </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}
-                    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/UrlPropertyField.tsx

@@ -1,91 +0,0 @@
-import React from "react";
-import { StringPropertyValidation } from "./validation/StringPropertyValidation";
-import { ValidationPanel } from "./validation/ValidationPanel";
-import { getIn, useFormex } from "@rebasepro/forms";
-
-import { Select, SelectItem, TextField } from "@rebasepro/ui";
-
-export function UrlPropertyField({
-    disabled,
-    showErrors
-}: {
-    disabled: boolean;
-    showErrors: boolean;
-}) {
-
-    const { values, setFieldValue } = useFormex();
-
-    const urlRawValue = getIn(values, "url");
-    const urlValue = typeof urlRawValue === "string" ? urlRawValue : "[NONE]";
-
-    return (
-        <>
-            <div className={"col-span-12"}>
-
-                <Select
-                    disabled={disabled}
-                    position={"item-aligned"}
-                    fullWidth={true}
-                    onValueChange={(value: string) => {
-                        if (value === "[NONE]")
-                            setFieldValue("url", true);
-                        else
-                            setFieldValue("url", value);
-                    }}
-                    label={"Preview type"}
-                    renderValue={(value: string) => {
-                        switch (value) {
-                            case "image":
-                                return "Image";
-                            case "video":
-                                return "Video";
-                            case "audio":
-                                return "Audio";
-                            default:
-                                return "Display URL";
-                        }
-                    }}
-                    value={urlValue ?? "[NONE]"}>
-                    <SelectItem value={"[NONE]"}>
-                        Display URL
-                    </SelectItem>
-                    <SelectItem value={"image"}>
-                        Image
-                    </SelectItem>
-                    <SelectItem value={"video"}>
-                        Video
-                    </SelectItem>
-                    <SelectItem value={"audio"}>
-                        Audio
-                    </SelectItem>
-                </Select>
-            </div>
-
-            <div className={"col-span-12"}>
-
-                <ValidationPanel>
-
-                    <StringPropertyValidation disabled={disabled}
-                        max={true}
-                        min={true}
-                        trim={true}
-                        showErrors={showErrors}/>
-
-                </ValidationPanel>
-
-            </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") as string | undefined) ?? ""}/>
-
-            </div>
-        </>
-    );
-}