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

package/dist/scripts/ascii-logo.cjs

@@ -1,6 +1,6 @@
 /**
  * MM React Components - ASCII logo (single source of truth)
- * Used by: npx-init.cjs, init.cjs, install-skill.cjs
+ * Used by: init.cjs, install-skill.cjs
  */
 
 const ASCII_LOGO = [

package/dist/scripts/chakra-to-shadcn-migrator/lib/transform.js

@@ -532,19 +532,12 @@ export function transformCompoundComponents(input, compoundSpec) {
   };
 }
 
-export function transformJSX(
-  input,
-  _jsxSpecifiers,
-  _usedSpecifiers,
-  _applyMode,
-) {
+// JSX transform is implemented only in the CLI (bin/chakra-to-shadcn.js). This stub
+// exists for internal use by analyzeImports in this file; do not rely on it for real transformations.
+function transformJSX(input, _jsxSpecifiers, _usedSpecifiers, _applyMode) {
   if (!input) return { output: input, changed: false, replaced: [] };
-  let output = input;
   const replaced = new Set();
-  let changed = false;
-  // The JSX transform implementation is identical to the original file; kept intact
-  // ... For brevity in this refactor, we rely on the identical logic retained above when splitting modules.
-  // To preserve behavior, import the same implementation from the original file here if needed.
-  // For now, no-op merge; the actual logic was moved here verbatim above in the original script.
+  const changed = false;
+  const output = input;
   return { output, changed, replaced };
 }

package/dist/scripts/init.cjs

@@ -1,22 +1,27 @@
 #!/usr/bin/env node
 
 /**
- * MM React Components - Zero-Config Init Script
+ * MM React Components - Init Script
  *
- * Simple initialization script for the MachineMetrics React Components library
- * Uses the zero-config approach with pre-compiled CSS (no build tools needed)
+ * Run via: npx @machinemetrics/mm-react-components mm-init
+ * (or npx @machinemetrics/mm-react-components)
  */
 
-/* eslint-disable no-undef */
+/* eslint-disable no-undef, no-unused-vars */
 
 const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 const readline = require('readline');
 
-const { ASCII_LOGO } = require(path.join(__dirname, 'ascii-logo.cjs'));
+// Read the version from package.json
+// When built, this script is at dist/scripts/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',
@@ -25,6 +30,7 @@ const colors = {
   blue: '\x1b[34m',
   cyan: '\x1b[36m',
   yellow: '\x1b[33m',
+  red: '\x1b[31m',
 };
 
 function logLogo() {
@@ -35,6 +41,10 @@ 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)) {
@@ -65,29 +75,85 @@ function askQuestion(question) {
   });
 }
 
