pejay-ui 1.3.3 → 1.3.5

package/README.md

@@ -1,165 +1,115 @@
-# pejay-ui CLI Commands
+# pejay-ui
 
 A lightweight CLI tool to initialize, add, and remove React UI components in your projects.
 
-## Commands
+## Core Commands
 
 ### 1. Initialize Configuration
-Initialize the configuration file `pejay-ui.json` in the root of your project.
 ```bash
 npx pejay-ui init
 ```
 
 ### 2. Add Component
-Download and install a component, automatically setting up its utilities (like `cn`) and resolving component-to-component dependencies.
 ```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";
 ```
-*Example:* `npx pejay-ui add button` or `npx pejay-ui add form/date-picker`
 
 ### 3. Remove Component
-Safely delete a component's files, and clean up any unused utilities or package dependencies that were installed with it.
 ```bash
 npx pejay-ui remove <component-name>
 ```
-*Example:* `npx pejay-ui remove button`
 
----
+### 4. Check Components Status
+```bash
+npx pejay-ui status
+```
 
-## Available Components
+Lists all available components categorized, showing their local installation status:
+- Installed components are marked with a green `[✔]`.
+- Uninstalled components are marked with `[ ]`.
 
-Below is the list of components you can add. Each has a copyable command block with a working native copy button on GitHub and NPM:
+---
 
-### Buttons
+## Available Components & Scaffolds
 
-* **`button`**: Premium interactive button supporting multiple variants (solid, soft, ghost), loaders, and custom hover tooltips.
-  ```bash
-  npx pejay-ui add button
-  ```
+### Buttons
+```bash
+npx pejay-ui add button
+```
 
 ### Form Inputs
-
-* **`form/input`**: Standard text input field with validation, labels, and error messaging.
-  ```bash
-  npx pejay-ui add form/input
-  ```
-* **`form/amount-input`**: Numeric input configured for currency entry with symbol prefixes and formatting.
-  ```bash
-  npx pejay-ui add form/amount-input
-  ```
-* **`form/checkbox`**: Styled single checkbox input.
-  ```bash
-  npx pejay-ui add form/checkbox
-  ```
-* **`form/checkbox-group`**: Group of checkboxes managing single or multiple selection states with item indices.
-  ```bash
-  npx pejay-ui add form/checkbox-group
-  ```
-* **`form/email-input`**: Dedicated input for email addresses with prefix icon.
-  ```bash
-  npx pejay-ui add form/email-input
-  ```
-* **`form/file-input`**: Premium dropzone-style file upload component supporting drag-and-drop and progress/preview states.
-  ```bash
-  npx pejay-ui add form/file-input
-  ```
-* **`form/number-input`**: Input field for numerical values with increment/decrement steppers.
-  ```bash
-  npx pejay-ui add form/number-input
-  ```
-* **`form/password-input`**: Secure text input with eye icon toggle to show/hide the password.
-  ```bash
-  npx pejay-ui add form/password-input
-  ```
-* **`form/phone-input`**: Formatted input field for telephone numbers.
-  ```bash
-  npx pejay-ui add form/phone-input
-  ```
-* **`form/radio`**: Styled radio selection dot.
-  ```bash
-  npx pejay-ui add form/radio
-  ```
-* **`form/radio-group`**: Group of mutually exclusive radio options.
-  ```bash
-  npx pejay-ui add form/radio-group
-  ```
-* **`form/range-slider`**: Slider controls for choosing values from a numeric range.
-  ```bash
-  npx pejay-ui add form/range-slider
-  ```
-* **`form/switch`**: Styled toggle switch representing boolean options.
-  ```bash
-  npx pejay-ui add form/switch
-  ```
-* **`form/textarea`**: Multiline text area input with character counter/limit indicators.
-  ```bash
-  npx pejay-ui add form/textarea
-  ```
-* **`form/url-input`**: Styled input field specifically formatted for web addresses/links.
-  ```bash
-  npx pejay-ui add form/url-input
-  ```
+```bash
+npx pejay-ui add form/input
+npx pejay-ui add form/amount-input
+npx pejay-ui add form/checkbox
+npx pejay-ui add form/checkbox-group
+npx pejay-ui add form/email-input
+npx pejay-ui add form/file-input
+npx pejay-ui add form/number-input
+npx pejay-ui add form/password-input
+npx pejay-ui add form/phone-input
+npx pejay-ui add form/radio
+npx pejay-ui add form/radio-group
+npx pejay-ui add form/range-slider
+npx pejay-ui add form/switch
+npx pejay-ui add form/textarea
+npx pejay-ui add form/url-input
+```
 
 ### Date & Time Pickers
