purvex-ui 1.0.3 → 1.0.5

package/package.json

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

package/src/commands/add.js

@@ -6,75 +6,112 @@ async function addComponent(componentName, options) {
   try {
     console.log(chalk.blue.bold(`\n🔄 Adding ${componentName}...\n`));
     
-    // 1. Load registry
-    const cliDir = path.dirname(path.dirname(__dirname));
-    const rootDir = path.dirname(path.dirname(cliDir));
-    const registryPath = path.join(rootDir, 'registry', 'components.json');
-    
-    if (!fs.existsSync(registryPath)) {
-      console.log(chalk.red('❌ Registry not found'));
-      return;
-    }
-    
-    const registryContent = fs.readFileSync(registryPath, 'utf-8');
-    const registry = JSON.parse(registryContent);
-    
-    // 2. Find component
-    const component = registry.components.find(c => c.name === componentName);
+    // 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 };`
+    };
     
-    if (!component) {
-      console.log(chalk.red(`❌ Component "${componentName}" not found`));
+    // Check if component exists
+    if (!TEMPLATES[componentName]) {
+      console.log(chalk.red(`❌ Component "${componentName}" not available`));
       console.log(chalk.yellow('\nAvailable components:'));
-      registry.components.forEach(c => {
-        console.log(chalk.cyan(`  - ${c.name}`));
-      });
+      console.log(chalk.cyan('  • button'));
+      console.log(chalk.cyan('  • card'));
+      console.log(chalk.cyan('  • avatar'));
       return;
     }
     
-    // 3. Setup target directory INSIDE src
-    const userProjectRoot = process.cwd();
-    const targetDir = path.join(userProjectRoot, 'src', 'components', 'ui');
-    
-    // Auto create directory jika belum ada
+    // Create target 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)}`));
     }
     
-    // 4. Copy template files
-    for (const file of component.files) {
-      const sourcePath = path.join(rootDir, 'templates', file);
-      const targetPath = path.join(targetDir, path.basename(file));
-      
-      if (!fs.existsSync(sourcePath)) {
-        console.log(chalk.yellow(`⚠️  Template ${file} not found, skipping...`));
-        continue;
-      }
-      
-      // Read template
-      let content = fs.readFileSync(sourcePath, 'utf-8');
-      
-      // Update import path untuk src/
-      content = content.replace(/@\/lib\/utils/g, '@/lib/utils');
-      content = content.replace(/@\/components\/ui/g, '@/components/ui');
-      
-      // Write to target
-      fs.writeFileSync(targetPath, content);
-      
-      const relativePath = path.relative(userProjectRoot, targetPath);
-      console.log(chalk.green('✅ Created: ') + relativePath);
-    }
+    // Create component file
+    const filePath = path.join(targetDir, `${componentName}.jsx`);
+    fs.writeFileSync(filePath, TEMPLATES[componentName]);
+    
+    console.log(chalk.green(`✅ Created: ${path.relative(process.cwd(), filePath)}`));
     
-    // 5. Success message
+    // Success message
     console.log(chalk.green.bold(`\n🎉 Component ${componentName} added successfully!`));
     console.log(chalk.white('\nUsage:'));
     console.log(chalk.cyan(`  import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from "@/components/ui/${componentName}";`));
-    
-    console.log(chalk.white('\nStart your dev server:'));
+    console.log(chalk.white('\nStart dev server:'));
     console.log(chalk.cyan('  npm run dev'));
     
   } catch (error) {
-    console.error(chalk.red('❌ Error adding component:'), error.message);
+    console.error(chalk.red('❌ Error:'), error.message);
   }
 }
 
-module.exports = { addComponent };
+module.exports = { addComponent };