weloop-kosign 1.0.3 → 1.0.5

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.5",
   "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';
   }
   
@@ -504,7 +550,7 @@ async function fetchCSSFromRegistry(registryUrl) {
   return await fetchText(sourceCssPath);
 }
 
-async function installCSSStyles(config, registryUrl, forceUpdate = false) {
+async function installCSSStyles(config, registryUrl, forceUpdate = false, silent = false) {
   const cssPath = config.tailwind?.css || 'app/globals.css';
   const fullCssPath = path.join(process.cwd(), cssPath);
   
@@ -514,13 +560,17 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false) {
     const existingContent = fs.readFileSync(fullCssPath, 'utf-8');
     hasWeloopStylesInFile = hasWeloopStyles(existingContent);
     
-    if (forceUpdate && hasWeloopStylesInFile) {
-      info('Updating existing Weloop styles...');
+    // If styles already exist and not forcing update, skip silently
+    if (hasWeloopStylesInFile && !forceUpdate && silent) {
+      return;
     }
   }
   
   try {
-    info('Installing CSS styles...');
+    if (!silent) {
+      info('Installing CSS styles...');
+    }
+    
     const cssContent = await fetchCSSFromRegistry(registryUrl);
     ensureDirectoryExists(path.dirname(fullCssPath));
     
@@ -531,9 +581,11 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false) {
     if (forceUpdate && fs.existsSync(fullCssPath)) {
       // --overwrite: Replace entire file
       fs.writeFileSync(fullCssPath, processedCssContent);
-      success(`Overwritten ${cssPath} with Weloop styles`);
-      if (hasTwAnimate) {
-        info(`   tw-animate-css import included`);
+      if (!silent) {
+        success(`Overwritten ${cssPath} with Weloop styles`);
+        if (hasTwAnimate) {
+          info(`   tw-animate-css import included`);
+        }
       }
     } else if (fs.existsSync(fullCssPath)) {
       // Normal mode: Merge intelligently
@@ -542,28 +594,37 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false) {
                                 existing.includes('@tailwind base');
       
       if (hasWeloopStylesInFile) {
-        // Replace existing Weloop styles
+        // Replace existing Weloop styles (only if different)
         let weloopStyles = removeTailwindImport(processedCssContent);
         weloopStyles = ensureTwAnimateImport(weloopStyles, hasTwAnimate);
         const finalContent = replaceWeloopStyles(existing, weloopStyles, hasTwAnimate);
-        fs.writeFileSync(fullCssPath, finalContent);
-        success(`Updated ${cssPath} with Weloop styles`);
-        info(`   Existing Weloop styles were replaced with latest version`);
+        
+        // Only update if content actually changed
+        if (finalContent !== existing) {
+          fs.writeFileSync(fullCssPath, finalContent);
+          if (!silent) {
+            success(`Updated ${cssPath} with Weloop styles`);
+          }
+        }
+        // If no changes, silently skip
       } else if (hasTailwindImport) {
         // Merge after Tailwind imports
         let weloopStyles = removeTailwindImport(processedCssContent);
         weloopStyles = ensureTwAnimateImport(weloopStyles, hasTwAnimate);
         const merged = mergeCSSWithTailwind(existing, weloopStyles, hasTwAnimate);
         fs.writeFileSync(fullCssPath, merged);
-        success(`Updated ${cssPath} with Weloop styles`);
-        if (hasTwAnimate) {
-          info(`   tw-animate-css import included`);
+        if (!silent) {
+          success(`Updated ${cssPath} with Weloop styles`);
+          if (hasTwAnimate) {
+            info(`   tw-animate-css import included`);
+          }
+          info(`   Your existing styles are preserved`);
         }
-        info(`   Your existing styles are preserved`);
       } else {
         // No Tailwind imports, prepend everything
-        let finalCssContent = processedCssContent;
-        if (hasTwAnimate && !finalCssContent.includes('@import "tw-animate-css"')) {
+        let finalCssContent = removeDuplicateTwAnimateImports(processedCssContent);
+        
+        if (hasTwAnimate && !finalCssContent.match(/@import\s+["']tw-animate-css["'];?\s*\n?/)) {
           if (finalCssContent.includes('@import "tailwindcss"')) {
             finalCssContent = finalCssContent.replace(
               /(@import\s+["']tailwindcss["'];?\s*\n?)/,
@@ -574,25 +635,31 @@ async function installCSSStyles(config, registryUrl, forceUpdate = false) {
           }
         }
         fs.writeFileSync(fullCssPath, finalCssContent + '\n\n' + existing);
-        success(`Updated ${cssPath} with Weloop styles`);
-        if (hasTwAnimate) {
-          info(`   tw-animate-css import included`);
+        if (!silent) {
+          success(`Updated ${cssPath} with Weloop styles`);
+          if (hasTwAnimate) {
+            info(`   tw-animate-css import included`);
+          }
         }
       }
     } else {
       // Create new file
       fs.writeFileSync(fullCssPath, processedCssContent);
-      success(`Created ${cssPath} with Weloop styles`);
-      if (hasTwAnimate) {
-        info(`   tw-animate-css import included`);
+      if (!silent) {
+        success(`Created ${cssPath} with Weloop styles`);
+        if (hasTwAnimate) {
+          info(`   tw-animate-css import included`);
+        }
       }
     }
   } catch (err) {
-    warn(`Could not automatically install CSS styles: ${err.message}`);
-    info(`\n   To add styles manually:`);
-    info(`   1. Download: ${registryUrl.replace('/registry', '/app/globals.css')}`);
-    info(`   2. Add the CSS variables to your ${cssPath} file`);
-    info(`   3. Or copy from: https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/app/globals.css\n`);
+    if (!silent) {
+      warn(`Could not automatically install CSS styles: ${err.message}`);
+      info(`\n   To add styles manually:`);
+      info(`   1. Download: ${registryUrl.replace('/registry', '/app/globals.css')}`);
+      info(`   2. Add the CSS variables to your ${cssPath} file`);
+      info(`   3. Or copy from: https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/app/globals.css\n`);
+    }
   }
 }
 
@@ -615,16 +682,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)
@@ -633,8 +709,8 @@ async function installComponent(componentName, options = {}) {
     await installPackages(['tw-animate-css']);
   }
   
-  // Install CSS styles early (before component installation)
-  await installCSSStyles(config, registryUrl);
+  // Install CSS styles early (before component installation) - silent if already installed
+  await installCSSStyles(config, registryUrl, false, true);
   
   // Get paths from components.json
   const uiAlias = config.aliases?.ui || '@/components/ui';
@@ -782,7 +858,7 @@ Examples:
     case 'css':
     case 'styles':
       const config = loadComponentsConfig();
-      await installCSSStyles(config, registryUrl, options.overwrite);
+      await installCSSStyles(config, registryUrl, options.overwrite, false);
       break;
     
     default: