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

package/dist/ConfigControllerProvider.d.ts

@@ -33,5 +33,14 @@ export interface ConfigControllerProviderProps {
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{
+            databaseId?: string;
+            onDatabaseIdUpdate: (databaseId: string) => void;
+        }>;
+    };
 }
 export declare const ConfigControllerProvider: React.NamedExoticComponent<React.PropsWithChildren<ConfigControllerProviderProps>>;

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, isValidRegExp, getFieldId, DeleteConfirmationDialog, useLargeLayout, makePropertiesEditable, resolveEntityView, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, useAuthController, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
 import * as React from "react";
-import React__default, { useState, useEffect, useMemo, useRef, useDeferredValue, useCallback, useContext } from "react";
+import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue, useCallback } from "react";
 import equal from "react-fast-compare";
 import { useAutoComplete, Container, Typography, Tooltip, IconButton, Chip, TextField, cls, DebouncedTextField, Autocomplete, AutocompleteItem, ExpandablePanel, SettingsIcon, ClearIcon, Select, SelectItem, BooleanSwitchWithLabel, Dialog, AutoAwesomeIcon, Badge, ListIcon, Button, CircularProgress, Paper, DialogContent, DialogActions, RuleIcon, FileUploadIcon, MultiSelect, MultiSelectItem, Checkbox, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, RemoveCircleIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, InfoLabel, DeleteIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, Card, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, DoneIcon, Menu, MoreVertIcon, MenuItem, SaveIcon, UndoIcon } from "@firecms/ui";
 import * as Yup from "yup";
@@ -17,6 +17,7 @@ const YupSchema = Yup.object().shape({
   name: Yup.string().required("Required"),
   path: Yup.string().required("Required")
 });
+const useCollectionEditorController = () => useContext(CollectionEditorContext);
 function CollectionDetailsForm({
   isNewCollection,
   reservedGroups,
@@ -36,8 +37,12 @@ function CollectionDetailsForm({
     isSubmitting,
     submitCount
   } = useFormex();
+  const collectionEditor = useCollectionEditorController();
   const [iconDialogOpen, setIconDialogOpen] = useState(false);
   const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
+  const updateDatabaseId = (databaseId) => {
+    setFieldValue("databaseId", databaseId ?? void 0);
+  };
   const updateName = (name) => {
     setFieldValue("name", name);
     const pathTouched = getIn(touched, "path");
@@ -58,6 +63,7 @@ function CollectionDetailsForm({
       setAdvancedPanelExpanded(true);
     }
   }, [errors.id]);
+  const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
   const collectionIcon = /* @__PURE__ */ jsx(IconForView, { collectionOrView: values });
   const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
   const {
@@ -84,9 +90,16 @@ function CollectionDetailsForm({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex flex-row py-2 pt-3 items-center",
+          className: "flex flex-row gap-2 py-2 pt-3 items-center",
           children: [
             /* @__PURE__ */ jsx(Typography, { variant: !isNewCollection ? "h5" : "h4", className: "flex-grow", children: isNewCollection ? "New collection" : `${values?.name} collection` }),
+            /* @__PURE__ */ jsx(
+              DatabaseField,
+              {
+                databaseId: values.databaseId,
+                onDatabaseIdUpdate: updateDatabaseId
+              }
+            ),
             /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", children: /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -165,7 +178,7 @@ function CollectionDetailsForm({
             })
           }
         ),
-        /* @__PURE__ */ jsx(FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group of the collection" })
+        /* @__PURE__ */ jsx(FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
         ExpandablePanel,
@@ -369,6 +382,30 @@ function CollectionDetailsForm({
     )
   ] }) });
 }
+function DefaultDatabaseField({
+  databaseId,
+  onDatabaseIdUpdate
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: "Database ID",
+      side: "top",
+      align: "start",
+      children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "smallest",
+          invisible: true,
+          inputClassName: "text-end",
+          value: databaseId ?? "",
+          onChange: (e) => onDatabaseIdUpdate(e.target.value),
+          placeholder: "(default)"
+        }
+      )
+    }
+  );
+}
 function idToPropertiesPath(id) {
   return "properties." + id.replaceAll(".", ".properties.");
 }
@@ -1953,19 +1990,6 @@ function StringPropertyField({
           showErrors
         }
       ),
