weloop-kosign 1.0.3 → 1.0.4

package/README.md

@@ -4,23 +4,18 @@ A modular component library built with Next.js, similar to shadcn/ui. Install on
 
 ## Installation
 
-First, make sure you have the base dependencies installed:
-
-```bash
-npm install clsx tailwind-merge
-```
-
-Then install components using the CLI:
+Install components directly - the CLI handles everything automatically:
 
 ```bash
 npx weloop-kosign@latest add button
 ```
 
-To install the base CSS styles:
+This will automatically:
 
-```bash
-npx weloop-kosign@latest css
-```
+- Install base dependencies (`clsx`, `tailwind-merge`, `tw-animate-css`)
+- Create `components.json` configuration file
+- Install CSS styles with animations
+- Install the component and its dependencies
 
 ## Usage
 
@@ -34,7 +29,7 @@ export function MyComponent() {
 }
 ```
 
-The CLI will automatically install any required dependencies for each component. If something's missing, it'll let you know.
+The CLI automatically handles all dependencies, configuration, and CSS setup. No manual setup required.
 
 ## Available Commands
 
@@ -50,7 +45,7 @@ See all available components:
 npx weloop-kosign@latest list
 ```
 
-Install or update CSS styles:
+Install or update CSS styles (optional - CSS is auto-installed with components):
 
 ```bash
 npx weloop-kosign@latest css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weloop-kosign",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "CLI tool for installing Weloop UI components",
   "keywords": [
     "weloop",

package/scripts/cli-remote.js

@@ -405,6 +405,28 @@ function hasWeloopStyles(content) {
          content.includes('--system-200');
 }
 
+function removeDuplicateTwAnimateImports(cssContent) {
+  const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
+  const matches = cssContent.match(twAnimatePattern);
+  
+  if (matches && matches.length > 1) {
+    // Remove all occurrences
+    let cleaned = cssContent.replace(twAnimatePattern, '');
+    // Add it back once after tailwindcss import
+    if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
+      cleaned = cleaned.replace(
+        /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+        '$1@import "tw-animate-css";\n'
+      );
+    } else {
+      cleaned = '@import "tw-animate-css";\n' + cleaned;
+    }
+    return cleaned;
+  }
+  
+  return cssContent;
+}
+
 function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
   const twAnimatePattern = /@import\s+["']tw-animate-css["'];?\s*\n?/g;
   let processed = cssContent;
@@ -423,7 +445,10 @@ function processTwAnimateImport(cssContent, hasTwAnimate, forceUpdate = false) {
       }
     }
   } else {
-    // Ensure import exists if package is installed
+    // Remove any duplicates first
+    processed = removeDuplicateTwAnimateImports(processed);
+    
+    // Ensure import exists if package is installed (only if not already present)
     if (!processed.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
       if (processed.includes('@import "tailwindcss"') || processed.includes("@import 'tailwindcss'")) {
         processed = processed.replace(
@@ -444,10 +469,27 @@ function removeTailwindImport(cssContent) {
 }
 
 function ensureTwAnimateImport(cssContent, hasTwAnimate) {
-  if (!hasTwAnimate || cssContent.includes('@import "tw-animate-css"')) {
+  if (!hasTwAnimate) {
     return cssContent;
   }
-  return '@import "tw-animate-css";\n' + cssContent;
+  
+  // Remove duplicates first
+  let cleaned = removeDuplicateTwAnimateImports(cssContent);
+  
+  // Check if import already exists
+  if (cleaned.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
+    return cleaned;
+  }
+  
+  // Add import after tailwindcss if it exists
+  if (cleaned.includes('@import "tailwindcss"') || cleaned.includes("@import 'tailwindcss'")) {
+    return cleaned.replace(
+      /(@import\s+["']tailwindcss["'];?\s*\n?)/,
+      '$1@import "tw-animate-css";\n'
+    );
+  }
+  
+  return '@import "tw-animate-css";\n' + cleaned;
 }
 
 function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
@@ -459,8 +501,12 @@ function mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate) {
   const beforeTailwind = existing.substring(0, existing.indexOf(tailwindMatch[0]));
   const afterTailwind = existing.substring(existing.indexOf(tailwindMatch[0]) + tailwindMatch[0].length);
   
+  // Check if tw-animate-css import already exists in existing or weloopStyles
+  const hasTwAnimateInExisting = existing.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
+  const hasTwAnimateInWeloop = weloopStyles.match(/@import\s+["']tw-animate-css["'];?\s*\n?/);
+  
   let importsToAdd = '';
-  if (hasTwAnimate && !existing.includes('@import "tw-animate-css"')) {
+  if (hasTwAnimate && !hasTwAnimateInExisting && !hasTwAnimateInWeloop) {
     importsToAdd = '@import "tw-animate-css";\n';
   }
   
@@ -562,8 +608,11 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false) {
         info(`   Your existing styles are preserved`);
       } else {
         // No Tailwind imports, prepend everything
-        let finalCssContent = processedCssContent;
-        if (hasTwAnimate && !finalCssContent.includes('@import "tw-animate-css"')) {
+        // Remove duplicates from processedCssContent first
+        let finalCssContent = removeDuplicateTwAnimateImports(processedCssContent);
+        
+        // Only add if not already present
+        if (hasTwAnimate && !finalCssContent.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
           if (finalCssContent.includes('@import "tailwindcss"')) {
             finalCssContent = finalCssContent.replace(
               /(@import\s+["']tailwindcss["'];?\s*\n?)/,
@@ -615,16 +664,25 @@ export function cn(...inputs: ClassValue[]) {
 `;
   fs.writeFileSync(utilsPath, utilsContent);
   success(`Created ${path.relative(process.cwd(), utilsPath)}`);
-  
-  // Check if required packages are installed
-  if (!checkPackageInstalled('clsx') || !checkPackageInstalled('tailwind-merge')) {
-    warn('utils.ts requires: clsx and tailwind-merge');
-    info('   Install with: npm install clsx tailwind-merge');
-  }
 }
 
 async function installComponent(componentName, options = {}) {
   const { overwrite = false, registryUrl = DEFAULT_REGISTRY_URL } = options;
+  
+  // Install base dependencies first (required for utils.ts)
+  const baseDeps = [];
+  if (!checkPackageInstalled('clsx')) {
+    baseDeps.push('clsx');
+  }
+  if (!checkPackageInstalled('tailwind-merge')) {
+    baseDeps.push('tailwind-merge');
+  }
+  if (baseDeps.length > 0) {
+    info(`Installing base dependencies: ${baseDeps.join(', ')}...`);
+    await installPackages(baseDeps);
+  }
+  
+  // Load or create components.json (after base deps are installed)
   const config = loadComponentsConfig();
   
   // Install tw-animate-css automatically (required for animations)