@c-rex/components 0.1.33 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.33",
+  "version": "0.1.36",
   "files": [
     "src"
   ],

package/src/autocomplete.tsx

@@ -1,12 +1,11 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Input } from "@c-rex/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@c-rex/ui/input-group";
 import { useTranslations } from "next-intl";
 import { SuggestionQueryParams } from "@c-rex/interfaces";
-
-import { useSearchSettingsStore } from "./stores/search-settings-store";
-import { useRouter } from 'next/navigation';
+import { X } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { suggestionRequest } from "./generated/create-suggestions-request";
 import { useQueryState } from "nuqs";
 
@@ -18,11 +17,13 @@ export type AutoCompleteProps = {
     onSelectParams?: { key: string, value: string }[];
     onSelectPath: string
     inputClass?: string
+    keepParams?: boolean;
 };
 
 export const AutoComplete = ({
     initialValue = "",
     embedded = true,
+    keepParams = false,
     endpoint,
     queryParams,
     onSelectParams,
@@ -33,6 +34,7 @@ export const AutoComplete = ({
     const [pkg] = useQueryState("package");
 
     const containerRef = useRef<HTMLDivElement>(null);
+    const searchParams = useSearchParams();
     const router = useRouter();
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState(initialValue);
@@ -46,30 +48,33 @@ export const AutoComplete = ({
         const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
 
         return results.data;
-    }, [endpoint, queryParams]);
+    }, [endpoint, pkg, queryParams]);
 
     const handleSelect = (value: string) => {
         setQuery(value);
         setOpen(false);
-        onSelect(value);
-    };
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
+        nextParams.set("search", value);
+        onSelectParams?.forEach(param => {
+            nextParams.set(param.key, param.value);
+        });
 
-    const onSelect = (value: string) => {
-        const params = new URLSearchParams();
-        const searchSettings = useSearchSettingsStore.getState();
+        router.push(`${onSelectPath}?${nextParams.toString()}`);
+    };
 
-        params.set('search', value);
-        params.set("page", "1")
-        params.set("operator", searchSettings.operator)
-        if (searchSettings.language) params.set("language", searchSettings.language)
-        params.set("wildcard", searchSettings.wildcard)
-        params.set("like", searchSettings.like.toString())
+    const clearSearch = () => {
+        setQuery("");
+        setOpen(false);
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
+        nextParams.delete("search");
+        const queryString = nextParams.toString();
 
         onSelectParams?.forEach(param => {
-            params.set(param.key, param.value);
+            nextParams.set(param.key, param.value);
         });
-
-        router.push(`${onSelectPath}?${params.toString()}`);
+        router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
     };
 
     useEffect(() => {
@@ -105,23 +110,37 @@ export const AutoComplete = ({
 
     return (
         <div className="relative flex-1" ref={containerRef}>
-            <Input
-                variant={embedded ? "embedded" : undefined}
-                className={inputClass}
-                type="text"
-                placeholder={t("search")}
-                value={query}
-                onChange={(e) => {
-                    setQuery(e.target.value);
-                    setOpen(true);
-                }}
-                onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                        e.preventDefault();
-                        handleSelect(query);
-                    }
-                }}
-            />
+            <InputGroup variant={embedded ? "embedded" : "default"}>
+                <InputGroupInput
+                    variant={embedded ? "embedded" : undefined}
+                    className={inputClass}
+                    type="text"
+                    placeholder={t("search")}
+                    value={query}
+                    onChange={(e) => {
+                        setQuery(e.target.value);
+                        setOpen(true);
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            e.preventDefault();
+                            handleSelect(query);
+                        }
+                    }}
+                />
+                {query.length > 0 && (
+                    <InputGroupAddon align="inline-end">
+                        <InputGroupButton
+                            size="icon-xs"
+                            variant="ghost"
+                            aria-label="Clear search"
+                            onClick={clearSearch}
+                        >
+                            <X className="size-3" />
+                        </InputGroupButton>
+                    </InputGroupAddon>
+                )}
+            </InputGroup>
 
             {open && (
                 <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
@@ -139,7 +158,11 @@ export const AutoComplete = ({
                                         <li
                                             key={option}
                                             className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
-                                            onClick={() => handleSelect(`"${option}"`)}
+                                            onClick={() => {
+                                                //handleSelect(`"${option}"`)
+                                                // TODO: check if the quotes are necessary
+                                                handleSelect(option)
+                                            }}
                                         >
                                             {option}
                                         </li>

package/src/favorites/bookmark-button.analysis.md

@@ -2,14 +2,16 @@
 
 - Component: packages/components/src/favorites/bookmark-button.tsx
 - Type: Client component
-- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=no, fetch/call=no
+- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
 
 ## Possible re-render causes
-- Store updates for the selected document topics will re-render this component (expected and desired for live badge updates).
+- Effects that update state can add extra renders on mount and dependency changes.
 
 ## Possible bugs/risks
-- Dynamic Tailwind class name interpolation (`text-${item.color}`) may be purged depending on Tailwind safelist config.
+- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
+- markersList is loaded only on mount/shortId change; later store updates may not refresh the badge.
 
 ## Recommended improvements
-- Keep the direct Zustand selector approach (`documents[shortId]?.topics`) to preserve reactive UI behavior.
-- If marker colors are dynamic, safelist all expected `text-*` classes or map colors to explicit class names.
+- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
+- Read documents[shortId]?.topics directly through a Zustand selector to keep UI reactive.
+

package/src/favorites/bookmark-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ComponentProps, FC, useState } from "react";
-import { Button } from "@c-rex/ui/button";
+import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
+import { Button, ButtonProps } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
@@ -20,18 +20,17 @@ type BookmarkProps = {
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 }
 
-const EMPTY_TOPICS: Array<{ id: string; label: string; color: string }> = [];
-
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
     triggerVariant = "outline"
 }) => {
-    const [open, setOpen] = useState(false);
-    const document = useFavoritesStore((state) => state.documents[shortId]);
-    const markersList = document?.topics ?? EMPTY_TOPICS;
+    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
 
+    useEffect(() => {
+        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
+    }, [shortId]);
     return (
-        <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog>
             <DialogTrigger asChild>
                 <Button variant={triggerVariant} size="icon" className="relative">
                     <FaRegBookmark className="text-primary" />
@@ -44,38 +43,37 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                         </span>
                     )}
                 </Button>
+
             </DialogTrigger>
-            {open && (
-                <DialogContent>
-                    <DialogHeader>
-                        <DialogTitle>Bookmarks</DialogTitle>
-                        <DialogDescription>
-                            Manage your bookmarks here
-                        </DialogDescription>
-                    </DialogHeader>
-                    <Table>
-                        <TableBody>
-                            {markersList.map((item) => (
-                                <TableRow key={item.id} className="min-h-12">
-                                    <TableCell>
-                                        <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
-                                    </TableCell>
-                                    <TableCell>
-                                        <Link href={`/topics/${item.id}`}>
-                                            {item.label}
-                                        </Link>
-                                    </TableCell>
-                                    <TableCell>
-                                        <Button variant="destructive" size="icon">
-                                            <Trash className="w-5 hover:text-red-600 cursor-pointer" />
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </DialogContent>
-            )}
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Bookmarks</DialogTitle>
+                    <DialogDescription>
+                        Manage your bookmarks here
+                    </DialogDescription>
+                </DialogHeader>
+                <Table>
+                    <TableBody>
+                        {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}`}>
+                                        {item.label}
+                                    </Link>
+                                </TableCell>
+                                <TableCell>
+                                    <Button variant="destructive" size="icon">
+                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                    </Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </DialogContent>
         </Dialog>
     )
 }

package/src/favorites/favorite-button.analysis.md

@@ -10,8 +10,9 @@
 
 ## Possible bugs/risks
 - Async flows can hit race conditions during fast param/route changes.
-- Residual risk: fetch errors are silently ignored (except abort), which can hide API issues.
+- useEffect with empty deps calls getTopicDocumentData(id) and does not react if id/type changes.
 
 ## Recommended improvements
-- Keep cancellation guards (AbortController + unmount guard) in place as currently implemented.
-- Consider surfacing non-abort fetch failures through logging or telemetry.
+- Consider cancellation guards (isMounted or AbortController) and standardized error handling.
+- Include id and type in effect dependencies and handle fetch cancellation on unmount.
+

package/src/favorites/favorite-button.tsx

@@ -19,32 +19,10 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
     const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
 
     useEffect(() => {
-        if (type !== RESULT_TYPES.TOPIC) {
-            setDocumentData({ id, label });
-            return;
+        if (type === RESULT_TYPES.TOPIC) {
+            getTopicDocumentData(id);
         }
-
-        let isCancelled = false;
-        const controller = new AbortController();
-
-        const loadTopicDocumentData = async () => {
-            try {
-                const data = await getTopicDocumentData(id, controller.signal);
-                if (!isCancelled) {
-                    setDocumentData(data);
-                }
-            } catch (error) {
-                if ((error as Error).name === "AbortError") return;
-            }
-        };
-
-        loadTopicDocumentData();
-
-        return () => {
-            isCancelled = true;
-            controller.abort();
-        };
-    }, [id, label, type]);
+    }, []);
 
     const addFavorite = async (id: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
@@ -67,18 +45,17 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
         removeFavoriteTopic(documentData.id, id);
     }
 
-    const getTopicDocumentData = async (topicId: string, signal?: AbortSignal): Promise<{ id: string, label: string }> => {
+    const getTopicDocumentData = async (topicId: string): Promise<void> => {
 
         const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
-            method: "GET",
-            signal,
+            method: "GET"
         });
 
         if (!response.ok) throw new Error("Failed to fetch document by topic id")
 
-        const { documentId, label: documentLabel } = await response.json();
+        const { documentId, label } = await response.json();
 
-        return { id: documentId, label: documentLabel };
+        setDocumentData({ id: documentId, label });
     }
 
     if (isFavorite) {

package/src/results/pagination.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react";
+import { FC, MouseEvent } from "react";
 import {
     Pagination as PaginationUI,
     PaginationContent,
@@ -19,15 +19,25 @@ interface PaginationProps {
 export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
     const disabledClass = "opacity-50 pointer-events-none";
 
-    const [_, setPage] = useQueryState('page',
+    const [, setPage] = useQueryState('page',
         parseAsInteger.withOptions({
             history: 'push',
             shallow: false,
         })
     )
 
-    const onChangePage = (pageNumber: number) => {
-        setPage(pageNumber);
+    const onChangePage = (event: MouseEvent<HTMLAnchorElement>, pageNumber: number) => {
+        event.preventDefault();
+
+        if (
+            pageNumber < 1
+            || (pageInfo.pageCount !== undefined && pageNumber > pageInfo.pageCount)
+            || pageNumber === pageInfo.pageNumber
+        ) {
+            return;
+        }
+
+        void setPage(pageNumber);
     }
 
     return (
@@ -37,7 +47,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                     <PaginationPrevious
                         href="#"
                         className={pageInfo.pageNumber === 1 ? disabledClass : ""}
-                        onClick={() => onChangePage(pageInfo.pageNumber! - 1)}
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! - 1)}
                     />
                 </PaginationItem>
 
@@ -46,7 +56,7 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                         <PaginationLink
                             href="#"
                             isActive={page === pageInfo.pageNumber}
-                            onClick={() => onChangePage(page)}
+                            onClick={(event) => onChangePage(event, page)}
                         >
                             {page}
                         </PaginationLink>
@@ -61,11 +71,11 @@ export const Pagination: FC<PaginationProps> = ({ pageInfo }) => {
                 <PaginationItem>
                     <PaginationNext
                         href="#"
-                        onClick={() => onChangePage(pageInfo.pageNumber! + 1)}
+                        onClick={(event) => onChangePage(event, pageInfo.pageNumber! + 1)}
                         className={pageInfo.pageNumber === pageInfo.pageCount ? disabledClass : ""}
                     />
                 </PaginationItem>
             </PaginationContent>
         </PaginationUI>
     )
-}
+}

package/src/search-input.tsx

@@ -44,7 +44,7 @@ export const SearchInput: FC<Props> = ({
         <>
             <Search className="shrink-0 opacity-50" />
 
-            {/* Add scope=pkgID if checked is true */}
+
             <AutocompleteComponent
                 onSelectParams={
                     (pkg && checked && showPkgFilter) ? [{ key: "packages", value: pkg }] : []

package/src/stores/favorites-store.ts

@@ -60,29 +60,29 @@ export const useFavoritesStore = create<FavoritesStore>()(
 
 
 const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string, label: string, color: string): Record<string, { topics: Favorite[] }> => {
-    const currentDocument = documents[documentId];
-    const topics = currentDocument?.topics || [];
-
-    return {
-        ...documents,
-        [documentId]: {
-            ...(currentDocument?.label ? { label: currentDocument.label } : {}),
-            topics: [...topics, { id, label, color }],
-        },
-    };
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        documentsCopy[documentId] = { topics: [] };
+    }
+
+    documentsCopy[documentId]!.topics.push({ id, label, color });
+
+    return documentsCopy
 };
 
 const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string): Record<string, { topics: Favorite[] }> => {
-    const currentDocument = documents[documentId];
-    if (!currentDocument) {
-        return documents;
+
+    const documentsCopy = { ...documents };
+    const notFound = documents[documentId] == undefined;
+
+    if (notFound) {
+        return documentsCopy;
     }
 
-    return {
-        ...documents,
-        [documentId]: {
-            ...(currentDocument.label ? { label: currentDocument.label } : {}),
-            topics: currentDocument.topics.filter((topic) => topic.id !== id),
-        },
-    };
-}
+    documentsCopy[documentId]!.topics = documentsCopy[documentId]!.topics.filter(topic => topic.id !== id);
+
+    return documentsCopy
+}