@firecms/core 3.0.0-canary.29 → 3.0.0-canary.292

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -13,13 +13,13 @@ export function ArrayOfReferencesPreview({
                                              property: inputProperty,
                                              size
                                          }: PropertyPreviewProps<any[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {
@@ -29,7 +29,7 @@ export function ArrayOfReferencesPreview({
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className="flex flex-col w-full">
@@ -43,6 +43,8 @@ export function ArrayOfReferencesPreview({
                                 previewProperties={ofProperty.previewProperties}
                                 size={childSize}
                                 reference={reference}
+                                includeId={ofProperty.includeId}
+                                includeEntityLink={ofProperty.includeEntityLink}
                             />
                         </div>;
                     }

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,12 +19,13 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {
@@ -34,7 +35,7 @@ export function ArrayOfStorageComponentsPreview({
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -16,13 +16,13 @@ export function ArrayOfStringsPreview({
                                           // entity,
                                           size
                                       }: PropertyPreviewProps<string[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { ErrorBoundary } from "../../components";
 
@@ -19,12 +19,13 @@ export function ArrayOneOfPreview({
                                       // entity
                                   }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (property?.dataType !== "array")
@@ -38,7 +39,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
@@ -50,7 +51,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
                             <ErrorBoundary>
                                 {value && <PropertyPreview
                                     propertyKey={propertyKey}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -19,12 +19,13 @@ export function ArrayPropertyPreview({
                                          size
                                      }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (!property.of) {
@@ -38,10 +39,10 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
-        <div className="flex flex-col gap-2">
+        <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
                         const of: ResolvedProperty = property.resolvedProperties[index] ??
@@ -49,7 +50,7 @@ export function ArrayPropertyPreview({
                         return of
                             ? <React.Fragment
                                 key={"preview_array_" + index}>
-                                <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
                                     <ErrorBoundary>
                                         <PropertyPreview
                                             propertyKey={propertyKey}

package/src/preview/property_previews/MapPropertyPreview.tsx

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

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -16,12 +16,12 @@ export function NumberPropertyPreview({
         const enumKey = value;
         const enumValues = enumToObjectEntries(property.enumValues);
         if (!enumValues)
-            return <>{value}</>;
+            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <>{value}</>;
+        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
     }
 }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

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

package/src/preview/property_previews/StringPropertyPreview.tsx

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

package/src/preview/util.ts

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

package/src/routes/CustomCMSRoute.tsx

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