@docubook/create 1.14.0 → 1.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docubook/create",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "description": "CLI to create DocuBook projects",
   "main": "src/index.js",
   "type": "module",
@@ -23,8 +23,8 @@
     "chalk": "^5.3.0",
     "cli-progress": "^3.12.0",
     "commander": "^12.1.0",
-    "enquirer": "^2.4.1",
     "figlet": "^1.8.0",
-    "ora": "^8.1.0"
+    "ora": "^8.1.0",
+    "prompts": "^2.4.2"
   }
 }

package/src/cli/program.js

@@ -1,8 +1,8 @@
 import { program } from "commander";
-import chalk from "chalk";
-import { displayAsciiArt } from "../utils/display.js";
+import { displayIntro } from "../utils/display.js";
 import { collectUserInput } from "./promptHandler.js";
 import { createProject } from "../installer/projectInstaller.js";
+import log from "../utils/logger.js";
 
 /**
  * Initializes the CLI program
@@ -11,19 +11,20 @@ import { createProject } from "../installer/projectInstaller.js";
 export function initializeProgram(version) {
   program
     .version(version)
-    .description("CLI to create a new Docubook project")
-    .action(async () => {
+    .description("CLI to create a new DocuBook project")
+    .argument("[directory]", "The name of the project directory")
+    .action(async (directory) => {
       try {
-        await displayAsciiArt();
-        console.log(chalk.white("DocuBook Installer\n"));
+        displayIntro();
+        const userInput = await collectUserInput(directory);
 
-        // Collect user input
-        const options = await collectUserInput();
-
-        // Create project with collected options
-        await createProject(options);
+        // Pass all user input AND the DocuBook version to createProject
+        await createProject({
+          ...userInput,
+          docubookVersion: version, // Add DocuBook version here
+        });
       } catch (err) {
-        // Error handling is done in the respective modules
+        log.error(err.message || "An unexpected error occurred.");
         process.exit(1);
       }
     });

package/src/cli/promptHandler.js

@@ -1,73 +1,66 @@
-import enquirer from "enquirer";
+import prompts from "prompts";
 import { detectDefaultPackageManager, getPackageManagerVersion } from "../utils/packageManager.js";
 import log from "../utils/logger.js";
-
-const { prompt } = enquirer;
-
-/**
- * Detects if the command was run with yarn or yarn dlx
- * @returns {boolean}
- */
-function isYarnCommand() {
-  const userAgent = process.env.npm_config_user_agent || '';
-  return userAgent.includes('yarn') || process.argv.some(arg => arg.includes('yarn'));
-}
+import chalk from "chalk";
 
 /**
  * Collects user input for project creation
+ * @param {string} [cliProvidedDir] - The directory name provided via CLI argument.
  * @returns {Promise<Object>} User answers
  */
