@c-rex/components 0.1.37 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "files": [
     "src"
   ],
@@ -179,31 +179,19 @@
     }
   },
   "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
     "@c-rex/eslint-config": "*",
     "@c-rex/typescript-config": "*",
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/nextjs": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/test": "^8.6.12",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.10",
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.23.0",
-    "eslint-plugin-storybook": "^0.12.0",
     "postcss": "^8.5.3",
-    "storybook": "^8.6.12",
-    "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "latest"
   },
@@ -226,10 +214,5 @@
     "react-icons": "^5.5.0",
     "tailwindcss-animate": "^1.0.7",
     "zustand": "^5.0.8"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
   }
 }

package/src/carousel/carousel.tsx

@@ -322,9 +322,10 @@ const DefaultRenderCarouselItem: FC<{
     const itemType = getType(item.class);
     const language = getLanguage(item.languages)
     const countryCode = language.split("-")[1] || "";
+    const link = linkPattern.replace("{shortId}", item.shortId!);
 
     return (
-        <div className="p-2 flex flex-1">
+        <Link href={link} className="group p-2 flex flex-1">
             <Card className="p-4 flex-1 justify-between relative">
                 <Badge className="absolute -top-2 -right-2">{t(itemType.toLowerCase())}</Badge>
 
@@ -336,17 +337,17 @@ const DefaultRenderCarouselItem: FC<{
                     />
                 )}
 
-                <Link href={linkPattern.replace("{id}", item.shortId!)} className="hover:underline text-lg font-semibold flex-1">
+                <span className="group-hover:underline text-lg font-semibold flex-1">
                     {title}
-                </Link>
+                </span>
 
                 <div className="flex justify-between w-full">
-                    <span className="w-8 block border">
+                    <span className="w-8 block">
                         <Flag countryCode={countryCode} />
                     </span>
                     <span className="text-gray-400">{date || item.revision}</span>
                 </div>
             </Card>
-        </div>
+        </Link>
     );
 };

package/src/check-article-lang.tsx

@@ -14,11 +14,15 @@ interface Props {
 export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
     const t = useTranslations();
     const { setAvailableVersions } = useAppConfig()
+    const searchLanguage = useSearchSettingsStore((state) => state.language);
 
     useEffect(() => {
         setAvailableVersions(availableVersions)
-        const searchLanguage = useSearchSettingsStore.getState().language;
-        const activeArticle = availableVersions.filter((item) => item.active)[0]
+    }, [availableVersions, setAvailableVersions])
+
+    useEffect(() => {
+        if (!searchLanguage) return;
+        const activeArticle = availableVersions.find((item) => item.active)
 
         if (activeArticle == undefined || activeArticle.lang == searchLanguage) return
 
@@ -26,7 +30,7 @@ export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
         if (articleAvailable != undefined) {
             articleAvailableInToast(articleAvailable.lang, articleAvailable.link)
         }
-    }, [])
+    }, [availableVersions, searchLanguage])
 
     const articleAvailableInToast = (lang: string, link: string) => {
         toast(t('toast.read', { lang }), {
@@ -40,4 +44,4 @@ export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
     }
 
     return null
-}
+}

package/src/favorites/bookmark-button.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
-import { Button, ButtonProps } from "@c-rex/ui/button";
+import { ComponentProps, FC } from "react";
+import { Button } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
 import { useFavoritesStore } from "../stores/favorites-store";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
