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

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -31,12 +31,14 @@ import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "../components";
+import { UserPreview } from "./components/UserPreview";
 
 /**
  * @group Preview components
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     let content: React.ReactNode | any;
@@ -47,17 +49,17 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        // entity
+        interactive
     } = props;
 
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -71,12 +73,19 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 // entity,
                 customProps: property.customProps
             });
-    } else if (value === null) {
+    } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
         if (typeof value === "string") {
-            if (stringProperty.url) {
+            if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
+                content = <StorageThumbnail
+                    interactive={interactive}
+                    storeUrl={property.storage?.storeUrl ?? false}
+                    size={props.size}
+                    storagePathOrDownloadUrl={filePath}/>;
+            } else if (stringProperty.url) {
                 if (typeof stringProperty.url === "boolean")
                     content =
                         <UrlComponentPreview size={props.size}
@@ -85,14 +94,31 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content =
                         <UrlComponentPreview size={props.size}
                                              url={value}
+                                             interactive={interactive}
                                              previewType={stringProperty.url}/>;
-            } else if (stringProperty.storage) {
-                content = <StorageThumbnail
-                    storeUrl={property.storage?.storeUrl ?? false}
-                    size={props.size}
-                    storagePathOrDownloadUrl={value}/>;
             } else if (stringProperty.markdown) {
-                content = <Markdown source={value}/>;
+                content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
+            } else if (stringProperty.reference) {
+                if (typeof stringProperty.reference.path === "string") {
+                    content = <ReferencePreview
+                        disabled={!stringProperty.reference.path}
+                        previewProperties={stringProperty.reference.previewProperties}
+                        includeId={stringProperty.reference.includeId}
+                        includeEntityLink={stringProperty.reference.includeEntityLink}
+                        size={props.size}
+                        reference={new EntityReference(value, stringProperty.reference.path)}
+                    />;
+                } else {
+                    content = <EmptyValue/>;
+                }
+
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}
@@ -113,17 +139,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}/>;
@@ -182,8 +198,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 content = <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
                     size={props.size}
-                    // onClick={props.onClick}
                     reference={value as EntityReference}
                 />;
             } else {

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "small" | "medium" | "large";
 
 /**
  * @group Preview components
@@ -46,4 +46,10 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
+
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, cn } from "@firecms/ui";
+import { Checkbox, cls } from "@firecms/ui";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Property } from "../../types";
 
@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EmptyValue.tsx

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

package/src/preview/components/EnumValuesChip.tsx

@@ -1,12 +1,12 @@
 import React from "react";
+import { Chip } from "@firecms/ui";
 import { EnumValues } from "../../types";
 import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFrom } from "../../util/enums";
-import { Chip } from "@firecms/ui";
 
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,11 +20,9 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -47,60 +45,51 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <img src={url}
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-            {onHover && <>
-
-                {navigator && <Tooltip title="Copy url to clipboard">
-                    <div
-                        className="rounded-full absolute bottom-[-4px] right-8">
-                        <IconButton
-                            variant={"filled"}
-                            size={"small"}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                return navigator.clipboard.writeText(url);
-                            }}>
-                            <ContentCopyIcon className={"text-gray-500"}
-                                             size={"small"}/>
-                        </IconButton>
-                    </div>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"smallest"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                                         size={"smallest"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         variant={"filled"}
                         component={"a" as React.ElementType}
-                        style={{
-                            position: "absolute",
-                            bottom: -4,
-                            right: -4
-                        }}
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-500"}
-                                       size={"small"}/>
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                                       size={"smallest"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -1,64 +1,52 @@
 import * as React from "react";
 
 import { Entity, EntityCollection, EntityReference } from "../../types";
-import {
-    useCustomizationController,
-    useEntityFetch,
-    useNavigationController,
-    useSideEntityController
-} from "../../hooks";
+import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } from "@firecms/ui";
-import { ErrorView } from "../../components";
-import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+import { Skeleton } from "@firecms/ui";
+import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
     reference: EntityReference,
-    size: PreviewSize;
+    size?: PreviewSize;
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
-    allowEntityNavigation?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
 };
 
 /**
  * @group Preview components
  */
-export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
         return <EntityPreviewContainer
             onClick={props.onClick}
-            size={props.size}>
+            size={props.size ?? "medium"}>
             <ErrorView error={"Unexpected value. Click to edit"}
                        tooltip={JSON.stringify(reference)}/>
         </EntityPreviewContainer>;
     }
-    return <ReferencePreviewInternal {...props} />;
-}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
-
-function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
-    return prevProps.disabled === nextProps.disabled &&
-        prevProps.size === nextProps.size &&
-        prevProps.hover === nextProps.hover &&
-        prevProps.reference?.id === nextProps.reference?.id &&
-        prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
-        ;
-}
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props} />
+    </ErrorBoundary>;
+};
 
-function ReferencePreviewInternal<M extends Record<string, any>>({
-                                                                     disabled,
-                                                                     reference,
-                                                                     previewProperties,
-                                                                     size,
-                                                                     hover,
-                                                                     onClick,
-                                                                     allowEntityNavigation = true
-                                                                 }: ReferencePreviewProps) {
+function ReferencePreviewInternal({
+                                      disabled,
+                                      reference,
+                                      previewProperties,
+                                      size,
+                                      hover,
+                                      onClick,
+                                      includeEntityLink = true,
+                                      includeId = true
+                                  }: ReferencePreviewProps) {
 
     const customizationController = useCustomizationController();
 
@@ -79,7 +67,8 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         previewProperties={previewProperties}
         size={size}
         disabled={disabled}
-        allowEntityNavigation={allowEntityNavigation}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
         onClick={onClick}
         hover={hover}/>
 }
@@ -90,7 +79,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                                                                            previewProperties,
                                                                            size,
                                                                            disabled,
-                                                                           allowEntityNavigation,
+                                                                           includeEntityLink,
+                                                                           includeId,
                                                                            onClick,
                                                                            hover
                                                                        }: ReferencePreviewProps & {
@@ -152,13 +142,15 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
             </EntityPreviewContainer>
         );
     }
