pejay-ui 1.0.4 → 1.2.0

package/README.md

@@ -129,3 +129,15 @@ Below is the list of components you can add. Each has a copyable command block w
   ```bash
   npx pejay-ui add dropdown/multiselect-input
   ```
+
+### 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.
+  ```bash
+  npx pejay-ui add react-router-client
+  ```
+

package/bin/cli.js

@@ -21,6 +21,23 @@ const prompt = async (questions) => {
   return inquirer.default.prompt(questions);
 };
 
+// Helper to get all files recursively from a directory
+const getFilesRecursively = async (dir) => {
+  let results = [];
+  const list = await fs.readdir(dir);
+  for (const file of list) {
+    const filePath = path.join(dir, file);
+    const stat = await fs.stat(filePath);
+    if (stat && stat.isDirectory()) {
+      const subFiles = await getFilesRecursively(filePath);
+      results = results.concat(subFiles);
+    } else {
+      results.push(filePath);
+    }
+  }
+  return results;
+};
+
 program
   .name("pejay-ui")
   .description("CLI to initialize, add, and remove React UI components")
@@ -178,7 +195,12 @@ program
         }
 
         // 3. Process & Copy Component Files
-        const targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
+        let targetDir;
+        if (componentData.category === "tanstack-query") {
+          targetDir = path.join(cwd, "src", "tanstack-query");
+        } else {
+          targetDir = path.join(cwd, config.baseDir, "components", componentData.category);
+        }
         const outputExt = isTsProject ? "tsx" : "jsx";
 
         // Determine list of files to copy
@@ -192,29 +214,70 @@ program
             process.exit(1);
           }
 
-          const filename = path.basename(srcFilePath).replace(/\.(tsx|ts)$/, (match) => {
-            return match === ".tsx" ? `.${outputExt}` : `.${isTsProject ? "ts" : "js"}`;
-          });
-          const targetFile = path.join(targetDir, filename);
-
-          let componentCode = await fs.readFile(templateSrc, "utf-8");
+          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);
+
+              let componentCode = await fs.readFile(file, "utf-8");
+
+              const fileDir = path.dirname(targetFile);
+              const relativeToUtils = path.relative(fileDir, targetUtilsDir).replace(/\\/g, "/");
+              const cnImportPath = isTsProject 
+                ? `${relativeToUtils}/cn` 
+                : `${relativeToUtils}/cn.js`;
+              componentCode = componentCode.replace(/@\/utils\/cn/g, cnImportPath);
 
-          // Replace `@/utils/cn` with relative path to the local utils/cn folder
-          const cnImportPath = isTsProject ? "../../utils/cn" : "../../utils/cn.js";
-          componentCode = componentCode.replace(/@\/utils\/cn/g, cnImportPath);
+              if (!isTsProject) {
+                const transformed = babel.transformSync(componentCode, {
+                  presets: ["@babel/preset-typescript"],
+                  filename: path.basename(file),
+                });
+                componentCode = transformed?.code || componentCode;
+              }
 
