@firecms/collection_editor 3.0.0-canary.98 → 3.0.0-rc.1

package/src/ui/collection_editor/import/clean_import_data.ts

@@ -1,5 +1,5 @@
 import { Properties, slugify } from "@firecms/core";
-import { ImportConfig } from "@firecms/data_import_export";
+import { ImportConfig } from "@firecms/data_import";
 
 export function cleanPropertiesFromImport(properties: Properties, parentSlug = ""): {
     headersMapping: ImportConfig["headersMapping"],

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

@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
-import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
+import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
+import {
+    getFullId,
+    getFullIdPath,
+    idToPropertiesPath,
+    namespaceToPropertiesOrderPath,
+    namespaceToPropertiesPath
+} from "../util";
 import { PropertyTree } from "../PropertyTree";
-import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
+import { ArrayProperty, PropertyConfig } from "@firecms/core";
 
 export function BlockPropertyField({
                                        disabled,
@@ -31,18 +37,17 @@ export function BlockPropertyField({
 
     const onPropertyChanged = ({
                                    id,
+                                   namespace,
                                    property
-                               }: { id?: string, property: Property }) => {
+                               }: OnPropertyChangedParams) => {
         if (!id)
             throw Error();
 
-        setFieldValue("oneOf.properties", {
-            ...(values.oneOf?.properties ?? {}),
-            [id]: property
-        }, false);
+        setFieldValue("oneOf." + getFullIdPath(id, namespace), property, false);
+
         const currentPropertiesOrder = values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {});
         const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
-        setFieldValue("oneOf.propertiesOrder", newPropertiesOrder, false);
+        setFieldValue("oneOf." + namespaceToPropertiesOrderPath(namespace), newPropertiesOrder, false);
         setPropertyDialogOpen(false);
     };
 
@@ -82,8 +87,9 @@ export function BlockPropertyField({
         <>
             <div className={"col-span-12"}>
                 <div className={"flex justify-between items-end mt-8 mb-4"}>
-                    <Typography variant={"subtitle2"}>Properties in this
-                        block</Typography>
+                    <Typography variant={"subtitle2"}>
+                        Properties in this block
+                    </Typography>
                     {addChildButton}
                 </div>
                 <Paper className="p-2 pl-8">
@@ -104,7 +110,7 @@ export function BlockPropertyField({
                             ? undefined
                             : onPropertyMove}/>
 
-                    {!disabled && !values.oneOf?.propertiesOrder?.length &&
+                    {!disabled && (values.oneOf?.propertiesOrder?.length === 0)&&
                         <div className="h-full flex items-center justify-center p-4">
                             Add the first property to this block
                         </div>}

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

@@ -26,53 +26,60 @@ export function DateTimePropertyField({ disabled }: {
 
     return (
         <>
-            <div className={"flex flex-col col-span-12"}>
-                <Select name={modePath}
-                        value={modeValue ?? "date"}
-                        error={Boolean(modeError)}
-                        onValueChange={(v) => setFieldValue(modePath, v)}
-                        label={"Mode"}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "date_time":
-                                    return "Date/Time";
-                                case "date":
-                                    return "Date";
-                                default:
-                                    return "";
-                            }
-                        }}
-                        disabled={disabled}>
-                    <SelectItem value={"date_time"}> Date/Time </SelectItem>
-                    <SelectItem value={"date"}> Date </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(modeError)}>
-                    {modeError}
-                </FieldCaption>
-
-                <Select name={autoValuePath}
-                        disabled={disabled}
-                        value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "on_create":
-                                    return "On create";
-                                case "on_update":
-                                    return "On any update";
-                                default:
-                                    return "None";
-                            }
-                        }}
-                        error={Boolean(autoValueError)}
-                        label={"Automatic value"}>
-                    <SelectItem value={"none"}> None </SelectItem>
-                    <SelectItem value={"on_create"}> On create </SelectItem>
-                    <SelectItem value={"on_update"}> On any update </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(autoValueError)}>
-                    {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldCaption>
+            <div className={"flex flex-col col-span-12 gap-2"}>
+                <div>
+                    <Select name={modePath}
+                            value={modeValue ?? "date"}
+                            error={Boolean(modeError)}
+                            size={"large"}
+                            onValueChange={(v) => setFieldValue(modePath, v)}
+                            label={"Mode"}
+                            fullWidth={true}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "date_time":
+                                        return "Date/Time";
+                                    case "date":
+                                        return "Date";
+                                    default:
+                                        return "";
+                                }
+                            }}
+                            disabled={disabled}>
+                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
+                        <SelectItem value={"date"}> Date </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(modeError)}>
+                        {modeError}
+                    </FieldCaption>
+                </div>
+                <div>
+                    <Select name={autoValuePath}
+                            disabled={disabled}
+                            size={"large"}
+                            fullWidth={true}
+                            value={autoValueValue ?? ""}
+                            onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "on_create":
+                                        return "On create";
+                                    case "on_update":
+                                        return "On any update";
+                                    default:
+                                        return "None";
+                                }
+                            }}
+                            error={Boolean(autoValueError)}
+                            label={"Automatic value"}>
+                        <SelectItem value={"none"}> None </SelectItem>
+                        <SelectItem value={"on_create"}> On create </SelectItem>
+                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(autoValueError)}>
+                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                    </FieldCaption>
+                </div>
 
             </div>
 

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

