@firecms/core 3.0.0-canary.0 → 3.0.0-canary.10

package/src/hooks/useBuildNavigationController.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare"
 
 import {
     AuthController,
@@ -10,12 +10,14 @@ import {
     EntityCollectionsBuilder,
     EntityReference,
     NavigationController,
+    PermissionsBuilder,
     TopNavigationEntry,
     TopNavigationResult,
     User,
     UserConfigurationPersistence
 } from "../types";
 import {
+    applyPermissionsFunctionIfEmpty,
     getCollectionByPathOrId,
     mergeDeep,
     removeInitialAndTrailingSlashes,
@@ -32,7 +34,10 @@ type BuildNavigationContextProps<EC extends EntityCollection, UserType extends U
     baseCollectionPath?: string,
     authController: AuthController<UserType>;
     collections?: EC[] | EntityCollectionsBuilder<EC>;
+    collectionPermissions?: PermissionsBuilder;
     views?: CMSView[] | CMSViewsBuilder;
+    adminViews?: CMSView[] | CMSViewsBuilder;
+    viewsOrder?: string[];
     userConfigPersistence?: UserConfigurationPersistence;
     dataSourceDelegate: DataSourceDelegate;
     /**
@@ -45,21 +50,25 @@ type BuildNavigationContextProps<EC extends EntityCollection, UserType extends U
     injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
 };
 
-export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>({
-                                                                                                     basePath = DEFAULT_BASE_PATH,
-                                                                                                     baseCollectionPath = DEFAULT_COLLECTION_PATH,
-                                                                                                     authController,
-                                                                                                     collections: baseCollections,
-                                                                                                     views: baseViews,
-                                                                                                     userConfigPersistence,
-                                                                                                     dataSourceDelegate,
-                                                                                                     injectCollections
-                                                                                                 }: BuildNavigationContextProps<EC, UserType>): NavigationController {
-
-    const location = useLocation();
-
-    const [collections, setCollections] = useState<EntityCollection[] | undefined>();
-    const [views, setViews] = useState<CMSView[] | undefined>();
+export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>(props: BuildNavigationContextProps<EC, UserType>): NavigationController {
+    const {
+        basePath = DEFAULT_BASE_PATH,
+        baseCollectionPath = DEFAULT_COLLECTION_PATH,
+        authController,
+        collections: collectionsProp,
+        collectionPermissions,
+        views: viewsProp,
+        adminViews: adminViewsProp,
+        viewsOrder,
+        userConfigPersistence,
+        dataSourceDelegate,
+        injectCollections
+    } = props;
+
+    const collectionsRef = useRef<EntityCollection[] | undefined>();
+    const viewsRef = useRef<CMSView[] | undefined>();
+    const adminViewsRef = useRef<CMSView[] | undefined>();
+
     const [initialised, setInitialised] = useState<boolean>(false);
 
     const [topLevelNavigation, setTopLevelNavigation] = useState<TopNavigationResult | undefined>(undefined);
@@ -79,19 +88,18 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
         [baseCollectionPath]);
 
-    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[]): TopNavigationResult => {
-        // return (collection.editable && resolvePermissions(collection, authController, paths).editCollection) ?? DEFAULT_PERMISSIONS.editCollection;
-        const navigationEntries: TopNavigationEntry[] = [
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): TopNavigationResult => {
+        let navigationEntries: TopNavigationEntry[] = [
             ...(collections ?? []).map(collection => (!collection.hideFromNavigation
-                ? {
+                ? ({
                     url: buildUrlCollectionPath(collection.id ?? collection.path),
                     type: "collection",
                     name: collection.name.trim(),
                     path: collection.id ?? collection.path,
                     collection,
                     description: collection.description?.trim(),
-                    group: collection.group?.trim()
-                }
+                    group: getGroup(collection)
+                } satisfies TopNavigationEntry)
                 : undefined))
                 .filter(Boolean) as TopNavigationEntry[],
             ...(views ?? []).map(view =>
@@ -100,18 +108,50 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                         url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
                         name: view.name.trim(),
                         type: "view",
+                        path: view.path,
                         view,
                         description: view.description?.trim(),
-                        group: view.group?.trim()
-                    })
+                        group: getGroup(view)
+                    } satisfies TopNavigationEntry)
+                    : undefined)
+                .filter(Boolean) as TopNavigationEntry[],
+            ...(adminViews ?? []).map(view =>
+                !view.hideFromNavigation
+                    ? ({
+                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
+                        name: view.name.trim(),
+                        type: "admin",
+                        path: view.path,
+                        view,
+                        description: view.description?.trim(),
+                        group: "Admin"
+                    } satisfies TopNavigationEntry)
                     : undefined)
                 .filter(Boolean) as TopNavigationEntry[]
         ];
 
+        if (viewsOrder) {
+            navigationEntries = navigationEntries.sort((a, b) => {
+                const aIndex = viewsOrder.indexOf(a.path);
+                const bIndex = viewsOrder.indexOf(b.path);
+                if (aIndex === -1 && bIndex === -1) {
+                    return 0;
+                }
+                if (aIndex === -1) {
+                    return 1;
+                }
+                if (bIndex === -1) {
+                    return -1;
+                }
+                return aIndex - bIndex;
+            });
+        }
+
         const groups: string[] = Object.values(navigationEntries)
             .map(e => e.group)
             .filter(Boolean)
             .filter((value, index, array) => array.indexOf(value) === index) as string[];
+
         return {
             navigationEntries,
             groups
@@ -124,15 +164,24 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
             return;
 
         try {
-            const [resolvedCollections = [], resolvedViews = []] = await Promise.all([
-                    resolveCollections(baseCollections, authController, dataSourceDelegate, injectCollections),
-                    resolveCMSViews(baseViews, authController, dataSourceDelegate)
+            console.debug("Refreshing navigation")
+            const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
+                    resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
+                    resolveCMSViews(viewsProp, authController, dataSourceDelegate),
+                    resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
             );
-
-            setCollections(resolvedCollections);
-            setViews(resolvedViews);
-            setTopLevelNavigation(computeTopNavigation(resolvedCollections ?? [], resolvedViews));
+            if (
+                !equal(collectionsRef.current, resolvedCollections) ||
+                !equal(viewsRef.current, resolvedViews) ||
+                !equal(adminViewsRef.current, resolvedAdminViews) ||
+                !equal(topLevelNavigation, computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder))
+            ) {
+                collectionsRef.current = resolvedCollections;
+                viewsRef.current = resolvedViews;
+                adminViewsRef.current = resolvedAdminViews;
+                setTopLevelNavigation(computeTopNavigation(resolvedCollections ?? [], resolvedViews, resolvedAdminViews, viewsOrder));
+            }
         } catch (e) {
             console.error(e);
             setNavigationLoadingError(e as any);
@@ -140,7 +189,17 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         setNavigationLoading(false);
         setInitialised(true);
-    }, [baseCollections, authController.user, authController.initialLoading, baseViews, computeTopNavigation, injectCollections]);
+
+    }, [
+        collectionsProp,
+        collectionPermissions,
+        authController.user,
+        authController.initialLoading,
+        viewsProp,
+        adminViewsProp,
+        computeTopNavigation,
+        injectCollections
+    ]);
 
     useEffect(() => {
         refreshNavigation();
@@ -151,7 +210,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
-
+        const collections = collectionsRef.current;
         if (!collections)
             return undefined;
 
@@ -182,11 +241,12 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     }, [
         basePath,
         baseCollectionPath,
-        collections,
     ]);
 
     const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
-        let currentCollections = collections;
+
+        const collections = collectionsRef.current;
+        let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
         if (!currentCollections)
             throw Error("Collections have not been initialised yet");
 
@@ -202,10 +262,12 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         return undefined;
 
-    }, [collections]);
+    }, []);
 
     const getCollectionFromIds = useCallback(<EC extends EntityCollection>(ids: string[]): EC | undefined => {
-        let currentCollections = collections;
+
+        const collections = collectionsRef.current;
+        let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
         if (!currentCollections)
             throw Error("Collections have not been initialised yet");
 
@@ -221,7 +283,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         return undefined;
 
-    }, [collections]);
+    }, []);
 
     const isUrlCollectionPath = useCallback(
         (path: string): boolean => removeInitialAndTrailingSlashes(path + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"),
@@ -243,25 +305,19 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         []);
 
     const resolveAliasesFrom = useCallback((path: string): string => {
+        const collections = collectionsRef.current;
         if (!collections)
             throw Error("Collections have not been initialised yet");
         return resolveCollectionPathIds(path, collections);
-    }, [collections]);
-
-    const state = location.state as any;
-    /**
-     * The location can be overridden if `base_location` is set in the
-     * state field of the current location. This can happen if you open
-     * a side entity, like `products`, from a different one, like `users`
-     */
-    const baseLocation = state && state.base_location ? state.base_location : location;
+    }, []);
 
     const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
