@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

npm install @machinemetrics/mm-react-components

Quick Start

import { Button, Input } from '@machinemetrics/mm-react-components';
import '@machinemetrics/mm-react-components/styles';

function App() {
  return (
    <div>
      <Button variant='primary'>Start Monitoring</Button>
      <Input placeholder='Enter machine ID...' />
    </div>
  );
}

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

Using Themes

Option 1: Import CSS Files Directly

// In your main.tsx or App.tsx
import '@machinemetrics/mm-react-components/themes/base';
import '@machinemetrics/mm-react-components/themes/carbide';

// Add carbide class to activate Carbide theme
document.documentElement.classList.add('carbide');

Option 2: Use Theme Utilities

import {
  activateCarbideTheme,
  toggleDarkMode,
  isCarbideThemeActive,
} from '@machinemetrics/mm-react-components';

// Activate Carbide theme
activateCarbideTheme();

// Toggle dark mode
toggleDarkMode();

// Check theme status
const isCarbideActive = isCarbideThemeActive();

Option 3: Manual CSS Import

/* In your CSS file */
@import '@machinemetrics/mm-react-components/themes/base';
@import '@machinemetrics/mm-react-components/themes/carbide';

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

<!-- Base theme -->
<html>
  <!-- Carbide theme -->
  <html class="carbide">
    <!-- Carbide theme + dark mode -->
    <html class="carbide dark"></html>
  </html>
</html>

Available Theme Utilities

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.

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.

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. Make sure to include the styles in your application:

import '@machinemetrics/mm-react-components/styles';

If you're using Tailwind CSS in your project, you can also import the component styles directly:

@import '@machinemetrics/mm-react-components/styles';

TypeScript Support

This library is built with TypeScript and provides full type definitions:

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 for details.

License

MIT License - see LICENSE file for details.

Support

For support and questions, please contact the MachineMetrics development team.

Built with ❤️ by the MachineMetrics team for industrial applications.