-
-* **`form/date-picker`**: Calendar-based date selector popover with inline month/year dropdowns.
-  ```bash
-  npx pejay-ui add form/date-picker
-  ```
-* **`form/date-range-picker`**: Date range selector to pick start and end dates with highlight ranges.
-  ```bash
-  npx pejay-ui add form/date-range-picker
-  ```
-* **`form/time-picker`**: Dropdown component for picking specific hours, minutes, and AM/PM.
-  ```bash
-  npx pejay-ui add form/time-picker
-  ```
-* **`form/time-range-picker`**: Popover time selector for configuring custom duration intervals.
-  ```bash
-  npx pejay-ui add form/time-range-picker
-  ```
+```bash
+npx pejay-ui add form/date-picker
+npx pejay-ui add form/date-range-picker
+npx pejay-ui add form/time-picker
+npx pejay-ui add form/time-range-picker
+```
 
 ### Dropdowns & Selects
-
-* **`dropdown/select-input`**: Elegant single-select searchable dropdown input.
-  ```bash
-  npx pejay-ui add dropdown/select-input
-  ```
-* **`dropdown/multiselect-input`**: Searchable multiselect dropdown which renders selected options as dismissible tag pills.
-  ```bash
-  npx pejay-ui add dropdown/multiselect-input
-  ```
+```bash
+npx pejay-ui add dropdown/select-input
+npx pejay-ui add dropdown/multiselect-input
+```
 
 ### Layouts
-
-* **`layouts/lv1`**: A responsive, collapsible sidebar-based application layout.
-  ```bash
-  npx pejay-ui add layouts/lv1
-  ```
+```bash
+npx pejay-ui add layouts/lv1
+```
 
 ### Scaffolds & Templates
-
-* **`tanstack-query-client`**: Bare-bone TanStack Query client and context provider setup, copied directly into your project's `src/tanstack-query/`.
-  ```bash
-  npx pejay-ui add tanstack-query-client
-  ```
-* **`react-router-client`**: Bare-bone React Router client layout, routing structure, and route guard setup, copied into `src/react-router/`.
-  ```bash
-  npx pejay-ui add react-router-client
-  ```
-* **`tanstack-router-client`**: TanStack Router setup with layouts, route guards, and file-based route stubs, copied into `src/tanstack-router/`.
-  ```bash
-  npx pejay-ui add tanstack-router-client
-  ```
-* **`axios-client`**: Axios instance with interceptors, request helpers, and a sample API module, copied into `src/axios/`.
-  ```bash
-  npx pejay-ui add axios-client
-  ```
-* **`redux-store-client`**: Redux Toolkit store setup with `redux-persist`, reducers, slices, and selectors, copied into `src/redux-store/`.
-  ```bash
-  npx pejay-ui add redux-store-client
-  ```
-* **`rtk-query-client`**: RTK Query base API with `fetchBaseQuery`, tag management, middleware, and a sample endpoint, copied into `src/rtk-query/`.
-  ```bash
-  npx pejay-ui add rtk-query-client
-  ```
+```bash
+npx pejay-ui add tanstack-query-client
+npx pejay-ui add react-router-client
+npx pejay-ui add tanstack-router-client
+npx pejay-ui add axios-client
+npx pejay-ui add redux-store-client
+npx pejay-ui add rtk-query-client
+```

package/bin/cli.js

@@ -74,7 +74,9 @@ program
 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");
@@ -95,6 +97,46 @@ program
       const registry = await fs.readJSON(registryPath);
       const isTsProject = await fs.pathExists(path.join(cwd, "tsconfig.json"));
 
+      // Determine which components to install
+      let selectedComponents = [];
+
+      // Check if it's a category
+      const categoryComponents = Object.keys(registry).filter(
+        (key) => registry[key].category === component
+      );
+
+      if (categoryComponents.length > 0) {
+        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 "${component}" 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, treat as a single component key
+        if (!registry[component]) {
+          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 = [];
       const visited = new Set();
@@ -106,7 +148,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 +161,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 +336,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] = {
@@ -358,6 +451,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 +612,86 @@ 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 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);
+
+      // 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.3",
+  "version": "1.3.5",
   "type": "module",
   "description": "react ui components",
   "bin": {

package/registry.json

@@ -46,7 +46,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": ["select-dropdown/select-input"]
+    "dependencies": ["dropdown/select-input"]
   },
   "form/date-range-picker": {
     "name": "DateRangePicker",
@@ -59,7 +59,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": ["select-dropdown/select-input"]
+    "dependencies": ["dropdown/select-input"]
   },
   "form/email-input": {
     "name": "EmailInput",
@@ -143,7 +143,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": ["select-dropdown/select-input"]
+    "dependencies": ["dropdown/select-input"]
   },
   "form/time-range-picker": {
     "name": "TimeRangePicker",
@@ -156,7 +156,7 @@
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": ["select-dropdown/select-input"]
+    "dependencies": ["dropdown/select-input"]
   },
   "form/url-input": {
     "name": "UrlInput",