@rebasepro/cms 0.17.3 → 0.18.0

package/src/preview/components/StorageThumbnail.tsx

@@ -1,147 +0,0 @@
-import React, { useEffect } from "react";
-
-import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
-import { UrlComponentPreview } from "./UrlComponentPreview";
-import { ErrorView, useStorageSource, useStorageSources, useTranslation } from "@rebasepro/app";
-import { resolveStorageSource } from "@rebasepro/common";
-import { DownloadConfig, FileType } from "@rebasepro/types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { Skeleton } from "@rebasepro/ui";
-type StorageThumbnailProps = {
-    storagePathOrDownloadUrl: string;
-    storeUrl: boolean;
-    size: PreviewSize;
-    interactive?: boolean;
-    fill?: boolean;
-    /** Key of the storage source backing this property (`StorageConfig.storageSource`). */
-    storageSourceKey?: string;
-};
-
-/**
- * @group Preview components
- */
-export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbnailInternal, areEqual) as React.FunctionComponent<StorageThumbnailProps>;
-
-function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
-    return prevProps.size === nextProps.size &&
-        prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl &&
-        prevProps.interactive === nextProps.interactive &&
-        prevProps.fill === nextProps.fill &&
-        prevProps.storageSourceKey === nextProps.storageSourceKey;
-}
-
-const URL_CACHE: Record<string, DownloadConfig> = {};
-
-/**
- * The signed-URL request currently in flight for a given cache key.
- *
- * A collection view draws one thumbnail per row and rows share images far more
- * often than not — the demo's 200 blog posts are illustrated by 20 hero images.
- * Every one of those thumbnails mounts in the same tick, and each used to call
- * `getSignedUrl` on its own: {@link URL_CACHE} is only written when a response
- * *lands*, so it is still empty while the burst goes out and dedupes nothing.
- * The result was five or more identical requests per distinct file, and minting
- * a download token is a real request — `/api/storage/metadata/<path>` — against
- * a rate-limited surface. One page view was enough to exhaust the budget and
- * every thumbnail on the screen then failed with a 429.
- *
- * Sharing the promise collapses that burst to one request per file. It
- * deliberately does not extend how long anything is cached: `DownloadConfig.url`
- * is temporal, so a later mount still refetches exactly as it did before.
- */
-const IN_FLIGHT = new Map<string, Promise<DownloadConfig>>();
-
-function getSignedUrlOnce(
-    storage: { getSignedUrl: (path: string) => Promise<DownloadConfig> },
-    path: string,
-    cacheKey: string
-): Promise<DownloadConfig> {
-    const existing = IN_FLIGHT.get(cacheKey);
-    if (existing) return existing;
-
-    const request = storage.getSignedUrl(path).finally(() => {
-        IN_FLIGHT.delete(cacheKey);
-    });
-    IN_FLIGHT.set(cacheKey, request);
-    return request;
-}
-
-export function StorageThumbnailInternal({
-    storeUrl,
-    interactive,
-    storagePathOrDownloadUrl,
-    size,
-    fill,
-    storageSourceKey
-}: StorageThumbnailProps) {
-
-    const { t } = useTranslation();
-    const [error, setError] = React.useState<Error | undefined>(undefined);
-    const defaultStorage = useStorageSource();
-    const storageSources = useStorageSources();
-    // Resolve the per-property backend so previews of `storeUrl: false`
-    // properties pointing at a named source hit the right backend.
-    const storage = resolveStorageSource({
-        sourceKey: storageSourceKey,
-        sources: storageSources.sources,
-        defaultSource: defaultStorage
-    });
-
-    // Cache key is namespaced by source so the same path on two backends
-    // does not collide.
-    const cacheKey = `${storageSourceKey ?? ""}::${storagePathOrDownloadUrl}`;
-
-    const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[cacheKey]);
-
-    useEffect(() => {
-        if (!storagePathOrDownloadUrl)
-            return;
-        let unmounted = false;
-        getSignedUrlOnce(storage, storagePathOrDownloadUrl, cacheKey)
-            .then(function (downloadConfig) {
-                if (!unmounted) {
-                    setDownloadConfig(downloadConfig);
-                    URL_CACHE[cacheKey] = downloadConfig;
-                }
-            }).catch(setError);
-        return () => {
-            unmounted = true;
-        };
-    }, [storagePathOrDownloadUrl, cacheKey]);
-
-    if (!storagePathOrDownloadUrl) return null;
-
-    const filetype = downloadConfig?.metadata ? getFiletype(downloadConfig?.metadata.contentType) : undefined;
-    const previewType = filetype?.startsWith("image")
-        ? "image"
-        : (filetype?.startsWith("video")
-            ? "video"
-            : (filetype?.startsWith("audio") ? "audio" : "file"));
-
-    if (downloadConfig?.fileNotFound)
-        // `file_not_found` is translated into seven locales and this rendered
-        // the English literal, so a German panel said "File not found".
-        return <ErrorView error={t("file_not_found")}></ErrorView>
-
-    return downloadConfig?.url
-        ? <UrlComponentPreview previewType={previewType}
-            url={downloadConfig.url}
-            interactive={interactive}
-            size={size}
-            fill={fill}
-            hint={storagePathOrDownloadUrl}/>
-        : fill
-            ? <Skeleton className="w-full h-full"/>
-            : renderSkeletonImageThumbnail(size);
-}
-
-function getFiletype(input: string): FileType {
-    if (input.startsWith("image")) return "image/*";
-    else if (input.startsWith("video")) return "video/*";
-    else if (input.startsWith("audio")) return "audio/*";
-    else if (input.startsWith("application")) return "application/*";
-    else if (input.startsWith("text")) return "text/*";
-    else if (input.startsWith("font")) return "font/*";
-    else return input;
-}

