mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +00:00
johndoe6345789
7a82c07bfe
- Introduced `CodegenStudio`, `TemplateSelector`, and `PackageGenerator` components with detailed props and rendering logic. - Created UI styles and tokens for consistent theming across components. - Implemented permissions for template viewing, creation, and code generation. - Added functions for lifecycle events, blueprint building, and package generation. - Developed storybook stories for visual testing and documentation of components. feat(config_summary): implement configuration summary components and styles - Added `ConfigSummary`, `SummaryRow`, and related components for displaying system stats. - Defined permissions for viewing and exporting configuration summaries. - Created functions for rendering and aggregating summary data. - Established storybook stories for showcasing summary components and their variations. - Introduced styles and tokens for consistent UI presentation across summary components.
277 lines
7.4 KiB
JSON
277 lines
7.4 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "config_summary",
|
|
"description": "Configuration summary UI components for displaying system stats and metadata",
|
|
"components": [
|
|
{
|
|
"id": "config_summary",
|
|
"name": "ConfigSummary",
|
|
"description": "Card container for configuration summary with header, content table, and optional footer",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Summary card title"
|
|
},
|
|
{
|
|
"name": "rows",
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "Array of summary row data objects"
|
|
},
|
|
{
|
|
"name": "showFooter",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether to show the footer section"
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "outlined"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "{{variant}}",
|
|
"className": "config-summary",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"className": "config-summary-header",
|
|
"sx": {
|
|
"p": 2,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "h6",
|
|
"fontWeight": "bold",
|
|
"className": "config-summary-title",
|
|
"children": "{{title}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "config-summary-content",
|
|
"sx": {
|
|
"p": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Table",
|
|
"size": "small",
|
|
"className": "config-summary-table",
|
|
"children": [
|
|
{
|
|
"type": "TableBody",
|
|
"children": "{{rows}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{showFooter}}",
|
|
"then": {
|
|
"type": "Box",
|
|
"className": "config-summary-footer",
|
|
"sx": {
|
|
"p": 1,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
},
|
|
"children": []
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "summary_row",
|
|
"name": "SummaryRow",
|
|
"description": "Table row displaying a label-value pair in the config summary",
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Row label text"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Row value text"
|
|
},
|
|
{
|
|
"name": "visible",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Whether the row is visible"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "conditional",
|
|
"condition": "{{visible}}",
|
|
"then": {
|
|
"type": "TableRow",
|
|
"className": "summary-row",
|
|
"children": [
|
|
{
|
|
"type": "TableCell",
|
|
"className": "summary-row-label-cell",
|
|
"sx": {
|
|
"fontWeight": "medium",
|
|
"color": "text.secondary",
|
|
"width": "40%",
|
|
"py": 1
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"className": "summary-row-label",
|
|
"children": "{{label}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TableCell",
|
|
"className": "summary-row-value-cell",
|
|
"sx": {
|
|
"py": 1
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"fontWeight": "medium",
|
|
"className": "summary-row-value",
|
|
"children": "{{value}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "summary_row_inline",
|
|
"name": "SummaryRowInline",
|
|
"description": "Inline flex row displaying a label-value pair (non-table variant)",
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Row label text"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Row value text"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "summary-row-inline",
|
|
"sx": {
|
|
"display": "flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"py": 1
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"className": "summary-row-inline-label",
|
|
"children": "{{label}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "body2",
|
|
"fontWeight": "medium",
|
|
"className": "summary-row-inline-value",
|
|
"children": "{{value}}"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "summary_divider",
|
|
"name": "SummaryDivider",
|
|
"description": "Divider component for separating summary sections",
|
|
"props": [
|
|
{
|
|
"name": "spacing",
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 1,
|
|
"description": "Vertical margin in theme spacing units"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Divider",
|
|
"className": "summary-divider",
|
|
"sx": {
|
|
"my": "{{spacing}}"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "config_summary_stack",
|
|
"name": "ConfigSummaryStack",
|
|
"description": "Vertical stack container for multiple config summary cards",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "any",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "spacing",
|
|
"type": "number",
|
|
"default": 2
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"spacing": "{{spacing}}",
|
|
"className": "config-summary-stack",
|
|
"children": "{{children}}"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"exports": {
|
|
"components": ["ConfigSummary", "SummaryRow", "SummaryRowInline", "SummaryDivider", "ConfigSummaryStack"]
|
|
}
|
|
}
|