@firecms/core 3.0.0-alpha.45 → 3.0.0-alpha.47

package/dist/internal/EntityView.d.ts

@@ -5,6 +5,7 @@ export interface EntityViewProps<M extends Record<string, any>> {
     entityId?: string;
     copy?: boolean;
     selectedSubPath?: string;
+    parentCollectionIds: string[];
     formWidth?: number | string;
     onValuesAreModified: (modified: boolean) => void;
     onUpdate?: (params: {
@@ -18,4 +19,4 @@ export interface EntityViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
  */
-export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/types/collections.d.ts

@@ -16,6 +16,13 @@ import { ExportConfig } from "./export_import";
  * @group Models
  */
 export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
+    /**
+     * You can set an alias that will be used internally instead of the `path`.
+     * The `alias` value will be used to determine the URL of the collection,
+     * while `path` will still be used in the datasource.
+     * Note that you can use this value in reference properties too.
+     */
+    id: string;
     /**
      * Name of the collection, typically plural.
      * E.g. `Products`, `Blog`
@@ -41,13 +48,6 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * property to `true` to indicate that this collection is a collection group.
      */
     collectionGroup?: boolean;
-    /**
-     * You can set an alias that will be used internally instead of the `path`.
-     * The `alias` value will be used to determine the URL of the collection,
-     * while `path` will still be used in the datasource.
-     * Note that you can use this value in reference properties too.
-     */
-    alias?: string;
     /**
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
@@ -262,7 +262,7 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
     /**
      * Array of the parent path segments like `['users']`
      */
-    parentPathSegments: string[];
+    parentCollectionIds: string[];
     /**
      * The collection configuration
      */

package/dist/types/firecms.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { User } from "./user";
 import { AuthController } from "./auth";
-import { DataSource, DataSourceDelegate } from "./datasource";
+import { DataSourceDelegate } from "./datasource";
 import { EntityCollection, EntityCustomView } from "./collections";
-import { CMSView, NavigationController } from "./navigation";
+import { CMSView } from "./navigation";
 import { FireCMSContext } from "./firecms_context";
 import { PropertyConfig } from "./property_config";
 import { Locale } from "./locales";
@@ -62,6 +62,18 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
          */
         loading: boolean;
     }) => React.ReactNode;
+    /**
+     * List of the mapped collections in the CMS.
+     * Each entry relates to a collection in the root database.
+     * Each of the navigation entries in this field
+     * generates an entry in the main menu.
+     */
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
+    /**
+     * Custom additional views created by the developer, added to the main
+     * navigation
+     */
+    views?: CMSView[] | CMSViewsBuilder;
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
@@ -88,7 +100,7 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Connector to your database
      */
-    dataSource: DataSource;
+    dataSourceDelegate: DataSourceDelegate;
     /**
      * Connector to your file upload/fetch implementation
      */
@@ -98,10 +110,17 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      */
     authController: AuthController<UserType>;
     /**
-     * Controller in charge of managing the collections and views of the CMS.
-     * @see {@link useBuildNavigationController}
+     * Path under the navigation routes of the CMS will be created. Defaults to `/`.
+     * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
+     * `BrowserRouter` component. If you are using FireCMS in a subpath of your website, you can use
+     * this prop to specify the base path.
+     */
+    basePath?: string;
+    /**
+     * Path under the collection routes of the CMS will be created.
+     * Defaults to `/c`.
      */
-    navigationController: NavigationController;
+    baseCollectionPath?: string;
     /**
      * Use this controller to access the configuration that is stored locally,
      * and not defined in code

package/dist/types/index.d.ts

@@ -24,3 +24,4 @@ export * from "./analytics";
 export * from "./firecms";
 export * from "./appcheck";
 export * from "./export_import";
+export * from "./modify_collections";

package/dist/types/modify_collections.d.ts

@@ -0,0 +1,5 @@
+import { EntityCollection } from "./collections";
+export type ModifyCollectionProps = {
+    collection: EntityCollection;
+    parentPaths: string[];
+};

package/dist/types/navigation.d.ts

@@ -42,6 +42,10 @@ export type NavigationController = {
      * The collection is resolved from the given path or alias.
      */
     getCollection: <EC extends EntityCollection = EntityCollection<any>>(pathOrAlias: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
+    /**
+     * Get the collection configuration from its parent path segments.
+     */
+    getCollectionFromIds: <EC extends EntityCollection = EntityCollection<any>>(ids: string[]) => EC | undefined;
     /**
      * Get the collection configuration from its parent path segments.
      */
@@ -106,6 +110,11 @@ export type NavigationController = {
      * @param path
      */
     getParentReferencesFromPath: (path: string) => EntityReference[];
+    /**
+     * Retrieve all the related parent collection ids for a given path
+     * @param path
+     */
+    getParentCollectionIds: (path: string) => string[];
 };
 /**
  * Custom additional views created by the developer, added to the main

package/dist/types/plugins.d.ts

@@ -95,7 +95,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             property: ResolvedProperty;
             propertyKey: string;
             fullPath: string;
-            parentPathSegments: string[];
+            parentCollectionIds: string[];
             onHover: boolean;
             collection: EC;
         }>;
@@ -105,7 +105,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         AddColumnComponent?: React.ComponentType<{
             fullPath: string;
-            parentPathSegments: string[];
+            parentCollectionIds: string[];
             collection: EC;
         }>;
     };

package/dist/ui/ExpandablePanel.d.ts

@@ -1,8 +1,9 @@
 import React, { PropsWithChildren } from "react";
-export declare function ExpandablePanel({ title, children, invisible, initiallyExpanded: initiallyOpen, onExpandedChange, titleClassName, asField, className }: PropsWithChildren<{
+export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className }: PropsWithChildren<{
     title: React.ReactNode;
     invisible?: boolean;
     initiallyExpanded?: boolean;
+    expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
     titleClassName?: string;
     asField?: boolean;

package/dist/util/join_collections.d.ts

@@ -1,13 +1,9 @@
-import { EntityCollection } from "../types";
+import { EntityCollection, ModifyCollectionProps } from "../types";
 /**
  *
- * @param storedCollections
- * @param codedCollections
  */
-export declare function joinCollectionLists(storedCollections: EntityCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[];
+export declare function joinCollectionLists(targetCollections: EntityCollection[], sourceCollections: EntityCollection[] | undefined, parentPaths?: string[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | undefined): EntityCollection[];
 /**
  *
- * @param target
- * @param source
  */
-export declare function mergeCollection(target: EntityCollection, source: EntityCollection): EntityCollection;
+export declare function mergeCollection(target: EntityCollection, source: EntityCollection, parentPaths?: string[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | undefined): EntityCollection;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@firecms/core",
-    "version": "3.0.0-alpha.45",
+    "version": "3.0.0-alpha.47",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -133,7 +133,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "8a8223081bd7f76d655564ca995dca085f22d727",
+    "gitHead": "1c2310776f2da9bba46ba352e9a5244118dcdc3f",
     "publishConfig": {
         "access": "public"
     }

package/src/components/EntityCollectionTable/internal/EntityCollectionRowActions.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, Tooltip, Typography, Skeleton } from "../../../ui";
+import { Checkbox, cn, IconButton, Menu, MenuItem, Skeleton, Tooltip, Typography } from "../../../ui";
 import { useFireCMSContext, useLargeLayout } from "../../../hooks";
 import { MoreVertIcon } from "../../../icons";
 

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -66,5 +66,5 @@ export function getTablePropertyColumnWidth(property: ResolvedProperty): number
 }
 
 export function getSubcollectionColumnId(collection: EntityCollection) {
-    return `subcollection:${collection.alias ?? collection.path}`;
+    return `subcollection:${collection.id ?? collection.path}`;
 }

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -69,7 +69,7 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
  */
 export type EntityCollectionViewProps<M extends Record<string, any>> = {
     fullPath: string;
-    parentPathSegments?: string[];
+    parentCollectionIds?: string[];
     isSubCollection?: boolean;
     className?: string;
 } & EntityCollection<M>;
@@ -101,7 +101,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath,
-                                                                     parentPathSegments,
+                                                                     parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
                                                                      ...collectionProp
@@ -238,7 +238,7 @@ export const EntityCollectionView = React.memo(
 
         let AddColumnComponent: React.ComponentType<{
             fullPath: string,
-            parentPathSegments: string[],
+            parentCollectionIds: string[],
             collection: EntityCollection;
         }> | undefined
 
@@ -367,7 +367,7 @@ export const EntityCollectionView = React.memo(
                                     sideEntityController.open({
                                         path: fullPath,
                                         entityId: entity.id,
-                                        selectedSubPath: subcollection.alias ?? subcollection.path,
+                                        selectedSubPath: subcollection.id ?? subcollection.path,
                                         collection,
                                         updateUrl: true
                                     });
@@ -529,7 +529,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
-                            parentPathSegments={parentPathSegments ?? []}/>;
+                            parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
         }
@@ -538,7 +538,7 @@ export const EntityCollectionView = React.memo(
             ? function () {
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
-                                               parentPathSegments={parentPathSegments ?? []}
+                                               parentCollectionIds={parentCollectionIds ?? []}
                                                collection={collection}/>;
                 return null;
             }
@@ -565,7 +565,7 @@ export const EntityCollectionView = React.memo(
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
                     actions={<EntityCollectionViewActions
-                        parentPathSegments={parentPathSegments ?? []}
+                        parentCollectionIds={parentCollectionIds ?? []}
                         collection={collection}
                         tableController={tableController}
                         onMultipleDeleteClick={onMultipleDeleteClick}

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -12,7 +12,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
     path: string;
     relativePath: string;
-    parentPathSegments: string[];
+    parentCollectionIds: string[];
     selectionEnabled: boolean;
     onNewClick: () => void;
     onMultipleDeleteClick: () => void;
@@ -24,7 +24,7 @@ export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
 export function EntityCollectionViewActions<M extends Record<string, any>>({
                                                                                collection,
                                                                                relativePath,
-                                                                               parentPathSegments,
+                                                                               parentCollectionIds,
                                                                                onNewClick,
                                                                                onMultipleDeleteClick,
                                                                                selectionEnabled,
@@ -95,7 +95,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
     const actionProps: CollectionActionsProps = {
         path,
         relativePath,
-        parentPathSegments,
+        parentCollectionIds,
         collection,
         selectionController,
         context,
@@ -111,11 +111,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
         ));
 
     if (plugins) {
-        plugins.forEach(plugin => {
+        plugins.forEach((plugin, i) => {
             if (plugin.collections?.CollectionActions) {
                 actions.push(...toArray(plugin.collections?.CollectionActions)
-                    .map((Action, i) => (
-                        <ErrorBoundary key={`plugin_actions_${i}`}>
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
                             <Action {...actionProps} {...plugin.collections?.collectionActionsProps}/>
                         </ErrorBoundary>
                     )));

package/src/core/EntitySidePanel.tsx

@@ -25,6 +25,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const navigationController = useNavigationController();
 
+    const parentCollectionIds = useMemo(() => {
+        return navigationController.getParentCollectionIds(props.path);
+    }, [navigationController, props.path]);
+
     const collection = useMemo(() => {
         if (!props) return undefined;
         let usedCollection = props.collection;
@@ -76,6 +80,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     {...props}
                     formWidth={props.width}
                     collection={collection}
+                    parentCollectionIds={parentCollectionIds}
                     onValuesAreModified={onValuesAreModified}
                 />
             </ErrorBoundary>

package/src/core/FireCMS.tsx

@@ -16,7 +16,8 @@ import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerC
 import { useLocaleConfig } from "../internal/useLocaleConfig";
 import { CenteredView } from "../ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
-
+import { useBuildNavigationController } from "../internal/useBuildNavigationController";
+import { useBuildDataSource } from "../internal/useBuildDataSource";
 
 /**
  * If you are using independent components of the CMS
@@ -41,17 +42,40 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         locale,
         authController,
         storageSource,
-        dataSource,
-        navigationController,
+        dataSourceDelegate,
         plugins,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
-        components
+        components,
+        baseCollectionPath,
+        basePath,
+        collections,
+        views
     } = props;
 
     useLocaleConfig(locale);
 
+    const navigationController = useBuildNavigationController({
+        basePath,
+        baseCollectionPath,
+        authController,
+        collections,
+        views,
+        userConfigPersistence,
+        dataSource: dataSourceDelegate,
+        plugins
+    });
+
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController
+    });
+
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
 

package/src/core/NavigationRoutes.tsx

@@ -67,19 +67,19 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const collectionRoutes = sortedCollections
             .map((collection) => {
-                    const urlPath = navigation.buildUrlCollectionPath(collection.alias ?? collection.path);
+                    const urlPath = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
                     return <Route path={urlPath + "/*"}
-                                  key={`navigation_${collection.alias ?? collection.path}`}
+                                  key={`navigation_${collection.id ?? collection.path}`}
                                   element={
                                       <RouteWrapper
                                           path={urlPath}
                                           title={collection.name}
                                           type={"collection"}>
                                           <EntityCollectionView
-                                              key={`collection_view_${collection.alias ?? collection.path}`}
+                                              key={`collection_view_${collection.id ?? collection.path}`}
                                               isSubCollection={false}
-                                              parentPathSegments={[]}
-                                              fullPath={collection.alias ?? collection.path}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
                                               {...collection}
                                               Actions={toArray(collection.Actions)}/>
                                       </RouteWrapper>

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -56,6 +56,7 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        console.debug("onMultipleEntitiesSelected", entities);
         setValue(entities.map(e => getReferenceFrom(e)));
     }, [setValue]);
 

package/src/hooks/index.tsx

@@ -22,5 +22,3 @@ export * from "./useLargeLayout";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
-export * from "./useBuildDataSource";
-export * from "./useBuildNavigationController";

package/src/internal/EntityView.tsx

@@ -45,18 +45,13 @@ export interface EntityViewProps<M extends Record<string, any>> {
     entityId?: string;
     copy?: boolean;
     selectedSubPath?: string;
+    parentCollectionIds: string[];
     formWidth?: number | string;
     onValuesAreModified: (modified: boolean) => void;
     onUpdate?: (params: { entity: Entity<any> }) => void;
     onClose?: () => void;
 }
 
-type EntityViewView = {
-    label: string;
-    component: React.ReactNode;
-    size: "full" | "half";
-}
-
 /**
  * This is the default view that is used as the content of a side panel when
  * an entity is opened.
@@ -69,12 +64,14 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                                                                                      selectedSubPath,
                                                                                      copy,
                                                                                      collection,
+                                                                                     parentCollectionIds,
                                                                                      onValuesAreModified,
                                                                                      formWidth,
                                                                                      onUpdate,
                                                                                      onClose
                                                                                  }: EntityViewProps<M>) {
 
+
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
@@ -343,7 +340,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
     const subCollectionsViews = subcollections && subcollections.map(
         (subcollection, colIndex) => {
-            const subcollectionId = subcollection.alias ?? subcollection.path;
+            const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
             if (selectedTabRef.current !== subcollectionId)
                 return null;
@@ -359,7 +356,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                         (usedEntity && fullPath
                             ? <EntityCollectionView
                                 fullPath={fullPath}
-                                parentPathSegments={fullPathToCollectionSegments(path)}
+                                parentCollectionIds={[...parentCollectionIds, collection.id]}
                                 isSubCollection={true}
                                 {...subcollection}/>
                             : <div
@@ -480,7 +477,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
         (subcollection) =>
             <Tab
                 className="text-sm min-w-[140px]"
-                value={subcollection.path}
+                value={subcollection.id}
                 key={`entity_detail_collection_tab_${subcollection.name}`}>
                 {subcollection.name}
             </Tab>
@@ -533,9 +530,6 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
                             <Tab
                                 disabled={!hasAdditionalViews}
-                                // onClick={() => {
-                                //     onSideTabClick(-1);
-                                // }}
                                 value={MAIN_TAB_VALUE}
                                 className={`${
                                     !hasAdditionalViews ? "hidden" : ""

package/src/{hooks → internal}/useBuildDataSource.ts

@@ -62,8 +62,6 @@ export function useBuildDataSource({
                                                                          order
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-
-            const collection = collectionProp ?? navigationController.getCollection(path);
             return delegate.fetchCollection<M>({
                 path,
                 filter,
@@ -125,7 +123,7 @@ export function useBuildDataSource({
                     onError,
                     isCollectionGroup
                 });
-            }, [delegate])
+            }, [delegate, navigationController.getCollection])
             : undefined,
 
         /**
@@ -240,7 +238,7 @@ export function useBuildDataSource({
                     values: delegate.delegateToCMSModel(updatedFirestoreValues)
                 } as Entity<M>;
             });
-        }, [delegate.saveEntity]),
+        }, [delegate.saveEntity, navigationController.getCollection]),
 
         /**
          * Delete an entity