mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +00:00
johndoe6345789
42446ef255
- Added `jsonScript` property to metadata schema for JSON script entry points. - Refactored `generate-package.ts` to replace Lua scripts with JSON scripts for lifecycle hooks. - Updated test generation to use JSON format for metadata validation. - Modified documentation and comments to reflect the transition from Lua to JSON scripting. - Adjusted Storybook configuration and mock data to align with new JSON script structure. - Renamed relevant files and references from Lua to JSON for consistency across the project.
418 lines
13 KiB
JSON
418 lines
13 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "ui_level2",
|
|
"description": "User dashboard components including profile, comments, and chat panels",
|
|
"components": [
|
|
{
|
|
"id": "level2_layout",
|
|
"name": "Level2Layout",
|
|
"description": "Main layout container for Level 2 user dashboard",
|
|
"props": [
|
|
{
|
|
"name": "user",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "User context with username and profile data"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "min-h-screen bg-background",
|
|
"children": [
|
|
{
|
|
"type": "AppHeader",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "Level 2 - User Dashboard"
|
|
},
|
|
{
|
|
"type": "Badge",
|
|
"children": "User"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "flexGrow": 1 }
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"children": "{{user.username}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Container",
|
|
"maxWidth": "xl",
|
|
"sx": { "py": 4 },
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 4,
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "overline",
|
|
"children": "Level 2"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h2",
|
|
"children": "Your Dashboard"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"color": "text.secondary",
|
|
"children": "Manage your profile, comments, and chat."
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Card",
|
|
"children": [
|
|
{
|
|
"type": "Tabs",
|
|
"defaultValue": "profile",
|
|
"children": [
|
|
{
|
|
"type": "Tab",
|
|
"value": "profile",
|
|
"label": "Profile"
|
|
},
|
|
{
|
|
"type": "Tab",
|
|
"value": "comments",
|
|
"label": "Comments"
|
|
},
|
|
{
|
|
"type": "Tab",
|
|
"value": "chat",
|
|
"label": "Chat"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "profile_panel",
|
|
"name": "ProfilePanel",
|
|
"description": "User profile view and edit panel",
|
|
"props": [
|
|
{
|
|
"name": "user",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "User profile data"
|
|
},
|
|
{
|
|
"name": "onSave",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when profile is saved"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Your Profile",
|
|
"subheader": "View and update your personal information."
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 2 },
|
|
"children": [
|
|
{
|
|
"type": "Avatar",
|
|
"src": "{{user.avatar}}",
|
|
"alt": "{{user.username}}",
|
|
"sx": { "width": 64, "height": 64 }
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "{{user.username}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"children": "{{user.email}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Divider"
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 6,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"label": "Display Name",
|
|
"fullWidth": true,
|
|
"defaultValue": "{{user.displayName}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 6,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"label": "Email",
|
|
"fullWidth": true,
|
|
"defaultValue": "{{user.email}}",
|
|
"disabled": true
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"children": "Save Changes"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "comments_panel",
|
|
"name": "CommentsPanel",
|
|
"description": "User comments list and management panel",
|
|
"props": [
|
|
{
|
|
"name": "comments",
|
|
"type": "array",
|
|
"required": false,
|
|
"default": [],
|
|
"description": "List of user comments"
|
|
},
|
|
{
|
|
"name": "onEdit",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when editing a comment"
|
|
},
|
|
{
|
|
"name": "onDelete",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when deleting a comment"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Your Comments",
|
|
"subheader": "View and manage comments you've posted."
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "List",
|
|
"children": [
|
|
{
|
|
"type": "ListItem",
|
|
"secondaryAction": {
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"children": [
|
|
{
|
|
"type": "IconButton",
|
|
"size": "small",
|
|
"children": [{ "type": "Icon", "name": "Edit" }]
|
|
},
|
|
{
|
|
"type": "IconButton",
|
|
"size": "small",
|
|
"children": [{ "type": "Icon", "name": "Delete" }]
|
|
}
|
|
]
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "ListItemText",
|
|
"primary": "Great article on automation scripting!",
|
|
"secondary": "Posted 2 days ago on 'Getting Started with Automation Scripts'"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "ListItem",
|
|
"secondaryAction": {
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"children": [
|
|
{
|
|
"type": "IconButton",
|
|
"size": "small",
|
|
"children": [{ "type": "Icon", "name": "Edit" }]
|
|
},
|
|
{
|
|
"type": "IconButton",
|
|
"size": "small",
|
|
"children": [{ "type": "Icon", "name": "Delete" }]
|
|
}
|
|
]
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "ListItemText",
|
|
"primary": "Thanks for the help!",
|
|
"secondary": "Posted 1 week ago on 'Component Rendering'"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "chat_panel",
|
|
"name": "ChatPanel",
|
|
"description": "Real-time chat panel for user communication",
|
|
"props": [
|
|
{
|
|
"name": "messages",
|
|
"type": "array",
|
|
"required": false,
|
|
"default": [],
|
|
"description": "List of chat messages"
|
|
},
|
|
{
|
|
"name": "onSend",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when sending a message"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Chat",
|
|
"subheader": "Connect with other users in real-time."
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"sx": {
|
|
"height": 256,
|
|
"border": 1,
|
|
"borderColor": "divider",
|
|
"borderRadius": 1,
|
|
"p": 2,
|
|
"overflow": "auto",
|
|
"bgcolor": "background.default"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"sx": { "textAlign": "center" },
|
|
"children": "Welcome to the chat room!"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "gap": 1 },
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"placeholder": "Type a message...",
|
|
"fullWidth": true,
|
|
"size": "small"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"children": "Send"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|