@firecms/core 3.0.0 → 3.1.0-canary.02232f4

package/src/preview/PropertyPreview.tsx

@@ -11,6 +11,7 @@ import {
 } from "../types";
 
 import { resolveProperty } from "../util";
+import { jsonStringifyReplacer } from "../util/objects";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
 import { useAuthController, useCustomizationController } from "../hooks";
@@ -49,7 +50,8 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        interactive
+        interactive,
+        fill
     } = props;
 
     const property = resolveProperty({
@@ -60,7 +62,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     });
 
     if (property === null) {
-        content = <EmptyValue/>;
+        content = <EmptyValue />;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
             {
@@ -74,7 +76,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 customProps: property.customProps
             });
     } else if (value === undefined || value === null) {
-        content = <EmptyValue/>;
+        content = <EmptyValue />;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
         if (typeof value === "string") {
@@ -84,20 +86,23 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     interactive={interactive}
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
-                    storagePathOrDownloadUrl={filePath}/>;
+                    fill={fill}
+                    storagePathOrDownloadUrl={filePath} />;
             } else if (stringProperty.url) {
                 if (typeof stringProperty.url === "boolean")
                     content =
                         <UrlComponentPreview size={props.size}
-                                             url={value}/>;
+                            url={value}
+                            fill={fill} />;
                 else if (typeof stringProperty.url === "string")
                     content =
                         <UrlComponentPreview size={props.size}
-                                             url={value}
-                                             interactive={interactive}
-                                             previewType={stringProperty.url}/>;
+                            url={value}
+                            interactive={interactive}
+                            fill={fill}
+                            previewType={stringProperty.url} />;
             } else if (stringProperty.markdown) {
-                content = <Markdown source={value} size={"small"}/>;
+                content = <Markdown source={value} size={"small"} />;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
                     value={value}
@@ -116,13 +121,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                         reference={new EntityReference(value, stringProperty.reference.path)}
                     />;
                 } else {
-                    content = <EmptyValue/>;
+                    content = <EmptyValue />;
                 }
 
             } else {
                 content = <StringPropertyPreview {...props}
-                                                 property={stringProperty}
-                                                 value={value}/>;
+                    property={stringProperty}
+                    value={value} />;
             }
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
@@ -137,43 +142,43 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
             if (arrayProperty.of) {
                 if (Array.isArray(arrayProperty.of)) {
                     content = <ArrayPropertyPreview {...props}
-                                                    value={value}
-                                                    property={property as ResolvedArrayProperty}/>;
+                        value={value}
+                        property={property as ResolvedArrayProperty} />;
                 } else if (arrayProperty.of.dataType === "reference") {
                     content = <ArrayOfReferencesPreview {...props}
-                                                        value={value}
-                                                        property={property as ResolvedArrayProperty}/>;
+                        value={value}
+                        property={property as ResolvedArrayProperty} />;
                 } else if (arrayProperty.of.dataType === "string") {
                     if (arrayProperty.of.enumValues) {
                         content = <ArrayPropertyEnumPreview
                             {...props}
                             value={value as string[]}
-                            property={property as ResolvedArrayProperty}/>;
+                            property={property as ResolvedArrayProperty} />;
                     } else if (arrayProperty.of.storage) {
                         content = <ArrayOfStorageComponentsPreview
                             {...props}
                             value={value}
-                            property={property as ResolvedArrayProperty}/>;
+                            property={property as ResolvedArrayProperty} />;
                     } else {
                         content = <ArrayOfStringsPreview
                             {...props}
                             value={value as string[]}
-                            property={property as ResolvedArrayProperty}/>;
+                            property={property as ResolvedArrayProperty} />;
                     }
                 } else if (arrayProperty.of.dataType === "number" && arrayProperty.of.enumValues) {
                     content = <ArrayPropertyEnumPreview
                         {...props}
                         value={value as string[]}
-                        property={property as ResolvedArrayProperty}/>;
+                        property={property as ResolvedArrayProperty} />;
                 } else {
                     content = <ArrayPropertyPreview {...props}
-                                                    value={value}
-                                                    property={property as ResolvedArrayProperty}/>;
+                        value={value}
+                        property={property as ResolvedArrayProperty} />;
                 }
             } else if (arrayProperty.oneOf) {
                 content = <ArrayOneOfPreview {...props}
-                                             value={value}
-                                             property={property as ResolvedArrayProperty}/>;
+                    value={value}
+                    property={property as ResolvedArrayProperty} />;
             }
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
@@ -182,13 +187,18 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         if (typeof value === "object") {
             content =
                 <MapPropertyPreview {...props}
-                                    property={property as ResolvedMapProperty}/>;
+                    value={value as Record<string, CMSType>}
+                    property={property as ResolvedMapProperty} />;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
     } else if (property.dataType === "date") {
         if (value instanceof Date) {
-            content = <DatePreview date={value}/>;
+            content = <DatePreview
+                date={value}
+                mode={property.mode}
+                timezone={property.timezone}
+            />;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
@@ -207,29 +217,29 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 content = buildWrongValueType(propertyKey, property.dataType, value);
             }
         } else {
-            content = <EmptyValue/>;
+            content = <EmptyValue />;
         }
 
     } else if (property.dataType === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value} size={size} property={property}/>;
