@rebasepro/cms 0.17.3 → 0.18.1

package/src/preview/PropertyPreview.tsx

@@ -1,331 +0,0 @@
-import type { ArrayProperty, MapProperty, NumberProperty, Property, StringProperty } from "@rebasepro/types";
-import React, { createElement, Suspense } from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import { EntityReference, EntityRelation } from "@rebasepro/types";
-import type { PropertyPreviewProps } from "../types/components/PropertyPreviewProps";
-import { resolveProperty, normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
-import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/app";
-import { EmptyValue } from "./components/EmptyValue";
-import { UrlComponentPreview } from "./components/UrlComponentPreview";
-import { StorageThumbnail } from "./components/StorageThumbnail";
-import { Markdown } from "@rebasepro/ui";
-import { StringPropertyPreview } from "./property_previews/StringPropertyPreview";
-import { ArrayPropertyPreview } from "./property_previews/ArrayPropertyPreview";
-import { ArrayOfReferencesPreview } from "./property_previews/ArrayOfReferencesPreview";
-import { ArrayOfRelationsPreview } from "./property_previews/ArrayOfRelationsPreview";
-import { ArrayOfStorageComponentsPreview } from "./property_previews/ArrayOfStorageComponentsPreview";
-import { ArrayPropertyEnumPreview } from "./property_previews/ArrayPropertyEnumPreview";
-import { ArrayOfStringsPreview } from "./property_previews/ArrayOfStringsPreview";
-import { ArrayOneOfPreview } from "./property_previews/ArrayOneOfPreview";
-import { MapPropertyPreview } from "./property_previews/MapPropertyPreview";
-import { ReferencePreview } from "./components/ReferencePreview";
-import { DatePreview } from "./components/DatePreview";
-import { BooleanPreview } from "./components/BooleanPreview";
-import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
-import { ErrorView } from "@rebasepro/app";
-import { RelationPreview } from "./components/RelationPreview";
-import { InlineEntityListPreview } from "./components/InlineEntityListPreview";
-import { useIsNestedEntityPreview } from "../components/EntityPreviewNesting";
-import { markdownToPlainText } from "./compact_text";
-import { UserPreview } from "./components/UserPreview";
-
-/**
- * @group Preview components
- */
-export const PropertyPreview = React.memo(function PropertyPreview<P extends Property>(props: PropertyPreviewProps<P>) {
-
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-    const nested = useIsNestedEntityPreview();
-
-    let content: React.ReactNode | any;
-    const {
-        property: inputProperty,
-        propertyKey,
-        value,
-        size,
-        height,
-        width,
-        interactive,
-        fill
-    } = props;
-
-    // A preview rendered inside an entity preview fills one line of a card and
-    // has no room to grow — see {@link PropertyPreviewProps.compact}. The card
-    // is the thing that knows this, and it says so by opening a nesting
-    // boundary, so the depth is the signal rather than a prop every caller
-    // between here and there would have to forward.
-    const compact = props.compact ?? (nested || Boolean(props.textOnly));
-
-    const property = resolveProperty({
-        propertyKey,
-        property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs,
-        authController
-    }) as Property | null;
-
-    if (property === null) {
-        content = <EmptyValue/>;
-    } else if (property.admin?.Preview) {
-        const ResolvedPreview = resolveComponentRef(property.admin.Preview) as React.ComponentType<PropertyPreviewProps<Property>> | undefined;
-        if (ResolvedPreview) {
-            content = <Suspense fallback={null}>
-                {createElement(ResolvedPreview,
-                    {
-                        propertyKey,
-                        value,
-                        property,
-                        size,
-                        height,
-                        width,
-                        customProps: property.admin?.customProps
-                    })}
-            </Suspense>;
-        }
-    } else if (value === undefined || value === null) {
-        content = <EmptyValue/>;
-    } else if (property.type === "string") {
-        const stringProperty = property as StringProperty;
-        if (typeof value === "string") {
-            if (stringProperty.storage) {
-                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
-                content = <StorageThumbnail
-                    interactive={interactive}
-                    storeUrl={property.storage?.storeUrl ?? false}
-                    storageSourceKey={stringProperty.storage.storageSource}
-                    size={props.size}
-                    fill={fill}
-                    storagePathOrDownloadUrl={filePath}/>;
-            } else if (stringProperty.admin?.urlPreview) {
-                if (typeof stringProperty.admin?.urlPreview === "boolean")
-                    content =
-                        <UrlComponentPreview size={props.size}
-                            url={value}
-                            fill={fill}/>;
-                else if (typeof stringProperty.admin?.urlPreview === "string")
-                    content =
-                        <UrlComponentPreview size={props.size}
-                            url={value}
-                            interactive={interactive}
-                            fill={fill}
-                            previewType={stringProperty.admin?.urlPreview}/>;
-            } else if (stringProperty.admin?.markdown) {
-                content = compact
-                    ? <span className={"text-sm"}>{markdownToPlainText(value)}</span>
-                    : <Markdown source={value} size={"small"}/>;
-            } else if (stringProperty.userSelect) {
-                content = <UserPreview
-                    value={value}
-                    property={stringProperty}
-                    propertyKey={propertyKey}
-                    size={props.size}
-                />;
-            } else {
-                content = <StringPropertyPreview {...props}
-                    compact={compact}
-                    property={stringProperty}
-                    value={value}/>;
-            }
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else if (property.type === "array") {
-        if (Array.isArray(value)) {
-            const arrayProperty = property as ArrayProperty;
-            if (!arrayProperty.of && !arrayProperty.oneOf) {
-                throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
-            }
-
-            if (arrayProperty.of) {
-                if (Array.isArray(arrayProperty.of)) {
-                    content = <ArrayPropertyPreview {...props}
-                        compact={compact}
-                        value={value}
-                        property={arrayProperty}/>;
-                } else if (arrayProperty.of.type === "reference") {
-                    content = <ArrayOfReferencesPreview {...props}
-                        value={value}
-                        property={property}/>;
-                } else if (arrayProperty.of.type === "relation") {
-                    content = <ArrayOfRelationsPreview {...props}
-                        value={value}
-                        property={property}/>;
-                } else if (arrayProperty.of.type === "string") {
-                    if (arrayProperty.of.enum) {
-                        content = <ArrayPropertyEnumPreview
-                            {...props}
-                            value={value}
-                            property={property}/>;
-                    } else if (arrayProperty.of.storage) {
-                        content = <ArrayOfStorageComponentsPreview
-                            {...props}
-                            value={value}
-                            property={property as ArrayProperty}/>;
-                    } else {
-                        content = <ArrayOfStringsPreview
-                            {...props}
-                            compact={compact}
-                            property={property as ArrayProperty}
-                            value={value as string[]}/>;
-                    }
-                } else if (arrayProperty.of.type === "number" && arrayProperty.of.enum) {
-                    content = <ArrayPropertyEnumPreview
-                        {...props}
-                        value={value as number[]}
-                        property={property as ArrayProperty}/>;
-                } else {
-                    content = <ArrayPropertyPreview {...props}
-                        compact={compact}
-                        value={value}
-                        property={property as ArrayProperty}/>;
-                }
-            } else if (arrayProperty.oneOf) {
-                content = <ArrayOneOfPreview {...props}
-                    compact={compact}
-                    value={value}
-                    property={property as ArrayProperty}/>;
-            }
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else if (property.type === "map") {
-        if (typeof value === "object") {
-            content =
-                <MapPropertyPreview {...props}
-                    compact={compact}
-                    value={value as Record<string, any>}
-                    property={property as MapProperty}/>;
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else if (property.type === "date") {
-        // Not every caller comes through the data layer's Date coercion: the
-        // revision history renders raw API payloads, where a timestamp is still
-        // the string Postgres sent (`2026-06-19 17:20:33.032+02`). Requiring a
-        // `Date` instance turned every audit column in every history entry into
-        // a red "Unexpected value" box.
-        const date = asDate(value);
-        if (date) {
-            content = <DatePreview
-                date={date}
-                mode={property.mode}
-            />;
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else if (property.type === "reference") {
-        if (typeof property.path === "string") {
-            if (typeof value === "object" && value !== null && "isEntityReference" in value && (value as EntityReference).isEntityReference()) {
-                content = <ReferencePreview
-                    disabled={!property.path}
-                    previewProperties={property.admin?.previewProperties}
-                    includeId={property.admin?.includeId}
-                    includeEntityLink={property.admin?.includeEntityLink}
-                    size={props.size}
-                    reference={value as EntityReference}
-                    textOnly={props.textOnly}
-                />;
-            } else {
-                content = buildWrongValueType(propertyKey, property.type, value);
-            }
-        } else {
-            content = <EmptyValue/>;
-        }
-
-    } else if (property.type === "relation") {
-        // A relation column arrives either hydrated or as the bare foreign key,
-        // depending on the fetch path. The declared target resolves the latter;
-        // see `normalizeToEntityRelation`.
-        const relationTargetPath = getRelationTargetPath(property);
-        if (!value) {
-            content = <EmptyValue/>;
-        } else if (Array.isArray(value)) {
-            // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
-            const relations = (value as unknown[])
-                .map(item => normalizeToEntityRelation(item, "relation", relationTargetPath))
-                .filter(Boolean) as EntityRelation[];
-            const renderRelation = (entityRelation: EntityRelation, index: number) => <RelationPreview
-                key={`preview_rel_${propertyKey}_${index}`}
-                disabled={!property.relation}
-                previewProperties={property.admin?.previewProperties}
-                includeId={property.admin?.includeId}
-                includeEntityLink={property.admin?.includeEntityLink}
-                size={"small"}
-                relation={entityRelation}
-                textOnly={props.textOnly}
-            />;
-
-            content = nested || props.textOnly
-                // See ArrayOfReferencesPreview: nested lists stay on one line.
-                ? <InlineEntityListPreview items={relations}
-                    renderItem={renderRelation}/>
-                : (
-                    <div className="flex flex-col w-full gap-0.5">
-                        {relations.map((entityRelation, index) => (
-                            <div className="w-full"
-                                key={`preview_rel_wrapper_${propertyKey}_${index}`}>
-                                {renderRelation(entityRelation, index)}
-                            </div>
-                        ))}
-                    </div>
-                );
-        } else {
-            // Single-cardinality relation
-            const relationValue = normalizeToEntityRelation(value, "relation", relationTargetPath);
-            if (relationValue) {
-                content = <RelationPreview
-                    disabled={!property.relation}
-                    previewProperties={property.admin?.previewProperties}
-                    includeId={property.admin?.includeId}
-                    includeEntityLink={property.admin?.includeEntityLink}
-                    size={props.size}
-                    relation={relationValue}
-                    textOnly={props.textOnly}
-                />;
-            } else {
-                content = buildWrongValueType(propertyKey, property.type, value);
-            }
-        }
-
-    } else if (property.type === "boolean") {
-        if (typeof value === "boolean") {
-            content = <BooleanPreview value={value} size={size} property={property} hideLabel={props.hideLabel}/>;
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else if (property.type === "number") {
-        if (typeof value === "number") {
-            content = <NumberPropertyPreview {...props}
-                value={value}
-                property={property as NumberProperty}/>;
-        } else {
-            content = buildWrongValueType(propertyKey, property.type, value);
-        }
-    } else {
-        content = JSON.stringify(value);
-    }
-
-    return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
-        ? <EmptyValue/>
-        : content;
-}, equal);
-
-/**
- * A `Date`, or a string/number that unambiguously names one. Returns null for
- * anything else, so an actual type mismatch still reports as one.
- */
-function asDate(value: unknown): Date | null {
-    if (value instanceof Date) return isNaN(value.getTime()) ? null : value;
-    if (typeof value !== "string" && typeof value !== "number") return null;
-    const parsed = new Date(value);
-    return isNaN(parsed.getTime()) ? null : parsed;
-}
-
-function buildWrongValueType(name: string | undefined, type: string, value: any) {
-    console.warn(`Unexpected value for property ${name}, of type ${type}`, value);
-    return (
-        <ErrorView title={"Unexpected value"}
-            error={`${JSON.stringify(value)}`}/>
-    );
-}

package/src/preview/compact_text.ts

@@ -1,68 +0,0 @@
-/**
- * Turning block content into the one line a compact preview has room for.
- *
- * A preview slot inside a card is a single line that cannot grow. Rendering
- * Markdown there does not produce a small version of the document — it
- * produces the whole document, headings and lists included, inside a 44px box.
- * These helpers take the opening line instead, which is what a person reads
- * off a card anyway.
- */
-
-/** Longer than any card line; the cap only keeps the DOM node small. */
-const DEFAULT_MAX_LENGTH = 280;
-
-const FENCED_CODE = /```[\s\S]*?```|~~~[\s\S]*?~~~/g;
-const HTML_TAG = /<[^>]*>/g;
-const IMAGE = /!\[([^\]]*)\]\([^)]*\)/g;
-const LINK = /\[([^\]]*)\]\([^)]*\)/g;
-const REFERENCE_LINK = /\[([^\]]*)\]\[[^\]]*\]/g;
-const HEADING = /^\s{0,3}#{1,6}\s+/gm;
-const BLOCKQUOTE = /^\s{0,3}>\s?/gm;
-const LIST_MARKER = /^\s*(?:[-*+]|\d+[.)])\s+/gm;
-const THEMATIC_BREAK = /^\s{0,3}(?:[-*_]\s*){3,}$/gm;
-const TABLE_PIPE = /[|]/g;
-const EMPHASIS = /(\*\*|__|\*|_|~~|`)/g;
-
-/**
- * The readable text of a Markdown document, as one line.
- *
- * Deliberately a lexical strip rather than a parse: this runs once per preview
- * cell in a table that can hold hundreds, and the result is truncated to a line
- * regardless, so the cost of being exactly right is not worth paying. Anything
- * it fails to strip degrades to a stray `*`, never to a broken layout.
- */
-export function markdownToPlainText(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
-    if (!source) return "";
-
-    const text = source
-        .replace(FENCED_CODE, " ")
-        .replace(IMAGE, "$1")
-        .replace(LINK, "$1")
-        .replace(REFERENCE_LINK, "$1")
-        .replace(THEMATIC_BREAK, " ")
-        .replace(HEADING, "")
-        .replace(BLOCKQUOTE, "")
-        .replace(LIST_MARKER, "")
-        .replace(HTML_TAG, "")
-        .replace(TABLE_PIPE, " ")
-        .replace(EMPHASIS, "");
-
-    return collapseToSingleLine(text, maxLength);
-}
-
-/**
- * Whitespace — including the newlines that would otherwise let a `truncate`
- * container grow — collapsed to single spaces, capped to `maxLength`.
- */
-export function collapseToSingleLine(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
-    if (!source) return "";
-    const collapsed = source.replace(/\s+/g, " ").trim();
-    if (collapsed.length <= maxLength) return collapsed;
-    // Cut at a word boundary when there is one nearby, so the line does not end
-    // mid-word for the sake of ten characters.
-    const cut = collapsed.slice(0, maxLength);
-    // The cut already landed between words: keep the last one whole.
-    if (collapsed[maxLength] === " ") return cut.trimEnd() + "…";
-    const lastSpace = cut.lastIndexOf(" ");
-    return (lastSpace > maxLength * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
-}

package/src/preview/components/ArrayEnumPreview.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { EnumValueConfig } from "@rebasepro/types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { EnumValuesChip } from "./EnumValuesChip";
-import { ErrorBoundary } from "@rebasepro/ui";
-
-/**
- * @group Preview components
- */
-export function ArrayEnumPreview({
-    name,
-    value,
-    enumValues,
-    size
-}: {
-    value: string[] | number[],
-    name: string | undefined,
-    enumValues: EnumValueConfig[],
-    size: PreviewSize
-}) {
-
-    return (
-        <div className="flex flex-wrap gap-1.5">
-            {value && value.map((enumKey, index) => {
-                return (
-                    <ErrorBoundary
-                        key={`preview_array_ref_${name}_${index}`}>
-                        <EnumValuesChip
-                            enumKey={enumKey}
-                            enumValues={enumValues}
-                            size={size !== "medium" ? "small" : "medium"}/>
-                    </ErrorBoundary>
-                );
-            }
-            )}
-        </div>
-    );
-}

package/src/preview/components/BooleanPreview.tsx

@@ -1,28 +0,0 @@
-import type { Property } from "@rebasepro/types";
-import React from "react";
-import { Checkbox, cls } from "@rebasepro/ui";
-import { PreviewSize } from "../../types/components/PropertyPreviewProps";
-/**
- * @group Preview components
- */
-export function BooleanPreview({
-    value,
-    size,
-    property,
-    hideLabel
-}: {
-    value: boolean,
-    size: PreviewSize,
-    property: Property,
-    /** The caller already shows the name — see `PropertyPreviewProps.hideLabel`. */
-    hideLabel?: boolean,
-}): React.ReactElement {
-    return <div className={"flex flex-row gap-2 items-center"}>
-        <Checkbox checked={value}
-            padding={false}
-            size={size}
-            color={"secondary"}/>
-        {!hideLabel && property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
-    </div>;
-}

package/src/preview/components/DatePreview.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-
-import { format } from "date-fns";
-import { useCustomizationController } from "@rebasepro/app";
-import { defaultDateFormat } from "@rebasepro/utils";
-import { getLoadedDateFnsLocale, loadDateFnsLocale } from "./date_fns_locales";
-
-export interface DatePreviewProps {
-    date: Date;
-    /**
-     * Display mode: "date" for date-only, "date_time" for date and time
-     */
-    mode?: "date" | "date_time";
-    /**
-     * IANA timezone identifier (e.g., "America/New_York")
-     * When specified, the date will be displayed in this timezone
-     */
-    timezone?: string;
-}
-
-/**
- * @group Preview components
- */
-export function DatePreview({
-    date,
-    mode = "date_time",
-    timezone
-}: DatePreviewProps): React.ReactElement {
-
-    const customizationController = useCustomizationController();
-    const configuredLocale = customizationController?.locale;
-
-    // The locale arrives asynchronously now (see `date_fns_locales`). Seed from
-    // the cache so only the very first date on a page renders un-localised: by
-    // the time a table of them mounts, the module is already resolved and there
-    // is no second pass.
-    const [dateUtilsLocale, setDateUtilsLocale] = React.useState(() => getLoadedDateFnsLocale(configuredLocale));
-    React.useEffect(() => {
-        let cancelled = false;
-        loadDateFnsLocale(configuredLocale)
-            .then(loaded => { if (!cancelled) setDateUtilsLocale(loaded); })
-            .catch(error => console.error(`[rebase] could not load the "${configuredLocale}" date locale`, error));
-        return () => { cancelled = true; };
-    }, [configuredLocale]);
-
-    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
-        return <></>;
-    }
-
-    // If timezone is specified, format in that timezone using Intl.DateTimeFormat
-    if (timezone) {
-        const options: Intl.DateTimeFormatOptions = {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-            timeZone: timezone
-        };
-
-        if (mode === "date_time") {
-            options.hour = "2-digit";
-            options.minute = "2-digit";
-        }
-
-        const formatter = new Intl.DateTimeFormat(customizationController?.locale ?? "en-US", options);
-        const formattedDate = formatter.format(date);
-
-        // Get timezone abbreviation
-        const tzFormatter = new Intl.DateTimeFormat("en-US", {
-            timeZone: timezone,
-            timeZoneName: "short"
-        });
-        const parts = tzFormatter.formatToParts(date);
-        const tzAbbrev = parts.find(p => p.type === "timeZoneName")?.value ?? "";
-
-        return (
-            <span className="flex items-center gap-1">
-                {formattedDate}
-                {tzAbbrev && (
-                    <span className="text-xs text-slate-500 dark:text-slate-400">
-                        ({tzAbbrev})
-                    </span>
-                )}
-            </span>
-        );
-    }
-
-    // No timezone specified: use local formatting with date-fns
-    let dateFormat: string;
-    if (mode === "date") {
-        // Date-only format (no time)
-        dateFormat = customizationController?.dateTimeFormat
-            ? customizationController.dateTimeFormat.replace(/[, ]*[HhKk].*$/, "").trim()
-            : "PP"; // e.g., "Apr 29, 2024"
-    } else {
-        // Full date-time format
-        dateFormat = customizationController?.dateTimeFormat ?? defaultDateFormat;
-    }
-
-    const formattedDate = format(date, dateFormat, { locale: dateUtilsLocale });
-
-    return (
-        <>
-            {formattedDate}
-        </>
-    );
-}

package/src/preview/components/EmptyValue.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-
-/**
- * @group Preview components
- */
-export function EmptyValue({ className }: { className?: string }) {
-
-    return <div
-        className="rounded-full bg-surface-200 bg-opacity-30 bg-surface-200/30 dark:bg-opacity-20 dark:bg-surface-200/20 w-5 h-2 inline-block"/>;
-}

package/src/preview/components/EnumValuesChip.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { Chip } from "@rebasepro/ui";
-import { EnumValues } from "@rebasepro/types";
-import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
-import { buildEnumLabel, getColorScheme } from "@rebasepro/app";
-
-export interface EnumValuesChipProps {
-    enumValues?: EnumValues;
-    enumKey: string | number;
-    size: "small" | "medium" | "large";
-    className?: string;
-    children?: React.ReactNode;
-}
-
-/**
- * @group Preview components
- */
-export function EnumValuesChip({
-    enumValues,
-    enumKey,
-    size,
-    className,
-    children
-}: EnumValuesChipProps) {
-    if (!enumValues) return null;
-    const enumValuesConfig = enumToObjectEntries(enumValues);
-    const enumValue = enumKey !== undefined ? getLabelOrConfigFrom(enumValuesConfig, enumKey) : undefined;
-    const label = buildEnumLabel(enumValue);
-    const colorScheme = getColorScheme(enumValuesConfig, enumKey);
-    return <Chip
-        className={className}
-        colorScheme={colorScheme}
-        error={!label}
-        outlined={false}
-        size={size}>
-        {children}
-        {!children && (label !== undefined ? label : String(enumKey))}
-    </Chip>;
-}