shadcn-nextjs-page-generator 1.0.4 → 1.0.6

package/README.md

@@ -12,11 +12,13 @@
 ✨ **Interactive CLI** - User-friendly prompts guide you through the generation process
 🏗️ **Flexible Architecture** - Choose between DDD (Domain-Driven Design) or Simplified structure
 🎨 **shadcn/ui Components** - Beautiful, accessible components built with Radix UI
+� **Auto-Install** - Automatically detects and installs missing shadcn components
 💨 **Tailwind CSS v4** - Latest Tailwind with modern CSS-first syntax
 🎭 **Framer Motion** - Smooth animations with configurable intensity
 📊 **Complete CRUD** - Tables with search, filter, sort, pagination out of the box
 🔄 **Multiple Data Fetching** - Support for Mock data, TanStack Query, or standard fetch
 ⚡ **TypeScript First** - Full type safety and IntelliSense support
+♻️ **Smart Overwrite** - Regenerate files safely with automatic overwrite detection
 
 ## Quick Start
 
@@ -98,6 +100,20 @@ npx shadcn-nextjs-page-generator
 
 ### 3. Install Dependencies (if needed)
 
+The CLI automatically checks and installs missing shadcn/ui components! You'll see:
+
+```
+🔍 Checking shadcn components...
+  ✓ button already installed
+  ✓ table already installed
+  - card missing, installing...
+  - pagination missing, installing...
+
+✓ Installed 2 component(s): card, pagination
+```
+
+If you prefer to install manually or need additional dependencies:
+
 ```bash
 # If you selected TanStack Query
 npm install @tanstack/react-query
@@ -106,6 +122,8 @@ npm install @tanstack/react-query
 npm install framer-motion
 ```
 
+> **Note:** Auto-install requires shadcn/ui to be initialized in your project (`npx shadcn@latest init`)
+
 ### 4. Navigate to Your Page
 
 ```bash
@@ -301,8 +319,9 @@ const containerVariants = {
 
 ## shadcn/ui Components Used
 
-The generated code uses these shadcn/ui components:
+The generator automatically detects and installs the required shadcn/ui components based on your configuration:
 
+**Always installed:**
 - `button`
 - `table`
 - `card`
@@ -311,14 +330,27 @@ The generated code uses these shadcn/ui components:
 - `badge`
 - `pagination`
 - `dropdown-menu`
-- `popover`
-- `calendar` (if date filters)
-- `checkbox` (if row selection)
 
-Make sure to install them:
+**Conditionally installed:**
+- `popover` + `calendar` (if date filters enabled)
+- `checkbox` (if row selection enabled)
+
+### Auto-Install Feature
+
+The CLI automatically checks for missing components and installs them using:
+
+```bash
+npx shadcn@latest add <component> --yes --overwrite
+```
+
+This happens before generating your files, ensuring all required components are available.
+
+### Manual Installation
+
+If you prefer to install components manually:
 
 ```bash
