@firecms/core 3.0.0-canary.98 → 3.0.0-rc.1

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
+    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+    //         // If our code view is mounted, perform selection
+    //         if (preRef.current) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //
+    //             const selection = window.getSelection();
+    //             const range = document.createRange();
+    //             range.selectNodeContents(preRef.current);
+    //             if (selection) {
+    //                 selection.removeAllRanges();
+    //                 selection.addRange(range);
+    //             }
+    //         }
+    //     }
+    // }, []);
+
+    // // Attach the global keydown listener when component mounts,
+    // // and remove it when it unmounts.
+    // useEffect(() => {
+    //     document.addEventListener("keydown", handleGlobalKeyDown);
+    //     return () => {
+    //         document.removeEventListener("keydown", handleGlobalKeyDown);
+    //     };
+    // }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.github}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        backgroundColor: "inherit"
+                    }}
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}

package/src/components/EntityPreview.tsx

@@ -7,24 +7,33 @@ import {
     getEntityImagePreviewPropertyKey,
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
+    getPropertyInPath,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
-import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import {
+    useAuthController,
+    useCustomizationController,
+    useNavigationController,
+    useSideEntityController
+} from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 export type EntityPreviewProps = {
-    size: PreviewSize,
+    size?: PreviewSize,
     actions?: React.ReactNode,
     collection?: EntityCollection,
     hover?: boolean;
-    previewProperties?: string[],
-    disabled: undefined | boolean,
+    previewKeys?: string[],
+    disabled?: boolean,
     entity: Entity<any>,
     includeId?: boolean,
+    includeTitle?: boolean,
     includeEntityLink?: boolean,
+    includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -37,14 +46,17 @@ export function EntityPreview({
                                   disabled,
                                   hover,
                                   collection: collectionProp,
-                                  previewProperties,
+                                  previewKeys,
                                   onClick,
-                                  size,
+                                  size = "medium",
                                   includeId = true,
+                                  includeTitle = true,
                                   includeEntityLink = true,
-                                  entity
+                                  includeImage = true,
+                                  entity,
                               }: EntityPreviewProps) {
 
+    const authController = useAuthController();
     const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
     const customizationController = useCustomizationController();
@@ -61,39 +73,46 @@ export function EntityPreview({
         collection,
         path: entity.path,
         values: entity.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1),
+        [previewKeys, resolvedCollection, size]);
 
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : undefined;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
-
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
 
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
-
-        <div className={"flex flex-col flex-grow w-full m-1"}>
-
-            {size !== "tiny" && includeId && (
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
+            {usedImageProperty && usedImageValue && <PropertyPreview property={usedImageProperty}
+                                                                     propertyKey={imagePropertyKey as string}
+                                                                     size={"small"}
+                                                                     value={usedImageValue}/>}
+            {(!usedImageProperty || !usedImageValue) && <IconForView collectionOrView={collection}
+                                                                     color={"primary"}
+                                                                     size={size}
+                                                                     className={"m-auto p-1"}/>}
+        </div>
+
+
+        <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
+
+            {size !== "small" && includeId && (
                 entity
-                    ? <div className={`${
-                        size !== "medium"
-                            ? "block whitespace-nowrap overflow-hidden truncate"
-                            : ""
-                    }`}>
+                    ? <div className={"block whitespace-nowrap overflow-hidden truncate"}>
                         <Typography variant={"caption"}
                                     color={"disabled"}
                                     className={"font-mono"}>
@@ -103,38 +122,39 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"truncate my-0.5 text-sm font-medium"}>
                     {
                         entity
                             ? <PropertyPreview
                                 propertyKey={titleProperty as string}
                                 value={getValueInPath(entity.values, titleProperty)}
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                             : <SkeletonPropertyComponent
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                     }
                 </div>
             )}
 
             {restProperties && restProperties.map((key) => {
-                const childProperty = resolvedCollection.properties[key as string];
+                const childProperty = getPropertyInPath(resolvedCollection.properties, key);
                 if (!childProperty) return null;
 
+                const valueInPath = getValueInPath(entity.values, key);
                 return (
                     <div key={"ref_prev_" + key}
-                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
                         {
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
-                                    value={getValueInPath(entity.values, key)}
+                                    value={valueInPath}
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"small"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"small"}/>
                         }
                     </div>
                 );
@@ -143,11 +163,11 @@ export function EntityPreview({
         </div>
 
         {entity && includeEntityLink &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+            <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
+                    className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -174,22 +194,22 @@ export type EntityPreviewContainerProps = {
     children: React.ReactNode;
     hover?: boolean;
     fullwidth?: boolean;
-    size: PreviewSize;
+    size?: PreviewSize;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       fullwidth = true,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size = "medium",
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -198,12 +218,12 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             tabindex: 0
         }}
         className={cls(
-            "bg-white dark:bg-gray-900",
+            "bg-white dark:bg-surface-900",
             "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
-            hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-            size === "tiny" ? "p-1" : "p-2",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+            size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -219,6 +239,4 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
     </div>;
 });
 
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-
-export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/EntityView.tsx

@@ -5,6 +5,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
+import { useAuthController } from "../hooks";
 
 /**
  * @group Components
@@ -24,13 +25,15 @@ export function EntityView<M extends Record<string, any>>(
         className
     }: EntityViewProps<M>) {
 
+    const authController = useAuthController();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
         path,
         entityId: entity.id,
         values: entity.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;
@@ -40,10 +43,10 @@ export function EntityView<M extends Record<string, any>>(
             <div className={"w-full mb-4"}>
                 <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                     <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-gray-600">Id</span>
+                        <span className="pl-2 text-sm text-surface-600">Id</span>
                     </div>
                     <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                         <span className="flex-grow mr-2">{entity.id}</span>
                         {customizationController?.entityLinkBuilder &&
                             <a href={customizationController.entityLinkBuilder({ entity })}
@@ -64,10 +67,10 @@ export function EntityView<M extends Record<string, any>>(
                                 key={`reference_previews_${key}`}
                                 className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                                 <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
+                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
                                 </div>
                                 <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={value}

package/src/components/ErrorView.tsx

@@ -26,13 +26,13 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.error("ErrorView", error)
+    // console.warn("ErrorView", error)
 
     const body = (
         <div
             className="flex items-center m-2">
-            <ErrorIcon size={"small"} color={"error"}/>
-            <div className="pl-2">
+            <ErrorIcon className={"mx-2"} size={"small"} color={"error"}/>
+            <div className="pl-4">
                 {title && <Typography
                     variant={"body2"}
                     className="font-medium">{title}</Typography>}

package/src/components/FireCMSLogo.tsx

@@ -14,59 +14,15 @@ export function FireCMSLogo({
     return (
         <svg
             width={width ?? "100%"} height={height ?? "100%"}
-            viewBox="0 0 599 599" version="1.1"
+            version="1.1"
             style={style}
             className={className}
-            xmlns="http://www.w3.org/2000/svg">
-            <defs>
-                <radialGradient cx="28.6213569%" cy="43.1133328%"
-                                fx="28.6213569%"
-                                fy="43.1133328%" r="71.5003456%"
-                                gradientTransform="translate(0.286214,0.431133),rotate(3.343450),scale(1.000000,0.996175),translate(-0.286214,-0.431133)"
-                                id="radialGradient-1">
-                    <stop stopColor="#FF5B79" offset="0%"/>
-                    <stop stopColor="#FA5574" offset="28.0930803%"/>
-                    <stop stopColor="#EC4C51" offset="44.7242531%"/>
-                    <stop stopColor="#9543C1" offset="71.4578165%"/>
-                    <stop stopColor="#3857B3" offset="100%"/>
-                </radialGradient>
-                <radialGradient cx="53.6205516%" cy="47.2473036%"
-                                fx="53.6205516%"
-                                fy="47.2473036%" r="50.8229649%"
-                                gradientTransform="translate(0.536206,0.472473),rotate(90.000000),scale(1.000000,1.206631),translate(-0.536206,-0.472473)"
-                                id="radialGradient-2">
-                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
-                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
-                          offset="75.3503173%"/>
-                    <stop stopColor="#0D060B" stopOpacity="0.437431709"
-                          offset="100%"/>
-                </radialGradient>
-                <radialGradient cx="53.8605015%" cy="48.1990423%"
-                                fx="53.8605015%"
-                                fy="48.1990423%" r="59.9151549%"
-                                gradientTransform="translate(0.538605,0.481990),rotate(180.000000),scale(1.000000,0.925027),translate(-0.538605,-0.481990)"
-                                id="radialGradient-3">
-                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
-                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
-                          offset="84.0867343%"/>
-                    <stop stopColor="#FF0000" stopOpacity="0.567324765"
-                          offset="100%"/>
-                </radialGradient>
-            </defs>
-            <g id="Page-1" stroke="none" strokeWidth="1" fill="none"
-               fillRule="evenodd">
-                <g id="firecms_logo">
-                    <circle fill="url(#radialGradient-1)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                    <circle fill="url(#radialGradient-2)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                    <circle fill="url(#radialGradient-3)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                </g>
-            </g>
+            viewBox="0 0 583 583" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="291.5" cy="291.5" r="291.5" fill="#0070F4"/>
+            <ellipse cx="292" cy="291.5" rx="173" ry="173.5" fill="#FF3773"/>
+            <path
+                d="M465 291.5C465 268.847 460.525 246.416 451.831 225.487C443.137 204.558 430.394 185.542 414.329 169.524C398.265 153.506 379.194 140.8 358.204 132.131C337.215 123.462 314.719 119 292 119C269.281 119 246.785 123.462 225.796 132.131C204.806 140.8 185.735 153.506 169.671 169.524C153.606 185.542 140.863 204.558 132.169 225.487C123.475 246.416 119 268.847 119 291.5L292 291.5H465Z"
+                fill="#FFA400"/>
         </svg>
     );