@c-rex/components 0.1.37 → 0.1.39

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

@@ -1,92 +1,92 @@
-"use client";
-
-import { startTransition } 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";
-import { toast } from "sonner"
-import { useLanguageStore } from "../../stores/language-store";
-import { useSearchSettingsStore } from "../../stores/search-settings-store";
-
-type Props = {
-    contentLangDefault: string;
-};
-
-export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
-    const t = useTranslations();
-    const contentLang = useSearchSettingsStore.getState().language || contentLangDefault;
-    const updatePreferences = useSearchSettingsStore.getState().updatePreferences;
-
-    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)
-            return {
-                ...item,
-                link: availableVersion?.link ?? "#"
-            }
-        })
-
-        return result;
-    }
-    const [queryLanguage, setContentLanguage] = useQueryState('language', {
-        history: 'push',
-        shallow: false,
-    })
-
-    const changeContentLanguage = (locale: string) => {
-        startTransition(() => {
-            updatePreferences({ language: locale })
-
-            if (queryLanguage != null) {
-                setContentLanguage(locale)
-            }
-
-            //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)
-            )
-
-            if (!isTopicOrBlogOrDocument) {
-                setTimeout(() => window.location.reload(), 5);
-                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()
-                }
-            }
-        });
-    };
-
-    const articleNotAvailableToast = () => {
-        toast(t('sorry'), {
-            description: t('toast.articleNotAvailable'),
-            duration: 10000,
-        })
-    }
-
-    return (
-        <SharedLanguageSwitch
-            availableLanguagesAndCountries={availableLanguagesAndCountries()}
-            changeLanguage={changeContentLanguage}
-            selected={contentLang}
-        />
-    );
-};
+"use client";
+
+import { startTransition, useCallback, useMemo } from "react";
+import { SharedLanguageSwitch } from "./shared";
+import { useQueryState } from "nuqs"
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner"
+import { useLanguageStore } from "../../stores/language-store";
+import { useSearchSettingsStore } from "../../stores/search-settings-store";
+
+type Props = {
+    contentLangDefault: string;
+};
+
+export const ContentLanguageSwitch = ({ contentLangDefault }: Props) => {
+    const t = useTranslations();
+    const contentLang = useSearchSettingsStore((state) => state.language) || contentLangDefault;
+    const updatePreferences = useSearchSettingsStore((state) => state.updatePreferences);
+    const availableLanguages = useLanguageStore((state) => state.availableLanguages);
+    const { availableVersions } = useAppConfig()
+
+
+    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 ?? "#",
+            };
+        });
+    }, [availableLanguages, availableVersions]);
+
+    const [queryLanguage, setContentLanguage] = useQueryState('language', {
+        history: 'push',
+        shallow: false,
+    })
+
+    const changeContentLanguage = (locale: string) => {
+        startTransition(() => {
+            updatePreferences({ language: locale })
+            if (queryLanguage != null) {
+                setContentLanguage(locale)
+                return;
+            }
+
+            const currentPath = window.location.pathname;
+            const isArticlePage = currentPath.includes("/pages");
+            if (!isArticlePage) {
+                window.location.reload();
+                return;
+            };
+
+            const targetVersion = findVersionByLocale(locale);
+            if (targetVersion?.link) {
+                window.location.href = targetVersion.link;
+                return;
+            }
+
+            articleNotAvailableToast()
+        });
+    };
+
+    const articleNotAvailableToast = () => {
+        toast(t('sorry'), {
+            description: t('toast.articleNotAvailable'),
+            duration: 10000,
+        })
+    }
+
+    return (
+        <SharedLanguageSwitch
+            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            changeLanguage={changeContentLanguage}
+            selected={contentLang}
+        />
+    );
+};

package/src/navbar/language-switcher/shared.tsx

