pejay-ui 1.3.4 → 1.4.0

package/README.md

@@ -11,14 +11,55 @@ npx pejay-ui init
 
 ### 2. Add Component
 ```bash
-npx pejay-ui add <component-name>
+npx pejay-ui add <component-name-or-category> [options]
 ```
 
+**Options:**
+- `--all`: Install all components in the specified category.
+- `--select`: Interactively select which components to install from the specified category.
+
+**Examples:**
+- Install a single component directly:
+  ```bash
+  npx pejay-ui add form/input
+  ```
+- Install all components in a category (e.g., `form`):
+  ```bash
+  npx pejay-ui add form --all
+  ```
+- Select specific components to install from a category (e.g., `form`):
+  ```bash
+  npx pejay-ui add form --select
+  ```
+  *(Note: Running `npx pejay-ui add <category>` without options will default to the interactive selection prompt).*
+
+**Automatic Exports (Auto-Indexing):**
+Installing components automatically generates or updates `index.ts` (or `index.js`) files at:
+1. The category level (e.g., `src/pejay-ui/components/form/index.ts`)
+2. The global components level (`src/pejay-ui/components/index.ts`)
+
+This allows you to easily import multiple components:
+```typescript
+import { Input, Checkbox, AmountInput } from "@/pejay-ui/components";
+```
+
+**Component-Specific Documentation (READMEs):**
+Certain components (like `toast`) ship with localized `README.md` guides. When you install them, the CLI automatically copies their detailed usage documentation directly into the component's folder (e.g., `src/pejay-ui/components/toast/README.md`) so you have helper docs right next to the code.
+
 ### 3. Remove Component
 ```bash
 npx pejay-ui remove <component-name>
 ```
 
+### 4. Check Components Status
+```bash
+npx pejay-ui status
+```
+
+Lists all available components categorized, showing their local installation status:
+- Installed components are marked with a green `[✔]`.
+- Uninstalled components are marked with `[ ]`.
+
 ---
 
 ## Available Components & Scaffolds
@@ -46,6 +87,7 @@ npx pejay-ui add form/switch
 npx pejay-ui add form/textarea
 npx pejay-ui add form/url-input
 ```
+*(Supports category-wide commands: `npx pejay-ui add form --all` or `npx pejay-ui add form --select`)*
 
 ### Date & Time Pickers
 ```bash
@@ -54,17 +96,32 @@ npx pejay-ui add form/date-range-picker
 npx pejay-ui add form/time-picker
 npx pejay-ui add form/time-range-picker
 ```
+*(Supports category-wide commands: `npx pejay-ui add form --all` or `npx pejay-ui add form --select`)*
 
 ### Dropdowns & Selects
 ```bash
 npx pejay-ui add dropdown/select-input
 npx pejay-ui add dropdown/multiselect-input
 ```
+*(Supports category-wide commands: `npx pejay-ui add dropdown --all` or `npx pejay-ui add dropdown --select`)*
 
 ### Layouts
 ```bash
 npx pejay-ui add layouts/lv1
 ```
+*(Supports category-wide commands: `npx pejay-ui add layouts --all` or `npx pejay-ui add layouts --select`)*
+
+### Toast
+```bash
+npx pejay-ui add toast
+```
+*(Includes a localized `README.md` guide copied directly into your components folder).*
+
+### Overlays
+```bash
+npx pejay-ui add overlays/portal
+```
+*(Supports category-wide commands: `npx pejay-ui add overlays --all` or `npx pejay-ui add overlays --select`)*
 
 ### Scaffolds & Templates
 ```bash
