pejay-ui 1.3.5 → 1.4.0

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);
@@ -419,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) {
@@ -636,13 +672,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.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
+  }
+}

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
+  }
+}

package/registry/scaffolds.json

@@ -0,0 +1,83 @@
+{
+  "tanstack-query-client": {
+    "name": "TanstackQueryClient",
+    "category": "scaffold",
+    "subcategory": "tanstack-query",
+    "targetDirName": "tanstack-query",
+    "files": [
+      "templates/scaffolds/tanstack-query"
+    ],
+    "peerDependencies": [
+      "@tanstack/react-query"
+    ],
+    "supportsCategory": true
+  },
+  "react-router-client": {
+    "name": "ReactRouterClient",
+    "category": "scaffold",
+    "subcategory": "react-router",
+    "targetDirName": "react-router",
+    "files": [
+      "templates/scaffolds/react-router"
+    ],
+    "peerDependencies": [
+      "react-router-dom"
+    ],
+    "supportsCategory": true
+  },
+  "tanstack-router-client": {
+    "name": "TanstackRouterClient",
+    "category": "scaffold",
+    "subcategory": "tanstack-router",
+    "targetDirName": "tanstack-router",
+    "files": [
+      "templates/scaffolds/tanstack-router"
+    ],
+    "peerDependencies": [
+      "@tanstack/react-router"
+    ],
+    "supportsCategory": true
+  },
+  "axios-client": {
+    "name": "AxiosClient",
+    "category": "scaffold",
+    "subcategory": "axios",
+    "targetDirName": "axios",
+    "files": [
+      "templates/scaffolds/axios"
+    ],
+    "peerDependencies": [
+      "axios"
+    ],
+    "supportsCategory": true
+  },
+  "redux-store-client": {
+    "name": "ReduxStoreClient",
+    "category": "scaffold",
+    "subcategory": "redux-store",
+    "targetDirName": "redux-store",
+    "files": [
+      "templates/scaffolds/redux-store"
+    ],
+    "peerDependencies": [
+      "@reduxjs/toolkit",
+      "react-redux",
+      "redux-persist"
+    ],
+    "supportsCategory": true
+  },
+  "rtk-query-client": {
+    "name": "RtkQueryClient",
+    "category": "scaffold",
+    "subcategory": "rtk-query",
+    "targetDirName": "rtk-query",
+    "files": [
+      "templates/scaffolds/rtk-query"
+    ],
+    "peerDependencies": [
+      "@reduxjs/toolkit",
+      "react-redux"
+    ],
+    "supportsCategory": true
+  }
+}