@@ -1,33 +1,33 @@
-import React, { FC } from "react";
-import { LanguageAndCountries } from "@c-rex/interfaces";
-import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@c-rex/ui/dropdown-menu";
-import { Flag } from "../../icons/flag-icon";
-
-interface SharedLanguageSwitchProps {
-    availableLanguagesAndCountries: (LanguageAndCountries & { link?: string })[];
-    selected: string;
-    changeLanguage: (locale: string) => void;
-}
-export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableLanguagesAndCountries, changeLanguage, selected }) => {
-
-    return (
-        <DropdownMenuRadioGroup value={selected}>
-            {availableLanguagesAndCountries.map(item => {
-                return (
-                    <DropdownMenuRadioItem
-                        key={item.value}
-                        value={item.value}
-                        link={item?.link}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            changeLanguage(item.value)
-                        }}
-                    >
-                        <Flag countryCode={item.country} />
-                        <span>{item.lang.toUpperCase()}</span>
-                    </DropdownMenuRadioItem>
-                )
-            })}
-        </DropdownMenuRadioGroup>
-    );
-};
+import React, { FC } from "react";
+import { LanguageAndCountries } from "@c-rex/interfaces";
+import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@c-rex/ui/dropdown-menu";
+import { Flag } from "../../icons/flag-icon";
+
+interface SharedLanguageSwitchProps {
+    availableLanguagesAndCountries: (LanguageAndCountries & { link?: string })[];
+    selected: string;
+    changeLanguage: (locale: string) => void;
+}
+export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableLanguagesAndCountries, changeLanguage, selected }) => {
+
+    return (
+        <DropdownMenuRadioGroup value={selected}>
+            {availableLanguagesAndCountries.map(item => {
+                return (
+                    <DropdownMenuRadioItem
+                        key={item.value}
+                        value={item.value}
+                        link={item?.link}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            changeLanguage(item.value)
+                        }}
+                    >
+                        <Flag countryCode={item.country} />
+                        <span>{item.lang.toUpperCase()}</span>
+                    </DropdownMenuRadioItem>
+                )
+            })}
+        </DropdownMenuRadioGroup>
+    );
+};

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

