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

package/dist/types/collection_editor_controller.d.ts

@@ -1,5 +1,5 @@
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 /**
  * Controller to open the collection editor dialog.
@@ -11,6 +11,7 @@ export interface CollectionEditorController {
         fullPath?: string;
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
+        existingEntities?: Entity<any>[];
     }) => void;
     createCollection: (props: {
         initialValues?: {
@@ -30,6 +31,7 @@ export interface CollectionEditorController {
         editedCollectionId: string;
         parentCollectionIds: string[];
         collection: PersistedCollection;
+        existingEntities: Entity<any>[];
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     getPathSuggestions?: (path: string) => Promise<string[]>;

package/dist/ui/CollectionViewHeaderAction.d.ts

@@ -1,10 +1,11 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { PersistedCollection } from "../types/persisted_collection";
-export declare function CollectionViewHeaderAction({ propertyKey, onHover, property, fullPath, parentCollectionIds, collection }: {
+export declare function CollectionViewHeaderAction({ propertyKey, onHover, property, fullPath, parentCollectionIds, collection, tableController }: {
     property: ResolvedProperty;
     propertyKey: string;
     onHover: boolean;
     fullPath: string;
     parentCollectionIds: string[];
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/PropertyAddColumnComponent.d.ts

@@ -1,6 +1,8 @@
+import { EntityTableController } from "@firecms/core";
 import { PersistedCollection } from "../types/persisted_collection";
-export declare function PropertyAddColumnComponent({ fullPath, parentCollectionIds, collection }: {
+export declare function PropertyAddColumnComponent({ fullPath, parentCollectionIds, collection, tableController }: {
     fullPath: string;
     parentCollectionIds: string[];
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EntityCollection, User } from "@firecms/core";
+import { Entity, EntityCollection, User } from "@firecms/core";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";
 import { PersistedCollection } from "../../types/persisted_collection";
@@ -28,6 +28,7 @@ export interface CollectionEditorDialogProps {
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
+    existingEntities?: Entity<any>[];
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function CollectionEditor(props: CollectionEditorDialogProps & {

package/dist/useCollectionEditorPlugin.d.ts

@@ -38,7 +38,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param getPathsSuggestions
+ * @param getData
  * @param getUser
  * @param collectionInference
  */

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "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.6",
-    "@firecms/formex": "^3.0.0-beta.6",
-    "@firecms/schema_inference": "^3.0.0-beta.6",
-    "@firecms/ui": "^3.0.0-beta.6",
+    "@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",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "^6.22.0",
     "react-router-dom": "^6.22.0"
   },
@@ -34,12 +34,6 @@
     "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -54,25 +48,15 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "jest": "^29.7.0",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vite-plugin-fonts": "^0.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"
   },
   "files": [
     "dist",
@@ -81,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ffcbddbd73211bb644ff7503c2c62790bff6202a"
+  "gitHead": "4ef14d60f86cb2e581b908a1dc84ad6a87b14e2e"
 }

package/src/ConfigControllerProvider.tsx

@@ -3,6 +3,7 @@ import equal from "react-fast-compare"
 
 import { CollectionsConfigController } from "./types/config_controller";
 import {
+    Entity,
     Property,
     useCustomizationController,
     useNavigationController,
@@ -88,7 +89,8 @@ export const ConfigControllerProvider = React.memo(
                 group?: string,
                 name?: string
             },
-            redirect: boolean
+            redirect: boolean,
+            existingEntities?: Entity<any>[]
         }>();
 
         const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
@@ -101,6 +103,7 @@ export const ConfigControllerProvider = React.memo(
             fullPath?: string,
             parentCollectionIds: string[],
             collectionEditable: boolean;
+            existingEntities?: Entity<any>[]
         }>();
 
         const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
@@ -109,16 +112,18 @@ export const ConfigControllerProvider = React.memo(
             deleteCollections: true
         }), []);
 
