@rebasepro/cms 0.17.3 → 0.18.0

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -1,49 +0,0 @@
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React from "react";
-
-import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-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 as string[]).map((v, index: number) =>
-                    <ErrorBoundary key={`preview_array_storage_${propertyKey}_${index}`}>
-                        <PropertyPreview
-                            propertyKey={propertyKey}
-                            value={v}
-                            property={property.of as Property}
-                            size={childSize}/>
-                    </ErrorBoundary>
-                ) : null}
-        </div>
-    );
-}

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -1,70 +0,0 @@
-import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import React from "react";
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { StringPropertyPreview } from "./StringPropertyPreview";
-import { ErrorBoundary } from "@rebasepro/ui";
-
-/**
- * @group Preview components
- */
-export function ArrayOfStringsPreview({
-    propertyKey,
-    value,
-    property: property,
-    // entity,
-    size,
-    compact
-}: 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;
-    const arrayValues = value as string[];
-
-    // One line, so the items run along it separated by a dot rather than
-    // stacking. Each still renders through the string preview: a value that is
-    // a tag stays a tag, it just sits beside its neighbours.
-    if (compact) {
-        return (
-            <span className="inline-flex items-center gap-1 min-w-0 truncate">
-                {arrayValues &&
-                    arrayValues.map((v, index: number) =>
-                        <React.Fragment key={`preview_array_strings_${propertyKey}_${index}`}>
-                            {index > 0 && <span className="opacity-40"
-                                aria-hidden={true}>·</span>}
-                            <ErrorBoundary>
-                                <StringPropertyPreview propertyKey={propertyKey}
-                                    property={stringProperty}
-                                    value={v}
-                                    compact={true}
-                                    size={size}/>
-                            </ErrorBoundary>
-                        </React.Fragment>
-                    )}
-            </span>
-        );
-    }
-
-    return (
-        <div className="flex flex-col gap-2">
-            {arrayValues &&
-                arrayValues.map((v, 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

@@ -1,79 +0,0 @@
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React from "react";
-import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-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,
-    compact
-    // 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 as Record<string, unknown>[];
-
-    if (!values) return null;
-
-    // As in {@link ArrayPropertyPreview}: blocks stacked vertically, so a
-    // single line can only report the count.
-    if (compact) {
-        return <span className={"text-sm truncate"}>
-            {values.length === 1 ? "1 block" : `${values.length} blocks`}
-        </span>;
-    }
-
-    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((val, index: number) => {
-                    const resolvedProperty = properties[val?.[typeField] as string];
-                    if (!val || !resolvedProperty) return null;
-                    return (
-                        <React.Fragment
-                            key={"preview_array_" + index}>
-                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
-                                <ErrorBoundary>
-                                    <PropertyPreview
-                                        propertyKey={propertyKey}
-                                        value={val[valueField]}
-                                        // entity={entity}
-                                        property={resolvedProperty as Property}
-                                        size={childSize}/>
-                                </ErrorBoundary>
-                            </div>
-                        </React.Fragment>
-                    );
-                })}
-        </div>
-    );
-}

package/src/preview/property_previews/ArrayPropertyEnumPreview.tsx

@@ -1,35 +0,0 @@
-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 as string[] | number[]}
-        enumValues={enumValues}
-        size={size}/>;
-}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -1,79 +0,0 @@
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React from "react";
-
-import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-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,
-    compact
-}: 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 as unknown[];
-
-    if (!values) return null;
-
-    // Each entry is a block of its own — a bordered row, sometimes a whole
-    // sub-table. Stating how many there are is the only honest one-liner.
-    if (compact) {
-        return <span className={"text-sm truncate"}>
-            {values.length === 1 ? "1 item" : `${values.length} items`}
-        </span>;
-    }
-
-    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
-
-    return (
-        <div className="w-full flex flex-col gap-2">
-            {values &&
-                values.map((val, 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={val}
-                                        property={of}
-                                        size={childSize}/>
-                                </ErrorBoundary>
-                            </div>
-                        </React.Fragment>
-                        : null;
-                }
-                )}
-        </div>
-    );
-}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -1,198 +0,0 @@
-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,
-    compact
-}: PropertyPreviewProps<MapProperty>) {
-
-    if (property.type !== "map") {
-        throw Error("Picked wrong preview component MapPropertyPreview");
-    }
-
-    const mapProperty = property as MapProperty;
-
-    // A map is a table — a row per sub-property — and a card line has room for
-    // neither the rows nor the borders between them.
-    if (compact) {
-        return <CompactMapPreview property={mapProperty}
-            value={value as Record<string, unknown> | undefined}/>;
-    }
-
-    if (!mapProperty.properties || Object.keys(mapProperty.properties ?? {}).length === 0) {
-        return (
-            <KeyValuePreview value={value}/>
-        );
-    }
-
-    if (!value) return null;
-    const mapValue = value as Record<string, unknown>;
-
-    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={mapValue[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={mapValue[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={mapValue[key]}
-                                        property={childProperty}
-                                        // entity={entity}
-                                        size={size}/>
-                                </div>
-                            }
-                        </div>
-                    );
-                })}
-        </div>
-    );
-
-}
-
-/** How many leaf values a one-line map summary shows before it gives up. */
-const COMPACT_MAP_ENTRIES = 3;
-
-/**
- * A map in one line: its first few leaf values, labelled, joined by dots.
- *
- * Nested maps and arrays are skipped rather than flattened — a line that says
- * `[object Object]` is worse than a line that says nothing about that field —
- * and a map with no leaves at all falls back to stating its size, which is at
- * least true.
- */
-function CompactMapPreview({
-    property,
-    value
-}: { property: MapProperty, value: Record<string, unknown> | undefined }) {
-
-    if (!value || typeof value !== "object") return <EmptyValue/>;
-
-    const declared = property.properties;
-    const keys = declared ? Object.keys(declared) : Object.keys(value);
-
-    const parts: string[] = [];
-    for (const key of keys) {
-        if (parts.length >= COMPACT_MAP_ENTRIES) break;
-        const childValue = value[key];
-        if (childValue === undefined || childValue === null || childValue === "") continue;
-        if (typeof childValue === "object") continue;
-        const label = declared?.[key]?.name ?? key;
-        parts.push(`${label}: ${String(childValue)}`);
-    }
-
-    if (parts.length === 0) {
-        const count = Object.keys(value).length;
-        return <Typography variant={"caption"}
-            color={"secondary"}
-            className={"truncate"}>
-            {count === 1 ? "1 field" : `${count} fields`}
-        </Typography>;
-    }
-
-    return <span className={"truncate text-sm"}>{parts.join(" · ")}</span>;
-}
-
-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

