weloop-kosign 1.0.2 → 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.2",
+  "version": "1.0.4",
   "description": "CLI tool for installing Weloop UI components",
   "keywords": [
     "weloop",

package/scripts/cli-remote.js

@@ -164,13 +164,48 @@ async function installPackages(packages) {
 // FILE OPERATIONS
 // ============================================================================
 
+function createDefaultComponentsConfig() {
+  const configPath = path.join(process.cwd(), 'components.json');
+  
+  // Detect if it's a Next.js app (app directory) or pages directory
+  const hasAppDir = fs.existsSync(path.join(process.cwd(), 'app'));
+  const cssPath = hasAppDir ? 'app/globals.css' : 'styles/globals.css';
+  
+  const defaultConfig = {
+    style: 'blue',
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      config: 'tailwind.config.ts',
+      css: cssPath,
+      baseColor: 'neutral',
+      cssVariables: true,
+      prefix: ''
+    },
+    iconLibrary: 'lucide',
+    aliases: {
+      components: '@/components',
+      utils: '@/lib/utils',
+      ui: '@/components/ui',
+      lib: '@/lib',
+      hooks: '@/hooks'
+    },
+    registry: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json'
+  };
+  
+  fs.writeFileSync(configPath, JSON.stringify(defaultConfig, null, 2));
+  success(`Created components.json`);
+  info(`   You can customize this file to match your project setup`);
+  
+  return defaultConfig;
+}
+
 function loadComponentsConfig() {
   const configPath = path.join(process.cwd(), 'components.json');
   
   if (!fs.existsSync(configPath)) {
-    error('components.json not found. Please initialize your project first.');
-    info('Create a components.json file with your project configuration.');
-    process.exit(1);
+    info('components.json not found. Creating default configuration...');
+    return createDefaultComponentsConfig();
   }
   
   const content = fs.readFileSync(configPath, 'utf-8');
@@ -370,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;
@@ -388,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(
@@ -409,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) {
@@ -424,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';
   }
   
@@ -527,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?)/,
@@ -580,18 +664,33 @@ 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)
+  if (!checkPackageInstalled('tw-animate-css')) {
+    info('Installing tw-animate-css for animations...');
+    await installPackages(['tw-animate-css']);
+  }
+  
   // Install CSS styles early (before component installation)
   await installCSSStyles(config, registryUrl);