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

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -12,12 +12,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayOfStorageComponentsPreview({
-                                                    propertyKey,
-                                                    // entity,
-                                                    value,
-                                                    property: inputProperty,
-                                                    size
-                                                }: PropertyPreviewProps<any[]>) {
+    propertyKey,
+    // entity,
+    value,
+    property: inputProperty,
+    size
+}: PropertyPreviewProps<any[]>) {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -28,6 +28,8 @@ export function ArrayOfStorageComponentsPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (Array.isArray(property.of)) {
         throw Error("Using array properties instead of single one in `of` in ArrayProperty");
     }
@@ -47,7 +49,7 @@ export function ArrayOfStorageComponentsPreview({
                             value={v}
                             // entity={entity}
                             property={property.of as ResolvedProperty<string>}
-                            size={childSize}/>
+                            size={childSize} />
                     </ErrorBoundary>
                 )}
         </div>

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -10,12 +10,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayOfStringsPreview({
-                                          propertyKey,
-                                          value,
-                                          property: inputProperty,
-                                          // entity,
-                                          size
-                                      }: PropertyPreviewProps<string[]>) {
+    propertyKey,
+    value,
+    property: inputProperty,
+    // entity,
+    size
+}: PropertyPreviewProps<string[]>) {
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
@@ -25,6 +25,8 @@ export function ArrayOfStringsPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (Array.isArray(property.of)) {
         throw Error("Using array properties instead of single one in `of` in ArrayProperty");
     }
@@ -43,10 +45,10 @@ export function ArrayOfStringsPreview({
                     <div key={`preview_array_strings_${propertyKey}_${index}`}>
                         <ErrorBoundary>
                             <StringPropertyPreview propertyKey={propertyKey}
-                                                   property={stringProperty}
-                                                   value={v}
+                                property={stringProperty}
+                                value={v}
                                 // entity={entity}
-                                                   size={size}/>
+                                size={size} />
                         </ErrorBoundary>
                     </div>
                 )}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -12,12 +12,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayPropertyPreview({
-                                         propertyKey,
-                                         value,
-                                         property: inputProperty,
-                                         // entity,
-                                         size
-                                     }: PropertyPreviewProps<any[]>) {
+    propertyKey,
+    value,
+    property: inputProperty,
+    // entity,
+    size
+}: PropertyPreviewProps<any[]>) {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -28,6 +28,8 @@ export function ArrayPropertyPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (!property.of) {
         throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
     }
@@ -45,24 +47,24 @@ export function ArrayPropertyPreview({
         <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
-                        const of: ResolvedProperty = property.resolvedProperties[index] ??
-                            (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
-                        return of
-                            ? <React.Fragment
-                                key={"preview_array_" + index}>
-                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
-                                    <ErrorBoundary>
-                                        <PropertyPreview
-                                            propertyKey={propertyKey}
-                                            // entity={entity}
-                                            value={value}
-                                            property={of}
-                                            size={childSize}/>
-                                    </ErrorBoundary>
-                                </div>
-                            </React.Fragment>
-                            : null;
-                    }
+                    const of: ResolvedProperty = property.resolvedProperties[index] ??
+                        (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
+                    return of
+                        ? <React.Fragment
+                            key={"preview_array_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        // entity={entity}
+                                        value={value}
+                                        property={of}
+                                        size={childSize} />
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                        : null;
+                }
                 )}
         </div>
     );

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -6,6 +6,7 @@ import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
+import { DatePreview } from "../components/DatePreview";
 
 /**
  * @group Preview components
@@ -111,37 +112,58 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]: [string, any]) => (
-                <div
-                    key={`map_preview_table_${key}}`}
-                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+            Object.entries(value).map(([key, childValue]: [string, any]) => {
+                const isTimestampObj = childValue && typeof childValue === "object" && (
+                    childValue instanceof Date ||
+                    ("_seconds" in childValue && "_nanoseconds" in childValue && typeof childValue._seconds === "number" && typeof childValue._nanoseconds === "number") ||
+                    ("seconds" in childValue && "nanoseconds" in childValue && typeof childValue.seconds === "number" && typeof childValue.nanoseconds === "number")
+                );
+
+                const isScalar = childValue && (typeof childValue !== "object" || isTimestampObj);
+
+                return (
                     <div
-                        className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
-                        <div
-                            key={`table-cell-title-${key}-${key}`}
-                            className="min-w-[140px] w-[25%] py-1">
-                            <Typography variant={"caption"}
-                                        className={"font-semibold break-words"}
-                                        color={"secondary"}>
-                                {key}
-                            </Typography>
-                        </div>
+                        key={`map_preview_table_${key}}`}
+                        className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                         <div
-                            className="flex-grow max-w-[75%]">
-                            {childValue && typeof childValue !== "object" && <Typography>
-                                <ErrorBoundary>
-                                    {childValue.toString()}
-                                </ErrorBoundary>
-                            </Typography>}
+                            className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                            <div
+                                key={`table-cell-title-${key}-${key}`}
+                                className="min-w-[140px] w-[25%] py-1">
+                                <Typography variant={"caption"}
+                                            className={"font-semibold break-words"}
+                                            color={"secondary"}>
+                                    {key}
+                                </Typography>
+                            </div>
+                            <div
+                                className="flex-grow max-w-[75%]">
+                                {isScalar && (isTimestampObj ? (
+                                    <ErrorBoundary>
+                                        <DatePreview date={
+                                            childValue instanceof Date ? childValue :
+                                            typeof childValue.toDate === "function" ? childValue.toDate() :
+                                            "_seconds" in childValue ? new Date(childValue._seconds * 1000 + childValue._nanoseconds / 1000000) :
+                                            new Date(childValue.seconds * 1000 + childValue.nanoseconds / 1000000)
+                                        } />
+                                    </ErrorBoundary>
+                                ) : (
+                                    <Typography>
+                                        <ErrorBoundary>
+                                            {childValue.toString()}
+                                        </ErrorBoundary>
+                                    </Typography>
+                                ))}
+                            </div>
                         </div>
+                        {typeof childValue === "object" && !isTimestampObj &&
+                            <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                                <KeyValuePreview value={childValue}/>
+                            </div>
+                        }
                     </div>
-                    {typeof childValue === "object" &&
-                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
-                            <KeyValuePreview value={childValue}/>
-                        </div>
-                    }
-                </div>
-            ))
+                );
+            })
         }
     </div>;
 }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -19,9 +19,9 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export function SkeletonPropertyComponent({
-                                              property,
-                                              size
-                                          }: SkeletonPropertyComponentProps
+    property,
+    size
+}: SkeletonPropertyComponentProps
 ) {
 
     if (!property) {
@@ -101,7 +101,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                         {property.properties && property.properties[key] &&
                             <SkeletonPropertyComponent
                                 property={property.properties[key]}
-                                size={"medium"}/>}
+                                size={"medium"} />}
                     </div>
                 ))}
             </div>
@@ -110,29 +110,29 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
     return (
         <table className="table-auto">
             <tbody>
-            {mapPropertyKeys &&
-                mapPropertyKeys.map((key, index) => {
-                    return (
-                        <tr
-                            key={`map_preview_table__${index}`}
-                            className="border-b last:border-b-0">
-                            <th key={`table-cell-title--${key}`}
-                                className="align-top"
-                                style={{ width: "30%" }}>
-                                <p className="text-xs text-secondary">
-                                    {property.properties![key].name}
-                                </p>
-                            </th>
-                            <th key={`table-cell-${key}`}
-                                style={{ width: "70%" }}>
-                                {property.properties && property.properties[key] &&
-                                    <SkeletonPropertyComponent
-                                        property={property.properties[key]}
-                                        size={"medium"}/>}
-                            </th>
-                        </tr>
-                    );
-                })}
+                {mapPropertyKeys &&
+                    mapPropertyKeys.map((key, index) => {
+                        return (
+                            <tr
+                                key={`map_preview_table__${index}`}
+                                className="border-b last:border-b-0">
+                                <th key={`table-cell-title--${key}`}
+                                    className="align-top"
+                                    style={{ width: "30%" }}>
+                                    <p className="text-xs text-secondary">
+                                        {property.properties![key].name}
+                                    </p>
+                                </th>
+                                <th key={`table-cell-${key}`}
+                                    style={{ width: "70%" }}>
+                                    {property.properties && property.properties[key] &&
+                                        <SkeletonPropertyComponent
+                                            property={property.properties[key]}
+                                            size={"medium"} />}
+                                </th>
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -149,24 +149,24 @@ function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedPr
     return (
         <table className="table-auto">
             <tbody>
-            {
-                [0, 1, 2].map((value, index) => {
-                    return (
-                        <tr key={`table_${value}_${index}`}>
-                            {tableProperties && tableProperties.map(
-                                (key) => (
-                                    <th
-                                        key={`table-cell-${key}`}
-                                    >
-                                        <SkeletonPropertyComponent
-                                            property={(properties)[key]}
-                                            size={"medium"}/>
-                                    </th>
-                                )
-                            )}
-                        </tr>
-                    );
-                })}
+                {
+                    [0, 1, 2].map((value, index) => {
+                        return (
+                            <tr key={`table_${value}_${index}`}>
+                                {tableProperties && tableProperties.map(
+                                    (key) => (
+                                        <th
+                                            key={`table-cell-${key}`}
+                                        >
+                                            <SkeletonPropertyComponent
+                                                property={(properties)[key]}
+                                                size={"medium"} />
+                                        </th>
+                                    )
+                                )}
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -203,14 +203,14 @@ function renderGenericArrayCell(
     return (
 
         <div key={"array_index_" + index}
-             className={"flex flex-col gap-2"}>
+            className={"flex flex-col gap-2"}>
 
             {
                 [0, 1].map((value, index) =>
                     <>
                         <SkeletonPropertyComponent key={`i_${index}`}
-                                                   property={property}
-                                                   size={"medium"}/>
+                            property={property}
+                            size={"medium"} />
                     </>
                 )}
         </div>
@@ -220,16 +220,21 @@ function renderGenericArrayCell(
 function renderUrlAudioComponent() {
     return (
         <Skeleton width={300}
-                  height={100}/>
+            height={100} />
     );
 }
 
-export function renderSkeletonImageThumbnail(size: PreviewSize) {
+export function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean) {
+    if (fill) {
+        return (
+            <Skeleton className="w-full h-full" />
+        );
+    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
-                  height={imageSize}/>
+            height={imageSize} />
     );
 }
 
@@ -237,12 +242,12 @@ function renderUrlVideo(size: PreviewSize) {
 
     return (
         <Skeleton width={size !== "large" ? 300 : 500}
-                  height={size !== "large" ? 200 : 250}/>
+            height={size !== "large" ? 200 : 250} />
     );
 }
 
 function renderReference() {
-    return <Skeleton width={200} height={100}/>;
+    return <Skeleton width={200} height={100} />;
 }
 
 function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "large") {
@@ -270,14 +275,14 @@ function renderUrlFile(size: PreviewSize) {
 }
 
 export function renderSkeletonText(index?: number, width = 120) {
-    return <Skeleton width={width} key={`skeleton_${index}`}/>;
+    return <Skeleton width={width} key={`skeleton_${index}`} />;
 }
 
 export function renderSkeletonCaptionText(index?: number) {
     return <Skeleton
-        height={20}/>;
+        height={20} />;
 }
 
 export function renderSkeletonIcon() {
-    return <Skeleton width={24} height={24}/>;
+    return <Skeleton width={24} height={24} />;
 }

package/src/routes/CustomCMSRoute.tsx

@@ -13,6 +13,7 @@ export function CustomCMSRoute({ cmsView }: {
             breadcrumbs: [{
                 title: cmsView.name,
                 url: cmsView.path
+                // count: undefined (not applicable for custom views)
             }]
         });
     }, [cmsView.path]);