Package Exports

@machinemetrics/mm-react-components
@machinemetrics/mm-react-components/README
@machinemetrics/mm-react-components/docs/tailwind-setup
@machinemetrics/mm-react-components/styles
@machinemetrics/mm-react-components/tailwind.config
@machinemetrics/mm-react-components/themes/base
@machinemetrics/mm-react-components/themes/carbide
@machinemetrics/mm-react-components/themes/complete

Readme

@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

1. Install Dependencies

npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer

2. Configure Tailwind CSS

Copy the Tailwind configuration to your project:

cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js

3. Import Complete Theme (Recommended)

/* In your main CSS file - one import gets everything! */
@import '@machinemetrics/mm-react-components/themes/complete';

That's it! This single import includes:

✅ Tailwind CSS reset
✅ Base theme variables (OKLCH color system)
✅ Carbide industrial theme
✅ All component styles
✅ Dark mode support
✅ Animations and utilities

4. Use Components

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

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

5. Complete Setup Guide

For detailed setup instructions and alternative import methods, see the Tailwind Setup Guide.

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: Complete Theme (Recommended)

/* One import gets everything - easiest setup */
@import '@machinemetrics/mm-react-components/themes/complete';

Option 2: Manual Theme Import

/* Import themes separately for more control */
@import '@machinemetrics/mm-react-components/themes/base';
@import '@machinemetrics/mm-react-components/themes/carbide';

Option 3: 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();

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 with a complete theme system. The easiest way to get started is with the complete theme:

/* 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

/* Import base theme only */
@import '@machinemetrics/mm-react-components/themes/base';

/* Import Carbide theme for industrial styling */
@import '@machinemetrics/mm-react-components/themes/carbide';

// Import in JavaScript/TypeScript
import '@machinemetrics/mm-react-components/themes/complete';

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.