@rebasepro/core 0.0.1-canary.0

package/src/preview/components/ArrayEnumPreview.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { EnumValueConfig, PreviewSize } from "@rebasepro/types";
+import { EnumValuesChip } from "./EnumValuesChip";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @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/AsyncPreviewComponent.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { Skeleton } from "@rebasepro/ui";
+
+export interface AsyncPreviewComponentProps {
+    builder: Promise<React.ReactNode>;
+}
+
+/**
+ * Utility component used to render the result of an async execution.
+ * It shows a loading indicator while at it.
+ *
+ * @group Preview components
+ */
+export const AsyncPreviewComponent = React.memo(function AsyncPreviewComponentInternal<M extends Record<string, any>>(
+    {
+        builder
+    }: AsyncPreviewComponentProps) {
+
+    const [loading, setLoading] = useState<boolean>(true);
+    const [result, setResult] = useState<React.ReactNode>(null);
+
+    useEffect(() => {
+        let unmounted = false;
+        builder
+            .then((res) => {
+                if (!unmounted) {
+                    setLoading(false);
+                    setResult(res);
+                }
+            })
+            .catch(error => {
+                setLoading(false);
+                console.error(error);
+            });
+        return () => {
+            unmounted = true;
+        };
+    }, [builder]);
+
+    if (loading)
+        return <Skeleton />;
+
+    return <React.Fragment>{result}</React.Fragment>;
+
+}
+);

