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

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/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/restriction-menu/restriction-menu-container.tsx

@@ -1,117 +1,4 @@
-"use client";
-
-import { DomainEntityModel } from "@c-rex/interfaces";
-import { FC, ReactNode, useMemo, useState } from "react"
-import * as ComponentOptions from "../generated/client-components";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { RestrictionMenu } from "./restriction-menu";
-
-type GenericRequestData = {
-    items?: DomainEntityModel[];
-    pageInfo?: {
-        totalItemCount?: number;
-    };
-} | null | undefined;
-type GenericQueryParams = Record<string, unknown> & { Restrict?: string[]; PageSize?: number; Fields?: string[] };
-type GenericRequestProps = {
-    queryParams?: GenericQueryParams;
-    children: (props: { data?: GenericRequestData; isLoading?: boolean }) => ReactNode;
-};
-type RestrictionMenuFetchMode = "all" | "deferred";
-
-type Props = {
-    restrictField: string
-    navigationMenuListClassName?: string
-    itemsToRender?: number
-    requestType: keyof typeof ComponentOptions
-    onlyUsedEntries?: boolean
-    enableHierarchy?: boolean
-    fetchMode?: RestrictionMenuFetchMode
-    showAllWhenEmpty?: boolean
-    queryParams?: GenericQueryParams
-};
-
-export const RestrictionMenuContainer: FC<Props> = ({
-    queryParams,
-    restrictField,
-    itemsToRender = 7,
-    requestType,
-    onlyUsedEntries = true,
-    enableHierarchy = false,
-    fetchMode = "deferred",
-    showAllWhenEmpty = true,
-    navigationMenuListClassName = "items-center justify-between flex-row",
-}) => {
-    const [loadAll, setLoadAll] = useState(false);
-    const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
-    const queryRestrict = queryParams?.Restrict || [];
-    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
-    const explicitPageSize =
-        Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
-            ? Number(queryParams?.PageSize)
-            : undefined;
-    const resolvedPageSize = useMemo(() => {
-        if (explicitPageSize) return explicitPageSize;
-        // TODO(UI/Gabriel): `deferred` currently behaves like "initial subset + load all on first More click".
-        // Keep this behavior for now; planned follow-up is incremental loading from inside the opened More dropdown.
-        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
-        return 100;
-    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
-    const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
-    const resolvedFields = useMemo(() => {
-        const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
-        if (!enableHierarchy) return baseFields;
-        const withParents = new Set(baseFields);
-        withParents.add("parents");
-        return Array.from(withParents);
-    }, [enableHierarchy, requestedFields]);
-
-    return (
-        <RequestComponent
-            queryParams={{
-                ...queryParams,
-                Fields: resolvedFields,
-                Links: true,
-                Sort: ["labels.value"],
-                PageSize: resolvedPageSize,
-                Restrict: restrict,
-            }}
-        >
-            {({ data, isLoading }) => {
-
-                if (isLoading) return (
-                    <div className="flex justify-between">
-                        <Skeleton className="w-12 h-9 rounded-full" />
-                        {Array(itemsToRender).fill(0).map((_, index) => (
-                            <Skeleton key={`skeleton-${index}`} className="w-28 h-9 rounded-full" />
-                        ))}
-                        <Skeleton className="w-20 h-9 rounded-full" />
-                    </div>
-                )
-
-                if (!data) return null;
-
-                const itemCount = data.items?.length || 0;
-                const totalItemCount = data.pageInfo?.totalItemCount;
-                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
-                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
-
-                return (
-                    <RestrictionMenu
-                        restrictField={restrictField}
-                        items={data.items || []}
-                        enableHierarchy={enableHierarchy}
-                        hasMoreItems={hasMoreItems}
-                        showAllWhenEmpty={showAllWhenEmpty}
-                        onRequestMore={() => {
-                            if (fetchMode === "deferred" && !explicitPageSize) {
-                                setLoadAll(true);
-                            }
-                        }}
-                        navigationMenuListClassName={navigationMenuListClassName}
-                    />
-                )
-            }}
-        </RequestComponent>
-    );
-};
+export {
+    TaxonomyRestrictionMenu as RestrictionMenuContainer,
+    type TaxonomyRestrictionMenuProps as RestrictionMenuContainerProps,
+} from "./taxonomy-restriction-menu";