@machinemetrics/mm-react-components 0.2.3-1 → 0.2.3-11

package/dist/scripts/init.cjs

@@ -0,0 +1,208 @@
+#!/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',
+        );
+
+        if (fs.existsSync(migrationScriptPath)) {
+          try {
+            execSync(`node "${migrationScriptPath}" --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,409 @@
+#!/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
+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',
+        );
+
+        if (fs.existsSync(migrationScriptPath)) {
+          try {
+            execSync(`node "${migrationScriptPath}" --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/tailwind.base.config.js

@@ -0,0 +1,88 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        card: 'var(--card)',
+        'card-foreground': 'var(--card-foreground)',
+        popover: 'var(--popover)',
+        'popover-foreground': 'var(--popover-foreground)',
+        primary: 'var(--primary)',
+        'primary-foreground': 'var(--primary-foreground)',
+        secondary: 'var(--secondary)',
+        'secondary-foreground': 'var(--secondary-foreground)',
+        muted: 'var(--muted)',
+        'muted-foreground': 'var(--muted-foreground)',
+        accent: 'var(--accent)',
+        'accent-foreground': 'var(--accent-foreground)',
+        destructive: 'var(--destructive)',
+        border: 'var(--border)',
+        input: 'var(--input)',
+        'bg-input': 'var(--bg-input)',
+        'border-input': 'var(--border-input)',
+        ring: 'var(--ring)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'Noto Sans',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: 'var(--font-weight-bold)',
+      },
+      keyframes: {
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'collapsible-down':
+          'collapsible-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'collapsible-up': 'collapsible-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'accordion-down': 'accordion-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'accordion-up': 'accordion-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      },
+    },
+  },
+  plugins: [],
+};