+import { useTranslations } from "next-intl";
 import {
     Table,
     TableBody,
@@ -15,20 +16,22 @@ import {
 } from "@c-rex/ui/table"
 import { FaRegBookmark } from "react-icons/fa6";
 
+const EMPTY_TOPICS: { id: string; label: string; color: string }[] = [];
+
 type BookmarkProps = {
     shortId: string;
+    linkPattern?: string;
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 }
 
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
+    linkPattern = `/topics/{id}/pages`,
     triggerVariant = "outline"
 }) => {
-    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
-
-    useEffect(() => {
-        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
-    }, [shortId]);
+    const t = useTranslations("bookmarks");
+    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
+    const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
     return (
         <Dialog>
             <DialogTrigger asChild>
@@ -47,25 +50,37 @@ export const BookmarkButton: FC<BookmarkProps> = ({
             </DialogTrigger>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>Bookmarks</DialogTitle>
+                    <DialogTitle>{t("title")}</DialogTitle>
                     <DialogDescription>
-                        Manage your bookmarks here
+                        {t("description")}
                     </DialogDescription>
                 </DialogHeader>
                 <Table>
                     <TableBody>
+                        {markersList.length === 0 && (
+                            <TableRow>
+                                <TableCell colSpan={3} className="text-center">
+                                    {t("empty")}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
                         {markersList.map((item) => (
                             <TableRow key={item.id} className="min-h-12">
                                 <TableCell>
                                     <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
                                 </TableCell>
                                 <TableCell>
-                                    <Link href={`${window.location.origin}/topics/${item.id}`}>
+                                    <Link href={linkPattern.replace("{id}", item.id)} className="hover:underline">
                                         {item.label}
                                     </Link>
                                 </TableCell>
                                 <TableCell>
-                                    <Button variant="destructive" size="icon">
+                                    <Button
+                                        variant="destructive"
+                                        size="icon"
+                                        onClick={() => removeFavoriteTopic(shortId, item.id)}
+                                    >
                                         <Trash className="w-5 hover:text-red-600 cursor-pointer" />
                                     </Button>
                                 </TableCell>

package/src/favorites/favorite-button.tsx

@@ -6,6 +6,8 @@ import { FaStar, FaRegStar } from "react-icons/fa";
 import { useFavoritesStore } from "../stores/favorites-store";
 import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
 import { ResultTypes } from "@c-rex/types";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
 
 export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }> = ({ id, type, label }) => {
     const addFavoriteTopic = useFavoritesStore((state) => state.favoriteTopic);
@@ -17,58 +19,102 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
     const favoriteList = useFavoritesStore((state) => state.favorites);
     const isFavorite = favoriteList.find((fav) => fav.id === id);
     const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (type === RESULT_TYPES.TOPIC) {
-            getTopicDocumentData(id);
+            void getTopicDocumentData(id).catch(() => {
+                // Lazy retry on user action.
+            });
         }
-    }, []);
+    }, [id, type]);
 
-    const addFavorite = async (id: string) => {
+    const ensureDocumentData = async (topicId: string): Promise<{ id: string, label: string }> => {
+        if (type !== RESULT_TYPES.TOPIC) {
+            return { id, label };
+        }
+
+        if (documentData.id !== topicId) {
+            return documentData;
+        }
+
+        return await getTopicDocumentData(topicId);
+    };
+
+    const addFavorite = async (targetId: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
-            addFavoriteDocument(id, label);
+            addFavoriteDocument(targetId, label);
             return;
         }
 
-        const length = favoriteDocumentList[documentData.id]?.topics.length || 0;
+        const docData = await ensureDocumentData(targetId);
+        const length = favoriteDocumentList[docData.id]?.topics.length || 0;
         const color = MARKER_COLORS[length] || MARKER_COLORS[MARKER_COLORS.length - 1] as string;
 
-        addFavoriteTopic(documentData.id, id, label, color);
-    }
+        addFavoriteTopic(docData.id, targetId, label, color);
+    };
 
-    const removeFavorite = (id: string) => {
+    const removeFavorite = async (targetId: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
-            removeFavoriteDocument(id);
+            removeFavoriteDocument(targetId);
             return;
         }
 
-        removeFavoriteTopic(documentData.id, id);
-    }
-
-    const getTopicDocumentData = async (topicId: string): Promise<void> => {
+        const docData = await ensureDocumentData(targetId);
+        removeFavoriteTopic(docData.id, targetId);
+    };
 
+    const getTopicDocumentData = async (topicId: string): Promise<{ id: string, label: string }> => {
         const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
             method: "GET"
         });
 
-        if (!response.ok) throw new Error("Failed to fetch document by topic id")
+        if (!response.ok) {
+            throw new Error("Failed to fetch document by topic id");
+        }
 
         const { documentId, label } = await response.json();
-
-        setDocumentData({ id: documentId, label });
-    }
+        const data = { id: documentId, label };
+        setDocumentData(data);
+        return data;
+    };
+
+    const handleToggle = async () => {
+        if (isLoading) return;
+        setIsLoading(true);
+
+        try {
+            if (isFavorite) {
+                await removeFavorite(id);
+            } else {
+                await addFavorite(id);
+            }
+        } catch {
+            toast.error("Não foi possível atualizar os favoritos.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
     if (isFavorite) {
         return (
-            <Button variant="ghost" size="icon" onClick={() => removeFavorite(id)}>
-                <FaStar className="!h-5 !w-5 color-primary" />
+            <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
+                {isLoading ? (
+                    <Loader2 className="!h-5 !w-5 animate-spin" />
+                ) : (
+                    <FaStar className="!h-5 !w-5 color-primary" />
+                )}
             </Button>
         );
     }
 
     return (
-        <Button variant="ghost" size="icon" onClick={() => addFavorite(id)}>
-            <FaRegStar className="!h-5 !w-5" />
+        <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
+            {isLoading ? (
+                <Loader2 className="!h-5 !w-5 animate-spin" />
+            ) : (
+                <FaRegStar className="!h-5 !w-5" />
+            )}
         </Button>
     )
 }

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";
@@ -118,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>
                     }