+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 - Zero-Config Setup', 'bright');
-  log(
-    'Installing MachineMetrics React Components with pre-compiled CSS...\n',
-    'blue',
-  );
+  log('MM React Components — init', 'bright');
 
   try {
+    checkReactProject();
+
     // 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', {
+    log(`Installing @machinemetrics/mm-react-components@${version}...`, 'cyan');
+    execSync(`npm install @machinemetrics/mm-react-components@${version}`, {
       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 (minimal output)
+    try {
+      const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+      const reactVersion =
+        packageJson.dependencies?.react || packageJson.devDependencies?.react;
+
+      if (reactVersion && reactVersion.includes('18')) {
+        const versionMatch = reactVersion.match(/18\.(\d+)\./);
+        if (versionMatch && parseInt(versionMatch[1]) < 2) {
+          execSync(
+            'npm install react@^18.2.0 react-dom@^18.2.0',
+            { stdio: 'inherit' },
+          );
+        }
+        log('React 18.2+ — compatible', 'green');
+      } else if (reactVersion && reactVersion.includes('19')) {
+        try {
+          const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+          const scriptsVersion = pkg.dependencies?.['react-scripts'];
+          if (scriptsVersion && scriptsVersion.includes('5.0')) {
+            execSync('npm install react-scripts@^5.0.0', { stdio: 'inherit' });
+          }
+        } catch (_e) {
+          /* ignore */
+        }
+        log('React 19 — compatible', 'green');
+      } else {
+        execSync(
+          'npm install react@^18.2.0 react-dom@^18.2.0',
+          { stdio: 'inherit' },
+        );
+        log('React 18.2+ installed — compatible', 'green');
+      }
+    } catch (_error) {
+      log('React version check skipped', 'yellow');
+    }
 
-    // Create simple CSS import (zero-config approach)
+    // Setup CSS (zero-config approach)
     const srcPath = path.join(process.cwd(), 'src');
     const indexCssPath = path.join(srcPath, 'index.css');
 
@@ -97,67 +163,96 @@ async function main() {
       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) */
+    // Setup CSS with pre-compiled styles
+    const cssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
 @import '@machinemetrics/mm-react-components/styles';
+`;
 
-${cssContent}`;
-        fs.writeFileSync(indexCssPath, newCssContent);
+    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 {
-      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',
+    // Concise summary for user or AI (examples are in GETTING_STARTED / skill)
+    log('\n--- Setup complete ---', 'green');
+    log(`Package: @machinemetrics/mm-react-components@${version}`, 'reset');
+    log('CSS: pre-compiled (118 KB, 18 KB gzipped); import in index.css. No build tools required.', 'reset');
+    log('\nRequired: Add class "carbide" to root:', 'bright');
+    log('  document.documentElement.classList.add("carbide")', 'cyan');
+    log('Import: import { Button, Input } from "@machinemetrics/mm-react-components"', 'cyan');
+    log('\nDocs: GETTING_STARTED.md, CSS_EXPORTS.md, DEPENDENCIES.md', 'reset');
+    log('Repo: https://github.com/machinemetrics/mm-react-components', 'reset');
+
+    // Offer Carbide AI skill installation
+    log('\nOptional: mm-carbide AI skill for Carbide-styled UI generation.', 'yellow');
+    const installSkillAnswer = await askQuestion(
+      '  Install the Carbide skill for your AI editor? (y/N): ',
     );
-    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');
+    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 scopePrompt =
+        '  Install for this project only or for your user (all projects)? (1) This project  (2) User (global): ';
+      const scopeAnswer = (await askQuestion(scopePrompt)).trim().toLowerCase();
+      const scopeMap = {
+        '1': 'project',
+        project: 'project',
+        '2': 'user',
+        user: 'user',
+        global: 'user',
+      };
+      const scope = scopeMap[scopeAnswer] || 'project';
+      const installSkillPath = path.join(__dirname, 'install-skill.cjs');
+      if (fs.existsSync(installSkillPath)) {
+        try {
+          execSync(
+            `node "${installSkillPath}" --target=${target} --scope=${scope}`,
+            { 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> [--scope=project|user]',
+            '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',
-      );
-
+      log('\nChakra UI detected. Migrate to MM React Components?', 'yellow');
       const answer = await askQuestion(
-        '   Would you like to run the Chakra UI migration now? (y/N): ',
+        '  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');
+        log('\nRunning Chakra UI migration...', 'cyan');
 
         const migrationScriptPath = path.join(
           __dirname,
@@ -179,35 +274,27 @@ ${cssContent}`;
                 stdio: 'inherit',
               },
             );
-            log('\n✅ Chakra UI migration complete!', 'green');
+            log('\nChakra UI migration complete.', 'green');
           } catch (error) {
-            log('\n⚠️  Migration encountered issues', 'yellow');
-            log(`   ${error.message}`, 'yellow');
+            log('\nMigration encountered issues', 'yellow');
+            log(`  ${error.message}`, 'yellow');
             log(
-              '   You can run it manually: node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js',
+              '  You can run it manually: node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js',
               'cyan',
             );
           }
         } else {
+          log('\nMigration script not found at expected location.', 'yellow');
           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',
+            '  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('  Migrate later: node scripts/chakra-to-shadcn-migrator/... --apply', 'cyan');
       }
     }
 
-    log('\n🚀 Happy coding!', 'cyan');
   } catch (error) {
     log(`❌ Setup failed: ${error.message}`, 'red');
     process.exit(1);

package/dist/scripts/install-skill.cjs

@@ -63,8 +63,13 @@ function copyRecursive(src, dest) {
   for (const item of items) {
     const srcPath = path.join(src, item);
     const destPath = path.join(dest, item);
+    const stat = fs.lstatSync(srcPath);
 
-    if (fs.statSync(srcPath).isDirectory()) {
+    if (stat.isSymbolicLink()) {
+      // Do not follow symlinks (defense-in-depth)
+      continue;
+    }
+    if (stat.isDirectory()) {
       if (!fs.existsSync(destPath)) {
         fs.mkdirSync(destPath, { recursive: true });
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",
@@ -19,6 +19,9 @@
     "url": "https://github.com/machinemetrics/mm-react-components/issues"
   },
   "license": "MIT",
+  "sideEffects": [
+    "*.css"
+  ],
   "type": "module",
   "main": "dist/mm-react-components.umd.js",
   "module": "dist/mm-react-components.es.js",
@@ -58,8 +61,9 @@
     }
   },
   "bin": {
+    "mm-react-components": "dist/scripts/init.cjs",
     "chakra-to-shadcn": "dist/scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js",
-    "mm-init": "dist/scripts/npx-init.cjs",
+    "mm-init": "dist/scripts/init.cjs",
     "mm-install-skill": "dist/scripts/install-skill.cjs"
   },
   "scripts": {
@@ -144,12 +148,10 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
-    "prism-react-renderer": "^2.4.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-dropzone": "14.3.8",
-    "react-element-to-jsx-string": "^17.0.1",
     "react-hook-form": "^7.71.0",
     "react-resizable-panels": "^4.5.2",
     "recharts": "^2.15.4",
@@ -183,7 +185,9 @@
     "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^17.0.0",
     "playwright": "^1.57.0",
+    "prism-react-renderer": "^2.4.1",
     "prettier": "^3.7.4",
+    "react-element-to-jsx-string": "^17.0.1",
     "tailwindcss": "^4.1.18",
     "terser": "^5.44.1",
     "tsx": "^4.21.0",