@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.71

package/src/preview/index.ts

@@ -0,0 +1,27 @@
+export { PropertyPreview } from "./PropertyPreview";
+export type {
+    PropertyPreviewProps, PreviewSize
+} from "./PropertyPreviewProps";
+
+export * from "./property_previews/ArrayOfStringsPreview";
+export * from "./property_previews/ArrayPropertyEnumPreview";
+export * from "./property_previews/ArrayOfMapsPreview";
+export * from "./property_previews/NumberPropertyPreview";
+export * from "./property_previews/StringPropertyPreview";
+export * from "./property_previews/ArrayOfStorageComponentsPreview";
+export * from "./property_previews/ArrayOfReferencesPreview";
+export * from "./property_previews/MapPropertyPreview";
+export * from "./property_previews/ArrayPropertyPreview";
+export * from "./property_previews/ArrayOneOfPreview";
+export * from "./property_previews/SkeletonPropertyComponent";
+
+export * from "./components/AsyncPreviewComponent";
+export * from "./components/DatePreview";
+export * from "./components/UrlComponentPreview";
+export * from "./components/StorageThumbnail";
+export * from "./components/ArrayEnumPreview";
+export * from "./components/BooleanPreview";
+export * from "./components/EnumValuesChip";
+export * from "./components/EmptyValue";
+export * from "./components/ImagePreview";
+export * from "./components/ReferencePreview";

package/src/preview/property_previews/ArrayOfMapsPreview.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): import("react/jsx-runtime").JSX.Element | null;

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+import { useFireCMSContext } from "../../hooks";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { resolveArrayProperty } from "../../util";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfMapsPreview({
+                                       propertyKey,
+                                       value,
+                                       property: inputProperty,
+                                       size,
+                                       // entity
+                                   }: PropertyPreviewProps<Record<string, any>[]>) {
+    const fireCMSContext = useFireCMSContext();
+
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.dataType !== "array" || !property.of || property.of.dataType !== "map")
+        throw Error("Picked wrong preview component ArrayOfMapsPreview");
+
+    const mapProperty = property.of;
+    const properties = mapProperty.properties;
+    if (!properties) {
+        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;
+
+    if (!values) return null;
+
+    let mapProperties = previewProperties;
+    if (!mapProperties || !mapProperties.length) {
+        mapProperties = Object.keys(properties);
+        if (size)
+            mapProperties = mapProperties.slice(0, 3);
+    }
+
+    return (
+        <div className="table-auto text-xs">
+            <div>
+                {values &&
+                    values.map((v, index) => {
+                        return (
+                            <div key={`table_${v}_${index}`}
+                                 className="border-b last:border-b-0">
+                                {mapProperties && mapProperties.map(
+                                    (key) => (
+                                        <div
+                                            key={`table-cell-${key as string}`}
+                                            className="table-cell"
+                                        >
+                                            <ErrorBoundary>
+                                                <PropertyPreview
+                                                    propertyKey={key as string}
+                                                    value={(v)[key]}
+                                                    property={properties[key as string]}
+                                                    // entity={entity}
+                                                    size={"small"}/>
+                                            </ErrorBoundary>
+                                        </div>
+                                    )
+                                )}
+                            </div>
+                        );
+                    })}
+            </div>
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfReferencesPreview.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element;

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -0,0 +1,52 @@
+import { ResolvedReferenceProperty } from "../../types";
+import { resolveArrayProperty } from "../../util";
+import { useFireCMSContext } from "../../hooks";
+import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
+import { ReferencePreview } from "../components/ReferencePreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfReferencesPreview({
+                                             propertyKey,
+                                             value,
+                                             property: inputProperty,
+                                             size
+                                         }: PropertyPreviewProps<any[]>) {
+
+    const fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
+        throw Error("Picked wrong preview component ArrayOfReferencesPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+
+    return (
+        <div className="flex flex-col w-full">
+            {value &&
+                value.map((reference, index) => {
+                        const ofProperty = property.of as ResolvedReferenceProperty;
+                        return <div className="mt-1 mb-1 w-full"
+                                    key={`preview_array_ref_${propertyKey}_${index}`}>
+                            <ReferencePreview
+                                disabled={!ofProperty.path}
+                                previewProperties={ofProperty.previewProperties}
+                                size={childSize}
+                                reference={reference}
+                            />
+                        </div>;
+                    }
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element;

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { resolveArrayProperty } from "../../util";
+import { ResolvedProperty } from "../../types";
+
+import { useFireCMSContext } from "../../hooks";
+import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStorageComponentsPreview({
+                                                    propertyKey,
+                                                    // entity,
+                                                    value,
+                                                    property: inputProperty,
+                                                    size
+                                                }: PropertyPreviewProps<any[]>) {
+
+    const fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (Array.isArray(property.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
+        throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+
+    return (
+        <div className={"flex flex-wrap gap-2"}>
+            {value &&
+                value.map((v, index) =>
+                    <ErrorBoundary key={`preview_array_storage_${propertyKey}_${index}`}>
+                        <PropertyPreview
+                            propertyKey={propertyKey}
+                            value={v}
+                            // entity={entity}
+                            property={property.of as ResolvedProperty<string>}
+                            size={childSize}/>
+                    </ErrorBoundary>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStringsPreview.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../../preview";
+/**
+ * @group Preview components
+ */
+export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): import("react/jsx-runtime").JSX.Element;

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 { useFireCMSContext } from "../../hooks";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStringsPreview({
+                                          propertyKey,
+                                          value,
+                                          property: inputProperty,
+                                          // entity,
+                                          size
+                                      }: PropertyPreviewProps<string[]>) {
+
+    const fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.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.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { resolveArrayProperty } from "../../util";
+import { ResolvedProperty } from "../../types";
+import { useFireCMSContext } 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 fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.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.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react/jsx-runtime").JSX.Element | null;

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.d.ts

@@ -0,0 +1,5 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { resolveArrayProperty } from "../../util";
+import { ResolvedProperty } from "../../types";
+import { useFireCMSContext } 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 fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.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.d.ts

@@ -0,0 +1,8 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * @group Preview components
+ */
+export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function KeyValuePreview({ value }: {
+    value: any;
+}): import("react/jsx-runtime").JSX.Element | null;

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -0,0 +1,144 @@
+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";
+
+/**
+ * @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;
+    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.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { PropertyPreviewProps } from "../../preview";
+/**
+ * @group Preview components
+ */
+export declare function NumberPropertyPreview({ value, property, size }: PropertyPreviewProps<number>): React.ReactElement;