@c-rex/components 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "files": [
     "src"
   ],

package/src/article/article-content.tsx

@@ -3,53 +3,44 @@ import { RenditionModel } from "@c-rex/interfaces";
 import { RenderArticle } from "../render-article";
 import { ArticleActionBar } from "./article-action-bar";
 import * as cheerio from "cheerio"
+import { HtmlRendition } from "../renditions/html";
 
 interface Props {
     renditions: RenditionModel[] | null | undefined;
 }
 
 export const ArticleContent: FC<Props> = async ({ renditions }) => {
-    const empty = (
-        <div>No HTML Rendition Available</div>
-    )
-
-    if (renditions == null || renditions.length == 0) return empty;
-
-    const filteredRenditions = renditions.filter((item) => item.format == "application/xhtml+xml");
-
-    if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined || filteredRenditions[0].links == undefined) return empty;
-
-    const filteredLinks = filteredRenditions[0].links.filter((item) => item.rel == "view");
 
-    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+    const articleRender = (html: string) => {
 
-    const url = filteredLinks[0].href;
-    const html = await fetch(url, {
-        method: "GET",
-        headers: {
-            Accept: "application/xhtml+xml",
-        },
-    }).then(res => res.text());
+        const $ = cheerio.load(html)
 
-    const $ = cheerio.load(html)
+        const metaTags = $("meta").map((_, el) => {
+            const name = $(el).attr("name")
+            const content = $(el).attr("content")
+            return name && content ? { name, content } : null
+        }).get().filter(Boolean)
 
-    const metaTags = $("meta").map((_, el) => {
-        const name = $(el).attr("name")
-        const content = $(el).attr("content")
-        return name && content ? { name, content } : null
-    }).get().filter(Boolean)
+        const articleHtml = $("main").html() || ""
 
-    const articleHtml = $("main").html() || ""
+        return (
+            <>
+                {metaTags.map((tag) => (
+                    <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
+                ))}
+                <div className="pr-4 relative">
+                    <RenderArticle htmlContent={articleHtml} contentLang="" />
+                </div>
+                <ArticleActionBar />
+            </>
+        )
+    }
 
     return (
-        <>
-            {metaTags.map((tag) => (
-                <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
-            ))}
-            <div className="pr-4 relative">
-                <RenderArticle htmlContent={articleHtml} contentLang="" />
-            </div>
-            <ArticleActionBar />
-        </>
+        <HtmlRendition
+            renditions={renditions}
+            render={articleRender}
+            shortId=""
+        />
     )
 }

package/src/autocomplete.tsx