@@ -93,9 +93,11 @@ export function EnumPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         setFieldValue("defaultValue", value);
                     }}
+                    size={"large"}
                     label={"Default value"}
                     value={defaultValue ?? ""}>
                     {enumValues

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

@@ -107,13 +107,14 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
             <div className={"col-span-12"}>
                 <BooleanSwitchWithLabel
                     position={"start"}
-                    size={"small"}
+                    size={"medium"}
                     label="Spread children as columns"
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
                 <FieldCaption>
-                    Set this flag to true if you want to display the children of this group as individual columns.
+                    Set this flag to true if you want to display the children of this group as individual columns. This
+                    will only work for top level groups.
                 </FieldCaption>
             </div>
 

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

@@ -0,0 +1,139 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { Field, getIn, useFormex } from "@firecms/formex";
+
+import { CloudUploadIcon, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@firecms/ui";
+
+export function MarkdownPropertyField({
+                                          disabled,
+                                          showErrors
+                                      }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex();
+
+    const baseStoragePath = "storage";
+
+    const metadata = `${baseStoragePath}.metadata`;
+    const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+
+    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
+
+    const hasFilenameCallback = typeof fileNameValue === "function";
+    const hasStoragePathCallback = typeof storagePathValue === "function";
+
+    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">
+                            <CloudUploadIcon/>
+                            <Typography variant={"subtitle2"}
+                                        className="ml-2">
+                                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: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

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

@@ -7,12 +7,14 @@ export function ReferencePropertyField({
                                            existing,
                                            multiple,
                                            disabled,
-                                           showErrors
+                                           showErrors,
+                                           asString
                                        }: {
     existing: boolean,
     multiple: boolean,
     disabled: boolean,
-    showErrors: boolean
+    showErrors: boolean,
+    asString?: boolean
 }) {
 
     const {
@@ -28,7 +30,7 @@ export function ReferencePropertyField({
             <CircularProgress/>
         </div>;
 
-    const pathPath = multiple ? "of.path" : "path";
+    const pathPath = asString ? "reference.path" : (multiple ? "of.path" : "path") ;
     const pathValue: string | undefined = getIn(values, pathPath);
     const pathError: string | undefined = showErrors && getIn(errors, pathPath);
 
@@ -89,6 +91,8 @@ export function CollectionsSelect({
                 value={value ?? ""}
                 position={"item-aligned"}
                 name={pathPath}
+                size={"large"}
+                fullWidth={true}
                 onChange={handleChange}
                 label={"Target collection"}
                 renderValue={(selected) => {

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

@@ -1,10 +1,9 @@
 import React from "react";
 import {
     Button,
-    Checkbox,
+    CloudUploadIcon,
     DebouncedTextField,
     ExpandablePanel,
-    FileUploadIcon,
     MultiSelect,
     MultiSelectItem,
     Typography
@@ -58,10 +57,10 @@ export function StoragePropertyField({
 
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
-        else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
-        else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
-        else if (allFileTypesSelected)
-            setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
+        // else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
+        // else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
+        // else if (allFileTypesSelected)
+        //     setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
         else setFieldValue(acceptedFiles, value);
     };
 
@@ -75,8 +74,8 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config
@@ -89,10 +88,12 @@ export function StoragePropertyField({
                         <div className={"col-span-12"}>
 
                             <MultiSelect
+                                className={"w-full"}
+                                placeholder={"All file types allowed"}
                                 disabled={disabled}
                                 name={acceptedFiles}
                                 value={fileTypesValue ?? []}
-                                onMultiValueChange={handleTypesChange}
+                                onValueChange={handleTypesChange}
                                 label={allFileTypesSelected ? undefined : "Allowed file types"}
                                 renderValues={(selected) => {
                                     if (!selected || selected.length === 0) return "All file types allowed";
@@ -101,21 +102,15 @@ export function StoragePropertyField({
                                         .join(", ");
                                 }}>
 
-                                <MultiSelectItem key={"all"} value={"all"} className={"flex items-center gap-2"}>
-                                    <Checkbox
-                                        checked={!fileTypesValue}/>
-                                    All
-                                </MultiSelectItem>
-
                                 {Object.entries(fileTypes).map(([value, label]) => (
                                     <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
-                                        <Checkbox
-                                            checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>
+                                        {/*<Checkbox*/}
+                                        {/*    checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
                                         <div className={"flex-grow"}>
                                             {label}
                                         </div>
                                         <Button size={"small"}
-                                                variant={"outlined"}
+                                                variant={"text"}
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();

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

@@ -10,7 +10,7 @@ export function StringPropertyField({
                                         disabled,
                                         showErrors
                                     }: {
-    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    widgetId: "text_field" | "multiline" | "email";
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -42,15 +42,6 @@ export function StringPropertyField({
                                                   trim={true}
                                                   uppercase={true}
                                                   showErrors={showErrors}/>}
-                    {widgetId === "markdown" &&
-                        <StringPropertyValidation disabled={disabled}
-                                                  length={true}
-                                                  lowercase={true}
-                                                  max={true}
-                                                  min={true}
-                                                  trim={true}
-                                                  uppercase={true}
-                                                  showErrors={showErrors}/>}
 
                     {widgetId === "email" &&
                         <StringPropertyValidation disabled={disabled}

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

@@ -24,6 +24,7 @@ export function UrlPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         if (value === "[NONE]")
                             setFieldValue("url", true);

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

@@ -19,6 +19,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ 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"}
@@ -33,6 +34,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ 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}

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -10,9 +10,9 @@ export function ValidationPanel({
         <ExpandablePanel
             initiallyExpanded={false}
             asField={true}
-            className="p-4"
+            innerClassName="p-4"
             title={
-                <div className="flex flex-row text-gray-500">
+                <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-2">

package/src/ui/collection_editor/templates/pages_template.ts

@@ -19,7 +19,7 @@ export const pagesCollectionTemplate: EntityCollection = {
             validation: {
                 required: true,
                 unique: true,
-                matches: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+                matches: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
                 matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
             }
         },
@@ -178,11 +178,6 @@ export const pagesCollectionTemplate: EntityCollection = {
             name: "Is Published",
             columnWidth: 100,
             description: "Should this page be live on the site?"
-        },
-        author_uid: {
-            dataType: "reference",
-            name: "Author",
-            path: "users"
         }
     }
 };

package/src/ui/collection_editor/utils/strings.ts

@@ -1,9 +1,16 @@
 export function camelCase(str: string): string {
     if (!str) return "";
-    return (str.slice(0, 1).toLowerCase() + str.slice(1))
-        .replace(/([-_ ]){1,}/g, " ")
-        .split(/[-_ ]/)
-        .reduce((cur, acc) => {
-            return cur + acc[0].toUpperCase() + acc.substring(1);
-        }, "");
+    if (str.length === 1) return str.toLowerCase();
+
+    // Split by hyphens, underscores, or spaces and filter out empty strings
+    const parts = str.split(/[-_ ]+/).filter(Boolean);
+
+    if (parts.length === 0) return "";
+
+    // Start with first part in lowercase
+    return parts[0].toLowerCase() +
+        // Transform remaining parts to have first letter uppercase
+        parts.slice(1)
+            .map(part => part.charAt(0).toUpperCase() + part.substring(1).toLowerCase())
+            .join('');
 }

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -14,6 +14,7 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "file_upload",
     "multi_file_upload",
     "reference",
+    "reference_as_string",
     "multi_references",
     "switch",
     "date_time",

package/src/ui/collection_editor/utils/update_property_for_widget.ts

@@ -208,6 +208,15 @@ export function updatePropertyFromWidget(propertyData: any,
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             } satisfies Property
         );
+    } else if (selectedWidgetId === "reference_as_string") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                dataType: "string",
+                propertyConfig: "reference_as_string",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            } satisfies Property
+        );
     } else if (selectedWidgetId === "multi_references") {
         updatedProperty = mergeDeep(
             propertyData,