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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.28",
+    "version":  "0.3.0-build.30",
     "files":  [
                   "src"
               ],
@@ -53,6 +53,10 @@
                                                              "types":  "./src/info/information-unit-metadata-grid.tsx",
                                                              "import":  "./src/info/information-unit-metadata-grid.tsx"
                                                          },
+                    "./information-unit-metadata-grid-client":  {
+                                                                    "types":  "./src/info/information-unit-metadata-grid-client.tsx",
+                                                                    "import":  "./src/info/information-unit-metadata-grid-client.tsx"
+                                                                },
                     "./info-card":  {
                                         "types":  "./src/info/info-card.tsx",
                                         "import":  "./src/info/info-card.tsx"
@@ -73,6 +77,10 @@
                                              "types":  "./src/renditions/html.tsx",
                                              "import":  "./src/renditions/html.tsx"
                                          },
+                    "./html-rendition-client":  {
+                                                    "types":  "./src/renditions/html-client.tsx",
+                                                    "import":  "./src/renditions/html-client.tsx"
+                                                },
                     "./image-rendition-container":  {
                                                         "types":  "./src/renditions/container.ts",
                                                         "import":  "./src/renditions/container.ts"
@@ -169,6 +177,10 @@
                                                         "types":  "./src/results/generic/table-result-list.tsx",
                                                         "import":  "./src/results/generic/table-result-list.tsx"
                                                     },
