pejay-ui 1.3.5 → 1.4.1

package/README.md

@@ -43,6 +43,9 @@ This allows you to easily import multiple components:
 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>
@@ -84,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
@@ -92,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
@@ -113,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,7 +93,7 @@ program
 
 /* =============================
    ADD COMMAND
-============================= */
+ ============================= */
 program
   .command("add <component>")
   .description("Add a component to your project")
@@ -87,25 +110,45 @@ 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 in the package.");
-        process.exit(1);
-      }
-
-      const registry = await fs.readJSON(registryPath);
+      const registry = await loadRegistry();
       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
-      );
+      // 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 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 (categoryComponents.length > 0) {
         if (options.all) {
           selectedComponents = categoryComponents;
         } else {
@@ -114,7 +157,7 @@ program
             {
               type: "checkbox",
               name: "components",
-              message: `Select components from category "${component}" to add:`,
+              message: `Select components from category "${targetCategory}" to add:`,
               choices: categoryComponents.map((key) => ({
                 name: `${registry[key].name} (${key})`,
                 value: key,
@@ -128,8 +171,8 @@ program
           }
         }
       } else {
-        // Not a category, treat as a single component key
-        if (!registry[component]) {
+        // 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);
@@ -175,6 +218,67 @@ program
         }
 
         const componentData = registry[compToInstall];
+
+        // Check if the component is already installed or if any target files already exist
+        const outputExt = isTsProject ? "tsx" : "jsx";
+        let isAlreadyPresent = !!config.installed?.[compToInstall];
+
+        if (!isAlreadyPresent) {
+          let targetDir;
+          if (componentData.category === "scaffold") {
+            targetDir = path.join(cwd, "src", componentData.targetDirName || compToInstall);
+          } else {
+            targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
+          }
+
+          const sourceFiles = componentData.files || (componentData.path ? [componentData.path] : []);
+          for (const srcFilePath of sourceFiles) {
+            const templateSrc = path.join(packageRoot, srcFilePath);
+            if (await fs.pathExists(templateSrc)) {
+              const isDir = (await fs.stat(templateSrc)).isDirectory();
+              if (isDir) {
+                const allFiles = await getFilesRecursively(templateSrc);
+                for (const file of allFiles) {
+                  const relativePath = path.relative(templateSrc, file);
+                  const filename = relativePath.replace(/\.(tsx|ts)$/, (match) => {
+                    return match === ".tsx" ? `.${outputExt}` : `.${isTsProject ? "ts" : "js"}`;
+                  });
+                  const targetFile = path.join(targetDir, filename);
+                  if (await fs.pathExists(targetFile)) {
+                    isAlreadyPresent = true;
+                    break;
+                  }
+                }
+              } else {
+                const filename = path.basename(srcFilePath).replace(/\.(tsx|ts)$/, (match) => {
+                  return match === ".tsx" ? `.${outputExt}` : `.${isTsProject ? "ts" : "js"}`;
+                });
+                const targetFile = path.join(targetDir, filename);
+                if (await fs.pathExists(targetFile)) {
+                  isAlreadyPresent = true;
+                }
+              }
+            }
+            if (isAlreadyPresent) break;
+          }
+        }
+
+        if (isAlreadyPresent) {
+          const { overwrite } = await prompt([
+            {
+              type: "confirm",
+              name: "overwrite",
+              message: `Component '${compToInstall}' is already present in your project. Overwriting it will discard any local changes you have made. Do you want to proceed and overwrite it?`,
+              default: false,
+            },
+          ]);
+
+          if (!overwrite) {
+            console.log(`Skipping component: ${componentData.name}.\n`);
+            continue;
+          }
+        }
+
         console.log(`Installing component: ${componentData.name}...`);
 
         // 1. Check target project package.json for peerDependencies
@@ -257,7 +361,6 @@ program
         } else {
           targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
         }
-        const outputExt = isTsProject ? "tsx" : "jsx";
 
         // Determine list of files to copy
         const sourceFiles = componentData.files || (componentData.path ? [componentData.path] : []);
@@ -419,14 +522,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) {
@@ -636,13 +732,7 @@ program
         }
       }
 
