lmiranda
20458add3f
Sprint 1 - viz-platform Plugin completed (13/13 issues): - Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component) - Agents: 3 files (theme-setup, layout-builder, component-check) - Documentation: README.md, claude-md-integration.md - Tests: 94 tests passing (68-99% coverage) - CHANGELOG updated with completion status Closes: #178, #179, #180, #181, #182 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
162 lines
3.3 KiB
Markdown
162 lines
3.3 KiB
Markdown
---
|
|
description: Inspect Dash Mantine Component props and validation
|
|
---
|
|
|
|
# Inspect Component
|
|
|
|
Inspect a Dash Mantine Component's available props, types, and defaults.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/component {name}
|
|
```
|
|
|
|
## Arguments
|
|
|
|
- `name` (required): DMC component name (e.g., Button, Card, TextInput)
|
|
|
|
## Examples
|
|
|
|
```
|
|
/component Button
|
|
/component TextInput
|
|
/component Select
|
|
/component Card
|
|
```
|
|
|
|
## Tool Mapping
|
|
|
|
This command uses the `get_component_props` MCP tool:
|
|
|
|
```python
|
|
get_component_props(component="Button")
|
|
```
|
|
|
|
## Output Example
|
|
|
|
```json
|
|
{
|
|
"component": "Button",
|
|
"category": "inputs",
|
|
"props": {
|
|
"children": {
|
|
"type": "any",
|
|
"required": false,
|
|
"description": "Button content"
|
|
},
|
|
"variant": {
|
|
"type": "string",
|
|
"enum": ["filled", "outline", "light", "subtle", "default", "gradient"],
|
|
"default": "filled",
|
|
"description": "Button appearance variant"
|
|
},
|
|
"color": {
|
|
"type": "string",
|
|
"default": "blue",
|
|
"description": "Button color from theme"
|
|
},
|
|
"size": {
|
|
"type": "string",
|
|
"enum": ["xs", "sm", "md", "lg", "xl"],
|
|
"default": "sm",
|
|
"description": "Button size"
|
|
},
|
|
"radius": {
|
|
"type": "string",
|
|
"enum": ["xs", "sm", "md", "lg", "xl"],
|
|
"default": "sm",
|
|
"description": "Border radius"
|
|
},
|
|
"disabled": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Disable button"
|
|
},
|
|
"loading": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Show loading indicator"
|
|
},
|
|
"fullWidth": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Button takes full width"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Listing All Components
|
|
|
|
To see all available components:
|
|
|
|
```python
|
|
list_components(category=None) # All components
|
|
list_components(category="inputs") # Just input components
|
|
```
|
|
|
|
### Component Categories
|
|
|
|
| Category | Components |
|
|
|----------|------------|
|
|
| `inputs` | Button, TextInput, Select, Checkbox, Radio, Switch, Slider, etc. |
|
|
| `navigation` | NavLink, Tabs, Breadcrumbs, Pagination, Stepper |
|
|
| `feedback` | Alert, Notification, Progress, Loader, Skeleton |
|
|
| `overlays` | Modal, Drawer, Tooltip, Popover, Menu |
|
|
| `typography` | Text, Title, Code, Blockquote, List |
|
|
| `layout` | Container, Grid, Stack, Group, Space, Divider |
|
|
| `data` | Table, Badge, Card, Paper, Timeline |
|
|
|
|
## Validating Component Usage
|
|
|
|
After inspecting props, validate your usage:
|
|
|
|
```python
|
|
validate_component(
|
|
component="Button",
|
|
props={
|
|
"variant": "filled",
|
|
"color": "blue",
|
|
"size": "lg",
|
|
"children": "Click me"
|
|
}
|
|
)
|
|
```
|
|
|
|
Returns:
|
|
```json
|
|
{
|
|
"valid": true,
|
|
"errors": [],
|
|
"warnings": []
|
|
}
|
|
```
|
|
|
|
Or with errors:
|
|
```json
|
|
{
|
|
"valid": false,
|
|
"errors": [
|
|
"Invalid prop 'colour' for Button. Did you mean 'color'?",
|
|
"Prop 'size' expects one of ['xs', 'sm', 'md', 'lg', 'xl'], got 'huge'"
|
|
],
|
|
"warnings": [
|
|
"Prop 'fullwidth' should be 'fullWidth' (camelCase)"
|
|
]
|
|
}
|
|
```
|
|
|
|
## Why This Matters
|
|
|
|
DMC components have many props with specific type constraints. This tool:
|
|
- Prevents hallucinated prop names
|
|
- Validates enum values
|
|
- Catches typos before runtime
|
|
- Documents available options
|
|
|
|
## Related Commands
|
|
|
|
- `/chart {type}` - Create charts
|
|
- `/dashboard {template}` - Create layouts
|