package/src/preview/components/UrlComponentPreview.tsx

@@ -1,116 +0,0 @@
-import React, { useMemo } from "react";
-
-import { ImagePreview } from "./ImagePreview";
-import { PreviewType } from "@rebasepro/cms-types";
-import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { cls, ExternalLinkIcon, FileTextIcon, Tooltip, Typography } from "@rebasepro/ui";
-import { EmptyValue } from "./EmptyValue";
-import { getThumbnailMeasure, sanitizeUrl } from "../util";
-
-export { sanitizeUrl };
-
-/**
- * @group Preview components
- */
-export function UrlComponentPreview({
-    url,
-    previewType,
-    size,
-    hint,
-    interactive = true,
-    fill
-}: {
-    url: string,
-    previewType?: PreviewType,
-    size: PreviewSize,
-    hint?: string,
-    // for video controls
-    interactive?: boolean,
-    fill?: boolean
-}): React.ReactElement {
-
-    if (!previewType) {
-        if (!url || !url.trim()) return <EmptyValue/>;
-        return (
-            <a className="flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary"
-                href={sanitizeUrl(url)}
-                rel="noopener noreferrer"
-                onMouseDown={(e: React.MouseEvent) => {
-                    e.preventDefault();
-                }}
-                target="_blank">
-                <ExternalLinkIcon/>
-                {url}
-            </a>
-        );
-    }
-
-    if (previewType === "image") {
-        return <ImagePreview url={url}
-            size={size}
-            fill={fill}/>;
-    } else if (previewType === "audio") {
-        return <audio controls
-            className={"max-w-100%"}
-            src={url}>
-            Your browser does not support the
-            <code>audio</code> element.
-        </audio>;
-    } else if (previewType === "video") {
-        return <VideoPreview size={size} src={url} interactive={interactive}/>;
-    } else {
-        return (
-            <Tooltip title={hint}>
-                <a
-                    href={sanitizeUrl(url)}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    onClick={(e) => e.stopPropagation()}
-                    className="flex flex-col items-center justify-center"
-                    style={{
-                        width: getThumbnailMeasure(size),
-                        height: getThumbnailMeasure(size)
-                    }}>
-                    <FileTextIcon className="text-surface-700 dark:text-surface-300"/>
-                    {hint && <Typography
-                        className="max-w-full truncate rtl text-left"
-                        variant={"caption"}>{hint}</Typography>}
-                </a>
-            </Tooltip>
-        );
-    }
-}
-
-function VideoPreview({
-    size,
-    src,
-    interactive
-}: { size: PreviewSize, src: string, interactive: boolean }) {
-
-    const imageSize = useMemo(() => {
-        if (size === "small")
-            return "140px";
-        else if (size === "medium")
-            return "240px";
-        else if (size === "large")
-            return "100%";
-        else throw new Error("Invalid size");
-    }, [size]);
-
-    const videoProps = {
-        controls: interactive
-    };
-    return <video
-        style={{
-            position: "relative",
-            objectFit: "cover",
-            width: imageSize,
-            minWidth: "140px",
-            // height: imageSize,
-            maxHeight: "100%"
-        }}
-        {...videoProps}
-        className={cls("max-w-100% rounded-xs", { "pointer-events-none": !interactive })}>
-        <source src={src}/>
-    </video>;
-}

