@firecms/collection_editor 3.0.0-alpha.34 → 3.0.0-alpha.35

package/dist/types/collection_editor_controller.d.ts

@@ -3,7 +3,7 @@ import { EntityCollection, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 /**
  * Controller to open the collection editor dialog.
- * @category Hooks and utilities
+ * @group Hooks and utilities
  */
 export interface CollectionEditorController {
     editCollection: (props: {

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" | "url" | "email";
+    widgetId: "text_field" | "multiline" | "markdown" | "email";
     disabled: boolean;
     showErrors: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/ui/collection_editor/templates/blog_template.d.ts

@@ -1,2 +1,2 @@
-import { EntityCollection } from "@firecms/firebase";
+import { EntityCollection } from "@firecms/core";
 export declare const blogCollectionTemplate: EntityCollection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.34",
+  "version": "3.0.0-alpha.35",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/data_import": "^3.0.0-alpha.34",
-    "@firecms/schema_inference": "^3.0.0-alpha.34",
+    "@firecms/data_import": "^3.0.0-alpha.35",
+    "@firecms/schema_inference": "^3.0.0-alpha.35",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.0"
   },
@@ -67,7 +67,7 @@
     "react-router": "^6.17.0",
     "react-router-dom": "^6.17.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.0",
     "vite": "^4.5.0",
     "vite-plugin-fonts": "^0.7.0"
   },
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97fea385cfd4a0ab9301d45d50e1d145021c1df5"
+  "gitHead": "f0f3ef616f13176166c193f98b8198f7fa53a1d2"
 }

package/src/types/collection_editor_controller.tsx

@@ -4,7 +4,7 @@ import { PersistedCollection } from "./persisted_collection";
 
 /**
  * Controller to open the collection editor dialog.
- * @category Hooks and utilities
+ * @group Hooks and utilities
  */
 export interface CollectionEditorController {
 

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -109,6 +109,18 @@ export function CollectionDetailsForm({
 
     const isSubcollection = !!parentCollection;
 
+    let customIdValue: "true" | "false" | "optional" | "code_defined" | undefined;
+    if (customIdValue) {
+        if (typeof values.customId === "object") {
+            customIdValue = "code_defined";
+        } else if (values.customId === true) {
+            customIdValue = "true";
+        } else if (values.customId === false) {
+            customIdValue = "false";
+        } else if (values.customId === "optional") {
+            customIdValue = "optional";
+        }
+    }
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -117,7 +129,7 @@ export function CollectionDetailsForm({
                     <div
                         className="flex flex-row py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
-                            {isNewCollection ? "New collection" : `${values.name} collection`}
+                            {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
                         <Tooltip title={"Change icon"}>
                             <IconButton
@@ -269,6 +281,45 @@ export function CollectionDetailsForm({
                                         ))}
                                     </Select>
                                 </div>
+                                <div className={"col-span-12"}>
+                                    <Select
+                                        name="customId"
+                                        label="ID generation"
+                                        position={"item-aligned"}
+                                        disabled={customIdValue === "code_defined"}
+                                        onValueChange={(v) => {
+                                            if (v === "code_defined")
+                                                throw new Error("This should not happen");
+                                            else if (v === "true")
+                                                setFieldValue("customId", true);
+                                            else if (v === "false")
+                                                setFieldValue("customId", false);
+                                            else if (v === "optional")
+                                                setFieldValue("customId", "optional");
+                                        }}
+                                        value={customIdValue ?? ""}
+                                        renderValue={(value: any) => {
+                                            if (value === "code_defined")
+                                                return "Code defined";
+                                            else if (value === "true")
+                                                return "Users must define an ID";
+                                            else if (value === "optional")
+                                                return "Users can define an ID, but it is not required";
+                                            else
+                                                return "ID is generated automatically";
+                                        }}
+                                    >
+                                        <SelectItem value={"false"}>
+                                            ID is generated automatically
+                                        </SelectItem>
+                                        <SelectItem value={"true"}>
+                                            Users must define an ID
+                                        </SelectItem>
+                                        <SelectItem value={"optional"}>
+                                            Users can define an ID, but it is not required
+                                        </SelectItem>
+                                    </Select>
+                                </div>
                                 <div className={"col-span-12"}>
                                     <BooleanSwitchWithLabel
                                         position={"start"}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -266,39 +266,48 @@ export function CollectionEditorDialogInternal<M extends {
 
     const inferCollectionFromData = useCallback(async (newCollection: PersistedCollection<M>) => {
 
-        if (!doCollectionInference) {
-            setCollection(newCollection);
-            return Promise.resolve(newCollection);
-        }
+        try {
+            if (!doCollectionInference) {
+                setCollection(newCollection);
+                return Promise.resolve(newCollection);
+            }
 
-        setCurrentView("loading");
+            setCurrentView("loading");
 
-        const inferredCollection = await doCollectionInference?.(newCollection);
+            const inferredCollection = await doCollectionInference?.(newCollection);
 
-        if (!inferredCollection) {
-            setCollection(newCollection);
-            return Promise.resolve(newCollection);
-        }
-        const values = {
-            ...(newCollection ?? {}),
-        };
+            if (!inferredCollection) {
+                setCollection(newCollection);
+                return Promise.resolve(newCollection);
+            }
+            const values = {
+                ...(newCollection ?? {}),
+            };
 
-        if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
-            values.properties = inferredCollection.properties as Properties<M>;
-            values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
-        }
+            if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
+                values.properties = inferredCollection.properties as Properties<M>;
+                values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
+            }
 
-        if (!values.propertiesOrder) {
-            values.propertiesOrder = Object.keys(values.properties) as Extract<keyof M, string>[];
+            if (!values.propertiesOrder) {
+                values.propertiesOrder = Object.keys(values.properties) as Extract<keyof M, string>[];
+                return values;
+            }
+
+            setCollection(values);
+            console.log("Inferred collection", {
+                newCollection: newCollection ?? {},
+                values
+            });
             return values;
+        } catch (e:any) {
+            console.error(e);
+            snackbarController.open({
+                type: "error",
+                message: "Error inferring collection: " + (e.message ?? "Details in the console")
+            });
+            return newCollection;
         }
-
-        setCollection(values);
-        console.log("Inferred collection", {
-            newCollection: newCollection ?? {},
-            values
-        });
-        return values;
     }, [parentPathSegments, doCollectionInference]);
 
     const onSubmit = (newCollectionState: PersistedCollection<M>, formikHelpers: FormikHelpers<PersistedCollection<M>>) => {
@@ -390,6 +399,11 @@ export function CollectionEditorDialogInternal<M extends {
                   submitCount
               }) => {
 
+                console.debug({
+                    valuesPath: values.path,
+                    editedCollectionPath,
+                    fullPath
+                })
                 const path = values.path ?? editedCollectionPath;
                 const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
                 const resolvedPath = navigation.resolveAliasesFrom(updatedFullPath);

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -312,7 +312,7 @@ export function CollectionPropertiesEditorForm({
                             placeholder={"Collection name"}
                             size={"small"}
                             required
-                            error={Boolean(errors.name)}/>
+                            error={Boolean(errors?.name)}/>
 
                         {owner &&
                             <Typography variant={"body2"}
@@ -327,14 +327,14 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}>
-                            <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={() => setCodeDialogOpen(true)}>
-                                <CodeIcon/>
-                            </IconButton>
-                        </Tooltip>
+                        {/*<Tooltip title={"Get the code for this collection"}>*/}
+                        {/*    <IconButton*/}
+                        {/*        variant={"filled"}*/}
+                        {/*        disabled={inferringProperties}*/}
+                        {/*        onClick={() => setCodeDialogOpen(true)}>*/}
+                        {/*        <CodeIcon/>*/}
+                        {/*    </IconButton>*/}
+                        {/*</Tooltip>*/}
                         {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
                             <IconButton
                                 variant={"filled"}

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -2,7 +2,9 @@ import { Button, Dialog, DialogActions, DialogContent, Typography, useFireCMSCon
 import React from "react";
 
 export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
-    const { entityViews } = useFireCMSContext();
+    const {
+        entityViews,
+    } = useFireCMSContext();
 
     return <Dialog
         maxWidth={"md"}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -20,7 +20,7 @@ import {
     isPropertyBuilder,
     mergeDeep,
     Property,
-    PropertyConfig, PropertyOrBuilder,
+    PropertyConfig,
     Select,
     toSnakeCase,
     Typography
@@ -41,6 +41,7 @@ import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
 import { PropertySelectItem } from "./PropertySelectItem";
+import { UrlPropertyField } from "./properties/UrlPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -106,7 +107,6 @@ export const PropertyForm = React.memo(
         } as PropertyWithId;
 
         const disabled = (Boolean(property && !editableProperty(property)) && !collectionEditable);
-        console.log("PropertyForm disabled", disabled)
 
         const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
             id: propertyKey,
@@ -362,12 +362,15 @@ function PropertyEditView({
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
         selectedFieldConfigId === "markdown" ||
-        selectedFieldConfigId === "url" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
                                  disabled={disabled}
                                  showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "url") {
+        childComponent =
+            <UrlPropertyField disabled={disabled}
+                              showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -179,7 +179,7 @@ export function SubcollectionsEditTab({
 
                         {totalEntityViews === 0 &&
                             <InfoLabel>
-                                COMING SOON: You can define your own custom views by uploading it with the CLI
+                                <b>COMING SOON</b> Define your own custom views by uploading it with the CLI
                             </InfoLabel>
                         }
 

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

@@ -105,7 +105,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
 
                     {empty &&
                         <Typography variant={"label"}
-                                    className="h-full flex items-center justify-center p-2">
+                                    className="h-full flex items-center justify-center p-4">
                             Add the first property to this group
                         </Typography>}
                 </Paper>

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Field, getIn, useFormikContext } from "formik";
 import {
     CircularProgress,
+    EntityCollection,
     getIconForView,
     NumberProperty,
     Select,

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

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

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormikContext } from "formik";
+
+import { Select, SelectItem, TextField } from "@firecms/core";
+
+export function UrlPropertyField({
+                                     disabled,
+                                     showErrors
+                                 }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    const urlValue = getIn(values, "url");
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    onValueChange={(value: string) => {
+                        if (value === "[NONE]")
+                            setFieldValue("url", true);
+                        else
+                            setFieldValue("url", value);
+                    }}
+                    label={"Preview type"}
+                    renderValue={(value: string) => {
+                        switch (value) {
+                            case "image":
+                                return "Image";
+                            case "video":
+                                return "Video";
+                            case "audio":
+                                return "Audio";
+                            default:
+                                return "Display URL";
+                        }
+                    }}
+                    value={urlValue ?? "[NONE]"}>
+                    <SelectItem value={"[NONE]"}>
+                        Display URL
+                    </SelectItem>
+                    <SelectItem value={"image"}>
+                        Image
+                    </SelectItem>
+                    <SelectItem value={"video"}>
+                        Video
+                    </SelectItem>
+                    <SelectItem value={"audio"}>
+                        Audio
+                    </SelectItem>
+                </Select>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <StringPropertyValidation disabled={disabled}
+                                              max={true}
+                                              min={true}
+                                              trim={true}
+                                              showErrors={showErrors}/>
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

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

@@ -1,14 +1,13 @@
-import { EntityCollection } from "@firecms/firebase";
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const blogCollectionTemplate:EntityCollection = {
     path: "blog",
     name: "Blog",
     singularName: "Blog entry",
-    group: "Content",
     icon: "article",
     description: "A collection of blog entries",
     defaultSize: "l",
-    properties: {
+    properties: makePropertiesEditable({
         name: {
             name: "Name",
             validation: { required: true },
@@ -108,7 +107,7 @@ export const blogCollectionTemplate:EntityCollection = {
                 previewAsTag: true
             }
         }
-    },
+    }),
     initialFilter: {
         status: ["==", "published"]
     }

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

@@ -1,13 +1,12 @@
-import { EntityCollection } from "@firecms/core";
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const productsCollectionTemplate: EntityCollection = {
     path: "products",
     name: "Products",
     singularName: "Product",
-    group: "Main",
     icon: "shopping_cart",
     description: "List of the products currently sold in your shop",
-    properties: {
+    properties: makePropertiesEditable({
         name: {
             dataType: "string",
             name: "Name",
@@ -84,6 +83,5 @@ export const productsCollectionTemplate: EntityCollection = {
             name: "Added on",
             autoValue: "on_create"
         }
-    }
-
+    })
 };

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

@@ -1,13 +1,12 @@
-import { EntityCollection } from "@firecms/core";
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const usersCollectionTemplate: EntityCollection = {
     path: "users",
     name: "Users",
     singularName: "User",
-    group: "Main",
     description: "Registered users in the app/web",
     icon: "person",
-    properties: {
+    properties: makePropertiesEditable({
         displayName: {
             name: "Display name",
             dataType: "string"
@@ -30,5 +29,5 @@ export const usersCollectionTemplate: EntityCollection = {
             dataType: "string",
             url: "image"
         }
-    },
+    }),
 };

package/src/useCollectionEditorPlugin.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { EntityCollection, FireCMSPlugin, makePropertiesEditable, User } from "@firecms/core";
+import { EntityCollection, FireCMSPlugin, joinCollectionLists, makePropertiesEditable, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
@@ -9,7 +9,6 @@ import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
 import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
-import { joinCollectionLists } from "./utils/join_collections";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 

package/dist/utils/join_collections.d.ts

@@ -1,13 +0,0 @@
-import { EntityCollection } from "@firecms/core";
-/**
- *
- * @param storedCollections
- * @param codedCollections
- */
-export declare function joinCollectionLists(storedCollections: EntityCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[];
-/**
- *
- * @param target
- * @param source
- */
-export declare function mergeCollection(target: EntityCollection, source: EntityCollection): EntityCollection;