@machinemetrics/mm-react-components 0.2.3-3 → 0.2.3-5

package/dist/style.css

@@ -0,0 +1 @@
+@keyframes mm-progress-shimmer{0%{transform:translate(-100%);opacity:0}10%{opacity:.15}50%{opacity:.25}to{transform:translate(100%);opacity:0}}[data-slot=progress-indicator]:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);transform:translate(-100%);pointer-events:none;animation:mm-progress-shimmer 2.4s ease-in-out infinite}@keyframes mm-progress-head-flash{0%{opacity:0;transform:translate(0)}30%{opacity:.6}to{opacity:0;transform:translate(8px)}}@keyframes mm-progress-breathe{0%,to{filter:brightness(1);opacity:1}50%{filter:brightness(1.35);opacity:.8}}[data-slot=progress] [data-slot=progress-indicator]:after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:12px;pointer-events:none;background:radial-gradient(12px 12px at 100% 50%,rgba(255,255,255,.6),transparent 70%);opacity:0}.mmc-progress[data-animating=true] [data-slot=progress-indicator]:after{animation:mm-progress-head-flash .6s ease-out 1}[data-slot=progress-indicator]{animation:mm-progress-breathe 1.65s ease-in-out infinite}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.2.3-3",
+  "version": "0.2.3-5",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",
@@ -29,20 +29,28 @@
       "import": "./dist/mm-react-components.es.js",
       "require": "./dist/mm-react-components.umd.js"
     },
-    "./styles": "./dist/index.css",
-    "./themes/base": "./dist/index.css",
+    "./styles": "./dist/lib/styles.css",
     "./themes/carbide": "./dist/themes/carbide.css",
-    "./themes/complete": "./dist/themes/complete.css",
     "./tailwind.config": "./tailwind.base.config.js",
     "./docs/tailwind-setup": "./docs/TAILWIND_SETUP.md",
     "./docs/getting-started": "./dist/docs/GETTING_STARTED.md",
-    "./README": "./dist/README.md"
+    "./README": "./dist/README.md",
+    "./migration/config": "./scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json",
+    "./agent-docs": "./agent-docs/"
   },
   "engines": {
     "node": ">=20"
   },
