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

package/src/documents/result-list-item.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { FC, useEffect, useMemo, useRef, useState } from "react";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { cn, findRelatedFragmentShortId, generateQueryParams } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Badge } from "@c-rex/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FileDownloadDropdown } from "@c-rex/components/file-download";
+import { FavoriteButton } from "@c-rex/components/favorite-button";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { QueryParams } from "@c-rex/types";
+import { getResultItemSummary } from "../results/summary";
+import { ExpandableSummary } from "./expandable-summary";
+import { DocumentsGetByIdClient } from "../generated/client-components";
+import { DocumentDescriptionPreview } from "./description-preview";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import { ResultTypes } from "@c-rex/types";
+import Link from "next/link";
+
+interface Props {
+    item: CommonItemsModel;
+    query?: string;
+    imageFragmentSubjectIds?: string[];
+    descriptionFragmentSubjectIds?: string[];
+    isLast: boolean;
+    eager?: boolean;
+}
+
+type RowContentProps = {
+    item: CommonItemsModel;
+    itemLink: string;
+    title: string;
+    language: string;
+    itemType: ResultTypes;
+    multipleVersions: string[];
+    isDocument: boolean;
+    isLast: boolean;
+    previewFragmentShortId?: string;
+    descriptionFragmentShortId?: string;
+    isLoadingDetails?: boolean;
+};
+
+const DocumentResultListRowContent: FC<RowContentProps> = ({
+    item,
+    itemLink,
+    title,
+    language,
+    itemType,
+    multipleVersions,
+    isDocument,
+    isLast,
+    previewFragmentShortId,
+    descriptionFragmentShortId,
+    isLoadingDetails = false,
+}) => {
+    return (
+        <div
+            className={cn(
+                "min-h-12 flex flex-wrap items-start border px-4 py-2 gap-2 rounded",
+                isLast ? "" : "mb-4",
+                `c-rex-result-item c-rex-result-${itemType}`
+            )}
+        >
+            <div className="w-20 sm:w-24 flex shrink-0 items-start justify-center pt-1">
+                {isLoadingDetails ? (
+                    <Skeleton className="w-20 sm:w-24 aspect-[210/297]" />
+                ) : (
+                    <Link href={itemLink} className="block w-20 sm:w-24">
+                        <ImageRenditionContainer
+                            fragmentShortId={previewFragmentShortId}
+                            emptyImageStyle="w-20 sm:w-24 aspect-[210/297]"
+                            imageStyle="block w-full h-auto max-w-full object-contain object-top mx-auto"
+                        />
+                    </Link>
+                )}
+            </div>
+
+            <div className="flex-1 p-2 flex flex-col justify-start">
+                <span className="text-sm text-muted-foreground">
+                    {item.revision} - {language}
+                </span>
+
+                <span className="text-lg font-medium">
+                    <a className="hover:underline" href={itemLink}>{title}</a>
+                </span>
+
+                <div>
+                    <Badge>{itemType}</Badge>
+                </div>
+
+                <span className="text-sm block">
+                    {isLoadingDetails ? (
+                        <div className="flex flex-col gap-1 pt-1">
+                            <Skeleton className="h-4 w-full" />
+                            <Skeleton className="h-4 w-5/6" />
+                        </div>
+                    ) : descriptionFragmentShortId ? (
+                        <DocumentDescriptionPreview
+                            fragmentShortId={descriptionFragmentShortId}
+                            title={title}
+                        />
+                    ) : (
+                        <ExpandableSummary text="" />
+                    )}
+                </span>
+            </div>
+
+            <div className="flex flex-col p-2 ml-auto justify-start self-start">
+                <div className="flex gap-2">
+                    <FileDownloadDropdown renditions={item.renditions} />
+
+                    <FavoriteButton
+                        id={item.shortId!}
+                        type={itemType}
+                        label={title}
+                    />
+
+                    {multipleVersions.length > 1 && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button variant="ghost" size="icon">
+                                    <FileStack />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                Available in: {multipleVersions.join(", ")}
+                            </TooltipContent>
+                        </Tooltip>
+                    )}
+
+                    {isDocument && (
+                        <BookmarkButton
+                            shortId={item.shortId!}
+                            triggerVariant="ghost"
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const DocumentsResultListItem: FC<Props> = ({
+    item,
+    query = "",
+    imageFragmentSubjectIds = [],
+    descriptionFragmentSubjectIds = [],
+    isLast,
+    eager = false,
+}) => {
+    const { title, language, itemType, multipleVersions, packageId } = getResultItemSummary(item);
+    const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+    const [canLoadDetails, setCanLoadDetails] = useState(eager);
+    const rowRef = useRef<HTMLDivElement | null>(null);
+    const queryParams: QueryParams[] = [];
+
+    if (packageId) {
+        queryParams.push({
+            key: "package",
+            value: packageId,
+        });
+    }
+
+    if (query.length > 0) {
+        queryParams.push({
+            key: "q",
+            value: query,
+        });
+    }
+
+    const params = generateQueryParams(queryParams);
+    const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "");
+
+    useEffect(() => {
+        if (canLoadDetails) return;
+        const node = rowRef.current;
+        if (!node) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const firstEntry = entries[0];
+                if (!firstEntry?.isIntersecting) return;
+                setCanLoadDetails(true);
+                observer.disconnect();
+            },
+            { rootMargin: "300px 0px", threshold: 0.05 }
+        );
+
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [canLoadDetails]);
+
+    const baseContent = useMemo(() => (
+        <DocumentResultListRowContent
+            item={item}
+            itemLink={itemLink}
+            title={title}
+            language={language}
+            itemType={itemType}
+            multipleVersions={multipleVersions}
+            isDocument={isDocument}
+            isLast={isLast}
+            isLoadingDetails={!canLoadDetails}
+        />
+    ), [canLoadDetails, isDocument, isLast, item, itemLink, itemType, language, multipleVersions, title]);
+
+    return (
+        <div ref={rowRef}>
+            {!canLoadDetails || !item.shortId ? (
+                baseContent
+            ) : (
+                <DocumentsGetByIdClient
+                    pathParams={{ id: item.shortId }}
+                    queryParams={{
+                        // TODO(IDS): Remove this per-row detail lookup and resolve preview/description
+                        // directly from the list payload once `DocumentsGetAll(...Embed=informationUnits)`
+                        // includes the required `informationUnits[*].informationSubjects` markers again.
+                        Fields: ["informationUnits"],
+                        Embed: ["informationUnits"],
+                    }}
+                >
+                    {({ data, isLoading }) => {
+                        const previewFragmentShortId = data ? findRelatedFragmentShortId({
+                            item: data,
+                            informationSubjectIds: imageFragmentSubjectIds,
+                        }) : undefined;
+                        const descriptionFragmentShortId = data ? findRelatedFragmentShortId({
+                            item: data,
+                            informationSubjectIds: descriptionFragmentSubjectIds,
+                        }) : undefined;
+
+                        return (
+                            <DocumentResultListRowContent
+                                item={item}
+                                itemLink={itemLink}
+                                title={title}
+                                language={language}
+                                itemType={itemType}
+                                multipleVersions={multipleVersions}
+                                isDocument={isDocument}
+                                isLast={isLast}
+                                previewFragmentShortId={previewFragmentShortId}
+                                descriptionFragmentShortId={descriptionFragmentShortId}
+                                isLoadingDetails={isLoading}
+                            />
+                        );
+                    }}
+                </DocumentsGetByIdClient>
+            )}
+        </div>
+    );
+};

package/src/documents/result-list.tsx

@@ -1,20 +1,8 @@
+"use client";
+
 import { FC } from "react";
 import { CommonItemsModel } from "@c-rex/interfaces";
-import { FileStack } from "lucide-react";
-import { cn, findRelatedFragmentShortId, generateQueryParams } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { Badge } from "@c-rex/ui/badge";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { RESULT_TYPES } from "@c-rex/constants";
-import { FileDownloadDropdown } from "@c-rex/components/file-download";
-import { FavoriteButton } from "@c-rex/components/favorite-button";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { BookmarkButton } from "../favorites/bookmark-button";
-import { HtmlRendition } from "../renditions/html";
-import { QueryParams } from "@c-rex/types";
-import { getResultItemSummary } from "../results/summary";
-import * as cheerio from "cheerio";
-import { ExpandableSummary } from "./expandable-summary";
+import { DocumentsResultListItem } from "./result-list-item";
 
 interface Props {
     items: CommonItemsModel[];
@@ -22,6 +10,7 @@ interface Props {
     imageFragmentSubjectIds?: string[];
     descriptionFragmentSubjectIds?: string[];
     showActions?: boolean;
+    initialVisibleCount?: number;
 }
 
 
@@ -30,129 +19,21 @@ export const DocumentsResultList: FC<Props> = ({
     query = "",
     imageFragmentSubjectIds = [],
     descriptionFragmentSubjectIds = [],
+    initialVisibleCount = 4,
 }) => {
     return (
         <div className="flex-1">
             {items.map((item, index) => {
-                const { title, language, itemType, multipleVersions, packageId } = getResultItemSummary(item);
-                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
-                const previewFragmentShortId = findRelatedFragmentShortId({
-                    item,
-                    informationSubjectIds: imageFragmentSubjectIds,
-                });
-                const descriptionFragmentShortId = findRelatedFragmentShortId({
-                    item,
-                    informationSubjectIds: descriptionFragmentSubjectIds,
-                });
-                const queryParams: QueryParams[] = []
-
-                if (packageId) {
-                    queryParams.push({
-                        key: "package",
-                        value: packageId,
-                    })
-                }
-
-                if (query.length > 0) {
-                    queryParams.push({
-                        key: "q",
-                        value: query,
-                    })
-                }
-
-                const params = generateQueryParams(queryParams)
-                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
-
                 return (
-                    <div
+                    <DocumentsResultListItem
                         key={item.shortId}
-                        className={cn(
-                            "min-h-12 flex flex-wrap items-start border px-4 py-2 gap-2 rounded",
-                            index == items.length - 1 ? "" : "mb-4",
-                            `c-rex-result-item c-rex-result-${itemType}`
-                        )}
-                    >
-                        <div className="h-16 w-16 flex shrink-0 items-start pt-1">
-                            <ImageRenditionContainer
-                                fragmentShortId={previewFragmentShortId}
-                                emptyImageStyle="h-16 w-16"
-                            />
-                        </div>
-
-                        <div className="flex-1 p-2 flex flex-col justify-start">
-                            <span className="text-sm text-muted-foreground">
-                                {item.revision} - {language}
-                            </span>
-
-                            <span className="text-lg font-medium">
-                                <a className="hover:underline" href={itemLink}>{title}</a>
-                            </span>
-
-                            <div>
-                                <Badge>{itemType}</Badge>
-                            </div>
-                            <span className="text-sm block">
-                                <HtmlRendition
-                                    fragmentShortId={descriptionFragmentShortId}
-                                    render={(html) => {
-                                        const $ = cheerio.load(html);
-                                        const rawText = ($("body").text() || "").replace(/\s+/g, " ").trim();
-                                        const withoutCdata = rawText
-                                            .replace(/\/\/<!\[CDATA\[/g, "")
-                                            .replace(/\/\/\]\]>/g, "")
-                                            .replace(/<!\[CDATA\[/g, "")
-                                            .replace(/\]\]>/g, "")
-                                            .trim();
-                                        const withoutRepeatedTitle = withoutCdata.startsWith(title)
-                                            ? withoutCdata.slice(title.length).trim()
-                                            : withoutCdata;
-                                        const descriptionText = withoutRepeatedTitle
-                                            .replace(/^\/{2,}\s*/, "")
-                                            .trim();
-                                        if (!descriptionText) {
-                                            return <span className="text-muted-foreground">No rendition available</span>;
-                                        }
-
-                                        return (
-                                            <ExpandableSummary text={descriptionText} />
-                                        );
-                                    }}
-                                />
-                            </span>
-                        </div>
-
-                        <div className="flex flex-col p-2 ml-auto justify-start self-start">
-                            <div className="flex gap-2">
-                                <FileDownloadDropdown renditions={item.renditions} />
-
-                                <FavoriteButton
-                                    id={item.shortId!}
-                                    type={itemType}
-                                    label={title}
-                                />
-
-                                {multipleVersions.length > 1 && (
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <Button variant="ghost" size="icon">
-                                                <FileStack />
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            Available in: {multipleVersions.join(", ")}
-                                        </TooltipContent>
-                                    </Tooltip>
-                                )}
-
-                                {isDocument && (
-                                    <BookmarkButton
-                                        shortId={item.shortId!}
-                                        triggerVariant="ghost"
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </div>
+                        item={item}
+                        query={query}
+                        imageFragmentSubjectIds={imageFragmentSubjectIds}
+                        descriptionFragmentSubjectIds={descriptionFragmentSubjectIds}
+                        isLast={index === items.length - 1}
+                        eager={index < initialVisibleCount}
+                    />
                 );
             })}
         </div>

package/src/info/information-unit-fragment-ids.ts

@@ -0,0 +1,28 @@
+import type { CommonItemsModel } from "@c-rex/interfaces";
+import { findRelatedFragmentShortId } from "@c-rex/utils";
+
+type RelatedInformationUnitLike =
+    | CommonItemsModel
+    | { informationUnits?: CommonItemsModel["informationUnits"] }
+    | null
+    | undefined;
+
+export const resolveInformationUnitPreviewFragmentShortId = (
+    item: RelatedInformationUnitLike,
+    informationSubjectIds: string[] = []
+): string | undefined => {
+    return findRelatedFragmentShortId({
+        item,
+        informationSubjectIds,
+    });
+};
+
+export const resolveInformationUnitDescriptionFragmentShortId = (
+    item: RelatedInformationUnitLike,
+    informationSubjectIds: string[] = []
+): string | undefined => {
+    return findRelatedFragmentShortId({
+        item,
+        informationSubjectIds,
+    });
+};