@c-rex/components 0.1.26 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.26",
+  "version": "0.1.29",
   "files": [
     "src"
   ],
@@ -117,6 +117,10 @@
       "types": "./src/stores/favorites-store.ts",
       "import": "./src/stores/favorites-store.ts"
     },
+    "./search-settings-store": {
+      "types": "./src/stores/search-settings-store.ts",
+      "import": "./src/stores/search-settings-store.ts"
+    },
     "./article-content": {
       "types": "./src/article/article-content.tsx",
       "import": "./src/article/article-content.tsx"
@@ -156,6 +160,10 @@
     "./generic-table-result-list": {
       "types": "./src/results/generic/table-result-list.tsx",
       "import": "./src/results/generic/table-result-list.tsx"
+    },
+    "./carousel": {
+      "types": "./src/carousel/carousel.tsx",
+      "import": "./src/carousel/carousel.tsx"
     }
   },
   "scripts": {

package/src/article/article-action-bar.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArticleActionBar } from '../article-action-bar';
+
+const meta: Meta<typeof ArticleActionBar> = {
+    title: 'Components/Article/ActionBar',
+    component: ArticleActionBar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof ArticleActionBar>;
+
+export const Basic: Story = {};

package/src/article/article-content.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArticleContent } from '../article-content';
+
+const meta: Meta<typeof ArticleContent> = {
+    title: 'Components/Article/Content',
+    component: ArticleContent,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof ArticleContent>;
+
+export const Basic: Story = {
+    args: {
+        renditions: [], // Não renderiza conteúdo
+    },
+};
+
+// Exemplo completo depende de dados reais de RenditionModel e fetch, normalmente mockado em ambiente de Storybook.

package/src/autocomplete.tsx

@@ -6,9 +6,9 @@ import { useTranslations } from "next-intl";
 import { SuggestionQueryParams } from "@c-rex/interfaces";
 
 import { useSearchSettingsStore } from "./stores/search-settings-store";
-import { useLanguageStore } from "./stores/language-store";
 import { useRouter } from 'next/navigation';
 import { suggestionRequest } from "./generated/create-suggestions-request";
+import { useQueryState } from "nuqs";
 
 export type AutoCompleteProps = {
     initialValue?: string;
@@ -28,6 +28,8 @@ export const AutoComplete = ({
     onSelectPath = "/"
 }: AutoCompleteProps) => {
     const t = useTranslations();
+    const [pkg] = useQueryState("package");
+
     const containerRef = useRef<HTMLDivElement>(null);
     const router = useRouter();
     const [open, setOpen] = useState(false);
@@ -36,7 +38,10 @@ export const AutoComplete = ({
     const [suggestions, setSuggestions] = useState<string[]>([]);
 
     const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
-        const results = await suggestionRequest({ endpoint, prefix, queryParams });
+        const params = { ...queryParams };
+        if (pkg != null) params.scopes = pkg as unknown as string[];
+
+        const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
 
         return results.data;
     }, [endpoint, queryParams]);
@@ -50,13 +55,11 @@ export const AutoComplete = ({
     const onSelect = (value: string) => {
         const params = new URLSearchParams();
         const searchSettings = useSearchSettingsStore.getState();
-        const languageSettings = useLanguageStore.getState();
 
         params.set('search', value);
         params.set("page", "1")
         params.set("operator", searchSettings.operator)
-        params.set("language",
-            searchSettings.language.length > 0 ? searchSettings.language.join(",") : languageSettings.contentLang)
+        params.set("language", searchSettings.language)
         params.set("wildcard", searchSettings.wildcard)
         params.set("like", searchSettings.like.toString())
 

package/src/carousel/carousel.tsx

@@ -0,0 +1,344 @@
+"use client"
+
+import {
+    useRef,
+    useState,
+    useEffect,
+    useCallback,
+    FC,
+    createContext,
+    useContext,
+} from "react";
+import { cn, getLanguage, getTitle, getType } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import * as ServiceOptions from "@c-rex/services/client-requests";
+import { documentsGetAllClientService } from "@c-rex/services/client-requests";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { Card } from "@c-rex/ui/card";
+import { Badge } from "@c-rex/ui/badge";
+import { Flag } from "../icons/flag-icon"
+import { Empty } from "../results/empty";
+
+// Types
+
+type ResponsiveSetting = {
+    maxWidth: number;
+    slidesToShow: number;
+};
+
+type CarouselContextProps = {
+    next: () => void;
+    prev: () => void;
+    setCurrent: (idx: number) => void;
+    current: number;
+    slidesToShow: number;
+    slidesLength: number;
+    page?: number;
+    pageCount?: number;
+    setPage?: (page: number) => void;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+};
+
+const CarouselContext = createContext<CarouselContextProps | null>(null);
+
+export function useCarousel() {
+    const context = useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    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;
+    renderItem?: (item: CommonItemsModel, showImages: boolean) => React.ReactNode;
+    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 }],
+    indicators = false,
+    autoplaySpeed = 3000,
+    showImages = false,
+    renderItem,
+    serviceType,
+    queryParams = {},
+    loadByPages = false,
+}) => {
+    const service = ServiceOptions[serviceType] as typeof documentsGetAllClientService;
+    const renderFunc = renderItem ? renderItem : 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]);
+    useEffect(() => {
+        updateSlidesToShow();
+        window.addEventListener("resize", updateSlidesToShow);
+        return () => window.removeEventListener("resize", updateSlidesToShow);
+    }, [updateSlidesToShow]);
+
+    // State
+    const [current, setCurrent] = useState(0);
+    const [data, setData] = useState<CommonItemsModel[] | null>(null);
+    const [loading, setIsLoading] = useState(true);
+    const [error, setError] = useState<unknown>(null);
+
+    // Pagination
+    const [page, setPage] = useState(1);
+    const [pageInfo, setPageInfo] = useState<PageInfo | null>(null);
+    const [hasNextPage, setHasNextPage] = useState(true);
+    const [hasPrevPage, setHasPrevPage] = useState(false);
+
+    // Autoplay
+    const timer = useRef<NodeJS.Timeout | null>(null);
+
+    // Data loading
+    useEffect(() => {
+        let isMounted = true;
+        setIsLoading(true);
+        setError(null);
+        setData(null);
+        if (loadByPages) {
+            (async () => {
+                try {
+                    const result = await service({ ...queryParams, PageNumber: page });
+                    if (!isMounted) return;
+                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
+                    setPageInfo((result && 'pageInfo' in result) ? result.pageInfo as PageInfo : null);
+                } catch (err) {
+                    if (!isMounted) return;
+                    setError(err);
+                } finally {
+                    if (isMounted) setIsLoading(false);
+                }
+            })();
+        } else {
+            (async () => {
+                try {
+                    const result = await service(queryParams);
+                    if (!isMounted) return;
+                    setData((result && 'items' in result) ? result.items as CommonItemsModel[] : []);
+                } catch (err) {
+                    if (!isMounted) return;
+                    setError(err);
+                } finally {
+                    if (isMounted) setIsLoading(false);
+                }
+            })();
+        }
+        return () => { isMounted = false; };
+    }, [queryParams, page, loadByPages, service]);
+
+    // Page info
+    useEffect(() => {
+        if (loadByPages && pageInfo) {
+            setHasNextPage(pageInfo.hasNextPage);
+            setHasPrevPage(pageInfo.hasPreviousPage);
+        }
+    }, [pageInfo, loadByPages]);
+
+    // Autoplay logic (static mode only)
+    useEffect(() => {
+        if (!autoplay || loading || !data || data.length === 0 || loadByPages) return;
+        timer.current = setTimeout(() => {
+            if (current < data.length - slidesToShow) {
+                setCurrent((prev) => prev + 1);
+            } else {
+                setCurrent(0);
+            }
+        }, autoplaySpeed);
+        return () => {
+            if (timer.current) clearTimeout(timer.current);
+        };
+    }, [autoplay, autoplaySpeed, current, data, slidesToShow, loading, loadByPages]);
+
+    // Navigation
+    const prev = useCallback(() => {
+        if (loadByPages) {
+            if (hasPrevPage) setPage((p) => p - 1);
+        } else {
+            setCurrent((prev) => Math.max(prev - 1, 0));
+        }
+    }, [loadByPages, hasPrevPage]);
+
+    const next = useCallback(() => {
+        if (loadByPages) {
+            if (hasNextPage) setPage((p) => p + 1);
+        } else {
+            setCurrent((prev) => (prev < (data?.length || 0) - slidesToShow ? prev + 1 : 0));
+        }
+    }, [loadByPages, hasNextPage, data, slidesToShow]);
+
+    const contextValue: CarouselContextProps = {
+        next,
+        prev,
+        setCurrent,
+        current,
+        slidesToShow,
+        pageCount: pageInfo?.pageCount || 1,
+        slidesLength: data?.length || 0,
+        page: loadByPages ? page : undefined,
+        setPage: loadByPages ? setPage : undefined,
+        hasNextPage: loadByPages ? hasNextPage : undefined,
+        hasPrevPage: loadByPages ? hasPrevPage : undefined,
+    };
+
+    return (
+        <CarouselContext.Provider value={contextValue}>
+            <div className={cn("flex items-center flex-col", className)}>
+                <div className={cn("w-full flex items-center")}>
+                    {(arrows && data && data.length > 0) && <CarouselPrev />}
+                    <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
+                        <div
+                            className="flex will-change-transform transition-all duration-600 ease-[cubic-bezier(0.4,0,0.2,1)] w-full"
+                            style={{ transform: `translateX(-${(current * 100) / slidesToShow}%)` }}
+                        >
+                            {loading ? (
+                                <Skeleton className="w-full h-80" />
+                            ) : error ? (
+                                <div className="w-full h-80 flex items-center justify-center text-red-500">
+                                    {JSON.stringify(error)}
+                                </div>
+                            ) : data && data.length == 0 ? (
+                                <Empty />
+                            ) : data && data.length > 0 ? (
+                                data.map((item: CommonItemsModel) => (
+                                    <div
+                                        key={item.shortId}
+                                        className={`flex-shrink-0 flex-grow-0 flex justify-center`}
+                                        style={{ width: `${100 / slidesToShow}%` }}
+                                    >
+                                        {renderFunc(item, showImages)}
+                                    </div>
+                                ))
+                            ) : null}
+                        </div>
+                    </div>
+                    {(arrows && data && data.length > 0) && <CarouselNext />}
+                </div>
+                {indicators && <CarouselIndicators />}
+            </div>
+        </CarouselContext.Provider>
+    );
+};
+
+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}>
+            <ArrowRight />
+        </Button>
+    );
+};
+
+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}>
+            <ArrowLeft />
+        </Button>
+    );
+};
+
+const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
+    const { current, setCurrent, slidesToShow, slidesLength, page, setPage, pageCount } = useCarousel();
+    // Static mode
+    if (!setPage) {
+        const totalOfIndicators = Math.max(slidesLength - slidesToShow + 1, 1);
+        if (totalOfIndicators === 1) return null;
+        return (
+            <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
+                {Array.from({ length: totalOfIndicators }).map((_, index) => (
+                    <li key={index}>
+                        <Button
+                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${index === current ? "bg-gray-800" : "bg-gray-300"}`}
+                            size="xs"
+                            onClick={() => setCurrent(index)}
+                        />
+                    </li>
+                ))}
+            </ol>
+        );
+    }
+    // Paginated mode
+    const totalOfIndicators = pageCount || 1;
+    if (totalOfIndicators === 1) return null;
+    return (
+        <ol className={cn("flex gap-2 z-20 list-none p-0 m-0", className)}>
+            {Array.from({ length: totalOfIndicators }).map((_, index) => {
+                const pageNumber = index + 1;
+                return (
+                    <li key={pageNumber}>
+                        <Button
+                            className={`w-3 h-3 rounded-full border-0 cursor-pointer transition-colors ${pageNumber === page ? "bg-gray-800" : "bg-gray-300"}`}
+                            size="xs"
+                            onClick={() => setPage(pageNumber)}
+                        />
+                    </li>
+                );
+            })}
+        </ol>
+    );
+};
+
+const defaultRenderCarouselItem = (item: CommonItemsModel, showImages: boolean) => {
+    const title = getTitle(item.titles, item.labels);
+    const itemType = getType(item.class);
+    const language = getLanguage(item.languages)
+    const countryCode = language.split("-")[1] || "";
+    return (
+        <div className="p-2 flex flex-1">
+            <Card className="p-4 flex-1 justify-between">
+                {showImages && (
+                    <ImageRenditionContainer
+                        itemShortId={item.shortId!}
+                        emptyImageStyle="h-48 w-full"
+                        imageStyle="object-cover h-48 w-full"
+                    />
+                )}
+
+                <span className="text-lg font-semibold">{title}</span>
+
+                <div className="flex justify-between w-full">
+                    <Badge>{itemType}</Badge>
+                    <span className="w-8 block border">
+                        <Flag countryCode={countryCode} />
+                    </span>
+                </div>
+            </Card>
+        </div>
+    );
+}

package/src/check-article-lang.tsx

@@ -5,7 +5,7 @@ import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
-import { useLanguageStore } from "./stores/language-store";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
 
 interface Props {
     availableVersions: AvailableVersionsInterface[]
@@ -17,12 +17,12 @@ export const CheckArticleLangToast: FC<Props> = ({ availableVersions }) => {
 
     useEffect(() => {
         setAvailableVersions(availableVersions)
-        const contentLang = useLanguageStore.getState().contentLang;
-
+        const searchLanguage = useSearchSettingsStore.getState().language;
         const activeArticle = availableVersions.filter((item) => item.active)[0]
-        if (activeArticle == undefined || activeArticle.lang == contentLang) return
 
-        const articleAvailable = availableVersions.find((item) => item.lang === contentLang)
+        if (activeArticle == undefined || activeArticle.lang == searchLanguage) return
+
+        const articleAvailable = availableVersions.find((item) => item.lang === searchLanguage)
         if (articleAvailable != undefined) {
             articleAvailableInToast(articleAvailable.lang, articleAvailable.link)
         }

package/src/directoryNodes/tree-of-content.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TreeOfContent } from './tree-of-content';
+
+const meta: Meta<typeof TreeOfContent> = {
+    title: 'Components/DirectoryNodes/TreeOfContent',
+    component: TreeOfContent,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof TreeOfContent>;
+
+export const Basic: Story = {
+    args: {
+        directoryNodes: [
+            { id: '1', label: 'Node 1', active: true, children: [] },
+            { id: '2', label: 'Node 2', active: false, children: [] },
+        ],
+    },
+};

package/src/directoryNodes/tree-of-content.tsx

@@ -38,7 +38,7 @@ export async function TreeOfContent({ directoryNodes }: SidebarProps) {
                 {tree.map((item) => (
                     <SidebarMenuItem key={item.id}>
                         <SidebarMenuButton asChild isActive={item.active}>
-                            <Link href={`/topics/${item.linkId}/content`} title={item.label}>
+                            <Link href={`/topics/${item.linkId}/pages`} title={item.label}>
                                 {item.label}
                             </Link>
                         </SidebarMenuButton>
@@ -51,7 +51,7 @@ export async function TreeOfContent({ directoryNodes }: SidebarProps) {
                                             asChild
                                             isActive={item.active}
                                         >
-                                            <Link href={`/topics/${item.linkId}/content`} title={item.label}>
+                                            <Link href={`/topics/${item.linkId}/pages`} title={item.label}>
                                                 {item.label}
                                             </Link>
                                         </SidebarMenuSubButton>

package/src/documents/result-list.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DocumentsResultList } from '../result-list';
+
+const meta: Meta<typeof DocumentsResultList> = {
+    title: 'Components/Documents/ResultList',
+    component: DocumentsResultList,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof DocumentsResultList>;
+
+export const Basic: Story = {
+    args: {
+        items: [],
+    },
+};

package/src/documents/result-list.tsx

@@ -1,36 +1,21 @@
 import { FC } from "react";
-import {
-    DocumentModel,
-    ExternalProductGraphicModel,
-    FragmentModel,
-    InformationUnitModel,
-    PackageModel,
-    TopicModel
-} from "@c-rex/interfaces";
+import { CommonItemsModel } from "@c-rex/interfaces";
 import { FileStack } from "lucide-react";
-import { cn, getType, getTitle, getVersions } from "@c-rex/utils";
+import { cn, getType, getTitle, getVersions, getLanguage } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { ResultTypes } from "@c-rex/types";
 import { RESULT_TYPES } from "@c-rex/constants";
 import { FileDownloadDropdown } from "@c-rex/components/file-download";
 import { FavoriteButton } from "@c-rex/components/favorite-button";
-
 import { ImageRenditionContainer } from "../renditions/image/container";
 import { BookmarkButton } from "../favorites/bookmark-button";
 import { HtmlRendition } from "../renditions/html";
+import { generateQueryParams } from "../../../utils/src/params";
+import { QueryParams } from "@c-rex/types";
 
 interface Props {
-    items: (
-        DocumentModel |
-        ExternalProductGraphicModel |
-        FragmentModel |
-        InformationUnitModel |
-        PackageModel |
-        TopicModel
-    )[];
+    items: CommonItemsModel[];
     query?: string;
-    disabledResults?: ResultTypes[];
     imageRestrictions?: string[];
     showActions?: boolean;
 }
@@ -39,7 +24,6 @@ interface Props {
 export const DocumentsResultList: FC<Props> = ({
     items,
     query = "",
-    disabledResults = [],
     imageRestrictions = [],
     showActions = true,
 }) => {
@@ -47,26 +31,37 @@ export const DocumentsResultList: FC<Props> = ({
         <div className="flex-1">
             {items.map((item, index) => {
                 const title = getTitle(item.titles, item.labels);
+                const language = getLanguage(item.languages);
                 const itemType = getType(item.class);
-                const disabled = disabledResults.includes(itemType);
                 const isDocument = itemType === RESULT_TYPES.DOCUMENT;
                 const multipleVersions = getVersions(item.versionOf);
                 const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
-
-                let itemLink = `/documents/${item.shortId}?q=${query}`
+                const queryParams: QueryParams[] = []
 
                 if (packageId) {
-                    itemLink += `&package=${packageId}`
+                    queryParams.push({
+                        key: "package",
+                        value: packageId,
+                    })
+                }
+
+                if (query.length > 0) {
+                    queryParams.push({
+                        key: "q",
+                        value: query,
+                    })
                 }
 
+                const params = generateQueryParams(queryParams)
+                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
+
                 return (
                     <div
                         key={index}
                         className={cn(
                             "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
                             index == items.length - 1 ? "" : "mb-4",
-                            `c-rex-result-item c-rex-result-${itemType}`,
-                            disabled && "c-rex-result-item-disabled",
+                            `c-rex-result-item c-rex-result-${itemType}`
                         )}
                     >
                         <div className="h-16 w-16 flex items-start">
@@ -79,15 +74,11 @@ export const DocumentsResultList: FC<Props> = ({
 
                         <div className="flex-1 p-2 flex flex-col">
                             <span className="text-sm text-muted-foreground">
-                                {item.revision}
+                                {item.revision} - {language}
                             </span>
 
                             <span className="text-lg font-medium">
-                                {disabled ? (
-                                    title
-                                ) : (
-                                    <a className="hover:underline" href={itemLink}>{title}</a>
-                                )}
+                                <a className="hover:underline" href={itemLink}>{title}</a>
                             </span>
 
                             <span className="text-sm">

package/src/favorites/bookmark-button.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookmarkButton } from '../bookmark-button';
+
+const meta: Meta<typeof BookmarkButton> = {
+    title: 'Components/Favorites/BookmarkButton',
+    component: BookmarkButton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof BookmarkButton>;
+
+export const Basic: Story = {
+    args: {
+        shortId: 'doc-1',
+    },
+};