@docubook/create 2.4.0 → 2.5.1

package/src/dist/components/SearchBox.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Dialog } from "@/components/ui/dialog"
+import { SearchTrigger } from "@/components/SearchTrigger"
+import { SearchModal } from "@/components/SearchModal"
+import AlgoliaSearch from "@/components/DocSearch"
+import { useSearch } from "./SearchContext"
+import { DialogTrigger } from "@/components/ui/dialog"
+import { searchConfig } from "@/lib/search/config"
+
+interface SearchProps {
+  /**
+   * Override the search type from config.
+   * If not provided, uses the config value.
+   */
+  type?: "default" | "algolia"
+  className?: string
+}
+
+export default function Search({ type, className }: SearchProps) {
+  const { isOpen, setIsOpen } = useSearch()
+  const searchType = type ?? searchConfig.type
+
+  if (searchType === "algolia") {
+    return <AlgoliaSearch className={className} />
+  }
+
+  // Logic for 'default' search
+  return (
+    <div className={className}>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>
+          <SearchTrigger className={className} />
+        </DialogTrigger>
+        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
+      </Dialog>
+    </div>
+  )
+}

package/src/dist/components/SearchContext.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+interface SearchContextType {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  toggle: () => void;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        event.preventDefault();
+        toggle();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [toggle]);
+
+  return (
+    <SearchContext.Provider value={{ isOpen, setIsOpen, toggle }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export function useSearch() {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+}

package/src/dist/components/SearchModal.tsx

@@ -1,12 +1,13 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState, useRef } from "react";
-import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react";
-import Anchor from "./anchor";
-import { advanceSearch, cn } from "@/lib/utils";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { page_routes } from "@/lib/routes";
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect, useMemo, useState, useRef } from "react"
+import { ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon, FileTextIcon } from "lucide-react"
+import Anchor from "./anchor"
+import { cn } from "@/lib/utils"
+import { advanceSearch } from "@/lib/search/built-in"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { page_routes } from "@/lib/routes"
 import {
   DialogContent,
   DialogHeader,
@@ -14,63 +15,63 @@ import {
   DialogClose,
   DialogTitle,
   DialogDescription,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
 
 type ContextInfo = {
-  icon: string;
-  description: string;
-  title?: string;
-};
+  icon: string
+  description: string
+  title?: string
+}
 
 type SearchResult = {
-  title: string;
-  href: string;
-  noLink?: boolean;
-  items?: undefined;
-  score?: number;
-  context?: ContextInfo;
-};
+  title: string
+  href: string
+  noLink?: boolean
+  items?: undefined
+  score?: number
+  context?: ContextInfo
+}
 
 const paddingMap = {
   1: "pl-2",
   2: "pl-4",
   3: "pl-10",
-} as const;
+} as const
 
 interface SearchModalProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
 }
 
 export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
-  const router = useRouter();
-  const [searchedInput, setSearchedInput] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const router = useRouter()
+  const [searchedInput, setSearchedInput] = useState("")
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([])
 
   useEffect(() => {
     if (!isOpen) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
-      setSearchedInput("");
+      setSearchedInput("")
     }
-  }, [isOpen]);
+  }, [isOpen])
 
   const filteredResults = useMemo<SearchResult[]>(() => {
-    const trimmedInput = searchedInput.trim();
+    const trimmedInput = searchedInput.trim()
 
     if (trimmedInput.length < 3) {
       return page_routes
-        .filter((route) => !route.href.endsWith('/'))
+        .filter((route) => !route.href.endsWith("/"))
         .slice(0, 6)
         .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
           title: route.title,
           href: route.href,
           noLink: route.noLink,
           context: route.context,
-        }));
+        }))
     }
-    return advanceSearch(trimmedInput) as unknown as SearchResult[];
-  }, [searchedInput]);
+    return advanceSearch(trimmedInput) as unknown as SearchResult[]
+  }, [searchedInput])
 
   // useEffect(() => {
   //   setSelectedIndex(0);
@@ -78,39 +79,39 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
 
   useEffect(() => {
     const handleNavigation = (event: KeyboardEvent) => {
-      if (!isOpen || filteredResults.length === 0) return;
+      if (!isOpen || filteredResults.length === 0) return
 
       if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+        event.preventDefault()
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length)
       } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+        event.preventDefault()
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length)
       } else if (event.key === "Enter") {
-        event.preventDefault();
-        const selectedItem = filteredResults[selectedIndex];
+        event.preventDefault()
+        const selectedItem = filteredResults[selectedIndex]
         if (selectedItem) {
-          router.push(`/docs${selectedItem.href}`);
-          setIsOpen(false);
+          router.push(`/docs${selectedItem.href}`)
+          setIsOpen(false)
         }
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleNavigation);
-    return () => window.removeEventListener("keydown", handleNavigation);
-  }, [isOpen, filteredResults, selectedIndex, router, setIsOpen]);
+    window.addEventListener("keydown", handleNavigation)
+    return () => window.removeEventListener("keydown", handleNavigation)
+  }, [isOpen, filteredResults, selectedIndex, router, setIsOpen])
 
   useEffect(() => {
     if (itemRefs.current[selectedIndex]) {
       itemRefs.current[selectedIndex]?.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
-      });
+      })
     }
