@c-rex/components 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "files": [
     "src"
   ],
@@ -49,6 +49,10 @@
       "types": "./src/result-view/table.tsx",
       "import": "./src/result-view/table.tsx"
     },
+    "./dropdown-menu": {
+      "types": "./src/result-view/dropdown-menu.tsx",
+      "import": "./src/result-view/dropdown-menu.tsx"
+    },
     "./sidebar": {
       "types": "./src/sidebar.tsx",
       "import": "./src/sidebar.tsx"
@@ -61,9 +65,9 @@
       "types": "./src/check-article-lang.tsx",
       "import": "./src/check-article-lang.tsx"
     },
-    "./cookies": {
-      "types": "./src/cookies.tsx",
-      "import": "./src/cookies.tsx"
+    "./render-article": {
+      "types": "./src/render-article.tsx",
+      "import": "./src/render-article.tsx"
     },
     "./page-wrapper": {
       "types": "./src/page-wrapper.tsx",

package/src/autocomplete.tsx

@@ -31,6 +31,10 @@ export const AutoComplete = ({
     const [suggestions, setSuggestions] = useState<string[]>([]);
     const [open, setOpen] = useState(false);
 
+    useEffect(() => {
+        setQuery(initialValue);
+    }, [initialValue]);
+
     useEffect(() => {
         const debounceFetch = setTimeout(() => {
             if (query) {
@@ -56,7 +60,7 @@ export const AutoComplete = ({
                             onMouseDown={() => setOpen(false)}
                             onFocus={() => setOpen(true)}
                         >
-                            <Input />
+                            <Input value={query} />
                         </CommandPrimitive.Input>
                     </PopoverAnchor>
 
@@ -75,36 +79,29 @@ export const AutoComplete = ({
                         }}
                         className="w-[--radix-popover-trigger-width] p-0"
                     >
-                        <CommandList>
-                            {/*isLoading && (
-                                <CommandPrimitive.Loading>
-                                    <div className="p-1">
-                                        <Skeleton className="h-6 w-full" />
-                                    </div>
-                                </CommandPrimitive.Loading>
-                            )*/}
-
-                            {suggestions.length > 0 ? (
-                                <CommandGroup>
-                                    {suggestions.map((option) => (
-                                        <CommandItem
-                                            key={option}
-                                            value={option}
-                                            onMouseDown={(e) => e.preventDefault()}
-                                            onSelect={(inputValue) => {
-                                                setOpen(false);
-                                                onSelect(inputValue ?? "");
-                                            }}
-                                        >
-                                            <Check className="mr-2 h-4 w-4 opacity-0" />
-                                            {option}
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            ) : (
-                                <CommandEmpty>No suggestions.</CommandEmpty>
-                            )}
-                        </CommandList>
+                        {query.length > 0 && (
+                            <CommandList>
+                                {suggestions.length > 0 ? (
+                                    <CommandGroup>
+                                        {suggestions.map((option) => (
+                                            <CommandItem
+                                                key={option}
+                                                value={option}
+                                                onMouseDown={(e) => e.preventDefault()}
+                                                onSelect={(inputValue) => {
+                                                    setOpen(false);
+                                                    onSelect(inputValue);
+                                                }}
+                                            >
+                                                {option}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                ) : (
+                                    <CommandEmpty>No suggestions.</CommandEmpty>
+                                )}
+                            </CommandList>
+                        )}
                     </PopoverContent>
                 </Command>
             </Popover>

package/src/blog-card.tsx

@@ -1,58 +1,52 @@
 import Link from "next/link";
-import React from "react";
 import { cn } from "@c-rex/utils";
 import { BlurImage } from "./blur-image";
 import { useTranslations } from "next-intl";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 
 interface BlogCardProp {
-    data: {
-        title: string;
-        blurDataURL: string;
-        image: string;
-        description: string;
-        authors: string;
-        _id: string;
-        date: string;
-        slug: string;
-    };
+    item: informationUnitsResponseItem;
     priority?: boolean;
     horizontal?: boolean;
 }
 
 export const BlogCard = ({
-    data,
+    item,
     priority,
     horizontal = false,
 }: BlogCardProp) => {
     const t = useTranslations("results")
+    const image = "/img/blog-post-1.webp"
+    const blurDataURL = "/img/blog-post-1.webp"
 
     return (
         <article
             className={cn(
-                "group relative",
+                "group relative", `c-rex_result_${item.type.toLowerCase()}`,
                 horizontal
                     ? "grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-6"
                     : "flex flex-col space-y-2",
+                item.disabled ? "c-rex_result_item_disabled" : ""
             )}
         >
-            {data.image && (
-                <div className="w-full overflow-hidden rounded-xl border">
-                    <BlurImage
-                        alt={data.title}
-                        blurDataURL={data.blurDataURL}
-                        className={cn(
-                            "size-full object-cover object-center",
-                            horizontal ? "lg:h-72" : null,
-                        )}
-                        width={800}
-                        height={400}
-                        priority={priority}
-                        placeholder="blur"
-                        src={data.image}
-                        sizes="(max-width: 768px) 750px, 600px"
-                    />
-                </div>
-            )}
+
+            <div className="w-full overflow-hidden rounded-xl border">
+                <BlurImage
+                    alt={item.title}
+                    blurDataURL={blurDataURL}
+                    className={cn(
+                        "size-full object-cover object-center",
+                        horizontal ? "lg:h-72" : null,
+                    )}
+                    width={800}
+                    height={400}
+                    priority={priority}
+                    placeholder="blur"
+                    src={image}
+                    sizes="(max-width: 768px) 750px, 600px"
+                />
+            </div>
+
             <div
                 className={cn(
                     "flex flex-1 flex-col",
@@ -61,31 +55,34 @@ export const BlogCard = ({
             >
                 <div className="w-full">
                     <h2 className="my-1.5 line-clamp-2 font-heading text-2xl">
-                        {data.title}
+                        {item.title}
                     </h2>
-                    {data.description && (
+                    {item.type && (
                         <p className="line-clamp-2 text-muted-foreground">
-                            {data.description}
+                            {item.type}
                         </p>
                     )}
                 </div>
                 {/*
                 <div className="mt-4 flex items-center space-x-3">
                     <div className="flex items-center -space-x-2">
-                        {data.authors && (
-                            <p className="text-sm text-muted-foreground">{data.authors}</p>
+                        {item.authors && (
+                            <p className="text-sm text-muted-foreground">{item.authors}</p>
                         )}
                     </div>
 
-                    {data.date && (
-                        <p className="text-sm text-muted-foreground">{data.date}</p>
+                    {item.date && (
+                        <p className="text-sm text-muted-foreground">{item.date}</p>
                     )}
                 </div>
                 */}
             </div>
-            <Link href={data.slug} className="absolute inset-0" target="_blank">
-                <span className="sr-only">{t("viewArticle")}</span>
-            </Link>
+
+            {!item.disabled && (
+                <Link href={item.link} className="absolute inset-0" target="_blank">
+                    <span className="sr-only">{t("viewArticle")}</span>
+                </Link>
+            )}
         </article>
     );
 };

package/src/breadcrumb.tsx

@@ -13,10 +13,11 @@ import { useTranslations } from 'next-intl';
 
 interface BreadcrumbProps {
     items: TreeOfContent[];
+    lang: string;
     loading?: boolean;
 }
 
-export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
+export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading, lang }) => {
     const t = useTranslations("breadcrumbs");
     if (!items) {
         return null;
@@ -61,7 +62,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
     };
 
     return (
-        <BreadcrumbComponent>
+        <BreadcrumbComponent lang={lang}>
             <BreadcrumbList>
                 {newItemList.map((item, index) => {
                     const isLast = index === newItemList.length - 1;

package/src/check-article-lang.tsx

@@ -1,18 +1,16 @@
 "use client"
 
-import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
 import { FC, useEffect, useRef } from "react";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 
 interface Props {
     availableVersions: SidebarAvailableVersionsInterface[]
-    contentLanguage: string
 }
 
-export const CheckArticleLangToast: FC<Props> = ({
-    availableVersions,
-    contentLanguage,
-}) => {
+export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
+    const { contentLang } = useAppConfig()
     const hasRun = useRef(false)
 
     useEffect(() => {
@@ -20,9 +18,9 @@ export const CheckArticleLangToast: FC<Props> = ({
         hasRun.current = true
 
         const activeArticle = availableVersions.filter((item) => item.active)[0]
-        if (activeArticle == undefined || activeArticle.lang == contentLanguage) return
+        if (activeArticle == undefined || activeArticle.lang == contentLang) return
 
-        const articleAvailable = availableVersions.find((item) => item.lang === contentLanguage)
+        const articleAvailable = availableVersions.find((item) => item.lang === contentLang)
         if (articleAvailable == undefined) return
 
         showToast(articleAvailable.lang, articleAvailable.link)

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

@@ -1,38 +1,24 @@
-'use client'
+"use client"
 
-import React, { FC, startTransition, useEffect, useState } from "react";
-import { LanguageAndCountries } from "@c-rex/interfaces";
+import React, { startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { setCookie } from "@c-rex/utils/next-cookies";
+import { getFromCookieString, setCookie } from "@c-rex/utils";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
 import { useQueryState } from "nuqs"
-import { getCookieInFront } from "@c-rex/utils";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
-interface ContentLanguageSwitchProps {
-    availableLanguagesAndCountries: LanguageAndCountries[];
-}
-export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
-    const [selected, setSelected] = useState("");
+export const ContentLanguageSwitch = () => {
+    const { availableLanguagesAndCountries, setContentLang } = useAppConfig()
+    const contentLang = getFromCookieString(document.cookie, CONTENT_LANG_KEY)
     const [queryLanguage, setContentLanguage] = useQueryState('language', {
         history: 'push',
         shallow: false,
     })
 
-    useEffect(() => {
-        const get = async () => {
-            const uiLang = await getCookieInFront(CONTENT_LANG_KEY)
-
-            if (uiLang.value != null) {
-                setSelected(uiLang.value)
-                return
-            }
-        }
-        get()
-    }, [])
-
     const changeContentLanguage = (locale: string) => {
         startTransition(() => {
             setCookie(CONTENT_LANG_KEY, locale)
+            setContentLang(locale)
 
             if (queryLanguage != null) {
                 setContentLanguage(locale)
@@ -44,7 +30,7 @@ export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availabl
         <SharedLanguageSwitch
             availableLanguagesAndCountries={availableLanguagesAndCountries}
             changeLanguage={changeContentLanguage}
-            selected={selected}
+            selected={contentLang}
         />
     );
 };

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

@@ -1,14 +1,15 @@
 "use client"
 
-import React, { FC, startTransition, useEffect, useState } from "react";
+import React, { FC, startTransition } from "react";
 import { SharedLanguageSwitch } from "./shared";
-import { setCookie } from "@c-rex/utils/next-cookies";
 import { UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
-import { getCookieInFront, getCountryCodeByLang } from "@c-rex/utils";
+import { getCountryCodeByLang, getFromCookieString, setCookie } from "@c-rex/utils";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 export const UILanguageSwitch: FC = () => {
+    const { setUiLang } = useAppConfig()
+    const uiLang = getFromCookieString(document.cookie, UI_LANG_KEY).toLowerCase()
     const UILanguages = UI_LANG_OPTIONS.map((lang) => {
-
         const langCode = lang.split("-")[0] as string;
         return {
             value: lang,
@@ -17,23 +18,12 @@ export const UILanguageSwitch: FC = () => {
         };
     })
 
-    const [selected, setSelected] = useState("");
-
-    useEffect(() => {
-        const get = async () => {
-            const uiLang = await getCookieInFront(UI_LANG_KEY)
-
-            if (uiLang.value != null) {
-                setSelected(uiLang.value.toLowerCase())
-                return
-            }
-        }
-        get()
-    }, [])
-
     const setUILanguage = (locale: string) => {
         startTransition(() => {
             setCookie(UI_LANG_KEY, locale)
+            setUiLang(locale)
+
+            window.location.reload()
         });
     }
 
@@ -41,7 +31,7 @@ export const UILanguageSwitch: FC = () => {
         <SharedLanguageSwitch
             availableLanguagesAndCountries={UILanguages}
             changeLanguage={setUILanguage}
-            selected={selected}
+            selected={uiLang}
         />
     );
 };

package/src/navbar/navbar.tsx

@@ -13,15 +13,12 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@c-rex/ui/dropdown-menu"
-import { Search, Settings } from "lucide-react";
+import { Settings } from "lucide-react";
 import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
 import { getTranslations } from "next-intl/server";
 import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
-import { Input } from "@c-rex/ui/input";
 import { getServerSession } from "next-auth";
 import { getConfigs } from "@c-rex/utils/next-cookies";
-import { LanguageService } from "@c-rex/services";
-
 
 interface NavBarProps {
     title: string;
@@ -29,9 +26,7 @@ interface NavBarProps {
 
 export const NavBar: FC<NavBarProps> = async ({ title }) => {
     const t = await getTranslations();
-    const configs = await getConfigs();
-    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
-    const availableLanguagesAndCountries = await languageService.getLanguagesAndCountries();
+    const configs = getConfigs();
 
     let session: any;
     if (configs.OIDC.user.enabled) {
@@ -59,10 +54,12 @@ export const NavBar: FC<NavBarProps> = async ({ title }) => {
                 </div>
 
                 <div className="flex items-center space-x-3">
+                    {/*
                     <div className="flex items-center px-3 border rounded-full h-8">
                         <Search className="h-4 w-4 shrink-0 opacity-50" />
                         <Input variant="embedded" placeholder="Search" />
                     </div>
+                        */}
 
                     {configs.OIDC.user.enabled && (
                         <>
@@ -93,9 +90,7 @@ export const NavBar: FC<NavBarProps> = async ({ title }) => {
 
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
-                                            <ContentLanguageSwitch
-                                                availableLanguagesAndCountries={availableLanguagesAndCountries}
-                                            />
+                                            <ContentLanguageSwitch />
                                         </DropdownMenuSubContent>
                                     </DropdownMenuPortal>
                                 </DropdownMenuSub>

package/src/render-article.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+type Props = {
+    htmlContent: string,
+    contentLang: string
+}
+
+export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    return (
+        <div
+            lang={contentLang}
+            className="pb-4"
+            dangerouslySetInnerHTML={{ __html: htmlContent }}
+        />
+    );
+}

package/src/result-list.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from "react";
-import { ConfigInterface, DefaultPageInfo, informationUnitsResponseItems, } from "@c-rex/interfaces";
+import { ConfigInterface, DefaultPageInfo, informationUnitsResponseItem, } from "@c-rex/interfaces";
 import { Empty } from "./empty";
 import BlogView from './result-view/blog';
 import TableView from './result-view/table';
 import { Pagination } from "./pagination";
 
 interface ResultListProps {
-    items: informationUnitsResponseItems[];
+    items: informationUnitsResponseItem[];
     configs: ConfigInterface;
     pagination: DefaultPageInfo;
 }

package/src/result-view/blog.tsx

@@ -1,30 +1,18 @@
 import React, { FC } from "react";
 import { BlogCard } from "../blog-card";
-import { informationUnitsResponseItems } from "@c-rex/interfaces";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 
 interface BlogViewProps {
-    items: informationUnitsResponseItems[];
+    items: informationUnitsResponseItem[];
 }
 
 const BlogView: FC<BlogViewProps> = ({ items }) => {
-
     return (
         <div className="grid gap-8 md:grid-cols-2 md:gap-x-6 md:gap-y-10 xl:grid-cols-3">
             {items.map((item, index) => {
+
                 return (
-                    <BlogCard
-                        key={index}
-                        data={{
-                            title: item.title,
-                            blurDataURL: "/img/blog-post-1.webp",
-                            image: "/img/blog-post-1.webp",
-                            description: item.type,
-                            authors: "item.authors",
-                            _id: "item._id",
-                            date: "item.date",
-                            slug: item.link,
-                        }}
-                    />
+                    <BlogCard key={index} item={item} />
                 );
             })}
         </div>

package/src/result-view/table.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
     Table,
     TableBody,
@@ -6,18 +6,17 @@ import {
     TableHeader,
     TableRow,
 } from "@c-rex/ui/table";
-import { informationUnitsResponseItems } from "@c-rex/interfaces";
+import { informationUnitsResponseItem } from "@c-rex/interfaces";
 import { useTranslations } from "next-intl";
 import { Ban, CloudDownload, CloudOff, Eye, EyeOff } from "lucide-react";
 import { DropdownMenu } from "./dropdown-menu";
 
 interface TableViewProps {
-    items: informationUnitsResponseItems[];
+    items: informationUnitsResponseItem[];
 }
 
 const TableView: FC<TableViewProps> = ({ items }) => {
     const t = useTranslations("results")
-
     return (
         <div className="rounded-md border">
             <Table>
@@ -31,7 +30,7 @@ const TableView: FC<TableViewProps> = ({ items }) => {
                 </TableHeader>
                 <TableBody>
                     {items.map((item, index) => {
-                        const clazz = `h-12 c-rex_result_row c-rex_result_${item.type.toLowerCase()} ${item.disabled ? "c-rex_result_row_disabled" : ""}`
+                        const clazz = `h-12 c-rex_result_row c-rex_result_${item.type.toLowerCase()} ${item.disabled ? "c-rex_result_item_disabled" : ""}`
 
                         return (
                             <TableRow key={index} className={clazz}>

package/src/sidebar.tsx

@@ -26,7 +26,7 @@ interface SidebarProps extends ComponentProps<typeof Sidebar> {
     availableVersions: SidebarAvailableVersionsInterface[]
 }
 
-export function AppSidebar({ data, availableVersions, loading, className, ...props }: SidebarProps) {
+export function AppSidebar({ data, availableVersions, loading, className, lang, ...props }: SidebarProps) {
     const t = useTranslations();
 
     const getFlagIcon = (countryCode: string): JSX.Element | null => {
@@ -40,7 +40,7 @@ export function AppSidebar({ data, availableVersions, loading, className, ...pro
     const tableOfContentGroup = (): JSX.Element | null => {
         if (loading) {
             return (
-                <>
+                <SidebarGroup className="pt-4">
                     <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" />
@@ -48,14 +48,20 @@ export function AppSidebar({ data, availableVersions, loading, className, ...pro
                     <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" />
-                </>
+                </SidebarGroup>
             )
         }
 
         if (data.length == 0) return null;
 
+        const langProp = {} as any
+
+        if (lang) {
+            langProp.lang = lang
+        }
+
         return (
-            <SidebarGroup>
+            <SidebarGroup {...langProp}>
                 <SidebarMenu>
                     {data.map((item) => (
                         <SidebarMenuItem key={item.id}>

package/src/cookies.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import { FC, useEffect } from "react";
-import { CONTENT_LANG_KEY, UI_LANG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
-import { getCookieInFront } from "@c-rex/utils";
-import { setCookie } from "@c-rex/utils/next-cookies";
-import { ConfigInterface, LanguageAndCountries } from "@c-rex/interfaces";
-
-type Props = {
-    configs: ConfigInterface;
-    availableLanguages: LanguageAndCountries[];
-}
-export const SetCookies: FC<Props> = ({ configs, availableLanguages }) => {
-    const manageUILanguage = async (configs: ConfigInterface): Promise<void> => {
-        const hasUILangCookie = await getCookieInFront(UI_LANG_KEY);
-
-        if (hasUILangCookie.value === null) {
-            const browserLang = navigator.language;
-
-            const locale = UI_LANG_OPTIONS.includes(browserLang.toLowerCase())
-                ? browserLang
-                : configs.languageSwitcher.default;
-
-            setCookie(UI_LANG_KEY, locale);
-        }
-    }
-
-    const manageContentLanguage = async (configs: ConfigInterface, availableLanguages: LanguageAndCountries[]): Promise<void> => {
-        const hasContentLangCookie = await getCookieInFront(CONTENT_LANG_KEY);
-
-        if (hasContentLangCookie.value === null) {
-            const browserLang = navigator.language;
-            const hasLang = availableLanguages.some((item) => item.value === browserLang);
-
-            const locale = hasLang
-                ? browserLang
-                : configs.languageSwitcher.default;
-
-
-            setCookie(CONTENT_LANG_KEY, locale);
-        }
-    }
-
-    useEffect(() => {
-        manageUILanguage(configs);
-        manageContentLanguage(configs, availableLanguages);
-    }, [])
-
-    return null;
-};