package/src/preview/components/UserPreview.tsx

@@ -1,30 +0,0 @@
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import type { StringProperty } from "@rebasepro/types";
-import React from "react";
-import { EmptyValue } from "./EmptyValue";
-import { Typography } from "@rebasepro/ui";
-import { getUserLabel, useResolvedUser } from "../../hooks/useResolvedUsers";
-
-/**
- * Preview component for displaying a user reference value.
- *
- * Resolves the stored auth user id to a name (or email) the same way a
- * relation resolves its target, and falls back to the raw id only while the
- * lookup is in flight or when the user cannot be resolved.
- *
- * @group Preview components
- */
-export function UserPreview({ value }: PropertyPreviewProps<StringProperty>) {
-    const uid = typeof value === "string" && value ? value : undefined;
-    const user = useResolvedUser(uid);
-
-    if (!uid) {
-        return <EmptyValue/>;
-    }
-
-    return <Typography variant={"caption"}
-        color={"secondary"}
-        className={"truncate"}>
-        {user ? getUserLabel(user) : uid}
-    </Typography>;
-}

package/src/preview/components/date_fns_locales.ts

@@ -1,125 +0,0 @@
-import type { Locale as LocaleKey } from "@rebasepro/cms-types";
-import type { Locale as DateFnsLocale } from "date-fns";
-
-/**
- * One date-fns locale, fetched when the admin is actually configured to use it.
- *
- * `DatePreview` used to open with:
- *
- *     import * as locales from "date-fns/locale";
- *
- * and then index that namespace with the configured locale. A namespace import
- * of a barrel is a reference to every member of it, so all ~77 locales were
- * bundled — 640 kB, in the entry chunk's static graph, to format dates in the
- * one locale a given deployment has configured (and `undefined`, meaning
- * en-US, for nearly all of them).
- *
- * A map of thunks is written out rather than derived from the locale key,
- * because `import(`date-fns/locale/${name}`)` is not statically analysable:
- * the bundler cannot see which modules it must emit, and the import fails at
- * runtime in a build. Each entry below is its own async chunk, and exactly one
- * of them is ever fetched.
- *
- * `fil` is in the `Locale` union and has no date-fns locale to import; it
- * resolved to `undefined` through the namespace too, so it still does.
- */
-const dateFnsLocaleLoaders: Partial<Record<LocaleKey, () => Promise<DateFnsLocale>>> = {
-    af: () => import("date-fns/locale/af").then(m => m.af),
-    ar: () => import("date-fns/locale/ar").then(m => m.ar),
-    arDZ: () => import("date-fns/locale/ar-DZ").then(m => m.arDZ),
-    arMA: () => import("date-fns/locale/ar-MA").then(m => m.arMA),
-    arSA: () => import("date-fns/locale/ar-SA").then(m => m.arSA),
-    az: () => import("date-fns/locale/az").then(m => m.az),
-    be: () => import("date-fns/locale/be").then(m => m.be),
-    bg: () => import("date-fns/locale/bg").then(m => m.bg),
-    bn: () => import("date-fns/locale/bn").then(m => m.bn),
-    ca: () => import("date-fns/locale/ca").then(m => m.ca),
-    cs: () => import("date-fns/locale/cs").then(m => m.cs),
-    cy: () => import("date-fns/locale/cy").then(m => m.cy),
-    da: () => import("date-fns/locale/da").then(m => m.da),
-    de: () => import("date-fns/locale/de").then(m => m.de),
-    el: () => import("date-fns/locale/el").then(m => m.el),
-    enAU: () => import("date-fns/locale/en-AU").then(m => m.enAU),
-    enCA: () => import("date-fns/locale/en-CA").then(m => m.enCA),
-    enGB: () => import("date-fns/locale/en-GB").then(m => m.enGB),
-    enIN: () => import("date-fns/locale/en-IN").then(m => m.enIN),
-    enNZ: () => import("date-fns/locale/en-NZ").then(m => m.enNZ),
-    enUS: () => import("date-fns/locale/en-US").then(m => m.enUS),
-    eo: () => import("date-fns/locale/eo").then(m => m.eo),
-    es: () => import("date-fns/locale/es").then(m => m.es),
-    et: () => import("date-fns/locale/et").then(m => m.et),
-    eu: () => import("date-fns/locale/eu").then(m => m.eu),
-    faIR: () => import("date-fns/locale/fa-IR").then(m => m.faIR),
-    fi: () => import("date-fns/locale/fi").then(m => m.fi),
-    fr: () => import("date-fns/locale/fr").then(m => m.fr),
-    frCA: () => import("date-fns/locale/fr-CA").then(m => m.frCA),
-    frCH: () => import("date-fns/locale/fr-CH").then(m => m.frCH),
-    gd: () => import("date-fns/locale/gd").then(m => m.gd),
-    gl: () => import("date-fns/locale/gl").then(m => m.gl),
-    gu: () => import("date-fns/locale/gu").then(m => m.gu),
-    he: () => import("date-fns/locale/he").then(m => m.he),
-    hi: () => import("date-fns/locale/hi").then(m => m.hi),
-    hr: () => import("date-fns/locale/hr").then(m => m.hr),
-    hu: () => import("date-fns/locale/hu").then(m => m.hu),
-    hy: () => import("date-fns/locale/hy").then(m => m.hy),
-    id: () => import("date-fns/locale/id").then(m => m.id),
-    is: () => import("date-fns/locale/is").then(m => m.is),
-    it: () => import("date-fns/locale/it").then(m => m.it),
-    ja: () => import("date-fns/locale/ja").then(m => m.ja),
-    ka: () => import("date-fns/locale/ka").then(m => m.ka),
-    kk: () => import("date-fns/locale/kk").then(m => m.kk),
-    kn: () => import("date-fns/locale/kn").then(m => m.kn),
-    ko: () => import("date-fns/locale/ko").then(m => m.ko),
-    lb: () => import("date-fns/locale/lb").then(m => m.lb),
-    lt: () => import("date-fns/locale/lt").then(m => m.lt),
-    lv: () => import("date-fns/locale/lv").then(m => m.lv),
-    mk: () => import("date-fns/locale/mk").then(m => m.mk),
-    ms: () => import("date-fns/locale/ms").then(m => m.ms),
-    mt: () => import("date-fns/locale/mt").then(m => m.mt),
-    nb: () => import("date-fns/locale/nb").then(m => m.nb),
-    nl: () => import("date-fns/locale/nl").then(m => m.nl),
-    nlBE: () => import("date-fns/locale/nl-BE").then(m => m.nlBE),
-    nn: () => import("date-fns/locale/nn").then(m => m.nn),
-    pl: () => import("date-fns/locale/pl").then(m => m.pl),
-    pt: () => import("date-fns/locale/pt").then(m => m.pt),
-    ptBR: () => import("date-fns/locale/pt-BR").then(m => m.ptBR),
-    ro: () => import("date-fns/locale/ro").then(m => m.ro),
-    ru: () => import("date-fns/locale/ru").then(m => m.ru),
-    sk: () => import("date-fns/locale/sk").then(m => m.sk),
-    sl: () => import("date-fns/locale/sl").then(m => m.sl),
-    sr: () => import("date-fns/locale/sr").then(m => m.sr),
-    srLatn: () => import("date-fns/locale/sr-Latn").then(m => m.srLatn),
-    sv: () => import("date-fns/locale/sv").then(m => m.sv),
-    ta: () => import("date-fns/locale/ta").then(m => m.ta),
-    te: () => import("date-fns/locale/te").then(m => m.te),
-    th: () => import("date-fns/locale/th").then(m => m.th),
-    tr: () => import("date-fns/locale/tr").then(m => m.tr),
-    ug: () => import("date-fns/locale/ug").then(m => m.ug),
-    uk: () => import("date-fns/locale/uk").then(m => m.uk),
-    uz: () => import("date-fns/locale/uz").then(m => m.uz),
-    vi: () => import("date-fns/locale/vi").then(m => m.vi),
-    zhCN: () => import("date-fns/locale/zh-CN").then(m => m.zhCN),
-    zhTW: () => import("date-fns/locale/zh-TW").then(m => m.zhTW),
-};
-
-const cache = new Map<LocaleKey, DateFnsLocale>();
-
-/** The locale if it has already been fetched, otherwise `undefined`. Never fetches. */
-export function getLoadedDateFnsLocale(locale: LocaleKey | undefined): DateFnsLocale | undefined {
-    return locale ? cache.get(locale) : undefined;
-}
-
-/**
- * Fetch a date-fns locale. Resolves to `undefined` for a locale date-fns does
- * not ship, which is what indexing the namespace used to yield.
- */
-export async function loadDateFnsLocale(locale: LocaleKey | undefined): Promise<DateFnsLocale | undefined> {
-    if (!locale) return undefined;
-    const cached = cache.get(locale);
-    if (cached) return cached;
-    const loader = dateFnsLocaleLoaders[locale];
-    if (!loader) return undefined;
-    const loaded = await loader();
-    cache.set(locale, loaded);
-    return loaded;
-}