-      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();
 
       // Terminal styling colors
       const GREEN = "\x1b[32m";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pejay-ui",
-  "version": "1.3.5",
+  "version": "1.4.1",
   "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
+  }
+}

package/registry/forms.json

@@ -0,0 +1,322 @@
+{
+  "form/input": {
+    "name": "Input",
+    "category": "form",
+    "files": [
+      "templates/form/input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/amount-input": {
+    "name": "AmountInput",
+    "category": "form",
+    "files": [
+      "templates/form/amount-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/checkbox": {
+    "name": "Checkbox",
+    "category": "form",
+    "files": [
+      "templates/form/checkbox.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/checkbox-group": {
+    "name": "CheckboxGroup",
+    "category": "form",
+    "files": [
+      "templates/form/checkbox-group.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "dependencies": [
+      "form/checkbox"
+    ],
+    "supportsCategory": true
+  },
+  "form/date-picker": {
+    "name": "DatePicker",
+    "category": "form",
+    "files": [
+      "templates/form/date-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "dropdown/select-input"
+    ],
+    "supportsCategory": true
+  },
+  "form/date-range-picker": {
+    "name": "DateRangePicker",
+    "category": "form",
+    "files": [
+      "templates/form/date-range-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "dropdown/select-input"
+    ],
+    "supportsCategory": true
+  },
+  "form/email-input": {
+    "name": "EmailInput",
+    "category": "form",
+    "files": [
+      "templates/form/email-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/file-input": {
+    "name": "FileInput",
+    "category": "form",
+    "files": [
+      "templates/form/file-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/number-input": {
+    "name": "NumberInput",
+    "category": "form",
+    "files": [
+      "templates/form/number-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/password-input": {
+    "name": "PasswordInput",
+    "category": "form",
+    "files": [
+      "templates/form/password-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/phone-input": {
+    "name": "PhoneInput",
+    "category": "form",
+    "files": [
+      "templates/form/phone-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  },
+  "form/radio": {
+    "name": "Radio",
+    "category": "form",
+    "files": [
+      "templates/form/radio.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "supportsCategory": true
+  },
+  "form/radio-group": {
+    "name": "RadioGroup",
+    "category": "form",
+    "files": [
+      "templates/form/radio-group.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "dependencies": [
+      "form/radio"
+    ],
+    "supportsCategory": true
+  },
+  "form/range-slider": {
+    "name": "RangeSlider",
+    "category": "form",
+    "files": [
+      "templates/form/range-slider.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "supportsCategory": true
+  },
+  "form/switch": {
+    "name": "Switch",
+    "category": "form",
+    "files": [
+      "templates/form/switch.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "supportsCategory": true
+  },
+  "form/textarea": {
+    "name": "Textarea",
+    "category": "form",
+    "files": [
+      "templates/form/textarea.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "supportsCategory": true
+  },
+  "form/time-picker": {
+    "name": "TimePicker",
+    "category": "form",
+    "files": [
+      "templates/form/time-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "dropdown/select-input"
+    ],
+    "supportsCategory": true
+  },
+  "form/time-range-picker": {
+    "name": "TimeRangePicker",
+    "category": "form",
+    "files": [
+      "templates/form/time-range-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "dropdown/select-input"
+    ],
+    "supportsCategory": true
+  },
+  "form/url-input": {
+    "name": "UrlInput",
+    "category": "form",
+    "files": [
+      "templates/form/url-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  }
+}

package/registry/layouts.json

@@ -0,0 +1,18 @@
+{
+  "layouts/lv1": {
+    "name": "AppLayout",
+    "category": "layouts",
+    "files": [
+      "templates/layouts/lv1/app-layout.tsx",
+      "templates/layouts/lv1/sidebar-menu.tsx",
+      "templates/layouts/lv1/index.ts"
+    ],
+    "utils": ["cn.ts"],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "supportsCategory": true
+  }
+}

package/registry/overlays.json

@@ -0,0 +1,8 @@
+{
+  "overlays/portal": {
+    "name": "Portal",
+    "category": "overlays",
+    "files": ["templates/overlays/portal.tsx"],
+    "supportsCategory": true
+  }
+}