+
     return <EntityPreview size={size}
-                          previewProperties={previewProperties}
+                          previewKeys={previewProperties}
                           disabled={disabled}
                           entity={usedEntity}
                           collection={collection}
                           onClick={onClick}
-                          includeEntityNavigation={allowEntityNavigation}
+                          includeEntityLink={includeEntityLink}
+                          includeId={includeId}
                           hover={hover}/>;
 
 }

package/src/preview/components/StorageThumbnail.tsx

@@ -11,6 +11,7 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 
 /**
@@ -21,13 +22,15 @@ 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.storeUrl === nextProps.storeUrl&&
+        prevProps.interactive === nextProps.interactive;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
                                              storeUrl,
+                                             interactive,
                                              storagePathOrDownloadUrl,
                                              size
                                          }: StorageThumbnailProps) {
@@ -68,6 +71,7 @@ export function StorageThumbnailInternal({
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
                                url={downloadConfig.url}
+                               interactive={interactive}
                                size={size}
                                hint={storagePathOrDownloadUrl}/>
         : renderSkeletonImageThumbnail(size);

package/src/preview/components/UrlComponentPreview.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { ImagePreview } from "./ImagePreview";
 import { getThumbnailMeasure } from "../util";
 import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
 
 /**
@@ -14,12 +14,15 @@ export function UrlComponentPreview({
                                         url,
                                         previewType,
                                         size,
-                                        hint
+                                        hint,
+                                        interactive = true
                                     }: {
     url: string,
     previewType?: PreviewType,
     size: PreviewSize,
-    hint?: string
+    hint?: string,
+    // for video controls
+    interactive?: boolean
 }): React.ReactElement {
 
     if (!previewType) {
@@ -43,37 +46,66 @@ export function UrlComponentPreview({
                              size={size}/>;
     } else if (previewType === "audio") {
         return <audio controls
+                      className={"max-w-100%"}
                       src={url}>
             Your browser does not support the
             <code>audio</code> element.
         </audio>;
     } else if (previewType === "video") {
-        return <video
-            className={`max-w-${size === "small" ? "sm" : "md"}`}
-            controls
-        >
-            <source src={url}/>
-        </video>;
+        return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
-            <a
-                href={url}
-                rel="noopener noreferrer"
-                target="_blank"
-                onClick={(e) => e.stopPropagation()}
-                className="flex flex-col items-center justify-center"
-                style={{
-                    width: getThumbnailMeasure(size),
-                    height: getThumbnailMeasure(size)
-                }}>
-                <DescriptionIcon className="flex-grow"/>
-                {hint &&
-                    <Tooltip title={hint}>
-                        <Typography
-                            className="max-w-full truncate rtl text-left"
-                            variant={"caption"}>{hint}</Typography>
-                    </Tooltip>}
-            </a>
+            <Tooltip title={hint}>
+                <a
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center"
+                    style={{
+                        width: getThumbnailMeasure(size),
+                        height: getThumbnailMeasure(size)
+                    }}>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                    {hint && <Typography
+                        className="max-w-full truncate rtl text-left"
+                        variant={"caption"}>{hint}</Typography>}
+                </a>
+            </Tooltip>
         );
     }
 }
+
+function VideoPreview({
+                          size,
+                          src,
+                          interactive
+                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "small")
+            return "140px";
+        else if (size === "medium")
+            return "240px";
+        else if (size === "large")
+            return "100%";
+        else throw new Error("Invalid size");
+    }, [size]);
+
+    const videoProps = {
+        controls: interactive
+    };
+    return <video
+        style={{
+            position: "relative",
+            objectFit: "cover",
+            width: imageSize,
+            minWidth: "140px",
+            // height: imageSize,
+            maxHeight: "100%"
+        }}
+        {...videoProps}
+        className={cls("max-w-100% rounded", { "pointer-events-none": !interactive })}>
+        <source src={src}/>
+    </video>;
+}

package/src/preview/components/UserPreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@firecms/ui";
+
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export function UserPreview({ value }: PropertyPreviewProps<string>) {
+    const { getUser } = useInternalUserManagementController();
+
+    if (!value) {
+        return <EmptyValue/>;
+    }
+
+    const user = getUser(value);
+    if (!user) {
+        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+    }
+
+    return <UserDisplay user={user}/>;
+}

package/src/preview/index.ts

@@ -25,3 +25,4 @@ export * from "./components/EnumValuesChip";
 export * from "./components/EmptyValue";
 export * from "./components/ImagePreview";
 export * from "./components/ReferencePreview";
+export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,13 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, 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)) {
@@ -37,7 +37,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = mapProperty.previewKeys;
 
     if (!values) return null;
 
@@ -55,7 +55,7 @@ export function ArrayOfMapsPreview({
                     values.map((v, index) => {
                         return (
                             <div key={`table_${v}_${index}`}
-                                 className="border-b last:border-b-0">
+                                 className="border-b last:border-b-0 py-2">
                                 {mapProperties && mapProperties.map(
                                     (key) => (
                                         <div