+        const collections = collectionsRef.current ?? [];
         return getParentReferencesFromPath({
             path,
             collections
         });
-    }, [collections]);
+    }, []);
 
     const getParentCollectionIds = useCallback((path: string): string[] => {
 
@@ -276,35 +332,28 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         }
 
         // for each odd path segment, get the collection
-        const parentCollectionIds = result.map(r => getCollectionFromPaths(r)?.id).filter(Boolean) as string[];
-
-        getCollectionFromPaths(oddPathSegments);
-
-        // const allParentCollectionsForPath = getAllParentReferencesForPath(path);
-        // console.log("allParentCollectionsForPath", allParentCollectionsForPath);
-        // const parentCollectionIds = allParentCollectionsForPath.map(r => r.id);
-        console.log("getParentCollectionIds", path, parentCollectionIds);
-        return parentCollectionIds;
+        return result.map(r => getCollectionFromPaths(r)?.id).filter(Boolean) as string[];
     }, [getAllParentReferencesForPath])
 
     const convertIdsToPaths = useCallback((ids: string[]): string[] => {
-            let currentCollections = collections;
-            const paths: string[] = [];
-            for (let i = 0; i < ids.length; i++) {
-                const id = ids[i];
-                const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
-                if (!collection)
-                    throw Error(`Collection with id ${id} not found`);
-                paths.push(collection.path);
-                currentCollections = collection.subcollections;
-            }
-            return paths;
+        const collections = collectionsRef.current;
+        let currentCollections = collections;
+        const paths: string[] = [];
+        for (let i = 0; i < ids.length; i++) {
+            const id = ids[i];
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
+            if (!collection)
+                throw Error(`Collection with id ${id} not found`);
+            paths.push(collection.path);
+            currentCollections = collection.subcollections;
         }
-        , [getCollectionFromIds]);
+        return paths;
+    }, [getCollectionFromIds]);
 
     return {
-        collections,
-        views,
+        collections: collectionsRef.current,
+        views: viewsRef.current,
+        adminViews: adminViewsRef.current,
         loading: !initialised || navigationLoading,
         navigationLoadingError,
         homeUrl,
@@ -321,7 +370,6 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         buildCMSUrlPath,
         resolveAliasesFrom,
         topLevelNavigation,
-        baseLocation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
@@ -346,8 +394,8 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
     return resolvedCollections
         .filter((c) => {
             if (!c.permissions) return true;
-            const resolvedPermissions = resolvePermissions(c, authController, [c.path], null,)
-            return resolvedPermissions.read !== false;
+            const resolvedPermissions = resolvePermissions(c, authController, c.path, null)
+            return resolvedPermissions?.read !== false;
         })
         .map((c) => {
             if (!c.subcollections) return c;
@@ -359,6 +407,7 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
 }
 
 async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
+                                  collectionPermissions: PermissionsBuilder | undefined,
                                   authController: AuthController,
                                   dataSource: DataSourceDelegate,
                                   injectCollections?: (collections: EntityCollection[]) => EntityCollection[]) {
@@ -373,6 +422,8 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
         resolvedCollections = collections;
     }
 
+    resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
+
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
 
     if (injectCollections) {
@@ -395,3 +446,11 @@ async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefine
     }
     return resolvedViews;
 }