-        const editCollection = useCallback(({
-                                                id,
-                                                fullPath,
-                                                parentCollectionIds,
-                                                parentCollection
-                                            }: {
+        const editCollection = ({
+                                    id,
+                                    fullPath,
+                                    parentCollectionIds,
+                                    parentCollection,
+                                    existingEntities
+                                }: {
             id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
-            parentCollection?: PersistedCollection
+            parentCollection?: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
             onAnalyticsEvent?.("edit_collection", {
@@ -131,24 +136,27 @@ export const ConfigControllerProvider = React.memo(
                 parentCollectionIds,
                 isNewCollection: false,
                 parentCollection,
-                redirect: false
+                redirect: false,
+                existingEntities
             });
-        }, []);
+        };
 
-        const editProperty = useCallback(({
-                                              propertyKey,
-                                              property,
-                                              editedCollectionId,
-                                              currentPropertiesOrder,
-                                              parentCollectionIds,
-                                              collection
-                                          }: {
+        const editProperty = ({
+                                  propertyKey,
+                                  property,
+                                  editedCollectionId,
+                                  currentPropertiesOrder,
+                                  parentCollectionIds,
+                                  collection,
+                                  existingEntities
+                              }: {
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
             editedCollectionId: string,
             parentCollectionIds: string[],
             collection: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
             onAnalyticsEvent?.("edit_property", {
@@ -169,17 +177,18 @@ export const ConfigControllerProvider = React.memo(
                 currentPropertiesOrder,
                 editedCollectionId,
                 parentCollectionIds,
-                collectionEditable: collection?.editable ?? false
+                collectionEditable: collection?.editable ?? false,
+                existingEntities
             });
-        }, []);
+        };
 
-        const createCollection = React.useCallback(({
-                                                        parentCollectionIds,
-                                                        parentCollection,
-                                                        initialValues,
-                                                        redirect,
-                                                        sourceClick
-                                                    }: {
+        const createCollection = ({
+                                      parentCollectionIds,
+                                      parentCollection,
+                                      initialValues,
+                                      redirect,
+                                      sourceClick
+                                  }: {
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
             initialValues?: {
@@ -211,7 +220,7 @@ export const ConfigControllerProvider = React.memo(
                 initialValues,
                 redirect
             });
-        }, []);
+        };
 
         return (
             <ConfigControllerContext.Provider value={collectionConfigController}>

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,5 @@
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -12,7 +12,8 @@ export interface CollectionEditorController {
         id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
-        parentCollection?: PersistedCollection
+        parentCollection?: PersistedCollection,
+        existingEntities?: Entity<any>[]
     }) => void;
 
     createCollection: (props: {
@@ -33,7 +34,8 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionId: string,
         parentCollectionIds: string[],
-        collection: PersistedCollection
+        collection: PersistedCollection,
+        existingEntities: Entity<any>[]
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;

package/src/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -10,7 +10,8 @@ export function CollectionViewHeaderAction({
                                                property,
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
@@ -18,6 +19,7 @@ export function CollectionViewHeaderAction({
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
@@ -32,7 +34,8 @@ export function CollectionViewHeaderAction({
                         property,
                         editedCollectionId: collection.id,
                         parentCollectionIds,
-                        collection
+                        collection,
+                        existingEntities: tableController.data ?? []
                     });
                 }}
                 size={"small"}>

package/src/ui/EditorCollectionAction.tsx

@@ -1,16 +1,7 @@
-import equal from "react-fast-compare"
-
-import {
-    CollectionActionsProps,
-    mergeDeep,
-    useAuthController,
-    useNavigationController,
-    useSnackbarController
-} from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { PersistedCollection } from "../types/persisted_collection";
 
 export function EditorCollectionAction({
@@ -39,7 +30,13 @@ export function EditorCollectionAction({
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                    existingEntities: tableController?.data ?? []
+                })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -6,7 +6,7 @@ import {
 } from "@firecms/core";
 import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
@@ -24,13 +24,16 @@ export function HomePageEditorCollectionAction({
         collection
     });
 
-    const onEditCollectionClicked = useCallback(() => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
-    }, [collectionEditorController, path]);
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
+    };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
 
-    const deleteCollection = useCallback(() => {
+    const deleteCollection = () => {
         configController?.deleteCollection({ id: collection.id }).then(() => {
             setDeleteRequested(false);
             snackbarController.open({
@@ -38,7 +41,7 @@ export function HomePageEditorCollectionAction({
                 type: "success"
             });
         });
-    }, [path, configController]);
+    };
 
     return <>
 
@@ -49,11 +52,13 @@ export function HomePageEditorCollectionAction({
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>

package/src/ui/NewCollectionCard.tsx

@@ -1,5 +1,5 @@
 import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
-import { AddIcon, Card, cn, Typography } from "@firecms/ui";
+import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionCard({
@@ -20,7 +20,7 @@ export function NewCollectionCard({
         : true;
 
     return (
-        <Card className={cn("h-full p-4 min-h-[124px]")}
+        <Card className={cls("h-full p-4 min-h-[124px]")}
               onClick={collectionEditorController && canCreateCollections
                   ? () => collectionEditorController.createCollection({
                       initialValues: group ? { group } : undefined,
@@ -31,7 +31,7 @@ export function NewCollectionCard({
                   : undefined}>
 
             <div
-                className="flex flex-col items-start h-full w-full items-center justify-center h-full w-full flex-grow flex-col">
+                className="flex items-center justify-center h-full w-full flex-grow flex-col">
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -6,11 +6,13 @@ import { PersistedCollection } from "../types/persisted_collection";
 export function PropertyAddColumnComponent({
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const authController = useAuthController();
@@ -32,7 +34,8 @@ export function PropertyAddColumnComponent({
                         editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection
+                        collection,
+                        existingEntities: tableController.data
                     });
                 }}>
                 <AddIcon color={"inherit"}/>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -5,7 +5,8 @@ import {
     AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
-    cn,
+    ClearIcon,
+    cls,
     Container,
     DebouncedTextField,
     Dialog,
@@ -146,7 +147,7 @@ export function CollectionDetailsForm({
                         </FieldCaption>
                     </div>
 
-                    <div className={cn("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                    <div className={cls("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
@@ -235,6 +236,35 @@ export function CollectionDetailsForm({
                                         {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
                                     </FieldCaption>
                                 </div>
+                                <div className={"col-span-12"}>
+                                    <TextField
+                                        error={showErrors && Boolean(errors.sideDialogWidth)}
+                                        name={"sideDialogWidth"}
+                                        type={"number"}
+                                        aria-describedby={"sideDialogWidth-helper"}
+                                        onChange={(e) => {
+                                            setFieldTouched("sideDialogWidth", true);
+                                            const value = e.target.value;
+                                            if (!value) {
+                                                setFieldValue("sideDialogWidth", null);
+                                            } else if (!isNaN(Number(value))) {
+                                                setFieldValue("sideDialogWidth", Number(value));
+                                            }
+                                        }}
+                                        endAdornment={<IconButton
+                                            size={"small"}
+                                            onClick={() => {
+                                                setFieldValue("sideDialogWidth", null);
+                                            }}
+                                            disabled={!values.sideDialogWidth}>
+                                            <ClearIcon size={"small"}/>
+                                        </IconButton>}
+                                        value={values.sideDialogWidth ?? ""}
+                                        label={"Side dialog width"}/>
+                                    <FieldCaption error={showErrors && Boolean(errors.singularName)}>
+                                        {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px"}
+                                    </FieldCaption>
+                                </div>
                                 <div className={"col-span-12"}>
                                     <TextField
                                         error={showErrors && Boolean(errors.description)}
@@ -272,7 +302,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
-                                        label="Data IDs generation"
+                                        label="Document IDs generation"
                                         position={"item-aligned"}
                                         disabled={customIdValue === "code_defined"}
                                         onValueChange={(v) => {