purvex-ui 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purvex-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React component generator with Tailwind CSS v4 & Purple Elegant theme",
   "main": "src/index.js",
   "bin": {

package/src/commands/add.js

@@ -1,3 +1,4 @@
+
 const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
@@ -6,112 +7,86 @@ async function addComponent(componentName, options) {
   try {
     console.log(chalk.blue.bold(`\n🔄 Adding ${componentName}...\n`));
     
-    // Simple template dalam code
-    const TEMPLATES = {
-      button: `import React from "react";
-import { cn } from "@/lib/utils";
-
-const Button = React.forwardRef(function Button(
-  { className, variant = "default", size = "default", children, ...props },
-  ref
-) {
-  return (
-    <button
-      className={cn(
-        "inline-flex items-center justify-center rounded-lg px-5 py-2",
-        "bg-primary text-primary-foreground hover:bg-primary/90",
-        "font-bold text-sm transition-all",
-        className
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-});
-
-Button.displayName = "Button";
-
-export { Button };`,
-      
-      card: `import React from 'react';
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef(function Card({ className, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn("rounded-2xl border bg-card p-6", className)}
-      {...props}
-    />
-  );
-});
-
-Card.displayName = "Card";
-
-export { Card };`,
-      
-      avatar: `import React from 'react';
-import { cn } from '@/lib/utils';
-
-const Avatar = React.forwardRef(function Avatar({
-  src,
-  alt = "avatar",
-  size = 72,
-  className,
-  ...props
-}, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn("rounded-full overflow-hidden shrink-0", className)}
-      style={{ width: \`\${size}px\`, height: \`\${size}px\` }}
-      {...props}
-    >
-      <img src={src} alt={alt} className="w-full h-full object-cover" />
-    </div>
-  );
-});
-
-Avatar.displayName = "Avatar";
-
-export { Avatar };`
-    };
+    // Available components
+    const availableComponents = ['button', 'card', 'avatar'];
     
-    // Check if component exists
-    if (!TEMPLATES[componentName]) {
+    if (!availableComponents.includes(componentName)) {
       console.log(chalk.red(`❌ Component "${componentName}" not available`));
-      console.log(chalk.yellow('\nAvailable components:'));
-      console.log(chalk.cyan('  • button'));
-      console.log(chalk.cyan('  • card'));
-      console.log(chalk.cyan('  • avatar'));
+      console.log(chalk.yellow('\nAvailable:'));
+      availableComponents.forEach(c => console.log(chalk.cyan(`  • ${c}`)));
+      return;
+    }
+    
+    // === CARI FILE TEMPLATE ===
+    // 1. Cari di local CLI package (development)
+    let templatePath = path.join(__dirname, '..', 'templates', `${componentName}.jsx`);
+    
+    // 2. Jika tidak ada, cari di installed package (production)
+    if (!fs.existsSync(templatePath)) {
+      templatePath = path.join(__dirname, '..', '..', '..', 'templates', `${componentName}.jsx`);
+    }
+    
+    // 3. Jika masih tidak ada, cari di node_modules
+    if (!fs.existsSync(templatePath)) {
+      templatePath = path.join(process.cwd(), 'node_modules', 'purvex-ui', 'templates', `${componentName}.jsx`);
+    }
+    
+    // 4. Jika TETAP tidak ada, ERROR
+    if (!fs.existsSync(templatePath)) {
+      console.log(chalk.red(`❌ Template file for "${componentName}" not found!`));
+      console.log(chalk.yellow('Expected at:'));
+      console.log(chalk.gray(`  ${path.join(__dirname, '..', 'templates', `${componentName}.jsx`)}`));
+      console.log(chalk.gray(`  ${path.join(process.cwd(), 'node_modules', 'purvex-ui', 'templates', `${componentName}.jsx`)}`));
       return;
     }
     
-    // Create target directory
+    console.log(chalk.gray(`📄 Using template: ${templatePath}`));
+    
+    // === BACA FILE TEMPLATE ===
+    const templateContent = fs.readFileSync(templatePath, 'utf-8');
+    
+    // === BUAT DIRECTORY ===
     const targetDir = path.join(process.cwd(), 'src', 'components', 'ui');
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
-      console.log(chalk.green(`✅ Created directory: ${path.relative(process.cwd(), targetDir)}`));
+      console.log(chalk.green(`✅ Created: ${path.relative(process.cwd(), targetDir)}`));
     }
     
-    // Create component file
+    // === TULIS FILE ===
     const filePath = path.join(targetDir, `${componentName}.jsx`);
-    fs.writeFileSync(filePath, TEMPLATES[componentName]);
+    fs.writeFileSync(filePath, templateContent);
     
     console.log(chalk.green(`✅ Created: ${path.relative(process.cwd(), filePath)}`));
     
-    // Success message
-    console.log(chalk.green.bold(`\n🎉 Component ${componentName} added successfully!`));
+    // === COPY utils.js JIKA PERLU ===
+    const utilsSource = path.join(path.dirname(templatePath), 'utils.js');
+    const utilsTarget = path.join(process.cwd(), 'src', 'lib', 'utils.js');
+    
+    if (fs.existsSync(utilsSource) && !fs.existsSync(path.join(process.cwd(), 'src', 'lib'))) {
+      fs.mkdirSync(path.join(process.cwd(), 'src', 'lib'), { recursive: true });
+      fs.copyFileSync(utilsSource, utilsTarget);
+      console.log(chalk.green(`✅ Created: src/lib/utils.js`));
+    }
+    
+    // === SUCCESS MESSAGE ===
+    console.log(chalk.green.bold(`\n🎉 ${componentName} added successfully!`));
     console.log(chalk.white('\nUsage:'));
     console.log(chalk.cyan(`  import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from "@/components/ui/${componentName}";`));
+    
+    if (componentName === 'button') {
+      console.log(chalk.white('\nExample:'));
+      console.log(chalk.gray(`  <Button variant="default">Click me</Button>`));
+      console.log(chalk.gray(`  <Button variant="destructive">Delete</Button>`));
+      console.log(chalk.gray(`  <Button variant="outline">Outline</Button>`));
+    }
+    
     console.log(chalk.white('\nStart dev server:'));
-    console.log(chalk.cyan('  npm run dev'));
+    console.log(chalk.cyan('  npm run dev\n'));
     
   } catch (error) {
     console.error(chalk.red('❌ Error:'), error.message);
+    console.log(chalk.yellow('\n💡 Tip: Make sure templates/ directory exists in the package.'));
   }
 }
 
-module.exports = { addComponent };
+module.exports = { addComponent };

package/src/commands/setup.js

@@ -115,7 +115,7 @@ export default defineConfig({
           configContent = configContent.replace(
             /plugins:\s*\[([\s\S]*?)\]/,
             `plugins: [
-    ,$1\n    tailwindcss(),]`
+    $1\n,    tailwindcss(),]`
           );
           // Tutup bracket dengan benar
           configContent = configContent.replace(/tailwindcss\(\),\s*$/, 'tailwindcss(),\n  ]');