@firecms/core 3.0.0-canary.5 → 3.0.0-canary.51

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);
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController);
+            makeRequest(authController, pluginKeys).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController]);
+    }, [authController, pluginKeys]);
+    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,115 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare";
+
+import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+
+/**
+ * This hook is used internally for validating an authenticator.
+ *
+ * @param authController
+ * @param authentication
+ * @param storageSource
+ * @param dataSourceDelegate
+ */
+export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
+                                                                                                                                                   disabled,
+                                                                                                                                                   authController,
+                                                                                                                                                   authenticator,
+                                                                                                                                                   storageSource,
+                                                                                                                                                   dataSourceDelegate
+                                                                                                                                               }:
+                                                                                                                                                   {
+                                                                                                                                                       disabled?: boolean,
+                                                                                                                                                       authController: Controller,
+                                                                                                                                                       authenticator?: boolean | Authenticator<UserType, Controller>,
+                                                                                                                                                       dataSourceDelegate: DataSourceDelegate;
+                                                                                                                                                       storageSource: StorageSource;
+                                                                                                                                                   }): {
+    canAccessMainView: boolean,
+    authLoading: boolean,
+    notAllowedError: any,
+    authVerified: boolean,
+} {
+
+    const authenticationEnabled = Boolean(authenticator);
+
+    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 (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
+            setAuthLoading(true);
+            try {
+                const allowed = await authenticator({
+                    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, authenticator, dataSourceDelegate, storageSource]);
+
+    useEffect(() => {
+        checkAuthentication();
+    }, [checkAuthentication]);
+
+    return {
+        canAccessMainView,
+        authLoading: authenticationEnabled && authLoading,
+        notAllowedError,
+        authVerified
+    }
+}

package/src/internal/useBuildDataSource.ts

@@ -5,12 +5,10 @@ import {
     DeleteEntityProps,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityValues,
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
-    GeoPoint,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -207,13 +205,10 @@ export function useBuildDataSource({
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = cmsToDelegateModel(
+            const firestoreValues = delegate.cmsToDelegateModel(
                 values,
-                delegate.buildReference,
-                delegate.buildGeoPoint,
-                delegate.buildDate,
-                delegate.buildDeleteFieldValue
             );
+
             const updatedFirestoreValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
@@ -316,45 +311,48 @@ export function useBuildDataSource({
                     sortBy
                 }
             )
-        }, [delegate.isFilterCombinationValid])
+        }, [delegate.isFilterCombinationValid]),
 
     };
 
 }
 
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @group Firestore
- */
-export function cmsToDelegateModel(data: any,
-                                   buildReference: (reference: EntityReference) => any,
-                                   buildGeoPoint: (geoPoint: GeoPoint) => any,
-                                   buildDate: (date: Date) => any,
-                                   buildDelete: () => 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.isEntityReference && data.isEntityReference()) {
-        return buildReference(data);
-    } else if (data instanceof GeoPoint) {
-        return buildGeoPoint(data);
-    } else if (data instanceof Date) {
-        return buildDate(data);
-    } else if (data && typeof data === "object") {
-        return Object.entries(data)
-            .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-            .reduce((a, b) => ({ ...a, ...b }), {});
-    }
-    return data;
-}
-
+// /**
+//  * Recursive function that converts Firestore data types into CMS or plain
+//  * JS types.
+//  * FireCMS uses Javascript dates internally instead of Firestore timestamps.
+//  * This makes it easier to interact with the rest of the libraries and
+//  * 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,
+//                                    buildReference: (reference: EntityReference) => any,
+//                                    buildGeoPoint: (geoPoint: GeoPoint) => any,
+//                                    buildDate: (date: Date) => any,
+//                                    buildDelete: () => 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.isEntityReference && data.isEntityReference()) {
+//         return buildReference(data);
+//     } else if (data instanceof GeoPoint) {
+//         return buildGeoPoint(data);
+//     } else if (data instanceof Date) {
+//         return buildDate(data);
+//     } else if (data && typeof data === "object") {
+//         return Object.entries(data)
+//             .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
+//             .reduce((a, b) => ({ ...a, ...b }), {});
+//     }
+//     return data;
+// }

package/src/internal/useBuildSideEntityController.tsx

@@ -3,13 +3,14 @@ import {
     EntityCollection,
     EntitySidePanelProps,
     NavigationController,
+    ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
     SideEntityController
 } from "../types";
 import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
@@ -19,8 +20,66 @@ const NEW_URL_HASH = "new";
 export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
     if (small) return CONTAINER_FULL_WIDTH;
     const mainViewSelected = !props.selectedSubPath;
