@machinemetrics/mm-react-components 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/scripts/npx-init.cjs

@@ -1,479 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * MM React Components - NPX Initialization Script
- *
- * This script is designed to be run via npx only
- * Usage: npx @machinemetrics/mm-react-components init
- */
-
-/* eslint-disable no-undef, no-unused-vars */
-
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const readline = require('readline');
-
-// Read the version from package.json
-// When built, this script is at dist/scripts/npx-init.cjs, so go up two levels
-const packageJsonPath = path.join(__dirname, '..', '..', 'package.json');
-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-const version = packageJson.version;
-
-// Colors for console output
-const { ASCII_LOGO } = require(path.join(__dirname, 'ascii-logo.cjs'));
-
-const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  green: '\x1b[32m',
-  blue: '\x1b[34m',
-  cyan: '\x1b[36m',
-  yellow: '\x1b[33m',
-  red: '\x1b[31m',
-};
-
-function logLogo() {
-  console.log(`${colors.bright}${colors.green}${ASCII_LOGO}${colors.reset}\n`);
-}
-
-function log(message, color = 'reset') {
-  console.log(`${colors[color]}${message}${colors.reset}`);
-}
-
-function logWarning(message) {
-  log(`⚠️  ${message}`, 'yellow');
-}
-
-function detectChakraUI() {
-  const packageJsonPath = path.join(process.cwd(), 'package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-
-  return (
-    deps['@chakra-ui/react'] ||
-    deps['@chakra-ui/core'] ||
-    deps['@chakra-ui/system']
-  );
-}
-
-function askQuestion(question) {
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-
-  return new Promise((resolve) => {
-    rl.question(question, (answer) => {
-      rl.close();
-      resolve(answer);
-    });
-  });
-}
-
-function checkReactProject() {
-  const packageJsonPath = path.join(process.cwd(), 'package.json');
-
-  if (!fs.existsSync(packageJsonPath)) {
-    log(
-      '❌ No package.json found. Please run this script from your React project root.',
-      'red',
-    );
-    process.exit(1);
-  }
-
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-
-  if (!packageJson.dependencies?.react && !packageJson.devDependencies?.react) {
-    log(
-      "❌ React not found in dependencies. Please ensure you're in a React project.",
-      'red',
-    );
-    process.exit(1);
-  }
-
-  return packageJson;
-}
-
-async function main() {
-  logLogo();
-  log('MM React Components - NPX Setup', 'bright');
-  log(
-    'Setting up MachineMetrics React Components in your project...\n',
-    'blue',
-  );
-
-  try {
-    // Check if we're in a React project
-    checkReactProject();
-    log('✅ React project detected', 'green');
-
-    // Check for Chakra UI before installation
-    const hasChakra = detectChakraUI();
-
-    // Install the component library
-    log(`📦 Installing MM React Components v${version}...`, 'cyan');
-    execSync(`npm install @machinemetrics/mm-react-components@beta`, {
-      stdio: 'inherit',
-    });
-    log('✅ MM React Components installed', 'green');
-
-    log('\n💡 Zero-config mode: No build tools needed!', 'yellow');
-    log('   Using pre-compiled CSS (118 KB, 18 KB gzipped)\n', 'cyan');
-
-    // Check React version compatibility
-    log('🔍 Checking React version compatibility...', 'cyan');
-    try {
-      const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-      const reactVersion =
-        packageJson.dependencies?.react || packageJson.devDependencies?.react;
-
-      if (reactVersion && reactVersion.includes('18')) {
-        log(
-          '✅ React 18 detected - library supports React 18.2+ and 19+',
-          'green',
-        );
-        // Check if React version is 18.2.0 or higher (required for useId hook)
-        const versionMatch = reactVersion.match(/18\.(\d+)\./);
-        if (versionMatch && parseInt(versionMatch[1]) < 2) {
-          log(
-            '⚠️  React 18.0.x or 18.1.x detected - upgrading to React 18.2+ for compatibility',
-            'yellow',
-          );
-          execSync(
-            'npm install react@^18.2.0 react-dom@^18.2.0',
-            { stdio: 'inherit' },
-          );
-          log('✅ React upgraded to 18.2+', 'green');
-        }
-      } else if (reactVersion && reactVersion.includes('19')) {
-        log(
-          '✅ React 19 detected - library fully compatible',
-          'green',
-        );
-        // Check if react-scripts needs updating for React 19
-        try {
-          const packageJson = JSON.parse(
-            fs.readFileSync('package.json', 'utf8'),
-          );
-          const scriptsVersion = packageJson.dependencies?.['react-scripts'];
-          if (scriptsVersion && scriptsVersion.includes('5.0')) {
-            log(
-              '⚠️  Updating react-scripts for React 19 compatibility',
-              'yellow',
-            );
-            execSync('npm install react-scripts@latest', { stdio: 'inherit' });
-            log('✅ react-scripts updated', 'green');
-          }
-        } catch (_error) {
-          log('⚠️  Could not check react-scripts version', 'yellow');
-        }
-      } else {
-        log(
-          '⚠️  No React version detected - installing React 18.2+ (supports both 18.2+ and 19+)',
-          'yellow',
-        );
-        execSync(
-          'npm install react@^18.2.0 react-dom@^18.2.0',
-          { stdio: 'inherit' },
-        );
-        log('✅ React 18.2+ installed', 'green');
-      }
-    } catch (_error) {
-      log('⚠️  Could not check React version, continuing...', 'yellow');
-    }
-
-    // Setup CSS (zero-config approach)
-    const srcPath = path.join(process.cwd(), 'src');
-    const indexCssPath = path.join(srcPath, 'index.css');
-
-    // Ensure src directory exists
-    if (!fs.existsSync(srcPath)) {
-      fs.mkdirSync(srcPath, { recursive: true });
-      log('✅ Created src/ directory', 'green');
-    }
-
-    // Setup CSS with pre-compiled styles
-    const cssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
-@import '@machinemetrics/mm-react-components/styles';
-`;
-
-    if (fs.existsSync(indexCssPath)) {
-      const existingContent = fs.readFileSync(indexCssPath, 'utf8');
-      if (!existingContent.includes('@machinemetrics/mm-react-components')) {
-        fs.writeFileSync(indexCssPath, cssContent + '\n' + existingContent);
-        log('✅ Added MM styles import to existing index.css', 'green');
-      } else {
-        log('✅ MM styles import already present in index.css', 'green');
-      }
-    } else {
-      fs.writeFileSync(indexCssPath, cssContent);
-      log('✅ Created index.css with MM styles import', 'green');
-    }
-
-    // Create example component
-    const examplesDir = path.join(process.cwd(), 'mm-components-examples');
-    if (!fs.existsSync(examplesDir)) {
-      fs.mkdirSync(examplesDir);
-    }
-
-    const exampleComponent = `import React from 'react';
-import { Button, Input, Label, Card, CardHeader, CardTitle, CardDescription, CardContent } from '@machinemetrics/mm-react-components';
-
-export function MMComponentsExample() {
-  return (
-    <div className="carbide p-8 space-y-6">
-      <h1 className="text-3xl font-bold">MM React Components</h1>
-      
-      {/* Button Examples */}
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold">Buttons</h2>
-        <div className="flex gap-4">
-          <Button>Default</Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="destructive">Destructive</Button>
-        </div>
-      </div>
-
-      {/* Form Example */}
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold">Form Components</h2>
-        <div className="w-96 space-y-4">
-          <div>
-            <Label htmlFor="machine-name">Machine Name</Label>
-            <Input id="machine-name" placeholder="Enter machine name" />
-          </div>
-          <Button>Save Configuration</Button>
-        </div>
-      </div>
-
-      {/* Card Example using actual Card components */}
-      <div className="space-y-4">
-        <h2 className="text-xl font-semibold">Card Components</h2>
-        <Card className="w-96">
-          <CardHeader>
-            <CardTitle>Machine Status</CardTitle>
-            <CardDescription>CNC-101 • Floor 1, Bay A</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              <div className="flex justify-between">
-                <span className="text-sm text-muted-foreground">Status</span>
-                <span className="text-sm font-medium">Running</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-sm text-muted-foreground">Uptime</span>
-                <span className="text-sm font-medium">127h 45m</span>
-              </div>
-            </div>
-            <div className="mt-4">
-              <Button>View Details</Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}`;
-
-    fs.writeFileSync(
-      path.join(examplesDir, 'MMComponentsExample.tsx'),
-      exampleComponent,
-    );
-    log('✅ Created example component', 'green');
-
-    // Create JavaScript theme activation example
-    const themeActivationExample = `// MM React Components - Zero Config Setup
-// The CSS is already imported via @import in index.css
-
-// Activate the Carbide industrial theme by adding the class to your root element
-
-// Option 1: Add to HTML (recommended)
-// In your index.html or App component:
-// <div className="carbide">
-//   <App />
-// </div>
-
-// Option 2: JavaScript activation
-// Add this to your main entry file (e.g., src/main.tsx or src/index.tsx):
-document.documentElement.classList.add('carbide');
-
-// The carbide theme provides:
-// • Industrial-appropriate colors and styling
-// • Dark mode support
-// • Enhanced focus states for accessibility
-// • Pre-compiled Tailwind utilities
-
-// No build tools needed!`;
-
-    fs.writeFileSync(
-      path.join(examplesDir, 'theme-activation.js'),
-      themeActivationExample,
-    );
-    log('✅ Created theme activation example', 'green');
-
-    // Success message
-    log(`\n🎉 Zero-Config Setup Complete!`, 'green');
-    log('\n📚 What was installed:', 'bright');
-    log(`  • @machinemetrics/mm-react-components@${version}`);
-    log('  • Pre-compiled CSS with all styles');
-    log('  • Example component in mm-components-examples/');
-    log('  • Theme activation example in mm-components-examples/');
-
-    log('\n✅ What you got:', 'bright');
-    log('  • Pre-compiled CSS with all Tailwind utilities');
-    log('  • Carbide industrial theme');
-    log('  • Dark mode support');
-    log('  • All component styles (focus, hover, etc.)');
-    log('  • Google Fonts included');
-
-    log('\n💡 No build tools needed!', 'yellow');
-    log('  This is a zero-config setup - everything just works!');
-
-    log('\n🚀 Next steps:', 'bright');
-    log('  1. Add Carbide class to your root element:');
-    log('     document.documentElement.classList.add("carbide")', 'cyan');
-    log('  2. Import components:');
-    log(
-      '     import { Button, Input } from "@machinemetrics/mm-react-components"',
-      'cyan',
-    );
-    log('  3. Check out the example:');
-    log('     ./mm-components-examples/MMComponentsExample.tsx', 'cyan');
-    log('  4. Use components - everything is pre-styled and ready!');
-
-    log('\n📖 Documentation:', 'bright');
-    log('  • Getting Started: docs/GETTING_STARTED.md');
-    log('  • CSS Options: docs/CSS_EXPORTS.md');
-    log('  • Dependencies: docs/DEPENDENCIES.md');
-    log('  • GitHub: https://github.com/machinemetrics/mm-react-components');
-
-    // Offer Carbide AI skill installation
-    log('\n🤖 Carbide AI skill', 'bright');
-    log(
-      '  Install the mm-carbide skill so your AI assistant can generate Carbide-styled UIs.\n',
-      'cyan',
-    );
-    const installSkillAnswer = await askQuestion(
-      '  Install the Carbide skill for your AI editor? (y/N): ',
-    );
-    if (
-      installSkillAnswer.toLowerCase() === 'y' ||
-      installSkillAnswer.toLowerCase() === 'yes'
-    ) {
-      const aiPrompt =
-        '  Which AI do you use? (1) Cursor  (2) VS Code / GitHub Copilot  (3) Claude Code  (4) Gemini CLI: ';
-      const aiAnswer = (await askQuestion(aiPrompt)).trim().toLowerCase();
-      const targetMap = {
-        '1': 'cursor',
-        cursor: 'cursor',
-        '2': 'copilot',
-        copilot: 'copilot',
-        '3': 'claude',
-        claude: 'claude',
-        '4': 'gemini',
-        gemini: 'gemini',
-      };
-      const target = targetMap[aiAnswer] || 'cursor';
-      const installSkillPath = path.join(__dirname, 'install-skill.cjs');
-      if (fs.existsSync(installSkillPath)) {
-        try {
-          execSync(
-            `node "${installSkillPath}" --target=${target} --scope=project`,
-            { stdio: 'inherit' },
-          );
-        } catch (err) {
-          log('  Could not run skill installer.', 'yellow');
-          log(
-            '  You can install later: npx @machinemetrics/mm-react-components mm-install-skill --target=<cursor|copilot|claude|gemini>',
-            'cyan',
-          );
-        }
-      } else {
-        log('  Skill installer not found; install later with mm-install-skill.', 'yellow');
-      }
-    }
-
-    // Offer Chakra migration if detected
-    if (hasChakra) {
-      log('\n🔄 Chakra UI Detected!', 'yellow');
-      log(
-        '  We can help you migrate from Chakra UI to MM React Components\n',
-        'cyan',
-      );
-
-      const answer = await askQuestion(
-        '  Would you like to run the Chakra UI migration now? (y/N): ',
-      );
-
-      if (answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes') {
-        log('\n🔄 Starting Chakra UI migration...', 'cyan');
-
-        const migrationScriptPath = path.join(
-          __dirname,
-          'chakra-to-shadcn-migrator',
-          'bin',
-          'chakra-to-shadcn.js',
-        );
-        const migrationConfigPath = path.join(
-          __dirname,
-          'chakra-to-shadcn-migrator',
-          'chakra-to-shadcn.config.json',
-        );
-
-        if (fs.existsSync(migrationScriptPath)) {
-          try {
-            execSync(
-              `node "${migrationScriptPath}" --config "${migrationConfigPath}" --apply`,
-              {
-                stdio: 'inherit',
-              },
-            );
-            log('\n✅ Chakra UI migration complete!', 'green');
-          } catch (error) {
-            log('\n⚠️  Migration encountered issues', 'yellow');
-            log(`  ${error.message}`, 'yellow');
-            log(
-              '  You can run it manually: node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js',
-              'cyan',
-            );
-          }
-        } else {
-          log(
-            '\n⚠️  Migration script not found at expected location',
-            'yellow',
-          );
-          log(
-            '  Clone the repo to access migration tools: https://github.com/machinemetrics/mm-react-components',
-            'cyan',
-          );
-        }
-      } else {
-        log('\n  No problem! You can migrate later with:', 'cyan');
-        log(
-          '  node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js --apply',
-          'cyan',
-        );
-      }
-    }
-
-    log('\n🚀 Happy coding!', 'cyan');
-  } catch (error) {
-    log(`❌ Setup failed: ${error.message}`, 'red');
-    process.exit(1);
-  }
-}
-
-if (require.main === module) {
-  main().catch((error) => {
-    log(`❌ Setup failed: ${error.message}`, 'red');
-    process.exit(1);
-  });
-}
-
-module.exports = { main };