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.
300 lines
7.9 KiB
JSON
300 lines
7.9 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "code_editor",
|
|
"description": "Code editor components for JSON, Lua, and theme editing",
|
|
"components": [
|
|
{
|
|
"id": "code_editor",
|
|
"name": "CodeEditor",
|
|
"description": "Base code editor component with language selection and theming",
|
|
"props": [
|
|
{
|
|
"name": "language",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "json",
|
|
"description": "Programming language for syntax highlighting"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "Editor content"
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether the editor is read-only"
|
|
},
|
|
{
|
|
"name": "lineNumbers",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Show line numbers"
|
|
},
|
|
{
|
|
"name": "theme",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "light",
|
|
"description": "Editor color theme"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "code-editor-container",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"variant": "dense",
|
|
"children": [
|
|
{
|
|
"type": "Select",
|
|
"size": "small",
|
|
"label": "Language",
|
|
"value": "{{language}}"
|
|
},
|
|
{
|
|
"type": "Select",
|
|
"size": "small",
|
|
"label": "Theme",
|
|
"value": "{{theme}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "code-editor-content",
|
|
"sx": {
|
|
"height": "400px",
|
|
"overflow": "auto"
|
|
},
|
|
"children": "{{value}}"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "code-editor-status",
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "json_editor",
|
|
"name": "JsonEditor",
|
|
"description": "JSON-specific code editor with formatting and validation",
|
|
"props": [
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "{}",
|
|
"description": "JSON content"
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether the editor is read-only"
|
|
},
|
|
{
|
|
"name": "autoFormat",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Auto-format JSON on blur"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "json-editor-container",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"variant": "dense",
|
|
"children": [
|
|
{
|
|
"type": "IconButton",
|
|
"title": "Format JSON",
|
|
"icon": "FormatAlignLeft"
|
|
},
|
|
{
|
|
"type": "IconButton",
|
|
"title": "Validate JSON",
|
|
"icon": "Check"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "json-editor-content",
|
|
"children": "{{value}}"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "lua_editor",
|
|
"name": "LuaEditor",
|
|
"description": "Lua code editor with sandbox execution support",
|
|
"props": [
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "Lua code content"
|
|
},
|
|
{
|
|
"name": "readOnly",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether the editor is read-only"
|
|
},
|
|
{
|
|
"name": "showSnippets",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Show code snippets panel"
|
|
},
|
|
{
|
|
"name": "showOutput",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "Show output panel"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "lua-editor-container",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"variant": "dense",
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"size": "small",
|
|
"children": "Run"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "lua-editor-content",
|
|
"children": "{{value}}"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{showOutput}}",
|
|
"then": {
|
|
"type": "Box",
|
|
"className": "lua-editor-output",
|
|
"children": []
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "theme_editor",
|
|
"name": "ThemeEditor",
|
|
"description": "Theme customization editor with color pickers and mode toggle",
|
|
"props": [
|
|
{
|
|
"name": "primary",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "#1976d2",
|
|
"description": "Primary color"
|
|
},
|
|
{
|
|
"name": "secondary",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "#dc004e",
|
|
"description": "Secondary color"
|
|
},
|
|
{
|
|
"name": "mode",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "light",
|
|
"description": "Color mode (light/dark)"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "theme-editor-container",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"variant": "dense",
|
|
"children": []
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "theme-editor-preview",
|
|
"children": []
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"className": "theme-editor-controls",
|
|
"children": [
|
|
{
|
|
"type": "ColorPicker",
|
|
"name": "primary",
|
|
"value": "{{primary}}",
|
|
"label": "Primary Color"
|
|
},
|
|
{
|
|
"type": "ColorPicker",
|
|
"name": "secondary",
|
|
"value": "{{secondary}}",
|
|
"label": "Secondary Color"
|
|
},
|
|
{
|
|
"type": "Switch",
|
|
"label": "Dark Mode",
|
|
"name": "dark_mode",
|
|
"checked": "{{mode === 'dark'}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"exports": {
|
|
"components": ["CodeEditor", "JsonEditor", "LuaEditor", "ThemeEditor"]
|
|
}
|
|
}
|