+            content = <BooleanPreview value={value} size={size} property={property} />;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
     } else if (property.dataType === "number") {
         if (typeof value === "number") {
             content = <NumberPropertyPreview {...props}
-                                             value={value}
-                                             property={property as ResolvedNumberProperty}/>;
+                value={value}
+                property={property as ResolvedNumberProperty} />;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
     } else {
-        content = JSON.stringify(value);
+        content = JSON.stringify(value, jsonStringifyReplacer);
     }
 
     return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
-        ? <EmptyValue/>
+        ? <EmptyValue />
         : content;
 }, equal);
 
@@ -237,6 +247,6 @@ function buildWrongValueType(name: string | undefined, dataType: string, value:
     console.warn(`Unexpected value for property ${name}, of type ${dataType}`, value);
     return (
         <ErrorView title={"Unexpected value"}
-                   error={`${JSON.stringify(value)}`}/>
+            error={`${JSON.stringify(value, jsonStringifyReplacer)}`} />
     );
 }

package/src/preview/PropertyPreviewProps.tsx

@@ -52,4 +52,10 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     interactive?: boolean;
 
+    /**
+     * If true, image previews will fill their container completely.
+     * Only applies to image type properties.
+     */
+    fill?: boolean;
+
 }

package/src/preview/components/DatePreview.tsx

@@ -5,18 +5,86 @@ import * as locales from "date-fns/locale";
 import { useCustomizationController } from "../../hooks";
 import { defaultDateFormat } from "../../util";
 
+export interface DatePreviewProps {
+    date: Date;
+    /**
+     * Display mode: "date" for date-only, "date_time" for date and time
+     */
+    mode?: "date" | "date_time";
+    /**
+     * IANA timezone identifier (e.g., "America/New_York")
+     * When specified, the date will be displayed in this timezone
+     */
+    timezone?: string;
+}
+
 /**
  * @group Preview components
  */
 export function DatePreview({
-                                date
-                            }: { date: Date }): React.ReactElement {
+    date,
+    mode = "date_time",
+    timezone
+}: DatePreviewProps): React.ReactElement {
 
     const customizationController = useCustomizationController();
     // @ts-ignore
     const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale] : undefined;
