shru-design-system 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shru-design-system",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "A React component library with atoms and molecules built on Radix UI and Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/scripts/init.js

@@ -63,19 +63,159 @@ function installPackage(packageName, isDev = true) {
 function createTailwindConfig() {
   const configPath = path.join(process.cwd(), 'tailwind.config.js');
   
+  // Required configs that must be present
+  const requiredConfigs = {
+    fontFamily: 'fontFamily',
+    spacing: 'spacing',
+    gap: 'gap',
+    transitionDuration: 'transitionDuration'
+  };
+  
   if (fs.existsSync(configPath)) {
-    log('tailwind.config.js already exists. Updating it...', 'yellow');
+    log('tailwind.config.js already exists. Checking for required configs...', 'yellow');
     const existing = fs.readFileSync(configPath, 'utf8');
     
-    // Check if our config is already there
-    if (existing.includes(PACKAGE_NAME)) {
-      log(`Configuration already includes ${PACKAGE_NAME} setup.`, 'green');
+    // Check if all required configs are present with proper values
+    const hasFontFamily = existing.includes('fontFamily') && existing.includes('--font-sans');
+    const hasSpacing = existing.includes('spacing:') && existing.includes('component-xs');
+    const hasGap = existing.includes('gap:') && existing.includes('component-xs');
+    const hasTransitionDuration = existing.includes('transitionDuration') && existing.includes('duration-fast');
+    
+    if (hasFontFamily && hasSpacing && hasGap && hasTransitionDuration) {
+      log(`Configuration already includes all required ${PACKAGE_NAME} setup.`, 'green');
       return;
     }
     
-    // Try to merge (basic approach - user might need to do this manually)
-    log('Please manually merge the Tailwind config. See docs for details.', 'yellow');
-    return;
+    // Track what's missing
+    const missingConfigs = [];
+    if (!hasFontFamily) missingConfigs.push('fontFamily');
+    if (!hasSpacing) missingConfigs.push('spacing');
+    if (!hasGap) missingConfigs.push('gap');
+    if (!hasTransitionDuration) missingConfigs.push('transitionDuration');
+    
+    // If configs are missing, update the file
+    if (missingConfigs.length > 0) {
+      log(`Missing required configs: ${missingConfigs.join(', ')}. Updating...`, 'yellow');
+      
+      // Read the existing config
+      let updated = existing;
+      
+      // Add fontFamily if missing
+      if (!hasFontFamily) {
+        const fontFamilyConfig = `      // ⚠️ IF YOU UPDATE fontFamily CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - fontFamily config (test app)
+      fontFamily: {
+        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
+        body: ["var(--font-body)", "var(--font-sans)", "system-ui", "sans-serif"],
+      },`;
+        
+        // Insert after borderRadius
+        if (existing.includes('borderRadius')) {
+          updated = updated.replace(
+            /(borderRadius: \{[\s\S]*?\},)/,
+            `$1\n${fontFamilyConfig}`
+          );
+        } else {
+          // Insert after colors
+          updated = updated.replace(
+            /(ring: "hsl\(var\(--ring\)\)",)/,
+            `$1\n      },\n${fontFamilyConfig}`
+          );
+        }
+      }
+      
+      // Add spacing if missing
+      if (!hasSpacing) {
+        const spacingConfig = `      // ⚠️ IF YOU UPDATE spacing CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - spacing config (test app)
+      spacing: {
+        'component-xs': "var(--spacing-component-xs, 0.25rem)",
+        'component-sm': "var(--spacing-component-sm, 0.5rem)",
+        'component-md': "var(--spacing-component-md, 1rem)",
+        'component-lg': "var(--spacing-component-lg, 1.5rem)",
+        'component-xl': "var(--spacing-component-xl, 2rem)",
+      },`;
+        
+        // Insert after fontFamily or borderRadius
+        if (updated.includes('fontFamily')) {
+          updated = updated.replace(
+            /(fontFamily: \{[\s\S]*?\},)/,
+            `$1\n${spacingConfig}`
+          );
+        } else if (updated.includes('borderRadius')) {
+          updated = updated.replace(
+            /(borderRadius: \{[\s\S]*?\},)/,
+            `$1\n${spacingConfig}`
+          );
+        }
+      }
+      
+      // Add gap if missing
+      if (!hasGap) {
+        const gapConfig = `      // ⚠️ IF YOU UPDATE gap CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - gap config (test app)
+      gap: {
+        'component-xs': "var(--spacing-component-xs, 0.25rem)",
+        'component-sm': "var(--spacing-component-sm, 0.5rem)",
+        'component-md': "var(--spacing-component-md, 1rem)",
+        'component-lg': "var(--spacing-component-lg, 1.5rem)",
+        'component-xl': "var(--spacing-component-xl, 2rem)",
+      },`;
+        
+        // Insert after spacing
+        if (updated.includes('spacing:')) {
+          updated = updated.replace(
+            /(spacing: \{[\s\S]*?\},)/,
+            `$1\n${gapConfig}`
+          );
+        } else if (updated.includes('fontFamily')) {
+          updated = updated.replace(
+            /(fontFamily: \{[\s\S]*?\},)/,
+            `$1\n${gapConfig}`
+          );
+        }
+      }
+      
+      // Add transitionDuration if missing
+      if (!hasTransitionDuration) {
+        const transitionConfig = `      // ⚠️ IF YOU UPDATE transitionDuration CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - transitionDuration config (test app)
+      transitionDuration: {
+        'fast': "var(--duration-fast, 150ms)",
+        'normal': "var(--duration-normal, 300ms)",
+        'slow': "var(--duration-slow, 500ms)",
+      },`;
+        
+        // Insert after gap or spacing
+        if (updated.includes('gap:')) {
+          updated = updated.replace(
+            /(gap: \{[\s\S]*?\},)/,
+            `$1\n${transitionConfig}`
+          );
+        } else if (updated.includes('spacing:')) {
+          updated = updated.replace(
+            /(spacing: \{[\s\S]*?\},)/,
+            `$1\n${transitionConfig}`
+          );
+        } else if (updated.includes('fontFamily')) {
+          updated = updated.replace(
+            /(fontFamily: \{[\s\S]*?\},)/,
+            `$1\n${transitionConfig}`
+          );
+        }
+      }
+      
+      // Write the updated config
+      fs.writeFileSync(configPath, updated);
+      log('Updated tailwind.config.js with missing configs', 'green');
+      return;
+    }
+    
+    // If config exists but doesn't have our package name, warn user
+    if (!existing.includes(PACKAGE_NAME) && !existing.includes('shru-design-system')) {
+      log('Please manually merge the Tailwind config. See docs for details.', 'yellow');
+      return;
+    }
   }
   
   const config = `/** @type {import('tailwindcss').Config} */