@machinemetrics/mm-react-components 0.1.1-1 → 0.2.3-0

package/docs/TAILWIND_SETUP.md

@@ -0,0 +1,332 @@
+# Tailwind CSS Setup for MM React Components
+
+This guide shows how to configure Tailwind CSS in your consuming application to get the same styling as the component preview interface.
+
+## Quick Setup
+
+### 1. Install Dependencies
+
+```bash
+npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
+```
+
+### 2. Copy Tailwind Configuration
+
+Copy the `tailwind.config.export.js` file to your project and rename it to `tailwind.config.js`:
+
+```bash
+cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
+```
+
+### 3. Import Theme CSS
+
+Add the theme imports to your main CSS file:
+
+```css
+/* Import base theme */
+@import '@machinemetrics/mm-react-components/themes/base';
+
+/* Import Carbide theme (optional) */
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+### 4. Configure PostCSS
+
+Create or update your `postcss.config.js`:
+
+```javascript
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+## Complete Setup Example
+
+### package.json
+
+```json
+{
+  "dependencies": {
+    "@machinemetrics/mm-react-components": "^0.2.1",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.35",
+    "autoprefixer": "^10.4.17"
+  }
+}
+```
+
+### tailwind.config.js
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@machinemetrics/mm-react-components/dist/**/*.{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)',
+        'destructive-foreground': 'var(--destructive-foreground)',
+        border: 'var(--border)',
+        input: 'var(--input)',
+        'bg-input': 'var(--bg-input)',
+        'border-input': 'var(--border-input)',
+        ring: 'var(--ring)',
+        // Chart colors for data visualization
+        'chart-1': 'var(--chart-1)',
+        'chart-2': 'var(--chart-2)',
+        'chart-3': 'var(--chart-3)',
+        'chart-4': 'var(--chart-4)',
+        'chart-5': 'var(--chart-5)',
+        // Sidebar colors
+        sidebar: 'var(--sidebar)',
+        'sidebar-foreground': 'var(--sidebar-foreground)',
+        'sidebar-primary': 'var(--sidebar-primary)',
+        'sidebar-primary-foreground': 'var(--sidebar-primary-foreground)',
+        'sidebar-accent': 'var(--sidebar-accent)',
+        'sidebar-accent-foreground': 'var(--sidebar-accent-foreground)',
+        'sidebar-border': 'var(--sidebar-border)',
+        'sidebar-ring': 'var(--sidebar-ring)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      fontFamily: {
+        sans: [
+          'Noto Sans',
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol',
+          'Noto Color Emoji',
+        ],
+        mono: [
+          'Inconsolata',
+          'ui-monospace',
+          'SFMono-Regular',
+          'Menlo',
+          'Monaco',
+          'Consolas',
+          'Liberation Mono',
+          'Courier New',
+          'monospace',
+        ],
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: 'var(--font-weight-bold)',
+      },
+      spacing: {
+        sidebar: '16rem', // 256px for sidebar width
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.2s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateX(-10px)', opacity: '0' },
+          '100%': { transform: 'translateX(0)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [
+    function ({ addUtilities, theme }) {
+      const newUtilities = {
+        '.preview-sidebar': {
+          width: '16rem',
+          minHeight: '100vh',
+          backgroundColor: 'var(--muted)',
+          borderRight: '1px solid var(--border)',
+          padding: '1rem',
+        },
+        '.preview-main': {
+          flex: '1',
+          minWidth: '0',
+          padding: '2rem',
+        },
+        '.preview-card': {
+          backgroundColor: 'var(--card)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-lg)',
+          padding: '1.5rem',
+        },
+        '.preview-nav-item': {
+          width: '100%',
+          textAlign: 'left',
+          padding: '0.75rem',
+          borderRadius: '0.375rem',
+          fontSize: '0.875rem',
+          fontWeight: '500',
+          transition: 'colors 0.2s ease-in-out',
+          '&:hover': {
+            backgroundColor: 'var(--muted)',
+            color: 'var(--foreground)',
+          },
+          '&.active': {
+            backgroundColor: 'var(--primary)',
+            color: 'var(--primary-foreground)',
+          },
+        },
+      };
+      addUtilities(newUtilities);
+    },
+  ],
+};
+```
+
+### src/index.css
+
+```css
+@import '@machinemetrics/mm-react-components/themes/base';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+@import 'tailwindcss';
+```
+
+### postcss.config.js
+
+```javascript
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+## Component Preview Interface
+
+To recreate the component preview interface from the library, use these utility classes:
+
+```tsx
+// Main layout container
+<div className="min-h-screen bg-background flex">
+  {/* Left Navigation Sidebar */}
+  <div className="preview-sidebar">
+    <h1 className="text-xl font-bold text-foreground mb-6">MM Components</h1>
+
+    {/* Theme Toggles */}
+    <div className="mb-6 space-y-3">
+      {/* Add your theme toggle components here */}
+    </div>
+
+    {/* Component Navigation */}
+    <nav className="space-y-2">
+      <button className="preview-nav-item active">Button</button>
+      <button className="preview-nav-item">Input</button>
+      {/* Add more component navigation items */}
+    </nav>
+  </div>
+
+  {/* Main Preview Pane */}
+  <div className="preview-main">
+    <div>
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold text-foreground capitalize">
+          Component Name
+        </h2>
+        <p className="text-muted-foreground mt-1">
+          Preview and test the component
+        </p>
+      </div>
+      <div className="preview-card">{/* Your component preview content */}</div>
+    </div>
+  </div>
+</div>
+```
+
+## Theme Customization
+
+### Using Base Theme Only
+
+```css
+@import '@machinemetrics/mm-react-components/themes/base';
+```
+
+### Using Carbide Theme
+
+```css
+@import '@machinemetrics/mm-react-components/themes/base';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+### Custom Theme Overrides
+
+You can override theme variables in your CSS:
+
+```css
+:root {
+  --primary: #your-custom-color;
+  --background: #your-custom-background;
+  /* Override other variables as needed */
+}
+```
+
+## Available Utility Classes
+
+The exported configuration includes these custom utility classes:
+
+- `.preview-sidebar` - Sidebar styling
+- `.preview-main` - Main content area styling
+- `.preview-card` - Component preview card styling
+- `.preview-nav-item` - Navigation item styling
+
+## Color System
+
+The configuration includes a comprehensive color system:
+
+- **Semantic Colors**: `background`, `foreground`, `primary`, `secondary`, etc.
+- **Chart Colors**: `chart-1` through `chart-5` for data visualization
+- **Sidebar Colors**: Complete sidebar color system
+- **Input Colors**: Specialized input styling colors
+
+## Typography
+
+- **Sans Font**: Noto Sans (primary), Inter, system fonts
+- **Mono Font**: Inconsolata (primary), system monospace fonts
+- **Font Weights**: Normal (400), Medium (500), Semibold (600), Bold (700)
+
+## Animation
+
+- **Fade In**: `animate-fade-in`
+- **Slide In**: `animate-slide-in`
+
+This configuration ensures your consuming application will have the same professional styling as the component preview interface.

package/package.json

@@ -1,29 +1,133 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.1.1-1",
+  "version": "0.2.3-0",
   "license": "MIT",
-  "module": "dist/mm-react-components.es.js",
-  "source": "src/index.js",
   "type": "module",
+  "main": "dist/mm-react-components.umd.js",
+  "module": "dist/mm-react-components.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mm-react-components.es.js",
+      "require": "./dist/mm-react-components.umd.js"
+    },
+    "./styles": "./dist/style.css",
+    "./themes/base": "./dist/index.css",
+    "./themes/carbide": "./dist/themes/carbide.css",
+    "./tailwind.config": "./tailwind.config.export.js",
+    "./docs/tailwind-setup": "./docs/TAILWIND_SETUP.md"
+  },
   "engines": {
     "node": ">=20"
   },
+  "bin": {
+    "chakra-to-shadcn": "scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js"
+  },
   "scripts": {
-    "build": "vite build",
-    "start": "vite build --watch"
+    "build": "vite build --mode production && tsc --project tsconfig.build.json",
+    "build:dev": "vite build --mode development",
+    "dev": "vite",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "test:visual": "playwright test --config=playwright.config.ts",
+    "test:visual:ui": "playwright test --config=playwright.config.ts --ui",
+    "test:visual:update": "playwright test --config=playwright.config.ts --update-snapshots",
+    "test:visual:ci": "playwright test --config=playwright.config.ts --reporter=github",
+    "update-components": "tsx scripts/update-components.ts",
+    "update-components:bash": "./scripts/update-components.sh",
+    "update-components:full": "tsx scripts/update-components.ts && tsx scripts/apply-customizations.ts",
+    "apply-customizations": "tsx scripts/apply-customizations.ts",
+    "generate-visual-tests": "npx tsx scripts/generate-visual-tests.ts",
+    "generate-visual-tests:overwrite": "npx tsx scripts/generate-visual-tests.ts --overwrite",
+    "create-component": "tsx scripts/create-component.ts",
+    "migrate:chakra-to-shadcn": "node scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js --project . --config scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json",
+    "shadcn:add": "shadcn add",
+    "shadcn:diff": "shadcn diff",
+    "shadcn:init": "shadcn init",
+    "ci:setup": "npm run test:visual:update",
+    "ci:check": "npm run build && npm run test:visual",
+    "prepublishOnly": "npm run type-check && npm run lint && npm run build",
+    "clean": "rm -rf dist dev-dist"
   },
-  "devDependencies": {
-    "prettier": "^3.3.3",
-    "vite": "^6.1.0"
+  "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "3.13.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.544.0",
+    "react": "^19.1.1",
+    "react-day-picker": "^9.11.0",
+    "react-dom": "^19.1.1",
+    "react-dropzone": "14.3.8",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.8",
+    "vaul": "^1.1.2"
   },
-  "peerDependencies": {
-    "@chakra-ui/react": "^2.10.5",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0",
-    "react-router-dom": "^6.29.0",
-    "styled-components": ">=4.0.0"
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@playwright/test": "^1.55.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^24.5.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@types/react-table": "^7.7.20",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
+    "@typescript-eslint/parser": "^8.43.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "playwright": "^1.55.0",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.13",
+    "terser": "^5.44.0",
+    "tsx": "^4.19.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/index.css",
+    "src/themes",
+    "tailwind.config.export.js",
+    "docs/TAILWIND_SETUP.md",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
   ]
 }

package/scripts/README.md

@@ -0,0 +1,171 @@
+# Scripts Directory
+
+This directory contains scripts for maintaining shadcn/ui components and visual regression tests.
+
+## Component Creation Script
+
+### Create New Component
+
+```bash
+npm run create-component <component-name>
+```
+
+Creates a new shadcn/ui component with automatic linting, formatting, and preview generation.
+
+**Options:**
+
+- `--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
+
+**Examples:**
+
+```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
+```
+
+**Workflow:**
+
+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
+
+## Component Update Scripts
+
+### TypeScript Version
+
+```bash
+npm run update-components
+```
+
+### Bash Version
+
+```bash
+npm run update-components:bash
+```
+
+## Visual Test Generation Scripts
+
+### Generate Missing Tests (Default)
+
+```bash
+npm run generate-visual-tests
+```
+
+Only generates tests for components that don't have test files yet. Existing tests are preserved.
+
+### Generate All Tests (Overwrite)
+
+```bash
+npm run generate-visual-tests:overwrite
+```
+
+Regenerates all test files, overwriting existing ones. Useful after template changes or major updates.
+
+## What the Component Update Scripts Do
+
+Both component update scripts will:
+
+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
+
+The scripts automatically discover components from your folder - no need to maintain a hardcoded list!
+
+## What the Visual Test Generation Scripts Do
+
+The visual test generation script will:
+
+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
+
+### Generated Test Types
+
+Each component gets tests for:
+
+- **Main Component Screenshot**: Captures the component in its default state
+- **Mobile Responsive Screenshot**: Tests the component at mobile viewport (375x667)
+
+## Features
+
+### Component Creation Script
+
+- ✅ **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
+
+### Component Update Scripts
+
+- ✅ **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
+
+### Visual Test Generation Scripts
+
+- ✅ **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
+
+## Custom Components
+
+Components listed in `CUSTOM_COMPONENTS` will be skipped during updates:
+
+- `theme-toggle` - Custom component, not from shadcn/ui
+
+To add more custom components to skip, edit the `CUSTOM_COMPONENTS` array in either script.
+
+## Requirements
+
+### TypeScript Version
+
+- `tsx` package (included in devDependencies)
+- Node.js
+
+### Bash Version
+
+- Bash shell
+- `npx` command available
+
+## Help
+
+Both scripts support `--help` flag:
+
+```bash
+npm run update-components -- --help
+./scripts/update-components.sh --help
+```
+
+## Troubleshooting
+
+If updates fail:
+
+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