-          if (!isTsProject) {
-            const transformed = babel.transformSync(componentCode, {
-              presets: ["@babel/preset-typescript"],
-              filename: path.basename(srcFilePath),
+              await fs.ensureDir(path.dirname(targetFile));
+              await fs.writeFile(targetFile, componentCode, "utf-8");
+              
+              const relativeTargetFile = path.relative(cwd, targetFile).replace(/\\/g, "/");
+              console.log(`✅ Created ${relativeTargetFile}`);
+              installedFiles.push(path.relative(path.join(cwd, config.baseDir), targetFile).replace(/\\/g, "/"));
+            }
+          } else {
+            const filename = path.basename(srcFilePath).replace(/\.(tsx|ts)$/, (match) => {
+              return match === ".tsx" ? `.${outputExt}` : `.${isTsProject ? "ts" : "js"}`;
             });
-            componentCode = transformed?.code || componentCode;
-          }
+            const targetFile = path.join(targetDir, filename);
+
+            let componentCode = await fs.readFile(templateSrc, "utf-8");
+
+            const fileDir = path.dirname(targetFile);
+            const relativeToUtils = path.relative(fileDir, targetUtilsDir).replace(/\\/g, "/");
+            const cnImportPath = isTsProject 
+              ? `${relativeToUtils}/cn` 
+              : `${relativeToUtils}/cn.js`;
+            componentCode = componentCode.replace(/@\/utils\/cn/g, cnImportPath);
+
+            if (!isTsProject) {
+              const transformed = babel.transformSync(componentCode, {
+                presets: ["@babel/preset-typescript"],
+                filename: path.basename(srcFilePath),
+              });
+              componentCode = transformed?.code || componentCode;
+            }
 
-          await fs.ensureDir(targetDir);
-          await fs.writeFile(targetFile, componentCode, "utf-8");
-          console.log(`✅ Created components/${componentData.category}/${filename}`);
-          installedFiles.push(path.join("components", componentData.category, filename));
+            await fs.ensureDir(targetDir);
+            await fs.writeFile(targetFile, componentCode, "utf-8");
+            
+            const relativeTargetFile = path.relative(cwd, targetFile).replace(/\\/g, "/");
+            console.log(`✅ Created ${relativeTargetFile}`);
+            installedFiles.push(path.relative(path.join(cwd, config.baseDir), targetFile).replace(/\\/g, "/"));
+          }
         }
 
         // 4. Update State tracking in config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pejay-ui",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "type": "module",
   "description": "react ui components",
   "bin": {
@@ -38,6 +38,7 @@
   "homepage": "https://github.com/pejaybro/pejay-ui#readme",
   "devDependencies": {
     "@floating-ui/react": "^0.27.19",
+    "@tanstack/react-query": "^5.101.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "clsx": "^2.1.1",
@@ -45,6 +46,7 @@
     "lucide-react": "^1.17.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-router-dom": "^7.16.0",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3"

package/registry.json

@@ -2,328 +2,174 @@
   "button": {
     "name": "Button",
     "category": "button",
-    "files": [
-      "templates/button/Button.tsx",
-      "templates/button/tooltip.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ]
+    "files": ["templates/button/Button.tsx", "templates/button/tooltip.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
   },
   "form/input": {
     "name": "Input",
     "category": "form",
-    "files": [
-      "templates/form/input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/amount-input": {
     "name": "AmountInput",
     "category": "form",
-    "files": [
-      "templates/form/amount-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/amount-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/checkbox": {
     "name": "Checkbox",
     "category": "form",
-    "files": [
-      "templates/form/checkbox.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/checkbox.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/checkbox-group": {
     "name": "CheckboxGroup",
     "category": "form",
-    "files": [
-      "templates/form/checkbox-group.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ],
-    "dependencies": [
-      "form/checkbox"
-    ]
+    "files": ["templates/form/checkbox-group.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"],
+    "dependencies": ["form/checkbox"]
   },
   "form/date-picker": {
     "name": "DatePicker",
     "category": "form",
-    "files": [
-      "templates/form/date-picker.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/form/date-picker.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": [
-      "select-dropdown/select-input"
-    ]
+    "dependencies": ["select-dropdown/select-input"]
   },
   "form/date-range-picker": {
     "name": "DateRangePicker",
     "category": "form",
-    "files": [
-      "templates/form/date-range-picker.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/form/date-range-picker.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": [
-      "select-dropdown/select-input"
-    ]
+    "dependencies": ["select-dropdown/select-input"]
   },
   "form/email-input": {
     "name": "EmailInput",
     "category": "form",
-    "files": [
-      "templates/form/email-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/email-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/file-input": {
     "name": "FileInput",
     "category": "form",
-    "files": [
-      "templates/form/file-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/file-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/number-input": {
     "name": "NumberInput",
     "category": "form",
-    "files": [
-      "templates/form/number-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/number-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/password-input": {
     "name": "PasswordInput",
     "category": "form",
-    "files": [
-      "templates/form/password-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/password-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/phone-input": {
     "name": "PhoneInput",
     "category": "form",
-    "files": [
-      "templates/form/phone-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/phone-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "form/radio": {
     "name": "Radio",
     "category": "form",
-    "files": [
-      "templates/form/radio.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ]
+    "files": ["templates/form/radio.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
   },
   "form/radio-group": {
     "name": "RadioGroup",
     "category": "form",
-    "files": [
-      "templates/form/radio-group.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ],
-    "dependencies": [
-      "form/radio"
-    ]
+    "files": ["templates/form/radio-group.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"],
+    "dependencies": ["form/radio"]
   },
   "form/range-slider": {
     "name": "RangeSlider",
     "category": "form",
-    "files": [
-      "templates/form/range-slider.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ]
+    "files": ["templates/form/range-slider.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
   },
   "form/switch": {
     "name": "Switch",
     "category": "form",
-    "files": [
-      "templates/form/switch.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ]
+    "files": ["templates/form/switch.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
   },
   "form/textarea": {
     "name": "Textarea",
     "category": "form",
-    "files": [
-      "templates/form/textarea.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge"
-    ]
+    "files": ["templates/form/textarea.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge"]
   },
   "form/time-picker": {
     "name": "TimePicker",
     "category": "form",
-    "files": [
-      "templates/form/time-picker.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/form/time-picker.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": [
-      "select-dropdown/select-input"
-    ]
+    "dependencies": ["select-dropdown/select-input"]
   },
   "form/time-range-picker": {
     "name": "TimeRangePicker",
     "category": "form",
-    "files": [
-      "templates/form/time-range-picker.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/form/time-range-picker.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
       "lucide-react",
       "@floating-ui/react"
     ],
-    "dependencies": [
-      "select-dropdown/select-input"
-    ]
+    "dependencies": ["select-dropdown/select-input"]
   },
   "form/url-input": {
     "name": "UrlInput",
     "category": "form",
-    "files": [
-      "templates/form/url-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
-    "peerDependencies": [
-      "clsx",
-      "tailwind-merge",
-      "lucide-react"
-    ]
+    "files": ["templates/form/url-input.tsx"],
+    "utils": ["cn.ts"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
   },
   "dropdown/select-input": {
     "name": "SelectInput",
     "category": "select-dropdown",
-    "files": [
-      "templates/select-dropdown/select-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/select-dropdown/select-input.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
@@ -334,17 +180,25 @@
   "dropdown/multiselect-input": {
     "name": "MultiselectInput",
     "category": "select-dropdown",
-    "files": [
-      "templates/select-dropdown/multiselect-input.tsx"
-    ],
-    "utils": [
-      "cn.ts"
-    ],
+    "files": ["templates/select-dropdown/multiselect-input.tsx"],
+    "utils": ["cn.ts"],
     "peerDependencies": [
       "clsx",
       "tailwind-merge",
       "lucide-react",
       "@floating-ui/react"
     ]
+  },
+  "tanstack-query-client": {
+    "name": "TanstackQueryClient",
+    "category": "tanstack-query",
+    "files": ["templates/scaffolds/tanstack-query"],
+    "peerDependencies": ["@tanstack/react-query"]
+  },
+   "react-router-client": {
+    "name": "ReactRouterClient",
+    "category": "react-router",
+    "files": ["templates/scaffolds/react-router"],
+    "peerDependencies": ["react-router-dom"]
   }
 }