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

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -76,7 +76,7 @@ export interface CollectionEditorDialogProps {
         icon: React.ReactNode
     };
     pathSuggestions?: (path?: string) => Promise<string[]>;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
 }
@@ -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);
                 }
@@ -170,7 +170,8 @@ export function CollectionEditor<M extends Record<string, any>>(props: Collectio
         } catch (e) {
             console.error(e);
         }
-    }, [navigation.getCollectionFromPaths, props.editedCollectionId, props.parentCollectionIds, navigation.initialised]);
+    }, [props.editedCollectionId, props.parentCollectionIds, navigation]);
+
     if (!topLevelNavigation) {
         throw Error("Internal: Navigation not ready in collection editor");
     }
@@ -186,14 +187,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 ?? ""
@@ -486,19 +487,23 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         setFormDirty(dirty);
     }, [dirty]);
 
-    function onImportDataSet(data: object[]) {
+    function onImportDataSet(data: object[], propertiesOrder?: string[]) {
         importConfig.setInUse(true);
         buildEntityPropertiesFromData(data, getInferenceType)
             .then((properties) => {
                 const res = cleanPropertiesFromImport(properties);
 
-                setFieldValue("properties", res.properties);
-                setFieldValue("propertiesOrder", Object.keys(res.properties));
-
                 importConfig.setIdColumn(res.idColumn);
                 importConfig.setImportData(data);
                 importConfig.setHeadersMapping(res.headersMapping);
+                const filteredHeadingsOrder = ((propertiesOrder ?? [])
+                    .filter((key) => res.headersMapping[key]) as string[]) ?? Object.keys(res.properties);
+                importConfig.setHeadingsOrder(filteredHeadingsOrder);
                 importConfig.setOriginProperties(res.properties);
+
+                const mappedHeadings = (propertiesOrder ?? []).map((key) => res.headersMapping[key]).filter(Boolean) as string[] ?? Object.keys(res.properties);
+                setFieldValue("properties", res.properties);
+                setFieldValue("propertiesOrder", mappedHeadings);
             });
     }
 
@@ -551,9 +556,10 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
-                            onContinue={(importData) => {
+                            onContinue={(importData, propertiesOrder) => {
+                                // console.log("Import data", importData, propertiesOrder)
                                 if (importData) {
-                                    onImportDataSet(importData);
+                                    onImportDataSet(importData, propertiesOrder);
                                     setCurrentView("import_data_mapping");
                                 } else {
                                     setCurrentView("details");
@@ -733,7 +739,10 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 }
 
 function applyPropertyConfigs<M extends Record<string, any> = any>(collection: PersistedCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): PersistedCollection<M> {
-    const { properties, ...rest } = collection;
+    const {
+        properties,
+        ...rest
+    } = collection;
     const propertiesResult: PropertiesOrBuilders<any> = {};
     if (properties) {
         Object.keys(properties).forEach((key) => {
@@ -741,7 +750,10 @@ function applyPropertyConfigs<M extends Record<string, any> = any>(collection: P
         });
     }
 
-    return { ...rest, properties: propertiesResult };
+    return {
+        ...rest,
+        properties: propertiesResult
+    };
 }
 
 function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Record<string, PropertyConfig<any>>) {
@@ -761,7 +773,10 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
                 Object.keys(internalProperty.properties).forEach((key) => {
                     properties[key] = applyPropertiesConfig(((internalProperty as MapProperty).properties as Properties)[key] as Property, propertyConfigs);
                 });
-                internalProperty = { ...internalProperty, properties };
+                internalProperty = {
+                    ...internalProperty,
+                    properties
+                };
             }
 
         }

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -19,7 +19,7 @@ export function CollectionEditorWelcomeView({
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
-    onContinue: (importData?: object[]) => void;
+    onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
 }) {
 
@@ -154,7 +154,7 @@ export function CollectionEditorWelcomeView({
                         ● Create a collection from a file (csv, json, xls, xslx...)
                     </Typography>
 
-                    <ImportFileUpload onDataAdded={(data) => onContinue(data)}/>
+                    <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)}/>
 
                 </div>}
 

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -43,7 +43,7 @@ type CollectionEditorFormProps = {
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
@@ -301,7 +301,7 @@ export function CollectionPropertiesEditorForm({
         ? values.propertiesOrder
         : Object.keys(values.properties)) as string[];
 
-    const owner = useMemo(() => values.ownerId ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
+    const owner = useMemo(() => values.ownerId && getUser ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
 
     const onPropertyClick = useCallback((propertyKey: string, namespace?: string) => {
         console.debug("CollectionEditor: onPropertyClick", {
@@ -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/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
 }) {
 

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -1,21 +1,33 @@
-import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
-import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
-import { useEffect } from "react";
+import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
+import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
+import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
 
-export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+export function CollectionEditorImportDataPreview({
+                                                      importConfig,
+                                                      properties,
+                                                      propertiesOrder
+                                                  }: {
     importConfig: ImportConfig,
     properties: Properties,
     propertiesOrder: string[]
 }) {
 
-    useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
         importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
     }, []);
 
     const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
 
     return <EntityCollectionTable
         title={<div>
@@ -31,7 +43,10 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
         properties={properties}/>
 
 }

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -6,7 +6,7 @@ import {
 } from "@firecms/data_import_export";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
 import { Container, Select, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -143,18 +143,20 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
 
-                <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
-                                          idColumn={importConfig.idColumn}
-                                          originProperties={importConfig.originProperties}
+                <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,
-                                                                  importKey
+                                                                  importKey,
+                                                                  isIdColumn
                                                               }) => {
+                                              if (isIdColumn) {
+                                                  return <Typography> This column will be used as ID</Typography>
+                                              }
+
                                               return <ImportNewPropertyFieldPreview
                                                   property={property}
                                                   propertyKey={propertyKey}

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

@@ -2,11 +2,17 @@ import React, { useCallback, useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
 import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
 
-export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+export function BlockPropertyField({
+                                       disabled,
+                                       getData,
+                                       allowDataInference,
+                                       propertyConfigs,
+                                       collectionEditable
+                                   }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
@@ -50,7 +56,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
 
         setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
         const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
-        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
         setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
 
         setPropertyDialogOpen(false);

package/src/useCollectionEditorPlugin.tsx

@@ -4,16 +4,16 @@ import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
 import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
-import { NewCollectionCard } from "./ui/NewCollectionCard";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
-import { AddIcon, Button, Typography } from "@firecms/ui";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
+import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -32,7 +32,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      * names when creating collections.
      * e.g. ["admin"]
      */
-    reservedGroups: string[];
+    reservedGroups?: string[];
 
     extraView?: {
         View: React.ComponentType<{
@@ -41,18 +41,16 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         icon: React.ReactNode
     };
 
-    pathSuggestions?: (path: string) => Promise<string[]>;
+    getPathSuggestions?: (path?: string) => Promise<string[]>;
 
     collectionInference?: CollectionInference;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
-    getUser: (uid: string) => UserType | null;
+    getUser?: (uid: string) => UserType | null;
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
-    introMode?: "new_project" | "existing_project";
-
 }
 
 /**
@@ -62,18 +60,17 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param pathSuggestions
+ * @param getPathsSuggestions
  * @param getUser
  * @param collectionInference
  */
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
 ({
      collectionConfigController,
-     introMode,
      configPermissions,
      reservedGroups,
      extraView,
-     pathSuggestions,
+     getPathSuggestions,
      getUser,
      collectionInference,
      getData,
@@ -81,7 +78,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,
@@ -91,7 +88,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 collectionInference,
                 reservedGroups,
                 extraView,
-                pathSuggestions,
+                getPathSuggestions,
                 getUser,
                 getData,
                 onAnalyticsEvent
@@ -99,12 +96,13 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
-            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            additionalChildrenStart: <IntroWidget/>,
+            // additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
             CollectionActions: HomePageEditorCollectionAction,
-            AdditionalCards: introMode ? undefined : NewCollectionCard,
+            AdditionalCards: NewCollectionCard,
         },
         collectionView: {
+            CollectionActionsStart: EditorCollectionActionStart,
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
@@ -112,9 +110,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
     };
 }
 
-export function IntroWidget({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}) {
+export function IntroWidget({}: {}) {
 
     const navigation = useNavigationController();
     if (!navigation.topLevelNavigation)
@@ -129,17 +125,19 @@ export function IntroWidget({ introMode }: {
         }).createCollections
         : true;
 
+    if (!navigation.initialised || navigation.collections === undefined || (navigation.collections ?? []).length > 0) {
+        return null;
+    }
+
     return (
-        <div className={"mt-8 flex flex-col mt-8 p-2"}>
-            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
-            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
-            <Typography paragraph={true}>
+        <Paper
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2"}>
+            <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
+            <Typography>
                 Start building collections in FireCMS easily. Map them to your existing
-                database data, import from files, or use our templates. Simplify your data management process
-                now.
+                database data, import from files, or use our templates.
             </Typography>
             {canCreateCollections && <Button
-                className={"mt-4"}
                 onClick={collectionEditorController && canCreateCollections
                     ? () => collectionEditorController.createCollection({
                         parentCollectionIds: [],
@@ -149,6 +147,9 @@ export function IntroWidget({ introMode }: {
                     : undefined}>
                 <AddIcon/>Create your first collection
             </Button>}
-        </div>
+            <Typography variant={"caption"} color={"secondary"}>
+                You can also define collections programmatically.
+            </Typography>
+        </Paper>
     );
 }

package/src/utils/collections.ts

@@ -0,0 +1,30 @@
+import {
+    EntityCollection,
+    joinCollectionLists,
+    makePropertiesEditable,
+    ModifyCollectionProps,
+    Properties
+} from "@firecms/core";
+import { PersistedCollection } from "../types/persisted_collection";
+
+/**
+ * Function in charge of merging collections defined in code with those stored in the backend.
+ */
+export const mergeCollections = (baseCollections: EntityCollection[],
+                                 backendCollections: PersistedCollection[],
+                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
+) => {
+
+    const markAsEditable = (c: PersistedCollection) => {
+        makePropertiesEditable(c.properties as Properties);
+        c.subcollections?.forEach(markAsEditable);
+    };
+    const storedCollections = backendCollections ?? [];
+    storedCollections.forEach(markAsEditable);
+
+    console.debug("Collections specified in code:", baseCollections);
+    console.debug("Collections stored in the backend", storedCollections);
+    const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
+    console.debug("Collections after joining:", result);
+    return result;
+}

package/dist/ui/RootCollectionSuggestions.d.ts

@@ -1,3 +0,0 @@
-export declare function RootCollectionSuggestions({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}): import("react/jsx-runtime").JSX.Element;

package/src/ui/RootCollectionSuggestions.tsx

@@ -1,63 +0,0 @@
-import { unslugify, useAuthController, useNavigationController } from "@firecms/core";
-import { AddIcon, Chip, CircularProgress, Collapse, Typography, } from "@firecms/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import React from "react";
-
-export function RootCollectionSuggestions({ introMode }: { introMode?: "new_project" | "existing_project" }) {
-
-    const authController = useAuthController();
-    const navigationController = useNavigationController();
-
-    const collectionEditorController = useCollectionEditorController();
-    const canCreateCollections = collectionEditorController.configPermissions
-        ? collectionEditorController.configPermissions({
-            user: authController.user
-        }).createCollections
-        : true;
-
-    const rootPathSuggestions = collectionEditorController.rootPathSuggestions;
-
-    const showSuggestions = (rootPathSuggestions ?? []).length > 3 || ((navigationController.collections ?? []).length === 0 && (rootPathSuggestions ?? []).length > 0);
-    const forceShowSuggestions = introMode === "existing_project";
-    return <Collapse
-        in={forceShowSuggestions || showSuggestions}>
-
-        <div
-            className={"flex flex-col gap-1 p-2 my-4"}>
-
-            {!introMode && <Typography variant={"body2"} color={"secondary"}>
-                Create a collection <b>automatically</b> from your data:
-            </Typography>}
-
-            {introMode === "existing_project" && <Typography>
-                You will see your <b>database collections</b> here, a few seconds after project creation
-            </Typography>}
-
-            <div
-                className={"flex flex-row gap-1 overflow-scroll no-scrollbar "}>
-                {(rootPathSuggestions ?? []).map((path) => {
-                    return (
-                        <div key={path}>
-                            <Chip
-                                icon={<AddIcon size={"small"}/>}
-                                colorScheme={"cyanLighter"}
-                                onClick={collectionEditorController && canCreateCollections
-                                    ? () => collectionEditorController.createCollection({
-                                        initialValues: { path, name: unslugify(path) },
-                                        parentCollectionIds: [],
-                                        redirect: true,
-                                        sourceClick: "root_collection_suggestion"
-                                    })
-                                    : undefined}
-                                size="small">
-                                {path}
-                            </Chip>
-                        </div>
-                    );
-                })}
-                {rootPathSuggestions === undefined && <CircularProgress size={"small"}/>}
-                {rootPathSuggestions?.length === 0 && <Typography variant={"caption"}>No suggestions</Typography>}
-            </div>
-        </div>
-    </Collapse>
-}