@rebasepro/admin 0.0.1-canary.4f204c2

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

@@ -0,0 +1,360 @@
+
+import React from "react";
+import { Button, DebouncedTextField, ExpandablePanel, MultiSelect, MultiSelectItem, Select, SelectItem, Typography } from "@rebasepro/ui";
+import { UploadCloudIcon } from "lucide-react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
+import { useTranslation } from "@rebasepro/core";
+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 baseStoragePath = multiple ? "of.storage" : "storage";
+    const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
+
+    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) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
+
+    // Image resize values
+    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth);
+    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight);
+    const imageResizeModeValue = getIn(values, imageResizeMode) ?? "cover";
+    const imageResizeFormatValue = getIn(values, imageResizeFormat) ?? "original";
+    const imageResizeQualityValue = getIn(values, imageResizeQuality);
+
+    const storedValue = getIn(values, acceptedFiles);
+    const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
+    const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
+
+    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"}>
+
+                        <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

@@ -0,0 +1,148 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormex } from "@rebasepro/formex";
+import { useTranslation } from "@rebasepro/core";
+;
+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);
+    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>
+
+                    {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") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormex } from "@rebasepro/formex";
+
+import { Select, SelectItem, TextField } from "@rebasepro/ui";
+
+export function UrlPropertyField({
+    disabled,
+    showErrors
+}: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormex();
+
+    const urlValue = getIn(values, "url");
+
+    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") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { Field, FormexFieldProps } from "@rebasepro/formex";
+import { SwitchControl } from "../../SwitchControl";
+
+export function AdvancedPropertyValidation({ disabled }: {
+    disabled: boolean
+}) {
+
+    const columnWidth = "columnWidth";
+    const hideFromCollection = "hideFromCollection";
+    const readOnly = "readOnly";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"}>
+            <div className={"col-span-12"}>
+                <Field type="checkbox" name={hideFromCollection}>
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Hide from collection"}
+                            size={"medium"}
+                            disabled={disabled}
+                            form={form}
+                            tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-12"}>
+                <Field name={readOnly}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Read only"}
+                            size={"medium"}
+                            disabled={disabled}
+                            tooltip={"Is this a read only field. Display only as a preview"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}