@@ -1,38 +1,37 @@
-"use client"
-
-import React, { FC, startTransition } from "react";
-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";
-
-export const UILanguageSwitch: FC = () => {
-    const uiLang = useLanguageStore((state) => state.uiLang);
-    const setUiLang = useLanguageStore.getState().setUiLang;
-    const UILanguages = UI_LANG_OPTIONS.map((lang) => {
-        const langCode = lang.split("-")[0] as string;
-        return {
-            value: lang,
-            lang: langCode,
-            country: getCountryCodeByLang(langCode)
-        };
-    })
-
-    const setUILanguage = (locale: string) => {
-        startTransition(() => {
-            setUiLang(locale)
-            setCookie(UI_LANG_KEY, locale, { httpOnly: false });
-
-            //window.location.reload()
-        });
-    }
-
-    return (
-        <SharedLanguageSwitch
-            availableLanguagesAndCountries={UILanguages}
-            changeLanguage={setUILanguage}
-            selected={uiLang}
-        />
-    );
-};
+"use client"
+
+import React, { FC, startTransition } from "react";
+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 { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export const UILanguageSwitch: FC = () => {
+    const uiLang = useLocale().toLowerCase();
+    const router = useRouter();
+    const UILanguages = UI_LANG_OPTIONS.map((lang) => {
+        const langCode = lang.split("-")[0] as string;
+        return {
+            value: lang,
+            lang: langCode,
+            country: getCountryCodeByLang(langCode)
+        };
+    })
+
+    const setUILanguage = (locale: string) => {
+        startTransition(() => {
+            setCookie(UI_LANG_KEY, locale, { httpOnly: false });
+            router.refresh();
+        });
+    }
+
+    return (
+        <SharedLanguageSwitch
+            availableLanguagesAndCountries={UILanguages}
+            changeLanguage={setUILanguage}
+            selected={uiLang}
+        />
+    );
+};

package/src/navbar/navbar.tsx

@@ -1,148 +1,157 @@
-import { ComponentProps, FC } from "react";
-import Link from "next/link";
-import { SignInBtn } from "./sign-in-out-btns";
-import { getServerSession } from "next-auth";
-import { SettingsMenu } from "./settings";
-import { UserMenu } from "./user-menu";
-import { SearchInput } from "../search-input";
-import { CrexSDK } from "@c-rex/core/sdk";
-import * as AutocompleteOptions from "../generated/suggestions";
-import { cn } from "@c-rex/utils";
-import { getTranslations } from "next-intl/server";
-import { Button } from "@c-rex/ui/button";
-import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
-import { Menu } from "lucide-react";
-
-type NavBarProps = {
-    title?: string;
-    showInput: boolean;
-    showPkgFilter: boolean;
-    onSelectPath?: string;
-    autocompleteType?: keyof typeof AutocompleteOptions;
-    //these two props are only used when showPkgFilter is false and has some values to override the default behavior
-    alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
-    alternativeOnSelectPath?: string;
-    showMenu?: boolean;
-}
-
-export const NavBar: FC<NavBarProps> = async ({
-    title,
-    showInput,
-    autocompleteType,
-    onSelectPath,
-    showMenu = true,
-    ...props
-}) => {
-    const t = await getTranslations();
-    const sdk = new CrexSDK();
-    const clientConfigs = sdk.getClientConfig();
-    const serverConfigs = sdk.getServerConfig();
-
-    const willShowInput = showInput && autocompleteType && onSelectPath;
-    if (!willShowInput && showInput) {
-        throw new Error("NavBar: autocompleteType and onSelectPath are required when showInput is true");
-    }
-
-    let session: any;
-    if (clientConfigs.OIDC.userEnabled) {
-        session = await getServerSession();
-    }
-
-    return (
-        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
-            <div className="w-full flex items-center justify-between gap-2">
-                <div
-                    className={cn(
-                        "flex items-center gap-4",
-                        title && "lg:w-[calc(16rem-16px)]"
-                    )}
-                >
-
-                    <Link href="/"
-                    >
-                        <img
-                            src="/img/logo.png"
-                            alt="C-rex Logo"
-                            className="h-14"
-                        />
-                    </Link>
-
-                    {showMenu && (
-                        <DropdownHoverItem
-                            label={
-                                <Button variant="outline" rounded="full" size="icon">
-                                    <Menu className="size-4" />
-                                </Button>
-                            }
-                        >
-                            <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" className="flex justify-start">
-                                <Link href="/topics">
-                                    {t('navigation.topics')}
-                                </Link>
-                            </Button>
-                            <Button asChild variant="link" className="flex justify-start">
-                                <Link href="/fragments">
-                                    {t('navigation.fragments')}
-                                </Link>
-                            </Button>
-                            <Button asChild variant="link" className="flex justify-start">
-                                <Link href="/packages">
-                                    {t('navigation.packages')}
-                                </Link>
-                            </Button>
-                            <Button asChild variant="link" className="flex justify-start">
-                                <Link href="/information-units">
-                                    {t('navigation.informationUnits')}
-                                </Link>
-                            </Button>
-                        </DropdownHoverItem>
-                    )}
-                </div>
-
-                {title && (
-                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
-                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
-                    </div>
-                )}
-
-                <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} />
-                        </div>
-                    }
-
-                    {clientConfigs.OIDC.userEnabled && (
-                        <>
-                            {session ? (
-                                <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
-                            ) : (
-                                <SignInBtn />
-                            )}
-                        </>
-                    )}
-
-                    {clientConfigs.languageSwitcher.enabled && (
-                        <SettingsMenu />
-                    )}
-                </div>
-            </div>
-
-            {title && (
-                <div className="flex-1 flex justify-center md:hidden">
-                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
-                </div>
-            )}
-        </header>
-    );
-};
+import { FC } from "react";
+import Link from "next/link";
+import { SignInBtn } from "./sign-in-out-btns";
+import { getServerSession } from "next-auth";
+import { SettingsMenu } from "./settings";
+import { UserMenu } from "./user-menu";
+import { SearchInput } from "../search-input";
+import { CrexSDK } from "@c-rex/core/sdk";
+import * as AutocompleteOptions from "../generated/suggestions";
+import { cn } from "@c-rex/utils";
+import { getTranslations } from "next-intl/server";
+import { Button } from "@c-rex/ui/button";
+import { DropdownHoverItem } from "@c-rex/ui/dropdown-hover-item";
+import { Menu } from "lucide-react";
+import { getOrganizationBranding } from "@c-rex/services/vcard";
+
+type NavBarProps = {
+    title?: string;
+    showInput: boolean;
+    showPkgFilter: boolean;
+    showOrganizationLogo?: boolean;
+    onSelectPath?: string;
+    autocompleteType?: keyof typeof AutocompleteOptions;
+    //these two props are only used when showPkgFilter is false and has some values to override the default behavior
+    alternativeAutocompleteType?: keyof typeof AutocompleteOptions;
+    alternativeOnSelectPath?: string;
+    showMenu?: boolean;
+}
+
+export const NavBar: FC<NavBarProps> = async ({
+    title,
+    showInput,
+    showOrganizationLogo = true,
+    autocompleteType,
+    onSelectPath,
+    showMenu = true,
+    ...props
+}) => {
+    const t = await getTranslations();
+    const sdk = new CrexSDK();
+    const clientConfigs = sdk.getClientConfig();
+    const serverConfigs = sdk.getServerConfig();
+    const organizationBranding = showOrganizationLogo ? await getOrganizationBranding() : undefined;
+
+    const willShowInput = showInput && autocompleteType && onSelectPath;
+    if (!willShowInput && showInput) {
+        throw new Error("NavBar: autocompleteType and onSelectPath are required when showInput is true");
+    }
+
+    let session: any;
+    if (clientConfigs.OIDC.userEnabled) {
+        session = await getServerSession();
+    }
+
+    return (
+        <header className="sticky flex flex-col top-0 z-40 w-full p-4 backdrop-blur-xl transition-all bg-transparent border-b gap-2">
+            <div className="w-full flex items-center justify-between gap-2">
+                <div
+                    className={cn(
+                        "flex items-center gap-4",
+                        title && "lg:w-[calc(16rem-16px)]"
+                    )}
+                >
+
+                    {showOrganizationLogo && organizationBranding && (
+                        <Link href="/">
+                            <img
+                                src={organizationBranding.logoSrc}
+                                alt={`${organizationBranding.organizationName} logo`}
+                                className="h-14"
+                            />
+                        </Link>
+                    )}
+
+                    {showMenu && (
+                        <DropdownHoverItem
+                            label={
+                                <Button variant="outline" rounded="full" size="icon">
+                                    <Menu className="size-4" />
+                                </Button>
+                            }
+                        >
+                            <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" className="flex justify-start">
+                                <Link href="/topics">
+                                    {t('navigation.topics')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link" className="flex justify-start">
+                                <Link href="/fragments">
+                                    {t('navigation.fragments')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link" className="flex justify-start">
+                                <Link href="/packages">
+                                    {t('navigation.packages')}
+                                </Link>
+                            </Button>
+                            <Button asChild variant="link" className="flex justify-start">
+                                <Link href="/information-units">
+                                    {t('navigation.informationUnits')}
+                                </Link>
+                            </Button>
+                        </DropdownHoverItem>
+                    )}
+                </div>
+
+                {title && (
+                    <div className="flex-1 hidden md:flex md:justify-center lg:justify-start">
+                        <h1 className="md:text-2xl lg:text-3xl font-bold tracking-tight text-balance">{title}</h1>
+                    </div>
+                )}
+
+                <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}
+                            />
+                        </div>
+                    }
+
+                    {clientConfigs.OIDC.userEnabled && (
+                        <>
+                            {session ? (
+                                <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
+                            ) : (
+                                <SignInBtn />
+                            )}
+                        </>
+                    )}
+
+                    {clientConfigs.languageSwitcher.enabled && (
+                        <SettingsMenu />
+                    )}
+                </div>
+            </div>
+
+            {title && (
+                <div className="flex-1 flex justify-center md:hidden">
+                    <h1 className="text-2xl font-bold tracking-tight text-balance">{title}</h1>
+                </div>
+            )}
+        </header>
+    );
+};