@firecms/core 3.0.0-canary.21 → 3.0.0-canary.211

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -5,7 +5,7 @@ import { ResolvedProperty } from "../../types";
 import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -23,8 +23,7 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (!property.of) {
@@ -38,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className="flex flex-col gap-2">
@@ -49,7 +48,7 @@ export function ArrayPropertyPreview({
                         return of
                             ? <React.Fragment
                                 key={"preview_array_" + index}>
-                                <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
                                     <ErrorBoundary>
                                         <PropertyPreview
                                             propertyKey={propertyKey}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ResolvedMapProperty } from "../../types";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
 
@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "tiny")
+    if (size === "small")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (
@@ -58,10 +58,11 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
             {mapPropertyKeys &&
                 mapPropertyKeys.map((key, index) => {
                     const childProperty = mapProperty.properties![key];
+                    const isArrayOrMap = childProperty.dataType === "map" || childProperty === "array";
                     return (
                         <div
                             key={`map_preview_table_${key}}`}
-                            className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                            className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                             <div
                                 className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                                 <div
@@ -75,7 +76,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 <div
                                     className="flex-grow max-w-[75%]">
                                     <ErrorBoundary>
-                                        {!(childProperty.dataType === "map" || childProperty === "array") &&
+                                        {!isArrayOrMap &&
                                             <PropertyPreview
                                                 propertyKey={key}
                                                 value={(value)[key]}
@@ -86,8 +87,8 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 </div>
                             </div>
 
-                            {(childProperty.dataType === "map" || childProperty === "array") &&
-                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                            {isArrayOrMap &&
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={(value)[key]}
@@ -110,10 +111,10 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]) => (
+            Object.entries(value).map(([key, childValue]: [string, any]) => (
                 <div
                     key={`map_preview_table_${key}}`}
-                    className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                     <div
                         className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                         <div
@@ -127,15 +128,15 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {typeof childValue !== "object" && <Typography>
+                            {childValue && <Typography>
                                 <ErrorBoundary>
-                                    {childValue && childValue.toString()}
+                                    {childValue.toString()}
                                 </ErrorBoundary>
                             </Typography>}
                         </div>
                     </div>
                     {typeof childValue === "object" &&
-                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
                             <KeyValuePreview value={childValue}/>
                         </div>
                     }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -81,17 +81,17 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         return <></>;
 
     let mapPropertyKeys: string[];
-    if (size === "medium") {
+    if (size === "large") {
         mapPropertyKeys = Object.keys(property.properties);
     } else {
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
-        if (size === "small")
+        if (size === "medium")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "tiny")
+        else if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
-    if (size !== "medium")
+    if (size !== "large")
         return (
             <div
                 className="w-full flex flex-col space-y-4"
@@ -101,7 +101,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                         {property.properties && property.properties[key] &&
                             <SkeletonPropertyComponent
                                 property={property.properties[key]}
-                                size={"small"}/>}
+                                size={"medium"}/>}
                     </div>
                 ))}
             </div>
@@ -128,7 +128,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                                 {property.properties && property.properties[key] &&
                                     <SkeletonPropertyComponent
                                         property={property.properties[key]}
-                                        size={"small"}/>}
+                                        size={"medium"}/>}
                             </th>
                         </tr>
                     );
@@ -160,7 +160,7 @@ function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedPr
                                     >
                                         <SkeletonPropertyComponent
                                             property={(properties)[key]}
-                                            size={"small"}/>
+                                            size={"medium"}/>
                                     </th>
                                 )
                             )}
@@ -210,7 +210,7 @@ function renderGenericArrayCell(
                     <>
                         <SkeletonPropertyComponent key={`i_${index}`}
                                                    property={property}
-                                                   size={"small"}/>
+                                                   size={"medium"}/>
                     </>
                 )}
         </div>
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>
@@ -236,8 +236,8 @@ export function renderSkeletonImageThumbnail(size: PreviewSize) {
 function renderUrlVideo(size: PreviewSize) {
 
     return (
-        <Skeleton width={size !== "medium" ? 300 : 500}
-                  height={size !== "medium" ? 200 : 250}/>
+        <Skeleton width={size !== "large" ? 300 : 500}
+                  height={size !== "large" ? 200 : 250}/>
     );
 }
 
@@ -245,7 +245,7 @@ function renderReference() {
     return <Skeleton width={200} height={100}/>;
 }
 
-function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "medium") {
+function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "large") {
 
     if (typeof property.url === "boolean") {
         return <div style={{

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -6,7 +6,7 @@ import { PreviewType } from "../../types";
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ErrorBoundary } from "../../components";
-import { Chip, cn, getColorSchemeForSeed } from "@firecms/ui";
+import { Chip, cls, getColorSchemeForSeed } from "@firecms/ui";
 
 /**
  * @group Preview components
@@ -45,14 +45,14 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cn("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "small" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : (size === "tiny"
+            : (size === "small"
                     ? <span className={"text-sm"}>{value}</span>
                     : <>{value}</>
             );

package/src/preview/util.ts

@@ -1,17 +1,17 @@
 import { CollectionSize } from "../types";
 import { PreviewSize } from "./PropertyPreviewProps";
 
-export const TINY_THUMBNAIL = 40;
-export const SMALL_THUMBNAIL = 100;
-export const REGULAR_THUMBNAIL = 200;
+export const SMALL_THUMBNAIL = 40;
+export const MEDIUM_THUMBNAIL = 100;
+export const LARGE_THUMBNAIL = 200;
 
 export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "tiny")
-        return TINY_THUMBNAIL;
-    else if (size === "small")
+    if (size === "small")
         return SMALL_THUMBNAIL;
     else if (size === "medium")
-        return REGULAR_THUMBNAIL;
+        return MEDIUM_THUMBNAIL;
+    else if (size === "large")
+        return LARGE_THUMBNAIL;
     else throw Error("Thumbnail size not mapped");
 }
 
@@ -19,12 +19,12 @@ export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
     switch (size) {
         case "xs":
         case "s":
-            return "tiny";
-        case "m":
             return "small";
+        case "m":
+            return "medium";
         case "l":
         case "xl":
-            return "medium";
+            return "large";
         default:
             throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
     }

package/src/routes/CustomCMSRoute.tsx

@@ -0,0 +1,21 @@
+import { CMSView } from "../types";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useEffect } from "react";
+
+export function CustomCMSRoute({ cmsView }: {
+    cmsView: CMSView
+}) {
+
+    const breadcrumbs = useBreadcrumbsController();
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: [{
+                title: cmsView.name,
+                url: cmsView.path
+            }]
+        });
+    }, [cmsView.path]);
+
+    return cmsView.view;
+}

package/src/routes/FireCMSRoute.tsx

@@ -0,0 +1,235 @@
+import { Blocker, useBlocker, useLocation } from "react-router";
+import { EntityEditView } from "../core/EntityEditView";
+import { useNavigationController } from "../hooks";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    getNavigationEntriesFromPath,
+    NavigationViewCollectionInternal,
+    NavigationViewEntityCustomInternal,
+    NavigationViewInternal
+} from "../util/navigation_from_path";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { toArray } from "../util/arrays";
+import { EntityCollectionView, NotFoundPage } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+
+export function FireCMSRoute() {
+
+    const location = useLocation();
+    const navigation = useNavigationController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    const hash = location.hash;
+    const isSidePanel = hash.includes("#side");
+    const isNew = hash.includes("#new") || hash.includes("#new_side");
+    const isCopy = hash.includes("#copy");
+
+    const pathname = location.pathname;
+    const navigationPath = navigation.urlPathToDataPath(pathname);
+
+    const navigationEntries = getNavigationEntriesFromPath({
+        path: navigationPath,
+        collections: navigation.collections ?? []
+    });
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: navigationEntries.map(entry => {
+                if (entry.type === "entity") {
+                    return ({
+                        title: entry.entityId,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else if (entry.type === "custom_view") {
+                    return ({
+                        title: entry.view.name,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else if (entry.type === "collection") {
+                    return ({
+                        title: entry.collection.name,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else {
+                    throw new Error("Unexpected navigation entry type");
+                }
+            })
+        });
+    }, [navigationEntries.map(entry => entry.path).join(",")]);
+
+    if (isNew) {
+        return <EntityFullScreenRoute
+            pathname={pathname}
+            navigationEntries={navigationEntries}
+            isNew={true}
+            isCopy={false}
+        />;
+    }
+
+    if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
+        const collection = navigation.getCollection(navigationEntries[0].path);
+        if (!collection)
+            return null;
+        return <EntityCollectionView
+            key={`collection_view_${collection.id ?? collection.path}`}
+            isSubCollection={false}
+            parentCollectionIds={[]}
+            fullPath={collection.id}
+            updateUrl={true}
+            {...collection}
+            Actions={toArray(collection.Actions)}/>
+    }
+
+    if (isSidePanel) {
+        const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
+        if (lastCollectionEntry) {
+            const collection = navigation.getCollection(lastCollectionEntry.path);
+            if (!collection)
+                return null;
+            return <EntityCollectionView
+                key={`collection_view_${collection.id ?? collection.path}`}
+                isSubCollection={false}
+                parentCollectionIds={[]}
+                fullPath={collection.id}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)}/>;
+        }
+    }
+
+    return <EntityFullScreenRoute
+        pathname={pathname}
+        navigationEntries={navigationEntries}
+        isNew={isNew}
+        isCopy={isCopy}
+    />;
+
+}
+
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.path;
+        }
+    }
+    return undefined;
+}
+
+function EntityFullScreenRoute({
+                                   pathname,
+                                   navigationEntries,
+                                   isNew,
+                                   isCopy
+                               }: {
+    pathname: string;
+    navigationEntries: NavigationViewInternal[],
+    isNew: boolean,
+    isCopy: boolean
+}) {
+
+    const navigation = useNavigationController();
+    const navigate = useNavigate();
+
+    const navigationPath = navigation.urlPathToDataPath(pathname);
+
+    // is navigating away blocked
+    const blocked = useRef(false);
+
+    const lastEntityEntry = navigationEntries.findLast((entry) => entry.type === "entity");
+    const navigationEntriesAfterEntity = lastEntityEntry ? navigationEntries.slice(navigationEntries.indexOf(lastEntityEntry) + 1) : [];
+
+    const lastCustomView = navigationEntriesAfterEntity.findLast(
+        (entry) => entry.type === "custom_view" || entry.type === "collection"
+    ) as NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined;
+
+    const entityId = lastEntityEntry?.entityId;
+
+    const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
+    const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
+
+    const parentCollectionIds = navigation.getParentCollectionIds(navigationPath);
+    useEffect(() => {
+        if (urlTab !== selectedTab) {
+            setSelectedTab(urlTab);
+        }
+    }, [urlTab]);
+
+    const basePath = !entityId || isNew
+        ? pathname
+        : pathname.substring(0, pathname.lastIndexOf(`/${entityId}`));
+
+    const entityPath = basePath + `/${entityId}`;
+
+    let blocker: Blocker | undefined = undefined;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            if (nextLocation.pathname.startsWith(entityPath))
+                return false;
+            return blocked.current;
+        });
+    } catch (e) {
+        console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
+
+    if (isNew && !lastCollectionEntry) {
+        throw new Error("INTERNAL: No collection found in the navigation");
+    }
+
+    if (!isNew && !lastEntityEntry) {
+        return <NotFoundPage/>;
+    }
+
+    const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;
+    const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry!.path : lastEntityEntry!.path);
+
+    return <>
+        <EntityEditView
+            key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+            entityId={isNew ? undefined : entityId}
+            collection={collection}
+            layout={"full_screen"}
+            path={collectionPath}
+            copy={isCopy}
+            selectedTab={selectedTab ?? undefined}
+            onValuesModified={(modified) => blocked.current = modified}
+            onSaved={(params) => {
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
+            }}
+            onTabChange={(params) => {
+                setSelectedTab(params.selectedTab);
+                if (isNew) {
+                    return;
+                }
+                const newSelectedTab = params.selectedTab;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${entityId}`, { replace: true });
+                }
+            }}
+            parentCollectionIds={parentCollectionIds}
+        />
+
+        <UnsavedChangesDialog
+            open={blocker?.state === "blocked"}
+            handleOk={() => blocker?.proceed?.()}
+            handleCancel={() => blocker?.reset?.()}
+            body={"You have unsaved changes in this entity."}/>
+
+    </>;
+}

package/src/routes/HomePageRoute.tsx

@@ -0,0 +1,17 @@
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useEffect } from "react";
+
+export function HomePageRoute({ children }: {
+    children: React.ReactNode;
+}) {
+
+    const breadcrumbs = useBreadcrumbsController();
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: []
+        });
+    }, []);
+
+    return children;
+}

package/src/types/auth.tsx

@@ -9,18 +9,13 @@ import { StorageSource } from "./storage";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
+export type AuthController<USER extends User = any, ExtraData = any> = {
 
     /**
      * The user currently logged in
      * The values can be: the user object, null if they skipped login
      */
-    user: UserType | null;
-
-    /**
-     * Roles related to the logged user
-     */
-    roles?: Role[];
+    user: USER | null;
 
     /**
      * Initial loading flag. It is used not to display the login screen
@@ -38,7 +33,7 @@ export type AuthController<UserType extends User = any, ExtraData extends any =
     /**
      * Sign out
      */
-    signOut: () => void;
+    signOut: () => Promise<void>;
 
     /**
      * Error initializing the authentication
@@ -64,26 +59,27 @@ export type AuthController<UserType extends User = any, ExtraData extends any =
 
     setExtra: (extra: ExtraData) => void;
 
-    // setUser?: (user: UserType | null) => void;
+    setUser?: (user: USER | null) => void;
+
+    setUserRoles?: (roles: Role[]) => void;
 
-    // setRoles?: (roles: Role[]) => void;
 };
 
 /**
  * Implement this function to allow access to specific users.
  * @group Hooks and utilities
  */
-export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+export type Authenticator<USER extends User = User> = (props: {
 
     /**
      * Logged-in user or null
      */
-    user: UserType | null;
+    user: USER | null;
 
     /**
      * AuthController
      */
-    authController: Controller;
+    authController: AuthController<USER>;
 
     /**
      * Connector to your database, e.g. your Firestore database