@c-rex/components 0.1.36 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.36",
+  "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/article/article-content.tsx

@@ -3,53 +3,44 @@ import { RenditionModel } from "@c-rex/interfaces";
 import { RenderArticle } from "../render-article";
 import { ArticleActionBar } from "./article-action-bar";
 import * as cheerio from "cheerio"
+import { HtmlRendition } from "../renditions/html";
 
 interface Props {
     renditions: RenditionModel[] | null | undefined;
 }
 
 export const ArticleContent: FC<Props> = async ({ renditions }) => {
-    const empty = (
-        <div>No HTML Rendition Available</div>
-    )
-
-    if (renditions == null || renditions.length == 0) return empty;
-
-    const filteredRenditions = renditions.filter((item) => item.format == "application/xhtml+xml");
-
-    if (filteredRenditions.length == 0 || filteredRenditions[0] == undefined || filteredRenditions[0].links == undefined) return empty;
-
-    const filteredLinks = filteredRenditions[0].links.filter((item) => item.rel == "view");
 
-    if (filteredLinks.length == 0 || filteredLinks[0] == undefined || filteredLinks[0].href == undefined) return empty;
+    const articleRender = (html: string) => {
 
-    const url = filteredLinks[0].href;
-    const html = await fetch(url, {
-        method: "GET",
-        headers: {
-            Accept: "application/xhtml+xml",
-        },
-    }).then(res => res.text());
+        const $ = cheerio.load(html)
 
-    const $ = cheerio.load(html)
+        const metaTags = $("meta").map((_, el) => {
+            const name = $(el).attr("name")
+            const content = $(el).attr("content")
+            return name && content ? { name, content } : null
+        }).get().filter(Boolean)
 
-    const metaTags = $("meta").map((_, el) => {
-        const name = $(el).attr("name")
-        const content = $(el).attr("content")
-        return name && content ? { name, content } : null
-    }).get().filter(Boolean)
+        const articleHtml = $("main").html() || ""
 
-    const articleHtml = $("main").html() || ""
+        return (
+            <>
+                {metaTags.map((tag) => (
+                    <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
+                ))}
+                <div className="pr-4 relative">
+                    <RenderArticle htmlContent={articleHtml} contentLang="" />
+                </div>
+                <ArticleActionBar />
+            </>
+        )
+    }
 
     return (
-        <>
-            {metaTags.map((tag) => (
-                <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
-            ))}
-            <div className="pr-4 relative">
-                <RenderArticle htmlContent={articleHtml} contentLang="" />
-            </div>
-            <ArticleActionBar />
-        </>
+        <HtmlRendition
+            renditions={renditions}
+            render={articleRender}
+            shortId=""
+        />
     )
 }

package/src/autocomplete.tsx