package/src/preview/components/BooleanPreview.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Checkbox, cls } from "@rebasepro/ui";
+import { PreviewSize, Property } from "@rebasepro/types";
+
+/**
+ * @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,94 @@
+import React from "react";
+
+import { format } from "date-fns";
+import * as locales from "date-fns/locale";
+import { useCustomizationController } from "../../hooks";
+import { defaultDateFormat } from "@rebasepro/common";
+
+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();
+    // @ts-ignore
+    const dateUtilsLocale = customizationController?.locale ? locales[customizationController?.locale] : undefined;
+
+    if (!date) {
+        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 "../../util/enums";
+
+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,111 @@
+import React, { CSSProperties, useMemo } from "react";
+
+import { ContentCopyIcon, IconButton, OpenInNewIcon, Tooltip } from "@rebasepro/ui";
+import { PreviewSize } from "@rebasepro/types";
+import { getThumbnailMeasure } from "../util";
+
+/**
+ * @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 imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
+
+    // Fill mode - image fills its container completely
+    if (fill) {
+        return (
+            <img src={url}
+                className={"w-full h-full object-cover"}
+                key={"fill_image_preview_" + url}
+                loading="lazy"
+            />
+        );
+    }
+
+    if (size === "small") {
+        return (
+            <img src={url}
+                className={"rounded-md"}
+                key={"tiny_image_preview_" + url}
+                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}>
+
+            <img src={url}
+                className={"rounded-md"}
+                style={imageStyle} />
+
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"smallest"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                            size={"smallest"} />
+                    </IconButton>
+                </Tooltip>}
+
+                <Tooltip title="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()}
+                    >
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                            size={"smallest"} />
+                    </IconButton>
+                </Tooltip>
+            </div>
+
+        </div>
+    );
+}

package/src/preview/components/ReferencePreview.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+
+import { Entity, EntityCollection, EntityReference, PreviewSize } from "@rebasepro/types";
+import { useCustomizationController, useEntityFetch, useCollectionRegistryController } from "../../hooks";
+import { Skeleton } from "@rebasepro/ui";
+import { ErrorBoundary, ErrorView } from "../../components";
+import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
+
+export type ReferencePreviewProps = {
+    disabled?: boolean;
+    reference: EntityReference,
+    size?: PreviewSize;
+    previewProperties?: string[];
+    onClick?: (e: React.SyntheticEvent) => void;
+    hover?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
+    const reference = props.reference;
+    if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
+        console.warn("Reference preview received value of type", typeof reference);
+        return <EntityPreviewContainer
+            onClick={props.onClick}
+            size={props.size ?? "medium"}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                tooltip={JSON.stringify(reference)} />
+        </EntityPreviewContainer>;
+    }
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props} />
+    </ErrorBoundary>;
+};
+
+function ReferencePreviewInternal({
+    disabled,
+    reference,
+    previewProperties,
+    size,
+    hover,
+    onClick,
+    includeEntityLink = true,
+    includeId = true
+}: ReferencePreviewProps) {
+
+    const customizationController = useCustomizationController();
+
+    const navigationController = useCollectionRegistryController();
+
+    const collection = navigationController.getCollection(reference.path);
+    if (!collection) {
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={reference.path} />;
+        } else {
+            return <EntityPreviewContainer
+                onClick={onClick}
+                size={size ?? "medium"}>
+                <ErrorView error={"Unexpected reference value. Click to edit"}
+                    tooltip={reference.pathWithId} />
+            </EntityPreviewContainer>;
+        }
+    }
+
+    return <ReferencePreviewExisting
+        reference={reference}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        onClick={onClick}
+        hover={hover} />
+}
+
+function ReferencePreviewExisting<M extends Record<string, any> = any>({
+    reference,
+    collection,
+    previewProperties,
+    size,
+    disabled,
+    includeEntityLink,
+    includeId,
+    onClick,
+    hover
+}: ReferencePreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: reference.path,
+        entityId: reference.id,
+        collection,
+        useCache: true
+    });
+
+    if (entity) {
+        referencesCache.set(reference.pathWithId, entity);
+    }
+
+    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+
+    let body: React.ReactNode;
+
+    if (!reference) {
+        body = <ErrorView error={"Reference not set"} />;
+    } else if (usedEntity && !usedEntity.values) {
+        body = <ErrorView error={"Reference does not exist"}
+            tooltip={reference.path} />;
+    }
+    if (body) {
+
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                {body}
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <Skeleton />
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <ErrorView error={"Entity not found"} />
+            </EntityPreviewContainer>
+        );
+    }
+
+    return <EntityPreview size={size}
+        previewKeys={previewProperties}
+        disabled={disabled}
+        entity={usedEntity}
+        collection={collection}
+        onClick={onClick}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        hover={hover} />;
+
+}
+
+const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/RelationPreview.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+
+import { Entity, EntityCollection, EntityRelation, PreviewSize } from "@rebasepro/types";
+import { useCustomizationController, useEntityFetch, useCollectionRegistryController } from "../../hooks";
+import { Skeleton } from "@rebasepro/ui";
+import { EntityPreview, EntityPreviewContainer, ErrorView } from "../../components";
+
+export type RelationPreviewProps = {
+    disabled?: boolean;
+    relation: EntityRelation,
+    size?: PreviewSize;
+    previewProperties?: string[];
+    onClick?: (e: React.SyntheticEvent) => void;
+    hover?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const RelationPreview = function RelationPreview(props: RelationPreviewProps) {
+    const relation = props.relation;
+    if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
+        console.warn("Relation preview received value of type", typeof relation);
+        return <EntityPreviewContainer
+            onClick={props.onClick}
+            size={props.size}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                tooltip={JSON.stringify(relation)} />
+        </EntityPreviewContainer>;
+    }
+    return <RelationPreviewInternal {...props} />;
+};
+
+function RelationPreviewInternal({
+    disabled,
+    relation,
+    previewProperties,
+    size,
+    hover,
+    onClick,
+    includeEntityLink = true,
+    includeId = true
+}: RelationPreviewProps) {
+
+    const customizationController = useCustomizationController();
+
+    const navigationController = useCollectionRegistryController();
+
+    const collection = navigationController.getCollection(relation.path);
+    if (!collection) {
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={relation.path} />;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${relation.path}`);
+        }
+    }
+
+    return <RelationPreviewExisting
+        relation={relation}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        onClick={onClick}
+        hover={hover} />
+}
+
+function RelationPreviewExisting<M extends Record<string, any> = any>({
+    relation,
+    collection,
+    previewProperties,
+    size,
+    disabled,
+    includeEntityLink,
+    includeId,
+    onClick,
+    hover
+}: RelationPreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: relation.path,
+        entityId: relation.id,
+        collection,
+        useCache: true
+    });
+
+    if (entity) {
+        relationsCache.set(relation.pathWithId, entity);
+    }
+
+    const usedEntity = entity ?? relationsCache.get(relation.pathWithId);
+
+    let body: React.ReactNode;
+
+    if (!relation) {
+        body = <ErrorView error={"Relation not set"} />;
+    } else if (usedEntity && !usedEntity.values) {
+        body = <ErrorView error={"Relation does not exist"}
+            tooltip={relation.path} />;
+    }
+
+    if (body) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                {body}
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <Skeleton />
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <ErrorView error={"Entity not found"} />
+            </EntityPreviewContainer>
+        );
+    }
+    return <EntityPreview size={size}
+        previewKeys={previewProperties}
+        disabled={disabled}
+        entity={usedEntity}
+        collection={collection}
+        onClick={onClick}
+        includeEntityLink={includeEntityLink}
+        includeId={false}
+        hover={hover} />;
+
+}
+
+const relationsCache = new Map<string, Entity<any>>();