@@ -8,6 +8,7 @@ import { X } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { suggestionRequest } from "./generated/create-suggestions-request";
 import { useQueryState } from "nuqs";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
 
 export type AutoCompleteProps = {
     initialValue?: string;
@@ -36,6 +37,7 @@ export const AutoComplete = ({
     const containerRef = useRef<HTMLDivElement>(null);
     const searchParams = useSearchParams();
     const router = useRouter();
+
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
@@ -43,19 +45,40 @@ export const AutoComplete = ({
 
     const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
         const params = { ...queryParams };
+        const contentLang = useSearchSettingsStore.getState().language;
+        const restrictions = searchParams.get("restrict")
+
+        if (restrictions) {
+            if (restrictions.includes("informationSubjects")) {
+
+                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
+                if (informationSubject.length > 0) {
+                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
+                }
+            }
+        }
+
+        if (contentLang) params.lang = contentLang;
         if (pkg != null) params.scopes = pkg as unknown as string[];
 
         const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
 
         return results.data;
-    }, [endpoint, pkg, queryParams]);
+    }, [endpoint, pkg, queryParams, searchParams]);
 
     const handleSelect = (value: string) => {
         setQuery(value);
         setOpen(false);
+
         const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
         nextParams.set("page", "1");
-        nextParams.set("search", value);
+
+        if (value.length > 0) {
+            nextParams.set("search", value);
+        } else {
+            nextParams.delete("search");
+        };
+
         onSelectParams?.forEach(param => {
             nextParams.set(param.key, param.value);
         });
@@ -77,9 +100,7 @@ export const AutoComplete = ({
         router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
     };
 
-    useEffect(() => {
-        setQuery(initialValue);
-    }, [initialValue]);
+    useEffect(() => setQuery(initialValue), [initialValue]);
 
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {

package/src/carousel/carousel.tsx

@@ -22,14 +22,33 @@ import { Badge } from "@c-rex/ui/badge";
 import { Flag } from "../icons/flag-icon"
 import { Empty } from "../results/empty";
 import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
-// Types
-
-type ResponsiveSetting = {
-    maxWidth: number;
-    slidesToShow: number;
+type PageInfo = {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    pageCount: number;
+};
+type Props = {
+    className?: string;
+    arrows?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    };
+    indicators?: boolean;
+    showImages?: boolean;
+    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
+    serviceType: keyof typeof ServiceOptions;
+    queryParams?: Record<string, any>;
+    loadByPages?: boolean;
+    linkPattern: string;
 };
-
 type CarouselContextProps = {
     next: () => void;
     prev: () => void;
@@ -54,30 +73,15 @@ export function useCarousel() {
     return context;
 }
 
-type PageInfo = {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    pageCount: number;
-};
-type Props = {
-    className?: string;
-    arrows?: boolean;
-    autoplay?: boolean;
-    autoplaySpeed?: number;
-    responsive?: ResponsiveSetting[];
-    indicators?: boolean;
-    showImages?: boolean;
-    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean }>;
-    serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
-    loadByPages?: boolean;
-};
-
 export const Carousel: FC<Props> = ({
     className,
     arrows = false,
     autoplay = false,
-    responsive = [{ maxWidth: 99999, slidesToShow: 1 }],
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 1,
+        [DEVICE_OPTIONS.TABLET]: 3,
+        [DEVICE_OPTIONS.DESKTOP]: 4,
+    },
     indicators = false,
     autoplaySpeed = 3000,
     showImages = false,
@@ -85,29 +89,18 @@ export const Carousel: FC<Props> = ({
     serviceType,
     queryParams = {},
     loadByPages = false,
+    linkPattern
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
     const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
 
-    // Responsive
-    const [slidesToShow, setSlidesToShow] = useState(responsive[0]?.slidesToShow || 1);
-    const updateSlidesToShow = useCallback(() => {
-        const width = window.innerWidth;
-        const sorted = [...responsive].sort((a, b) => a.maxWidth - b.maxWidth);
-        let found = sorted[sorted.length - 1]?.slidesToShow || 1;
-        for (const r of sorted) {
-            if (width <= r.maxWidth) {
-                found = r.slidesToShow;
-                break;
-            }
-        }
-        setSlidesToShow(found);
-    }, [responsive]);
+    const device = useBreakpoint();
+    const [slidesToShow, setSlidesToShow] = useState(1);
+
     useEffect(() => {
-        updateSlidesToShow();
-        window.addEventListener("resize", updateSlidesToShow);
-        return () => window.removeEventListener("resize", updateSlidesToShow);
-    }, [updateSlidesToShow]);
+        if (device == null) return;
+        setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+    }, [device, itemsByRow]);
 
     // State
     const [current, setCurrent] = useState(0);
@@ -240,7 +233,7 @@ export const Carousel: FC<Props> = ({
                                         className={`flex-shrink-0 flex-grow-0 flex justify-center`}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
-                                        <RenderComponent item={item} showImages={showImages} />
+                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
                                     </div>
                                 ))
                             ) : null}
@@ -258,7 +251,7 @@ const CarouselNext: FC = () => {
     const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
     const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
     return (
-        <Button className="size-8" rounded="full" onClick={next} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
             <ArrowRight />
         </Button>
     );
@@ -267,8 +260,9 @@ const CarouselNext: FC = () => {
 const CarouselPrev: FC = () => {
     const { prev, current, hasPrevPage } = useCarousel();
     const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
+
     return (
-        <Button className="size-8" rounded="full" onClick={prev} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
             <ArrowLeft />
         </Button>
     );
@@ -315,7 +309,11 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     );
 };
 
-const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolean }> = ({ item, showImages }) => {
+const DefaultRenderCarouselItem: FC<{
+    item: CommonItemsModel;
+    showImages: boolean;
+    linkPattern: string
+}> = ({ item, showImages, linkPattern }) => {
     const locale = useLocale();
     const t = useTranslations("itemTypes");
 
@@ -338,7 +336,9 @@ const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolea
                     />
                 )}
 
-                <span className="text-lg font-semibold">{title}</span>
+                <Link href={linkPattern.replace("{id}", item.shortId!)} className="hover:underline text-lg font-semibold flex-1">
+                    {title}
+                </Link>
 
                 <div className="flex justify-between w-full">
                     <span className="w-8 block border">

package/src/navbar/navbar.tsx

@@ -30,7 +30,7 @@ export const NavBar: FC<NavBarProps> = async ({
     showInput,
     autocompleteType,
     onSelectPath,
-    showMenu = false,
+    showMenu = true,
     ...props
 }) => {
     const t = await getTranslations();
@@ -75,27 +75,32 @@ export const NavBar: FC<NavBarProps> = async ({
                                 </Button>
                             }
                         >
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
+                                <Link href="/">
+                                    {t('navigation.home')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/documents">
                                     {t('navigation.documents')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/topics">
                                     {t('navigation.topics')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/fragments">
                                     {t('navigation.fragments')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/packages">
                                     {t('navigation.packages')}
                                 </Link>
                             </Button>
-                            <Button asChild variant="link">
+                            <Button asChild variant="link" className="flex justify-start">
                                 <Link href="/information-units">
                                     {t('navigation.informationUnits')}
                                 </Link>

package/src/renditions/html.tsx

@@ -1,11 +1,14 @@
 import { FC, JSX } from "react";
 import * as cheerio from "cheerio"
-import { FragmentsGetAll } from "../generated/server-components";
+import { RenditionModel } from "@c-rex/interfaces";
+import { fragmentsGetAllServer } from "@c-rex/services/server-requests";
+import { call } from "@c-rex/utils";
 
 interface HtmlRenditionProps {
     htmlFormats?: string[]
     shortId: string,
-    render?: (html: string) => JSX.Element
+    render?: (html: string) => JSX.Element,
+    renditions?: RenditionModel[] | null
 }
 
 const defaultRender = (html: string) => {
@@ -14,45 +17,49 @@ const defaultRender = (html: string) => {
     return <div dangerouslySetInnerHTML={{ __html: articleHtml }} />;
 }
 
-export const HtmlRendition: FC<HtmlRenditionProps> = ({
+export const HtmlRendition: FC<HtmlRenditionProps> = async ({
     shortId,
     htmlFormats = ["application/xhtml+xml", "application/html", "text/html"],
-    render
+    render = defaultRender,
+    renditions
 }) => {
     const empty = <div>No rendition available</div>;
 
-    return (
-        <FragmentsGetAll
-            queryParams={{
-                Fields: ["titles", "renditions"],
-                Embed: ["renditions"],
-                PageSize: 1,
-                Links: true,
-                Restrict: [
-                    `informationUnits=${shortId}`,
-                    ...htmlFormats.map(format => `renditions.format=${format}`)
-                ],
+    if (renditions == undefined) {
+        const result = await fragmentsGetAllServer({
+            Fields: ["titles", "renditions"],
+            Embed: ["renditions"],
+            PageSize: 1,
+            Links: true,
+            Restrict: [
+                `informationUnits=${shortId}`,
+                ...htmlFormats.map(format => `renditions.format=${format}`)
+            ],
+        })
 
-            }}
-            render={async (data, error) => {
-                if (error) {
-                    return <div>Error loading content</div>;
-                }
+        renditions = result.items?.[0]?.renditions;
+    }
 
-                const renditions = data?.items?.[0]?.renditions;
+    if (renditions == null || renditions.length == 0) return empty;
+    renditions = renditions.filter(rendition => htmlFormats.includes(rendition.format!));
 
-                if (renditions == null || renditions.length == 0) return empty;
-                if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
+    if (renditions.length == 0 || renditions[0] == undefined || renditions[0].links == undefined) return empty;
 
-                const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
+    const filteredLinks = renditions[0].links.filter((item) => item.rel == "view");
 
-                if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
 
-                const url = filteredLinks[0].href;
-                const html = await fetch(url).then(res => res.text());
+    const url = filteredLinks[0].href;
+    try {
 
-                return render ? render(html) : defaultRender(html);
-            }}
-        />
-    )
+        const html = await fetch(url).then(res => res.text());
+        return render(html);
+    } catch (error) {
+        call("CrexLogger.log", {
+            level: "error",
+            message: `HtmlRendition error: ${error}`
+        });
+
+        return empty;
+    }
 }

package/src/restriction-menu/restriction-menu-item.tsx

@@ -77,23 +77,26 @@ export const RestrictionDropdownItem: FC<Props> = ({
     shortId,
     label,
     restrictField,
+    selected = false,
 }) => {
     const [restrict, setRestrict] = useQueryState("restrict", {
         shallow: false,
         history: "push",
     });
 
-    const { restrictionValue } = getRestrictionValue({
+    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
         shortId,
         restrictField,
+        selected,
         currentRestrict: restrict,
     });
 
     return (
         <Button
-            variant="ghost"
-            onClick={() => setRestrict(restrictionValue)}
-            className="text-left text-wrap !h-auto w-full !justify-start cursor-pointer"
+            variant={selected ? "default" : "ghost"}
+            onClick={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
+            rounded="full"
+            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
         >
             {label}
         </Button>
@@ -141,4 +144,4 @@ function getRestrictionValue({
     const restrictionValue = shouldRemoveRestrictParam ? null : restrictParam
 
     return { restrictionValue, shouldRemoveRestrictParam };
-}
+}

package/src/restriction-menu/restriction-menu.tsx

@@ -5,10 +5,9 @@ import {
     NavigationMenu,
     NavigationMenuList,
     NavigationMenuItem,
+    NavigationMenuTrigger,
+    NavigationMenuContent,
 } from "@c-rex/ui/navigation-menu";
-import { Button } from "@c-rex/ui/button";
-import { ChevronDown } from "lucide-react";
-import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
 import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
 import { parseAsString, useQueryStates } from "nuqs";
 import { InformationSubjectModel } from "@c-rex/interfaces";
@@ -110,13 +109,13 @@ export const RestrictionMenu: FC<Props> = ({
     }, [sortedItems, visibleCount]);
 
     return (
-        <NavigationMenu className="max-w-full w-full c-rex-restriction-menu">
+        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
             <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
 
 
                 <RestrictionNavigationItem
                     removeRestrictParam
-                    label="All"
+                    label={t('all')}
                     selected={restrictionValues.length === 0}
                 />
 
@@ -131,23 +130,26 @@ export const RestrictionMenu: FC<Props> = ({
                 ))}
 
                 <NavigationMenuItem>
-                    <DropdownHoverItem
-                        label={
-                            <Button variant="outline" rounded="full">
-                                More <ChevronDown className="size-4" />
-                            </Button>
-                        }
-                    >
-                        {hiddenItems.map((item) => (
-                            <RestrictionDropdownItem
-                                key={item.shortId}
-                                shortId={item.shortId!}
-                                restrictField={restrictField as string}
-                                label={getLabelByLang(item.labels, lang)}
-                                selected={restrictionValues.includes(item.shortId!)}
-                            />
-                        ))}
-                    </DropdownHoverItem>
+                    <NavigationMenuTrigger>
+                        {t('more')}
+                    </NavigationMenuTrigger>
+                    <NavigationMenuContent className="w-96 sm:w-[] md:w-[700px] lg:w-[65rem]">
+                        <ul className="grid gap-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
+                            {hiddenItems.map((item) => (
+                                <li
+                                    key={item.shortId}
+                                    className="flex items-center"
+                                >
+                                    <RestrictionDropdownItem
+                                        shortId={item.shortId!}
+                                        restrictField={restrictField as string}
+                                        label={getLabelByLang(item.labels, lang)}
+                                        selected={restrictionValues.includes(item.shortId!)}
+                                    />
+                                </li>
+                            ))}
+                        </ul>
+                    </NavigationMenuContent>
                 </NavigationMenuItem>
             </NavigationMenuList>
         </NavigationMenu>