-npx shadcn-ui@latest add button table card input select badge pagination dropdown-menu popover calendar checkbox
+npx shadcn@latest add button table card input select badge pagination dropdown-menu popover calendar checkbox
 ```
 
 ## FAQ

package/dist/index.cjs

@@ -377,7 +377,7 @@ ${message}
 };
 
 // src/generators/ddd-generator.ts
-var import_path2 = __toESM(require("path"), 1);
+var import_path3 = __toESM(require("path"), 1);
 
 // src/utils/file-system.ts
 var import_fs_extra = __toESM(require("fs-extra"), 1);
@@ -385,22 +385,134 @@ var import_path = __toESM(require("path"), 1);
 async function ensureDir(dirPath) {
   await import_fs_extra.default.ensureDir(dirPath);
 }
-async function writeFile(filePath, content) {
+async function writeFile(filePath, content, shouldOverwrite = true) {
   const dir = import_path.default.dirname(filePath);
   await ensureDir(dir);
-  await import_fs_extra.default.writeFile(filePath, content, "utf-8");
+  const writeOptions = shouldOverwrite ? { encoding: "utf-8", flag: "w" } : { encoding: "utf-8", flag: "wx" };
+  await import_fs_extra.default.writeFile(filePath, content, writeOptions);
+}
+async function exists(pathToCheck) {
+  try {
+    await import_fs_extra.default.access(pathToCheck);
+    return true;
+  } catch {
+    return false;
+  }
 }
 async function createDirectories(dirs) {
   for (const dir of dirs) {
     await ensureDir(dir);
   }
 }
-async function writeFiles(files) {
+async function writeFiles(files, shouldOverwrite = true) {
   for (const file of files) {
-    await writeFile(file.path, file.content);
-    logger.dim(`  Created: ${file.path}`);
+    const fileExists = await exists(file.path);
+    await writeFile(file.path, file.content, shouldOverwrite);
+    if (fileExists) {
+      logger.dim(`  Updated: ${file.path}`);
+    } else {
+      logger.dim(`  Created: ${file.path}`);
+    }
   }
 }
+async function checkExistingFiles(filePaths) {
+  const existingFiles = [];
+  for (const filePath of filePaths) {
+    if (await exists(filePath)) {
+      existingFiles.push(filePath);
+    }
+  }
+  return existingFiles;
+}
+
+// src/utils/shadcn-installer.ts
+var import_child_process = require("child_process");
+var import_fs = __toESM(require("fs"), 1);
+var import_path2 = __toESM(require("path"), 1);
+var COMPONENT_MAP = {
+  button: "button",
+  table: "table",
+  select: "select",
+  input: "input",
+  badge: "badge",
+  card: "card",
+  checkbox: "checkbox",
+  calendar: "calendar",
+  popover: "popover",
+  pagination: "pagination",
+  dropdown: "dropdown-menu"
+};
+function isComponentInstalled(componentName, cwd) {
+  const componentPath = import_path2.default.join(cwd, "components", "ui", `${componentName}.tsx`);
+  return import_fs.default.existsSync(componentPath);
+}
+function installComponent(componentName, cwd) {
+  try {
+    logger.info(`Installing ${componentName} component...`);
+    (0, import_child_process.execSync)(`npx shadcn@latest add ${componentName} --yes --overwrite`, {
+      cwd,
+      stdio: "inherit"
+    });
+    return true;
+  } catch (error) {
+    logger.error(`Failed to install ${componentName}: ${error}`);
+    return false;
+  }
+}
+function detectRequiredComponents(config) {
+  const required = /* @__PURE__ */ new Set();
+  required.add(COMPONENT_MAP.button);
+  required.add(COMPONENT_MAP.table);
+  required.add(COMPONENT_MAP.select);
+  required.add(COMPONENT_MAP.input);
+  required.add(COMPONENT_MAP.badge);
+  required.add(COMPONENT_MAP.card);
+  required.add(COMPONENT_MAP.pagination);
+  required.add(COMPONENT_MAP.dropdown);
+  if (config.includeRowSelection) {
+    required.add(COMPONENT_MAP.checkbox);
+  }
+  if (config.filters.some((f) => f.type === "date")) {
+    required.add(COMPONENT_MAP.calendar);
+    required.add(COMPONENT_MAP.popover);
+  }
+  return Array.from(required);
+}
+async function autoInstallComponents(config, cwd = process.cwd()) {
+  const result = {
+    installed: [],
+    skipped: [],
+    failed: []
+  };
+  const required = detectRequiredComponents(config);
+  logger.info(`Checking ${required.length} shadcn components...`);
+  for (const component of required) {
+    if (isComponentInstalled(component, cwd)) {
+      result.skipped.push(component);
+      logger.dim(`  \u2713 ${component} already installed`);
+    } else {
+      logger.dim(`  - ${component} missing, installing...`);
+      const success = installComponent(component, cwd);
+      if (success) {
+        result.installed.push(component);
+      } else {
+        result.failed.push(component);
+      }
+    }
+  }
+  return result;
+}
+function checkShadcnCli() {
+  try {
+    (0, import_child_process.execSync)("npx shadcn@latest --version", { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function isShadcnInitialized(cwd = process.cwd()) {
+  return import_fs.default.existsSync(import_path2.default.join(cwd, "components.json"));
+}
 
 // src/templates/ddd/entity.ts
 function generateEntity(config) {
@@ -633,7 +745,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Calendar as CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';` : ""}
 import { Badge } from '@/components/ui/badge';
-${includeStats ? `import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';` : ""}
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Search,
   Plus,
