@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ResolvedStringProperty } from "../../types";
+
+import { resolveArrayProperty } from "../../util";
+import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
+import { useCustomizationController } from "../../hooks";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStringsPreview({
+                                          propertyKey,
+                                          value,
+                                          property: inputProperty,
+                                          // entity,
+                                          size
+                                      }: PropertyPreviewProps<string[]>) {
+
+    const customizationController = useCustomizationController();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: customizationController.propertyConfigs
+    });
+
+    if (Array.isArray(property.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+    if (!property.of || property.dataType !== "array" || property.of.dataType !== "string")
+        throw Error("Picked wrong preview component ArrayOfStringsPreview");
+
+    if (value && !Array.isArray(value)) {
+        return <div>{`Unexpected value: ${value}`}</div>;
+    }
+    const stringProperty = property.of as ResolvedStringProperty;
+
+    return (
+        <div className="flex flex-col gap-2">
+            {value &&
+                value.map((v, index) =>
+                    <div key={`preview_array_strings_${propertyKey}_${index}`}>
+                        <ErrorBoundary>
+                            <StringPropertyPreview propertyKey={propertyKey}
+                                                   property={stringProperty}
+                                                   value={v}
+                                // entity={entity}
+                                                   size={size}/>
+                        </ErrorBoundary>
+                    </div>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { resolveArrayProperty } from "../../util";
+import { ResolvedProperty } from "../../types";
+import { useCustomizationController } from "../../hooks";
+import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { cn, defaultBorderMixin } from "@firecms/ui";
+import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOneOfPreview({
+                                      propertyKey,
+                                      value,
+                                      property: inputProperty,
+                                      size,
+                                      // entity
+                                  }: PropertyPreviewProps<any[]>) {
+
+    const customizationController = useCustomizationController();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: customizationController.propertyConfigs
+    });
+
+    if (property?.dataType !== "array")
+        throw Error("Picked wrong preview component ArrayPreview");
+
+    if (!property?.oneOf) {
+        throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+
+    const values = value;
+
+    if (!values) return null;
+
+    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+
+    const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
+    const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
+    const properties = property.oneOf.properties;
+
+    return (
+        <div className={"flex flex-col"}>
+            {values &&
+                values.map((value, index) =>
+                    <React.Fragment
+                        key={"preview_array_" + value + "_" + index}>
+                        <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                            <ErrorBoundary>
+                                {value && <PropertyPreview
+                                    propertyKey={propertyKey}
+                                    value={value[valueField]}
+                                    // entity={entity}
+                                    property={(property.resolvedProperties[index] ?? properties[value[typeField]]) as ResolvedProperty<any>}
+                                    size={childSize}/>}
+                            </ErrorBoundary>
+                        </div>
+                    </React.Fragment>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayPropertyEnumPreview.tsx

@@ -0,0 +1,28 @@
+import { ResolvedNumberProperty, ResolvedStringProperty } from "../../types";
+import { ArrayEnumPreview } from "../components/ArrayEnumPreview";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyEnumPreview({
+                                             propertyKey,
+                                             value,
+                                             property,
+                                             size
+                                         }: PropertyPreviewProps<string[] | number[]>) {
+
+    if (property.dataType !== "array")
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    const ofProperty = property.of as ResolvedStringProperty | ResolvedNumberProperty;
+    if (!ofProperty.enumValues)
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    if (!value) return null;
+
+    return <ArrayEnumPreview name={propertyKey}
+                             value={value}
+                             enumValues={ofProperty.enumValues}
+                             size={size}/>;
+}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { resolveArrayProperty } from "../../util";
+import { ResolvedProperty } from "../../types";
+import { useCustomizationController } from "../../hooks";
+import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { cn, defaultBorderMixin } from "@firecms/ui";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyPreview({
+                                         propertyKey,
+                                         value,
+                                         property: inputProperty,
+                                         // entity,
+                                         size
+                                     }: PropertyPreviewProps<any[]>) {
+
+    const customizationController = useCustomizationController();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: customizationController.propertyConfigs
+    });
+
+    if (!property.of) {
+        throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+
+    if (property.dataType !== "array")
+        throw Error("Picked wrong preview component ArrayPreview");
+
+    const values = value;
+
+    if (!values) return null;
+
+    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+
+    return (
+        <div className="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={cn(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

@@ -0,0 +1,146 @@
+import React from "react";
+
+import { ResolvedMapProperty } from "../../types";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
+import { ErrorBoundary } from "../../components";
+import { EmptyValue } from "../components/EmptyValue";
+
+/**
+ * @group Preview components
+ */
+export function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({
+                                                                                            propertyKey,
+                                                                                            value,
+                                                                                            property,
+                                                                                            // entity,
+                                                                                            size
+                                                                                        }: PropertyPreviewProps<T>) {
+
+    if (property.dataType !== "map") {
+        throw Error("Picked wrong preview component MapPropertyPreview");
+    }
+
+    const mapProperty = property as ResolvedMapProperty;
+
+    if (!mapProperty.properties || Object.keys(mapProperty.properties ?? {}).length === 0) {
+        return (
+            <KeyValuePreview value={value}/>
+        );
+    }
+
+    if (!value) return null;
+
+    const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
+
+    if (size === "tiny")
+        return (
+            <div className="w-full flex flex-col space-y-1 md:space-y-2">
+                {mapPropertyKeys.map((key, index) => (
+                    <div key={`map_${key}`}>
+                        <ErrorBoundary
+                            key={"map_preview_" + mapProperty.name + key + index}>
+                            <PropertyPreview propertyKey={key}
+                                             value={(value)[key]}
+                                             property={mapProperty.properties![key]}
+                                // entity={entity}
+                                             size={size}/>
+                        </ErrorBoundary>
+                    </div>
+                ))}
+            </div>
+        );
+
+    return (
+        <div
+            className="flex flex-col gap-1 w-full">
+            {mapPropertyKeys &&
+                mapPropertyKeys.map((key, index) => {
+                    const childProperty = mapProperty.properties![key];
+                    return (
+                        <div
+                            key={`map_preview_table_${key}}`}
+                            className={cn(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"}
+                                                color={"secondary"}>
+                                        {childProperty.name}
+                                    </Typography>
+                                </div>
+                                <div
+                                    className="flex-grow max-w-[75%]">
+                                    <ErrorBoundary>
+                                        {!(childProperty.dataType === "map" || childProperty === "array") &&
+                                            <PropertyPreview
+                                                propertyKey={key}
+                                                value={(value)[key]}
+                                                property={childProperty}
+                                                // entity={entity}
+                                                size={size}/>}
+                                    </ErrorBoundary>
+                                </div>
+                            </div>
+
+                            {(childProperty.dataType === "map" || childProperty === "array") &&
+                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                                    <PropertyPreview
+                                        propertyKey={key}
+                                        value={(value)[key]}
+                                        property={childProperty}
+                                        // entity={entity}
+                                        size={size}/>
+                                </div>
+                            }
+                        </div>
+                    );
+                })}
+        </div>
+    );
+
+}
+
+export function KeyValuePreview({ value }: { value: any }) {
+    if (typeof value !== "object") return null;
+    if (!value) return <EmptyValue/>;
+    return <div
+        className="flex flex-col gap-1 w-full">
+        {
+            Object.entries(value).map(([key, childValue]) => (
+                <div
+                    key={`map_preview_table_${key}}`}
+                    className={cn(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"}
+                                        color={"secondary"}>
+                                {key}
+                            </Typography>
+                        </div>
+                        <div
+                            className="flex-grow max-w-[75%]">
+                            {typeof childValue !== "object" && <Typography>
+                                <ErrorBoundary>
+                                    {childValue && childValue.toString()}
+                                </ErrorBoundary>
+                            </Typography>}
+                        </div>
+                    </div>
+                    {typeof childValue === "object" &&
+                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                            <KeyValuePreview value={childValue}/>
+                        </div>
+                    }
+                </div>
+            ))
+        }
+    </div>;
+}

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { EnumValuesChip, PropertyPreviewProps } from "../../preview";
+import { enumToObjectEntries } from "../../util";
+
+/**
+ * @group Preview components
+ */
+export function NumberPropertyPreview({
+                                          value,
+                                          property,
+                                          size
+                                      }: PropertyPreviewProps<number>): React.ReactElement {
+
+    if (property.enumValues) {
+        const enumKey = value;
+        const enumValues = enumToObjectEntries(property.enumValues);
+        if (!enumValues)
+            return <>{value}</>;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={size !== "medium" ? "small" : "medium"}/>;
+    } else {
+        return <>{value}</>;
+    }
+}

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -0,0 +1,283 @@
+import {
+    ResolvedArrayProperty,
+    ResolvedMapProperty,
+    ResolvedProperties,
+    ResolvedProperty,
+    ResolvedStringProperty
+} from "../../types";
+import React from "react";
+import { getThumbnailMeasure } from "../util";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { Skeleton } from "@firecms/ui";
+
+export interface SkeletonPropertyComponentProps {
+    property: ResolvedProperty,
+    size: PreviewSize
+}
+
+/**
+ * @group Preview components
+ */
+export function SkeletonPropertyComponent({
+                                              property,
+                                              size
+                                          }: SkeletonPropertyComponentProps
+) {
+
+    if (!property) {
+        console.error("No property assigned for skeleton component", property, size);
+    }
+
+    let content: React.ReactNode | any;
+    if (property.dataType === "string") {
+        const stringProperty = property as ResolvedStringProperty;
+        if (stringProperty.url) {
+            content = renderUrlComponent(stringProperty, size);
+        } else if (stringProperty.storage) {
+            content = renderSkeletonImageThumbnail(size);
+        } else {
+            content = renderSkeletonText();
+        }
+    } else if (property.dataType === "array") {
+        const arrayProperty = property as ResolvedArrayProperty;
+
+        if (arrayProperty.of) {
+            if (Array.isArray(arrayProperty.of)) {
+                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);
+                } else if (arrayProperty.of.dataType === "string") {
+                    if (arrayProperty.of.enumValues) {
+                        content = renderArrayEnumTableCell();
+                    } else if (arrayProperty.of.storage) {
+                        content = renderGenericArrayCell(arrayProperty.of);
+                    } else {
+                        content = renderArrayOfStrings();
+                    }
+                } else {
+                    content = renderGenericArrayCell(arrayProperty.of);
+                }
+            }
+        }
+
+    } else if (property.dataType === "map") {
+        content = renderMap(property as ResolvedMapProperty, size);
+    } else if (property.dataType === "date") {
+        content = renderSkeletonText();
+    } else if (property.dataType === "reference") {
+        content = renderReference();
+    } else if (property.dataType === "boolean") {
+        content = renderSkeletonText();
+    } else {
+        content = renderSkeletonText();
+    }
+    return (content || null);
+}
+
+function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<T>, size: PreviewSize) {
+
+    if (!property.properties)
+        return <></>;
+
+    let mapPropertyKeys: string[];
+    if (size === "medium") {
+        mapPropertyKeys = Object.keys(property.properties);
+    } else {
+        mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
+        if (size === "small")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 3);
+        else if (size === "tiny")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 1);
+    }
+
+    if (size !== "medium")
+        return (
+            <div
+                className="w-full flex flex-col space-y-4"
+            >
+                {mapPropertyKeys.map((key, index) => (
+                    <div key={`map_${key}`}>
+                        {property.properties && property.properties[key] &&
+                            <SkeletonPropertyComponent
+                                property={property.properties[key]}
+                                size={"small"}/>}
+                    </div>
+                ))}
+            </div>
+        );
+
+    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={"small"}/>}
+                            </th>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedProperties<M>, size: PreviewSize, previewProperties?: string[]) {
+    let tableProperties = previewProperties;
+    if (!tableProperties || !tableProperties.length) {
+        tableProperties = Object.keys(properties) as string[];
+        if (size)
+            tableProperties = tableProperties.slice(0, 3);
+    }
+
+    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={"small"}/>
+                                    </th>
+                                )
+                            )}
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfStrings() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) => (
+                    renderSkeletonText(index)
+                ))}
+        </div>
+    );
+}
+
+function renderArrayEnumTableCell() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        {renderSkeletonText(index)}
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderGenericArrayCell(
+    property: ResolvedProperty,
+    index = 0
+) {
+    return (
+
+        <div key={"array_index_" + index}
+             className={"flex flex-col gap-2"}>
+
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        <SkeletonPropertyComponent key={`i_${index}`}
+                                                   property={property}
+                                                   size={"small"}/>
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderUrlAudioComponent() {
+    return (
+        <Skeleton width={300}
+                  height={100}/>
+    );
+}
+
+export function renderSkeletonImageThumbnail(size: PreviewSize) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    return (
+        <Skeleton width={imageSize}
+                  height={imageSize}/>
+    );
+}
+
+function renderUrlVideo(size: PreviewSize) {
+
+    return (
+        <Skeleton width={size !== "medium" ? 300 : 500}
+                  height={size !== "medium" ? 200 : 250}/>
+    );
+}
+
+function renderReference() {
+    return <Skeleton width={200} height={100}/>;
+}
+
+function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "medium") {
+
+    if (typeof property.url === "boolean") {
+        return <div style={{
+            display: "flex"
+        }}>
+            {renderSkeletonIcon()}
+            {renderSkeletonText()}
+        </div>;
+    }
+
+    return renderUrlFile(size);
+}
+
+function renderUrlFile(size: PreviewSize) {
+
+    return (
+        <div
+            className={`w-${getThumbnailMeasure(size)} h-${getThumbnailMeasure(size)}`}>
+            {renderSkeletonIcon()}
+        </div>
+    );
+}
+
+export function renderSkeletonText(index?: number, width = 120) {
+    return <Skeleton width={width} key={`skeleton_${index}`}/>;
+}
+
+export function renderSkeletonCaptionText(index?: number) {
+    return <Skeleton
+        height={20}/>;
+}
+
+export function renderSkeletonIcon() {
+    return <Skeleton width={24} height={24}/>;
+}