shru-design-system 0.1.5 → 0.1.8

package/scripts/init.js

@@ -272,6 +272,129 @@ function createCSSFile() {
   log('Created src/index.css', 'green');
 }
 
+/**
+ * Get the library's token files directory
+ * When running from node_modules, this will be scripts/tokens
+ */
+function getLibraryTokensPath() {
+  // __dirname is scripts/ when running from node_modules
+  // So scripts/tokens is at __dirname/tokens
+  const libraryTokensPath = path.join(__dirname, 'tokens');
+  
+  // Check if tokens exist in scripts/tokens (published package)
+  if (fs.existsSync(libraryTokensPath)) {
+    return libraryTokensPath;
+  }
+  
+  return null;
+}
+
+/**
+ * Recursively copy directory, preserving user files
+ * Only copies/updates files that were created by the library
+ */
+function copyDirectory(src, dest) {
+  if (!fs.existsSync(src)) {
+    return false;
+  }
+  
+  // Create destination directory
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+  let copiedCount = 0;
+  
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      const subCopied = copyDirectory(srcPath, destPath);
+      if (subCopied) copiedCount += subCopied;
+    } else if (entry.isFile() && entry.name.endsWith('.json')) {
+      // For JSON files, check if it's a library file or user file
+      try {
+        const srcContent = JSON.parse(fs.readFileSync(srcPath, 'utf8'));
+        const isLibraryFile = srcContent._createdBy && srcContent._createdBy.includes(LIBRARY_NAME.split(' ')[0]);
+        
+        if (isLibraryFile) {
+          // Always update library files
+          fs.copyFileSync(srcPath, destPath);
+          copiedCount++;
+        } else if (!fs.existsSync(destPath)) {
+          // New library file that doesn't exist in dest
+          fs.copyFileSync(srcPath, destPath);
+          copiedCount++;
+        }
+        // If dest exists and is not a library file, preserve it (user's custom file)
+      } catch (e) {
+        // If JSON parsing fails, just copy it
+        if (!fs.existsSync(destPath)) {
+          fs.copyFileSync(srcPath, destPath);
+          copiedCount++;
+        }
+      }
+    } else {
+      // Non-JSON files: copy if doesn't exist
+      if (!fs.existsSync(destPath)) {
+        fs.copyFileSync(srcPath, destPath);
+        copiedCount++;
+      }
+    }
+  }
+  
+  return copiedCount;
+}
+
+/**
+ * Read a token file from the library
+ */
+function readLibraryTokenFile(relativePath) {
+  const libraryTokensPath = getLibraryTokensPath();
+  if (!libraryTokensPath) {
+    return null;
+  }
+  
+  const filePath = path.join(libraryTokensPath, relativePath);
+  if (!fs.existsSync(filePath)) {
+    return null;
+  }
+  
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    return JSON.parse(content);
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Migrate old token structure to new structure
+ */
+function migrateTokenStructure(data) {
+  if (!data || typeof data !== 'object') {
+    return data;
+  }
+  
+  const migrated = JSON.parse(JSON.stringify(data)); // Deep clone
+  
+  // Migrate typography.font → font
+  if (migrated.typography && migrated.typography.font) {
+    migrated.font = migrated.typography.font;
+    delete migrated.typography;
+  }
+  
+  // Migrate shape.radius → radius
+  if (migrated.shape && migrated.shape.radius) {
+    migrated.radius = migrated.shape.radius;
+    delete migrated.shape;
+  }
+  
+  return migrated;
+}
+
 function createTokenFiles() {
   const publicDir = path.join(process.cwd(), 'public');
   const tokensDir = path.join(publicDir, 'tokens');
@@ -288,381 +411,83 @@ function createTokenFiles() {
     fs.mkdirSync(themesDir, { recursive: true });
   }
   
-  // Create base.json (or update if old structure exists)
-  const basePath = path.join(tokensDir, 'base.json');
-  let needsUpdate = false;
-  if (fs.existsSync(basePath)) {
-    try {
-      const existing = JSON.parse(fs.readFileSync(basePath, 'utf8'));
-      // Check if it has old structure (typography.font or shape.radius instead of font/radius)
-      if ((existing.typography && existing.typography.font) || (existing.shape && existing.shape.radius)) {
-        needsUpdate = true;
-        log('Found old token structure in base.json, updating...', 'yellow');
-      }
-    } catch (e) {
-      needsUpdate = true;
+  // Try to copy token files from library
+  const libraryTokensPath = getLibraryTokensPath();
+  if (libraryTokensPath) {
+    log(`Copying token files from library...`, 'blue');
+    const copiedCount = copyDirectory(libraryTokensPath, tokensDir);
+    if (copiedCount > 0) {
+      log(`Token files copied from library successfully! (${copiedCount} files)`, 'green');
+    } else {
+      log('All token files already exist. Checking for updates...', 'green');
     }
-  }
-  if (!fs.existsSync(basePath) || needsUpdate) {
-    const baseJson = {
-      "_createdBy": LIBRARY_NAME,
-      "color": {
-        "primary": "{palette.blue.500}",
-        "primary-hover": "{palette.blue.600}",
-        "primary-foreground": "{palette.white}",
-        "secondary": "{palette.gray.100}",
-        "secondary-foreground": "{palette.gray.900}",
-        "background": "{palette.white}",
-        "foreground": "{palette.gray.900}",
-        "card": "{palette.white}",
-        "card-foreground": "{palette.gray.900}",
-        "popover": "{palette.white}",
-        "popover-foreground": "{palette.gray.900}",
-        "muted": "{palette.gray.100}",
-        "muted-foreground": "{palette.gray.500}",
-        "accent": "{palette.gray.100}",
-        "accent-foreground": "{palette.gray.900}",
-        "destructive": "{palette.red.500}",
-        "destructive-foreground": "{palette.white}",
-        "border": "{palette.gray.200}",
-        "input": "{palette.gray.200}",
-        "ring": "{palette.gray.400}",
-        "skeleton": "{palette.gray.200}"
-      },
-      "spacing": {
-        "component": {
-          "xs": "0.25rem",
-          "sm": "0.5rem",
-          "md": "1rem",
-          "lg": "1.5rem",
-          "xl": "2rem"
-        },
-        "base": "0.25rem"
-      },
-      "font": {
-        "body": "var(--font-sans)",
-        "sans": "var(--font-sans)",
-        "mono": "var(--font-mono)"
-      },
-      "radius": {
-        "button": "0.375rem",
-        "card": "0.5rem",
-        "input": "0.375rem"
-      }
-    };
-    fs.writeFileSync(basePath, JSON.stringify(baseJson, null, 2));
-    log('Created/Updated public/tokens/base.json', 'green');
   } else {
-    log('public/tokens/base.json already exists with correct structure. Skipping...', 'green');
-  }
-  
-  // Create palettes.json
-  const palettesPath = path.join(tokensDir, 'palettes.json');
-  if (!fs.existsSync(palettesPath)) {
-    const palettesJson = {
-      "_createdBy": LIBRARY_NAME,
-      "palette": {
-        "white": "#ffffff",
-        "black": "#000000",
-        "transparent": "transparent",
-        "gray": {
-          "50": "#f9fafb",
-          "100": "#f3f4f6",
-          "200": "#e5e7eb",
-          "300": "#d1d5db",
-          "400": "#9ca3af",
-          "500": "#6b7280",
-          "600": "#4b5563",
-          "700": "#374151",
-          "800": "#1f2937",
-          "900": "#111827",
-          "950": "#030712"
-        },
-        "blue": {
-          "50": "#eff6ff",
-          "100": "#dbeafe",
-          "200": "#bfdbfe",
-          "300": "#93c5fd",
-          "400": "#60a5fa",
-          "500": "#3b82f6",
-          "600": "#2563eb",
-          "700": "#1d4ed8",
-          "800": "#1e40af",
-          "900": "#1e3a8a",
-          "950": "#172554"
-        },
-        "red": {
-          "50": "#fef2f2",
-          "100": "#fee2e2",
-          "200": "#fecaca",
-          "300": "#fca5a5",
-          "400": "#f87171",
-          "500": "#ef4444",
-          "600": "#dc2626",
-          "700": "#b91c1c",
-          "800": "#991b1b",
-          "900": "#7f1d1d",
-          "950": "#450a0a"
-        }
-      }
-    };
-    fs.writeFileSync(palettesPath, JSON.stringify(palettesJson, null, 2));
-    log('Created public/tokens/palettes.json', 'green');
-  } else {
-    log('public/tokens/palettes.json already exists. Skipping...', 'yellow');
-  }
-  
-  // Create theme directories and files
-  const themeCategories = ['color', 'typography', 'shape', 'density', 'animation', 'custom'];
-  
-  themeCategories.forEach(category => {
-    const categoryDir = path.join(themesDir, category);
-    if (!fs.existsSync(categoryDir)) {
-      fs.mkdirSync(categoryDir, { recursive: true });
-    }
-  });
+    log('Library token files not found, creating default token files...', 'yellow');
+  }
+  
+  // Check and migrate old token structures
+  const tokenFilesToCheck = [
+    'base.json',
+    'palettes.json',
+    'themes/color/white.json',
+    'themes/color/dark.json',
+    'themes/typography/sans.json',
+    'themes/typography/serif.json',
+    'themes/shape/smooth.json',
+    'themes/shape/sharp.json',
+    'themes/density/comfortable.json',
+    'themes/density/compact.json',
+    'themes/animation/gentle.json',
+    'themes/animation/brisk.json',
+    'themes/custom/brand.json',
+    'themes/custom/minimal.json'
+  ];
   
-  // Create color/white.json
-  const whiteThemePath = path.join(themesDir, 'color', 'white.json');
-  if (!fs.existsSync(whiteThemePath)) {
-    const whiteTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "color": {
-        "primary": "{palette.blue.500}",
-        "primary-foreground": "{palette.white}",
-        "background": "{palette.white}",
-        "foreground": "{palette.gray.900}",
-        "card": "{palette.white}",
-        "card-foreground": "{palette.gray.900}",
-        "popover": "{palette.white}",
-        "popover-foreground": "{palette.gray.900}",
-        "secondary": "{palette.gray.100}",
-        "secondary-foreground": "{palette.gray.900}",
-        "muted": "{palette.gray.100}",
-        "muted-foreground": "{palette.gray.500}",
-        "accent": "{palette.gray.100}",
-        "accent-foreground": "{palette.gray.900}",
-        "destructive": "{palette.red.500}",
-        "destructive-foreground": "{palette.white}",
-        "border": "{palette.gray.200}",
-        "input": "{palette.gray.200}",
-        "ring": "{palette.gray.400}",
-        "skeleton": "{palette.gray.200}"
-      }
-    };
-    fs.writeFileSync(whiteThemePath, JSON.stringify(whiteTheme, null, 2));
-    log('Created public/tokens/themes/color/white.json', 'green');
-  }
-  
-  // Create color/dark.json
-  const darkThemePath = path.join(themesDir, 'color', 'dark.json');
-  if (!fs.existsSync(darkThemePath)) {
-    const darkTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "color": {
-        "primary": "{palette.blue.400}",
-        "primary-foreground": "{palette.gray.900}",
-        "background": "{palette.gray.900}",
-        "foreground": "{palette.gray.50}",
-        "card": "{palette.gray.800}",
-        "card-foreground": "{palette.gray.50}",
-        "popover": "{palette.gray.800}",
-        "popover-foreground": "{palette.gray.50}",
-        "secondary": "{palette.gray.800}",
-        "secondary-foreground": "{palette.gray.50}",
-        "muted": "{palette.gray.800}",
-        "muted-foreground": "{palette.gray.400}",
-        "accent": "{palette.gray.800}",
-        "accent-foreground": "{palette.gray.50}",
-        "destructive": "{palette.red.500}",
-        "destructive-foreground": "{palette.white}",
-        "border": "{palette.gray.700}",
-        "input": "{palette.gray.700}",
-        "ring": "{palette.gray.600}",
-        "skeleton": "{palette.gray.700}"
-      }
-    };
-    fs.writeFileSync(darkThemePath, JSON.stringify(darkTheme, null, 2));
-    log('Created public/tokens/themes/color/dark.json', 'green');
-  }
-  
-  // Create typography/sans.json (or update if old structure exists)
-  const sansThemePath = path.join(themesDir, 'typography', 'sans.json');
-  let needsUpdate = false;
-  if (fs.existsSync(sansThemePath)) {
-    try {
-      const existing = JSON.parse(fs.readFileSync(sansThemePath, 'utf8'));
-      // Check if it has old structure (typography.font instead of font)
-      if (existing.typography && existing.typography.font) {
-        needsUpdate = true;
-        log('Found old token structure in typography/sans.json, updating...', 'yellow');
-      }
-    } catch (e) {
-      needsUpdate = true;
-    }
-  }
-  if (!fs.existsSync(sansThemePath) || needsUpdate) {
-    const sansTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "font": {
-        "body": "system-ui, -apple-system, sans-serif",
-        "sans": "system-ui, -apple-system, sans-serif"
-      }
-    };
-    fs.writeFileSync(sansThemePath, JSON.stringify(sansTheme, null, 2));
-    log('Created/Updated public/tokens/themes/typography/sans.json', 'green');
-  }
-  
-  // Create typography/serif.json (or update if old structure exists)
-  const serifThemePath = path.join(themesDir, 'typography', 'serif.json');
-  needsUpdate = false;
-  if (fs.existsSync(serifThemePath)) {
-    try {
-      const existing = JSON.parse(fs.readFileSync(serifThemePath, 'utf8'));
-      if (existing.typography && existing.typography.font) {
-        needsUpdate = true;
-        log('Found old token structure in typography/serif.json, updating...', 'yellow');
-      }
-    } catch (e) {
-      needsUpdate = true;
-    }
-  }
-  if (!fs.existsSync(serifThemePath) || needsUpdate) {
-    const serifTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "font": {
-        "body": "Georgia, serif",
-        "sans": "Georgia, serif"
-      }
-    };
-    fs.writeFileSync(serifThemePath, JSON.stringify(serifTheme, null, 2));
-    log('Created/Updated public/tokens/themes/typography/serif.json', 'green');
-  }
-  
-  // Create shape/smooth.json (or update if old structure exists)
-  const smoothThemePath = path.join(themesDir, 'shape', 'smooth.json');
-  needsUpdate = false;
-  if (fs.existsSync(smoothThemePath)) {
-    try {
-      const existing = JSON.parse(fs.readFileSync(smoothThemePath, 'utf8'));
-      if (existing.shape && existing.shape.radius) {
-        needsUpdate = true;
-        log('Found old token structure in shape/smooth.json, updating...', 'yellow');
-      }
-    } catch (e) {
-      needsUpdate = true;
-    }
-  }
-  if (!fs.existsSync(smoothThemePath) || needsUpdate) {
-    const smoothTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "radius": {
-        "button": "0.5rem",
-        "card": "0.75rem",
-        "input": "0.5rem"
-      }
-    };
-    fs.writeFileSync(smoothThemePath, JSON.stringify(smoothTheme, null, 2));
-    log('Created/Updated public/tokens/themes/shape/smooth.json', 'green');
-  }
-  
-  // Create shape/sharp.json (or update if old structure exists)
-  const sharpThemePath = path.join(themesDir, 'shape', 'sharp.json');
-  needsUpdate = false;
-  if (fs.existsSync(sharpThemePath)) {
-    try {
-      const existing = JSON.parse(fs.readFileSync(sharpThemePath, 'utf8'));
-      if (existing.shape && existing.shape.radius) {
-        needsUpdate = true;
-        log('Found old token structure in shape/sharp.json, updating...', 'yellow');
-      }
-    } catch (e) {
-      needsUpdate = true;
-    }
-  }
-  if (!fs.existsSync(sharpThemePath) || needsUpdate) {
-    const sharpTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "radius": {
-        "button": "0",
-        "card": "0",
-        "input": "0"
-      }
-    };
-    fs.writeFileSync(sharpThemePath, JSON.stringify(sharpTheme, null, 2));
-    log('Created/Updated public/tokens/themes/shape/sharp.json', 'green');
-  }
-  
-  // Create density/comfortable.json
-  const comfortableThemePath = path.join(themesDir, 'density', 'comfortable.json');
-  if (!fs.existsSync(comfortableThemePath)) {
-    const comfortableTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "spacing": {
-        "component": {
-          "xs": "0.5rem",
-          "sm": "0.75rem",
-          "md": "1.25rem",
-          "lg": "2rem",
-          "xl": "2.5rem"
+  tokenFilesToCheck.forEach(relativePath => {
+    const destPath = path.join(tokensDir, relativePath);
+    
+    // If file exists, check if it needs migration
+    if (fs.existsSync(destPath)) {
+      try {
+        const existing = JSON.parse(fs.readFileSync(destPath, 'utf8'));
+        const migrated = migrateTokenStructure(existing);
+        
+        // Check if migration changed the structure
+        if (JSON.stringify(existing) !== JSON.stringify(migrated)) {
+          migrated._createdBy = LIBRARY_NAME;
+          fs.writeFileSync(destPath, JSON.stringify(migrated, null, 2));
+          log(`Migrated ${relativePath} to new structure`, 'yellow');
         }
-      }
-    };
-    fs.writeFileSync(comfortableThemePath, JSON.stringify(comfortableTheme, null, 2));
-    log('Created public/tokens/themes/density/comfortable.json', 'green');
-  }
-  
-  // Create density/compact.json
-  const compactThemePath = path.join(themesDir, 'density', 'compact.json');
-  if (!fs.existsSync(compactThemePath)) {
-    const compactTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "spacing": {
-        "component": {
-          "xs": "0.25rem",
-          "sm": "0.5rem",
-          "md": "0.75rem",
-          "lg": "1rem",
-          "xl": "1.5rem"
+      } catch (e) {
+        // If file is corrupted, try to read from library
+        const libraryData = readLibraryTokenFile(relativePath);
+        if (libraryData) {
+          libraryData._createdBy = LIBRARY_NAME;
+          fs.writeFileSync(destPath, JSON.stringify(libraryData, null, 2));
+          log(`Restored ${relativePath} from library`, 'green');
         }
       }
-    };
-    fs.writeFileSync(compactThemePath, JSON.stringify(compactTheme, null, 2));
-    log('Created public/tokens/themes/density/compact.json', 'green');
-  }
-  
-  // Create animation/gentle.json
-  const gentleThemePath = path.join(themesDir, 'animation', 'gentle.json');
-  if (!fs.existsSync(gentleThemePath)) {
-    const gentleTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "animation": {
-        "duration": {
-          "fast": "150ms",
-          "normal": "300ms",
-          "slow": "500ms"
+    } else {
+      // File doesn't exist, try to read from library
+      const libraryData = readLibraryTokenFile(relativePath);
+      if (libraryData) {
+        // Ensure directory exists
+        const destDir = path.dirname(destPath);
+        if (!fs.existsSync(destDir)) {
+          fs.mkdirSync(destDir, { recursive: true });
         }
+        
+        libraryData._createdBy = LIBRARY_NAME;
+        fs.writeFileSync(destPath, JSON.stringify(libraryData, null, 2));
+        log(`Created ${relativePath} from library`, 'green');
       }
-    };
-    fs.writeFileSync(gentleThemePath, JSON.stringify(gentleTheme, null, 2));
-    log('Created public/tokens/themes/animation/gentle.json', 'green');
-  }
-  
-  // Create animation/brisk.json
-  const briskThemePath = path.join(themesDir, 'animation', 'brisk.json');
-  if (!fs.existsSync(briskThemePath)) {
-    const briskTheme = {
-      "_createdBy": LIBRARY_NAME,
-      "animation": {
-        "duration": {
-          "fast": "100ms",
-          "normal": "200ms",
-          "slow": "300ms"
-        }
-      }
-    };
-    fs.writeFileSync(briskThemePath, JSON.stringify(briskTheme, null, 2));
-    log('Created public/tokens/themes/animation/brisk.json', 'green');
+    }
+  });
+  
+  // If library tokens not found, we can't create files (user needs to install package properly)
+  if (!libraryTokensPath) {
+    log('Warning: Could not find library token files. Make sure the package is properly installed.', 'yellow');
+    return;
   }
 }