package/src/preview/index.ts

@@ -1,26 +0,0 @@
-export { PropertyPreview } from "./PropertyPreview";
-
-export * from "./property_previews/ArrayOfStringsPreview";
-export * from "./property_previews/ArrayPropertyEnumPreview";
-export * from "./property_previews/ArrayOfMapsPreview";
-export * from "./property_previews/NumberPropertyPreview";
-export * from "./property_previews/StringPropertyPreview";
-export * from "./property_previews/ArrayOfStorageComponentsPreview";
-export * from "./property_previews/ArrayOfReferencesPreview";
-export * from "./property_previews/MapPropertyPreview";
-export * from "./property_previews/ArrayPropertyPreview";
-export * from "./property_previews/ArrayOneOfPreview";
-export * from "./property_previews/SkeletonPropertyComponent";
-
-export * from "./components/DatePreview";
-export * from "./components/UrlComponentPreview";
-export * from "./components/StorageThumbnail";
-export * from "./components/ArrayEnumPreview";
-export * from "./components/BooleanPreview";
-export * from "./components/EnumValuesChip";
-export * from "./components/EmptyValue";
-export * from "./components/ImagePreview";
-export * from "./components/ReferencePreview";
-export * from "./components/RelationPreview";
-export * from "./components/InlineEntityListPreview";
-export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,73 +0,0 @@
-import type { ArrayProperty, MapProperty, Property } from "@rebasepro/types";
-import React from "react";
-import { ErrorBoundary } from "@rebasepro/ui";
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { PropertyPreview } from "../PropertyPreview";
-
-/**
- * @group Preview components
- */
-export function ArrayOfMapsPreview({
-    propertyKey,
-    value,
-    property,
-    size
-    // entity
-}: PropertyPreviewProps<ArrayProperty>) {
-
-    if (Array.isArray(property?.of)) {
-        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
-    }
-
-    if (property?.type !== "array" || !property.of || property.of.type !== "map")
-        throw Error("Picked wrong preview component ArrayOfMapsPreview");
-
-    const mapProperty = property.of;
-    const properties = mapProperty.properties;
-    if (!properties) {
-        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${mapProperty.name ? ` ("${mapProperty.name}")` : ""}`);
-    }
-    const values = value as Record<string, unknown>[];
-    const previewProperties: string[] | undefined = (mapProperty as MapProperty).admin?.previewProperties;
-
-    if (!values) return null;
-
-    let mapProperties = previewProperties;
-    if (!mapProperties || !mapProperties.length) {
-        mapProperties = Object.keys(properties);
-        if (size)
-            mapProperties = mapProperties.slice(0, 3);
-    }
-
-    return (
-        <div className="table-auto text-xs">
-            <div>
-                {values &&
-                    values.map((v, index: number) => {
-                        return (
-                            <div key={`table_${v}_${index}`}
-                                className="border-b last:border-b-0 py-2">
-                                {mapProperties && mapProperties.map(
-                                    (key) => (
-                                        <div
-                                            key={`table-cell-${key as string}`}
-                                            className="table-cell"
-                                        >
-                                            <ErrorBoundary>
-                                                <PropertyPreview
-                                                    propertyKey={key as string}
-                                                    value={(v)[key]}
-                                                    property={properties[key as string] as Property}
-                                                    // entity={entity}
-                                                    size={"small"}/>
-                                            </ErrorBoundary>
-                                        </div>
-                                    )
-                                )}
-                            </div>
-                        );
-                    })}
-            </div>
-        </div>
-    );
-}

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,67 +0,0 @@
-import type { ArrayProperty, ReferenceProperty, EntityReference } from "@rebasepro/types";
-import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { ReferencePreview } from "../components/ReferencePreview";
-import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
-import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
-
-/**
- * @group Preview components
- */
-export function ArrayOfReferencesPreview({
-    propertyKey,
-    value,
-    property: property,
-    size,
-    textOnly
-}: PropertyPreviewProps<ArrayProperty>) {
-
-    const nested = useIsNestedEntityPreview();
-
-    if (Array.isArray(property?.of)) {
-        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
-    }
-
-    if (property?.type !== "array" || !property.of || property.of.type !== "reference")
-        throw Error("Picked wrong preview component ArrayOfReferencesPreview");
-
-    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
-    const ofProperty = property.of as ReferenceProperty;
-
-    // Stacked cards inside another preview (or a title slot) turn a list into a
-    // wall of boxes: keep it to one wrapping line of links.
-    if (nested || textOnly) {
-        return <InlineEntityListPreview
-            items={(value ?? []) as EntityReference[]}
-            renderItem={(reference, index) => <ReferencePreview
-                key={`preview_array_ref_${propertyKey}_${index}`}
-                disabled={!ofProperty.path}
-                previewProperties={ofProperty.admin?.previewProperties}
-                size={childSize}
-                reference={reference}
-                textOnly={textOnly}
-                includeId={ofProperty.admin?.includeId}
-                includeEntityLink={ofProperty.admin?.includeEntityLink}
-            />}/>;
-    }
-
-    return (
-        <div className="flex flex-col w-full">
-            {value ?
-                (value as EntityReference[]).map((reference, index: number) => {
-                    const ofProperty = property.of as ReferenceProperty;
-                    return <div className="mt-1 mb-1 w-full"
-                        key={`preview_array_ref_${propertyKey}_${index}`}>
-                        <ReferencePreview
-                            disabled={!ofProperty.path}
-                            previewProperties={ofProperty.admin?.previewProperties}
-                            size={childSize}
-                            reference={reference}
-                            includeId={ofProperty.admin?.includeId}
-                            includeEntityLink={ofProperty.admin?.includeEntityLink}
-                        />
-                    </div>;
-                }
-                ) : null}
-        </div>
-    );
-}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -1,77 +0,0 @@
-import type { ArrayProperty, RelationProperty } from "@rebasepro/types";
-import { EntityRelation } from "@rebasepro/types";
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
-import { RelationPreview } from "../components/RelationPreview";
-import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
-import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
-
-/**
- * @group Preview components
- */
-export function ArrayOfRelationsPreview({
-    propertyKey,
-    value,
-    property,
-    size,
-    textOnly
-}: PropertyPreviewProps<ArrayProperty>) {
-
-    const nested = useIsNestedEntityPreview();
-
-    if (Array.isArray(property?.of)) {
-        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
-    }
-
-    if (property?.type !== "array" || !property.of || property.of.type !== "relation")
-        throw Error("Picked wrong preview component ArrayOfRelationsPreview");
-
-    const ofProperty = property.of as RelationProperty;
-    // Elements arrive hydrated or as bare foreign keys depending on the fetch
-    // path; the declared target resolves the latter rather than dropping them.
-    const relationTargetPath = getRelationTargetPath(ofProperty);
-
-    // See ArrayOfReferencesPreview: nested lists stay on one wrapping line.
-    if (nested || textOnly) {
-        const relations = ((value ?? []) as unknown[])
-            .map(relation => normalizeToEntityRelation(relation, "relation", relationTargetPath))
-            .filter((relation): relation is EntityRelation => Boolean(relation));
-        return <InlineEntityListPreview
-            items={relations}
-            renderItem={(relation, index) => <RelationPreview
-                key={`preview_array_rel_${propertyKey}_${index}`}
-                disabled={!ofProperty.relation}
-                previewProperties={ofProperty.admin?.previewProperties}
-                size={"small"}
-                relation={relation}
-                textOnly={textOnly}
-                includeId={ofProperty.admin?.includeId}
-                includeEntityLink={ofProperty.admin?.includeEntityLink}
-            />}/>;
-    }
-
-    return (
-        <div className="flex flex-col w-full gap-0.5">
-            {value ?
-                (value as unknown[]).map((relation: unknown, index: number) => {
-                    const entityRelation = normalizeToEntityRelation(relation, "relation", relationTargetPath);
-
-                    if (!entityRelation) return null;
-
-                    return (
-                        <div className="w-full"
-                            key={`preview_array_rel_${propertyKey}_${index}`}>
-                            <RelationPreview
-                                disabled={!ofProperty.relation}
-                                previewProperties={ofProperty.admin?.previewProperties}
-                                size={"small"}
-                                relation={entityRelation}
-                                includeId={ofProperty.admin?.includeId}
-                                includeEntityLink={ofProperty.admin?.includeEntityLink}
-                            />
-                        </div>
-                    );
-                }) : null}
-        </div>
-    );
-}