@machinemetrics/mm-react-components 0.2.3-2 → 0.2.3-21

package/dist/scripts/init.cjs

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+
+/**
+ * MM React Components - Zero-Config Init Script
+ *
+ * Simple initialization script for the MachineMetrics React Components library
+ * Uses the zero-config approach with pre-compiled CSS (no build tools needed)
+ */
+
+/* eslint-disable no-undef */
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  yellow: '\x1b[33m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+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);
+    });
+  });
+}
+
+async function main() {
+  log('🚀 MM React Components - Zero-Config Setup', 'bright');
+  log(
+    'Installing MachineMetrics React Components with pre-compiled CSS...\n',
+    'blue',
+  );
+
+  try {
+    // Check for Chakra UI before installation
+    const hasChakra = detectChakraUI();
+
+    // Install the component library
+    log('📦 Installing MM React Components...', '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');
+
+    // Create simple CSS import (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');
+    }
+
+    if (fs.existsSync(indexCssPath)) {
+      const cssContent = fs.readFileSync(indexCssPath, 'utf8');
+      if (!cssContent.includes('@machinemetrics/mm-react-components')) {
+        const newCssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
+@import '@machinemetrics/mm-react-components/styles';
+
+${cssContent}`;
+        fs.writeFileSync(indexCssPath, newCssContent);
+        log('✅ Added MM styles import to existing index.css', 'green');
+      } else {
+        log('✅ MM styles import already present in index.css', 'green');
+      }
+    } else {
+      const cssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
+@import '@machinemetrics/mm-react-components/styles';
+`;
+
+      fs.writeFileSync(indexCssPath, cssContent);
+      log('✅ Created index.css with MM styles import', 'green');
+    }
+
+    // Success message
+    log('\n🎉 Zero-Config Setup Complete!', 'green');
+    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. Use components - everything is pre-styled and ready!');
+
+    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📖 Advanced setup (optional):', 'bright');
+    log('   Want custom Tailwind config? See docs/DEPENDENCIES.md');
+    log('   For theme-only CSS, see docs/CSS_EXPORTS.md');
+
+    // 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 };

package/dist/scripts/npx-init.cjs

@@ -0,0 +1,418 @@
+#!/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 colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+};
+
+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() {
+  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 - upgrading to React 19 for compatibility',
+          'yellow',
+        );
+        execSync(
+          'npm install react@^19.1.1 react-dom@^19.1.1 react-scripts@latest',
+          { stdio: 'inherit' },
+        );
+        log('✅ React upgraded to v19 with compatible react-scripts', 'green');
+      } else if (reactVersion && reactVersion.includes('19')) {
+        log(
+          '✅ React 19 detected - checking react-scripts compatibility',
+          '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(
+          '⚠️  Unknown React version - attempting to install React 19',
+          'yellow',
+        );
+        execSync(
+          'npm install react@^19.1.1 react-dom@^19.1.1 react-scripts@latest',
+          { stdio: 'inherit' },
+        );
+        log('✅ React 19 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 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 };