@@ -1144,10 +1256,10 @@ import { motion } from 'framer-motion';
 export default function Template({ children }: { children: React.ReactNode }) {
   return (
     <motion.div
-      initial=${animConfig.initial}
-      animate=${animConfig.animate}
+      initial={${animConfig.initial}}
+      animate={${animConfig.animate}}
       exit={{ opacity: 0, y: -20 }}
-      transition=${animConfig.transition}
+      transition={${animConfig.transition}}
     >
       {children}
     </motion.div>
@@ -1165,48 +1277,61 @@ var DDDGenerator = class {
     const files = [];
     const cwd = process.cwd();
     const { moduleName, routePath } = this.config;
-    const moduleDir = import_path2.default.join(cwd, "modules", moduleName);
-    const appDir = import_path2.default.join(cwd, "app", "(dashboard)", routePath);
+    await this.checkAndInstallComponents(cwd);
+    const moduleDir = import_path3.default.join(cwd, "modules", moduleName);
+    const appDir = import_path3.default.join(cwd, "app", "(dashboard)", routePath);
     const dirs = [
-      import_path2.default.join(moduleDir, "domain", "entities"),
-      import_path2.default.join(moduleDir, "domain", "repositories"),
-      import_path2.default.join(moduleDir, "application", "use-cases"),
-      import_path2.default.join(moduleDir, "infrastructure", "repositories"),
-      import_path2.default.join(moduleDir, "presentation", "components"),
+      import_path3.default.join(moduleDir, "domain", "entities"),
+      import_path3.default.join(moduleDir, "domain", "repositories"),
+      import_path3.default.join(moduleDir, "application", "use-cases"),
+      import_path3.default.join(moduleDir, "infrastructure", "repositories"),
+      import_path3.default.join(moduleDir, "presentation", "components"),
       appDir
     ];
     await createDirectories(dirs);
     files.push({
-      path: import_path2.default.join(moduleDir, "domain", "entities", `${moduleName}.entity.ts`),
+      path: import_path3.default.join(moduleDir, "domain", "entities", `${moduleName}.entity.ts`),
       content: generateEntity(this.config)
     });
     files.push({
-      path: import_path2.default.join(moduleDir, "domain", "repositories", `${moduleName}.repository.interface.ts`),
+      path: import_path3.default.join(moduleDir, "domain", "repositories", `${moduleName}.repository.interface.ts`),
       content: generateRepositoryInterface(this.config)
     });
     files.push({
-      path: import_path2.default.join(moduleDir, "infrastructure", "repositories", `${moduleName}.repository.ts`),
+      path: import_path3.default.join(moduleDir, "infrastructure", "repositories", `${moduleName}.repository.ts`),
       content: generateRepositoryImpl(this.config)
     });
     files.push({
-      path: import_path2.default.join(moduleDir, "application", "use-cases", `get-${moduleName}s.use-case.ts`),
+      path: import_path3.default.join(moduleDir, "application", "use-cases", `get-${moduleName}s.use-case.ts`),
       content: generateUseCase(this.config)
     });
     files.push({
-      path: import_path2.default.join(moduleDir, "presentation", "components", `${moduleName}-list.tsx`),
+      path: import_path3.default.join(moduleDir, "presentation", "components", `${moduleName}-list.tsx`),
       content: generateComponent(this.config)
     });
     files.push({
-      path: import_path2.default.join(appDir, "page.tsx"),
+      path: import_path3.default.join(appDir, "page.tsx"),
       content: generatePage(this.config)
     });
     if (this.config.animations.pageTransitions) {
       files.push({
-        path: import_path2.default.join(appDir, "template.tsx"),
+        path: import_path3.default.join(appDir, "template.tsx"),
         content: generateTemplate(this.config)
       });
     }
-    await writeFiles(files);
+    const filePaths = files.map((f) => f.path);
+    const existingFiles = await checkExistingFiles(filePaths);
+    if (existingFiles.length > 0) {
+      console.log("");
+      logger.warning(`Found ${existingFiles.length} existing file(s):`);
+      existingFiles.forEach((file) => {
+        const relativePath = import_path3.default.relative(cwd, file);
+        logger.dim(`  - ${relativePath}`);
+      });
+      console.log("");
+      logger.info("Overwriting existing files...");
+    }
+    await writeFiles(files, true);
     const instructions = this.generateInstructions();
     return { files, instructions };
   }
@@ -1230,10 +1355,33 @@ var DDDGenerator = class {
     }
     return instructions;
   }
+  async checkAndInstallComponents(cwd) {
+    if (!isShadcnInitialized(cwd)) {
+      logger.warning("shadcn/ui is not initialized in this project.");
+      logger.info("Please run: npx shadcn@latest init");
+      return;
+    }
+    if (!checkShadcnCli()) {
+      logger.warning("shadcn CLI not available. Skipping component auto-install.");
+      return;
+    }
+    console.log("");
+    logger.info("\u{1F50D} Checking shadcn components...");
+    const result = await autoInstallComponents(this.config, cwd);
+    if (result.installed.length > 0) {
+      console.log("");
+      logger.success(`\u2713 Installed ${result.installed.length} component(s): ${result.installed.join(", ")}`);
+    }
+    if (result.failed.length > 0) {
+      console.log("");
+      logger.error(`\u2717 Failed to install ${result.failed.length} component(s): ${result.failed.join(", ")}`);
+    }
+    console.log("");
+  }
 };
 
 // src/generators/simplified-generator.ts