@@ -8,6 +8,7 @@ import { X } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { suggestionRequest } from "./generated/create-suggestions-request";
 import { useQueryState } from "nuqs";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
 
 export type AutoCompleteProps = {
     initialValue?: string;
@@ -36,6 +37,7 @@ export const AutoComplete = ({
     const containerRef = useRef<HTMLDivElement>(null);
     const searchParams = useSearchParams();
     const router = useRouter();
+
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
     const [loading, setLoading] = useState(false);
@@ -43,19 +45,40 @@ export const AutoComplete = ({
 
     const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
         const params = { ...queryParams };
+        const contentLang = useSearchSettingsStore.getState().language;
+        const restrictions = searchParams.get("restrict")
+
+        if (restrictions) {
+            if (restrictions.includes("informationSubjects")) {
+
+                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
+                if (informationSubject.length > 0) {
+                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
+                }
+            }
+        }
+
+        if (contentLang) params.lang = contentLang;
         if (pkg != null) params.scopes = pkg as unknown as string[];
 
         const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
 
         return results.data;
-    }, [endpoint, pkg, queryParams]);
+    }, [endpoint, pkg, queryParams, searchParams]);
 
     const handleSelect = (value: string) => {
         setQuery(value);
         setOpen(false);
+
         const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
         nextParams.set("page", "1");
-        nextParams.set("search", value);
+
+        if (value.length > 0) {
+            nextParams.set("search", value);
+        } else {
+            nextParams.delete("search");
+        };
+
         onSelectParams?.forEach(param => {
             nextParams.set(param.key, param.value);
         });
@@ -77,9 +100,7 @@ export const AutoComplete = ({
         router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
     };
 
-    useEffect(() => {
-        setQuery(initialValue);
-    }, [initialValue]);
+    useEffect(() => setQuery(initialValue), [initialValue]);
 
     useEffect(() => {
         const handleClickOutside = (e: MouseEvent) => {

package/src/carousel/carousel.tsx

@@ -22,14 +22,33 @@ import { Badge } from "@c-rex/ui/badge";
 import { Flag } from "../icons/flag-icon"
 import { Empty } from "../results/empty";
 import { useLocale, useTranslations } from "next-intl";
+import Link from "next/link";
+import { useBreakpoint } from "@c-rex/ui/hooks";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
-// Types
-
-type ResponsiveSetting = {
-    maxWidth: number;
-    slidesToShow: number;
+type PageInfo = {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    pageCount: number;
+};
+type Props = {
+    className?: string;
+    arrows?: boolean;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    itemsByRow?: {
+        [DEVICE_OPTIONS.MOBILE]: number,
+        [DEVICE_OPTIONS.TABLET]: number,
+        [DEVICE_OPTIONS.DESKTOP]: number,
+    };
+    indicators?: boolean;
+    showImages?: boolean;
+    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean; linkPattern: string }>;
+    serviceType: keyof typeof ServiceOptions;
+    queryParams?: Record<string, any>;
+    loadByPages?: boolean;
+    linkPattern: string;
 };
-
 type CarouselContextProps = {
     next: () => void;
     prev: () => void;
@@ -54,30 +73,15 @@ export function useCarousel() {
     return context;
 }
 
-type PageInfo = {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-    pageCount: number;
-};
-type Props = {
-    className?: string;
-    arrows?: boolean;
-    autoplay?: boolean;
-    autoplaySpeed?: number;
-    responsive?: ResponsiveSetting[];
-    indicators?: boolean;
-    showImages?: boolean;
-    carouselItemComponent?: FC<{ item: CommonItemsModel; showImages: boolean }>;
-    serviceType: keyof typeof ServiceOptions;
-    queryParams?: Record<string, any>;
-    loadByPages?: boolean;
-};
-
 export const Carousel: FC<Props> = ({
     className,
     arrows = false,
     autoplay = false,
-    responsive = [{ maxWidth: 99999, slidesToShow: 1 }],
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 1,
+        [DEVICE_OPTIONS.TABLET]: 3,
+        [DEVICE_OPTIONS.DESKTOP]: 4,
+    },
     indicators = false,
     autoplaySpeed = 3000,
     showImages = false,
@@ -85,29 +89,18 @@ export const Carousel: FC<Props> = ({
     serviceType,
     queryParams = {},
     loadByPages = false,
+    linkPattern
 }) => {
     const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
     const RenderComponent = carouselItemComponent || DefaultRenderCarouselItem;
 
-    // Responsive
-    const [slidesToShow, setSlidesToShow] = useState(responsive[0]?.slidesToShow || 1);
-    const updateSlidesToShow = useCallback(() => {
-        const width = window.innerWidth;
-        const sorted = [...responsive].sort((a, b) => a.maxWidth - b.maxWidth);
-        let found = sorted[sorted.length - 1]?.slidesToShow || 1;
-        for (const r of sorted) {
-            if (width <= r.maxWidth) {
-                found = r.slidesToShow;
-                break;
-            }
-        }
-        setSlidesToShow(found);
-    }, [responsive]);
+    const device = useBreakpoint();
+    const [slidesToShow, setSlidesToShow] = useState(1);
+
     useEffect(() => {
-        updateSlidesToShow();
-        window.addEventListener("resize", updateSlidesToShow);
-        return () => window.removeEventListener("resize", updateSlidesToShow);
-    }, [updateSlidesToShow]);
+        if (device == null) return;
+        setSlidesToShow(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
+    }, [device, itemsByRow]);
 
     // State
     const [current, setCurrent] = useState(0);
@@ -240,7 +233,7 @@ export const Carousel: FC<Props> = ({
                                         className={`flex-shrink-0 flex-grow-0 flex justify-center`}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
-                                        <RenderComponent item={item} showImages={showImages} />
+                                        <RenderComponent item={item} showImages={showImages} linkPattern={linkPattern} />
                                     </div>
                                 ))
                             ) : null}
@@ -258,7 +251,7 @@ const CarouselNext: FC = () => {
     const { next, current, slidesToShow, slidesLength, hasNextPage } = useCarousel();
     const disabled = hasNextPage === undefined ? current >= slidesLength - slidesToShow : !hasNextPage;
     return (
-        <Button className="size-8" rounded="full" onClick={next} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={next} variant="default" disabled={disabled}>
             <ArrowRight />
         </Button>
     );
@@ -267,8 +260,9 @@ const CarouselNext: FC = () => {
 const CarouselPrev: FC = () => {
     const { prev, current, hasPrevPage } = useCarousel();
     const disabled = hasPrevPage === undefined ? current === 0 : !hasPrevPage;
+
     return (
-        <Button className="size-8" rounded="full" onClick={prev} variant="ghost" disabled={disabled}>
+        <Button className="w-9" rounded="full" onClick={prev} variant="default" disabled={disabled}>
             <ArrowLeft />
         </Button>
     );
@@ -315,7 +309,11 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
     );
 };
 
-const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolean }> = ({ item, showImages }) => {
+const DefaultRenderCarouselItem: FC<{
+    item: CommonItemsModel;
+    showImages: boolean;
+    linkPattern: string
+}> = ({ item, showImages, linkPattern }) => {
     const locale = useLocale();
     const t = useTranslations("itemTypes");
 
@@ -324,9 +322,10 @@ const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolea
     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>
 
@@ -338,15 +337,17 @@ const DefaultRenderCarouselItem: FC<{ item: CommonItemsModel; showImages: boolea
                     />
                 )}
 
-                <span className="text-lg font-semibold">{title}</span>
+                <span className="group-hover:underline text-lg font-semibold flex-1">
+                    {title}
+                </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>
     )
 }