@c-rex/components 0.1.21 → 0.1.23

package/src/{navbar/search-input.tsx → search-input.tsx}

@@ -3,8 +3,9 @@
 import React, { FC, useState } from "react";
 import { FileCheck, FileX, Search } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { AutoComplete } from "../autocomplete";
 import { cn } from "@c-rex/utils";
+import { InformationUnitsSuggestions } from "./generated/suggestions";
+import { useQueryState } from "nuqs";
 
 type PlacedOn = "NAVBAR" | "BODY"
 type Props = {
@@ -14,6 +15,7 @@ type Props = {
 }
 
 export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "NAVBAR" }) => {
+    const [pkg, setPkg] = useQueryState("package");
     const [checked, setChecked] = useState<boolean>(true);
 
     if (!showInput) return null
@@ -25,11 +27,12 @@ export const SearchInput: FC<Props> = ({ showInput, showPkgFilter, placedOn = "N
         )}>
             <Search className="shrink-0 opacity-50" />
 
-            <AutoComplete
-                initialValue=""
-                embedded={true}
-                searchByPackage={checked}
-            />
+            {/*
+                Add scope=pkgID if checked is true
+            */}
+            <InformationUnitsSuggestions embedded onSelectParams={
+                (pkg && checked) ? [{ key: "packages", value: pkg }] : []
+            } />
 
             {showPkgFilter && <>
                 <TooltipProvider>

package/src/share-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@c-rex/ui/button";
+import { Share2 } from "lucide-react"
+
+export const ShareButton = () => {
+    const [copied, setCopied] = useState(false);
+    const [shareData, setShareData] = useState({
+        title: '',
+        url: '',
+    });
+
+    useEffect(() => {
+        setShareData({
+            title: document.title,
+            url: window.location.href,
+        });
+    }, []);
+
+    const handleShare = async () => {
+        if (navigator.share) {
+            try {
+                await navigator.share(shareData);
+                console.log('Compartilhado com sucesso');
+            } catch (err) {
+                console.log('Erro ao compartilhar:', err);
+            }
+        } else {
+            navigator.clipboard.writeText(shareData.url);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+
+    return (
+        <div style={{ fontFamily: 'sans-serif' }}>
+            <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleShare}
+            >
+                <Share2 />
+            </Button>
+        </div>
+    );
+}
+
+

package/src/stores/search-settings-store.ts

@@ -12,7 +12,7 @@ type SearchSettingsStore = {
 
 export const useSearchSettingsStore = create<SearchSettingsStore>()(
     persist((set) => ({
-        language: [] as string[],
+        language: [],
         wildcard: "BOTH",
         operator: "OR",
         like: false,

package/src/blur-image.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import type { ComponentProps } from "react";
-import Image from "next/image";
-import { cn } from "@c-rex/utils";
-
-export const BlurImage = (props: ComponentProps<typeof Image>) => {
-    const [isLoading, setLoading] = useState(true);
-
-    return (
-        <Image
-            {...props}
-            alt={props.alt}
-            className={cn(
-                props.className,
-                "duration-500 ease-in-out",
-                isLoading ? "blur-sm" : "blur-0",
-            )}
-            onLoad={() => setLoading(false)}
-        />
-    );
-}

package/src/left-sidebar.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import React, { ComponentProps, JSX } from "react";
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarGroup,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem,
-} from "@c-rex/ui/sidebar";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { TreeOfContent } from "@c-rex/interfaces";
-import { cn } from "@c-rex/utils";
-
-interface SidebarProps extends ComponentProps<typeof Sidebar> {
-    data: TreeOfContent[];
-    loading?: boolean;
-}
-
-export function LeftSidebar({ data, loading, className, lang, ...props }: SidebarProps) {
-
-    const tableOfContentGroup = (): JSX.Element | null => {
-        if (loading) {
-            return (
-                <SidebarGroup className="pt-4">
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                </SidebarGroup>
-            )
-        }
-
-        if (data.length == 0) return null;
-
-        const langProp = {} as any
-
-        if (lang) {
-            langProp.lang = lang
-        }
-
-        return (
-            <SidebarGroup {...langProp}>
-                <SidebarMenu>
-                    {data.map((item) => (
-                        <SidebarMenuItem key={item.id}>
-                            <SidebarMenuButton asChild isActive={item.active}>
-                                <a href={item.link} title={item.label}>
-                                    {item.label}
-                                </a>
-                            </SidebarMenuButton>
-
-                            {item.children?.length ? (
-                                <SidebarMenuSub>
-                                    {item.children.map((item) => (
-                                        <SidebarMenuSubItem key={item.label}>
-                                            <SidebarMenuSubButton
-                                                asChild
-                                                isActive={item.active}
-                                            >
-                                                <a href={item.link} title={item.label}>
-                                                    {item.label}
-                                                </a>
-                                            </SidebarMenuSubButton>
-                                        </SidebarMenuSubItem>
-                                    ))}
-                                </SidebarMenuSub>
-                            ) : null}
-                        </SidebarMenuItem>
-                    ))}
-                </SidebarMenu>
-            </SidebarGroup>
-        );
-    }
-
-    return (
-        <Sidebar className={cn(className)} {...props}>
-            <SidebarContent>
-                {tableOfContentGroup()}
-            </SidebarContent>
-        </Sidebar>
-    );
-}

package/src/result-list.tsx

@@ -1,43 +0,0 @@
-import React, { FC, ReactNode } from "react";
-import { DefaultPageInfo, informationUnitsResponseItem, TopicsResponseItem, } from "@c-rex/interfaces";
-import { Empty } from "./empty";
-import BlogView from './result-view/blog';
-import TableView from './result-view/table';
-import { Pagination } from "./pagination";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
-import { ResultViewStyles } from "@c-rex/types";
-import TableWithImageView from "./result-view/table-with-images";
-
-interface ResultListProps {
-    items: informationUnitsResponseItem[] | TopicsResponseItem[];
-    pagination: DefaultPageInfo;
-}
-
-export const ResultList: FC<ResultListProps> = ({ items, pagination }: ResultListProps) => {
-    const { configs } = useAppConfig()
-
-    const listComponent: Record<ResultViewStyles, ReactNode> = {
-        "cards": <BlogView items={items as TopicsResponseItem[]} />,
-        "table": <TableView items={items as informationUnitsResponseItem[]} />,
-        "table-with-images": <TableWithImageView items={items as informationUnitsResponseItem[]} />,
-    }
-
-    if (!(configs.results.resultViewStyle in listComponent)) {
-        throw new Error(`Unsupported result view style: ${configs.results.resultViewStyle}`);
-    }
-
-    if (items.length === 0) {
-        return <Empty />;
-    }
-
-    return (
-        <>
-            {listComponent[configs.results.resultViewStyle as ResultViewStyles]}
-
-            <Pagination
-                totalPages={pagination.pageCount}
-                currentPage={pagination.pageNumber}
-            />
-        </>
-    );
-};

package/src/result-view/table-with-images.tsx

@@ -1,199 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { informationUnitsResponseItem } from "@c-rex/interfaces";
-import { CloudDownload, Eye, FileStack, ImageOff } from "lucide-react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@c-rex/ui/dropdown-menu";
-import { cn } from "@c-rex/utils";
-import { useQueryState } from "nuqs";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { FavoriteButton } from "../favorite-button";
-import { Button } from "@c-rex/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { Favorite, ResultTypes } from "@c-rex/types";
-import { FileIcon } from "../file-icon";
-import { useFavoritesStore } from "../stores/favorites-store";
-import { BookmarkButton } from "../bookmark-button";
-import { FaRegBookmark } from "react-icons/fa6";
-
-interface TableWithImageViewProps {
-    items: informationUnitsResponseItem[];
-}
-
-const Image: FC<{ id: string }> = ({ id }) => {
-    const [imageUrl, setImageUrl] = useState("");
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(false);
-
-    useEffect(() => {
-        let ignore = false;
-
-        async function fetchImage() {
-            try {
-                const res = await fetch(`https://picsum.photos/v2/list?limit=1`);
-
-                {/*
-                    TODO: talvez vamos receber mais de uma imagem, mas por enquanto pegamos apenas a primeira na lista
-                */}
-
-
-                const data = await res.json();
-                if (!ignore) {
-                    setImageUrl(data[0].download_url);
-                    setLoading(false);
-                }
-            } catch (err) {
-                setError(true);
-                console.error("Error loading image", err);
-            }
-        }
-
-        fetchImage();
-        return () => {
-            ignore = true
-        };
-    }, [id]);
-
-    if (error) {
-        return <ImageOff className="h-16 w-16 text-muted" />;
-    }
-
-    return (
-        <div className="h-16 w-16 flex items-center">
-            {loading ? (
-                <Skeleton className="h-16 w-16" />
-            ) : (
-                <img
-                    src={imageUrl}
-                    loading="lazy"
-                    onLoad={() => setLoading(false)}
-                />
-            )}
-        </div>
-    );
-}
-
-const TableWithImageView: FC<TableWithImageViewProps> = ({ items }) => {
-    const [query] = useQueryState("search");
-
-    const favoritesDocuments = useFavoritesStore((state) => state.documents);
-
-    return (
-        <div className="mb-6">
-            {items.map((item, index) => {
-                const isFavoriteDocument = Object.keys(favoritesDocuments).some((docId) => docId === item.shortId);
-                let topicList: Favorite[] = []
-
-                if (isFavoriteDocument && favoritesDocuments[item.shortId]) {
-                    topicList = favoritesDocuments[item.shortId]?.topics || []
-                }
-                return (
-                    <div
-                        key={index}
-                        className={cn(
-                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded mb-2",
-                            `c-rex-result-item c-rex-result-${item.type.toLowerCase()}`,
-                            item.disabled && "c-rex-result-item-disabled",
-                        )}
-                    >
-
-                        <div className="h-16 w-16 flex items-center">
-                            <Image id={item.shortId} />
-                        </div>
-
-                        <div className="flex-1 p-2 flex flex-col">
-                            <span className=" text-sm text-muted-foreground">
-                                {item.language.split("-")[0]?.toUpperCase()}
-                            </span>
-
-                            <span className="text-lg font-medium">
-                                {item.disabled ? (
-                                    item.title
-                                ) : (
-                                    <a className="hover:underline" href={`${item.link}?q=${query}`}>{item.title}</a>
-                                )}
-                            </span>
-
-                            <span className="text-sm">
-                                {item.type}
-                            </span>
-                            <span className="text-sm">
-                                short description here {/*
-                            TODO: get abstract if has the value key on it. Same behavior on class props
-
-                            abstract and description are not being returned by the API yet
-                            */}
-                            </span>
-                        </div>
-
-                        <div className="flex flex-col p-2 ml-auto justify-center">
-                            <span className="text-end text-sm text-muted-foreground mb-2">
-                                {item.revision}
-                            </span>
-                            <div className="flex gap-2">
-                                {Object.keys(item.files).map((fileKey, index) => {
-                                    if (!item.files[fileKey]) return null
-
-                                    return (
-                                        <DropdownMenu key={index}>
-                                            <DropdownMenuTrigger>
-                                                <Button variant="ghost" size="icon">
-                                                    <FileIcon extension={fileKey} />
-                                                </Button>
-                                            </DropdownMenuTrigger>
-                                            <DropdownMenuContent>
-                                                <DropdownMenuItem>
-                                                    <a href={item.files[fileKey].view} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <Eye className="mr-2" /> Open {/*TODO: use i18n functions*/}
-                                                    </a>
-                                                </DropdownMenuItem>
-                                                <DropdownMenuItem>
-                                                    <a href={item.files[fileKey].download} target="_blank" rel="noreferrer" className="flex items-center">
-                                                        <CloudDownload className="mr-2" /> Download {/*TODO: use i18n functions*/}
-                                                    </a>
-                                                </DropdownMenuItem>
-                                            </DropdownMenuContent>
-                                        </DropdownMenu>
-                                    )
-                                })}
-
-                                {(topicList && topicList.length > 0) && (
-                                    <BookmarkButton
-                                        markersList={topicList.filter(item => item.label.length > 0)}
-                                        trigger={
-                                            <Button variant="ghost" size="icon" className="relative">
-                                                <FaRegBookmark className="!w-5 color-primary" />
-                                                <span
-                                                    className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
-                                                >
-                                                    {topicList.length}
-                                                </span>
-                                            </Button>
-                                        }
-                                    />
-                                )}
-
-                                <FavoriteButton id={item.shortId} type={item.type as ResultTypes} label={item.title} />
-
-                                {item.multipleVersions.length > 1 && (
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <Button variant="ghost" size="icon">
-                                                <FileStack />
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-
-                                            Available in: {item.multipleVersions.join(", ")}
-                                        </TooltipContent>
-                                    </Tooltip>
-                                )}
-                            </div>
-
-                        </div>
-                    </div>
-                )
-            })}
-        </div>
-    );
-};
-
-export default TableWithImageView;

package/src/right-sidebar.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import React, { ComponentProps } from "react";
-import {
-    Sidebar,
-    SidebarContent,
-} from "@c-rex/ui/sidebar";
-import { useTranslations } from "next-intl";
-import { articleInfoItemType, DocumentsType, Favorite } from "@c-rex/types";
-import { InfoTable } from "./info/info-table";
-import { AvailableVersionsInterface } from "@c-rex/interfaces";
-import { useFavoritesStore } from "./stores/favorites-store";
-
-interface SidebarProps extends ComponentProps<typeof Sidebar> {
-    articleInfo: articleInfoItemType[],
-    documentInfo: articleInfoItemType[],
-    files: DocumentsType,
-    articleAvailableVersions: AvailableVersionsInterface[],
-    documentAvailableVersions: AvailableVersionsInterface[]
-    documentId: string
-}
-
-export function RightSidebar({
-    articleInfo,
-    documentInfo,
-    files,
-    articleAvailableVersions,
-    documentAvailableVersions,
-    documentId,
-    ...props
-}: SidebarProps) {
-    const t = useTranslations();
-    const favoritesDocuments = useFavoritesStore((state) => state.documents);
-    const isFavoriteDocument = Object.keys(favoritesDocuments).some((docId) => docId === documentId);
-    let favoritesList: Favorite[] = []
-
-    if (Object.keys(favoritesDocuments).some(docId => docId === documentId)) {
-        favoritesList = favoritesDocuments[documentId]?.topics || []
-    }
-
-    return (
-        <Sidebar {...props}>
-            <SidebarContent className="pt-4 pr-4 pb-10">
-                {(articleInfo.length > 0 || documentInfo.length > 0) && (
-                    <>
-
-                        {documentInfo.length > 0 && (
-                            <InfoTable
-                                title={t("aboutDocument")}
-                                items={documentInfo}
-                                files={files}
-                                availableVersions={documentAvailableVersions}
-                                markersList={isFavoriteDocument ? favoritesList : []}
-                            />
-                        )}
-
-                        {articleInfo.length > 0 && (
-                            <InfoTable
-                                title={t("aboutArticle")}
-                                items={articleInfo}
-                                availableVersions={articleAvailableVersions}
-                            />
-                        )}
-
-                    </>
-                )}
-            </SidebarContent>
-        </Sidebar>
-    );
-}

package/src/search-modal.tsx

@@ -1,140 +0,0 @@
-"use client"
-
-import React, { FC, useEffect, useState } from "react"
-import { Button } from "@c-rex/ui/button"
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@c-rex/ui/dialog"
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
-import { useTranslations } from "next-intl"
-import { WILD_CARD_OPTIONS } from "@c-rex/constants"
-import { call } from "@c-rex/utils"
-import { Input } from "@c-rex/ui/input"
-import { Label } from "@c-rex/ui/label"
-import { Checkbox } from "@c-rex/ui/checkbox"
-import { Toggle } from "@c-rex/ui/toggle"
-import { useLanguageStore } from "./stores/language-store"
-
-interface SearchModalProps {
-    trigger: React.ReactNode;
-}
-
-export const SearchModal: FC<SearchModalProps> = ({ trigger }) => {
-    const t = useTranslations("filter");
-    const contentLang = useLanguageStore(state => state.contentLang);
-    const [value, setValue] = useState<string>("");
-    const [loading, setLoading] = useState<boolean>(false);
-    const [suggestions, setSuggestions] = useState<string[]>([]);
-
-    const [params, setParams] = useQueryStates({
-        language: parseAsString,
-        page: parseAsInteger,
-        wildcard: parseAsString,
-        operator: parseAsString,
-        search: parseAsString,
-        packages: parseAsString,
-        tags: parseAsBoolean,
-        like: parseAsBoolean,
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-
-    const onSearch = (value: string): Promise<string[]> => {
-        return call<string[]>("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
-    }
-
-
-    useEffect(() => {
-        const debounceFetch = setTimeout(() => {
-            if (value) {
-                setLoading(true)
-                onSearch(value).then(suggestions => {
-                    setSuggestions(suggestions)
-                    setLoading(false)
-                });
-            } else {
-                setSuggestions([]);
-            }
-        }, 300);
-
-        return () => clearTimeout(debounceFetch);
-    }, [value]);
-
-
-    const apply = () => {
-        setParams({
-            search: value,
-            operator: "OR",
-            page: 1,
-            language: contentLang,
-            wildcard: WILD_CARD_OPTIONS.BOTH,
-            tags: false,
-            like: false,
-        });
-    }
-
-    return (
-        <Dialog>
-            <DialogTrigger asChild>
-                {trigger}
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Search</DialogTitle>
-                </DialogHeader>
-                <Input value={value} autoFocus onChange={(e) => setValue(e.target.value)} />
-
-                {loading ? (
-                    <div className="flex items-center justify-center py-4">
-                        <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
-                    </div>
-                ) : (
-                    <div>
-                        {suggestions.map((option) => (
-                            <Toggle
-                                key={option}
-                                value={option}
-                                className="m-0"
-                                onClick={(inputValue) => {
-                                    setValue(`"${inputValue}"`);
-                                }}
-                            >
-                                {option}
-                            </Toggle>
-                        ))}
-                    </div>
-                )}
-
-                <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3">
-                    <Checkbox
-                        id="toggle-2"
-                        defaultChecked
-                        className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-                    />
-                    <div className="font-normal">
-                        <span className="text-sm leading-none font-medium">
-                            Search only on this document
-                        </span>
-                        <p className="text-muted-foreground text-sm">
-                            You can enable or disable notifications at any time.
-                        </p>
-                    </div>
-                </Label>
-
-                <DialogFooter className="pt-2">
-                    <DialogClose asChild>
-                        <Button onClick={apply}>{t("apply")}</Button>
-                    </DialogClose>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog >
-    )
-}