-var import_path3 = __toESM(require("path"), 1);
+var import_path4 = __toESM(require("path"), 1);
 
 // src/templates/simplified/component.ts
 function generateSimplifiedComponent(config) {
@@ -1360,7 +1508,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Calendar as CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';` : ""}
 import { Badge } from '@/components/ui/badge';
-${includeStats ? `import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';` : ""}
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Search,
   Plus,
@@ -1794,24 +1942,37 @@ var SimplifiedGenerator = class {
     const files = [];
     const cwd = process.cwd();
     const { moduleName, routePath } = this.config;
-    const componentDir = import_path3.default.join(cwd, "components", moduleName);
-    const appDir = import_path3.default.join(cwd, "app", "(dashboard)", routePath);
+    await this.checkAndInstallComponents(cwd);
+    const componentDir = import_path4.default.join(cwd, "components", moduleName);
+    const appDir = import_path4.default.join(cwd, "app", "(dashboard)", routePath);
     await createDirectories([componentDir, appDir]);
     files.push({
-      path: import_path3.default.join(componentDir, `${moduleName}-list.tsx`),
+      path: import_path4.default.join(componentDir, `${moduleName}-list.tsx`),
       content: generateSimplifiedComponent(this.config)
     });
     files.push({
-      path: import_path3.default.join(appDir, "page.tsx"),
+      path: import_path4.default.join(appDir, "page.tsx"),
       content: generateSimplifiedPage(this.config)
     });
     if (this.config.animations.pageTransitions) {
       files.push({
-        path: import_path3.default.join(appDir, "template.tsx"),
+        path: import_path4.default.join(appDir, "template.tsx"),
         content: generateTemplate(this.config)
       });
     }
-    await writeFiles(files);
+    const filePaths = files.map((f) => f.path);
+    const existingFiles = await checkExistingFiles(filePaths);
+    if (existingFiles.length > 0) {
+      console.log("");
+      logger.warning(`Found ${existingFiles.length} existing file(s):`);
+      existingFiles.forEach((file) => {
+        const relativePath = import_path4.default.relative(cwd, file);
+        logger.dim(`  - ${relativePath}`);
+      });
+      console.log("");
+      logger.info("Overwriting existing files...");
+    }
+    await writeFiles(files, true);
     const instructions = this.generateInstructions();
     return { files, instructions };
   }
@@ -1835,6 +1996,29 @@ var SimplifiedGenerator = class {
     }
     return instructions;
   }
+  async checkAndInstallComponents(cwd) {
+    if (!isShadcnInitialized(cwd)) {
+      logger.warning("shadcn/ui is not initialized in this project.");
+      logger.info("Please run: npx shadcn@latest init");
+      return;
+    }
+    if (!checkShadcnCli()) {
+      logger.warning("shadcn CLI not available. Skipping component auto-install.");
+      return;
+    }
+    console.log("");
+    logger.info("\u{1F50D} Checking shadcn components...");
+    const result = await autoInstallComponents(this.config, cwd);
+    if (result.installed.length > 0) {
+      console.log("");
+      logger.success(`\u2713 Installed ${result.installed.length} component(s): ${result.installed.join(", ")}`);
+    }
+    if (result.failed.length > 0) {
+      console.log("");
+      logger.error(`\u2717 Failed to install ${result.failed.length} component(s): ${result.failed.join(", ")}`);
+    }
+    console.log("");
+  }
 };
 
 // src/generators/index.ts