Package Exports

@machinemetrics/mm-react-components
@machinemetrics/mm-react-components/README
@machinemetrics/mm-react-components/docs/getting-started
@machinemetrics/mm-react-components/docs/tailwind-setup
@machinemetrics/mm-react-components/styles
@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

🚀 Automated Setup (Recommended)

The fastest way to get started:

# 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 Dependencies

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

2. Configure Tailwind CSS

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

Use app-level JavaScript/TypeScript imports so bundlers resolve package subpaths consistently and you can toggle themes at runtime:

// In your main entry (e.g., src/main.tsx)
import '@machinemetrics/mm-react-components/styles';
import '@machinemetrics/mm-react-components/themes/carbide';
document.documentElement.classList.add('carbide');

Alternatively, you can import the complete theme in CSS:

@import '@machinemetrics/mm-react-components/themes/complete';

What's included:

✅ 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>
  );
}

📚 Documentation

Getting Started Guide - Complete setup guide
Tailwind Setup Guide - Detailed configuration
Quick Start Template - 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

Using Themes

Option 1: JS Imports (Recommended)

import '@machinemetrics/mm-react-components/styles';
import '@machinemetrics/mm-react-components/themes/carbide';
document.documentElement.classList.add('carbide');

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.