@@ -75,3 +132,4 @@ npx pejay-ui add axios-client
 npx pejay-ui add redux-store-client
 npx pejay-ui add rtk-query-client
 ```
+*(Supports category-wide commands: `npx pejay-ui add scaffold --all` or `npx pejay-ui add scaffold --select`)*

package/bin/cli.js

@@ -38,14 +38,37 @@ const getFilesRecursively = async (dir) => {
   return results;
 };
 
+const loadRegistry = async () => {
+  const registryDir = path.join(packageRoot, "registry");
+  if (!await fs.pathExists(registryDir)) {
+    console.error(`Error: Registry directory not found at ${registryDir}`);
+    process.exit(1);
+  }
+  const files = await fs.readdir(registryDir);
+  const registry = {};
+  for (const file of files) {
+    if (file.endsWith(".json")) {
+      const filePath = path.join(registryDir, file);
+      try {
+        const data = await fs.readJSON(filePath);
+        Object.assign(registry, data);
+      } catch (e) {
+        console.error(`Error reading registry file: ${file}`, e);
+      }
+    }
+  }
+  return registry;
+};
+const pkg = await fs.readJSON(path.join(packageRoot, "package.json"));
+
 program
   .name("pejay-ui")
   .description("CLI to initialize, add, and remove React UI components")
-  .version("1.0.0");
+  .version(pkg.version);
 
 /* =============================
    INIT COMMAND
-============================= */
+ ============================= */
 program
   .command("init")
   .description("Initialize pejay-ui configuration in your project")
@@ -70,11 +93,13 @@ program
 
 /* =============================
    ADD COMMAND
-============================= */
+ ============================= */
 program
   .command("add <component>")
   .description("Add a component to your project")
-  .action(async (component) => {
+  .option("--all", "Add all components in the category")
+  .option("--select", "Select specific components from the category to add")
+  .action(async (component, options) => {
     try {
       const cwd = process.cwd();
       const configPath = path.join(cwd, "pejay-ui.json");
@@ -85,15 +110,75 @@ program
       }
 
       const config = await fs.readJSON(configPath);
-      const registryPath = path.join(packageRoot, "registry.json");
+      const registry = await loadRegistry();
+      const isTsProject = await fs.pathExists(path.join(cwd, "tsconfig.json"));
 
-      if (!await fs.pathExists(registryPath)) {
-        console.error("Error: Registry configuration not found in the package.");
-        process.exit(1);
+      // Determine which components to install
+      let selectedComponents = [];
+
+      // Determine if the input refers to a category that supports category-wide operations
+      const categorySupportMap = {};
+      for (const [key, compData] of Object.entries(registry)) {
+        if (compData.category && compData.supportsCategory) {
+          categorySupportMap[compData.category.toLowerCase()] = compData.category;
+        }
       }
 
-      const registry = await fs.readJSON(registryPath);
-      const isTsProject = await fs.pathExists(path.join(cwd, "tsconfig.json"));
+      const getCategoryFromInput = (input, supportMap) => {
+        const normInput = input.toLowerCase().trim().replace(/s$/, "");
+        for (const [normCat, originalCat] of Object.entries(supportMap)) {
+          const normCatSingular = normCat.replace(/s$/, "");
+          if (normInput === normCatSingular || (normInput === "dropdown" && normCatSingular === "select-dropdown")) {
+            return originalCat;
+          }
+        }
+        return null;
+      };
+
+      const targetCategory = getCategoryFromInput(component, categorySupportMap);
+      const isExactComponent = !!registry[component];
+
+      if (targetCategory && (!isExactComponent || options.all || options.select)) {
+        // Treat as category installation
+        const categoryComponents = Object.keys(registry).filter(
+          (key) => registry[key].category === targetCategory
+        );
+
+        if (categoryComponents.length === 0) {
+          console.error(`Error: Category '${component}' has no components in the registry.`);
+          process.exit(1);
+        }
+
+        if (options.all) {
+          selectedComponents = categoryComponents;
+        } else {
+          // Dynamic prompt using inquirer checkbox for --select or when no flag is specified for category
+          const answers = await prompt([
+            {
+              type: "checkbox",
+              name: "components",
+              message: `Select components from category "${targetCategory}" to add:`,
+              choices: categoryComponents.map((key) => ({
+                name: `${registry[key].name} (${key})`,
+                value: key,
+              })),
+            },
+          ]);
+          selectedComponents = answers.components;
+          if (selectedComponents.length === 0) {
+            console.log("No components selected. Exiting.");
+            process.exit(0);
+          }
+        }
+      } else {
+        // Not a category (or exact component targeted without category flags), treat as a single component key
+        if (!isExactComponent) {
+          console.error(`Error: Component or Category '${component}' not found in registry.`);
+          console.log(`Available categories/components: ${Array.from(new Set(Object.values(registry).map(c => c.category).filter(Boolean))).join(", ")} or ${Object.keys(registry).join(", ")}`);
+          process.exit(1);
+        }
+        selectedComponents = [component];
+      }
 
       // Track all components to install (including dependencies) in topological/order of dependencies
       const installQueue = [];
@@ -106,7 +191,6 @@ program
         const compData = registry[compName];
         if (!compData) {
           console.error(`Error: Component '${compName}' not found in registry.`);
-          console.log(`Available components: ${Object.keys(registry).join(", ")}`);
           process.exit(1);
         }
 
@@ -120,13 +204,15 @@ program
         installQueue.push(compName);
       };
 
-      resolveDependencies(component);
+      for (const comp of selectedComponents) {
+        resolveDependencies(comp);
+      }
 
       console.log("\n🚀 Starting installation...\n");
 
       for (const compToInstall of installQueue) {
-        // Skip if already marked as installed in config (unless it is the main component requested)
-        if (config.installed?.[compToInstall] && compToInstall !== component) {
+        // Skip if already marked as installed in config (unless it is one of the explicitly requested components)
+        if (config.installed?.[compToInstall] && !selectedComponents.includes(compToInstall)) {
           console.log(`Component '${compToInstall}' is already installed. Skipping dependency installation.`);
           continue;
         }
@@ -293,6 +379,56 @@ program
           }
         }
 
+        // 3.5 Automatically generate/update category-level and global index.ts/index.js files
+        if (componentData.category && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
+          const indexExt = isTsProject ? "ts" : "js";
+          const filesInDir = await fs.readdir(targetDir);
+          const exportableFiles = [];
+
+          for (const file of filesInDir) {
+            const filePath = path.join(targetDir, file);
+            const stat = await fs.stat(filePath);
+            if (stat.isFile()) {
+              const ext = path.extname(file);
+              const name = path.basename(file, ext);
+              if ((ext === ".tsx" || ext === ".ts" || ext === ".jsx" || ext === ".js") && name !== "index") {
+                exportableFiles.push(name);
+              }
+            }
+          }
+
+          if (exportableFiles.length > 0) {
+            exportableFiles.sort();
+            const indexFilePath = path.join(targetDir, `index.${indexExt}`);
+            const exportLines = exportableFiles.map(name => `export * from "./${name}";`);
+            await fs.writeFile(indexFilePath, exportLines.join("\n") + "\n", "utf-8");
+            console.log(`✅ Updated index.${indexExt} in ${path.relative(cwd, targetDir)}`);
+
+            // Also update the global components index file
+            const componentsDir = path.dirname(targetDir); // src/pejay-ui/components
+            if (await fs.pathExists(componentsDir)) {
+              const categories = await fs.readdir(componentsDir);
+              const validCategories = [];
+              for (const cat of categories) {
+                const catDir = path.join(componentsDir, cat);
+                const catStat = await fs.stat(catDir);
+                if (catStat.isDirectory()) {
+                  if (await fs.pathExists(path.join(catDir, `index.ts`)) || await fs.pathExists(path.join(catDir, `index.js`))) {
+                    validCategories.push(cat);
+                  }
+                }
+              }
+              if (validCategories.length > 0) {
+                validCategories.sort();
+                const globalIndexFile = path.join(componentsDir, `index.${indexExt}`);
+                const globalExportLines = validCategories.map(cat => `export * from "./${cat}";`);
+                await fs.writeFile(globalIndexFile, globalExportLines.join("\n") + "\n", "utf-8");
+                console.log(`✅ Updated global index.${indexExt} in ${path.relative(cwd, componentsDir)}`);
+              }
+            }
+          }
+        }
+
         // 4. Update State tracking in config
         config.installed = config.installed || {};
         config.installed[compToInstall] = {
@@ -326,14 +462,7 @@ program
       }
 
       const config = await fs.readJSON(configPath);
-      const registryPath = path.join(packageRoot, "registry.json");
-
-      if (!await fs.pathExists(registryPath)) {
-        console.error("Error: Registry configuration not found.");
-        process.exit(1);
-      }
-
-      const registry = await fs.readJSON(registryPath);
+      const registry = await loadRegistry();
       const componentData = registry[component];
 
       if (!componentData) {
@@ -358,6 +487,73 @@ program
         }
       }
 
+      // 1.5 Update index files
+      if (componentData.category && !["scaffold", "scaffolds", "script", "scripts"].includes(componentData.category.toLowerCase())) {
+        const isTsProject = await fs.pathExists(path.join(cwd, "tsconfig.json"));
+        const targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
+        const indexExt = isTsProject ? "ts" : "js";
+        
+        if (await fs.pathExists(targetDir)) {
+          const filesInDir = await fs.readdir(targetDir);
+          const exportableFiles = [];
+          
+          for (const file of filesInDir) {
+            const filePath = path.join(targetDir, file);
+            const stat = await fs.stat(filePath);
+            if (stat.isFile()) {
+              const ext = path.extname(file);
+              const name = path.basename(file, ext);
+              if ((ext === ".tsx" || ext === ".ts" || ext === ".jsx" || ext === ".js") && name !== "index") {
+                exportableFiles.push(name);
+              }
+            }
+          }
+
+          const indexFilePath = path.join(targetDir, `index.${indexExt}`);
+          if (exportableFiles.length > 0) {
+            exportableFiles.sort();
+            const exportLines = exportableFiles.map(name => `export * from "./${name}";`);
+            await fs.writeFile(indexFilePath, exportLines.join("\n") + "\n", "utf-8");
+            console.log(`✅ Updated index.${indexExt} in ${path.relative(cwd, targetDir)}`);
+          } else {
+            // No files left, delete the category index file
+            if (await fs.pathExists(indexFilePath)) {
+              await fs.remove(indexFilePath);
+              console.log(`🗑️ Removed empty index.${indexExt} in ${path.relative(cwd, targetDir)}`);
+            }
+          }
+
+          // Also update the global components index file
+          const componentsDir = path.dirname(targetDir);
+          if (await fs.pathExists(componentsDir)) {
+            const categories = await fs.readdir(componentsDir);
+            const validCategories = [];
+            for (const cat of categories) {
+              const catDir = path.join(componentsDir, cat);
+              const catStat = await fs.stat(catDir);
+              if (catStat.isDirectory()) {
+                if (await fs.pathExists(path.join(catDir, `index.ts`)) || await fs.pathExists(path.join(catDir, `index.js`))) {
+                  validCategories.push(cat);
+                }
+              }
+            }
+            const globalIndexFile = path.join(componentsDir, `index.${indexExt}`);
+            if (validCategories.length > 0) {
+              validCategories.sort();
+              const globalExportLines = validCategories.map(cat => `export * from "./${cat}";`);
+              await fs.writeFile(globalIndexFile, globalExportLines.join("\n") + "\n", "utf-8");
+              console.log(`✅ Updated global index.${indexExt} in ${path.relative(cwd, componentsDir)}`);
+            } else {
+              // No categories left with index files, remove the global index
+              if (await fs.pathExists(globalIndexFile)) {
+                await fs.remove(globalIndexFile);
+                console.log(`🗑️ Removed empty global index.${indexExt} in ${path.relative(cwd, componentsDir)}`);
+              }
+            }
+          }
+        }
+      }
+
       // 2. Build Utility Usage Map
       const utilityUsage = {};
       for (const [compName, compInfo] of Object.entries(config.installed)) {
@@ -452,4 +648,80 @@ program
     }
   });
 
+/* =============================
+   STATUS COMMAND
+============================= */
+program
+  .command("status")
+  .description("List all available components and check their installation status")
+  .action(async () => {
+    try {
+      const cwd = process.cwd();
+      const configPath = path.join(cwd, "pejay-ui.json");
+
+      let config = { installed: {} };
+      let hasConfig = true;
+
+      if (!await fs.pathExists(configPath)) {
+        hasConfig = false;
+      } else {
+        try {
+          config = await fs.readJSON(configPath);
+        } catch (e) {
+          hasConfig = false;
+        }
+      }
+
+      const registry = await loadRegistry();
+
+      // Terminal styling colors
+      const GREEN = "\x1b[32m";
+      const CYAN = "\x1b[36m";
+      const DIM = "\x1b[2m";
+      const RESET = "\x1b[0m";
+      const YELLOW = "\x1b[33m";
+
+      console.log(`\n🔍 ${CYAN}pejay-ui Components Status:${RESET}\n`);
+
+      if (!hasConfig) {
+        console.log(`${YELLOW}Note: pejay-ui.json not found. Initialize first via 'npx pejay-ui init'.${RESET}`);
+        console.log(`${YELLOW}Showing all components as uninstalled.${RESET}\n`);
+      }
+
+      // Group registry items by category
+      const categories = {};
+      for (const [key, compData] of Object.entries(registry)) {
+        const category = compData.category || "other";
+        if (!categories[category]) {
+          categories[category] = [];
+        }
+        categories[category].push({
+          key,
+          name: compData.name,
+          installed: !!config.installed?.[key]
+        });
+      }
+
+      // Print categories and components sorted alphabetically
+      const sortedCategoryNames = Object.keys(categories).sort();
+      for (const cat of sortedCategoryNames) {
+        console.log(`${CYAN}Category: ${cat}${RESET}`);
+        const comps = categories[cat];
+        comps.sort((a, b) => a.name.localeCompare(b.name));
+
+        for (const comp of comps) {
+          if (comp.installed) {
+            console.log(`  ${GREEN}[✔] ${comp.name}${RESET} ${DIM}(${comp.key})${RESET}`);
+          } else {
+            console.log(`  [ ] ${comp.name} ${DIM}(${comp.key})${RESET}`);
+          }
+        }
+        console.log(); // blank line between categories
+      }
+
+    } catch (err) {
+      console.error("\n❌ Status display failed\n", err);
+    }
+  });
+
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pejay-ui",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "type": "module",
   "description": "react ui components",
   "bin": {
@@ -10,7 +10,7 @@
     "bin/",
     "templates/",
     "utils/",
-    "registry.json"
+    "registry/"
   ],
   "keywords": [
     "react",

package/registry/buttons.json

@@ -0,0 +1,9 @@
+{
+  "button": {
+    "name": "Button",
+    "category": "button",
+    "files": ["templates/button/Button.tsx", "templates/button/tooltip.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
+  }
+}

package/registry/dropdowns.json

@@ -0,0 +1,28 @@
+{
+  "dropdown/select-input": {
+    "name": "SelectInput",
+    "category": "select-dropdown",
+    "files": ["templates/select-dropdown/select-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "supportsCategory": true
+  },
+  "dropdown/multiselect-input": {
+    "name": "MultiselectInput",
+    "category": "select-dropdown",
+    "files": ["templates/select-dropdown/multiselect-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "supportsCategory": true
+  }
+}