+
+function getGroup(collectionOrView: EntityCollection<any, any> | CMSView) {
+    const trimmed = collectionOrView.group?.trim();
+    if (!trimmed || trimmed === "") {
+        return "Views";
+    }
+    return trimmed ?? "Views";
+}

package/src/hooks/useProjectLog.tsx

@@ -1,10 +1,15 @@
-import { useEffect, useRef } from "react";
-import { AuthController } from "../types";
+import { useEffect, useRef, useState } from "react";
+import { AuthController, FireCMSPlugin } from "../types";
 
 export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
 export const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
 
-async function makeRequest(authController: AuthController) {
+export type AccessResponse = {
+    blocked?: boolean;
+    message?: string;
+}
+
+async function makeRequest(authController: AuthController, pluginKeys: string | undefined) {
     const firebaseToken = await authController.getAuthToken();
     return fetch(DEFAULT_SERVER + "/access_log",
         {
@@ -14,18 +19,23 @@ async function makeRequest(authController: AuthController) {
                 "Content-Type": "application/json",
                 Authorization: `Basic ${firebaseToken}`,
             },
-            body: JSON.stringify({})
+            body: JSON.stringify({ plugins: pluginKeys })
         })
         .then(async (res) => {
+            return res.json();
         });
 }
 
-export function useProjectLog(authController: AuthController) {
+export function useProjectLog(authController: AuthController,
+                              plugins?: FireCMSPlugin<any, any, any>[]): AccessResponse | null {
+    const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
+    const pluginKeys = plugins?.map(plugin => plugin.key).join(",");
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController);
+            makeRequest(authController, pluginKeys).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
     }, [authController]);
