@firecms/collection_editor 3.0.0-beta.8 → 3.0.0-beta.9

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,24 +1,26 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0-beta.9",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.8",
-    "@firecms/formex": "^3.0.0-beta.8",
-    "@firecms/schema_inference": "^3.0.0-beta.8",
-    "@firecms/ui": "^3.0.0-beta.8",
+    "@firecms/data_export": "^3.0.0-beta.9",
+    "@firecms/data_import": "^3.0.0-beta.9",
+    "@firecms/data_import_export": "^3.0.0-beta.9",
+    "@firecms/formex": "^3.0.0-beta.9",
+    "@firecms/schema_inference": "^3.0.0-beta.9",
+    "@firecms/ui": "^3.0.0-beta.9",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0"
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1"
   },
   "exports": {
     ".": {
@@ -52,11 +54,11 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jest": "^29.7.0",
-    "react-router": "^6.24.0",
-    "react-router-dom": "^6.24.0",
-    "ts-jest": "^29.1.5",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.2"
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4"
   },
   "files": [
     "dist",
@@ -65,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4ef14d60f86cb2e581b908a1dc84ad6a87b14e2e"
+  "gitHead": "a2fffa74049d185e674aae9f70b462f011edd1c2"
 }

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/CollectionViewHeaderAction.tsx

@@ -25,7 +25,9 @@ export function CollectionViewHeaderAction({
     const collectionEditorController = useCollectionEditorController();
 
     return (
-        <Tooltip title={"Edit"}>
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
             <IconButton
                 className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
                 onClick={() => {

package/src/ui/EditorCollectionAction.tsx

@@ -25,6 +25,7 @@ export function EditorCollectionAction({
         : true;
 
     const editorButton = <Tooltip
+        asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
             color={"primary"}

package/src/ui/EditorCollectionActionStart.tsx

@@ -31,6 +31,7 @@ export function EditorCollectionActionStart({
         !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
         saveDefaultFilterButton = <>
             <Tooltip
+                asChild={true}
                 title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
                 <Button
                     color={"primary"}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -25,7 +25,9 @@ export function PropertyAddColumnComponent({
         : true;
 
     return (
-        <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
                 className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
                 // className={onHover ? "bg-white dark:bg-gray-950" : undefined}

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,11 +122,15 @@ 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>
-                        <Tooltip title={"Change icon"}>
+                        <DatabaseField databaseId={values.databaseId}
+                                       onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -143,7 +156,7 @@ export function CollectionDetailsForm({
                             required
                             error={showErrors && Boolean(errors.name)}/>
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
                         </FieldCaption>
                     </div>
 
@@ -191,7 +204,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 +406,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/CollectionEditorWelcomeView.tsx

@@ -185,7 +185,8 @@ export function TemplateButton({
 }) {
 
     return (
-        <Tooltip title={subtitle}>
+        <Tooltip title={subtitle}
+                 asChild={true}>
             <Card
                 onClick={onClick}
                 className={cls(

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -351,7 +351,8 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}>
+                        <Tooltip title={"Get the code for this collection"}
+                                 asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
@@ -359,7 +360,8 @@ export function CollectionPropertiesEditorForm({
                                 <CodeIcon/>
                             </IconButton>
                         </Tooltip>
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
+                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
+                                                             asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
@@ -367,7 +369,8 @@ export function CollectionPropertiesEditorForm({
                                 {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
                             </IconButton>
                         </Tooltip>}
-                        <Tooltip title={"Add new property"}>
+                        <Tooltip title={"Add new property"}
+                                 asChild={true}>
                             <Button
                                 variant={"outlined"}
                                 onClick={() => setNewPropertyDialogOpen(true)}>

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -14,7 +14,7 @@ export function GetCodeDialog({
     const snackbarController = useSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"firecms\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}

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/PropertyTree.tsx

@@ -227,7 +227,8 @@ export function PropertyTreeEntry({
                     <AutoAwesomeIcon size="small" className={"p-2"}/>
                 </Tooltip>}
 
-                {onPropertyRemove && <Tooltip title={"Remove"}>
+                {onPropertyRemove && <Tooltip title={"Remove"}
+                                              asChild={true}>
                     <IconButton size="small"
                                 color="inherit"
                                 onClick={() => onPropertyRemove(propertyKey, namespace)}>
@@ -235,7 +236,8 @@ export function PropertyTreeEntry({
                     </IconButton>
                 </Tooltip>}
 
-                {onPropertyMove && <Tooltip title={"Move"}>
+                {onPropertyMove && <Tooltip title={"Move"}
+                                            asChild={true}>
                     <IconButton
                         component={"span"}
                         size="small"

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -95,7 +95,8 @@ export function SubcollectionsEditTab({
                                             </TableCell>
                                             <TableCell
                                                 align="right">
-                                                <Tooltip title={"Remove"}>
+                                                <Tooltip title={"Remove"}
+                                                         asChild={true}>
                                                     <IconButton size="small"
                                                                 onClick={(e) => {
                                                                     e.preventDefault();
@@ -157,7 +158,8 @@ export function SubcollectionsEditTab({
                                                 </TableCell>
                                                 <TableCell
                                                     align="right">
-                                                    <Tooltip title={"Remove"}>
+                                                    <Tooltip title={"Remove"}
+                                                             asChild={true}>
                                                         <IconButton size="small"
                                                                     onClick={(e) => {
                                                                         e.preventDefault();

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

@@ -26,53 +26,56 @@ 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)}
+                            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>
+                </div>
+                <div>
+                    <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>
 
             </div>