@c-rex/components 0.0.11 → 0.1.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c-rex/components",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "files": [
     "src"
   ],
   "publishConfig": {
     "access": "public"
-},
+  },
   "sideEffects": false,
   "exports": {
     "./autocomplete": {
@@ -52,6 +52,10 @@
     "./sidebar": {
       "types": "./src/sidebar.tsx",
       "import": "./src/sidebar.tsx"
+    },
+    "./dialog-filter": {
+      "types": "./src/dialog-filter.tsx",
+      "import": "./src/dialog-filter.tsx"
     }
   },
   "scripts": {
@@ -82,13 +86,18 @@
     "typescript": "latest"
   },
   "dependencies": {
+    "@c-rex/config": "*",
+    "@c-rex/constants": "*",
     "@c-rex/contexts": "*",
     "@c-rex/interfaces": "*",
     "@c-rex/services": "*",
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
-    "@c-rex/config": "*",
+    "country-flag-icons": "^1.5.19",
+    "lucide-react": "^0.511.0",
     "next": "^14",
+    "next-intl": "^4.1.0",
+    "nuqs": "^2.4.3",
     "react": "^18",
     "react-dom": "^18",
     "tailwindcss-animate": "^1.0.7"

package/src/autocomplete.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Check } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -28,7 +29,6 @@ export const AutoComplete = ({
 }: Props) => {
     const [query, setQuery] = useState(initialValue);
     const [suggestions, setSuggestions] = useState<string[]>([]);
-
     const [open, setOpen] = useState(false);
 
     useEffect(() => {

package/src/breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import React, { FC, Fragment, ReactNode } from "react";
 import {
     Breadcrumb as BreadcrumbComponent,
     BreadcrumbItem,
@@ -9,6 +9,7 @@ import {
 } from "@c-rex/ui/breadcrumb";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { TreeOfContent } from "@c-rex/interfaces";
+import { useTranslations } from 'next-intl';
 
 interface BreadcrumbProps {
     items: TreeOfContent[];
@@ -16,6 +17,7 @@ interface BreadcrumbProps {
 }
 
 export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
+    const t = useTranslations("breadcrumbs");
     if (!items) {
         return null;
     }
@@ -25,7 +27,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
             <BreadcrumbComponent>
                 <BreadcrumbList>
                     <BreadcrumbItem>
-                        <BreadcrumbPage>Home</BreadcrumbPage>
+                        <BreadcrumbPage>{t("home")}</BreadcrumbPage>
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
@@ -42,7 +44,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
 
     const homeItem: TreeOfContent = {
         link: "/",
-        label: "Home",
+        label: t("home"),
         id: "home",
         active: false,
         children: [],
@@ -65,14 +67,14 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items, loading }) => {
                     const isLast = index === newItemList.length - 1;
 
                     return (
-                        <>
+                        <Fragment key={`${item.label}-fragment`}>
                             <BreadcrumbItem key={`${item.label}-item`}>
                                 {renderLink(!isLast, item)}
                             </BreadcrumbItem>
                             {!isLast && (
                                 <BreadcrumbSeparator key={`${item.label}-separator`} />
                             )}
-                        </>
+                        </Fragment>
                     );
                 })}
             </BreadcrumbList>

package/src/dialog-filter.tsx

@@ -0,0 +1,102 @@
+import React, { FC, useState } from "react"
+import { Button } from "@c-rex/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@c-rex/ui/dialog"
+import { Checkbox } from "@c-rex/ui/checkbox"
+import { Label } from "@c-rex/ui/label"
+import { useQueryState } from "nuqs"
+import { useTranslations } from "next-intl"
+
+interface DialogFilterProps {
+    trigger: React.ReactNode;
+    startSelectedLanguages: string[];
+    availableLanguages: any;
+}
+
+export const DialogFilter: FC<DialogFilterProps> = ({
+    trigger,
+    startSelectedLanguages,
+    availableLanguages,
+}) => {
+    const t = useTranslations();
+
+    const [_, setContentLanguage] = useQueryState('language', {
+        history: 'push',
+        shallow: false,
+    })
+
+    const [languages, setLanguages] = useState(availableLanguages.map((item: any) => {
+        const checked = startSelectedLanguages.includes(item.value)
+        return {
+            lang: item.lang,
+            value: item.value,
+            checked,
+        }
+    }));
+
+    const onChange = (item: any) => {
+        const newLang = languages.filter((lang: any) => lang.lang !== item.lang)
+        setLanguages([...newLang, item].sort((a, b) => {
+            return a.value.localeCompare(b.value)
+        }))
+    }
+
+    const apply = () => {
+        const selectedLanguages = languages.filter((item: any) => item.checked).map((item: any) => item.value).join(',')
+        setContentLanguage(selectedLanguages)
+    }
+
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                {trigger}
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t("filters")}</DialogTitle>
+                </DialogHeader>
+                <div className="grid grid-cols-2 items-center  py-4">
+                    <Label className="text-right">
+                        {t("languages")}:
+                    </Label>
+                    <div className="flex items-center">
+                        {languages?.map((item: any, index: any) => {
+                            return (
+                                <div key={index} className="mr-4">
+                                    <Checkbox
+                                        id={`available-languages${item.lang}`}
+                                        className="mr-2"
+                                        {...({ checked: item.checked })}
+                                        onCheckedChange={(checked: boolean) => onChange({
+                                            ...item,
+                                            checked: checked,
+                                        })}
+                                    />
+                                    <label
+                                        htmlFor={`available-languages${item.lang}`}
+                                        className="text-sm font-medium "
+                                    >
+                                        {item.lang.toUpperCase()}
+                                    </label>
+                                </div>
+                            )
+                        })}
+                    </div>
+
+                </div>
+                <DialogFooter>
+                    <DialogClose asChild>
+                        <Button onClick={apply}>{t("applyFilters")}</Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/empty.tsx

@@ -1,12 +1,15 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
+import { useTranslations } from "next-intl";
 
 export const Empty: FC = () => {
+    const t = useTranslations("results")
+
     return (
         <Alert className="my-2">
-            <AlertTitle>No results</AlertTitle>
+            <AlertTitle>{t("noResultsTitle")}</AlertTitle>
             <AlertDescription>
-                No data available. Please try adjusting your search or filter criteria.
+                {t("noResultsDescription")}
             </AlertDescription>
         </Alert>
     );

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

@@ -0,0 +1,35 @@
+'use client'
+
+import React, { FC, startTransition } from "react";
+import { LanguageAndCountries } from "@c-rex/interfaces";
+import { SharedLanguageSwitch } from "./shared";
+import { setCookie } from "@c-rex/utils/next-cookies";
+import { CONTENT_LANG_KEY, DEFAULT_UI_LANG } from "@c-rex/constants";
+import { useQueryState } from "nuqs"
+
+interface ContentLanguageSwitchProps {
+    availableLanguagesAndCountries: LanguageAndCountries[];
+}
+export const ContentLanguageSwitch: FC<ContentLanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
+
+    const [contentLanguage, setContentLanguage] = useQueryState('language', {
+        history: 'push',
+        shallow: false,
+        defaultValue: DEFAULT_UI_LANG
+    })
+
+    const changeContentLanguage = (locale: string) => {
+        startTransition(() => {
+            setCookie(CONTENT_LANG_KEY, locale)
+            setContentLanguage(locale)
+        });
+    };
+
+    return (
+        <SharedLanguageSwitch
+            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            changeLanguage={changeContentLanguage}
+            selected={contentLanguage}
+        />
+    );
+};

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

@@ -0,0 +1,33 @@
+import React, { FC, JSX } from "react";
+import * as Flags from 'country-flag-icons/react/3x2';
+import { LanguageAndCountries } from "@c-rex/interfaces";
+import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@c-rex/ui/dropdown-menu";
+
+interface SharedLanguageSwitchProps {
+    availableLanguagesAndCountries: LanguageAndCountries[];
+    selected: string;
+    changeLanguage: (locale: string) => void;
+}
+export const SharedLanguageSwitch: FC<SharedLanguageSwitchProps> = ({ availableLanguagesAndCountries, changeLanguage, selected }) => {
+
+    const getFlagIcon = (countryCode: string): JSX.Element | null => {
+        type CountryCode = keyof typeof Flags;
+        const FlagComponent = Flags[countryCode as CountryCode];
+        if (!FlagComponent) return null;
+
+        return <FlagComponent />;
+    };
+
+    return (
+        <DropdownMenuRadioGroup value={selected} onValueChange={changeLanguage}>
+            {availableLanguagesAndCountries.map(item => {
+                return (
+                    <DropdownMenuRadioItem key={item.value} value={item.value}>
+                        <span>{item.lang.toUpperCase()}</span>
+                        {getFlagIcon(item.country)}
+                    </DropdownMenuRadioItem>
+                )
+            })}
+        </DropdownMenuRadioGroup>
+    );
+};

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

@@ -0,0 +1,38 @@
+"use client"
+
+import React, { FC, startTransition, useEffect, useState } from "react";
+import { LanguageAndCountries } from "@c-rex/interfaces";
+import { SharedLanguageSwitch } from "./shared";
+import { setCookie } from "@c-rex/utils/next-cookies";
+import { DEFAULT_UI_LANG, UI_LANG_KEY } from "@c-rex/constants";
+
+interface UILanguageSwitchProps {
+    availableLanguagesAndCountries: LanguageAndCountries[];
+}
+export const UILanguageSwitch: FC<UILanguageSwitchProps> = ({ availableLanguagesAndCountries }) => {
+    const [selected, setSelected] = useState(DEFAULT_UI_LANG);
+
+    useEffect(() => {
+        const allCookies = document.cookie
+        const uiLang = allCookies
+            .split('; ')
+            .find(row => row.startsWith(`${UI_LANG_KEY}=`))
+            ?.split('=')[1]
+        setSelected(uiLang as string)
+    }, [])
+
+
+    const setUILanguage = (locale: string) => {
+        startTransition(() => {
+            setCookie(UI_LANG_KEY, locale)
+        });
+    }
+
+    return (
+        <SharedLanguageSwitch
+            availableLanguagesAndCountries={availableLanguagesAndCountries}
+            changeLanguage={setUILanguage}
+            selected={selected}
+        />
+    );
+};

package/src/navbar/navbar.tsx

@@ -1,9 +1,28 @@
 import React, { FC } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { SingOut, SingInBtn } from "./sing-in-out-btns";
+import { SignOut, SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
-
+import { getCookie } from '@c-rex/utils/next-cookies';
+import { ConfigInterface } from "@c-rex/interfaces";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@c-rex/ui/dropdown-menu"
+import { SDK_CONFIG_KEY, UI_LANG_OPTIONS } from "@c-rex/constants";
+import { LanguageService } from "@c-rex/services";
+import { Settings } from "lucide-react";
+import { ContentLanguageSwitch } from "./language-switcher/content-language-switch";
+import { getTranslations } from "next-intl/server";
+import { getCountryCodeByLang } from "@c-rex/utils";
+import { UILanguageSwitch } from "./language-switcher/ui-language-switch";
 
 interface NavBarProps {
     scroll?: boolean;
@@ -11,8 +30,25 @@ interface NavBarProps {
 }
 
 export const NavBar: FC<NavBarProps> = async () => {
+    const t = await getTranslations();
     const session = await getServerSession()
 
+    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
+    if (!jsonConfigs) {
+        return null;
+    }
+
+    const configs: ConfigInterface = JSON.parse(jsonConfigs);
+    const service = new LanguageService(configs.languageSwitcher.endpoint);
+    const contentLanguages = await service.getLanguagesAndCountries();
+
+    const UILanguages = UI_LANG_OPTIONS.map((lang) => ({
+        value: lang,
+        lang: lang,
+        country: getCountryCodeByLang(lang)
+    }));
+
+
     return (
         <header className="sticky top-0 z-40 flex w-full bg-background/60 backdrop-blur-xl transition-all bg-transparent border-b justify-center py-4">
             <div className="container flex justify-between">
@@ -25,42 +61,61 @@ export const NavBar: FC<NavBarProps> = async () => {
                             height={50}
                         />
                     </Link>
-
-                    <nav className="hidden gap-6 md:flex">
-                        {/*
-                        TODO: add map to load links
-                        TODO: add function to validate active item
-                    */}
-                        <Link
-                            href={"/blog"}
-                            prefetch={true}
-                            className={
-                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
-                            }
-                        >
-                            Blog
-                        </Link>
-
-                        <Link
-                            href={"#"}
-                            prefetch={true}
-                            className={
-                                "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm"
-                            }
-                        >
-                            Documentation
-                        </Link>
-                    </nav>
                 </div>
 
                 <div className="flex items-center space-x-3">
-                    {session ? (
+                    {configs.OIDC.user.enabled && (
                         <>
-                            <span>Welcome, {session.user?.name}</span>
-                            <SingOut />
+                            {session ? (
+                                <>
+                                    <span>{t("user.welcome", { userName: session.user?.name as string })}</span>
+                                    <SignOut />
+                                </>
+                            ) : (
+                                <SignInBtn />
+                            )}
                         </>
-                    ) : (
-                        <SingInBtn />
+                    )}
+
+                    {configs.languageSwitcher.enabled && (
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Settings />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuLabel>{t("accountSettings.accountSettings")}</DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        <span>{t("accountSettings.contentLanguage")}</span>
+                                    </DropdownMenuSubTrigger>
+
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <ContentLanguageSwitch
+                                                availableLanguagesAndCountries={contentLanguages}
+                                            />
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+
+
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>
+                                        <span>{t("accountSettings.uiLanguage")}</span>
+                                    </DropdownMenuSubTrigger>
+
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <UILanguageSwitch
+                                                availableLanguagesAndCountries={UILanguages}
+                                            />
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     )}
                 </div>
             </div>

package/src/navbar/sign-in-out-btns.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import React from "react";
+import { signOut, signIn } from "next-auth/react";
+import { Button } from "@c-rex/ui/button";
+import { useTranslations } from "next-intl";
+
+export const SignInBtn = () => {
+    const t = useTranslations("user")
+    return (
+        <Button
+            className="gap-2 px-5 md:flex"
+            variant="default"
+            size="sm"
+            rounded="full"
+            onClick={() => signIn("crex", { callbackUrl: "/" })}
+        >
+            <span>{t("signIn")}</span>
+        </Button>
+    );
+}
+
+export const SignOut = () => {
+    const t = useTranslations("user")
+    return (
+        <Button
+            className="gap-2 px-5 md:flex"
+            variant="default"
+            size="sm"
+            rounded="full"
+            onClick={() => signOut()}
+        >
+            <span>{t("signOut")}</span>
+        </Button>
+    );
+}

package/src/result-view/blog.tsx

@@ -1,5 +1,4 @@
-import { FC } from "react";
-
+import React, { FC } from "react";
 import { BlogCard } from "../blog-card";
 import { informationUnitsItems, Labels } from "@c-rex/interfaces";
 
@@ -9,6 +8,9 @@ interface BlogViewProps {
 
 const BlogView: FC<BlogViewProps> = ({ items }) => {
     const getTitle = (labels: Labels[]): string => {
+        if (labels === undefined) {
+            return "";
+        }
         return labels.map((item) => item.value).join();
     };
 

package/src/sidebar.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { ComponentProps } from "react";
+import React, { ComponentProps, JSX } from "react";
 import {
     Sidebar,
     SidebarContent,
     SidebarGroup,
+    SidebarGroupLabel,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
@@ -15,18 +16,32 @@ import {
 } from "@c-rex/ui/sidebar";
 import { Skeleton } from "@c-rex/ui/skeleton";
 import { TreeOfContent } from "@c-rex/interfaces";
+import * as Flags from 'country-flag-icons/react/3x2';
+import { useTranslations } from "next-intl";
 
 interface SidebarProps extends ComponentProps<typeof Sidebar> {
     data: TreeOfContent[];
     loading?: boolean;
+    availableVersions: any
 }
 
-export function AppSidebar({ data, loading, ...props }: SidebarProps) {
+export function AppSidebar({ data, availableVersions, loading, ...props }: SidebarProps) {
+    const t = useTranslations();
+
+    const getFlagIcon = (countryCode: string): JSX.Element | null => {
+        type CountryCode = keyof typeof Flags;
+        const FlagComponent = Flags[countryCode as CountryCode];
+        if (!FlagComponent) return null;
+
+        return <FlagComponent />;
+    };
+
     return (
-        <Sidebar collapsible="icon" {...props} className="top-20">
+        <Sidebar collapsible="icon" {...props}>
             <SidebarContent>
-                <SidebarGroup>
-                    <SidebarMenu className="pt-4">
+                <SidebarGroup className="my-4">
+                    <SidebarGroupLabel>{t("tableOfContent")}:</SidebarGroupLabel>
+                    <SidebarMenu>
                         {loading ? (
                             <>
                                 <Skeleton className="w-auto h-10 mb-2" />
@@ -69,6 +84,25 @@ export function AppSidebar({ data, loading, ...props }: SidebarProps) {
                         )}
                     </SidebarMenu>
                 </SidebarGroup>
+
+                <SidebarGroup>
+                    <SidebarGroupLabel>{t("availableIn")}:</SidebarGroupLabel>
+                    <SidebarMenu>
+
+                        {availableVersions.map((item: any) => {
+                            return (
+
+                                <SidebarMenuItem key={item.shortId}>
+                                    <SidebarMenuButton asChild isActive={item.active}>
+                                        <a href={`../info/${item.shortId}`} title={item.lang}>
+                                            {getFlagIcon(item.country)} {item.lang}
+                                        </a>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            )
+                        })}
+                    </SidebarMenu>
+                </SidebarGroup>
             </SidebarContent>
             <SidebarRail />
         </Sidebar>

package/src/navbar/sing-in-out-btns.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import React from "react";
-import { signOut, signIn } from "next-auth/react";
-import { Button } from "@c-rex/ui/button";
-
-export const SingInBtn = () => (
-    <Button
-        className="hidden gap-2 px-5 md:flex"
-        variant="default"
-        size="sm"
-        rounded="full"
-        onClick={() => signIn("crex", { callbackUrl: "/" })}
-    >
-        <span>Sign In</span>
-    </Button>
-);
-
-export const SingOut = () => (
-    <Button
-        className="hidden gap-2 px-5 md:flex"
-        variant="default"
-        size="sm"
-        rounded="full"
-        onClick={() => signOut()}
-    >
-        <span>Sign out</span>
-    </Button>
-);

package/src/providers/search-state-wrapper.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import { SearchProvider } from "@c-rex/contexts";
-import { FC, ReactNode } from "react";
-
-interface SearchStateWrapperProps {
-    children: ReactNode;
-    filters: {
-        searchValue: string;
-        page: number;
-        selectedLanguage: string[];
-        availableLanguages: string[];
-    };
-}
-
-export const SearchStateWrapper: FC<SearchStateWrapperProps> = ({
-    children,
-    filters,
-}) => {
-    return <SearchProvider value={{ ...filters }}>{children}</SearchProvider>;
-};