+                    "./generic-search-results-client":  {
+                                                            "types":  "./src/results/generic/search-results-client.tsx",
+                                                            "import":  "./src/results/generic/search-results-client.tsx"
+                                                        },
                     "./carousel":  {
                                        "types":  "./src/carousel/carousel.tsx",
                                        "import":  "./src/carousel/carousel.tsx"
@@ -192,7 +204,27 @@
                     "./footer":  {
                                      "types":  "./src/footer/footer.tsx",
                                      "import":  "./src/footer/footer.tsx"
-                                 }
+                                 },
+                    "./information-unit-carousel-item":  {
+                                                             "types":  "./src/carousel/information-unit-carousel-item.tsx",
+                                                             "import":  "./src/carousel/information-unit-carousel-item.tsx"
+                                                         },
+                    "./information-unit-fragment-ids":  {
+                                                            "types":  "./src/info/information-unit-fragment-ids.ts",
+                                                            "import":  "./src/info/information-unit-fragment-ids.ts"
+                                                        },
+                    "./information-unit-preview-image":  {
+                                                             "types":  "./src/info/information-unit-preview-image.tsx",
+                                                             "import":  "./src/info/information-unit-preview-image.tsx"
+                                                         },
+                    "./restriction-selection-menu":  {
+                                                         "types":  "./src/restriction-menu/restriction-selection-menu.tsx",
+                                                         "import":  "./src/restriction-menu/restriction-selection-menu.tsx"
+                                                     },
+                    "./taxonomy-restriction-menu":  {
+                                                        "types":  "./src/restriction-menu/taxonomy-restriction-menu.tsx",
+                                                        "import":  "./src/restriction-menu/taxonomy-restriction-menu.tsx"
+                                                    }
                 },
     "scripts":  {
                     "storybook":  "storybook dev -p 6006",

package/src/carousel/carousel.tsx

@@ -9,31 +9,30 @@ import {
     createContext,
     useContext,
 } from "react";
-import { cn, findRelatedFragmentShortId, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { cn } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { ArrowLeft, ArrowRight, LoaderCircle } from "lucide-react";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import * as ServiceOptions from "@c-rex/services/client-requests";
 import { documentsGetAllClientService } from "@c-rex/services/client-requests";
 import { CommonItemsModel } from "@c-rex/interfaces";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { Card } from "@c-rex/ui/card";
-import { Badge } from "@c-rex/ui/badge";
-import { Flag } from "../icons/flag-icon"
 import { Empty } from "../results/empty";
-import { useLocale, useMessages, useTranslations } from "next-intl";
-import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
 import { toast } from "sonner";
+import { InformationUnitCarouselItem } from "./information-unit-carousel-item";
+import { Card } from "@c-rex/ui/card";
 
 type PageInfo = {
     hasNextPage: boolean;
     hasPreviousPage: boolean;
     pageCount: number;
 };
+
+type CarouselQueryParams = Record<string, unknown>;
+
 type Props = {
     className?: string;
     arrows?: boolean;
@@ -54,10 +53,11 @@ type Props = {
         imageFragmentSubjectIds?: string[];
     }>;
     serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
+    queryParams?: CarouselQueryParams;
     loadByPages?: boolean;
     linkPattern: string;
     imageFragmentSubjectIds?: string[];
+    deferUntilVisible?: boolean;
 };
 type CarouselContextProps = {
     next: () => void;
@@ -77,6 +77,33 @@ type CarouselContextProps = {
 
 const CarouselContext = createContext<CarouselContextProps | null>(null);
 
+const CarouselSkeletonTrack: FC<{ slidesToShow: number }> = ({ slidesToShow }) => (
+    <div className="flex w-full">
+        {Array.from({ length: slidesToShow }).map((_, index) => (
+            <div
+                key={`carousel-skeleton-${index}`}
+                className="flex-shrink-0 flex-grow-0 flex justify-center p-2"
+                style={{ width: `${100 / slidesToShow}%` }}
+            >
+                <Card className="p-4 flex-1 justify-between relative">
+                    <div className="h-48 w-full overflow-hidden">
+                        <Skeleton className="h-48 w-full" />
+                    </div>
+                    <div className="h-44 flex flex-col gap-3 pt-4">
+                        <Skeleton className="h-6 w-full" />
+                        <Skeleton className="h-6 w-5/6" />
+                        <Skeleton className="h-6 w-2/3" />
+                    </div>
+                    <div className="flex justify-between w-full">
+                        <Skeleton className="h-5 w-8" />
+                        <Skeleton className="h-5 w-24" />
+                    </div>
+                </Card>
+            </div>
+        ))}
+    </div>
+);
+
 export function useCarousel() {
     const context = useContext(CarouselContext);
     if (!context) {
@@ -103,6 +130,7 @@ export const Carousel: FC<Props> = ({
     loadByPages = false,
     linkPattern,
     imageFragmentSubjectIds = [],
+    deferUntilVisible = false,
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
     const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
@@ -110,12 +138,33 @@ export const Carousel: FC<Props> = ({
     const device = useBreakpoint();
     const t = useTranslations("results");
     const [slidesToShow, setSlidesToShow] = useState(1);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [canLoad, setCanLoad] = useState(!deferUntilVisible);
 
     useEffect(() => {
         if (device == null) return;
         setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
     }, [device, itemsByRow]);
 
+    useEffect(() => {
+        if (!deferUntilVisible || canLoad) return;
+        const node = containerRef.current;
+        if (!node) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const firstEntry = entries[0];
+                if (!firstEntry?.isIntersecting) return;
+                setCanLoad(true);
+                observer.disconnect();
+            },
+            { rootMargin: "200px 0px", threshold: 0.05 }
+        );
+
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [deferUntilVisible, canLoad]);
+
     // State
     const [current, setCurrent] = useState(0);
     const [data, setData] = useState<CommonItemsModel[] | null>(null);
@@ -133,6 +182,9 @@ export const Carousel: FC<Props> = ({
 
     // Data loading
     useEffect(() => {
+        if (!canLoad) {
+            return;
+        }
         let isMounted = true;
         const controller = new AbortController();
         setIsLoading(true);
@@ -174,7 +226,7 @@ export const Carousel: FC<Props> = ({
             isMounted = false;
             controller.abort();
         };
-    }, [loadByPages, page, queryParams, service]);
+    }, [canLoad, loadByPages, page, queryParams, service]);
 
     // Page info
     useEffect(() => {
@@ -243,7 +295,7 @@ export const Carousel: FC<Props> = ({
     return (
         <CarouselContext.Provider value={contextValue}>
             <div className={cn("flex items-center flex-col", className)}>
-                <div className={cn("w-full flex items-center")}>
+                <div ref={containerRef} className={cn("w-full flex items-center")}>
                     {(arrows && data && data.length > 0) && <CarouselPrev />}
                     <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
                         {loadByPages && loading && data && data.length > 0 && (
@@ -252,11 +304,14 @@ export const Carousel: FC<Props> = ({
                             </div>
                         )}
                         <div
-                            className="flex will-change-transform transition-all duration-600 ease-[cubic-bezier(0.4,0,0.2,1)] w-full"
-                            style={{ transform: `translateX(-${(current * 100) / slidesToShow}%)` }}
+                            className="flex will-change-transform transition-all duration-600 w-full"
+                            style={{
+                                transform: `translateX(-${(current * 100) / slidesToShow}%)`,
+                                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+                            }}
                         >
                             {loading && (!data || data.length === 0) ? (
-                                <Skeleton className="w-full h-80" />
+                                <CarouselSkeletonTrack slidesToShow={slidesToShow} />
                             ) : error ? (
                                 <div className="w-full min-h-80 flex items-center">
                                     <Alert variant="destructive" className="my-2">
@@ -410,63 +465,4 @@ const DefaultRenderCarouselItem: FC<{
     loadImage: boolean;
     linkPattern: string;
     imageFragmentSubjectIds?: string[];
-}> = ({ item, showImages, loadImage, linkPattern, imageFragmentSubjectIds = [] }) => {
-    const locale = useLocale();
-    const messages = useMessages() as Record<string, unknown>;
-    const t = useTranslations("itemTypes");
-
-    const date = formatDateToLocale(item.created!, locale);
-    const title = getTitle(item.titles, item.labels);
-    const itemType = getType(item.class, locale);
-    const itemTypeKey = itemType?.toLowerCase();
-    const itemTypeMessages = (messages.itemTypes || {}) as Record<string, string>;
-    const itemTypeLabel = itemTypeKey && itemTypeMessages[itemTypeKey]
-        ? t(itemTypeKey)
-        : itemType;
-    const language = getLanguage(item.languages)
-    const countryCode = language.split("-")[1] || "";
-    const link = linkPattern.replace("{shortId}", item.shortId!);
-    const previewFragmentShortId = findRelatedFragmentShortId({
-        item,
-        informationSubjectIds: imageFragmentSubjectIds,
-    });
-
-    return (
-        <Link href={link} className="group p-2 flex flex-1">
-            <Card className={cn("p-4 flex-1 justify-between relative", !showImages && "min-h-0")}>
-                {itemType && (
-                    <Badge className="absolute -top-2 -right-2">{itemTypeLabel}</Badge>
-                )}
-
-                {showImages ? (
-                    <div className="h-48 w-full overflow-hidden">
-                        <ImageRenditionContainer
-                            fragmentShortId={loadImage ? previewFragmentShortId : undefined}
-                            emptyImageStyle="h-48 w-full"
-                            skeletonStyle="h-48 w-full"
-                            imageStyle="object-contain object-top h-48 !w-auto max-w-full mx-auto"
-                        />
-                    </div>
-                ) : null}
-
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <div className="h-44 overflow-hidden">
-                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
-                                {title}
-                            </span>
-                        </div>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-sm break-words">{title}</TooltipContent>
-                </Tooltip>
-
-                <div className="flex justify-between w-full">
-                    <span className="w-8 block">
-                        <Flag countryCode={countryCode} />
-                    </span>
-                    <span className="text-gray-400">{date || item.revision}</span>
-                </div>
-            </Card>
-        </Link>
-    );
-};
+}> = (props) => <InformationUnitCarouselItem {...props} />;

package/src/carousel/information-unit-carousel-item.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type { FC } from "react";
+import Link from "next/link";
+import { useLocale, useMessages, useTranslations } from "next-intl";
+import { Card } from "@c-rex/ui/card";
+import { Badge } from "@c-rex/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import type { CommonItemsModel } from "@c-rex/interfaces";
+import { Flag } from "../icons/flag-icon";
+import { InformationUnitPreviewImage } from "../info/information-unit-preview-image";
+import { cn, formatDateToLocale, getLanguage, getTitle, getType } from "@c-rex/utils";
+
+type Props = {
+    item: CommonItemsModel;
+    showImages: boolean;
+    loadImage: boolean;
+    linkPattern: string;
+    imageFragmentSubjectIds?: string[];
+};
+
+export const InformationUnitCarouselItem: FC<Props> = ({
+    item,
+    showImages,
+    loadImage,
+    linkPattern,
+    imageFragmentSubjectIds = [],
+}) => {
+    const locale = useLocale();
+    const messages = useMessages() as Record<string, unknown>;
+    const t = useTranslations("itemTypes");
+
+    const date = formatDateToLocale(item.created!, locale);
+    const title = getTitle(item.titles, item.labels);
+    const itemType = getType(item.class, locale);
+    const itemTypeKey = itemType?.toLowerCase();
+    const itemTypeMessages = (messages.itemTypes || {}) as Record<string, string>;
+    const itemTypeLabel = itemTypeKey && itemTypeMessages[itemTypeKey]
+        ? t(itemTypeKey)
+        : itemType;
+    const language = getLanguage(item.languages);
+    const countryCode = language.split("-")[1] || "";
+    const link = linkPattern.replace("{shortId}", item.shortId!);
+
+    return (
+        <Link href={link} className="group p-2 flex flex-1">
+            <Card className={cn("p-4 flex-1 justify-between relative", !showImages && "min-h-0")}>
+                {itemType && (
+                    <Badge className="absolute -top-2 -right-2">{itemTypeLabel}</Badge>
+                )}
+
+                {showImages ? (
+                    <div className="h-48 w-full overflow-hidden">
+                        <InformationUnitPreviewImage
+                            item={item}
+                            imageFragmentSubjectIds={imageFragmentSubjectIds}
+                            loadImage={loadImage}
+                            emptyImageStyle="h-48 w-full"
+                            skeletonStyle="h-48 w-full"
+                            imageStyle="object-contain object-top h-48 !w-auto max-w-full mx-auto"
+                        />
+                    </div>
+                ) : null}
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <div className="h-44 overflow-hidden">
+                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
+                                {title}
+                            </span>
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-sm break-words">{title}</TooltipContent>
+                </Tooltip>
+
+                <div className="flex justify-between w-full">
+                    <span className="w-8 block">
+                        <Flag countryCode={countryCode} />
+                    </span>
+                    <span className="text-gray-400">{date || item.revision}</span>
+                </div>
+            </Card>
+        </Link>
+    );
+};

package/src/directoryNodes/directory-tree-context.tsx

@@ -260,11 +260,13 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
 
     if (isLoading && tree.length === 0) {
         return (
-            <div className="pt-4">
+            <div className="pt-4 space-y-2">
                 <Skeleton className="w-auto h-10 mb-2" />
                 <Skeleton className="w-auto h-10 mb-2" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
+                <Skeleton className="w-auto h-10 mb-2" />
+                <div className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
             </div>
         );
     }

package/src/documents/description-preview.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { FragmentsGetByIdClient } from "../generated/client-components";
+import { ExpandableSummary } from "./expandable-summary";
+import type { RenditionModel } from "@c-rex/interfaces";
+
+interface Props {
+    fragmentShortId?: string;
+    title: string;
+}
+
+const htmlFormats = ["application/xhtml+xml", "application/html", "text/html"];
+
+const getViewHref = (renditions?: RenditionModel[] | null): string | undefined => {
+    if (!renditions || renditions.length === 0) return undefined;
+    const htmlRendition = renditions.find((item) => item.format && htmlFormats.includes(item.format));
+    return htmlRendition?.links?.find((item) => item.rel === "view")?.href || undefined;
+};
+
+const extractSummaryText = (html: string, title: string) => {
+    if (typeof window === "undefined") return "";
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const rawText = (doc.body?.textContent || "").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;
+
+    return withoutRepeatedTitle.replace(/^\/{2,}\s*/, "").trim();
+};
+
+const DocumentDescriptionPreviewContent: FC<{
+    viewHref?: string;
+    title: string;
+    isLoading: boolean;
+    hasError: boolean;
+}> = ({
+    viewHref,
+    title,
+    isLoading,
+    hasError,
+}) => {
+    const [text, setText] = useState<string | null>(null);
+    const [loadingText, setLoadingText] = useState(false);
+
+    useEffect(() => {
+        if (!viewHref) {
+            setText(null);
+            return;
+        }
+
+        let isMounted = true;
+        const controller = new AbortController();
+        setLoadingText(true);
+
+        fetch(viewHref, { signal: controller.signal })
+            .then((response) => response.text())
+            .then((html) => {
+                if (!isMounted || controller.signal.aborted) return;
+                setText(extractSummaryText(html, title));
+            })
+            .catch(() => {
+                if (!isMounted || controller.signal.aborted) return;
+                setText("");
+            })
+            .finally(() => {
+                if (isMounted && !controller.signal.aborted) {
+                    setLoadingText(false);
+                }
+            });
+
+        return () => {
+            isMounted = false;
+            controller.abort();
+        };
+    }, [title, viewHref]);
+
+    if (hasError) {
+        return <span className="text-muted-foreground">No rendition available</span>;
+    }
+
+    if (isLoading || loadingText) {
+        return <span className="text-muted-foreground">Loading rendition...</span>;
+    }
+
+    if (!text) {
+        return <span className="text-muted-foreground">No rendition available</span>;
+    }
+
+    return <ExpandableSummary text={text} />;
+};
+
+export const DocumentDescriptionPreview: FC<Props> = ({
+    fragmentShortId,
+    title,
+}) => {
+    if (!fragmentShortId) {
+        return <span className="text-muted-foreground">No rendition available</span>;
+    }
+
+    return (
+        <FragmentsGetByIdClient
+            pathParams={{ id: fragmentShortId }}
+            queryParams={{
+                Fields: ["titles", "renditions"],
+                Embed: ["renditions"],
+                Links: true,
+            }}
+        >
+            {({ data, isLoading, error }) => {
+                const viewHref = getViewHref(data?.renditions);
+
+                return (
+                    <DocumentDescriptionPreviewContent
+                        viewHref={viewHref}
+                        title={title}
+                        isLoading={isLoading}
+                        hasError={Boolean(error)}
+                    />
+                );
+            }}
+        </FragmentsGetByIdClient>
+    );
+};