+  "peerDependencies": {
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.5.6",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.0.0"
+  },
   "bin": {
-    "chakra-to-shadcn": "scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js"
+    "chakra-to-shadcn": "scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js",
+    "mm-init": "scripts/init.cjs"
   },
   "scripts": {
     "build": "vite build --mode production && tsc --project tsconfig.build.json",
@@ -124,6 +132,7 @@
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@playwright/test": "^1.55.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^24.5.0",
     "@types/react": "^19.1.10",
@@ -132,6 +141,7 @@
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -142,7 +152,7 @@
     "globals": "^16.3.0",
     "playwright": "^1.55.0",
     "prettier": "^3.6.2",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.14",
     "terser": "^5.44.0",
     "tsx": "^4.19.2",
     "typescript": "~5.8.3",

package/scripts/README.md

@@ -1,171 +1,171 @@
-# Scripts Directory
+# MM React Components - Initialization Scripts
 
-This directory contains scripts for maintaining shadcn/ui components and visual regression tests.
+This directory contains initialization scripts to help users quickly set up the MachineMetrics React Components library in their projects.
 
-## Component Creation Script
+## Available Scripts
 
-### Create New Component
+### 1. Quick Initialization Script (`init.js`)
 
-```bash
-npm run create-component <component-name>
-```
+**Usage:** `npm run init`
 
-Creates a new shadcn/ui component with automatic linting, formatting, and preview generation.
+A streamlined initialization script that:
 
-**Options:**
+- Installs the component library and core dependencies
+- Sets up basic CSS imports
+- Provides minimal configuration
 
-- `--skip-preview` - Skip generating preview component
-- `--skip-lint` - Skip running ESLint fixes
-- `--skip-format` - Skip running Prettier formatting
-- `--skip-tests` - Skip generating Playwright tests
-- `--help` - Show help message
+**Features:**
 
-**Examples:**
+- ✅ Fast setup (no interactive prompts)
+- ✅ Installs only essential dependencies
+- ✅ Basic theme integration
+- ✅ Perfect for quick prototyping
 
-```bash
-npm run create-component card
-npm run create-component dialog --skip-preview
-npm run create-component select --skip-lint --skip-format
-npm run create-component button --skip-tests
-```
+### 2. NPX CLI Tool (`npx-init.js`)
 
-**Workflow:**
+**Usage:** `npx @machinemetrics/mm-react-components init`
 
-1. Add component using shadcn CLI
-2. Apply ESLint fixes (unless --skip-lint)
-3. Apply Prettier formatting (unless --skip-format)
-4. Generate preview component (unless --skip-preview)
-5. Generate Playwright tests (unless --skip-tests)
-6. Update main index.ts exports
+An NPX CLI tool that can be run from any directory:
 
-## Component Update Scripts
+- Installs the component library
+- Sets up peer dependencies
+- Creates example components
+- Configures CSS imports
 
-### TypeScript Version
+**Features:**
 
-```bash
-npm run update-components
-```
+- ✅ Can be run via npx (no global installation needed)
+- ✅ Works in any React project
+- ✅ Creates example components
+- ✅ Minimal setup process
+
+## Usage Examples
 
-### Bash Version
+### For New Projects
 
 ```bash
-npm run update-components:bash
-```
+# Create a new React project
+npx create-react-app my-app
+cd my-app
 
-## Visual Test Generation Scripts
+# Install MM React Components
+npx @machinemetrics/mm-react-components init
+```
 
-### Generate Missing Tests (Default)
+### For Existing Projects
 
 ```bash
-npm run generate-visual-tests
-```
+# Quick setup
+npm run init
 
-Only generates tests for components that don't have test files yet. Existing tests are preserved.
+# Or use npx (recommended)
+npx @machinemetrics/mm-react-components init
+```
 
-### Generate All Tests (Overwrite)
+### NPX Usage
 
 ```bash
-npm run generate-visual-tests:overwrite
+# Use directly with npx (no installation needed)
+npx @machinemetrics/mm-react-components init
 ```
 
-Regenerates all test files, overwriting existing ones. Useful after template changes or major updates.
+## What Gets Installed
 
-## What the Component Update Scripts Do
+### Core Dependencies
 
-Both component update scripts will:
+- `@machinemetrics/mm-react-components` - The component library
+- `class-variance-authority` - Component variant management
+- `clsx` - Conditional class names
+- `tailwind-merge` - Tailwind class merging
+- `@radix-ui/react-slot` - Radix UI primitives
+- `lucide-react` - Icon library
 
-1. **Scan** `src/components/ui/` for all installed components
-2. **Filter** out custom components (like `theme-toggle`)
-3. **Update** each remaining component using `npx shadcn@latest add <component> --yes --overwrite`
-4. **Report** a summary of what was updated, skipped, or failed
+### Optional Dependencies
 
-The scripts automatically discover components from your folder - no need to maintain a hardcoded list!
+- `react-hook-form` - Form handling
+- `@hookform/resolvers` - Form validation resolvers
+- `zod` - Schema validation
+- `sonner` - Toast notifications
 
-## What the Visual Test Generation Scripts Do
+## What Gets Created
 
-The visual test generation script will:
+### CSS Imports
 
-1. **Scan** all preview routes in `src/App.tsx` for component previews
-2. **Check** existing test files in `tests/visual/`
-3. **Generate** Playwright test files using TypeScript templates from `scripts/templates/`
-4. **Smart Wait Logic**: Automatically adds table-specific wait conditions for data table components
-5. **Skip or Overwrite**: Either skip existing tests (default) or overwrite them (with `--overwrite`)
-6. **Report** a summary of generated, skipped, and total test files
+```css
+@import '@machinemetrics/mm-react-components/styles';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
 
-### Generated Test Types
+### Example Components
 
-Each component gets tests for:
+- Basic usage examples
+- Advanced form examples
+- Industrial/manufacturing use cases
 
-- **Main Component Screenshot**: Captures the component in its default state
-- **Mobile Responsive Screenshot**: Tests the component at mobile viewport (375x667)
+### Configuration Files
 
-## Features
+- TypeScript declarations
+- Vite configuration (if needed)
+- Example documentation
 
-### Component Creation Script
+## Theme Integration
 
-- ✅ **Smart Component Detection**: Automatically detects component structure and exports
-- ✅ **Intelligent Preview Generation**: Creates appropriate preview components based on component type
-- ✅ **Special Component Handling**: Custom preview templates for complex components (card, dialog, etc.)
-- ✅ **Automatic Linting**: Applies ESLint fixes after component creation
-- ✅ **Automatic Formatting**: Applies Prettier formatting for consistent code style
-- ✅ **Playwright Test Generation**: Automatically generates visual regression tests
-- ✅ **Export Management**: Automatically updates index.ts with new component exports
-- ✅ **Error Handling**: Comprehensive error handling with detailed progress reporting
-- ✅ **Flexible Options**: Skip any step with command-line flags
-- ✅ **Help Documentation**: Built-in help with usage examples
+The scripts automatically set up the Carbide theme for industrial applications:
 
-### Component Update Scripts
+```tsx
+// Add to your root element
+<div className="carbide">
+  <App />
+</div>
+```
 
-- ✅ **Auto-Discovery**: Automatically finds all components in your `ui/` folder
-- ✅ **Smart Filtering**: Skips custom components automatically
-- ✅ **CLI Validation**: Let shadcn CLI determine if components are valid/updatable
-- ✅ **Detailed Progress**: Shows real-time updates and comprehensive summary
-- ✅ **Error Handling**: Reports failures and continues with other components
-- ✅ **Overwrite**: Uses `--overwrite` flag to ensure components are properly updated
+## Troubleshooting
 
-### Visual Test Generation Scripts
+### Common Issues
 
-- ✅ **TypeScript Templates**: Uses proper `.ts` template files for full linting and type-checking
-- ✅ **Smart Generation**: Only generates missing tests by default, preserves existing customizations
-- ✅ **Overwrite Mode**: `--overwrite` flag regenerates all tests when needed
-- ✅ **Dynamic Wait Logic**: Automatically adapts wait conditions for data tables vs regular components
-- ✅ **Mobile Testing**: Includes responsive testing at mobile viewport sizes
-- ✅ **Route Auto-Discovery**: Automatically finds all component preview routes
+1. **"React not found"**
+   - Ensure you're in a React project directory
+   - Check that React is installed in package.json
 
-## Custom Components
+2. **"Permission denied"**
+   - Make sure the script is executable: `chmod +x scripts/*.js`
 
-Components listed in `CUSTOM_COMPONENTS` will be skipped during updates:
+3. **"Module not found"**
+   - Run `npm install` to install dependencies
+   - Check that the component library is properly installed
 
-- `theme-toggle` - Custom component, not from shadcn/ui
+### Manual Setup
 
-To add more custom components to skip, edit the `CUSTOM_COMPONENTS` array in either script.
+If the scripts fail, you can set up manually:
 
-## Requirements
+```bash
+# Install the library
+npm install @machinemetrics/mm-react-components
 
-### TypeScript Version
+# Install peer dependencies
+npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
 
-- `tsx` package (included in devDependencies)
-- Node.js
+# Add to your CSS
+@import '@machinemetrics/mm-react-components/styles';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
 
-### Bash Version
+## Support
 
-- Bash shell
-- `npx` command available
+For issues or questions:
 
-## Help
+- GitHub Issues: https://github.com/machinemetrics/mm-react-components/issues
+- Documentation: https://github.com/machinemetrics/mm-react-components#readme
 
-Both scripts support `--help` flag:
+## Contributing
 
-```bash
-npm run update-components -- --help
-./scripts/update-components.sh --help
-```
+To improve the initialization scripts:
 
-## Troubleshooting
+1. Fork the repository
+2. Make your changes
+3. Test with different React setups
+4. Submit a pull request
 
-If updates fail:
+## License
 
-1. Ensure you have internet connection
-2. Make sure `npx` can access the shadcn CLI
-3. Check that `src/components/ui/` directory exists
-4. Verify you're in the project root directory
+MIT License - see LICENSE file for details.

package/scripts/init.cjs

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+
+/**
+ * MM React Components - Quick Init Script
+ *
+ * Simple initialization script for the MachineMetrics React Components library
+ */
+
+/* eslint-disable no-undef */
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function main() {
+  log('🚀 MM React Components - Quick Setup', 'bright');
+  log(
+    'Installing and configuring MachineMetrics React Components...\n',
+    'blue',
+  );
+
+  try {
+    // 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');
+
+    // Install peer dependencies
+    log('📦 Installing peer dependencies...', 'cyan');
+    const peerDeps = [
+      'class-variance-authority',
+      'clsx',
+      'tailwind-merge',
+      '@radix-ui/react-slot',
+      'lucide-react',
+      'tailwindcss',
+      'autoprefixer',
+      'postcss',
+    ];
+    execSync(`npm install ${peerDeps.join(' ')}`, { stdio: 'inherit' });
+    log('✅ Peer dependencies installed', 'green');
+
+    // Create basic CSS import
+    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 = `@import '@machinemetrics/mm-react-components/themes/carbide';
+
+${cssContent}`;
+        fs.writeFileSync(indexCssPath, newCssContent);
+        log('✅ Added Carbide theme import to existing index.css', 'green');
+      } else {
+        log('✅ Carbide theme import already present in index.css', 'green');
+      }
+    } else {
+      const cssContent = `@import '@machinemetrics/mm-react-components/themes/carbide';`;
+
+      fs.writeFileSync(indexCssPath, cssContent);
+      log('✅ Created index.css with Carbide theme import', 'green');
+    }
+
+    // Always use the exported Tailwind config from the package
+    const tailwindConfigPath = path.join(process.cwd(), 'tailwind.config.js');
+    const packageConfigPath = path.join(
+      process.cwd(),
+      'node_modules/@machinemetrics/mm-react-components/tailwind.base.config.js',
+    );
+
+    if (!fs.existsSync(packageConfigPath)) {
+      log('❌ Could not find exported Tailwind config in package', 'red');
+      log(
+        '   This indicates the package installation may be incomplete.',
+        'red',
+      );
+      process.exit(1);
+    }
+
+    const configContent = fs.readFileSync(packageConfigPath, 'utf8');
+    // Convert ES module to CommonJS for compatibility
+    const commonJsConfig = configContent
+      .replace('export default', 'module.exports =')
+      .replace(/^\/\*\* @type \{import\('tailwindcss'\)\.Config\} \*\/\n/, '');
+
+    if (fs.existsSync(tailwindConfigPath)) {
+      log('✅ Replacing existing Tailwind config with package config', 'green');
+    } else {
+      log('✅ Creating tailwind.config.js from package config', 'green');
+    }
+
+    fs.writeFileSync(tailwindConfigPath, commonJsConfig);
+
+    // Check if PostCSS config exists and update it if needed
+    const postcssConfigPath = path.join(process.cwd(), 'postcss.config.js');
+    if (fs.existsSync(postcssConfigPath)) {
+      log('✅ Found existing PostCSS config', 'green');
+    } else {
+      // Create a basic PostCSS config
+      const postcssConfigContent = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}`;
+      fs.writeFileSync(postcssConfigPath, postcssConfigContent);
+      log('✅ Created postcss.config.js', 'green');
+    }
+
+    // Success message
+    log('\n🎉 Setup complete!', 'green');
+    log('\n📚 Next steps:');
+    log(
+      '  1. Import components: import { Button } from "@machinemetrics/mm-react-components"',
+    );
+    log(
+      '  2. Add "carbide" class to your root element to activate the industrial theme',
+    );
+    log('  3. The Carbide theme is already imported and ready to use!');
+    log('  4. Check the documentation for examples');
+
+    log(
+      '\n💡 Pro tip: The Carbide theme provides industrial-appropriate colors and styling',
+    );
+    log('\n🔧 Tailwind CSS and PostCSS have been configured for you');
+    log('🚀 Happy coding!', 'cyan');
+  } catch (error) {
+    log(`❌ Setup failed: ${error.message}`, 'red');
+    process.exit(1);
+  }
+}
+
+if (require.main === module) {
+  main();
+}
+
+module.exports = { main };