@@ -1,39 +0,0 @@
-import type { NumberProperty } from "@rebasepro/types";
-import React from "react";
-
-import { EnumValuesChip } from "../components/EnumValuesChip";
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { enumToObjectEntries } from "@rebasepro/common";
-import { useCustomizationController } from "@rebasepro/app";
-import { formatNumber } from "../../util/number_format";
-
-/**
- * @group Preview components
- */
-export function NumberPropertyPreview({
-    value,
-    property,
-    size
-}: PropertyPreviewProps<NumberProperty>): React.ReactElement {
-
-    const customizationController = useCustomizationController();
-    const numValue = value as number;
-
-    if (property.enum) {
-        const enumKey = numValue;
-        const enumValues = enumToObjectEntries(property.enum);
-        if (!enumValues)
-            return <span className={size === "small" ? "text-sm" : ""}>{numValue}</span>;
-        return <EnumValuesChip
-            enumKey={enumKey}
-            enumValues={enumValues}
-            size={size !== "medium" ? "small" : "medium"}/>;
-    } else {
-        // `admin.format` only — an undeclared number renders as the number that
-        // is in the database, which is the only thing we can honestly claim to
-        // know about it.
-        return <span className={size === "small" ? "text-sm" : ""}>
-            {formatNumber(numValue, property.admin?.format, customizationController?.locale)}
-        </span>;
-    }
-}