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

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

@@ -30,7 +30,7 @@ export interface CollectionEditorDialogProps {
     parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export declare function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void;
     setFormDirty: (dirty: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.4.pre.2",
+  "version": "3.0.0-beta.5",
   "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.4.pre.2",
-    "@firecms/formex": "^3.0.0-beta.4.pre.2",
-    "@firecms/schema_inference": "^3.0.0-beta.4.pre.2",
-    "@firecms/ui": "^3.0.0-beta.4.pre.2",
+    "@firecms/data_import_export": "^3.0.0-beta.5",
+    "@firecms/formex": "^3.0.0-beta.5",
+    "@firecms/schema_inference": "^3.0.0-beta.5",
+    "@firecms/ui": "^3.0.0-beta.5",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.22.2",
-    "react-router-dom": "^6.22.2"
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0"
   },
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json"
   },
@@ -67,11 +67,11 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3",
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "vite": "^5.2.3",
     "vite-plugin-fonts": "^0.7.0"
   },
   "files": [
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77875cc369a0bfe7b0b141e794b14a819d5811df"
+  "gitHead": "8bf864185c9617aa3f120e59c873c8b8bda8dac4"
 }

package/src/ui/NewCollectionButton.tsx

@@ -3,14 +3,16 @@ import { useCollectionEditorController } from "../useCollectionEditorController"
 
 export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
-    return <Button className={"min-w-fit"}
-                   variant={"outlined"}
-                   onClick={() => collectionEditorController.createCollection({
-                       parentCollectionIds: [],
-                       redirect: true,
-                       sourceClick: "new_collection_button"
-                   })}>
-        <AddIcon/>
-        New collection
-    </Button>
+    return <div className={"bg-gray-50 dark:bg-gray-900 min-w-fit rounded"}>
+        <Button className={"min-w-fit"}
+                variant={"outlined"}
+                onClick={() => collectionEditorController.createCollection({
+                    parentCollectionIds: [],
+                    redirect: true,
+                    sourceClick: "new_collection_button"
+                })}>
+            <AddIcon/>
+            New collection
+        </Button>
+    </div>
 }

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -136,7 +136,7 @@ type EditorView = "welcome"
     | "extra_view"
     | "subcollections";
 
-export function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
     setFormDirty: (dirty: boolean) => void
 }) {
@@ -154,14 +154,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
     const collectionsInThisLevel = (props.parentCollection ? props.parentCollection.subcollections : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => col.path.trim().toLowerCase());
     const existingIds = collectionsInThisLevel.map(col => col.id?.trim().toLowerCase()).filter(Boolean) as string[];
-    const [collection, setCollection] = React.useState<PersistedCollection<M> | undefined>();
+    const [collection, setCollection] = React.useState<PersistedCollection<any> | undefined>();
     const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
 
     useEffect(() => {
         try {
             if (navigation.initialised) {
                 if (props.editedCollectionId) {
-                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
+                    setCollection(navigation.getCollectionFromPaths([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
                 } else {
                     setCollection(undefined);
                 }
@@ -186,14 +186,14 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
         }
         : undefined;
 
-    const initialValues: PersistedCollection<M> = initialCollection
+    const initialValues: PersistedCollection<any> = initialCollection
         ? applyPropertyConfigs(initialCollection, propertyConfigs)
         : {
             id: initialValuesProp?.path ?? randomString(16),
             path: initialValuesProp?.path ?? "",
             name: initialValuesProp?.name ?? "",
             group: initialValuesProp?.group ?? "",
-            properties: {} as PropertiesOrBuilders<M>,
+            properties: {} as PropertiesOrBuilders,
             propertiesOrder: [],
             icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
             ownerId: authController.user?.uid ?? ""

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -496,11 +496,12 @@ export function CollectionPropertiesEditorForm({
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
-            <GetCodeDialog
-                collection={values}
-                open={codeDialogOpen}
-                onOpenChange={setCodeDialogOpen}/>
-
+            <ErrorBoundary>
+                <GetCodeDialog
+                    collection={values}
+                    open={codeDialogOpen}
+                    onOpenChange={setCodeDialogOpen}/>
+            </ErrorBoundary>
         </>
     );
 }

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -5,11 +5,17 @@ import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
 
-export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+export function GetCodeDialog({
+                                  collection,
+                                  onOpenChange,
+                                  open
+                              }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
 
     const snackbarController = useSnackbarController();
 
-    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + (collection.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    const code = collection
+        ? "import { EntityCollection } from \"firecms\";\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}
                    maxWidth={"4xl"}>
@@ -29,7 +35,13 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
                 code={code}
                 language="typescript"
             >
-                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                {({
+                      className,
+                      style,
+                      tokens,
+                      getLineProps,
+                      getTokenProps
+                  }) => (
                     <pre style={style} className={"p-4 rounded text-sm"}>
         {tokens.map((line, i) => (
             <div key={i} {...getLineProps({ line })}>

package/src/useCollectionEditorPlugin.tsx

@@ -81,7 +81,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
-        name: "Collection Editor",
+        key: "collection_editor",
         loading: collectionConfigController.loading,
         provider: {
             Component: ConfigControllerProvider,