-    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
-    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!mainViewSelected) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.id]) {
+        return collectionViewWidthCache[collection.id];
+    }
+    const resolvedCollection = resolveCollection({
+        collection,
+        path: "__ignored"
+    });
+
+    let result = FORM_CONTAINER_WIDTH
+    if (resolvedCollection?.properties) {
+        const values = Object.values(resolvedCollection.properties).map((p: ResolvedProperty) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.id] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: number = 0): number {
+    if (property.dataType === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((property) => getNestedPropertiesDepth(property, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.dataType === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.dataType === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
@@ -34,23 +93,26 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     // only on initialisation, create panels from URL
     useEffect(() => {
         if (!navigation.loading && !initialised.current) {
+            console.debug("Initialising side entity controller");
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
-                    const panel = panelsFromUrl[i];
+                    const props = panelsFromUrl[i];
                     setTimeout(() => {
                         if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                            sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
                         else
-                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                            sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
                     }, 1);
                 }
+            } else {
+                // console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }
-    }, [location, navigation, sideDialogsController, smallLayout]);
+    }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
 
     const close = useCallback(() => {
         sideDialogsController.close();
@@ -73,9 +135,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         sideDialogsController.open(propsToSidePanel({
             selectedSubPath: defaultSelectedView,
             ...props,
-        }, navigation, smallLayout));
+        }, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [sideDialogsController, navigation, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -83,9 +145,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [navigation, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout]);
 
     return {
         close,
@@ -116,7 +178,8 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
                 sidePanels.push({
                         path: navigationEntry.path,
                         entityId: navigationEntry.entityId,
-                        copy: false
+                        copy: false,
+                        width: navigationEntry.parentCollection?.sideDialogWidth
                     }
                 );
             } else if (navigationEntry.type === "custom_view") {
@@ -146,27 +209,30 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+const propsToSidePanel = (props: EntitySidePanelProps<any>,
+                          buildUrlCollectionPath: (path: string) => string,
+                          resolveAliasesFrom: (pathWithAliases: string) => string,
+                          smallLayout: boolean): SideDialogPanelProps => {
 
         const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
         const newPath = props.entityId
-            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = resolveAliasesFrom(props.path);
 
         const resolvedPanelProps: EntitySidePanelProps<any> = {
             ...props,
-            path: resolvedPath
+            path: resolvedPath,
         };
 
-        return ({
+        return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
-            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
+            parentUrlPath: buildUrlCollectionPath(collectionPath),
             width: getEntityViewWidth(props, smallLayout),
             onClose: props.onClose
-        });
+        };
     }
 ;

package/src/preview/PropertyPreview.tsx

@@ -53,7 +53,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -92,7 +91,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     size={props.size}
                     storagePathOrDownloadUrl={value}/>;
             } else if (stringProperty.markdown) {
-                content = <Markdown source={value}/>;
+                content = <Markdown source={value} size={"small"}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}
@@ -113,17 +112,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content = <ArrayPropertyPreview {...props}
                                                     value={value}
                                                     property={property as ResolvedArrayProperty}/>;
-                }
-                    // else if (arrayProperty.of.dataType === "map") {
-                    //     content =
-                    //         <ArrayOfMapsPreview propertyKey={propertyKey}
-                    //                             property={property as ResolvedArrayProperty}
-                    //                             value={value as Record<string, any>[]} // This might be wrong
-                    //                             entity={entity}
-                    //                             size={size}
-                    //         />;
-                // }
-                else if (arrayProperty.of.dataType === "reference") {
+                } else if (arrayProperty.of.dataType === "reference") {
                     content = <ArrayOfReferencesPreview {...props}
                                                         value={value}
                                                         property={property as ResolvedArrayProperty}/>;
@@ -195,7 +184,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>;
-
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,11 +1,26 @@
 import React from "react";
-import { Checkbox } from "@firecms/ui";
+import { Checkbox, cn } from "@firecms/ui";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { Property } from "../../types";
 
 /**
  * @group Preview components
  */
-export function BooleanPreview({ value }: {
-    value: boolean
+export function BooleanPreview({
+                                   value,
+                                   size,
+                                   property
+                               }: {
+    value: boolean,
+    size: PreviewSize,
+    property: Property,
 }): React.ReactElement {
-    return <Checkbox checked={value} color={"secondary"}/>;
+    return <div className={"flex flex-row gap-2 items-center"}>
+        <Checkbox checked={value}
+                  padding={false}
+                  size={size}
+                  color={"secondary"}/>
+        {property.name && <span
+            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+    </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { Chip } from "@firecms/ui";
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "small" | "medium";
+    size: "tiny" | "small" | "medium";
     className?: string;
     children?: React.ReactNode;
 }