@machinemetrics/mm-react-components 0.2.3-0 → 0.2.3-10

package/agent-docs/setup-reference.md

@@ -0,0 +1,365 @@
+# Setup Reference for AI Agents
+
+## Overview
+
+This reference provides detailed setup instructions for the MachineMetrics React Components library. The library uses a **ZERO-CONFIG** approach - no build tools or configuration files required.
+
+## Setup Approach
+
+The library provides pre-compiled CSS with everything included:
+
+- Uses `/styles` import (pre-compiled CSS)
+- No build tools required
+- No configuration files needed
+- 118 KB CSS (18 KB gzipped)
+
+## Dependencies
+
+### Required
+
+| Package                               | Version | Purpose            |
+| ------------------------------------- | ------- | ------------------ |
+| `@machinemetrics/mm-react-components` | latest  | Component library  |
+| `react`                               | ^19.1.1 | React library      |
+| `react-dom`                           | ^19.1.1 | React DOM renderer |
+
+**That's it!** No build tools required.
+
+## Configuration
+
+### CSS Import
+
+**File**: `src/index.css` (or `src/main.css`)
+
+```css
+/* MM React Components - Pre-compiled CSS */
+@import '@machinemetrics/mm-react-components/styles';
+
+/* Your existing CSS here */
+```
+
+**That's it!** No other configuration files needed.
+
+**Alternative locations**:
+
+- `src/App.css`
+- `src/styles.css`
+- `src/global.css`
+
+### 4. Package.json Scripts
+
+**Recommended scripts**:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "type-check": "tsc --noEmit"
+  }
+}
+```
+
+## Framework-Specific Setup
+
+### React with Vite
+
+**Project creation**:
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+```
+
+**Setup**:
+
+```bash
+# Install the component library
+npm install @machinemetrics/mm-react-components
+
+# Add CSS import to src/index.css
+echo '@import "@machinemetrics/mm-react-components/styles";' | cat - src/index.css > temp && mv temp src/index.css
+
+# Add Carbide class to src/App.tsx root element
+```
+
+**No Vite configuration needed!** Just import and use components.
+
+### Next.js
+
+**Project creation**:
+
+```bash
+npx create-next-app@latest my-app --typescript
+cd my-app
+```
+
+**Required dependencies**:
+
+```bash
+npm install @machinemetrics/mm-react-components
+npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
+```
+
+**Next.js configuration**:
+
+```javascript
+// next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@machinemetrics/mm-react-components'],
+};
+
+module.exports = nextConfig;
+```
+
+### Create React App
+
+**Project creation**:
+
+```bash
+npx create-react-app my-app --template typescript
+cd my-app
+```
+
+**Required dependencies**:
+
+```bash
+npm install @machinemetrics/mm-react-components
+npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
+npm install -D tailwindcss autoprefixer postcss
+```
+
+**CRA configuration**:
+
+```javascript
+// craco.config.js (if using CRACO)
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require('tailwindcss'), require('autoprefixer')],
+    },
+  },
+};
+```
+
+## Component Usage Patterns
+
+### Basic Component Import
+
+```tsx
+import { Button, Input, Card } from '@machinemetrics/mm-react-components';
+```
+
+### Component with Icons
+
+```tsx
+import { Button } from '@machinemetrics/mm-react-components';
+import { Plus, Trash2 } from 'lucide-react';
+
+function MyComponent() {
+  return (
+    <Button>
+      <Plus className="w-4 h-4" />
+      Add Item
+    </Button>
+  );
+}
+```
+
+### Custom Styling
+
+```tsx
+import { Button } from '@machinemetrics/mm-react-components';
+import { cn } from '@machinemetrics/mm-react-components';
+
+function CustomButton({ className, ...props }) {
+  return <Button className={cn('custom-styles', className)} {...props} />;
+}
+```
+
+### Theme Application
+
+```tsx
+// App.tsx
+import '@machinemetrics/mm-react-components/themes/carbide';
+
+function App() {
+  return (
+    <div className="carbide">
+      <YourApp />
+    </div>
+  );
+}
+```
+
+## Troubleshooting Reference
+
+### Common Error Messages
+
+| Error                                                                   | Cause                   | Solution                                          |
+| ----------------------------------------------------------------------- | ----------------------- | ------------------------------------------------- |
+| `Module not found: Can't resolve '@machinemetrics/mm-react-components'` | Package not installed   | `npm install @machinemetrics/mm-react-components` |
+| `Cannot find module 'tailwindcss'`                                      | Tailwind not installed  | `npm install -D tailwindcss`                      |
+| `PostCSS plugin tailwindcss requires Tailwind CSS`                      | Tailwind config missing | Create `tailwind.config.js`                       |
+| `Cannot resolve dependency 'lucide-react'`                              | Icons package missing   | `npm install lucide-react`                        |
+| `Cannot find module 'clsx'`                                             | Utility missing         | `npm install clsx`                                |
+
+### Build Issues
+
+| Issue                       | Cause                      | Solution                                      |
+| --------------------------- | -------------------------- | --------------------------------------------- |
+| Build fails with CSS errors | PostCSS not configured     | Create `postcss.config.js`                    |
+| Components not styled       | Theme not imported         | Import Carbide theme in CSS                   |
+| Icons not displaying        | Lucide React not installed | `npm install lucide-react`                    |
+| TypeScript errors           | Types not found            | Install `@types/react` and `@types/react-dom` |
+
+### Runtime Issues
+
+| Issue                      | Cause                     | Solution                                  |
+| -------------------------- | ------------------------- | ----------------------------------------- |
+| Components render unstyled | Carbide class not applied | Add `className="carbide"` to root         |
+| Icons not showing          | Import path incorrect     | Use `import { Icon } from 'lucide-react'` |
+| Styling conflicts          | CSS order issues          | Import theme CSS first                    |
+| Performance issues         | Bundle size               | Use tree shaking for imports              |
+
+## Validation Steps
+
+### 1. Dependency Check
+
+```bash
+# Check if all dependencies are installed
+npm list @machinemetrics/mm-react-components
+npm list tailwindcss
+npm list lucide-react
+```
+
+### 2. Configuration Check
+
+```bash
+# Verify configuration files exist
+ls -la tailwind.config.js
+ls -la postcss.config.js
+ls -la src/index.css
+```
+
+### 3. Import Test
+
+```tsx
+// Test component import
+import { Button } from '@machinemetrics/mm-react-components';
+
+function TestComponent() {
+  return <Button>Test</Button>;
+}
+```
+
+### 4. Theme Test
+
+```tsx
+// Test theme application
+function ThemeTest() {
+  return (
+    <div className="carbide">
+      <div className="bg-primary text-primary-foreground p-4">Theme Test</div>
+    </div>
+  );
+}
+```
+
+### 5. Build Test
+
+```bash
+# Test build process
+npm run build
+
+# Test development server
+npm run dev
+```
+
+## Performance Optimization
+
+### Bundle Size Optimization
+
+```tsx
+// Import only needed components
+import { Button } from '@machinemetrics/mm-react-components';
+
+// Instead of
+import * as Components from '@machinemetrics/mm-react-components';
+```
+
+### Tree Shaking
+
+```javascript
+// webpack.config.js
+module.exports = {
+  optimization: {
+    usedExports: true,
+    sideEffects: false,
+  },
+};
+```
+
+### CSS Optimization
+
+```css
+/* Use only needed theme parts */
+@import '@machinemetrics/mm-react-components/themes/carbide';
+
+/* Purge unused CSS */
+/* Tailwind will automatically purge unused styles */
+```
+
+## Security Considerations
+
+### Dependency Security
+
+```bash
+# Check for vulnerabilities
+npm audit
+
+# Fix vulnerabilities
+npm audit fix
+```
+
+### Content Security Policy
+
+```html
+<!-- Add CSP for external resources -->
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self'; style-src 'self' 'unsafe-inline';"
+/>
+```
+
+## Monitoring and Debugging
+
+### Development Tools
+
+```tsx
+// Add development helpers
+if (process.env.NODE_ENV === 'development') {
+  console.log('MM Components loaded');
+}
+```
+
+### Error Boundaries
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+
+function App() {
+  return (
+    <ErrorBoundary fallback={<div>Something went wrong</div>}>
+      <YourApp />
+    </ErrorBoundary>
+  );
+}
+```
+
+## Conclusion
+
+This reference provides comprehensive setup instructions for the MachineMetrics React Components library. Use this as a guide for automated setup tools and manual configuration processes. Always test your setup thoroughly to ensure everything is working correctly.

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAwEA,iBAAS,GAAG,4CAmPX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAsEA,iBAAS,GAAG,4CAmPX;AAED,eAAe,GAAG,CAAC"}

package/dist/README.md

@@ -0,0 +1,332 @@
+# @machinemetrics/mm-react-components
+
+A comprehensive React component library designed specifically for MachineMetrics industrial and manufacturing applications.
+
+## Features
+
+- 🏭 **Industrial-Focused**: Components designed for manufacturing and industrial environments
+- 🎨 **Modern Design**: Built on shadcn/ui with Tailwind CSS for consistent, accessible UI
+- 📦 **Tree-Shakable**: ES modules with full tree-shaking support
+- 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- ♿ **Accessible**: WCAG 2.1 AA compliant components
+- 🚀 **Performance**: Optimized for real-time data display and monitoring
+
+## Installation
+
+```bash
+npm install @machinemetrics/mm-react-components
+```
+
+**Required Dependencies:**
+
+- React 19+
+- React DOM 19+
+
+**Optional Dependencies (only if using `/themes/carbide`):**
+
+- Tailwind CSS 4.0+
+- PostCSS 8.5+
+- Autoprefixer 10+
+
+> 💡 **Note:** When using `/styles` (recommended), no build tools are required! The CSS is fully compiled.
+
+## Quick Start
+
+### 🚀 Automated Setup (Recommended)
+
+The fastest way to get started:
+
+```bash
+# Install the package
+npm install @machinemetrics/mm-react-components
+
+# Run the automated setup
+npx @machinemetrics/mm-react-components/setup
+```
+
+This will automatically:
+
+- ✅ Copy Tailwind configuration
+- ✅ Create PostCSS configuration
+- ✅ Set up the complete theme
+- ✅ Create an example component
+- ✅ Generate all necessary files
+
+### 📋 Manual Setup
+
+If you prefer manual setup:
+
+#### 1. Install the Library
+
+```bash
+npm install @machinemetrics/mm-react-components
+```
+
+**Optional:** Only install Tailwind if you want to use `/themes/carbide` instead of `/styles`:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+```
+
+#### 2. (Optional) Configure Tailwind CSS
+
+> 💡 Skip this step if using `/styles` - Tailwind configuration is not needed!
+
+**Only if using `/themes/carbide`:**
+
+```bash
+cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
+```
+
+Note: The exported config is the main config (no preview-only utilities). The preview app in this repo uses a separate `tailwind.preview.config.js` that imports the main config and adds preview utilities.
+
+#### 3. Import Styles
+
+Import the complete styles including Tailwind CSS, base styles, and Carbide theme:
+
+```ts
+// In your main entry (e.g., src/main.tsx)
+import '@machinemetrics/mm-react-components/styles';
+document.documentElement.classList.add('carbide');
+```
+
+**What's included in `/styles` (118 KB, 18 KB gzipped):**
+
+- ✅ Tailwind CSS reset and utilities (compiled)
+- ✅ Base theme variables (OKLCH color system)
+- ✅ Carbide industrial theme
+- ✅ All component styles (focus states, rings, borders, etc.)
+- ✅ Dark mode support
+- ✅ Animations and utilities
+
+#### 4. Use Components
+
+```tsx
+import { Button, Input } from '@machinemetrics/mm-react-components';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Start Monitoring</Button>
+      <Input placeholder="Enter machine ID..." />
+    </div>
+  );
+}
+```
+
+### 📚 Documentation
+
+- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
+- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
+- [Quick Start Template](./templates/quick-start.html) - Live demo
+
+## Theme System
+
+The component library includes a comprehensive theme system with two main themes:
+
+### Base Theme (OKLCH)
+
+- Modern OKLCH color space for better perceptual uniformity
+- Professional typography with Noto Sans and Inconsolata fonts
+- Complete dark mode support
+- Chart and sidebar color systems
+
+### Carbide Theme (Industrial)
+
+- Manufacturing-appropriate color palette
+- MachineMetrics brand colors (green, grey)
+- Enhanced component styling for industrial applications
+- Complete dark mode support
+
+### Import Options
+
+#### Option 1: Complete Styles (Recommended - 118 KB gzipped)
+
+Import everything including Tailwind utilities, theme, and animations:
+
+```ts
+import '@machinemetrics/mm-react-components/styles';
+document.documentElement.classList.add('carbide');
+```
+
+**Includes:**
+
+- ✅ All Tailwind utilities (compiled)
+- ✅ Carbide theme variables
+- ✅ Component styles with focus states
+- ✅ Dark mode support
+- ✅ Animations
+
+#### Option 2: Theme Only (41 KB - if you already have Tailwind)
+
+Import just the Carbide theme variables and component overrides:
+
+```ts
+import '@machinemetrics/mm-react-components/themes/carbide';
+document.documentElement.classList.add('carbide');
+```
+
+**Use this if:**
+
+- You already have Tailwind CSS in your project
+- You want to minimize bundle size
+- You're using our components with your own Tailwind config
+
+#### Option 3: Use Theme Utilities
+
+```tsx
+import {
+  activateCarbideTheme,
+  toggleDarkMode,
+  isCarbideThemeActive,
+} from '@machinemetrics/mm-react-components';
+
+// Activate Carbide theme
+activateCarbideTheme();
+
+// Toggle dark mode
+toggleDarkMode();
+
+// Check theme status
+const isCarbideActive = isCarbideThemeActive();
+```
+
+### Theme Classes
+
+The theme system uses CSS classes for activation:
+
+- **Base theme**: Active by default
+- **Carbide theme**: Add `carbide` class to `<html>` element
+- **Dark mode**: Add `dark` class to `<html>` element
+
+```html
+<!-- Base theme -->
+<html>
+  <!-- Carbide theme -->
+  <html class="carbide">
+    <!-- Carbide theme + dark mode -->
+    <html class="carbide dark"></html>
+  </html>
+</html>
+```
+
+### Available Theme Utilities
+
+```tsx
+import {
+  // Carbide theme utilities
+  activateCarbideTheme,
+  deactivateCarbideTheme,
+  toggleCarbideTheme,
+  isCarbideThemeActive,
+
+  // Dark mode utilities
+  activateDarkMode,
+  deactivateDarkMode,
+  toggleDarkMode,
+  isDarkModeActive,
+} from '@machinemetrics/mm-react-components';
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants for different use cases.
+
+```tsx
+import { Button } from '@machinemetrics/mm-react-components';
+
+// Basic usage
+<Button>Default</Button>
+
+// Variants
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="destructive">Destructive</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+```
+
+### Input
+
+Form input component with built-in validation states.
+
+```tsx
+import { Input } from '@machinemetrics/mm-react-components';
+
+<Input placeholder="Enter value..." />
+<Input type="email" placeholder="Email address" />
+<Input type="password" placeholder="Password" />
+```
+
+## Styling
+
+The component library uses Tailwind CSS with a complete theme system. The easiest way to get started is with the complete theme:
+
+```css
+/* Recommended: One import gets everything */
+@import '@machinemetrics/mm-react-components/themes/complete';
+```
+
+This includes:
+
+- Tailwind CSS reset and base styles
+- OKLCH color system with dark mode support
+- Carbide industrial theme
+- All component styles and animations
+
+### Alternative Import Methods
+
+```css
+/* Import complete styles including Carbide theme */
+@import '@machinemetrics/mm-react-components/styles';
+```
+
+```tsx
+// Import in JavaScript/TypeScript
+import '@machinemetrics/mm-react-components/styles';
+```
+
+## TypeScript Support
+
+This library is built with TypeScript and provides full type definitions:
+
+```tsx
+import { Button, type ButtonProps } from '@machinemetrics/mm-react-components';
+
+const CustomButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## Requirements
+
+- React 18.0.0 or higher
+- Node.js 20.0.0 or higher
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Support
+
+For support and questions, please contact the MachineMetrics development team.
+
+---
+
+Built with ❤️ by the MachineMetrics team for industrial applications.

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map