@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/preview/PropertyPreview.tsx

@@ -0,0 +1,292 @@
+import type { ArrayProperty, MapProperty, NumberProperty, Property, StringProperty } from "@rebasepro/types";
+import React, { createElement } 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 } from "@rebasepro/common";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+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/core";
+import { RelationPreview } from "./components/RelationPreview";
+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();
+
+    let content: React.ReactNode | any;
+    const {
+        property: inputProperty,
+        propertyKey,
+        value,
+        size,
+        height,
+        width,
+        interactive,
+        fill
+    } = props;
+
+    const property = resolveProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }) as Property | null;
+
+    if (property === null) {
+        content = <EmptyValue/>;
+    } else if (property.Preview) {
+        content = createElement(property.Preview,
+            {
+                propertyKey,
+                value,
+                property,
+                size,
+                height,
+                width,
+                // entity,
+                customProps: property.customProps
+            });
+    } 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}
+                    size={props.size}
+                    fill={fill}
+                    storagePathOrDownloadUrl={filePath}/>;
+            } else if (stringProperty.url) {
+                if (typeof stringProperty.url === "boolean")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                            url={value}
+                            fill={fill}/>;
+                else if (typeof stringProperty.url === "string")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                            url={value}
+                            interactive={interactive}
+                            fill={fill}
+                            previewType={stringProperty.url}/>;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
+            } else if (stringProperty.reference) {
+                if (typeof stringProperty.reference.path === "string") {
+                    content = <ReferencePreview
+                        disabled={!stringProperty.reference.path}
+                        previewProperties={stringProperty.reference.previewProperties}
+                        includeId={stringProperty.reference.includeId}
+                        includeEntityLink={stringProperty.reference.includeEntityLink}
+                        size={props.size}
+                        reference={new EntityReference({ id: value,
+path: stringProperty.reference.path })}
+                    />;
+                } else {
+                    content = <EmptyValue/>;
+                }
+
+            } else {
+                content = <StringPropertyPreview {...props}
+                    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}
+                        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}
+                            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}
+                        value={value}
+                        property={property as ArrayProperty}/>;
+                }
+            } else if (arrayProperty.oneOf) {
+                content = <ArrayOneOfPreview {...props}
+                    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}
+                    value={value as Record<string, any>}
+                    property={property as MapProperty}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "date") {
+        if (value instanceof Date) {
+            content = <DatePreview
+                date={value}
+                mode={property.mode}
+            />;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "reference") {
+        if (typeof property.path === "string") {
+            if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
+                content = <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
+                    size={props.size}
+                    reference={value as EntityReference}
+                />;
+            } else {
+                content = buildWrongValueType(propertyKey, property.type, value);
+            }
+        } else {
+            content = <EmptyValue/>;
+        }
+
+    } else if (property.type === "relation") {
+        if (!value) {
+            content = <EmptyValue/>;
+        } else if (Array.isArray(value)) {
+            // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
+            content = (
+                <div className="flex flex-col w-full gap-0.5">
+                    {(value as unknown[]).map((item: unknown, index: number) => {
+                        const entityRelation = normalizeToEntityRelation(item);
+                        if (!entityRelation) return null;
+                        return (
+                            <div className="w-full"
+                                key={`preview_rel_${propertyKey}_${index}`}>
+                                <RelationPreview
+                                    disabled={!property.relation}
+                                    previewProperties={property.previewProperties}
+                                    includeId={property.includeId}
+                                    includeEntityLink={property.includeEntityLink}
+                                    size={"small"}
+                                    relation={entityRelation}
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        } else {
+            // Single-cardinality relation
+            const relationValue = normalizeToEntityRelation(value);
+            if (relationValue) {
+                content = <RelationPreview
+                    disabled={!property.relation}
+                    previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
+                    size={props.size}
+                    relation={relationValue}
+                />;
+            } else {
+                content = buildWrongValueType(propertyKey, property.type, value);
+            }
+        }
+
+    } else if (property.type === "boolean") {
+        if (typeof value === "boolean") {
+            content = <BooleanPreview value={value} size={size} property={property}/>;
+        } 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);
+
+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/components/ArrayEnumPreview.tsx

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,25 @@
+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
+}: {
+    value: boolean,
+    size: PreviewSize,
+    property: Property,
+}): React.ReactElement {
+    return <div className={"flex flex-row gap-2 items-center"}>
+        <Checkbox checked={value}
+            padding={false}
+            size={size}
+            color={"secondary"}/>
+        {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

@@ -0,0 +1,93 @@
+import React from "react";
+
+import { format } from "date-fns";
+import * as locales from "date-fns/locale";
+import { useCustomizationController } from "@rebasepro/core";
+import { defaultDateFormat } from "@rebasepro/utils";
+
+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 dateUtilsLocale = customizationController?.locale ? (locales as Record<string, locales.Locale>)[customizationController.locale] : undefined;
+
+    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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,39 @@
+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/core";
+
+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>;
+}

package/src/preview/components/ImagePreview.tsx

@@ -0,0 +1,143 @@
+import { CopyIcon, ExternalLinkIcon, ImageOffIcon } from "lucide-react";
+import React, { CSSProperties, useMemo, useState, useEffect } from "react";import { IconButton, Tooltip } from "@rebasepro/ui";
+import { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { getThumbnailMeasure } from "../util";
+import { useTranslation } from "@rebasepro/core";
+
+/**
+ * @group Preview components
+ */
+export interface ImagePreviewProps {
+    size: PreviewSize,
+    url: string,
+    /**
+     * If true, image fills its container completely with object-fit cover
+     */
+    fill?: boolean
+}
+
+/**
+ * @group Preview components
+ */
+export function ImagePreview({
+    size,
+    url,
+    fill
+    }: ImagePreviewProps) {
+    const [hasError, setHasError] = useState(false);
+
+    useEffect(() => {
+        setHasError(false);
+    }, [url]);
+
+    const handleError = () => setHasError(true);
+
+    const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
+    const { t } = useTranslation();
+
+    // Fill mode - image fills its container completely
+    if (fill) {
+        if (hasError) {
+            return (
+                <div className="w-full h-full flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md">
+                    <ImageOffIcon className="text-surface-400 dark:text-surface-500"/>
+                </div>
+            );
+        }
+        return (
+            <img src={url}
+                className={"w-full h-full object-cover"}
+                key={"fill_image_preview_" + url}
+                loading="lazy"
+                onError={handleError}
+            />
+        );
+    }
+
+    if (size === "small") {
+        if (hasError) {
+            return (
+                <div className="flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md"
+                     style={{ width: imageSize,
+height: imageSize,
+maxHeight: "100%" }}>
+                    <ImageOffIcon className="text-surface-400 dark:text-surface-500"/>
+                </div>
+            );
+        }
+        return (
+            <img src={url}
+                className={"rounded-md"}
+                key={"tiny_image_preview_" + url}
+                onError={handleError}
+                style={{
+                    position: "relative",
+                    objectFit: "cover",
+                    width: imageSize,
+                    height: imageSize,
+                    maxHeight: "100%"
+                }}/>
+        );
+    }
+
+    const imageStyle: CSSProperties =
+    {
+        maxWidth: "100%",
+        maxHeight: "100%"
+    };
+
+    return (
+        <div
+            className="relative flex items-center justify-center max-w-full max-h-full group"
+            style={{
+                width: imageSize,
+                height: imageSize
+            }}
+            key={"image_preview_" + url}>
+
+            {hasError ? (
+                <div className="w-full h-full flex items-center justify-center bg-surface-100 dark:bg-surface-900 rounded-md">
+                    <ImageOffIcon className="text-surface-400 dark:text-surface-500"/>
+                </div>
+            ) : (
+                <img src={url}
+                    className={"rounded-md"}
+                    style={imageStyle}
+                    onError={handleError}/>
+            )}
+
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title={t("copy_url_to_clipboard")} side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"smallest"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <CopyIcon className={"text-surface-700 dark:text-surface-300"}/>
+                    </IconButton>
+                </Tooltip>}
+
+                <Tooltip title={t("open_image_in_new_tab")} side={"bottom"}>
+                    <IconButton
+                        className="invisible group-hover:visible"
+                        variant={"filled"}
+                        component={"a" as React.ElementType}
+                        href={url}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        size={"smallest"}
+                        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                    >
+                        <ExternalLinkIcon className={"text-surface-700 dark:text-surface-300"}/>
+                    </IconButton>
+                </Tooltip>
+            </div>
+
+        </div>
+    );
+}