@rebasepro/cms 0.17.3 → 0.18.0

package/src/preview/components/ImagePreview.tsx

@@ -1,144 +0,0 @@
-import { CopyIcon, ExternalLinkIcon, ImageOffIcon } from "@rebasepro/ui";
-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/app";
-import { sanitizeUrl } 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 [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={sanitizeUrl(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>
-    );
-}

package/src/preview/components/InlineEntityListPreview.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-
-import { cls } from "@rebasepro/ui";
-
-/**
- * How many links a nested list shows before collapsing the rest into a count.
- */
-const MAX_INLINE_ITEMS = 3;
-
-export type InlineEntityListPreviewProps<T> = {
-    items: T[];
-    renderItem: (item: T, index: number) => React.ReactNode;
-    max?: number;
-    className?: string;
-};
-
-/**
- * One wrapping line of inline entity links, with the overflow collapsed into a
- * `+N`. Used for arrays of references or relations that are nested inside
- * another preview, where stacking full-width cards turns a card into a wall.
- *
- * @group Preview components
- */
-export function InlineEntityListPreview<T>({
-    items,
-    renderItem,
-    max = MAX_INLINE_ITEMS,
-    className
-}: InlineEntityListPreviewProps<T>) {
-
-    if (!items || items.length === 0) return null;
-
-    const shown = items.slice(0, max);
-    const overflow = items.length - shown.length;
-
-    return <span className={cls("inline-flex flex-wrap items-center gap-x-2 gap-y-0.5 min-w-0 max-w-full", className)}>
-        {shown.map((item, index) => renderItem(item, index))}
-        {overflow > 0 && <span className={"text-text-secondary dark:text-text-secondary-dark shrink-0"}>
-            +{overflow}
-        </span>}
-    </span>;
-}

package/src/preview/components/ReferencePreview.tsx

@@ -1,235 +0,0 @@
-
-import * as React from "react";
-
-import { EntityReference } from "@rebasepro/types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useFetch, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
-import { Skeleton } from "@rebasepro/ui";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { ErrorView } from "@rebasepro/app";
-import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
-import {
-    InlineEntityPreview,
-    InlineEntityPreviewMissing,
-    InlineEntityPreviewSkeleton
-} from "../../components/InlineEntityPreview";
-import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
-import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export type ReferencePreviewProps = {
-    disabled?: boolean;
-    reference: EntityReference,
-    size?: PreviewSize;
-    previewProperties?: string[];
-    onClick?: (e: React.SyntheticEvent) => void;
-    hover?: boolean;
-    includeEntityLink?: boolean;
-    includeId?: boolean;
-    textOnly?: boolean;
-};
-
-/**
- * @group Preview components
- */
-export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
-    const reference = props.reference;
-    const nested = useIsNestedEntityPreview();
-    if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
-        console.warn("Reference preview received value of type", typeof reference);
-        if (props.textOnly || nested) {
-            return <span>{String(reference)}</span>;
-        }
-        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>;
-};
-
-const DefaultMissingReference: React.FC<{ path: string }> = () => null;
-
-function ReferencePreviewInternalInner({
-    disabled,
-    reference,
-    previewProperties,
-    size,
-    hover,
-    onClick,
-    includeEntityLink = true,
-    includeId = true,
-    textOnly,
-    collection
-}: ReferencePreviewProps & { collection?: AdminCollection }) {
-    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
-    const nested = useIsNestedEntityPreview();
-
-    if (!collection) {
-        if (ResolvedMissingReference !== DefaultMissingReference) {
-            return <ResolvedMissingReference path={reference.path}/>;
-        } else {
-            if (textOnly) {
-                return <span>{reference.path}</span>;
-            }
-            if (nested) {
-                return <InlineEntityPreviewMissing label={String(reference.id)}
-                    tooltip={`Collection not found: ${reference.path}`}/>;
-            }
-            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}
-        textOnly={textOnly}
-        hover={hover}/>
-}
-
-function ReferencePreviewInternal(props: ReferencePreviewProps) {
-    const collectionRegistryController = useCollectionRegistryController();
-    const collection = collectionRegistryController.getCollection(props.reference.path);
-
-    const content = (
-        <ReferencePreviewInternalInner
-            {...props}
-            collection={collection}
-        />
-    );
-
-    if (collection) {
-        return (
-            <CollectionScopeProvider collection={collection}>
-                {content}
-            </CollectionScopeProvider>
-        );
-    }
-    return content;
-}
-
-function ReferencePreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
-    reference,
-    collection,
-    previewProperties,
-    size,
-    disabled,
-    includeEntityLink,
-    includeId,
-    onClick,
-    hover,
-    textOnly
-}: ReferencePreviewProps & {
-    collection: AdminCollection<M>
-}) {
-
-    const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
-    const customizationController = useCustomizationController();
-    const nested = useIsNestedEntityPreview();
-
-    // Nested inside another preview, or filling a title slot: one line of text,
-    // not a second card. See {@link InlineEntityPreview}.
-    const inline = nested || Boolean(textOnly);
-
-    const {
-        entity,
-        dataLoading,
-        dataLoadingError
-    } = useFetch({
-        path: reference.path,
-        entityId: reference.id,
-        collection,
-        useCache: true
-    });
-
-    // Only what the fetch currently reports — see the note in RelationPreview:
-    // the module-level Map that used to back this kept a deleted row on screen
-    // for the rest of the session, and across a sign-out.
-    const usedEntity = entity;
-
-    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) {
-        if (inline) {
-            return <InlineEntityPreviewMissing label={String(reference.id)}
-                tooltip={reference.pathWithId}/>;
-        }
-
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                {body}
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (dataLoading && !usedEntity) {
-        if (inline) {
-            return <InlineEntityPreviewSkeleton/>;
-        }
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                <Skeleton/>
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (!usedEntity) {
-        if (inline) {
-            return <InlineEntityPreviewMissing label={String(reference.id)}
-                tooltip={"Entity not found"}/>;
-        }
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                <ErrorView error={"Entity not found"}/>
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (inline) {
-        return <InlineEntityPreview entity={usedEntity}
-            collection={collection}
-            disabled={disabled}
-            onClick={onClick}
-            // In a title slot the row itself is the click target; only a
-            // preview nested inside a card opens its own side panel.
-            includeEntityLink={!textOnly && includeEntityLink !== false}/>;
-    }
-
-    return <ResolvedEntityPreview size={size}
-        previewKeys={previewProperties}
-        disabled={disabled}
-        entity={usedEntity}
-        collection={collection}
-        onClick={onClick}
-        includeEntityLink={includeEntityLink}
-        includeId={includeId}
-        hover={hover}/>;
-
-}

package/src/preview/components/RelationPreview.tsx

@@ -1,271 +0,0 @@
-
-import * as React from "react";
-
-import { Entity, EntityRelation } from "@rebasepro/types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useFetch, ErrorView, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
-import { Skeleton } from "@rebasepro/ui";
-import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
-import {
-    InlineEntityPreview,
-    InlineEntityPreviewMissing,
-    InlineEntityPreviewSkeleton
-} from "../../components/InlineEntityPreview";
-import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
-import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export type RelationPreviewProps = {
-    disabled?: boolean;
-    relation: EntityRelation,
-    size?: PreviewSize;
-    previewProperties?: string[];
-    onClick?: (e: React.SyntheticEvent) => void;
-    hover?: boolean;
-    includeEntityLink?: boolean;
-    includeId?: boolean;
-    textOnly?: boolean;
-};
-
-/**
- * Extract a display name from a plain relation-shaped object that isn't
- * a proper EntityRelation instance. Tries common name fields in the
- * entity's values, then falls back to the id.
- */
-function extractDisplayFromPlainObject(obj: unknown): string {
-    if (!obj || typeof obj !== "object") return "—";
-    const record = obj as Record<string, unknown>;
-
-    // Try data.values.{name,title,...} (EntityRelation.data is a Entity with .values)
-    const data = record.data;
-    if (data && typeof data === "object") {
-        const dataRecord = data as Record<string, unknown>;
-        const values = (dataRecord.values && typeof dataRecord.values === "object")
-            ? dataRecord.values as Record<string, unknown>
-            : dataRecord;
-        const nameFields = ["name", "title", "label", "display_name", "displayName", "email", "username"];
-        for (const field of nameFields) {
-            const v = values[field];
-            if (v && typeof v === "string") return v;
-        }
-    }
-
-    // Try direct fields on the object itself (some serialization paths flatten the data)
-    const directFields = ["name", "title", "label", "display_name", "displayName", "email"];
-    for (const field of directFields) {
-        const v = record[field];
-        if (v && typeof v === "string") return v;
-    }
-
-    // Last resort: show the id
-    if ("id" in record && record.id != null) return String(record.id);
-
-    return "—";
-}
-
-/**
- * @group Preview components
- */
-export const RelationPreview = function RelationPreview(props: RelationPreviewProps) {
-    const relation = props.relation;
-    const nested = useIsNestedEntityPreview();
-    if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
-        console.warn("Relation preview received value of type", typeof relation);
-        if (props.textOnly || nested) {
-            const display = extractDisplayFromPlainObject(relation);
-            return <span className="truncate">{display}</span>;
-        }
-        return <EntityPreviewContainer
-            onClick={props.onClick}
-            size={props.size}>
-            <ErrorView error={"Unexpected value. Click to edit"}
-                tooltip={JSON.stringify(relation)}/>
-        </EntityPreviewContainer>;
-    }
-    return <RelationPreviewInternal {...props}/>;
-};
-
-const DefaultMissingReference: React.FC<{ path: string }> = () => null;
-
-function RelationPreviewInternalInner({
-    disabled,
-    relation,
-    previewProperties,
-    size,
-    hover,
-    onClick,
-    includeEntityLink = true,
-    includeId = true,
-    textOnly,
-    collection
-}: RelationPreviewProps & { collection?: AdminCollection }) {
-    const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
-    const nested = useIsNestedEntityPreview();
-
-    if (!collection) {
-        if (ResolvedMissingReference !== DefaultMissingReference) {
-            return <ResolvedMissingReference path={relation.path}/>;
-        } else {
-            if (textOnly) {
-                return <span>{relation.path}</span>;
-            }
-            if (nested) {
-                return <InlineEntityPreviewMissing label={String(relation.id)}
-                    tooltip={`Collection not found: ${relation.path}`}/>;
-            }
-            return <EntityPreviewContainer size={size}>
-                <ErrorView error={`Collection not found: ${relation.path}`}/>
-            </EntityPreviewContainer>;
-        }
-    }
-
-    return <RelationPreviewExisting
-        relation={relation}
-        collection={collection}
-        previewProperties={previewProperties}
-        size={size}
-        disabled={disabled}
-        includeEntityLink={includeEntityLink}
-        includeId={includeId}
-        onClick={onClick}
-        textOnly={textOnly}
-        hover={hover}/>
-}
-
-function RelationPreviewInternal(props: RelationPreviewProps) {
-    const collectionRegistryController = useCollectionRegistryController();
-    const collection = collectionRegistryController.getCollection(props.relation.path);
-
-    const content = (
-        <RelationPreviewInternalInner
-            {...props}
-            collection={collection}
-        />
-    );
-
-    if (collection) {
-        return (
-            <CollectionScopeProvider collection={collection}>
-                {content}
-            </CollectionScopeProvider>
-        );
-    }
-    return content;
-}
-
-function RelationPreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
-    relation,
-    collection,
-    previewProperties,
-    size,
-    disabled,
-    includeEntityLink,
-    includeId,
-    onClick,
-    hover,
-    textOnly
-}: RelationPreviewProps & {
-    collection: AdminCollection<M>
-}) {
-
-    // admin wire format embeds relation data as { id, path, values }
-    const passedEntity = relation.data as Entity<M> | undefined;
-    const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
-    const customizationController = useCustomizationController();
-    const nested = useIsNestedEntityPreview();
-
-    // Nested inside another preview, or filling a title slot: one line of text,
-    // not a second card. See {@link InlineEntityPreview}.
-    const inline = nested || Boolean(textOnly);
-
-    const {
-        entity,
-        dataLoading,
-        dataLoadingError
-    } = useFetch({
-        path: relation.path,
-        entityId: passedEntity ? undefined : relation.id,
-        collection,
-        useCache: true
-    });
-
-    // Only what the fetch currently reports. There used to be a module-level
-    // Map behind this, written on every successful fetch and never invalidated:
-    // when the target row was deleted `useFetch` correctly reported it gone and
-    // the card carried on rendering the copy in the Map, so the "missing"
-    // branches below were unreachable for anything previewed this session — and
-    // the Map outlived a sign-out. `useFetch` keeps its own cache, seeds the
-    // first render from it, and clears the entry when the row disappears.
-    const usedEntity = passedEntity ?? entity;
-
-    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) {
-        if (inline) {
-            return <InlineEntityPreviewMissing label={String(relation.id)}
-                tooltip={relation.pathWithId}/>;
-        }
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                {body}
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (dataLoading && !usedEntity) {
-        if (inline) {
-            return <InlineEntityPreviewSkeleton/>;
-        }
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                <Skeleton/>
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (!usedEntity) {
-        if (inline) {
-            return <InlineEntityPreviewMissing label={String(relation.id)}
-                tooltip={"Entity not found"}/>;
-        }
-        return (
-            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
-                hover={disabled ? undefined : hover}
-                size={size}>
-                <ErrorView error={"Entity not found"}/>
-            </EntityPreviewContainer>
-        );
-    }
-
-    if (inline) {
-        return <InlineEntityPreview entity={usedEntity}
-            collection={collection}
-            disabled={disabled}
-            onClick={onClick}
-            // In a title slot the row itself is the click target; only a
-            // preview nested inside a card opens its own side panel.
-            includeEntityLink={!textOnly && includeEntityLink !== false}/>;
-    }
-
-    return <ResolvedEntityPreview size={size}
-        previewKeys={previewProperties}
-        disabled={disabled}
-        entity={usedEntity}
-        collection={collection}
-        onClick={onClick}
-        includeEntityLink={includeEntityLink}
-        includeId={false}
-        hover={hover}/>;
-
-}