shru-design-system 0.1.1 → 0.1.3

package/scripts/init.js

@@ -1,14 +1,33 @@
 #!/usr/bin/env node
 
 /**
- * shru-design-system init script
+ * Design system init script
  * Sets up Tailwind CSS and required configuration
+ * This file is part of the design system library
  */
 
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
 
+// Get package name dynamically from package.json
+function getPackageName() {
+  try {
+    const packageJsonPath = path.join(__dirname, '..', 'package.json');
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    return packageJson.name || 'shru-design-system';
+  } catch (error) {
+    // Fallback if package.json can't be read
+    return 'shru-design-system';
+  }
+}
+
+const PACKAGE_NAME = getPackageName();
+const LIBRARY_NAME = `${PACKAGE_NAME} library`;
+
+// Configuration constants
+const TAILWIND_VERSION = '^3.4.0';
+
 const colors = {
   reset: '\x1b[0m',
   green: '\x1b[32m',
@@ -49,8 +68,8 @@ function createTailwindConfig() {
     const existing = fs.readFileSync(configPath, 'utf8');
     
     // Check if our config is already there
-    if (existing.includes('shru-design-system')) {
-      log('Configuration already includes shru-design-system setup.', 'green');
+    if (existing.includes(PACKAGE_NAME)) {
+      log(`Configuration already includes ${PACKAGE_NAME} setup.`, 'green');
       return;
     }
     
@@ -60,11 +79,12 @@ function createTailwindConfig() {
   }
   
   const config = `/** @type {import('tailwindcss').Config} */
+// This file was created by ${LIBRARY_NAME}
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/shru-design-system/dist/**/*.{js,mjs}",
+    "./node_modules/${PACKAGE_NAME}/dist/**/*.{js,mjs}",
   ],
   theme: {
     extend: {
@@ -104,6 +124,10 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
+        body: ["var(--font-body)", "var(--font-sans)", "system-ui", "sans-serif"],
+      },
     },
   },
   plugins: [],
@@ -122,7 +146,8 @@ function createPostCSSConfig() {
     return;
   }
   
-  const config = `export default {
+  const config = `// This file was created by ${LIBRARY_NAME}
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
@@ -155,7 +180,7 @@ function createCSSFile() {
     // Append to existing file
     const cssVars = `
 
-/* shru-design-system CSS variables */
+/* Design system CSS variables - Created by ${LIBRARY_NAME} */
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -197,6 +222,7 @@ function createCSSFile() {
 @tailwind components;
 @tailwind utilities;
 
+/* This file was created by ${LIBRARY_NAME} */
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -234,6 +260,410 @@ function createCSSFile() {
   log('Created src/index.css', 'green');
 }
 
+function createTokenFiles() {
+  const publicDir = path.join(process.cwd(), 'public');
+  const tokensDir = path.join(publicDir, 'tokens');
+  const themesDir = path.join(tokensDir, 'themes');
+  
+  // Create directories
+  if (!fs.existsSync(publicDir)) {
+    fs.mkdirSync(publicDir, { recursive: true });
+  }
+  if (!fs.existsSync(tokensDir)) {
+    fs.mkdirSync(tokensDir, { recursive: true });
+  }
+  if (!fs.existsSync(themesDir)) {
+    fs.mkdirSync(themesDir, { recursive: true });
+  }
+  
+  // Create base.json
+  const basePath = path.join(tokensDir, 'base.json');
+  if (!fs.existsSync(basePath)) {
+    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"
+      },
+      "typography": {
+        "font": {
+          "body": "var(--font-sans)",
+          "sans": "var(--font-sans)",
+          "mono": "var(--font-mono)"
+        }
+      },
+      "shape": {
+        "radius": {
+          "button": "0.375rem",
+          "card": "0.5rem",
+          "input": "0.375rem"
+        }
+      }
+    };
+    fs.writeFileSync(basePath, JSON.stringify(baseJson, null, 2));
+    log('Created public/tokens/base.json', 'green');
+  } else {
+    log('public/tokens/base.json already exists. Skipping...', 'yellow');
+  }
+  
+  // 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 });
+    }
+  });
+  
+  // 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
+  const sansThemePath = path.join(themesDir, 'typography', 'sans.json');
+  if (!fs.existsSync(sansThemePath)) {
+    const sansTheme = {
+      "_createdBy": LIBRARY_NAME,
+      "typography": {
+        "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 public/tokens/themes/typography/sans.json', 'green');
+  }
+  
+  // Create typography/serif.json
+  const serifThemePath = path.join(themesDir, 'typography', 'serif.json');
+  if (!fs.existsSync(serifThemePath)) {
+    const serifTheme = {
+      "_createdBy": LIBRARY_NAME,
+      "typography": {
+        "font": {
+          "body": "Georgia, serif",
+          "sans": "Georgia, serif"
+        }
+      }
+    };
+    fs.writeFileSync(serifThemePath, JSON.stringify(serifTheme, null, 2));
+    log('Created public/tokens/themes/typography/serif.json', 'green');
+  }
+  
+  // Create shape/smooth.json
+  const smoothThemePath = path.join(themesDir, 'shape', 'smooth.json');
+  if (!fs.existsSync(smoothThemePath)) {
+    const smoothTheme = {
+      "_createdBy": LIBRARY_NAME,
+      "shape": {
+        "radius": {
+          "button": "0.5rem",
+          "card": "0.75rem",
+          "input": "0.5rem"
+        }
+      }
+    };
+    fs.writeFileSync(smoothThemePath, JSON.stringify(smoothTheme, null, 2));
+    log('Created public/tokens/themes/shape/smooth.json', 'green');
+  }
+  
+  // Create shape/sharp.json
+  const sharpThemePath = path.join(themesDir, 'shape', 'sharp.json');
+  if (!fs.existsSync(sharpThemePath)) {
+    const sharpTheme = {
+      "_createdBy": LIBRARY_NAME,
+      "shape": {
+        "radius": {
+          "button": "0",
+          "card": "0",
+          "input": "0"
+        }
+      }
+    };
+    fs.writeFileSync(sharpThemePath, JSON.stringify(sharpTheme, null, 2));
+    log('Created 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"
+        }
+      }
+    };
+    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"
+        }
+      }
+    };
+    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"
+        }
+      }
+    };
+    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');
+  }
+}
+
+function injectThemeScript() {
+  const scriptPath = path.join(__dirname, 'apply-theme-sync.js');
+  const scriptContent = fs.readFileSync(scriptPath, 'utf8');
+  
+  // Try to find and update index.html
+  const htmlPaths = [
+    path.join(process.cwd(), 'index.html'),
+    path.join(process.cwd(), 'public', 'index.html'),
+  ];
+  
+  for (const htmlPath of htmlPaths) {
+    if (fs.existsSync(htmlPath)) {
+      let htmlContent = fs.readFileSync(htmlPath, 'utf8');
+      
+      // Check if script is already injected
+      if (htmlContent.includes('dynamic-theme') || htmlContent.includes('apply-theme-sync')) {
+        log('Theme sync script already in index.html', 'green');
+        return;
+      }
+      
+      // Add resource hints for token files (helps browser preload)
+      // Preload critical token files that are always needed
+      const preloadLinks = `    <!-- Preload token files for faster theme application - Created by ${LIBRARY_NAME} -->
+    <link rel="preload" href="/tokens/base.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/palettes.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/themes/color/white.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/themes/color/dark.json" as="fetch" crossorigin>`;
+      
+      // Inject blocking script in <head> (runs before React)
+      const scriptTag = `    <!-- Blocking theme script to prevent flash - Created by ${LIBRARY_NAME} -->
+    <script>${scriptContent}</script>`;
+      
+      if (htmlContent.includes('</head>')) {
+        // Add preload links and script before </head>
+        htmlContent = htmlContent.replace('</head>', `${preloadLinks}\n${scriptTag}\n</head>`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html', 'green');
+        return;
+      } else if (htmlContent.includes('<head>')) {
+        // If no closing </head>, try to add after <head>
+        htmlContent = htmlContent.replace('<head>', `<head>\n${preloadLinks}\n${scriptTag}`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html', 'green');
+        return;
+      } else if (htmlContent.includes('</body>')) {
+        // Last resort: add before </body>
+        htmlContent = htmlContent.replace('</body>', `${preloadLinks}\n${scriptTag}\n</body>`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html (before </body>)', 'yellow');
+        return;
+      }
+    }
+  }
+  
+  log('⚠️  Could not find index.html. Add these to <head> manually:', 'yellow');
+  log('   <link rel="preload" href="/tokens/base.json" as="fetch" crossorigin>', 'blue');
+  log('   <link rel="preload" href="/tokens/palettes.json" as="fetch" crossorigin>', 'blue');
+  log('   <script>/* apply-theme-sync.js content */</script>', 'blue');
+}
+
 function checkMainFile() {
   const possiblePaths = [
     path.join(process.cwd(), 'src', 'main.tsx'),
@@ -263,12 +693,12 @@ function checkMainFile() {
 
 // Main execution
 function main() {
-  log('\n🚀 Setting up shru-design-system...\n', 'blue');
+  log(`\n🚀 Setting up ${PACKAGE_NAME}...\n`, 'blue');
   
   // Check and install Tailwind
   if (!checkPackageInstalled('tailwindcss')) {
     log('Tailwind CSS not found. Installing...', 'yellow');
-    if (!installPackage('tailwindcss@^3.4.0')) {
+    if (!installPackage(`tailwindcss@${TAILWIND_VERSION}`)) {
       log('Failed to install Tailwind CSS. Please install manually.', 'red');
       process.exit(1);
     }
@@ -290,6 +720,8 @@ function main() {
   createTailwindConfig();
   createPostCSSConfig();
   createCSSFile();
+  createTokenFiles();
+  injectThemeScript();
   checkMainFile();
   
   log('\n✅ Setup complete!', 'green');
@@ -297,9 +729,12 @@ function main() {
   log('1. Make sure to import the CSS file in your entry point:', 'yellow');
   log("   import './index.css'", 'blue');
   log('2. Start using components:', 'yellow');
-  log("   import { Button } from 'shru-design-system'", 'blue');
+  log(`   import { Button, ThemeToggle } from '${PACKAGE_NAME}'`, 'blue');
+  log('\n💡 Custom Token Files:', 'blue');
+  log('   You can add custom theme files to public/tokens/themes/{category}/', 'yellow');
+  log('   Example: public/tokens/themes/color/ocean.json', 'blue');
+  log('   The ThemeToggle will automatically discover and use them.', 'blue');
   log('\n');
 }
 
 main();
-