@c-rex/components 0.1.36 → 0.1.38

package/src/info/info-table.tsx

@@ -20,40 +20,79 @@ import { Flag } from "../icons/flag-icon";
 import { Button } from "@c-rex/ui/button";
 import { FileIcon } from "../icons/file-icon";
 import { BookmarkButton } from "../favorites/bookmark-button";
-import { InformationUnitsGetAll } from "../generated/server-components";
+import { informationUnitsGetAllServer } from "@c-rex/services/server-requests";
 import { getTranslations } from "next-intl/server";
 import { EN_LANG } from "@c-rex/constants";
 import { getFileRenditions } from "../results/utils";
 import Link from "next/link";
 import { processDataToLabelValuePairs } from "@c-rex/utils";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
+import { SetAvailableVersions } from "./set-available-versions";
 
 type Props = {
     title: string;
-    linkPath: "topics" | "documents";
+    linkPattern: string;
     data: InformationUnitModel;
     excludeKeys?: string[];
     showBookmarkButton?: boolean;
+    saveVersionsInContext?: boolean;
 }
 
 export const InfoTable: FC<Props> = async ({
     title,
     data,
-    linkPath = "topics",
+    linkPattern,
     showBookmarkButton = false,
+    saveVersionsInContext = false
 }) => {
-    const t = await getTranslations();
+    const versionBaseShortId = data.versionOf?.shortId ?? null;
+    const [t, informationUnits] = await Promise.all([
+        getTranslations(),
+        versionBaseShortId
+            ? informationUnitsGetAllServer({
+                Restrict: [`versionOf.shortId=${versionBaseShortId}`],
+                Fields: ["renditions", "class", "languages", "labels"],
+            })
+            : Promise.resolve({ items: [] }),
+    ])
     const files = getFileRenditions({ renditions: data.renditions! });
+    const versionsByShortId = new Map<string, { shortId: string; language: string }>();
+
+    if (data.shortId && data.languages?.[0]) {
+        versionsByShortId.set(data.shortId, {
+            shortId: data.shortId,
+            language: data.languages[0],
+        });
+    }
+
+    informationUnits.items.forEach((item) => {
+        if (!item.shortId || !item.languages?.[0]) return;
+        versionsByShortId.set(item.shortId, {
+            shortId: item.shortId,
+            language: item.languages[0],
+        });
+    });
+
+    const availableVersions = Array.from(versionsByShortId.values())
+        .map((item) => ({
+            shortId: item.shortId,
+            active: item.shortId === data.shortId,
+            lang: item.language,
+            country: item.language.split("-")[1] ?? item.language,
+            link: linkPattern.replace("{shortId}", item.shortId),
+        }))
+        .sort((a, b) => a.lang.localeCompare(b.lang)) as AvailableVersionsInterface[];
 
     return (
         <Card className="p-0 !pt-4">
             <CardHeader>
                 <CardTitle className="text-lg flex justify-between items-end">
                     {title}
-
                     {showBookmarkButton && <BookmarkButton shortId={data.shortId!} />}
                 </CardTitle>
             </CardHeader>
             <CardContent className="space-y-3 !p-0">
+                {saveVersionsInContext && <SetAvailableVersions versions={availableVersions} />}
                 <Table>
                     <TableBody>
                         {processDataToLabelValuePairs(data).map((item) => (
@@ -67,39 +106,22 @@ export const InfoTable: FC<Props> = async ({
                             </TableRow>
                         ))}
 
-                        {/*check if has versionOF */}
-                        <InformationUnitsGetAll
-                            queryParams={{
-                                Restrict: [`versionOf.shortId=${data.versionOf?.shortId}`],
-                                Fields: ["renditions", "class", "languages", "labels"]
-                            }}
-                            render={(data, error) => {
-                                if (error) {
-                                    return JSON.stringify(error);
-                                }
-
-                                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">
-                                            {data.items.map((item) => {
-                                                const language = item.languages?.[0] ?? "NO LANGUAGE";
-                                                const country = language.split("-")[1]!;
-                                                return (
-                                                    <span className="w-8 block border" key={item.shortId}>
-                                                        <Link href={`/${linkPath}/${item.shortId}/content`} title={language}>
-                                                            <Flag countryCode={country} />
-                                                        </Link>
-                                                    </span>
-                                                )
-                                            })}
-                                        </TableCell>
-                                    </TableRow>
-                                )
-                            }}
-                        />
+                        <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">
+                                {availableVersions.map((item) => {
+                                    return (
+                                        <span className="w-8 block border" key={item.shortId}>
+                                            <Link href={item.link} title={item.lang}>
+                                                <Flag countryCode={item.country} />
+                                            </Link>
+                                        </span>
+                                    )
+                                })}
+                            </TableCell>
+                        </TableRow>
 
                         {Object.keys(files).length > 0 && (
                             <TableRow className="min-h-12">

package/src/info/set-available-versions.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { AvailableVersionsInterface } from "@c-rex/interfaces";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+
+type Props = {
+    versions: AvailableVersionsInterface[];
+};
+
+export const SetAvailableVersions = ({ versions }: Props) => {
+    const { setAvailableVersions } = useAppConfig();
+
+    useEffect(() => {
+        setAvailableVersions(versions);
+    }, [setAvailableVersions, versions]);
+
+    return null;
+};

package/src/navbar/language-switcher/content-language-switch.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { startTransition } from "react";
+import { startTransition, useCallback, useMemo } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { BLOG_TYPE_AND_LINK, DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
 import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { useTranslations } from "next-intl";
@@ -16,26 +15,36 @@ type Props = {
 
 export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
     const t = useTranslations();
-    const contentLang = useSearchSettingsStore.getState().language || contentLangDefault;
-    const updatePreferences = useSearchSettingsStore.getState().updatePreferences;
-
+    const contentLang = useSearchSettingsStore((state) => state.language) || contentLangDefault;
+    const updatePreferences = useSearchSettingsStore((state) => state.updatePreferences);
+    const availableLanguages = useLanguageStore((state) => state.availableLanguages);
     const { availableVersions } = useAppConfig()
 
-    const availableLanguagesAndCountries = () => {
-        const aux = useLanguageStore.getState().availableLanguages;
-        let result = aux.map(item => ({ ...item, link: "#" }))
-        if (availableVersions == null) return result
 
-        result = aux.map(item => {
-            const availableVersion = availableVersions.find(version => version.lang === item.value)
+    const normalizeLang = (lang: string) => lang.trim().toLowerCase();
+
+    const findVersionByLocale = useCallback((locale: string) => {
+        if (!availableVersions || availableVersions.length === 0) return undefined;
+        const normalizedLocale = normalizeLang(locale);
+
+        return availableVersions.find((item) => normalizeLang(item.lang) === normalizedLocale)
+            ?? availableVersions.find((item) => {
+                const langCode = normalizeLang(item.lang).split("-")[0];
+                const localeCode = normalizedLocale.split("-")[0];
+                return langCode === localeCode;
+            });
+    }, [availableVersions]);
+
+    const availableLanguagesAndCountries = useMemo(() => {
+        return availableLanguages.map((item) => {
+            const availableVersion = findVersionByLocale(item.value);
             return {
                 ...item,
-                link: availableVersion?.link ?? "#"
-            }
-        })
+                link: availableVersion?.link ?? "#",
+            };
+        });
+    }, [availableLanguages, availableVersions]);
 
-        return result;
-    }
     const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
@@ -44,34 +53,25 @@ export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
             updatePreferences({ language: locale })
-
             if (queryLanguage != null) {
                 setContentLanguage(locale)
+                return;
             }
 
-            //TODO en: needs to be fixed as it's not working
-
             const currentPath = window.location.pathname;
-            const isTopicOrBlogOrDocument = (
-                currentPath.includes(TOPICS_TYPE_AND_LINK) ||
-                currentPath.includes(BLOG_TYPE_AND_LINK) ||
-                currentPath.includes(DOCUMENTS_TYPE_AND_LINK)
-            )
+            const isArticlePage = currentPath.includes("/pages");
+            if (!isArticlePage) {
+                window.location.reload();
+                return;
+            };
 
-            if (!isTopicOrBlogOrDocument) {
-                setTimeout(() => window.location.reload(), 5);
+            const targetVersion = findVersionByLocale(locale);
+            if (targetVersion?.link) {
+                window.location.href = targetVersion.link;
                 return;
             }
 
-            if (availableVersions !== null) {
-                const filteredList = availableVersions.filter((item) => item.lang === locale)
-
-                if (filteredList.length > 0 && filteredList[0]) {
-                    window.location.href = filteredList[0].link as string;
-                } else {
-                    articleNotAvailableToast()
-                }
-            }
+            articleNotAvailableToast()
         });
     };
 
@@ -84,7 +84,7 @@ export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
 
     return (
         <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries()}
+            availableLanguagesAndCountries={availableLanguagesAndCountries}
             changeLanguage={changeContentLanguage}
             selected={contentLang}
         />

package/src/navbar/language-switcher/ui-language-switch.tsx

@@ -5,11 +5,12 @@ import { SharedLanguageSwitch } from "./shared";
 import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
 import { getCountryCodeByLang, } from "@c-rex/utils";
 import { setCookie } from "@c-rex/utils/cookies";
-import { useLanguageStore } from "../../stores/language-store";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
 
 export const UILanguageSwitch: FC = () => {
-    const uiLang = useLanguageStore((state) => state.uiLang);
-    const setUiLang = useLanguageStore.getState().setUiLang;
+    const uiLang = useLocale().toLowerCase();
+    const router = useRouter();
     const UILanguages = UI_LANG_OPTIONS.map((lang) => {
         const langCode = lang.split("-")[0] as string;
         return {
@@ -21,10 +22,8 @@ export const UILanguageSwitch: FC = () => {
 
     const setUILanguage = (locale: string) => {
         startTransition(() => {
-            setUiLang(locale)
             setCookie(UI_LANG_KEY, locale, { httpOnly: false });
-
-            //window.location.reload()
+            router.refresh();
         });
     }
 

package/src/navbar/navbar.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import { FC } from "react";
 import Link from "next/link";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
@@ -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>
@@ -113,7 +118,11 @@ export const NavBar: FC<NavBarProps> = async ({
                 <div className="flex gap-2">
                     {willShowInput &&
                         <div className="hidden sm:flex flex-1 items-center px-3 border rounded-full h-8 c-rex-search-bar">
-                            <SearchInput autocompleteType={autocompleteType} onSelectPath={onSelectPath} {...props} />
+                            <SearchInput
+                                autocompleteType={autocompleteType}
+                                onSelectPath={onSelectPath}
+                                {...props}
+                            />
                         </div>
                     }
 

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,17 +5,15 @@ 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";
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 import { cn, getLabelByLang } from "@c-rex/utils";
 import { useRestrictionStore } from "../stores/restriction-store";
-import { useLanguageStore } from "../stores/language-store";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 
@@ -53,7 +51,7 @@ export const RestrictionMenu: FC<Props> = ({
 
     const restrictionValues = useMemo(() => params.restrict?.split(`${restrictField}=`)[1]?.split(",") || [], [params.restrict, restrictField]);
 
-    const uiLang = useLanguageStore.getState().uiLang;
+    const uiLang = useLocale();
     const lang = uiLang?.split("-")[0] ?? "";
 
     useEffect(() => {
@@ -110,13 +108,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 +129,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>

package/src/results/generic/table-result-list.tsx

@@ -58,7 +58,7 @@ export const GenericTableResultList: FC<Props> = async ({
                 }
 
                 const params = generateQueryParams(queryParams)
-                const link = linkPattern.replace("{id}", item.shortId!) + (params.length > 0 ? `?${params}` : "")
+                const link = linkPattern.replace("{shortId}", item.shortId!) + (params.length > 0 ? `?${params}` : "")
 
                 return (
                     <div

package/src/results/utils.ts

@@ -1,13 +1,20 @@
 import { RenditionModel } from "@c-rex/interfaces";
 import { DocumentsType } from "@c-rex/types";
 
-export const getFileRenditions = ({ renditions }: { renditions: RenditionModel[] }): DocumentsType => {
+type Props = {
+    renditions: RenditionModel[];
+    ignoreFormat?: string[];
+}
+export const getFileRenditions = ({
+    renditions,
+    ignoreFormat = ["application/xhtml+xml", "application/json", "application/llm+xml", "text/html"]
+}: Props): DocumentsType => {
     if (renditions == undefined || renditions.length == 0) {
         return {} as DocumentsType;
     }
 
     const filteredRenditions = renditions.filter(
-        (item) => item.format != "application/xhtml+xml" && item.format != "application/json" && item.format != "application/llm+xml"
+        (item) => !ignoreFormat.includes(item.format!)
     );
 
     if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined) {