-export async function collectUserInput() {
-  // Skip installation prompt if running with yarn/yarn dlx
-  const isYarn = isYarnCommand();
+export async function collectUserInput(cliProvidedDir) {
   const defaultPackageManager = detectDefaultPackageManager();
+  let answers = {
+    directoryName: cliProvidedDir
+  };
 
-  // Get initial answers (directory name and package manager)
-  const { directoryName, packageManager } = await prompt([
+  const questions = [
     {
-      type: "input",
+      type: cliProvidedDir ? null : "text",
       name: "directoryName",
-      message: "📁 Project name",
+      message: "What is your project named?",
       initial: "docubook",
+      validate: (name) => name.trim().length > 0 ? true : "Project name cannot be empty.",
     },
     {
       type: "select",
       name: "packageManager",
-      message: "📦 Package manager",
-      choices: ["npm", "pnpm", "yarn", "bun"],
-      initial: defaultPackageManager,
-    }
-  ]);
-
-  // Only ask about installation if not using yarn
-  let installNow = false;
-  if (packageManager !== 'yarn') {
-    const { shouldInstall } = await prompt({
-      type: "confirm",
-      name: "shouldInstall",
-      message: "Install dependencies now?",
+      message: "Select your package manager:",
+      choices: [
+        { title: "npm", value: "npm" },
+        { title: "pnpm", value: "pnpm" },
+        { title: "yarn", value: "yarn" },
+        { title: "bun", value: "bun" },
+      ],
+      initial: ["npm", "pnpm", "yarn", "bun"].indexOf(defaultPackageManager),
+    },
+    {
+      type: (prev) => (prev !== 'yarn' ? "confirm" : null),
+      name: "installNow",
+      message: "Would you like to install dependencies now?",
       initial: true,
-    });
-    installNow = shouldInstall;
-  }
+    },
+  ];
 
-  // Prepare the answers object
-  const answers = {
-    directoryName,
-    packageManager,
-    installNow
-  };
+  const promptAnswers = await prompts(questions, {
+    onCancel: () => {
+      log.error("Scaffolding cancelled.");
+      process.exit(0);
+    },
+  });
 
-  // Validate package manager is installed
-  const version = getPackageManagerVersion(packageManager);
+  answers = { ...answers, ...promptAnswers };
 
-  if (!version) {
-    log.error(`${packageManager} is not installed on your system.`);
-    process.exit(1);
+  // Validate the selected package manager
+  const pmVersion = getPackageManagerVersion(answers.packageManager);
+  if (!pmVersion) {
+    throw new Error(`${chalk.bold(answers.packageManager)} is not installed on your system. Please install it to continue.`);
   }
 
+  // Return all answers, including the package manager version with a clear property name
   return {
     ...answers,
-    version
+    directoryName: answers.directoryName.trim(),
+    pmVersion,
   };
 }

package/src/dist/app/page.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import AnimatedShinyText from "@/components/ui/animated-shiny-text";
 import { getMetadata } from "@/app/layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-// v1.14.0
+
 export const metadata = getMetadata({
   title: "Home",
 });
@@ -25,7 +25,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.14.0</span>
+              <span>🚀 New Version - Release v1.14.2</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>

package/src/dist/components/SearchModal.tsx

@@ -0,0 +1,198 @@
+"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-config";
+import {
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogClose,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+type ContextInfo = {
+  icon: string;
+  description: string;
+  title?: string;
+};
+
+type SearchResult = {
+  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;
+
+interface SearchModalProps {
+  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)[]>([]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchedInput("");
+    }
+  }, [isOpen]);
+
+  const filteredResults = useMemo<SearchResult[]>(() => {
+    const trimmedInput = searchedInput.trim();
+
+    if (trimmedInput.length < 3) {
+      return page_routes
+        .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]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredResults]);
+
+  useEffect(() => {
+    const handleNavigation = (event: KeyboardEvent) => {
+      if (!isOpen || filteredResults.length === 0) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        const selectedItem = filteredResults[selectedIndex];
+        if (selectedItem) {
+          router.push(`/docs${selectedItem.href}`);
+          setIsOpen(false);
+        }
+      }
+    };
+
+    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]);
+
+  return (
+    <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
+      <DialogHeader>
+        <DialogTitle className="sr-only">Search Documentation</DialogTitle>
+        <DialogDescription className="sr-only">Search through the documentation</DialogDescription>
+      </DialogHeader>
+      
+      <input
+        value={searchedInput}
+        onChange={(e) => setSearchedInput(e.target.value)}
+        placeholder="Type something to search..."
+        autoFocus
+        className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
+        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>
+        </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">
+          {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;
+
+            return (
+                <DialogClose key={item.href} asChild>
+                    <Anchor
+                    ref={(el) => {
+                        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",
+                        isActive && "bg-primary/20 dark:bg-primary/30",
+                        paddingClass
+                    )}
+                    href={`/docs${item.href}`}
+                    tabIndex={-1}
+                    >
+                    <div
+                        className={cn(
+                        "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
+                        level > 1 && "border-l pl-4"
+                        )}
+                    >
+                        <div className="flex items-center">
+                          <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
+                          <span>{item.title}</span>
+                        </div>
+                        {isActive && (
+                          <div className="hidden md:flex items-center text-xs text-muted-foreground">
+                            <span>Return</span>
+                            <CornerDownLeftIcon className="h-3 w-3 ml-1" />
+                          </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">
+        <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>
+          <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
+            <ArrowDownIcon className="w-3 h-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>
+          <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>
+          <p className="text-muted-foreground">to close</p>
+        </div>
+      </DialogFooter>
+    </DialogContent>
+  );
+}

package/src/dist/components/SearchTrigger.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { CommandIcon, SearchIcon } from "lucide-react";
+import { DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+export function SearchTrigger() {
+  return (
+    <DialogTrigger asChild>
+      <div className="relative flex-1 cursor-pointer max-w-[140px]">
+        <div className="flex items-center">
+          <div className="md:hidden p-2 -ml-2">
+            <SearchIcon className="h-5 w-5 text-muted-foreground" />
+          </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" />
+            <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"
+              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" />
+              <span>K</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogTrigger>
+  );
+}

package/src/dist/components/search.tsx

@@ -1,52 +1,28 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState, useRef } from "react";
-import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileTextIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTrigger,
-  DialogClose,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import Anchor from "./anchor";
-import { advanceSearch, cn } from "@/lib/utils";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { page_routes } from "@/lib/routes-config";
-
-// Define the ContextInfo type to match the one in routes-config
-type ContextInfo = {
-  icon: string;
-  description: string;
-  title?: string;
-};
-
-type SearchResult = {
-  title: string;
-  href: string;
-  noLink?: boolean;
-  items?: undefined;
-  score?: number;
-  context?: ContextInfo;
-};
+import { useState, useEffect } from "react";
+import { Dialog } from "@/components/ui/dialog";
+import { SearchTrigger } from "@/components/SearchTrigger";
+import { SearchModal } from "@/components/SearchModal";
+
+// Define props for the Search component
+interface SearchProps {
+  /**
+   * Specify the type of search engine to use.
+   * @default 'default'
+   */
+  type?: "default" | "algolia";
+}
 
-export default function Search() {
-  const router = useRouter();
-  const [searchedInput, setSearchedInput] = useState("");
+export default function Search({ type = "default" }: SearchProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
+  // Effect to handle keyboard shortcut (Cmd/Ctrl + K)
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {
         event.preventDefault();
-        setIsOpen(true);
+        setIsOpen((open) => !open);
       }
     };
 
@@ -56,191 +32,20 @@ export default function Search() {
     };
   }, []);
 
-  const filteredResults = useMemo<SearchResult[]>(() => {
-    const trimmedInput = searchedInput.trim();
-
-    // If search input is empty or less than 3 characters, show initial suggestions
-    if (trimmedInput.length < 3) {
-      return page_routes
-        .filter((route: { href: string }) => !route.href.endsWith('/')) // Filter out directory routes
-        .slice(0, 6) // Limit to 6 posts
-        .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
-          title: route.title,
-          href: route.href,
-          noLink: route.noLink,
-          context: route.context
-        }));
-    }
-
-    // For search with 3 or more characters, use the advance search
-    return advanceSearch(trimmedInput) as unknown as SearchResult[];
-  }, [searchedInput]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [filteredResults]);
-
-  useEffect(() => {
-    const handleNavigation = (event: KeyboardEvent) => {
-      if (!isOpen || filteredResults.length === 0) return;
-
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev + 1) % filteredResults.length);
-      }
-
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev - 1 + filteredResults.length) % filteredResults.length);
-      }
-
-      if (event.key === "Enter") {
-        event.preventDefault();
-        const selectedItem = filteredResults[selectedIndex];
-        if (selectedItem) {
-          router.push(`/docs${selectedItem.href}`);
-          setIsOpen(false);
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleNavigation);
-    return () => {
-      window.removeEventListener("keydown", handleNavigation);
-    };
-  }, [isOpen, filteredResults, selectedIndex, router]);
-
-    useEffect(() => {
-    if (itemRefs.current[selectedIndex]) {
-      itemRefs.current[selectedIndex]?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-      });
-    }
-  }, [selectedIndex]);
+  // Here you can add logic for different search types if needed in the future
+  if (type === "algolia") {
+    // return <AlgoliaSearchComponent />; // Example for future implementation
+    console.warn("Tipe pencarian 'algolia' belum diimplementasikan.");
+    // For now, we will fall back to the default search implementation
+  }
 
