@firecms/collection_editor 3.0.0-canary.102 → 3.0.0-canary.103

package/dist/types/collection_editor_controller.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
 import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
@@ -35,4 +36,13 @@ export interface CollectionEditorController {
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     getPathSuggestions?: (path: string) => Promise<string[]>;
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{
+            databaseId?: string;
+            onDatabaseIdUpdate: (databaseId: string) => void;
+        }>;
+    };
 }

package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts

@@ -0,0 +1,4 @@
+export declare function MarkdownPropertyField({ disabled, showErrors }: {
+    disabled: boolean;
+    showErrors: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/StringPropertyField.d.ts

@@ -1,5 +1,5 @@
 export declare function StringPropertyField({ widgetId, disabled, showErrors }: {
-    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    widgetId: "text_field" | "multiline" | "email";
     disabled: boolean;
     showErrors: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -30,6 +30,15 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => UserType | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{
+            databaseId?: string;
+            onDatabaseIdUpdate: (databaseId: string) => void;
+        }>;
+    };
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -42,5 +51,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, components }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
 export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.102",
+  "version": "3.0.0-canary.103",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-canary.102",
-    "@firecms/data_import": "^3.0.0-canary.102",
-    "@firecms/data_import_export": "^3.0.0-canary.102",
-    "@firecms/formex": "^3.0.0-canary.102",
-    "@firecms/schema_inference": "^3.0.0-canary.102",
-    "@firecms/ui": "^3.0.0-canary.102",
+    "@firecms/data_export": "^3.0.0-canary.103",
+    "@firecms/data_import": "^3.0.0-canary.103",
+    "@firecms/data_import_export": "^3.0.0-canary.103",
+    "@firecms/formex": "^3.0.0-canary.103",
+    "@firecms/schema_inference": "^3.0.0-canary.103",
+    "@firecms/ui": "^3.0.0-canary.103",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "db22751d03517d639f4b23a26aa1fff81b11ee8d"
+  "gitHead": "c33fe736fee99aaf30789aed66e4385563011783"
 }

package/src/ConfigControllerProvider.tsx

@@ -57,6 +57,13 @@ export interface ConfigControllerProviderProps {
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
 }
 
 export const ConfigControllerProvider = React.memo(
@@ -70,7 +77,8 @@ export const ConfigControllerProvider = React.memo(
                                           getPathSuggestions,
                                           getUser,
                                           getData,
-                                          onAnalyticsEvent
+                                          onAnalyticsEvent,
+                                          components
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -230,7 +238,8 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        getPathSuggestions
+                        getPathSuggestions,
+                        components
                     }}>
 
                     {children}

package/src/types/collection_editor_controller.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
 import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
@@ -42,4 +43,11 @@ export interface CollectionEditorController {
 
     getPathSuggestions?: (path: string) => Promise<string[]>;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
+    };
+
 }

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -22,6 +22,7 @@ import {
 } from "@firecms/ui";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -52,9 +53,15 @@ export function CollectionDetailsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const collectionEditor = useCollectionEditorController();
+
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
     const updateName = (name: string) => {
         setFieldValue("name", name);
 
@@ -81,6 +88,8 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
+    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
+
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
@@ -113,10 +122,13 @@ export function CollectionDetailsForm({
 
                 <div>
                     <div
-                        className="flex flex-row py-2 pt-3 items-center">
+                        className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
+                        <DatabaseField databaseId={values.databaseId}
+                                       onDatabaseIdUpdate={updateDatabaseId}/>
+
                         <Tooltip title={"Change icon"}>
                             <IconButton
                                 shape={"square"}
@@ -191,7 +203,7 @@ export function CollectionDetailsForm({
                             })}
                         </Autocomplete>
                         <FieldCaption>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                            {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
                         </FieldCaption>
                     </div>}
 
@@ -393,3 +405,20 @@ export function CollectionDetailsForm({
         </div>
     );
 }
+
+function DefaultDatabaseField({
+                                  databaseId,
+                                  onDatabaseIdUpdate
+                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"Database ID"}
+                    side={"top"}
+                    align={"start"}>
+        <TextField size={"smallest"}
+                   invisible={true}
+                   inputClassName={"text-end"}
+                   value={databaseId ?? ""}
+                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+                   placeholder={"(default)"}></TextField>
+    </Tooltip>
+}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -5,7 +5,6 @@ import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/forme
 import {
     DEFAULT_FIELD_CONFIGS,
     DeleteConfirmationDialog,
-    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -14,6 +13,7 @@ import {
     Property,
     PropertyConfig,
     PropertyConfigBadge,
+    PropertyConfigId,
 } from "@firecms/core";
 import {
     Button,
@@ -45,6 +45,7 @@ import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
 import { PropertySelectItem } from "./PropertySelectItem";
 import { UrlPropertyField } from "./properties/UrlPropertyField";
 import { supportedFields } from "./utils/supported_fields";
+import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -148,7 +149,10 @@ export const PropertyForm = React.memo(
                 } = newPropertyWithId;
                 doOnPropertyChanged({
                     id,
-                    property: { ...property, editable: property.editable ?? true }
+                    property: {
+                        ...property,
+                        editable: property.editable ?? true
+                    }
                 });
                 if (!existingProperty)
                     controller.resetForm({ values: initialValue });
@@ -388,7 +392,6 @@ function PropertyEditFormFields({
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
-        selectedFieldConfigId === "markdown" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
@@ -398,6 +401,10 @@ function PropertyEditFormFields({
         childComponent =
             <UrlPropertyField disabled={disabled}
                               showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "markdown") {
+        childComponent =
+            <MarkdownPropertyField disabled={disabled}
+                                   showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -14,7 +14,7 @@ export function PropertySelectItem({ value, optionDisabled, propertyConfig, exis
                        className={"flex flex-row items-center"}>
         <div
             className={cls(
-                "flex flex-row items-center text-base min-h-[52px]",
+                "flex flex-row items-center text-base min-h-[48px]",
                 optionDisabled ? "w-full" : "")}>
             <div className={"mr-8"}>
                 <PropertyConfigBadge propertyConfig={propertyConfig}/>

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 { DebouncedTextField, ExpandablePanel, FileUploadIcon, 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-gray-500">
+                            <FileUploadIcon/>
+                            <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/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/useCollectionEditorPlugin.tsx

@@ -51,6 +51,13 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
 }
 
 /**
@@ -74,7 +81,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      getUser,
      collectionInference,
      getData,
-     onAnalyticsEvent
+     onAnalyticsEvent,
+     components
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
@@ -91,7 +99,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getPathSuggestions,
                 getUser,
                 getData,
-                onAnalyticsEvent
+                onAnalyticsEvent,
+                components
             }
         },
         homePage: {