feat: multiple hook args

Author: Pyr33x

apps/docs/app/api/hooks/[title]/route.ts

@@ -1,14 +1,8 @@
 import { NextResponse } from "next/server";
+import type { Hook } from "utils";
 import path from "path";
 import fs from "fs";
 
-type Hook = Readonly<{
-  id: number;
-  title: string;
-  description: string;
-  content: string;
-}>;
-
 const filePath = path.join(process.cwd(), "app", "hooks.json");
 
 async function loadData(): Promise<Hook[]> {

apps/docs/app/api/hooks/route.ts

@@ -1,16 +1,10 @@
 import { NextResponse } from "next/server";
+import type { Hook } from "utils";
 import path from "path";
 import fs from "fs";
 
 export const dynamic = "force-dynamic";
 
-type Hook = Readonly<{
-  id: number;
-  title: string;
-  description: string;
-  content: string;
-}>;
-
 const filePath = path.join(process.cwd(), "app", "hooks.json");
 
 async function loadData(): Promise<Hook[]> {

apps/docs/components/internal/hero.tsx

@@ -17,7 +17,7 @@ export function Hero() {
           className="group relative flex h-10 items-center gap-2 rounded-full bg-gradient-to-b from-green-900/50 to-green-700 px-6 text-lg font-medium text-green-300 transition-colors hover:text-green-200 dark:from-green-700/50 dark:to-gray-900 dark:text-green-300 dark:hover:text-green-200"
         >
           <span className="relative z-10 flex items-center gap-2">
-            Rehooks v3 is out{" "}
+            Rehooks v4 is out{" "}
             <ArrowUpRight className="transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
           </span>
           <div className="absolute inset-0 rounded-full bg-gradient-to-r from-green-500 to-green-600 opacity-0 blur transition-opacity group-hover:opacity-20 dark:from-green-400 dark:to-green-500" />

apps/docs/content/docs/guide.mdx

@@ -48,6 +48,12 @@ This command will ask you to select the hooks you want to add. You can select mu
 npx rehooks-cli [options] [command]
 ```
 
+> Arguments are optional. You may want to leave args empty, so by running `npx rehooks-cli add` you'll access to the list of hooks.
+
+```bash title="Terminal"
+npx rehooks-cli add useFocus useFetch useWindowSize
+```
+
 ## Options
 
 These are the options available in the CLI.
@@ -62,7 +68,7 @@ These are the options available in the CLI.
 | Command                 | Description                          |
 | ----------------------- | ------------------------------------ |
 | `init [options] [path]` | Initialize the Rehooks configuration |
-| `add [options]`         | Add custom hooks to your project     |
+| `add [options] [hooks]` | Add custom hooks to your project     |
 | `help [command]`        | Displays help for a specific command |
 
 ### Init

apps/docs/content/docs/index.mdx

@@ -3,7 +3,7 @@ title: Introduction
 description: Reusable, SOLID, and maintainable React hooks that you insert directly into your project.
 ---
 
-# What is Rehooks?
+# TL;DR
 
 Rehooks is a CLI that allows you to insert hooks directly to your project. It provides a wide range of hooks for common use cases, By using Rehooks CLI you can reduce the amount of code you need to write and focus on the core functionality of your application.
 
@@ -20,7 +20,7 @@ By using the Rehooks CLI you will able to reduce the amount of unused and duplic
 # Key Features
 
 - 🔥 Lightweight and performant: Rehooks is written in TypeScript and bundled with `tsup` for maximum performance and compatibility.
-- 📦 Modular and tree-shakable: Rehooks is designed to be modular and tree-shakable, allowing you to only include the hooks you need in your application.
+- 📦 Tree-shakable: Rehooks is tree-shakable, allowing you to use only the hooks you need.
 - 🪄 Maintainable and extensible: The internal hooks are designed to be maintainable and reusable to make it easy to use based on your needs.
 - 📝 Well-documented: Rehooks comes with detailed documentation and examples, making it easy to understand and use.
 - 💪 Tested and maintained: Rehooks has a comprehensive test suite and is actively maintained by the community.

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehooks-cli",
-  "version": "3.8.2",
+  "version": "4.0.0",
   "description": "A CLI to insert hooks directly to your project.",
   "publishConfig": {
     "access": "public"

packages/cli/src/commands/add.ts

@@ -11,8 +11,9 @@ import fs from "fs";
 export const add = new Command()
   .name("add")
   .description("Add hooks to your project")
+  .argument("[hooks...]", "Specify one or more hook names to add")
   .option("-f, --force", "Force overwrite existing hook files without prompt")
-  .action(async (options) => {
+  .action(async (hooks, options) => {
     const config = await getConfig(process.cwd());
 
     if (!config) {
@@ -24,17 +25,61 @@ export const add = new Command()
     const shouldForceOverwrite = options.force || forceOverwrite;
 
     try {
+      if (hooks.length > 0) {
+        for (const hook of hooks) {
+          const hookFilePath = path.join(directory, `${hook}.ts`);
+
+          if (fs.existsSync(hookFilePath) && !shouldForceOverwrite) {
+            const { overwrite } = await inquirer.prompt([
+              {
+                type: "confirm",
+                name: "overwrite",
+                message: bold(
+                  red(
+                    `${hook}.ts already exists. Do you want to overwrite it?`,
+                  ),
+                ),
+                default: false,
+              },
+            ]);
+
+            if (!overwrite) {
+              logger.info(cyan(`Skipping ${hook}.ts.`));
+              continue;
+            }
+          }
+
+          const spinner = ora(cyan(`Adding ${hook}...`)).start();
+          const selectedHookResponse = await axios.get(
+            `https://rehooks.pyr33x.ir/api/hooks/${hook}`,
+          );
+          let { content } = selectedHookResponse.data;
+          fs.writeFileSync(hookFilePath, content);
+          spinner.succeed(
+            green(`Created ${bold(hook)} hook at ${bold(hookFilePath)}.`),
+          );
+        }
+        return;
+      }
+
       const fetchSpinner = ora(cyan("Fetching hooks...")).start();
       const response = await axios.get("https://rehooks.pyr33x.ir/api/hooks");
-      const hooks = response.data;
+      const hooksData = response.data;
       fetchSpinner.succeed(green("Done."));
 
       const { selectedHooks } = await inquirer.prompt([
         {
           type: "checkbox",
           name: "selectedHooks",
-          message: bold("Select hooks to add:"),
-          choices: hooks.map((h: { title: string }) => h.title),
+          message: bold("Pick hooks to add:"),
+          choices: hooksData.map((h: { title: string }) => h.title),
+          required: true,
+          theme: {
+            icon: {
+              checked: green("✔"),
+              cursor: "",
+            },
+          },
         },
       ]);
 

packages/cli/src/index.ts

@@ -11,7 +11,7 @@ async function main() {
     .name("rehooks")
     .description("A CLI to insert hooks directly to your project.")
     .version(
-      packageInfo.version || "3.8.2",
+      packageInfo.version || "4.0.0",
       "-v, --version",
       "Displays the version number",
     );

packages/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./functions";
 export * from "./constants";
+export * from "./types";

packages/utils/src/types/index.ts

@@ -0,0 +1,6 @@
+export type Hook = Readonly<{
+  id: number;
+  title: string;
+  description: string;
+  content: string;
+}>;