@c-rex/components 0.1.32 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.32",
+  "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/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 }] : []