-    const dateFormat: string = customizationController?.dateTimeFormat ?? defaultDateFormat;
-    const formattedDate = date ? format(date, dateFormat, { locale: dateUtilsLocale }) : "";
+
+    if (!date) {
+        return <></>;
+    }
+
+    // If timezone is specified, format in that timezone using Intl.DateTimeFormat
+    if (timezone) {
+        const options: Intl.DateTimeFormatOptions = {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            timeZone: timezone
+        };
+
+        if (mode === "date_time") {
+            options.hour = "2-digit";
+            options.minute = "2-digit";
+        }
+
+        const formatter = new Intl.DateTimeFormat(customizationController?.locale ?? "en-US", options);
+        const formattedDate = formatter.format(date);
+
+        // Get timezone abbreviation
+        const tzFormatter = new Intl.DateTimeFormat("en-US", {
+            timeZone: timezone,
+            timeZoneName: "short"
+        });
+        const parts = tzFormatter.formatToParts(date);
+        const tzAbbrev = parts.find(p => p.type === "timeZoneName")?.value ?? "";
+
+        return (
+            <span className="flex items-center gap-1">
+                {formattedDate}
+                {tzAbbrev && (
+                    <span className="text-xs text-slate-500 dark:text-slate-400">
+                        ({tzAbbrev})
+                    </span>
+                )}
+            </span>
+        );
+    }
+
+    // No timezone specified: use local formatting with date-fns
+    let dateFormat: string;
+    if (mode === "date") {
+        // Date-only format (no time)
+        dateFormat = customizationController?.dateTimeFormat
+            ? customizationController.dateTimeFormat.replace(/[, ]*[HhKk].*$/, "").trim()
+            : "PP"; // e.g., "Apr 29, 2024"
+    } else {
+        // Full date-time format
+        dateFormat = customizationController?.dateTimeFormat ?? defaultDateFormat;
+    }
+
+    const formattedDate = format(date, dateFormat, { locale: dateUtilsLocale });
 
     return (
         <>

package/src/preview/components/EmptyValue.tsx

@@ -6,5 +6,5 @@ import React from "react";
 export function EmptyValue() {
 
     return <div
-        className="rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
+        className="rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block"/>;
 }

package/src/preview/components/ImagePreview.tsx

@@ -9,39 +9,55 @@ import { ContentCopyIcon, IconButton, OpenInNewIcon, Tooltip } from "@firecms/ui
  */
 export interface ImagePreviewProps {
     size: PreviewSize,
-    url: string
+    url: string,
+    /**
+     * If true, image fills its container completely with object-fit cover
+     */
+    fill?: boolean
 }
 
 /**
  * @group Preview components
  */
 export function ImagePreview({
-                                 size,
-                                 url
-                             }: ImagePreviewProps) {
+    size,
+    url,
+    fill
+}: ImagePreviewProps) {
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
+    // Fill mode - image fills its container completely
+    if (fill) {
+        return (
+            <img src={url}
+                className={"w-full h-full object-cover"}
+                key={"fill_image_preview_" + url}
+                loading="lazy"
+            />
+        );
+    }
+
     if (size === "small") {
         return (
             <img src={url}
-                 className={"rounded-md"}
-                 key={"tiny_image_preview_" + url}
-                 style={{
-                     position: "relative",
-                     objectFit: "cover",
-                     width: imageSize,
-                     height: imageSize,
-                     maxHeight: "100%"
-                 }}/>
+                className={"rounded-md"}
+                key={"tiny_image_preview_" + url}
+                style={{
+                    position: "relative",
+                    objectFit: "cover",
+                    width: imageSize,
+                    height: imageSize,
+                    maxHeight: "100%"
+                }} />
         );
     }
 
     const imageStyle: CSSProperties =
-        {
-            maxWidth: "100%",
-            maxHeight: "100%"
-        };
+    {
+        maxWidth: "100%",
+        maxHeight: "100%"
+    };
 
     return (
         <div
@@ -53,8 +69,8 @@ export function ImagePreview({
             key={"image_preview_" + url}>
 
             <img src={url}
-                 className={"rounded-md"}
-                 style={imageStyle}/>
+                className={"rounded-md"}
+                style={imageStyle} />
 
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
                 {navigator && <Tooltip
@@ -69,7 +85,7 @@ export function ImagePreview({
                             return navigator.clipboard.writeText(url);
                         }}>
                         <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
-                                         size={"smallest"}/>
+                            size={"smallest"} />
                     </IconButton>
                 </Tooltip>}
 
@@ -85,7 +101,7 @@ export function ImagePreview({
                         onClick={(e: any) => e.stopPropagation()}
                     >
                         <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
-                                       size={"smallest"}/>
+                            size={"smallest"} />
                     </IconButton>
                 </Tooltip>
             </div>

package/src/preview/components/ReferencePreview.tsx

@@ -6,6 +6,7 @@ import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
 import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
+import { jsonStringifyReplacer } from "../../util/objects";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -29,7 +30,7 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
             onClick={props.onClick}
             size={props.size ?? "medium"}>
             <ErrorView error={"Unexpected value. Click to edit"}
-                       tooltip={JSON.stringify(reference)}/>
+                       tooltip={JSON.stringify(reference, jsonStringifyReplacer)}/>
         </EntityPreviewContainer>;
     }
     return <ErrorBoundary>
@@ -57,7 +58,12 @@ function ReferencePreviewInternal({
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
         } else {
-            throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+            return <EntityPreviewContainer
+                onClick={onClick}
+                size={size ?? "medium"}>
+                <ErrorView error={"Unexpected reference value. Click to edit"}
+                           tooltip={reference.pathWithId}/>
+            </EntityPreviewContainer>;
         }
     }
 

package/src/preview/components/StorageThumbnail.tsx

@@ -12,6 +12,7 @@ type StorageThumbnailProps = {
     storeUrl: boolean;
     size: PreviewSize;
     interactive?: boolean;
+    fill?: boolean;
 };
 
 /**
@@ -22,18 +23,20 @@ export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbna
 function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
     return prevProps.size === nextProps.size &&
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl&&
-        prevProps.interactive === nextProps.interactive;
+        prevProps.storeUrl === nextProps.storeUrl &&
+        prevProps.interactive === nextProps.interactive &&
+        prevProps.fill === nextProps.fill;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
-                                             storeUrl,
-                                             interactive,
-                                             storagePathOrDownloadUrl,
-                                             size
-                                         }: StorageThumbnailProps) {
+    storeUrl,
+    interactive,
+    storagePathOrDownloadUrl,
+    size,
+    fill
+}: StorageThumbnailProps) {
 
     const [error, setError] = React.useState<Error | undefined>(undefined);
     const storage = useStorageSource();
@@ -70,11 +73,12 @@ export function StorageThumbnailInternal({
 
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
-                               url={downloadConfig.url}
-                               interactive={interactive}
-                               size={size}
-                               hint={storagePathOrDownloadUrl}/>
-        : renderSkeletonImageThumbnail(size);
+            url={downloadConfig.url}
+            interactive={interactive}
+            size={size}
+            fill={fill}
+            hint={storagePathOrDownloadUrl} />
+        : renderSkeletonImageThumbnail(size, fill);
 }
 
 function getFiletype(input: string): FileType {

package/src/preview/components/UrlComponentPreview.tsx

@@ -6,36 +6,41 @@ import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * @group Preview components
  */
 export function UrlComponentPreview({
-                                        url,
-                                        previewType,
-                                        size,
-                                        hint,
-                                        interactive = true
-                                    }: {
+    url,
+    previewType,
+    size,
+    hint,
+    interactive = true,
+    fill
+}: {
     url: string,
     previewType?: PreviewType,
     size: PreviewSize,
     hint?: string,
     // for video controls
-    interactive?: boolean
+    interactive?: boolean,
+    fill?: boolean
 }): React.ReactElement {
 
+    const { t } = useTranslation();
+
     if (!previewType) {
-        if (!url || !url.trim()) return <EmptyValue/>;
+        if (!url || !url.trim()) return <EmptyValue />;
         return (
             <a className="flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary"
-               href={url}
-               rel="noopener noreferrer"
-               onMouseDown={(e: React.MouseEvent) => {
-                   e.preventDefault();
-               }}
-               target="_blank">
-                <OpenInNewIcon size={"small"}/>
+                href={url}
+                rel="noopener noreferrer"
+                onMouseDown={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                }}
+                target="_blank">
+                <OpenInNewIcon size={"small"} />
                 {url}
             </a>
         );
@@ -43,16 +48,16 @@ export function UrlComponentPreview({
 
     if (previewType === "image") {
         return <ImagePreview url={url}
-                             size={size}/>;
+            size={size}
+            fill={fill} />;
     } else if (previewType === "audio") {
         return <audio controls
-                      className={"max-w-100%"}
-                      src={url}>
-            Your browser does not support the
-            <code>audio</code> element.
+            className={"max-w-100%"}
+            src={url}>
+            {t("browser_does_not_support_audio")}
         </audio>;
     } else if (previewType === "video") {
-        return <VideoPreview size={size} src={url} interactive={interactive}/>;
+        return <VideoPreview size={size} src={url} interactive={interactive} />;
     } else {
         return (
             <Tooltip title={hint}>
@@ -66,7 +71,7 @@ export function UrlComponentPreview({
                         width: getThumbnailMeasure(size),
                         height: getThumbnailMeasure(size)
                     }}>
-                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300" />
                     {hint && <Typography
                         className="max-w-full truncate rtl text-left"
                         variant={"caption"}>{hint}</Typography>}
@@ -77,10 +82,10 @@ export function UrlComponentPreview({
 }
 
 function VideoPreview({
-                          size,
-                          src,
-                          interactive
-                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+    size,
+    src,
+    interactive
+}: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
         if (size === "small")
@@ -106,6 +111,6 @@ function VideoPreview({
         }}
         {...videoProps}
         className={cls("max-w-100% rounded", { "pointer-events-none": !interactive })}>
-        <source src={src}/>
+        <source src={src} />
     </video>;
 }

package/src/preview/components/UserPreview.tsx

@@ -4,6 +4,7 @@ import { useInternalUserManagementController } from "../../hooks";
 import { UserDisplay } from "../../components/UserDisplay";
 import { EmptyValue } from "./EmptyValue";
 import { Typography } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Preview component for displaying user information.
@@ -13,6 +14,7 @@ import { Typography } from "@firecms/ui";
  */
 export function UserPreview({ value }: PropertyPreviewProps<string>) {
     const { getUser } = useInternalUserManagementController();
+    const { t } = useTranslation();
 
     if (!value) {
         return <EmptyValue/>;
@@ -20,7 +22,7 @@ export function UserPreview({ value }: PropertyPreviewProps<string>) {
 
     const user = getUser(value);
     if (!user) {
-        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+        return <Typography variant={"caption"} color={"secondary"}>{t("user_not_found", { value })}</Typography>;
     }
 
     return <UserDisplay user={user}/>;