@machinemetrics/mm-react-components 0.2.3-1 → 0.2.3-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -14
- package/dist/App.d.ts.map +1 -1
- package/dist/README.md +51 -14
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/docs/GETTING_STARTED.md +285 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/main.d.ts +2 -2
- package/dist/main.d.ts.map +1 -1
- package/dist/mm-react-components.es.js +1837 -75
- package/dist/mm-react-components.es.js.map +1 -1
- package/dist/mm-react-components.umd.js +10 -10
- package/dist/mm-react-components.umd.js.map +1 -1
- package/dist/preview/CheckboxPreview.d.ts.map +1 -1
- package/dist/preview/DataTablePreview.d.ts.map +1 -1
- package/dist/preview/InputPreview.d.ts.map +1 -1
- package/dist/preview/LabelPreview.d.ts.map +1 -1
- package/dist/preview/RadioGroupPreview.d.ts.map +1 -1
- package/dist/preview/TabsPreview.d.ts.map +1 -1
- package/dist/preview/data-table/data-table-preview_column-content.d.ts +1 -1
- package/dist/preview/data-table/data-table-preview_column-content.d.ts.map +1 -1
- package/dist/preview/page-header/PageHeaderPreview.d.ts.map +1 -1
- package/dist/themes/base.css +536 -0
- package/dist/themes/complete.css +2 -2
- package/package.json +21 -2
- package/src/themes/base.css +536 -0
- package/src/themes/complete.css +2 -2
- package/dist/tailwind.config.export.js +0 -153
- package/tailwind.config.export.js +0 -153
package/README.md
CHANGED
|
@@ -19,28 +19,62 @@ npm install @machinemetrics/mm-react-components
|
|
|
19
19
|
|
|
20
20
|
## Quick Start
|
|
21
21
|
|
|
22
|
-
###
|
|
22
|
+
### 🚀 Automated Setup (Recommended)
|
|
23
|
+
|
|
24
|
+
The fastest way to get started:
|
|
23
25
|
|
|
24
26
|
```bash
|
|
25
|
-
|
|
27
|
+
# Install the package
|
|
28
|
+
npm install @machinemetrics/mm-react-components
|
|
29
|
+
|
|
30
|
+
# Run the automated setup
|
|
31
|
+
npx @machinemetrics/mm-react-components/setup
|
|
26
32
|
```
|
|
27
33
|
|
|
28
|
-
|
|
34
|
+
This will automatically:
|
|
35
|
+
|
|
36
|
+
- ✅ Copy Tailwind configuration
|
|
37
|
+
- ✅ Create PostCSS configuration
|
|
38
|
+
- ✅ Set up the complete theme
|
|
39
|
+
- ✅ Create an example component
|
|
40
|
+
- ✅ Generate all necessary files
|
|
29
41
|
|
|
30
|
-
|
|
42
|
+
### 📋 Manual Setup
|
|
43
|
+
|
|
44
|
+
If you prefer manual setup:
|
|
45
|
+
|
|
46
|
+
#### 1. Install Dependencies
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### 2. Configure Tailwind CSS
|
|
31
53
|
|
|
32
54
|
```bash
|
|
33
55
|
cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
|
|
34
56
|
```
|
|
35
57
|
|
|
36
|
-
|
|
58
|
+
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.
|
|
59
|
+
|
|
60
|
+
#### 3. Import Theme (Recommended: JS imports)
|
|
61
|
+
|
|
62
|
+
Use app-level JavaScript/TypeScript imports so bundlers resolve package subpaths consistently and you can toggle themes at runtime:
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
// In your main entry (e.g., src/main.tsx)
|
|
66
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
67
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
68
|
+
document.documentElement.classList.add('carbide');
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Alternatively, you can import the complete theme in CSS:
|
|
37
72
|
|
|
38
73
|
```css
|
|
39
|
-
/* In your main CSS file - one import gets everything! */
|
|
40
74
|
@import '@machinemetrics/mm-react-components/themes/complete';
|
|
41
75
|
```
|
|
42
76
|
|
|
43
|
-
**
|
|
77
|
+
**What's included:**
|
|
44
78
|
|
|
45
79
|
- ✅ Tailwind CSS reset
|
|
46
80
|
- ✅ Base theme variables (OKLCH color system)
|
|
@@ -49,7 +83,7 @@ cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js ta
|
|
|
49
83
|
- ✅ Dark mode support
|
|
50
84
|
- ✅ Animations and utilities
|
|
51
85
|
|
|
52
|
-
|
|
86
|
+
#### 4. Use Components
|
|
53
87
|
|
|
54
88
|
```tsx
|
|
55
89
|
import { Button, Input } from '@machinemetrics/mm-react-components';
|
|
@@ -64,9 +98,11 @@ function App() {
|
|
|
64
98
|
}
|
|
65
99
|
```
|
|
66
100
|
|
|
67
|
-
###
|
|
101
|
+
### 📚 Documentation
|
|
68
102
|
|
|
69
|
-
|
|
103
|
+
- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
|
|
104
|
+
- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
|
|
105
|
+
- [Quick Start Template](./templates/quick-start.html) - Live demo
|
|
70
106
|
|
|
71
107
|
## Theme System
|
|
72
108
|
|
|
@@ -88,11 +124,12 @@ The component library includes a comprehensive theme system with two main themes
|
|
|
88
124
|
|
|
89
125
|
### Using Themes
|
|
90
126
|
|
|
91
|
-
#### Option 1:
|
|
127
|
+
#### Option 1: JS Imports (Recommended)
|
|
92
128
|
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
|
|
129
|
+
```ts
|
|
130
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
131
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
132
|
+
document.documentElement.classList.add('carbide');
|
|
96
133
|
```
|
|
97
134
|
|
|
98
135
|
#### Option 2: Manual Theme Import
|
package/dist/App.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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
CHANGED
|
@@ -19,28 +19,62 @@ npm install @machinemetrics/mm-react-components
|
|
|
19
19
|
|
|
20
20
|
## Quick Start
|
|
21
21
|
|
|
22
|
-
###
|
|
22
|
+
### 🚀 Automated Setup (Recommended)
|
|
23
|
+
|
|
24
|
+
The fastest way to get started:
|
|
23
25
|
|
|
24
26
|
```bash
|
|
25
|
-
|
|
27
|
+
# Install the package
|
|
28
|
+
npm install @machinemetrics/mm-react-components
|
|
29
|
+
|
|
30
|
+
# Run the automated setup
|
|
31
|
+
npx @machinemetrics/mm-react-components/setup
|
|
26
32
|
```
|
|
27
33
|
|
|
28
|
-
|
|
34
|
+
This will automatically:
|
|
35
|
+
|
|
36
|
+
- ✅ Copy Tailwind configuration
|
|
37
|
+
- ✅ Create PostCSS configuration
|
|
38
|
+
- ✅ Set up the complete theme
|
|
39
|
+
- ✅ Create an example component
|
|
40
|
+
- ✅ Generate all necessary files
|
|
29
41
|
|
|
30
|
-
|
|
42
|
+
### 📋 Manual Setup
|
|
43
|
+
|
|
44
|
+
If you prefer manual setup:
|
|
45
|
+
|
|
46
|
+
#### 1. Install Dependencies
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### 2. Configure Tailwind CSS
|
|
31
53
|
|
|
32
54
|
```bash
|
|
33
55
|
cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
|
|
34
56
|
```
|
|
35
57
|
|
|
36
|
-
|
|
58
|
+
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.
|
|
59
|
+
|
|
60
|
+
#### 3. Import Theme (Recommended: JS imports)
|
|
61
|
+
|
|
62
|
+
Use app-level JavaScript/TypeScript imports so bundlers resolve package subpaths consistently and you can toggle themes at runtime:
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
// In your main entry (e.g., src/main.tsx)
|
|
66
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
67
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
68
|
+
document.documentElement.classList.add('carbide');
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Alternatively, you can import the complete theme in CSS:
|
|
37
72
|
|
|
38
73
|
```css
|
|
39
|
-
/* In your main CSS file - one import gets everything! */
|
|
40
74
|
@import '@machinemetrics/mm-react-components/themes/complete';
|
|
41
75
|
```
|
|
42
76
|
|
|
43
|
-
**
|
|
77
|
+
**What's included:**
|
|
44
78
|
|
|
45
79
|
- ✅ Tailwind CSS reset
|
|
46
80
|
- ✅ Base theme variables (OKLCH color system)
|
|
@@ -49,7 +83,7 @@ cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js ta
|
|
|
49
83
|
- ✅ Dark mode support
|
|
50
84
|
- ✅ Animations and utilities
|
|
51
85
|
|
|
52
|
-
|
|
86
|
+
#### 4. Use Components
|
|
53
87
|
|
|
54
88
|
```tsx
|
|
55
89
|
import { Button, Input } from '@machinemetrics/mm-react-components';
|
|
@@ -64,9 +98,11 @@ function App() {
|
|
|
64
98
|
}
|
|
65
99
|
```
|
|
66
100
|
|
|
67
|
-
###
|
|
101
|
+
### 📚 Documentation
|
|
68
102
|
|
|
69
|
-
|
|
103
|
+
- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
|
|
104
|
+
- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
|
|
105
|
+
- [Quick Start Template](./templates/quick-start.html) - Live demo
|
|
70
106
|
|
|
71
107
|
## Theme System
|
|
72
108
|
|
|
@@ -88,11 +124,12 @@ The component library includes a comprehensive theme system with two main themes
|
|
|
88
124
|
|
|
89
125
|
### Using Themes
|
|
90
126
|
|
|
91
|
-
#### Option 1:
|
|
127
|
+
#### Option 1: JS Imports (Recommended)
|
|
92
128
|
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
|
|
129
|
+
```ts
|
|
130
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
131
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
132
|
+
document.documentElement.classList.add('carbide');
|
|
96
133
|
```
|
|
97
134
|
|
|
98
135
|
#### Option 2: Manual Theme Import
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
# Getting Started with MM React Components
|
|
2
|
+
|
|
3
|
+
This guide will help you get up and running with MM React Components in your application.
|
|
4
|
+
|
|
5
|
+
## 🚀 Quick Start (Recommended)
|
|
6
|
+
|
|
7
|
+
The fastest way to get started is with our automated setup:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Install the package
|
|
11
|
+
npm install @machinemetrics/mm-react-components
|
|
12
|
+
|
|
13
|
+
# Run the automated setup
|
|
14
|
+
npx @machinemetrics/mm-react-components/setup
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
This will:
|
|
18
|
+
|
|
19
|
+
- ✅ Copy the Tailwind configuration
|
|
20
|
+
- ✅ Create PostCSS configuration
|
|
21
|
+
- ✅ Set up the complete theme
|
|
22
|
+
- ✅ Create an example component
|
|
23
|
+
- ✅ Generate all necessary files
|
|
24
|
+
|
|
25
|
+
## 📋 Manual Setup
|
|
26
|
+
|
|
27
|
+
If you prefer to set up manually:
|
|
28
|
+
|
|
29
|
+
### 1. Install Dependencies
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### 2. Configure Tailwind CSS
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 3. Create PostCSS Configuration
|
|
42
|
+
|
|
43
|
+
```javascript
|
|
44
|
+
// postcss.config.js
|
|
45
|
+
export default {
|
|
46
|
+
plugins: {
|
|
47
|
+
tailwindcss: {},
|
|
48
|
+
autoprefixer: {},
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 4. Import Complete Theme
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
/* src/index.css or your main CSS file */
|
|
57
|
+
@import '@machinemetrics/mm-react-components/themes/complete';
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### 5. Use Components
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { Button, Input, Badge } from '@machinemetrics/mm-react-components';
|
|
64
|
+
|
|
65
|
+
function App() {
|
|
66
|
+
return (
|
|
67
|
+
<div>
|
|
68
|
+
<Button variant="primary">Start Monitoring</Button>
|
|
69
|
+
<Input placeholder="Enter machine ID..." />
|
|
70
|
+
<Badge variant="secondary">Status</Badge>
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## 🎨 Theme System
|
|
77
|
+
|
|
78
|
+
### Base Theme (Default)
|
|
79
|
+
|
|
80
|
+
The base theme provides a modern, professional look with:
|
|
81
|
+
|
|
82
|
+
- OKLCH color system for better perceptual uniformity
|
|
83
|
+
- Noto Sans and Inconsolata fonts
|
|
84
|
+
- Complete dark mode support
|
|
85
|
+
- Chart and sidebar color systems
|
|
86
|
+
|
|
87
|
+
### Carbide Theme (Industrial)
|
|
88
|
+
|
|
89
|
+
The Carbide theme adds industrial styling:
|
|
90
|
+
|
|
91
|
+
- Manufacturing-appropriate color palette
|
|
92
|
+
- MachineMetrics brand colors
|
|
93
|
+
- Enhanced component styling for industrial applications
|
|
94
|
+
|
|
95
|
+
#### Activating Carbide Theme
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { activateCarbideTheme } from '@machinemetrics/mm-react-components';
|
|
99
|
+
|
|
100
|
+
// Activate Carbide theme
|
|
101
|
+
activateCarbideTheme();
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Or add the class manually:
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<html class="carbide"></html>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## 🔧 Build System Support
|
|
111
|
+
|
|
112
|
+
### Vite
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
// vite.config.js
|
|
116
|
+
import { defineConfig } from 'vite';
|
|
117
|
+
import react from '@vitejs/plugin-react';
|
|
118
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
119
|
+
|
|
120
|
+
export default defineConfig({
|
|
121
|
+
plugins: [react(), tailwindcss()],
|
|
122
|
+
});
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Create React App
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
# Install additional dependencies
|
|
129
|
+
npm install @craco/craco
|
|
130
|
+
|
|
131
|
+
# Create craco.config.js
|
|
132
|
+
module.exports = {
|
|
133
|
+
style: {
|
|
134
|
+
postcss: {
|
|
135
|
+
plugins: [
|
|
136
|
+
require('tailwindcss'),
|
|
137
|
+
require('autoprefixer'),
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
},
|
|
141
|
+
};
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Next.js
|
|
145
|
+
|
|
146
|
+
```javascript
|
|
147
|
+
// next.config.js
|
|
148
|
+
/** @type {import('next').NextConfig} */
|
|
149
|
+
const nextConfig = {
|
|
150
|
+
experimental: {
|
|
151
|
+
appDir: true,
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
module.exports = nextConfig;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## 📦 Available Exports
|
|
159
|
+
|
|
160
|
+
The package provides several export paths:
|
|
161
|
+
|
|
162
|
+
```javascript
|
|
163
|
+
// Main components and utilities
|
|
164
|
+
import { Button, Input, Badge } from '@machinemetrics/mm-react-components';
|
|
165
|
+
|
|
166
|
+
// Theme utilities
|
|
167
|
+
import {
|
|
168
|
+
activateCarbideTheme,
|
|
169
|
+
toggleDarkMode,
|
|
170
|
+
} from '@machinemetrics/mm-react-components';
|
|
171
|
+
|
|
172
|
+
// CSS imports
|
|
173
|
+
import '@machinemetrics/mm-react-components/themes/complete';
|
|
174
|
+
import '@machinemetrics/mm-react-components/themes/base';
|
|
175
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
176
|
+
|
|
177
|
+
// Configuration
|
|
178
|
+
import tailwindConfig from '@machinemetrics/mm-react-components/tailwind.config';
|
|
179
|
+
|
|
180
|
+
// Documentation
|
|
181
|
+
import '@machinemetrics/mm-react-components/README';
|
|
182
|
+
import '@machinemetrics/mm-react-components/docs/tailwind-setup';
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## 🎯 Common Use Cases
|
|
186
|
+
|
|
187
|
+
### Manufacturing Dashboard
|
|
188
|
+
|
|
189
|
+
```tsx
|
|
190
|
+
import {
|
|
191
|
+
Button,
|
|
192
|
+
Card,
|
|
193
|
+
DataTable,
|
|
194
|
+
Progress,
|
|
195
|
+
activateCarbideTheme,
|
|
196
|
+
} from '@machinemetrics/mm-react-components';
|
|
197
|
+
|
|
198
|
+
function ManufacturingDashboard() {
|
|
199
|
+
useEffect(() => {
|
|
200
|
+
activateCarbideTheme();
|
|
201
|
+
}, []);
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
<div className="p-6 space-y-6">
|
|
205
|
+
<Card>
|
|
206
|
+
<CardHeader>
|
|
207
|
+
<CardTitle>Machine Status</CardTitle>
|
|
208
|
+
</CardHeader>
|
|
209
|
+
<CardContent>
|
|
210
|
+
<Progress value={75} />
|
|
211
|
+
</CardContent>
|
|
212
|
+
</Card>
|
|
213
|
+
|
|
214
|
+
<DataTable
|
|
215
|
+
data={machineData}
|
|
216
|
+
columns={columns}
|
|
217
|
+
onRowClick={handleRowClick}
|
|
218
|
+
/>
|
|
219
|
+
</div>
|
|
220
|
+
);
|
|
221
|
+
}
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Form with Validation
|
|
225
|
+
|
|
226
|
+
```tsx
|
|
227
|
+
import { Input, Button, Label } from '@machinemetrics/mm-react-components';
|
|
228
|
+
|
|
229
|
+
function MachineForm() {
|
|
230
|
+
return (
|
|
231
|
+
<form className="space-y-4">
|
|
232
|
+
<div>
|
|
233
|
+
<Label htmlFor="machine-id">Machine ID</Label>
|
|
234
|
+
<Input id="machine-id" placeholder="Enter machine ID" />
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<div>
|
|
238
|
+
<Label htmlFor="description">Description</Label>
|
|
239
|
+
<Input id="description" placeholder="Enter description" />
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<Button type="submit">Save Machine</Button>
|
|
243
|
+
</form>
|
|
244
|
+
);
|
|
245
|
+
}
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
## 🐛 Troubleshooting
|
|
249
|
+
|
|
250
|
+
### Styles Not Loading
|
|
251
|
+
|
|
252
|
+
1. **Check import order**: Make sure the theme import comes before other CSS
|
|
253
|
+
2. **Verify Tailwind config**: Ensure the content paths include the component library
|
|
254
|
+
3. **Check build process**: Make sure your build system processes CSS through Tailwind
|
|
255
|
+
|
|
256
|
+
### Theme Not Applying
|
|
257
|
+
|
|
258
|
+
1. **Activate Carbide theme**: Call `activateCarbideTheme()` or add `carbide` class
|
|
259
|
+
2. **Check CSS variables**: Verify that CSS custom properties are defined
|
|
260
|
+
3. **Inspect elements**: Use browser dev tools to check computed styles
|
|
261
|
+
|
|
262
|
+
### Build Errors
|
|
263
|
+
|
|
264
|
+
1. **TypeScript errors**: Ensure you have the latest types installed
|
|
265
|
+
2. **Import errors**: Check that you're using the correct import paths
|
|
266
|
+
3. **CSS processing**: Verify PostCSS and Tailwind are configured correctly
|
|
267
|
+
|
|
268
|
+
## 📚 Additional Resources
|
|
269
|
+
|
|
270
|
+
- [Complete API Reference](./API.md)
|
|
271
|
+
- [Tailwind Setup Guide](./TAILWIND_SETUP.md)
|
|
272
|
+
- [Component Examples](./EXAMPLES.md)
|
|
273
|
+
- [Theme Customization](./THEMES.md)
|
|
274
|
+
|
|
275
|
+
## 🤝 Support
|
|
276
|
+
|
|
277
|
+
For support and questions:
|
|
278
|
+
|
|
279
|
+
- GitHub Issues: [Create an issue](https://github.com/machinemetrics/mm-react-components/issues)
|
|
280
|
+
- Documentation: [Read the docs](https://github.com/machinemetrics/mm-react-components#readme)
|
|
281
|
+
- Examples: [View examples](./EXAMPLES.md)
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
Happy building! 🏭✨
|
package/dist/index.d.ts
CHANGED
|
@@ -23,8 +23,8 @@ export { Toggle } from './components/ui/toggle';
|
|
|
23
23
|
export { Slider, LabeledSlider } from './components/ui/slider';
|
|
24
24
|
export { Calendar } from './components/ui/calendar';
|
|
25
25
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from './components/ui/collapsible';
|
|
26
|
-
export { DataTable } from './components/ui/data-table';
|
|
27
|
-
export {
|
|
26
|
+
export { DataTable, DataTablePagination, ResponsiveTable, TABLE_TOKENS, createColumnDescriptor, createTextColumn, createNumericColumn, createBadgeColumn, createSelectionColumn, createMultiBadgeColumn, createDateColumn, createColumnRegistry, resolveColumnOrder, resolveColumnVisibility, useDataTableState, useBreakpoint, useTableController, DataTableToolbar, exportTableToCSV, } from './components/ui/data-table';
|
|
27
|
+
export type { ColumnDefaults, ColumnDescriptor, ColumnRegistry, DataTableProps, DataTableInitialState, } from './components/ui/data-table';
|
|
28
28
|
export { Progress } from './components/ui/progress';
|
|
29
29
|
export { Dropzone, DropzoneContent, DropzoneEmptyState, } from './components/ui/dropzone';
|
|
30
30
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/ui/accordion';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,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;AAGzE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,eAAe,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,YAAY,EACV,eAAe,EACf,YAAY,EACZ,cAAc,EACd,SAAS,GACV,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,YAAY,GACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/main.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import '
|
|
2
|
-
import '
|
|
1
|
+
import '@machinemetrics/mm-react-components/styles';
|
|
2
|
+
import '@machinemetrics/mm-react-components/themes/carbide';
|
|
3
3
|
//# sourceMappingURL=main.d.ts.map
|
package/dist/main.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.tsx"],"names":[],"mappings":"AAGA,OAAO,4CAA4C,CAAC;AACpD,OAAO,oDAAoD,CAAC"}
|