@firecms/collection_editor 3.0.0-beta.2-pre.5 → 3.0.0-beta.3

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.5",
+  "version": "3.0.0-beta.3",
   "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.2-pre.5",
-    "@firecms/formex": "^3.0.0-beta.2-pre.5",
-    "@firecms/schema_inference": "^3.0.0-beta.2-pre.5",
-    "@firecms/ui": "^3.0.0-beta.2-pre.5",
+    "@firecms/data_import_export": "^3.0.0-beta.3",
+    "@firecms/formex": "^3.0.0-beta.3",
+    "@firecms/schema_inference": "^3.0.0-beta.3",
+    "@firecms/ui": "^3.0.0-beta.3",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -20,6 +20,14 @@
     "react-router": "^6.12.0",
     "react-router-dom": "^6.12.0"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "dev": "vite",
     "test": "jest",
@@ -73,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5159646cfdb35e11cc510080bd3cff17104d0cb4"
+  "gitHead": "33cceff5d5bc2a7002cc5a3904b787e70bfb9c6e"
 }

package/src/ui/RootCollectionSuggestions.tsx

@@ -26,7 +26,7 @@ export function RootCollectionSuggestions({ introMode }: { introMode?: "new_proj
             className={"flex flex-col gap-1 p-2 my-4"}>
 
             {!introMode && <Typography variant={"body2"} color={"secondary"}>
-                Create a collection from your data:
+                Create a collection <b>automatically</b> from your data:
             </Typography>}
 
             {introMode === "existing_project" && <Typography>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -96,16 +96,14 @@ 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";
-        }
+    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";
     }
 
     const showErrors = submitCount > 0;
@@ -226,7 +224,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <TextField
                                         error={showErrors && Boolean(errors.singularName)}
-                                        id={"singularName"}
+                                        name={"singularName"}
                                         aria-describedby={"singularName-helper"}
                                         onChange={(e) => {
                                             setFieldTouched("singularName", true);
@@ -241,7 +239,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <TextField
                                         error={showErrors && Boolean(errors.description)}
-                                        id="description"
+                                        name="description"
                                         value={values.description ?? ""}
                                         onChange={handleChange}
                                         multiline

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -261,7 +261,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const importConfig = useImportConfig();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
-    console.log({ importConfig })
 
     // Use this ref to store which properties have errors
     const propertyErrorsRef = useRef({});
@@ -474,7 +473,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         submitCount
     } = formController;
 
-    const path = values.path ?? editedCollectionId;
+    // TODO: getting data is only working in root collections with this code
+    const path = values.path;
     const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
     const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
 
@@ -576,6 +576,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "import_data_saving" && importConfig &&
                         <ImportSaveInProgress importConfig={importConfig}
                                               collection={values}
+                                              path={path}
                                               onImportSuccess={async (importedCollection) => {
                                                   snackbarController.open({
                                                       type: "info",

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Field, getIn } from "@firecms/formex";
+import { Field, getIn, useFormex } from "@firecms/formex";
 import {
     EntityCollection,
     ErrorBoundary,
@@ -34,7 +34,6 @@ import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./Pro
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { GetCodeDialog } from "./GetCodeDialog";
-import { useFormex } from "@firecms/formex";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -138,7 +137,9 @@ export function CollectionPropertiesEditorForm({
                         ...newPropertyKeys.reduce((acc, propertyKey) => {
                             acc[propertyKey] = (newCollection.properties ?? {})[propertyKey];
                             return acc;
-                        }, {} as { [key: string]: PropertyOrBuilder }),
+                        }, {} as {
+                            [key: string]: PropertyOrBuilder
+                        }),
                         ...values.properties
                     };
                     const updatedPropertiesOrder = [
@@ -224,11 +225,19 @@ export function CollectionPropertiesEditorForm({
                                    previousId,
                                    namespace
                                }: OnPropertyChangedParams) => {
+
         const fullId = id ? getFullId(id, namespace) : undefined;
         const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
 
         // If the id has changed we need to a little cleanup
         if (previousId && previousId !== id) {
+            console.debug("onPropertyChanged, id change", {
+                id,
+                property,
+                previousId,
+                namespace
+            })
+
             const previousFullId = getFullId(previousId, namespace);
             const previousPropertyPath = idToPropertiesPath(previousFullId);
 
@@ -420,11 +429,19 @@ export function CollectionPropertiesEditorForm({
                             />}
 
                         {!selectedProperty &&
-                            <Typography variant={"label"} className="flex items-center justify-center h-full">
-                                {emptyCollection
-                                    ? "Now you can add your first property"
-                                    : "Select a property to edit it"}
-                            </Typography>}
+                            <div className={"w-full flex flex-col items-center justify-center h-full gap-4"}>
+                                <Typography variant={"label"} className="">
+                                    {emptyCollection
+                                        ? "Now you can add your first property"
+                                        : "Select a property to edit it"}
+                                </Typography>
+                                <Button variant={"outlined"}
+                                        onClick={() => setNewPropertyDialogOpen(true)}
+                                >
+                                    <AddIcon/>
+                                    Add new property
+                                </Button>
+                            </div>}
 
                         {selectedProperty && isPropertyBuilder(selectedProperty) &&
                             <Typography variant={"label"} className="flex items-center justify-center">

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -53,7 +53,7 @@ export function SubcollectionsEditTab({
 
     const [currentDialog, setCurrentDialog] = React.useState<{
         isNewCollection: boolean,
-        editedCollectionPath?: string,
+        editedCollectionId?: string,
     }>();
 
     const {
@@ -78,52 +78,53 @@ export function SubcollectionsEditTab({
                             Subcollections of {values.name}
                         </Typography>
 
-                        {subcollections && subcollections.length > 0 &&
-                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
-                                <Table>
-                                    <TableBody>
-                                        {subcollections.map((subcollection) => (
-                                            <TableRow key={subcollection.path}
-                                                      onClick={() => setCurrentDialog({
-                                                          isNewCollection: false,
-                                                          editedCollectionPath: subcollection.path,
-                                                      })}>
-                                                <TableCell
-                                                    align="left">
-                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                        {subcollection.name}
-                                                    </Typography>
-                                                </TableCell>
-                                                <TableCell
-                                                    align="right">
-                                                    <Tooltip title={"Remove"}>
-                                                        <IconButton size="small"
-                                                                    onClick={(e) => {
-                                                                        e.preventDefault();
-                                                                        e.stopPropagation();
-                                                                        setSubcollectionToDelete(subcollection.id);
-                                                                    }}
-                                                                    color="inherit">
-                                                            <DeleteIcon size={"small"}/>
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                </TableCell>
-                                            </TableRow>
-                                        ))}
-                                    </TableBody>
-                                </Table>
-                            </Paper>}
+                        <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                            {subcollections && subcollections.length > 0 && <Table>
+                                <TableBody>
+                                    {subcollections.map((subcollection) => (
+                                        <TableRow key={subcollection.path}
+                                                  onClick={() => setCurrentDialog({
+                                                      isNewCollection: false,
+                                                      editedCollectionId: subcollection.id
+                                                  })}>
+                                            <TableCell
+                                                align="left">
+                                                <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                    {subcollection.name}
+                                                </Typography>
+                                            </TableCell>
+                                            <TableCell
+                                                align="right">
+                                                <Tooltip title={"Remove"}>
+                                                    <IconButton size="small"
+                                                                onClick={(e) => {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    setSubcollectionToDelete(subcollection.id);
+                                                                }}
+                                                                color="inherit">
+                                                        <DeleteIcon size={"small"}/>
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>}
+
+                            <Button
+                                onClick={() => {
+                                    setCurrentDialog({
+                                        isNewCollection: true
+                                    });
+                                }}
+                                variant={"text"}
+                                startIcon={<AddIcon/>}>
+                                Add subcollection
+                            </Button>
+
+                        </Paper>
 
-                        <Button
-                            onClick={() => {
-                                setCurrentDialog({
-                                    isNewCollection: true
-                                });
-                            }}
-                            variant={"outlined"}
-                            startIcon={<AddIcon/>}>
-                            Add subcollection
-                        </Button>
                     </div>
 
                     <div className={"flex-grow  flex flex-col gap-4 items-start"}>
@@ -131,7 +132,18 @@ export function SubcollectionsEditTab({
                             Custom views
                         </Typography>
 
-                        {totalEntityViews > 0 && <>
+                        {totalEntityViews === 0 &&
+                            <Alert action={<Button variant="text"
+                                                   size={"small"}
+                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   component={"a"}
+                                                   rel="noopener noreferrer"
+                                                   target="_blank">More info</Button>}>
+                                Define your own custom views by uploading them with the CLI.
+                            </Alert>
+                        }
+
+                        {<>
                             <Paper className={"flex flex-col gap-4 p-2 w-full"}>
                                 <Table>
                                     <TableBody>
@@ -175,29 +187,19 @@ export function SubcollectionsEditTab({
                                         ))}
                                     </TableBody>
                                 </Table>
+
+                                <Button
+                                    onClick={() => {
+                                        setAddEntityViewDialogOpen(true);
+                                    }}
+                                    variant={"text"}
+                                    startIcon={<AddIcon/>}>
+                                    Add custom entity view
+                                </Button>
                             </Paper>
 
                         </>}
 
-                        {totalEntityViews === 0 &&
-                            <Alert action={<Button variant="text"
-                                                   size={"small"}
-                                                   href={"https://firecms.co/docs/customization_quickstart"}
-                                                   component={"a"}
-                                                   rel="noopener noreferrer"
-                                                   target="_blank">More info</Button>}>
-                                Define your own custom views by uploading it with the CLI.
-                            </Alert>
-                        }
-
-                        <Button
-                            onClick={() => {
-                                setAddEntityViewDialogOpen(true);
-                            }}
-                            variant={"outlined"}
-                            startIcon={<AddIcon/>}>
-                            Add custom entity view
-                        </Button>
 
                     </div>
 

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

@@ -23,19 +23,22 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
     const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
     const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
 
-    const onPropertyCreated = useCallback(({
-                                               id,
-                                               property
-                                           }: { id?: string, property: Property }) => {
+    const onPropertyChanged = ({
+                                   id,
+                                   property
+                               }: { id?: string, property: Property }) => {
         if (!id)
             throw Error();
+
         setFieldValue("oneOf.properties", {
             ...(values.oneOf?.properties ?? {}),
             [id]: property
         }, false);
-        setFieldValue("oneOf.propertiesOrder", [...(values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {})), id], false);
+        const currentPropertiesOrder = values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {});
+        const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
+        setFieldValue("oneOf.propertiesOrder", newPropertiesOrder, false);
         setPropertyDialogOpen(false);
-    }, [values.oneOf?.properties, values.oneOf?.propertiesOrder]);
+    };
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
@@ -127,7 +130,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
                 existingProperty={Boolean(selectedPropertyKey)}
                 autoUpdateId={!selectedPropertyKey}
                 autoOpenTypeSelect={!selectedPropertyKey}
-                onPropertyChanged={onPropertyCreated}
+                onPropertyChanged={onPropertyChanged}
                 existingPropertyKeys={selectedPropertyKey ? undefined : values.oneOf?.propertiesOrder}
                 propertyConfigs={propertyConfigs}/>}
 

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

@@ -25,19 +25,23 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
     const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
 
     const propertiesOrder = values.propertiesOrder ?? Object.keys(values.properties ?? {});
-    const onPropertyCreated = useCallback(({
-                                               id,
-                                               property
-                                           }: { id?: string, property: Property }) => {
+    const onPropertyCreated = ({
+                                   id,
+                                   property
+                               }: { id?: string, property: Property }) => {
         if (!id)
             throw Error();
         setFieldValue("properties", {
             ...(values.properties ?? {}),
             [id]: property
         }, false);
-        setFieldValue("propertiesOrder", [...propertiesOrder, id], false);
+
+        const currentPropertiesOrder = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+        const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
+        setFieldValue("propertiesOrder", newPropertiesOrder, false);
+
         setPropertyDialogOpen(false);
-    }, [values.properties, propertiesOrder]);
+    };
 
     const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
@@ -60,15 +64,6 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
-    const addChildButton = <Button
-        color="primary"
-        variant={"outlined"}
-        onClick={() => setPropertyDialogOpen(true)}
-        startIcon={<AddIcon/>}
-    >
-        Add property to {values.name ?? "this group"}
-    </Button>;
-
     const empty = !propertiesOrder || propertiesOrder.length < 1;
 
     const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
@@ -80,7 +75,14 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
             <div className={"col-span-12"}>
                 <div className="flex justify-between items-end my-4">
                     <Typography variant={"subtitle2"}>Properties in this group</Typography>
-                    {addChildButton}
+                    <Button
+                        color="primary"
+                        variant={"outlined"}
+                        onClick={() => setPropertyDialogOpen(true)}
+                        startIcon={<AddIcon/>}
+                    >
+                        Add property to {values.name ?? "this group"}
+                    </Button>
                 </div>
                 <Paper className="p-2 pl-8">
                     <PropertyTree

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

@@ -40,7 +40,7 @@ export function ReferencePropertyField({
                 <Field name={pathPath}
                        pathPath={pathPath}
                        type="select"
-                       disabled={existing || disabled}
+                       disabled={(existing && Boolean(pathValue)) || disabled}
                        value={pathValue}
                        error={pathError}
                        handleChange={handleChange}
@@ -52,7 +52,6 @@ export function ReferencePropertyField({
     );
 }
 
-
 export function CollectionsSelect({
                                       disabled,
                                       pathPath,

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { ArrayProperty, getFieldConfig, Property, PropertyConfig } from "@firecms/core";
 import { Button, Paper, Typography } from "@firecms/ui";
 import { Field, getIn, useFormex } from "@firecms/formex";