+    return accessResponse;
 }

package/src/hooks/useReferenceDialog.tsx

@@ -1,5 +1,5 @@
 import { useSideDialogsController } from "./useSideDialogsController";
-import { ReferenceSelectionTable, ReferenceSelectionInnerProps } from "../components";
+import { ReferenceSelectionInnerProps, ReferenceSelectionTable } from "../components";
 import { useCallback } from "react";
 import { useNavigationController } from "./useNavigationController";
 
@@ -27,7 +27,7 @@ export function useReferenceDialog<M extends Record<string, any>>(referenceDialo
             if (!usedCollection)
                 usedCollection = navigation.getCollection(referenceDialogProps.path);
             if (!usedCollection)
-                throw Error("Not able to resolve the collection in useReferenceDialog");
+                throw Error("Not able to resolve the collection in useReferenceDialog. Make sure a collection is registered in path " + referenceDialogProps.path);
             sideDialogsController.open({
                 key: `reference_${referenceDialogProps.path}`,
                 component:

package/src/hooks/useStorageSource.tsx

@@ -1,4 +1,4 @@
-import { StorageSource } from "../types";
+import { EntityCollection, StorageSource } from "../types";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
 import { useContext } from "react";
 
@@ -6,4 +6,9 @@ import { useContext } from "react";
  * Use this hook to get the storage source being used
  * @group Hooks and utilities
  */
-export const useStorageSource = (): StorageSource => useContext(StorageSourceContext);
+export const useStorageSource = (collection?: EntityCollection): StorageSource => {
+    const defaultStorageSource = useContext(StorageSourceContext);
+    if (collection?.overrides?.storageSource)
+        return collection.overrides.storageSource;
+    return defaultStorageSource;
+};

package/src/hooks/useValidateAuthenticator.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare";
+
+import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+
+/**
+ * This hook is used internally for validating an authenticator.
+ *
+ * @param authController
+ * @param authentication
+ * @param getAppCheckToken
+ * @param appCheckForceRefresh
+ * @param storageSource
+ * @param dataSource
+ */
+export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
+                                                                           disabled,
+                                                                           authController,
+                                                                           authentication,
+                                                                           getAppCheckToken,
+                                                                           appCheckForceRefresh = false,
+                                                                           storageSource,
+                                                                           dataSourceDelegate
+                                                                       }:
+                                                                           {
+                                                                               disabled?: boolean,
+                                                                               authController: Controller,
+                                                                               authentication?: boolean | Authenticator<UserType, Controller>,
+                                                                               getAppCheckToken?: (forceRefresh: boolean) => Promise<AppCheckTokenResult> | undefined,
+                                                                               appCheckForceRefresh?: boolean,
+                                                                               dataSourceDelegate: DataSourceDelegate;
+                                                                               storageSource: StorageSource;
+                                                                           }): {
+    canAccessMainView: boolean,
+    authLoading: boolean,
+    notAllowedError: any,
+    authVerified: boolean,
+} {
+
+    const authenticationEnabled = Boolean(authentication);
+
+    const [authLoading, setAuthLoading] = useState<boolean>(authenticationEnabled);
+    const [notAllowedError, setNotAllowedError] = useState<any>(false);
+    const [authVerified, setAuthVerified] = useState<boolean>(!authenticationEnabled || Boolean(authController.loginSkipped));
+
+    const canAccessMainView = (authVerified) &&
+        (!authenticationEnabled || Boolean(authController.user) || Boolean(authController.loginSkipped)) &&
+        !notAllowedError;
+
+    useEffect(() => {
+        if (authController.loginSkipped)
+            setAuthVerified(true);
+    }, [authController.loginSkipped]);
+
+    /**
+     * We use this ref to check the authentication only if the user has
+     * changed.
+     */
+    const checkedUserRef = useRef<User | undefined>();
+
+    const checkAuthentication = useCallback(async () => {
+
+        if (disabled) {
+            return;
+        }
+
+        if (authController.initialLoading) {
+            return;
+        }
+
+        if (!authController.user && !authController.loginSkipped) {
+            checkedUserRef.current = undefined;
+            setAuthLoading(false);
+            setAuthVerified(false);
+            return;
+        }
+
+        const delegateUser = authController.user;
+        console.debug("Checking authentication for user", delegateUser);
+
+        if (getAppCheckToken) {
+            try {
+                if (!await getAppCheckToken(appCheckForceRefresh)) {
+                    setNotAllowedError("App Check failed.");
+                    authController.signOut();
+                } else {
+                    console.debug("App Check success.");
+                }
+            } catch (e: any) {
+                setNotAllowedError(e.message);
+                authController.signOut();
+            }
+        }
+
+        if (authentication instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
+            setAuthLoading(true);
+            try {
+                const allowed = await authentication({
+                    user: delegateUser,
+                    authController,
+                    dataSourceDelegate,
+                    storageSource
+                });
+                if (!allowed) {
+                    authController.signOut();
+                    setNotAllowedError(true);
+                }
+            } catch (e) {
+                setNotAllowedError(e);
+                authController.signOut();
+            }
+            setAuthLoading(false);
+            setAuthVerified(true);
+            checkedUserRef.current = delegateUser;
+        } else {
+            setAuthLoading(false);
+        }
+
+        if (!authController.initialLoading && !delegateUser) {
+            setAuthVerified(true);
+        }
+
+    }, [disabled, authController, authentication, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+
+    useEffect(() => {
+        checkAuthentication();
+    }, [checkAuthentication]);
+
+    return {
+        canAccessMainView,
+        authLoading: authenticationEnabled && authLoading,
+        notAllowedError,
+        authVerified
+    }
+}

package/src/internal/useBuildDataSource.ts

@@ -330,6 +330,10 @@ export function useBuildDataSource({
  * bindings.
  * Also, Firestore references are replaced with {@link EntityReference}
  * @param data
+ * @param buildReference
+ * @param buildGeoPoint
+ * @param buildDate
+ * @param buildDelete
  * @group Firestore
  */
 export function cmsToDelegateModel(data: any,
@@ -340,9 +344,11 @@ export function cmsToDelegateModel(data: any,
 ): any {
     if (data === undefined) {
         return buildDelete();
+    } else if (data === null) {
+        return null;
     } else if (Array.isArray(data)) {
         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-    } else if (data instanceof EntityReference) {
+    } else if (data.isEntityReference && data.isEntityReference()) {
         return buildReference(data);
     } else if (data instanceof GeoPoint) {
         return buildGeoPoint(data);
@@ -355,4 +361,3 @@ export function cmsToDelegateModel(data: any,
     }
     return data;
 }
-

package/src/preview/PropertyPreview.tsx

@@ -178,7 +178,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         }
     } else if (property.dataType === "reference") {
         if (typeof property.path === "string") {
-            if (value instanceof EntityReference) {
+            if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
                 content = <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
@@ -195,7 +195,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
 
     } else if (property.dataType === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value}/>;
+            content = <BooleanPreview value={value} size={size} property={property}/>;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }

package/src/preview/PropertyPreviewProps.tsx

@@ -8,7 +8,7 @@ export type PreviewSize = "medium" | "small" | "tiny";
 /**
  * @group Preview components
  */
-export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any> {
     /**
      * Name of the property
      */
@@ -24,11 +24,6 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     property: Property<T> | ResolvedProperty<T>;
 
-    /**
-     * Click handler
-     */
-    // onClick?: () => void;
-
     /**
      * Desired size of the preview, depending on the context.
      */
@@ -51,9 +46,4 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
-    /**
-     * Entity this property refers to
-     */
-    // entity?: Entity<M>;
-
 }