purvex-ui 1.0.4 → 1.0.6

package/package.json

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

package/src/commands/add.js

@@ -4,120 +4,110 @@ const chalk = require('chalk');
 
 async function addComponent(componentName, options) {
   try {
-    console.log(chalk.blue.bold(`\\n🔄 Adding ${componentName}...\\n`));
+    console.log(chalk.blue.bold(`\n🔄 Adding ${componentName}...\n`));
     
-    // 1. Cari registry file
-    const possiblePaths = [
-      path.join(__dirname, '..', 'registry', 'components.json'),
-      path.join(__dirname, 'registry', 'components.json'),
-      path.join(process.cwd(), 'node_modules', 'purvex-ui', 'registry', 'components.json'),
-      path.join(process.cwd(), 'registry', 'components.json')
-    ];
-    
-    let registryPath = null;
-    for (const p of possiblePaths) {
-      if (fs.existsSync(p)) {
-        registryPath = p;
-        console.log(chalk.gray(`Found registry at: ${p}`));
-        break;
-      }
-    }
+    // 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 (!registryPath) {
-      console.log(chalk.red('❌ Registry not found'));
-      console.log(chalk.yellow('\\nAvailable components:'));
+    // Check if component exists
+    if (!TEMPLATES[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'));
       return;
     }
     
-    // 2. Load registry
-    const registryContent = fs.readFileSync(registryPath, 'utf-8');
-    const registry = JSON.parse(registryContent);
-    
-    // 3. Cari component
-    const component = registry.components.find(c => c.name === componentName);
-    
-    if (!component) {
-      console.log(chalk.red(`❌ Component "${componentName}" not found`));
-      console.log(chalk.yellow('\\nAvailable components:'));
-      registry.components.forEach(c => {
-        console.log(chalk.cyan(`  - ${c.name}`));
-      });
-      return;
-    }
-    
-    // 4. Buat target directory
-    const userProjectRoot = process.cwd();
-    const targetDir = path.join(userProjectRoot, 'src', 'components', 'ui');
-    
+    // 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: ${path.relative(userProjectRoot, targetDir)}`));
+      console.log(chalk.green(`✅ Created directory: ${path.relative(process.cwd(), targetDir)}`));
     }
     
-    // 5. Cari templates directory
-    let templatesDir = null;
-    const possibleTemplateDirs = [
-      path.join(__dirname, '..', 'templates'),
-      path.join(__dirname, 'templates'),
-      path.join(process.cwd(), 'node_modules', 'purvex-ui', 'templates'),
-      path.join(process.cwd(), 'templates')
-    ];
-    
-    for (const dir of possibleTemplateDirs) {
-      if (fs.existsSync(dir)) {
-        templatesDir = dir;
-        console.log(chalk.gray(`Found templates at: ${dir}`));
-        break;
-      }
-    }
+    // Create component file
+    const filePath = path.join(targetDir, `${componentName}.jsx`);
+    fs.writeFileSync(filePath, TEMPLATES[componentName]);
     
-    if (!templatesDir) {
-      console.log(chalk.red('❌ Templates directory not found'));
-      console.log(chalk.yellow('Creating simple component file...'));
-      
-      // Fallback: buat file simple
-      const componentContent = `import React from "react";
-import { cn } from "@/lib/utils";
-
-export const ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} = ({ className, children, ...props }) => {
-  return (
-    <div className={cn("${componentName}", className)} {...props}>
-      {children}
-    </div>
-  );
-};`;
-      
-      const targetPath = path.join(targetDir, \`\${componentName}.jsx\`);
-      fs.writeFileSync(targetPath, componentContent);
-      
-      console.log(chalk.green(\`✅ Created: \${path.relative(userProjectRoot, targetPath)}\`));
-      console.log(chalk.green.bold(\`\\n🎉 Component ${componentName} added!\`));
-      return;
-    }
-    
-    // 6. Copy template files
-    for (const file of component.files) {
-      const sourcePath = path.join(templatesDir, file);
-      const targetPath = path.join(targetDir, path.basename(file));
-      
-      if (!fs.existsSync(sourcePath)) {
-        console.log(chalk.yellow(\`⚠️  Template \${file} not found\`));
-        continue;
-      }
-      
-      const content = fs.readFileSync(sourcePath, 'utf-8');
-      fs.writeFileSync(targetPath, content);
-      
-      console.log(chalk.green(\`✅ Created: \${path.relative(userProjectRoot, targetPath)}\`));
-    }
+    console.log(chalk.green(`✅ Created: ${path.relative(process.cwd(), filePath)}`));
     
-    // 7. 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}";\`));
+    // 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 dev server:'));
+    console.log(chalk.cyan('  npm run dev'));
     
   } catch (error) {
     console.error(chalk.red('❌ Error:'), error.message);

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  ]');