-  }, [selectedIndex]);
+  }, [selectedIndex])
 
   return (
-    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
+    <DialogContent className="rounded-md! top-[45%] max-w-[650px] p-0 sm:top-[38%]">
       <DialogHeader>
         <DialogTitle className="sr-only">Search Documentation</DialogTitle>
         <DialogDescription className="sr-only">Search through the documentation</DialogDescription>
@@ -119,36 +120,35 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
       <input
         value={searchedInput}
         onChange={(e) => {
-          setSearchedInput(e.target.value);
-          setSelectedIndex(0);
+          setSearchedInput(e.target.value)
+          setSelectedIndex(0)
         }}
         placeholder="Type something to search..."
         autoFocus
-        className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
+        className="h-14 w-full border-b bg-transparent px-6 text-[14px] outline-none"
         aria-label="Search documentation"
       />
 
       {filteredResults.length == 0 && searchedInput && (
         <p className="text-muted-foreground mx-auto mt-2 text-sm">
-          No results found for{" "}
-          <span className="text-primary">{`"${searchedInput}"`}</span>
+          No results found for <span className="text-primary">{`"${searchedInput}"`}</span>
         </p>
       )}
       <ScrollArea className="max-h-[400px] overflow-y-auto">
-        <div className="flex flex-col items-start overflow-y-auto sm:px-2 px-1 pb-4">
+        <div className="flex flex-col items-start overflow-y-auto px-1 pb-4 sm:px-2">
           {filteredResults.map((item, index) => {
-            const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
-            const paddingClass = paddingMap[level] || 'pl-2';
-            const isActive = index === selectedIndex;
+            const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap
+            const paddingClass = paddingMap[level] || "pl-2"
+            const isActive = index === selectedIndex
 
             return (
               <DialogClose key={item.href} asChild>
                 <Anchor
                   ref={(el) => {
-                    itemRefs.current[index] = el as HTMLDivElement | null;
+                    itemRefs.current[index] = el as HTMLDivElement | null
                   }}
                   className={cn(
-                    "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5",
+                    "dark:hover:bg-accent/15 hover:bg-accent/10 flex w-full items-center gap-2.5 rounded-sm px-3 text-sm",
                     isActive && "bg-primary/20 dark:bg-primary/30",
                     paddingClass
                   )}
@@ -157,46 +157,44 @@ export function SearchModal({ isOpen, setIsOpen }: SearchModalProps) {
                 >
                   <div
                     className={cn(
-                      "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                      "flex h-full w-full items-center justify-between gap-1.5 px-2 py-3",
                       level > 1 && "border-l pl-4"
                     )}
                   >
                     <div className="flex items-center">
-                      <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                      <FileTextIcon className="mr-1 h-[1.1rem] w-[1.1rem]" />
                       <span>{item.title}</span>
                     </div>
                     {isActive && (
-                      <div className="hidden md:flex items-center text-xs text-muted-foreground">
+                      <div className="text-muted-foreground hidden items-center text-xs md:flex">
                         <span>Return</span>
-                        <CornerDownLeftIcon className="h-3 w-3 ml-1" />
+                        <CornerDownLeftIcon className="ml-1 h-3 w-3" />
                       </div>
                     )}
                   </div>
                 </Anchor>
               </DialogClose>
-            );
+            )
           })}
         </div>
       </ScrollArea>
-      <DialogFooter className="md:flex md:justify-start hidden h-14 px-6 bg-transparent border-t text-[14px] outline-none">
+      <DialogFooter className="hidden h-14 border-t bg-transparent px-6 text-[14px] outline-none md:flex md:justify-start">
         <div className="flex items-center gap-2">
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowUpIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <ArrowUpIcon className="h-3 w-3" />
           </span>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <ArrowDownIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <ArrowDownIcon className="h-3 w-3" />
           </span>
           <p className="text-muted-foreground">to navigate</p>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-            <CornerDownLeftIcon className="w-3 h-3" />
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 p-2">
+            <CornerDownLeftIcon className="h-3 w-3" />
           </span>
           <p className="text-muted-foreground">to select</p>
-          <span className="dark:bg-accent/15 bg-slate-200 border rounded px-2 py-1">
-            esc
-          </span>
+          <span className="dark:bg-accent/15 rounded border bg-slate-200 px-2 py-1">esc</span>
           <p className="text-muted-foreground">to close</p>
         </div>
       </DialogFooter>
     </DialogContent>
-  );
-}
+  )
+}

