@machinemetrics/mm-react-components 0.1.1-0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+- Initial component library setup
+- Button component with multiple variants
+- Input component with validation states
+- TypeScript support with full type definitions
+- Tailwind CSS integration
+- ESLint and Prettier configuration
+- Playwright testing setup
+
+### Changed
+
+- N/A
+
+### Deprecated
+
+- N/A
+
+### Removed
+
+- N/A
+
+### Fixed
+
+- N/A
+
+### Security
+
+- N/A
+
+## [0.1.0] - 2025-01-27
+
+### Added
+
+- Initial release of @machinemetrics/mm-react-components
+- Button component with variants: default, primary, secondary, outline, destructive
+- Input component with type support
+- Utility functions for class name merging
+- Comprehensive TypeScript configuration
+- Modern build system with Vite
+- ESLint and Prettier for code quality
+- Playwright for end-to-end testing
+- NPM distribution configuration
+
+### Technical Details
+
+- Built on React 19.1.1
+- Uses shadcn/ui as component foundation
+- Tailwind CSS for styling
+- ES modules and UMD bundle support
+- Tree-shakable architecture
+- WCAG 2.1 AA accessibility compliance

package/README.md

@@ -0,0 +1,218 @@
+# @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
+```
+
+## Quick Start
+
+```tsx
+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
+
+```tsx
+// 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
+
+```tsx
+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
+
+```css
+/* 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
+
+```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. Make sure to include the styles in your application:
+
+```tsx
+import '@machinemetrics/mm-react-components/styles';
+```
+
+If you're using Tailwind CSS in your project, you can also import the component styles directly:
+
+```css
+@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/App.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

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

package/dist/components/ui/button.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default" size="lg" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as a different element using Radix Slot */
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA2BnB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFAWX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+/**
+ * Checkbox component with checked, unchecked, and indeterminate states
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   id="terms"
+ *   checked={checked}
+ *   onCheckedChange={(value) => setChecked(value)}
+ * />
+ * ```
+ */
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/ui/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAK9D;;;;;;;;;;;GAWG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAkBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/input.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Input component for text, email, password, and other input types
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ * ```
+ */
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAErE,QAAA,MAAM,KAAK,qFAcV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/label.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+/**
+ * Label component for form inputs and accessibility
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email Address</Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAIxD;;;;;;;;GAQG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+/**
+ * RadioGroup component for single selection from multiple options
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={selected} onValueChange={setSelected}>
+ *   <RadioGroupItem value="option1" id="option1" />
+ *   <Label htmlFor="option1">Option 1</Label>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual radio button item within a RadioGroup
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupItem value="option1" id="option1" />
+ * ```
+ */
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/ui/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAKnE;;;;;;;;;;GAUG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAkBvD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { cn } from './lib/utils';
+export { Button, buttonVariants } from './components/ui/button';
+export { Input } from './components/ui/input';
+export { activateCarbideTheme } from './lib/theme-utils';
+export { Label } from './components/ui/label';
+export { Checkbox } from './components/ui/checkbox';
+export { RadioGroup, RadioGroupItem } from './components/ui/radio-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/lib/theme-utils.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Theme utilities for mm-react-components
+ *
+ * These utilities help consuming applications integrate the Carbide theme system.
+ */
+/**
+ * Activates the Carbide theme by adding the 'carbide' class to the document element.
+ * This should be called once when your application initializes.
+ *
+ * @example
+ * ```tsx
+ * import { activateCarbideTheme } from '@machinemetrics/mm-react-components';
+ *
+ * // In your main.tsx or App.tsx
+ * activateCarbideTheme();
+ * ```
+ */
+export declare function activateCarbideTheme(): void;
+/**
+ * Deactivates the Carbide theme by removing the 'carbide' class from the document element.
+ *
+ * @example
+ * ```tsx
+ * import { deactivateCarbideTheme } from '@machinemetrics/mm-react-components';
+ *
+ * // To switch back to base theme
+ * deactivateCarbideTheme();
+ * ```
+ */
+export declare function deactivateCarbideTheme(): void;
+/**
+ * Toggles the Carbide theme on/off.
+ *
+ * @example
+ * ```tsx
+ * import { toggleCarbideTheme } from '@machinemetrics/mm-react-components';
+ *
+ * // Toggle theme
+ * toggleCarbideTheme();
+ * ```
+ */
+export declare function toggleCarbideTheme(): void;
+/**
+ * Checks if the Carbide theme is currently active.
+ *
+ * @returns true if Carbide theme is active, false otherwise
+ *
+ * @example
+ * ```tsx
+ * import { isCarbideThemeActive } from '@machinemetrics/mm-react-components';
+ *
+ * const isActive = isCarbideThemeActive();
+ * console.log('Carbide theme is active:', isActive);
+ * ```
+ */
+export declare function isCarbideThemeActive(): boolean;
+/**
+ * Activates dark mode by adding the 'dark' class to the document element.
+ *
+ * @example
+ * ```tsx
+ * import { activateDarkMode } from '@machinemetrics/mm-react-components';
+ *
+ * activateDarkMode();
+ * ```
+ */
+export declare function activateDarkMode(): void;
+/**
+ * Deactivates dark mode by removing the 'dark' class from the document element.
+ *
+ * @example
+ * ```tsx
+ * import { deactivateDarkMode } from '@machinemetrics/mm-react-components';
+ *
+ * deactivateDarkMode();
+ * ```
+ */
+export declare function deactivateDarkMode(): void;
+/**
+ * Toggles dark mode on/off.
+ *
+ * @example
+ * ```tsx
+ * import { toggleDarkMode } from '@machinemetrics/mm-react-components';
+ *
+ * toggleDarkMode();
+ * ```
+ */
+export declare function toggleDarkMode(): void;
+/**
+ * Checks if dark mode is currently active.
+ *
+ * @returns true if dark mode is active, false otherwise
+ *
+ * @example
+ * ```tsx
+ * import { isDarkModeActive } from '@machinemetrics/mm-react-components';
+ *
+ * const isDark = isDarkModeActive();
+ * console.log('Dark mode is active:', isDark);
+ * ```
+ */
+export declare function isDarkModeActive(): boolean;
+//# sourceMappingURL=theme-utils.d.ts.map

package/dist/lib/theme-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-utils.d.ts","sourceRoot":"","sources":["../../src/lib/theme-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAIzC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAK9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAIzC;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAIrC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAK1C"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/main.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import './themes/carbide.css';
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AACrB,OAAO,sBAAsB,CAAC"}