@machinemetrics/mm-react-components 1.1.1-3 → 1.1.1
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/agent-docs/agent-documentation-reference.md +8 -23
- package/agent-docs/ai-agent-guide.md +0 -2
- package/agent-docs/ai-agent-init-guide.md +1 -1
- package/agent-docs/component-mapping-reference.md +1 -3
- package/dist/cursor-skill/mm-carbide/SKILL.md +2 -5
- package/dist/cursor-skill/mm-carbide/reference.md +7 -13
- package/package.json +1 -1
|
@@ -50,16 +50,14 @@ This directory contains comprehensive documentation and tools for AI agents work
|
|
|
50
50
|
|
|
51
51
|
### Layout & Navigation
|
|
52
52
|
|
|
53
|
-
| Component
|
|
54
|
-
|
|
|
55
|
-
| **
|
|
56
|
-
| **
|
|
57
|
-
| **
|
|
58
|
-
| **
|
|
59
|
-
| **
|
|
60
|
-
| **
|
|
61
|
-
| **Breadcrumb** | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Navigation breadcrumbs |
|
|
62
|
-
| **PageHeader** | `PageHeader` (+ types) | Application page header with actions/tabs |
|
|
53
|
+
| Component | Exports | Description |
|
|
54
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
|
|
55
|
+
| **Card** | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` | Content container with sections (no built-in scroll) |
|
|
56
|
+
| **ScrollArea** | `ScrollArea`, `ScrollBar` | Scrollable region; use when content can overflow a fixed-height box |
|
|
57
|
+
| **Separator** | `Separator` | Visual divider |
|
|
58
|
+
| **Tabs** | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | Tabbed interface |
|
|
59
|
+
| **Breadcrumb** | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Navigation breadcrumbs |
|
|
60
|
+
| **PageHeader** | `PageHeader` (+ types) | Application page header with actions/tabs |
|
|
63
61
|
|
|
64
62
|
### Overlays & Modals
|
|
65
63
|
|
|
@@ -126,19 +124,6 @@ All components follow shadcn/ui patterns with Carbide theme integration for indu
|
|
|
126
124
|
|
|
127
125
|
## Component Usage Guides
|
|
128
126
|
|
|
129
|
-
### Layout and panel-like UI: don’t use Card for every section
|
|
130
|
-
|
|
131
|
-
Use the right component for the job instead of wrapping everything in Card:
|
|
132
|
-
|
|
133
|
-
| Need | Use | Notes |
|
|
134
|
-
|------|-----|--------|
|
|
135
|
-
| **Split workspace / dashboard / IDE-like layout** | **ResizablePanelGroup** | Horizontal or vertical split; drag-to-resize; keyboard accessible. Best for admin panels, SaaS tools, file-explorer style UIs. On mobile, use CSS to stack panels vertically. |
|
|
136
|
-
| **Navigation panel (app nav, links, structural sidebar)** | **Sidebar** | Composable, themeable, collapsible to icons. Use for application layout with nav links and groups, not for arbitrary “panel” content. |
|
|
137
|
-
| **Temporary or slide-out panel (settings, details, filters)** | **Sheet** | Slides in from any side (left, right, top, bottom). Use for settings, notifications, detail views, form overlays. See Overlays & Modals table. |
|
|
138
|
-
| **Discrete content block (summary box, metric, form section)** | **Card** | Card is for **content** with sections (header, body, footer), not for structural layout. Do not use Card as the main wrapper for full-page sections, side panels, or workspace areas. |
|
|
139
|
-
|
|
140
|
-
**Best practice for full app layout:** Combine Sidebar for navigation and ResizablePanelGroup (or a main content area) for the main workspace. Use Sheet for overlay panels; use Card only for distinct content blocks within a panel or page.
|
|
141
|
-
|
|
142
127
|
### Scrolling content: Card vs ScrollArea
|
|
143
128
|
|
|
144
129
|
**There is no "Panel" component.** For a panel-like or card-like region where content may be longer than the visible area, use **ScrollArea** around the scrollable content. **Card** is a structural container (border, padding, sections) and does not add scrolling.
|
|
@@ -184,8 +184,6 @@ The migration configuration is located at `scripts/chakra-to-shadcn-migrator/cha
|
|
|
184
184
|
|
|
185
185
|
### Card Components
|
|
186
186
|
|
|
187
|
-
Use Card for **discrete content blocks** (summary, metric, form section), not for panel or layout structure. For panel-like UI use **ResizablePanelGroup**, **Sidebar**, or **Sheet** (see agent-documentation-reference.md).
|
|
188
|
-
|
|
189
187
|
```tsx
|
|
190
188
|
// Chakra UI
|
|
191
189
|
<Card>
|
|
@@ -129,7 +129,7 @@ function MyComponent() {
|
|
|
129
129
|
}
|
|
130
130
|
```
|
|
131
131
|
|
|
132
|
-
**Done!** Components are ready to use.
|
|
132
|
+
**Done!** Components are ready to use.
|
|
133
133
|
|
|
134
134
|
## Project Structure After Setup (zero-config)
|
|
135
135
|
|
|
@@ -82,7 +82,7 @@ This reference provides detailed mappings between Chakra UI components and Machi
|
|
|
82
82
|
| Chakra UI | MachineMetrics | Import | Notes |
|
|
83
83
|
| --------- | -------------- | ------------------------------------- | ------------------ |
|
|
84
84
|
| `Table` | `Table` | `@machinemetrics/mm-react-components` | Direct replacement |
|
|
85
|
-
| `Card` | `Card` | `@machinemetrics/mm-react-components` |
|
|
85
|
+
| `Card` | `Card` | `@machinemetrics/mm-react-components` | New component |
|
|
86
86
|
| `Avatar` | `Avatar` | `@machinemetrics/mm-react-components` | New component |
|
|
87
87
|
| `Tooltip` | `Tooltip` | `@machinemetrics/mm-react-components` | Direct replacement |
|
|
88
88
|
| `Popover` | `Popover` | `@machinemetrics/mm-react-components` | Direct replacement |
|
|
@@ -216,8 +216,6 @@ This reference provides detailed mappings between Chakra UI components and Machi
|
|
|
216
216
|
|
|
217
217
|
### Card Structure
|
|
218
218
|
|
|
219
|
-
Use Card for **discrete content blocks** (e.g. summary box, metric card, form section). Do not use Card for structural layout or panel-like UI—prefer **ResizablePanelGroup** (split workspaces), **Sidebar** (nav panels), or **Sheet** (slide-out panels). See agent-documentation-reference.md “Layout and panel-like UI.”
|
|
220
|
-
|
|
221
219
|
```tsx
|
|
222
220
|
// Chakra UI Structure
|
|
223
221
|
<Card>
|
|
@@ -8,8 +8,7 @@ description: Generate UIs and widgets with Carbide and MachineMetrics React Comp
|
|
|
8
8
|
## Components
|
|
9
9
|
|
|
10
10
|
- Use **only** exports from `@machinemetrics/mm-react-components`. Do not create new components or use other UI libraries.
|
|
11
|
-
- Use compound components as in the library: Dialog + DialogTrigger + DialogContent; Form + FormField; DataTable + column descriptors; Card + CardHeader + CardContent + CardFooter; Sheet,
|
|
12
|
-
- **Do not use Card as a wrapper for every section.** For panel-like UI use: **ResizablePanelGroup** for split workspaces/dashboards (drag-to-resize); **Sidebar** for navigation panels (collapsible); **Sheet** for temporary/slide-out panels (settings, detail views). Use **Card** only for discrete content blocks (e.g. a summary box, metric card, form section), not for structural layout.
|
|
11
|
+
- Use compound components as in the library: Dialog + DialogTrigger + DialogContent; Form + FormField; DataTable + column descriptors; Card + CardHeader + CardContent + CardFooter; Sheet, DropdownMenu, Tabs, etc. Never replace them with raw divs and custom classes.
|
|
13
12
|
- Use `cn()` from the library and Tailwind for layout and styling. Respect `data-slot` for Carbide theming where applicable.
|
|
14
13
|
- For a component list and patterns, see [reference.md](reference.md). For full widget and visualization rules, see [widget-rules.md](widget-rules.md).
|
|
15
14
|
|
|
@@ -34,9 +33,7 @@ description: Generate UIs and widgets with Carbide and MachineMetrics React Comp
|
|
|
34
33
|
|
|
35
34
|
**Avoid:** Hardcoded colors (e.g. `bg-blue-600`, `text-gray-500`); inline brand styling; non-semantic HTML; missing focus or labels on interactive elements.
|
|
36
35
|
|
|
37
|
-
**Panel-like
|
|
38
|
-
|
|
39
|
-
**Scrolling:** For regions where content can exceed the box, use **ScrollArea** with a fixed or max height. Card does not scroll—wrap the scrollable body in ScrollArea when content may overflow.
|
|
36
|
+
**Scrolling:** There is no Panel component. For panel-like or card-like regions where content can be longer than the box, use **ScrollArea** with a fixed or max height (e.g. `h-[300px]` or `max-h-[50vh]`) around the scrollable content. Card is for structure only and does not scroll—wrap CardContent (or the scrollable body) in ScrollArea when content may overflow.
|
|
40
37
|
|
|
41
38
|
## Widget rules
|
|
42
39
|
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
Import from the package main entry (see `src/index.ts` in the repo for the full list).
|
|
19
19
|
|
|
20
|
-
**Layout and structure**: PageHeader,
|
|
20
|
+
**Layout and structure**: PageHeader, Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), **ScrollArea** (ScrollBar), Tabs (TabsList, TabsTrigger, TabsContent), Sidebar, Breadcrumb, Field (FieldLabel, FieldDescription, FieldError, FieldGroup, etc.), Item (ItemMedia, ItemContent, ItemActions, etc.).
|
|
21
21
|
|
|
22
22
|
**Overlays and dialogs**: Dialog (DialogTrigger, DialogContent, DialogHeader, DialogFooter, etc.), Sheet, Drawer, AlertDialog, Popover, Tooltip (TooltipTrigger, TooltipContent, TooltipProvider), DropdownMenu, HoverCard, ContextMenu.
|
|
23
23
|
|
|
@@ -27,22 +27,16 @@ Import from the package main entry (see `src/index.ts` in the repo for the full
|
|
|
27
27
|
|
|
28
28
|
**Feedback and actions**: Button, buttonVariants, ButtonGroup; Toaster, toast; Alert, AlertTitle, AlertDescription; Spinner, SpinnerCarbide; Pagination, SimplePagination; Empty (EmptyHeader, EmptyTitle, EmptyDescription, etc.).
|
|
29
29
|
|
|
30
|
-
**Other**: Accordion, Collapsible, Separator, Dropzone, Carousel, Command, CodePreview, Kbd, cn (utility). Theme: activateCarbideTheme, toggleCarbideTheme, isCarbideThemeActive, etc.
|
|
30
|
+
**Other**: Accordion, Collapsible, Separator, Dropzone, ResizablePanelGroup, Carousel, Command, CodePreview, Kbd, cn (utility). Theme: activateCarbideTheme, toggleCarbideTheme, isCarbideThemeActive, etc.
|
|
31
31
|
|
|
32
|
-
##
|
|
33
|
-
|
|
34
|
-
| Need | Use |
|
|
35
|
-
|------|-----|
|
|
36
|
-
| Split workspace, dashboard, IDE-like layout | **ResizablePanelGroup** (drag-to-resize; stack vertically on mobile) |
|
|
37
|
-
| Navigation panel (app nav, links, sidebar) | **Sidebar** (collapsible to icons) |
|
|
38
|
-
| Temporary/slide-out panel (settings, details, filters) | **Sheet** (slides from any side) |
|
|
39
|
-
| Discrete content block (summary, metric, form section) | **Card** |
|
|
32
|
+
## Scrolling: Card vs ScrollArea
|
|
40
33
|
|
|
41
|
-
|
|
34
|
+
There is no "Panel" component. For panel-like or card-like regions where content may be longer than the visible area, use **ScrollArea** for the scrollable region. **Card** is structure only (border, sections) and does not scroll.
|
|
42
35
|
|
|
43
|
-
|
|
36
|
+
- Use **ScrollArea** with a fixed or max height (e.g. `className="h-[300px]"` or `max-h-[50vh]`) when content can overflow.
|
|
37
|
+
- Put long content inside ScrollArea; use Card for the outer container and ScrollArea inside CardContent (or as the body) when the body should scroll.
|
|
44
38
|
|
|
45
|
-
|
|
39
|
+
Example: scrollable card body — wrap the body in ScrollArea with a height so the card doesn’t grow past the viewport; the content inside scrolls.
|
|
46
40
|
|
|
47
41
|
## Patterns
|
|
48
42
|
|