shru-design-system 0.1.0 → 0.1.2

package/scripts/init.js

@@ -0,0 +1,675 @@
+#!/usr/bin/env node
+
+/**
+ * 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',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  red: '\x1b[31m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function checkPackageInstalled(packageName) {
+  try {
+    require.resolve(packageName);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function installPackage(packageName, isDev = true) {
+  log(`Installing ${packageName}...`, 'blue');
+  try {
+    execSync(`npm install ${isDev ? '-D' : ''} ${packageName}`, { stdio: 'inherit' });
+    return true;
+  } catch (error) {
+    log(`Failed to install ${packageName}`, 'red');
+    return false;
+  }
+}
+
+function createTailwindConfig() {
+  const configPath = path.join(process.cwd(), 'tailwind.config.js');
+  
+  if (fs.existsSync(configPath)) {
+    log('tailwind.config.js already exists. Updating it...', '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');
+      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;
+  }
+  
+  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/${PACKAGE_NAME}/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+`;
+
+  fs.writeFileSync(configPath, config);
+  log('Created tailwind.config.js', 'green');
+}
+
+function createPostCSSConfig() {
+  const configPath = path.join(process.cwd(), 'postcss.config.js');
+  
+  if (fs.existsSync(configPath)) {
+    log('postcss.config.js already exists. Skipping...', 'yellow');
+    return;
+  }
+  
+  const config = `// This file was created by ${LIBRARY_NAME}
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+
+  fs.writeFileSync(configPath, config);
+  log('Created postcss.config.js', 'green');
+}
+
+function createCSSFile() {
+  const cssPath = path.join(process.cwd(), 'src', 'index.css');
+  const cssDir = path.dirname(cssPath);
+  
+  // Create src directory if it doesn't exist
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+  
+  if (fs.existsSync(cssPath)) {
+    log('src/index.css already exists. Checking if variables are defined...', 'yellow');
+    const existing = fs.readFileSync(cssPath, 'utf8');
+    
+    if (existing.includes('--primary')) {
+      log('CSS variables already defined.', 'green');
+      return;
+    }
+    
+    // Append to existing file
+    const cssVars = `
+
+/* Design system CSS variables - Created by ${LIBRARY_NAME} */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+`;
+    fs.appendFileSync(cssPath, cssVars);
+    log('Added CSS variables to existing index.css', 'green');
+    return;
+  }
+  
+  const css = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* This file was created by ${LIBRARY_NAME} */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+`;
+
+  fs.writeFileSync(cssPath, css);
+  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 checkMainFile() {
+  const possiblePaths = [
+    path.join(process.cwd(), 'src', 'main.tsx'),
+    path.join(process.cwd(), 'src', 'main.ts'),
+    path.join(process.cwd(), 'src', 'index.tsx'),
+    path.join(process.cwd(), 'src', 'index.ts'),
+    path.join(process.cwd(), 'src', 'App.tsx'),
+  ];
+  
+  for (const filePath of possiblePaths) {
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf8');
+      if (!content.includes("index.css") && !content.includes("'./index.css'")) {
+        log(`\n⚠️  Don't forget to import the CSS file in your entry point:`, 'yellow');
+        log(`   import './index.css'`, 'blue');
+        log(`   Add this to: ${filePath}\n`, 'yellow');
+      } else {
+        log('CSS import found in entry file.', 'green');
+      }
+      return;
+    }
+  }
+  
+  log('\n⚠️  Could not find entry file. Please manually import:', 'yellow');
+  log("   import './index.css'", 'blue');
+}
+
+// Main execution
+function main() {
+  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@${TAILWIND_VERSION}`)) {
+      log('Failed to install Tailwind CSS. Please install manually.', 'red');
+      process.exit(1);
+    }
+  } else {
+    log('Tailwind CSS already installed.', 'green');
+  }
+  
+  // Check and install PostCSS
+  if (!checkPackageInstalled('postcss')) {
+    installPackage('postcss');
+  }
+  
+  // Check and install Autoprefixer
+  if (!checkPackageInstalled('autoprefixer')) {
+    installPackage('autoprefixer');
+  }
+  
+  // Create configuration files
+  createTailwindConfig();
+  createPostCSSConfig();
+  createCSSFile();
+  createTokenFiles();
+  checkMainFile();
+  
+  log('\n✅ Setup complete!', 'green');
+  log('\nNext steps:', 'blue');
+  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, 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();