-      widgetId === "markdown" && /* @__PURE__ */ jsx(
-        StringPropertyValidation,
-        {
-          disabled,
-          length: true,
-          lowercase: true,
-          max: true,
-          min: true,
-          trim: true,
-          uppercase: true,
-          showErrors
-        }
-      ),
       widgetId === "email" && /* @__PURE__ */ jsx(
         StringPropertyValidation,
         {
@@ -2776,7 +2800,7 @@ function PropertySelectItem({ value, optionDisabled, propertyConfig, existing })
         "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" : ""
           ),
           children: [
@@ -2886,6 +2910,121 @@ const supportedFieldsIds = [
   "block"
 ];
 const supportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).filter(([id]) => supportedFieldsIds.includes(id)).map(([id, config]) => ({ [id]: config })).reduce((a, b) => ({ ...a, ...b }), {});
+function MarkdownPropertyField({
+  disabled,
+  showErrors
+}) {
+  const {
+    values,
+    setFieldValue
+  } = useFormex();
+  const baseStoragePath = "storage";
+  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 /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ValidationPanel, { children: /* @__PURE__ */ jsx(
+      StringPropertyValidation,
+      {
+        disabled,
+        length: true,
+        lowercase: true,
+        max: true,
+        min: true,
+        trim: true,
+        uppercase: true,
+        showErrors
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
+      ExpandablePanel,
+      {
+        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-gray-500", children: [
+          /* @__PURE__ */ jsx(FileUploadIcon, {}),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "subtitle2",
+              className: "ml-2",
+              children: "File upload config"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
+            Field,
+            {
+              name: fileName,
+              as: DebouncedTextField,
+              label: "File name",
+              size: "small",
+              disabled: hasFilenameCallback || disabled,
+              value: hasFilenameCallback ? "-" : fileNameValue
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+            /* @__PURE__ */ jsx(
+              Field,
+              {
+                name: storagePath,
+                as: DebouncedTextField,
+                label: "Storage path",
+                disabled: hasStoragePathCallback || disabled,
+                size: "small",
+                value: hasStoragePathCallback ? "-" : storagePathValue
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
+              /* @__PURE__ */ jsx("p", { children: "You can use the following placeholders in the file name and storage path values:" }),
+              /* @__PURE__ */ jsxs("ul", { children: [
+                /* @__PURE__ */ jsx("li", { children: "{file} - Full name of the uploaded file" }),
+                /* @__PURE__ */ jsx("li", { children: "{file.name} - Name of the uploaded file without extension" }),
+                /* @__PURE__ */ jsx("li", { children: "{file.ext} - Extension of the uploaded file" }),
+                /* @__PURE__ */ jsx("li", { children: "{entityId} - ID of the entity" }),
+                /* @__PURE__ */ jsx("li", { children: "{propertyKey} - ID of this field" }),
+                /* @__PURE__ */ jsx("li", { children: "{path} - Path of this entity" }),
+                /* @__PURE__ */ jsx("li", { children: "{rand} - Random value used to avoid name collisions" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: "When using Markdown, the URL of the uploaded files are always saved in the text value (not the path)." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
+            DebouncedTextField,
+            {
+              name: maxSize,
+              type: "number",
+              label: "Max size (in bytes)",
+              size: "small",
+              value: maxSizeValue !== void 0 && maxSizeValue !== null ? maxSizeValue.toString() : "",
+              onChange: (e) => {
+                const value = e.target.value;
+                if (value === "") setFieldValue(maxSize, void 0);
+                else setFieldValue(maxSize, parseInt(value));
+              }
+            }
+          ) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        name: "defaultValue",
+        disabled,
+        onChange: (e) => {
+          setFieldValue("defaultValue", e.target.value === "" ? void 0 : e.target.value);
+        },
+        label: "Default value",
+        value: getIn(values, "defaultValue") ?? ""
+      }
+    ) })
+  ] });
+}
 const PropertyForm = React__default.memo(
   function PropertyForm2(props) {
     const {
@@ -2946,7 +3085,10 @@ const PropertyForm = React__default.memo(
         } = newPropertyWithId;
         doOnPropertyChanged({
           id,
-          property: { ...property2, editable: property2.editable ?? true }
+          property: {
+            ...property2,
+            editable: property2.editable ?? true
+          }
         });
         if (!existingProperty)
           controller.resetForm({ values: initialValue });
@@ -3151,7 +3293,7 @@ function PropertyEditFormFields({
     }, 0);
   };
   let childComponent;
-  if (selectedFieldConfigId === "text_field" || selectedFieldConfigId === "multiline" || selectedFieldConfigId === "markdown" || selectedFieldConfigId === "email") {
+  if (selectedFieldConfigId === "text_field" || selectedFieldConfigId === "multiline" || selectedFieldConfigId === "email") {
     childComponent = /* @__PURE__ */ jsx(
       StringPropertyField,
       {
@@ -3168,6 +3310,14 @@ function PropertyEditFormFields({
         showErrors
       }
     );
+  } else if (selectedFieldConfigId === "markdown") {
+    childComponent = /* @__PURE__ */ jsx(
+      MarkdownPropertyField,
+      {
+        disabled,
+        showErrors
+      }
+    );
   } else if (selectedFieldConfigId === "select" || selectedFieldConfigId === "number_select") {
     childComponent = /* @__PURE__ */ jsx(
       EnumPropertyField,
@@ -5795,7 +5945,8 @@ const ConfigControllerProvider = React__default.memo(
     getPathSuggestions,
     getUser,
     getData,
-    onAnalyticsEvent
+    onAnalyticsEvent,
+    components
   }) {
     const navigation = useNavigationController();
     const navigate = useNavigate();
@@ -5894,7 +6045,8 @@ const ConfigControllerProvider = React__default.memo(
           createCollection,
           editProperty,
           configPermissions: configPermissions ?? defaultConfigPermissions,
-          getPathSuggestions
+          getPathSuggestions,
+          components
         },
         children: [
           children,
@@ -6004,7 +6156,6 @@ const ConfigControllerProvider = React__default.memo(
   },
   equal
 );
-const useCollectionEditorController = () => useContext(CollectionEditorContext);
 function EditorCollectionAction({
   path: fullPath,
   parentCollectionIds,
@@ -6328,7 +6479,8 @@ function useCollectionEditorPlugin({
   getUser,
   collectionInference,
   getData,
-  onAnalyticsEvent
+  onAnalyticsEvent,
+  components
 }) {
   return {
     key: "collection_editor",
@@ -6344,7 +6496,8 @@ function useCollectionEditorPlugin({
         getPathSuggestions,
         getUser,
         getData,
-        onAnalyticsEvent
+        onAnalyticsEvent,
+        components
       }
     },
     homePage: {