@c-rex/components 0.3.0-build.28 → 0.3.0-build.30

package/src/info/information-unit-metadata-grid-client.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { useMemo } from "react";
+import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+import { Table, TableBody, TableCell, TableRow } from "@c-rex/ui/table";
+import { Flag } from "../icons/flag-icon";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { renderMetadataDisplayValues } from "./shared";
+import { InformationUnitsGetAllClient } from "../generated/client-components";
+import type {
+    CommonItemsModel,
+    InformationUnitModel,
+    LiteralModel,
+    ObjectRefModel,
+    RenditionModel,
+} from "@c-rex/interfaces";
+import {
+    INFORMATION_UNIT_PROPERTY_PRESENTATION,
+    type InformationUnitPropertyKey,
+} from "@c-rex/services/metadata-presentation-config";
+import { resolveMetadataDisplayProperties } from "@c-rex/services/metadata-view-profile";
+import {
+    extractCountryCodeFromLanguage,
+    getFileRenditionGroups,
+    resolvePreferredLanguage,
+    sortAndDeduplicateLanguages,
+} from "@c-rex/utils";
+
+type MetadataDisplayRow = {
+    key: InformationUnitPropertyKey;
+    label: string;
+    labelSource: "translationKey" | "direct";
+    values: string[];
+    valueType?: "text" | "language" | "rendition";
+    renditions?: RenditionModel[];
+};
+
+type Props = {
+    title: string;
+    linkPattern: string;
+    data: CommonItemsModel;
+    metadataIncludeProperties?: Array<keyof InformationUnitModel>;
+    metadataExcludeProperties?: Array<keyof InformationUnitModel>;
+    showBookmarkButton?: boolean;
+    showFileRenditions?: boolean;
+    embedded?: boolean;
+};
+
+const resolveLiteralLabel = (labels?: LiteralModel[] | null, uiLanguage?: string): string | undefined => {
+    if (!labels || labels.length === 0) return undefined;
+    const language = uiLanguage || "en";
+    const preferred = resolvePreferredLanguage(
+        labels.map((item) => item.language || ""),
+        language
+    );
+    if (preferred) {
+        const exact = labels.find((item) => item.language === preferred)?.value;
+        if (exact) return exact;
+    }
+    return labels.find((item) => item.value)?.value || undefined;
+};
+
+const resolveObjectRefLabel = (item: ObjectRefModel, uiLanguage: string): string | undefined => {
+    return resolveLiteralLabel(item.labels || [], uiLanguage) || item.shortId || item.id || undefined;
+};
+
+const asObjectRefArray = (value: unknown): ObjectRefModel[] => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is ObjectRefModel => Boolean(item && typeof item === "object"));
+};
+
+const asLiteralArray = (value: unknown): LiteralModel[] => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is LiteralModel => Boolean(item && typeof item === "object"));
+};
+
+const buildMetadataDisplayRows = (
+    data: CommonItemsModel,
+    uiLanguage: string,
+    includeProperties: InformationUnitPropertyKey[]
+): MetadataDisplayRow[] => {
+    const preferredTitle = resolveLiteralLabel(data.titles || [], uiLanguage) || resolveLiteralLabel(data.labels || [], uiLanguage);
+    const rows: MetadataDisplayRow[] = [];
+
+    for (const key of includeProperties) {
+        const config = INFORMATION_UNIT_PROPERTY_PRESENTATION[key];
+        if (!config?.metadataDisplay?.supported) continue;
+
+        if (key === "labels") continue;
+
+        if (key === "titles") {
+            if (preferredTitle) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [preferredTitle],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        const value = (data as InformationUnitModel)[key];
+        if (value == null) continue;
+
+        if (key === "languages") {
+            const languages = sortAndDeduplicateLanguages((value as string[]) || []);
+            if (languages.length > 0) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: languages,
+                    valueType: "language",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "scalar") {
+            rows.push({
+                key,
+                label: key,
+                labelSource: "translationKey",
+                values: [String(value)],
+                valueType: "text",
+            });
+            continue;
+        }
+
+        if (config.valueKind === "stringArray") {
+            const values = Array.from(new Set((value as string[]).map((item) => String(item)).filter(Boolean)));
+            if (values.length > 0) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values,
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "literalArray") {
+            const preferred = resolveLiteralLabel(asLiteralArray(value), uiLanguage);
+            if (preferred) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [preferred],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "objectRef") {
+            const label = resolveObjectRefLabel(value as ObjectRefModel, uiLanguage);
+            if (label) {
+                rows.push({
+                    key,
+                    label: key,
+                    labelSource: "translationKey",
+                    values: [label],
+                    valueType: "text",
+                });
+            }
+            continue;
+        }
+
+        if (config.valueKind === "objectRefArray") {
+            const refs = asObjectRefArray(value);
+            if (refs.length === 0) continue;
+
+            const values = Array.from(
+                new Set(
+                    refs
+                        .map((ref) => resolveObjectRefLabel(ref, uiLanguage))
+                        .filter((label): label is string => Boolean(label))
+                )
+            ).sort((a, b) => a.localeCompare(b));
+
+            if (values.length === 0) continue;
+
+            rows.push({
+                key,
+                label: key,
+                labelSource: "translationKey",
+                values,
+                valueType: "text",
+            });
+            continue;
+        }
+
+        if (config.valueKind === "renditionArray") {
+            const renditions = Array.isArray(value)
+                ? value.filter((item): item is RenditionModel => Boolean(item && typeof item === "object"))
+                : [];
+            if (renditions.length === 0) continue;
+            if (getFileRenditionGroups({ renditions }).length === 0) continue;
+
+            rows.push({
+                key,
+                label: "files",
+                labelSource: "translationKey",
+                values: [],
+                valueType: "rendition",
+                renditions,
+            });
+        }
+    }
+
+    return rows;
+};
+
+const normalizeVersionItems = (items: CommonItemsModel[], uiLanguage: string) => {
+    const uniqueByShortId = new Map<string, { shortId: string; language: string }>();
+
+    items.forEach((item) => {
+        const shortId = item.shortId?.trim();
+        if (!shortId) return;
+        const language = resolvePreferredLanguage(item.languages, uiLanguage);
+        if (!language) return;
+        uniqueByShortId.set(shortId, { shortId, language });
+    });
+
+    return Array.from(uniqueByShortId.values()).sort((a, b) => {
+        const languageOrder = a.language.localeCompare(b.language);
+        if (languageOrder !== 0) return languageOrder;
+        return a.shortId.localeCompare(b.shortId);
+    });
+};
+
+const AvailableInRow = ({
+    versionOfShortId,
+    currentShortId,
+    linkPattern,
+}: {
+    versionOfShortId?: string | null;
+    currentShortId?: string | null;
+    linkPattern: string;
+}) => {
+    const t = useTranslations();
+    const locale = useLocale();
+
+    if (!versionOfShortId) return null;
+
+    return (
+        <InformationUnitsGetAllClient
+            queryParams={{
+                Restrict: [`versionOf.shortId=${versionOfShortId}`],
+                Fields: ["shortId", "languages", "labels", "versionOf"],
+                PageNumber: 1,
+                PageSize: 200,
+                Sort: ["languages"],
+            }}
+        >
+            {({ data }) => {
+                const versions = normalizeVersionItems(data?.items || [], locale)
+                    .filter((item) => item.shortId !== currentShortId);
+
+                if (versions.length === 0) return null;
+
+                return (
+                    <TableRow className="min-h-12">
+                        <TableCell className="font-medium w-28 pl-4">
+                            <h4 className="text-sm font-medium">{t("availableIn")}</h4>
+                        </TableCell>
+                        <TableCell className="text-xs text-muted-foreground flex items-center gap-2 min-h-12">
+                            {versions.map((item) => (
+                                <span className="w-8 block border" key={item.shortId}>
+                                    <Link
+                                        href={linkPattern.replace("{shortId}", item.shortId)}
+                                        title={item.language}
+                                    >
+                                        <Flag countryCode={extractCountryCodeFromLanguage(item.language)} />
+                                    </Link>
+                                </span>
+                            ))}
+                        </TableCell>
+                    </TableRow>
+                );
+            }}
+        </InformationUnitsGetAllClient>
+    );
+};
+
+export const InformationUnitMetadataGridClient = ({
+    title,
+    data,
+    embedded = false,
+    linkPattern,
+    metadataIncludeProperties,
+    metadataExcludeProperties,
+    showBookmarkButton = false,
+    showFileRenditions = true,
+}: Props) => {
+    const t = useTranslations();
+    const locale = useLocale();
+
+    const metadataRows = useMemo(() => {
+        const includeProperties = resolveMetadataDisplayProperties({
+            includeProperties: metadataIncludeProperties as string[] | undefined,
+            excludeProperties: showFileRenditions
+                ? (metadataExcludeProperties as string[] | undefined)
+                : [...(metadataExcludeProperties || []), "renditions"],
+        });
+
+        return buildMetadataDisplayRows(data, locale, includeProperties);
+    }, [data, locale, metadataExcludeProperties, metadataIncludeProperties, showFileRenditions]);
+
+    const cardContent = (
+        <CardContent className="space-y-3 !p-0">
+            <Table className="table-fixed">
+                <TableBody>
+                    {showBookmarkButton && (
+                        <TableRow className="min-h-12">
+                            <TableCell className="font-medium w-32 pl-4 align-top">
+                                <h4 className="text-sm font-medium">{t("favorites")}</h4>
+                            </TableCell>
+                            <TableCell className="min-h-12 pt-3 text-xs text-muted-foreground align-top break-words whitespace-normal">
+                                <BookmarkButton shortId={data.shortId!} />
+                            </TableCell>
+                        </TableRow>
+                    )}
+
+                    {metadataRows.map((row) => (
+                        <TableRow key={`${row.key}:${row.label}`} className="min-h-12">
+                            <TableCell className="font-medium w-32 pl-4 align-top">
+                                <h4 className="text-sm font-medium capitalize">
+                                    {row.labelSource === "translationKey" ? t(row.label) : row.label}
+                                </h4>
+                            </TableCell>
+                            <TableCell className="min-h-12 text-xs text-muted-foreground align-top break-words whitespace-normal [&_*]:break-words">
+                                {renderMetadataDisplayValues(row, locale)}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+
+                    <AvailableInRow
+                        versionOfShortId={data.versionOf?.shortId}
+                        currentShortId={data.shortId}
+                        linkPattern={linkPattern}
+                    />
+                </TableBody>
+            </Table>
+        </CardContent>
+    );
+
+    if (embedded) return cardContent;
+
+    return (
+        <Card className="!p-0 !gap-0">
+            <CardHeader>
+                <CardTitle className="text-lg flex justify-between items-end">
+                    {title}
+                    {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
+                </CardTitle>
+            </CardHeader>
+            {cardContent}
+        </Card>
+    );
+};

package/src/info/information-unit-preview-image.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { CommonItemsModel } from "@c-rex/interfaces";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { DocumentsGetByIdClient } from "../generated/client-components";
+import { resolveInformationUnitPreviewFragmentShortId } from "./information-unit-fragment-ids";
+
+type Props = {
+    item?: (CommonItemsModel & { informationUnits?: CommonItemsModel["informationUnits"] }) | null;
+    imageFragmentSubjectIds?: string[];
+    loadImage?: boolean;
+    emptyImageStyle?: string;
+    skeletonStyle?: string;
+    imageStyle?: string;
+};
+
+export const InformationUnitPreviewImage = ({
+    item,
+    imageFragmentSubjectIds = [],
+    loadImage = true,
+    emptyImageStyle,
+    skeletonStyle,
+    imageStyle,
+}: Props) => {
+    const initialFragmentShortId = loadImage
+        ? resolveInformationUnitPreviewFragmentShortId(item, imageFragmentSubjectIds)
+        : undefined;
+
+    if (!loadImage) {
+        return (
+            <ImageRenditionContainer
+                emptyImageStyle={emptyImageStyle}
+                skeletonStyle={skeletonStyle}
+                imageStyle={imageStyle}
+            />
+        );
+    }
+
+    if (initialFragmentShortId || !item?.shortId) {
+        return (
+            <ImageRenditionContainer
+                fragmentShortId={initialFragmentShortId}
+                emptyImageStyle={emptyImageStyle}
+                skeletonStyle={skeletonStyle}
+                imageStyle={imageStyle}
+            />
+        );
+    }
+
+    return (
+        <DocumentsGetByIdClient
+            pathParams={{ id: item.shortId }}
+            queryParams={{
+                // TODO(IDS): Temporary generic fallback for information-unit preview images.
+                // Remove this per-card detail lookup once list-based teaser/search requests can
+                // safely switch back to embedded `informationUnits` without causing unacceptable
+                // IDS load. Keep this in sync with all callers that intentionally removed the
+                // embedded relation from their list requests, especially `apps/cdp/app/page.tsx`.
+                Fields: ["informationUnits"],
+                Embed: ["informationUnits"],
+            }}
+        >
+            {({ data }) => {
+                const fragmentShortId = resolveInformationUnitPreviewFragmentShortId(data, imageFragmentSubjectIds);
+
+                return (
+                    <ImageRenditionContainer
+                        fragmentShortId={fragmentShortId}
+                        emptyImageStyle={emptyImageStyle}
+                        skeletonStyle={skeletonStyle}
+                        imageStyle={imageStyle}
+                    />
+                );
+            }}
+        </DocumentsGetByIdClient>
+    );
+};

package/src/page-wrapper.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode } from "react";
 import { NavBar } from './navbar/navbar';
 import { MultiSidebarProvider } from "@c-rex/ui/sidebar";
-import { RestrictionMenuContainer } from "./restriction-menu/restriction-menu-container";
+import { TaxonomyRestrictionMenu } from "./restriction-menu/taxonomy-restriction-menu";
 import { Footer } from "./footer/footer";
 
 type Props = {
@@ -9,8 +9,8 @@ type Props = {
     showRestrictMenu?: boolean;
     showFooter?: boolean;
     renderFooter?: () => ReactNode;
-    renderRestrictionMenu?: (props: ComponentProps<typeof RestrictionMenuContainer>) => ReactNode;
-} & Partial<ComponentProps<typeof NavBar>> & Partial<ComponentProps<typeof RestrictionMenuContainer>>;
+    renderRestrictionMenu?: (props: ComponentProps<typeof TaxonomyRestrictionMenu>) => ReactNode;
+} & Partial<ComponentProps<typeof NavBar>> & Partial<ComponentProps<typeof TaxonomyRestrictionMenu>>;
 
 export const PageWrapper = ({
     children,
@@ -30,7 +30,7 @@ export const PageWrapper = ({
     navigationMenuListClassName,
     ...props
 }: Props) => {
-    const restrictionMenuProps: ComponentProps<typeof RestrictionMenuContainer> = {
+    const restrictionMenuProps: ComponentProps<typeof TaxonomyRestrictionMenu> = {
         restrictField: restrictField ?? "informationSubjects",
         requestType: requestType ?? "InformationSubjectsGetAllClient",
         itemsToRender,
@@ -48,7 +48,7 @@ export const PageWrapper = ({
             {showRestrictMenu && (
                 <div className="flex-1 container pt-6">
                     {renderRestrictionMenu ? renderRestrictionMenu(restrictionMenuProps) : (
-                        <RestrictionMenuContainer {...restrictionMenuProps} />
+                        <TaxonomyRestrictionMenu {...restrictionMenuProps} />
                     )}
                 </div>
             )}

package/src/renditions/file-download.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { FC } from "react";
 import { RenditionModel } from "@c-rex/interfaces";
-import { getTranslations } from "next-intl/server";
+import { useTranslations } from "next-intl";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -18,11 +20,11 @@ interface FileDownloadDropdown {
     buttonVariant?: "ghost" | "outline";
 }
 
-export const FileDownloadDropdown: FC<FileDownloadDropdown> = async ({
+export const FileDownloadDropdown: FC<FileDownloadDropdown> = ({
     renditions,
     buttonVariant = "ghost",
 }) => {
-    const t = await getTranslations();
+    const t = useTranslations();
 
     if (renditions == null || renditions.length == 0) return null;
     const groups = getFileRenditionGroups({ renditions });

package/src/renditions/html-client.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { FragmentsGetByIdClient } from "../generated/client-components";
+import type { RenditionModel } from "@c-rex/interfaces";
+import { RenderArticle } from "../render-article";
+
+type HtmlRenditionClientProps = {
+    htmlFormats?: string[];
+    fragmentShortId?: string;
+    renditions?: RenditionModel[] | null;
+};
+
+const EMPTY = <div>No rendition available</div>;
+
+const findHtmlViewUrl = (
+    renditions?: RenditionModel[] | null,
+    htmlFormats: string[] = ["application/xhtml+xml", "application/html", "text/html"]
+) => {
+    if (!renditions || renditions.length === 0) return undefined;
+    const allowed = new Set(htmlFormats.map((item) => item.toLowerCase()));
+    const rendition = renditions.find((item) => allowed.has((item.format || "").toLowerCase()));
+    return rendition?.links?.find((item) => item.rel === "view")?.href;
+};
+
+const HtmlFromRenditions = ({
+    renditions,
+    htmlFormats,
+}: {
+    renditions?: RenditionModel[] | null;
+    htmlFormats?: string[];
+}) => {
+    const [htmlContent, setHtmlContent] = useState<string | null>(null);
+    const [hasError, setHasError] = useState(false);
+    const viewUrl = useMemo(() => findHtmlViewUrl(renditions, htmlFormats), [htmlFormats, renditions]);
+
+    useEffect(() => {
+        let cancelled = false;
+        if (!viewUrl) {
+            setHtmlContent(null);
+            setHasError(false);
+            return;
+        }
+
+        setHasError(false);
+        setHtmlContent(null);
+
+        fetch(viewUrl)
+            .then((res) => res.text())
+            .then((html) => {
+                if (cancelled) return;
+                const parsed = new DOMParser().parseFromString(html, "text/html");
+                setHtmlContent(parsed.body?.innerHTML || "");
+            })
+            .catch(() => {
+                if (cancelled) return;
+                setHasError(true);
+            });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [viewUrl]);
+
+    if (!viewUrl || hasError) return EMPTY;
+    if (htmlContent == null) return <div className="text-muted-foreground text-sm">Loading content...</div>;
+
+    return <RenderArticle htmlContent={htmlContent} />;
+};
+
+export const HtmlRenditionClient = ({
+    fragmentShortId,
+    htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
+    renditions,
+}: HtmlRenditionClientProps) => {
+    if (renditions !== undefined) {
+        return <HtmlFromRenditions renditions={renditions} htmlFormats={htmlFormats} />;
+    }
+
+    if (!fragmentShortId) return EMPTY;
+
+    return (
+        <FragmentsGetByIdClient
+            pathParams={{ id: fragmentShortId }}
+            queryParams={{
+                Fields: ["titles", "renditions"],
+                Embed: ["renditions"],
+                Links: true,
+            }}
+        >
+            {({ data, isLoading }) => {
+                if (isLoading && !data) {
+                    return <div className="text-muted-foreground text-sm">Loading content...</div>;
+                }
+                return <HtmlFromRenditions renditions={data?.renditions} htmlFormats={htmlFormats} />;
+            }}
+        </FragmentsGetByIdClient>
+    );
+};

package/src/renditions/image/container.tsx

@@ -12,12 +12,14 @@ interface ImageContainerProps {
     emptyImageStyle?: string;
     skeletonStyle?: string;
     imageStyle?: string;
+    containerStyle?: string;
 }
 
 export const ImageRenditionContainer: FC<ImageContainerProps> = ({
     fragmentShortId,
     emptyImageStyle,
     imageStyle,
+    containerStyle,
     imageFormats = ["image/svg+xml", "image/gif", "image/png", "image/jpeg", "image/jpg"],
     skeletonStyle
 }) => {
@@ -35,23 +37,27 @@ export const ImageRenditionContainer: FC<ImageContainerProps> = ({
                     isLoading ? (
                         <Skeleton className={cn("w-full h-full", skeletonStyle)} />
                     ) : (
-                        <ImageRendition
-                            key={data?.shortId}
-                            items={data ? [data] : []}
-                            formats={imageFormats}
-                            emptyImageStyle={emptyImageStyle}
-                            imageStyle={imageStyle}
-                        />
+                        <div className={cn("w-full h-full flex items-start justify-center overflow-hidden", containerStyle)}>
+                            <ImageRendition
+                                key={data?.shortId}
+                                items={data ? [data] : []}
+                                formats={imageFormats}
+                                emptyImageStyle={emptyImageStyle}
+                                imageStyle={imageStyle}
+                            />
+                        </div>
                     )
                 )}
             </FragmentsGetByIdClient>
         ) : (
-            <ImageRendition
-                items={[]}
-                formats={imageFormats}
-                emptyImageStyle={emptyImageStyle}
-                imageStyle={imageStyle}
-            />
+            <div className={cn("w-full h-full flex items-start justify-center overflow-hidden", containerStyle)}>
+                <ImageRendition
+                    items={[]}
+                    formats={imageFormats}
+                    emptyImageStyle={emptyImageStyle}
+                    imageStyle={imageStyle}
+                />
+            </div>
         )
     )
 }

package/src/renditions/image/rendition.tsx

@@ -51,6 +51,11 @@ export const ImageRendition: FC<ImageRenditionProps> = ({
         "Document image";
 
     return (
-        <img src={src} alt={alt} loading="eager" className={cn(imageStyle, "w-full")} />
+        <img
+            src={src}
+            alt={alt}
+            loading="eager"
+            className={cn("max-w-full", imageStyle)}
+        />
     );
 }