package/src/dist/components/SearchTrigger.tsx

@@ -1,31 +1,36 @@
-"use client";
+"use client"
 
-import { CommandIcon, SearchIcon } from "lucide-react";
-import { DialogTrigger } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+import { CommandIcon, SearchIcon } from "lucide-react"
+import { DialogTrigger } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
 
-export function SearchTrigger() {
+interface SearchTriggerProps {
+  className?: string
+}
+
+export function SearchTrigger({ className }: SearchTriggerProps) {
   return (
     <DialogTrigger asChild>
-      <div className="relative flex-1 cursor-pointer max-w-[140px]">
+      <div className={cn("relative flex-1 cursor-pointer", className)}>
         <div className="flex items-center">
-          <div className="md:hidden p-2 -ml-2">
-            <SearchIcon className="h-5 w-5 text-muted-foreground" />
+          <div className="-ml-2 block p-2 lg:hidden">
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
           </div>
-          <div className="hidden md:block w-full">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <div className="hidden w-full lg:block">
+            <SearchIcon className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
             <Input
-              className="w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
+              className="dark:bg-background/95 bg-background h-9 w-full overflow-ellipsis rounded-full border pl-10 pr-0 text-sm shadow-sm sm:pr-4"
               placeholder="Search"
               readOnly // This input is for display only
             />
-            <div className="flex absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-accent bg-accent text-white px-2 py-0.5 rounded-full">
-              <CommandIcon className="w-3 h-3" />
+            <div className="dark:bg-accent bg-accent absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded-full px-2 py-0.5 font-mono text-xs font-medium text-white">
+              <CommandIcon className="h-3 w-3" />
               <span>K</span>
             </div>
           </div>
         </div>
       </div>
     </DialogTrigger>
-  );
-}
+  )
+}

package/src/dist/components/Sponsor.tsx

@@ -89,7 +89,7 @@ export function Sponsor() {
   // Safely get sponsor data with optional chaining and default values
   const sponsor = docuConfig?.sponsor || {};
   const item = sponsor?.item;
-  
+
   // Return null if required fields are missing
   if (!item?.url || !item?.image || !item?.title) {
     return null;
@@ -106,7 +106,7 @@ export function Sponsor() {
         rel="noopener noreferrer"
         className="flex flex-col justify-center gap-2 p-4 border rounded-lg hover:shadow transition-shadow"
       >
-        <div className="relative w-8 h-8 flex-shrink-0">
+        <div className="relative w-8 h-8 shrink-0">
           <Image
             src={item.image}
             alt={item.title}

package/src/dist/components/{theme-toggle.tsx → ThemeToggle.tsx}

@@ -17,9 +17,9 @@ export function ModeToggle() {
   // Jika belum mounted, jangan render apapun untuk menghindari mismatch
   if (!mounted) {
     return (
-      <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1">
-        <div className="rounded-full p-1 w-8 h-8" />
-        <div className="rounded-full p-1 w-8 h-8" />
+      <div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5">
+        <div className="rounded-full p-0 w-1 h-1" />
+        <div className="rounded-full p-0 w-1 h-1" />
       </div>
     );
   }
@@ -43,29 +43,29 @@ export function ModeToggle() {
       type="single"
       value={activeTheme}
       onValueChange={handleToggle}
-      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
+      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5 transition-all"
     >
       <ToggleGroupItem
         value="light"
-        size="sm"
+        size="xs"
         aria-label="Light Mode"
-        className={`rounded-full cursor-pointer p-1 transition-all ${activeTheme === "light"
+        className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "light"
           ? "bg-primary text-primary-foreground"
           : "bg-transparent hover:bg-muted/50"
           }`}
       >
-        <Sun className="h-4 w-4" />
+        <Sun className="h-0.5 w-0.5" />
       </ToggleGroupItem>
       <ToggleGroupItem
         value="dark"
-        size="sm"
+        size="xs"
         aria-label="Dark Mode"
-        className={`rounded-full cursor-pointer p-1 transition-all ${activeTheme === "dark"
+        className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "dark"
           ? "bg-primary text-primary-foreground"
           : "bg-transparent hover:bg-muted/50"
           }`}
       >
-        <Moon className="h-4 w-4" />
+        <Moon className="h-0.5 w-0.5" />
       </ToggleGroupItem>
     </ToggleGroup>
   );