@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.80

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.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.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.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 { 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.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}</>;
+    }
+}