@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -0,0 +1,44 @@
+import type { ArrayProperty, ReferenceProperty } from "@rebasepro/types";
+import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { ReferencePreview } from "../components/ReferencePreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfReferencesPreview({
+    propertyKey,
+    value,
+    property: property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.type !== "array" || !property.of || property.of.type !== "reference")
+        throw Error("Picked wrong preview component ArrayOfReferencesPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    return (
+        <div className="flex flex-col w-full">
+            {value &&
+                value.map((reference: any, index: number) => {
+                    const ofProperty = property.of as ReferenceProperty;
+                    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}
+                            includeId={ofProperty.includeId}
+                            includeEntityLink={ofProperty.includeEntityLink}
+                        />
+                    </div>;
+                }
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -0,0 +1,50 @@
+import type { ArrayProperty, RelationProperty } from "@rebasepro/types";
+import { EntityRelation } from "@rebasepro/types";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { normalizeToEntityRelation } from "@rebasepro/common";
+import { RelationPreview } from "../components/RelationPreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfRelationsPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.type !== "array" || !property.of || property.of.type !== "relation")
+        throw Error("Picked wrong preview component ArrayOfRelationsPreview");
+
+    const ofProperty = property.of as RelationProperty;
+
+    return (
+        <div className="flex flex-col w-full gap-0.5">
+            {value &&
+                value.map((relation: unknown, index: number) => {
+                    const entityRelation = normalizeToEntityRelation(relation);
+
+                    if (!entityRelation) return null;
+
+                    return (
+                        <div className="w-full"
+                            key={`preview_array_rel_${propertyKey}_${index}`}>
+                            <RelationPreview
+                                disabled={!ofProperty.relation}
+                                previewProperties={ofProperty.previewProperties}
+                                size={"small"}
+                                relation={entityRelation}
+                                includeId={ofProperty.includeId}
+                                includeEntityLink={ofProperty.includeEntityLink}
+                            />
+                        </div>
+                    );
+                })}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -0,0 +1,49 @@
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React from "react";
+
+import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { PropertyPreview } from "../PropertyPreview";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStorageComponentsPreview({
+    propertyKey,
+    // entity,
+    value,
+    property: property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    if (Array.isArray(property.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property.type !== "array" || !property.of || property.of.type !== "string")
+        throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    if (!property.of) {
+        throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+    return (
+        <div className={"flex flex-wrap gap-2"}>
+            {value &&
+                value.map((v: any, index: number) =>
+                    <ErrorBoundary key={`preview_array_storage_${propertyKey}_${index}`}>
+                        <PropertyPreview
+                            propertyKey={propertyKey}
+                            value={v}
+                            property={property.of as Property}
+                            size={childSize}/>
+                    </ErrorBoundary>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -0,0 +1,44 @@
+import type { ArrayProperty, StringProperty } from "@rebasepro/types";
+import React from "react";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { StringPropertyPreview } from "../../preview";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStringsPreview({
+    propertyKey,
+    value,
+    property: property,
+    // entity,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (Array.isArray(property.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+    if (!property.of || property.type !== "array" || property.of.type !== "string")
+        throw Error("Picked wrong preview component ArrayOfStringsPreview");
+
+    if (value && !Array.isArray(value)) {
+        return <div>{`Unexpected value: ${value}`}</div>;
+    }
+    const stringProperty = property.of as StringProperty;
+
+    return (
+        <div className="flex flex-col gap-2">
+            {value &&
+                value.map((v: any, index: number) =>
+                    <div key={`preview_array_strings_${propertyKey}_${index}`}>
+                        <ErrorBoundary>
+                            <StringPropertyPreview propertyKey={propertyKey}
+                                property={stringProperty}
+                                value={v}
+                                size={size}/>
+                        </ErrorBoundary>
+                    </div>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -0,0 +1,72 @@
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React from "react";
+import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { PropertyPreview } from "../PropertyPreview";
+import { cls, defaultBorderMixin } from "@rebasepro/ui";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOneOfPreview({
+    propertyKey,
+    value,
+    property: property,
+    size
+    // entity
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error(
+            `You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`
+        )
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    if (property?.type !== "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" ? "medium" : "small";
+
+    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: any, index: number) => {
+                    const resolvedProperty = properties[value?.[typeField]];
+                    if (!value || !resolvedProperty) return null;
+                    return (
+                        <React.Fragment
+                            key={"preview_array_" + value + "_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        // @ts-ignore
+                                        value={value[valueField]}
+                                        // entity={entity}
+                                        // @ts-ignore
+                                        property={resolvedProperty as Property}
+                                        size={childSize}/>
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                    );
+                })}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayPropertyEnumPreview.tsx

@@ -0,0 +1,35 @@
+import type { ArrayProperty, NumberProperty, StringProperty } from "@rebasepro/types";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { ArrayEnumPreview } from "../components/ArrayEnumPreview";
+import { resolveEnumValues } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyEnumPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    const ofProperty = property.of as StringProperty | NumberProperty;
+    if (!ofProperty.enum)
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    if (!value) return null;
+
+    const enumValues = resolveEnumValues(ofProperty.enum);
+    if (!enumValues)
+        throw Error(
+            `Enum values not resolved for property ${propertyKey}`
+        )
+
+    return <ArrayEnumPreview name={propertyKey}
+        value={value}
+        enumValues={enumValues}
+        size={size}/>;
+}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -0,0 +1,70 @@
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React from "react";
+
+import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { PropertyPreview } from "../PropertyPreview";
+import { cls, defaultBorderMixin } from "@rebasepro/ui";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { resolveArrayProperties } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyPreview({
+    propertyKey,
+    value,
+    property: property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error("Picked wrong preview component ArrayPreview");
+
+    if (!property.of) {
+        throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const resolvedProperties = resolveArrayProperties({
+        propertyKey,
+        property: property as ArrayProperty,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    });
+
+    const values = value;
+
+    if (!values) return null;
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    return (
+        <div className="w-full flex flex-col gap-2">
+            {values &&
+                values.map((value: any, index: number) => {
+                    if (!resolvedProperties) {
+                        throw Error("Property resolvedProperties is undefined");
+                    }
+                    const of: Property = resolvedProperties[index] ??
+                        (resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
+                    return of
+                        ? <React.Fragment
+                            key={"preview_array_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        value={value}
+                                        property={of}
+                                        size={childSize}/>
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                        : null;
+                }
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -0,0 +1,146 @@
+import type { MapProperty } from "@rebasepro/types";
+import React from "react";
+
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { cls, defaultBorderMixin, Typography } from "@rebasepro/ui";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { EmptyValue } from "../components/EmptyValue";
+
+/**
+ * @group Preview components
+ */
+export function MapPropertyPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<MapProperty>) {
+
+    if (property.type !== "map") {
+        throw Error("Picked wrong preview component MapPropertyPreview");
+    }
+
+    const mapProperty = property as MapProperty;
+
+    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 === "small")
+        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];
+                    const isArrayOrMap = childProperty.type === "map" || childProperty.type === "array";
+                    return (
+                        <div
+                            key={`map_preview_table_${key}}`}
+                            className={cls(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={"break-words font-semibold"}
+                                        color={"secondary"}>
+                                        {childProperty.name}
+                                    </Typography>
+                                </div>
+                                <div
+                                    className="grow max-w-[75%]">
+                                    <ErrorBoundary>
+                                        {!isArrayOrMap &&
+                                            <PropertyPreview
+                                                propertyKey={key}
+                                                value={(value)[key]}
+                                                property={childProperty}
+                                                // entity={entity}
+                                                size={size}/>}
+                                    </ErrorBoundary>
+                                </div>
+                            </div>
+
+                            {isArrayOrMap &&
+                                <div className={cls(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]: [string, any]) => (
+                <div
+                    key={`map_preview_table_${key}}`}
+                    className={cls(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-semibold break-words"}
+                                color={"secondary"}>
+                                {key}
+                            </Typography>
+                        </div>
+                        <div
+                            className="grow max-w-[75%]">
+                            {childValue && typeof childValue !== "object" && <Typography>
+                                <ErrorBoundary>
+                                    {childValue.toString()}
+                                </ErrorBoundary>
+                            </Typography>}
+                        </div>
+                    </div>
+                    {typeof childValue === "object" &&
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                            <KeyValuePreview value={childValue}/>
+                        </div>
+                    }
+                </div>
+            ))
+        }
+    </div>;
+}

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -0,0 +1,29 @@
+import type { NumberProperty } from "@rebasepro/types";
+import React from "react";
+
+import { EnumValuesChip } from "../../preview";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { enumToObjectEntries } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function NumberPropertyPreview({
+    value,
+    property,
+    size
+}: PropertyPreviewProps<NumberProperty>): React.ReactElement {
+
+    if (property.enum) {
+        const enumKey = value;
+        const enumValues = enumToObjectEntries(property.enum);
+        if (!enumValues)
+            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={size !== "medium" ? "small" : "medium"}/>;
+    } else {
+        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+    }
+}