shru-design-system 0.0.9 → 0.1.1

package/scripts/init.js

@@ -0,0 +1,305 @@
+#!/usr/bin/env node
+
+/**
+ * shru-design-system init script
+ * Sets up Tailwind CSS and required configuration
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+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('shru-design-system')) {
+      log('Configuration already includes shru-design-system 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} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/shru-design-system/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 = `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 = `
+
+/* shru-design-system CSS variables */
+@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;
+
+@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 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 shru-design-system...\n', 'blue');
+  
+  // Check and install Tailwind
+  if (!checkPackageInstalled('tailwindcss')) {
+    log('Tailwind CSS not found. Installing...', 'yellow');
+    if (!installPackage('tailwindcss@^3.4.0')) {
+      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();
+  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 } from 'shru-design-system'", 'blue');
+  log('\n');
+}
+
+main();
+