+  // Render the default search components
   return (
     <div>
-      <Dialog
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (!open) setSearchedInput("");
-          setIsOpen(open);
-        }}
-      >
-        <DialogTrigger asChild>
-          <div className="relative flex-1 cursor-pointer max-w-[140px]">
-            <div className="flex items-center">
-              <div className="md:hidden p-2 -ml-2">
-                <SearchIcon className="h-5 w-5 text-muted-foreground" />
-              </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" />
-                <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"
-                  placeholder="Search"
-                  type="search"
-                />
-                <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" />
-                  <span>K</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </DialogTrigger>
-        <DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
-          <DialogHeader>
-            <DialogTitle className="sr-only">Search Documentation</DialogTitle>
-          </DialogHeader>
-            <DialogDescription className="sr-only">
-              Search through the documentation
-            </DialogDescription>
-            <input
-              value={searchedInput}
-              onChange={(e) => setSearchedInput(e.target.value)}
-              placeholder="Type something to search..."
-              autoFocus
-              className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
-              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>
-            </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">
-              {filteredResults.map((item, index) => {
-                const level = (item.href.split("/").slice(1).length - 1) as keyof typeof paddingMap;
-                const paddingClass = paddingMap[level];
-                const isActive = index === selectedIndex;
-
-                return (
-                    <DialogClose key={item.href} asChild>
-                        <Anchor
-                        ref={(el) => {
-                            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",
-                            isActive && "bg-primary/20 dark:bg-primary/30",
-                            paddingClass
-                        )}
-                        href={`/docs${item.href}`}
-                        tabIndex={0}
-                        >
-                        <div
-                            className={cn(
-                            "flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
-                            level > 1 && "border-l pl-4"
-                            )}
-                        >
-                            <div className="flex items-center">
-                              <FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
-                              <span>{item.title}</span>
-                            </div>
-                            {isActive && (
-                              <div className="hidden md:flex items-center text-xs text-muted-foreground">
-                                <span>Return</span>
-                                <CornerDownLeftIcon className="h-3 w-3 ml-1" />
-                              </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">
-            <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>
-              <span className="dark:bg-accent/15 bg-slate-200 border rounded p-2">
-                <ArrowDownIcon className="w-3 h-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>
-              <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>
-              <p className="text-muted-foreground">to close</p>
-            </div>
-          </DialogFooter>
-        </DialogContent>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <SearchTrigger />
+        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
       </Dialog>
     </div>
   );
-}
-
-const paddingMap = {
-  1: "pl-2",
-  2: "pl-4",
-  3: "pl-10",
-} as const;
+}

package/src/dist/contents/docs/changelog/version-1/index.mdx

@@ -8,6 +8,22 @@ date: 02-08-2025
   This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
 </Note>
 
+<div className="sr-only">
+### v 1.14.2
+</div>
+
+<Release version="1.14.2" date="2025-08-05" title="Refactor & Fix: Decouple Search Component and Resolve Type Errors">
+  <Changes type="added">
+    - Refactor Search component into three distinct components: Search, SearchTrigger, and SearchModal for better maintainability and scalability.
+    - New SearchTrigger components
+    - New SearchModal components
+  </Changes>
+  <Changes type="fixed">
+    - Resolve TypeScript error for missing 'noLink' property on the 'Page' type after refactoring.
+    - Fix TypeScript error for missing 'context' property by providing a complete inline type annotation in the SearchModal component.
+  </Changes>
+</Release>
+
 <div className="sr-only">
 ### v 1.14.0
 </div>

package/src/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

package/src/installer/projectInstaller.js

@@ -9,117 +9,104 @@ import { configurePackageManager } from "../utils/packageManager.js";
 import { displayManualSteps, simulateInstallation, displayNextSteps } from "../utils/display.js";
 
 /**
- * Creates a new DocuBook project
- * @param {Object} options - Installation options
- * @param {string} options.directoryName - Project directory name
- * @param {string} options.packageManager - Package manager to use
- * @param {string} options.version - Package manager version
- * @param {boolean} options.installNow - Whether to install dependencies immediately
- * @returns {Promise<void>}
+ * Creates a new DocuBook project.
+ * @param {Object} options - Installation options.
  */
-export async function createProject({ directoryName, packageManager, version, installNow }) {
+export async function createProject({ directoryName, packageManager, pmVersion, docubookVersion, installNow }) {
   const projectPath = path.resolve(process.cwd(), directoryName);
-  const spinner = ora("Creating your DocuBook project...").start();
+
+  if (fs.existsSync(projectPath)) {
+    throw new Error(`Directory "${directoryName}" already exists.`);
+  }
+
+  log.info(`Creating a new DocuBook project in ${chalk.green(projectPath)}...`);
+
+  const spinner = ora("Creating project files...").start();
 
   try {
-    // Get the template directory path
+    // 1. Create project directory and copy template files
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
     const templatePath = path.join(__dirname, "../dist");
-
-    // Create project directory if it doesn't exist
-    if (!fs.existsSync(projectPath)) {
-      fs.mkdirSync(projectPath, { recursive: true });
-    }
-
-    // Copy template files to project directory
     copyDirectoryRecursive(templatePath, projectPath);
 
-    // Configure package manager specific settings
+    // 2. Configure package manager specific settings
+    spinner.text = "Configuring package manager...";
     configurePackageManager(packageManager, projectPath);
 
-    // Update package.json with package manager info
+    // 3. Update package.json
+    spinner.text = "Updating package.json...";
     const pkgPath = path.join(projectPath, "package.json");
-    let pkgVersion = "";
     if (fs.existsSync(pkgPath)) {
       const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
-      pkg.packageManager = `${packageManager}@${version}`;
-      pkgVersion = pkg.version || "";
+      pkg.name = directoryName; // Set project name
+      // Use the package manager version here
+      pkg.packageManager = `${packageManager}@${pmVersion}`;
       fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
     }
 
-    spinner.succeed();
-    log.success(`DocuBook v${pkgVersion} using "${packageManager}"`);
+    // Combine all success messages into one dynamic line
+    // Use the docubookVersion for the success message
+    spinner.succeed(
+      chalk.green(`Successfully installed DocuBook - v${docubookVersion} with ${packageManager}`)
+    );
 
-    if (!installNow) {
+    if (installNow) {
+      await installDependencies(directoryName, packageManager, projectPath);
+      await simulateInstallation();
+      displayNextSteps(directoryName, packageManager);
+    } else {
       displayManualSteps(directoryName, packageManager);
-      return;
     }
-
-    await installDependencies(directoryName, packageManager, projectPath);
   } catch (err) {
     spinner.fail("Failed to create project.");
-    log.error(err.message);
+    // Cleanup created directory on failure
+    if (fs.existsSync(projectPath)) {
+      fs.rmSync(projectPath, { recursive: true, force: true });
+    }
     throw err;
   }
 }
 
 /**
- * Recursively copies a directory
- * @param {string} source - Source directory path
- * @param {string} destination - Destination directory path
+ * Recursively copies a directory.
+ * @param {string} source - Source directory path.
+ * @param {string} destination - Destination directory path.
  */
 function copyDirectoryRecursive(source, destination) {
-  // Create destination directory if it doesn't exist
   if (!fs.existsSync(destination)) {
     fs.mkdirSync(destination, { recursive: true });
   }
 
-  // Read source directory contents
   const entries = fs.readdirSync(source, { withFileTypes: true });
-
-  // Process each entry
   for (const entry of entries) {
     const srcPath = path.join(source, entry.name);
     const destPath = path.join(destination, entry.name);
 
-    // If entry is a directory, recursively copy it
     if (entry.isDirectory()) {
       copyDirectoryRecursive(srcPath, destPath);
     } else {
-      // Otherwise, copy the file
       fs.copyFileSync(srcPath, destPath);
     }
   }
 }
 
 /**
- * Installs project dependencies
- * @param {string} directoryName - Project directory name
- * @param {string} packageManager - Package manager to use
- * @param {string} projectPath - Path to the project directory
- * @returns {Promise<void>}
+ * Installs project dependencies.
+ * @param {string} directoryName - Project directory name.
+ * @param {string} packageManager - Package manager to use.
+ * @param {string} projectPath - Path to the project directory.
  */
 async function installDependencies(directoryName, packageManager, projectPath) {
   log.info("Installing dependencies...");
-  console.log(chalk.yellow("This is a joke for you:"));
-  console.log(
-    chalk.white(
-      "You don't need to worry about this process not running, you just need the latest device for a faster installation process."
-    )
-  );
-
-  const installSpinner = ora(`Using ${packageManager}...`).start();
+  const installSpinner = ora(`Running ${chalk.green(`${packageManager} install`)}...`).start();
 
   try {
     execSync(`${packageManager} install`, { cwd: projectPath, stdio: "ignore" });
-    installSpinner.succeed("Dependencies installed.");
-
-    await simulateInstallation();
-    displayNextSteps(directoryName, packageManager);
+    installSpinner.succeed("Dependencies installed successfully.");
   } catch (error) {
     installSpinner.fail("Failed to install dependencies.");
     displayManualSteps(directoryName, packageManager);
-    throw new Error("Failed to install dependencies");
+    throw new Error("Dependency installation failed.");
   }
 }

package/src/utils/display.js

@@ -1,83 +1,84 @@
 import chalk from "chalk";
-import figlet from "figlet";
 import boxen from "boxen";
 import cliProgress from "cli-progress";
 
 /**
- * Displays ASCII art "DocuBook" when CLI is launched
- * @returns {Promise} Promise that resolves when ASCII art is displayed
+ * Displays an introduction message for the CLI.
  */
-export function displayAsciiArt() {
-  return new Promise((resolve, reject) => {
-    figlet.text("DocuBook", { horizontalLayout: "full" }, (err, data) => {
-      if (err) return reject(err);
-      console.log(chalk.green(data));
-      resolve();
-    });
-  });
+export function displayIntro() {
+  console.log(`\n${chalk.bold.green("🚀 DocuBook Installer")}\n`);
 }
 
 /**
- * Displays a progress bar to simulate final setup
- * @returns {Promise} Promise that resolves when simulation completes
+ * Displays a progress bar to simulate final setup.
+ * @returns {Promise<void>} Promise that resolves when simulation completes.
  */
 export async function simulateInstallation() {
   const bar = new cliProgress.SingleBar(
     {
-      format: 'Finishing Setup |' + chalk.green('{bar}') + '| {percentage}% || {value}/{total}',
-      barCompleteChar: '\u2588',
-      barIncompleteChar: '\u2591',
+      format: `Finishing setup... ${chalk.greenBright("{bar}")} | {percentage}%`,
+      barCompleteChar: "\u2588",
+      barIncompleteChar: "\u2591",
+      hideCursor: true,
     },
     cliProgress.Presets.shades_classic
   );
 
   bar.start(100, 0);
   for (let i = 0; i <= 100; i++) {
-    await new Promise((r) => setTimeout(r, 50));
+    await new Promise((r) => setTimeout(r, 20)); // Faster simulation
     bar.update(i);
   }
   bar.stop();
+  console.log("\n");
 }
 
 /**
- * Displays manual installation steps if automatic installation fails
- * @param {string} projectDirectory - Project directory name
- * @param {string} packageManager - Package manager being used
+ * Displays manual installation steps if automatic installation fails.
+ * @param {string} projectDirectory - Project directory name.
+ * @param {string} packageManager - Package manager being used.
  */
 export function displayManualSteps(projectDirectory, packageManager) {
-  const manualInstructions = `
-  Please follow these steps manually to finish setting up your project:
+  const steps = `
+  ${chalk.yellow("Automatic installation failed.")} Please finish setup manually:
 
-  1. ${chalk.cyan(`cd ${projectDirectory}`)}
-  2. ${chalk.cyan(`${packageManager} install`)}
-  3. ${chalk.cyan(`${packageManager} run dev`)}
+  1. ${chalk.blueBright(`cd ${projectDirectory}`)}
+  2. ${chalk.blueBright(`${packageManager} install`)}
+  3. ${chalk.blueBright(`${packageManager} run dev`)}
   `;
-
   console.log(
-    boxen(manualInstructions, {
-      padding: 0.5,
+    boxen(steps, {
+      padding: 1,
+      margin: 1,
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: "yellow",
+      title: "Manual Setup Required",
+      titleAlignment: "center",
     })
   );
 }
 
 /**
- * Displays next steps after successful installation
- * @param {string} directoryName - Project directory name
- * @param {string} packageManager - Package manager being used
+ * Displays next steps after successful installation.
+ * @param {string} directoryName - Project directory name.
+ * @param {string} packageManager - Package manager being used.
  */
 export function displayNextSteps(directoryName, packageManager) {
+  const steps = `
+  ${chalk.bold("Next steps:")}
+
+  1. ${chalk.blueBright(`cd ${directoryName}`)}
+  2. ${chalk.blueBright(`${packageManager} run dev`)}
+  `;
+
   console.log(
-    boxen(
-      `Next Steps:\n\n` +
-        `1. ${chalk.cyan(`cd ${directoryName}`)}\n` +
-        `2. ${chalk.cyan(`${packageManager} run dev`)}`,
-      {
-        padding: 0.5,
-        borderStyle: "round",
-        borderColor: "cyan",
-      }
-    )
+    boxen(steps, {
+      padding: 1,
+      margin: 1,
+      borderStyle: "round",
+      borderColor: "green",
+      title: "Success!",
+      titleAlignment: "center",
+    })
   );
-}
+}

package/src/utils/logger.js

@@ -1,11 +1,10 @@
 import chalk from "chalk";
 
-// Logging helper with styles
 const log = {
-  info: (msg) => console.log(chalk.cyan("! " + msg)),
-  success: (msg) => console.log(chalk.green("✔ " + msg)),
-  warn: (msg) => console.log(chalk.yellow("⚠️  " + msg)),
-  error: (msg) => console.log(chalk.red("x " + msg)),
+  info: (msg) => console.log(`${chalk.blue("ℹ")} ${msg}`),
+  success: (msg) => console.log(`${chalk.green("✔")} ${msg}`),
+  warn: (msg) => console.log(`${chalk.yellow("⚠")} ${msg}`),
+  error: (msg) => console.log(`\n${chalk.red("✖")} ${chalk.bold(msg)}\n`),
 };
 
-export default log;
+export default log;

package/src/utils/packageManager.js

@@ -51,4 +51,4 @@ export function configurePackageManager(packageManager, projectPath) {
     const yarnrcPath = path.join(projectPath, ".yarnrc.yml");
     fs.writeFileSync(yarnrcPath, "nodeLinker: node-modules\n");
   }
-}
+}