mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 22:04:56 +00:00
johndoe6345789
9b715acd53
Add core seed data: - /dbal/shared/seeds/database/users.yaml - Default system users (supergod, admin, testuser) - /dbal/shared/seeds/database/credentials.yaml - SHA-512 hashed passwords Add dashboard components: - dashboard_home - User greeting with quick navigation links - user_profile - User profile information display - comments_list - Paginated comments list - comment_form - Comment submission form - irc_chat - IRC-style chat interface These components use fakemui Material Design components and follow the MetaBuilder JSON component schema. They provide the foundation for the dashboard package migration from the old system.
673 lines
21 KiB
JSON
673 lines
21 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "dashboard",
|
|
"description": "Dashboard components including stat cards, grids, and widgets",
|
|
"components": [
|
|
{
|
|
"id": "stat_card",
|
|
"name": "StatCard",
|
|
"description": "Statistic card with icon, label, value, and trend indicator",
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Card label text"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Main statistic value"
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Icon name"
|
|
},
|
|
{
|
|
"name": "trend",
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "Trend data with direction and percentage"
|
|
},
|
|
{
|
|
"name": "color",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "primary"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "stat-card",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"className": "stat-card-icon",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{icon}}",
|
|
"color": "{{color}}",
|
|
"size": 48
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"gap": 1,
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "secondary",
|
|
"children": "{{label}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "h4",
|
|
"fontWeight": "bold",
|
|
"children": "{{value}}"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{trend}}",
|
|
"then": {
|
|
"type": "Flex",
|
|
"alignItems": "center",
|
|
"gap": 0.5,
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{trend.direction === 'up' ? 'TrendingUp' : 'TrendingDown'}}",
|
|
"size": 16,
|
|
"color": "{{trend.direction === 'up' ? 'success' : 'error'}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "{{trend.direction === 'up' ? 'success' : 'error'}}",
|
|
"children": "{{trend.percentage}}%"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "dashboard_grid",
|
|
"name": "DashboardGrid",
|
|
"description": "Responsive grid layout for dashboard widgets",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "any",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "spacing",
|
|
"type": "number",
|
|
"default": 3
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": "{{spacing}}",
|
|
"className": "dashboard-grid",
|
|
"children": "{{children}}"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "widget",
|
|
"name": "Widget",
|
|
"description": "Generic dashboard widget container",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "subtitle",
|
|
"type": "string",
|
|
"required": false
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "any",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "actions",
|
|
"type": "any",
|
|
"required": false
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "elevation",
|
|
"className": "dashboard-widget",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "{{title}}",
|
|
"subtitle": "{{subtitle}}"
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": "{{children}}"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{actions}}",
|
|
"then": {
|
|
"type": "CardActions",
|
|
"children": "{{actions}}"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "dashboard_home",
|
|
"name": "DashboardHome",
|
|
"description": "User dashboard home with greeting, quick links, and navigation shortcuts",
|
|
"category": "dashboard",
|
|
"props": [
|
|
{
|
|
"name": "user",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "User object with username, email, avatar properties"
|
|
},
|
|
{
|
|
"name": "onNavigate",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback function for navigation actions"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "dashboard-home",
|
|
"children": [
|
|
{
|
|
"type": "Card",
|
|
"variant": "elevation",
|
|
"className": "greeting-card",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 3,
|
|
"children": [
|
|
{
|
|
"type": "Avatar",
|
|
"alt": "{{user.username}}",
|
|
"className": "greeting-avatar",
|
|
"sx": { "width": 80, "height": 80 }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 9,
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"gap": 2,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h4",
|
|
"children": "Welcome back, {{user.username}}!"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"children": "{{user.email}}"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "quick-links",
|
|
"sx": { "display": "flex", "gap": 1, "marginTop": 1 },
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"children": "Profile",
|
|
"onClick": "{{onNavigate('profile')}}"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"children": "Comments",
|
|
"onClick": "{{onNavigate('comments')}}"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"children": "Chat",
|
|
"onClick": "{{onNavigate('chat')}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "user_profile",
|
|
"name": "UserProfile",
|
|
"description": "User profile display and edit mode",
|
|
"category": "dashboard",
|
|
"props": [
|
|
{
|
|
"name": "user",
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "User object with username, email, bio, avatar"
|
|
},
|
|
{
|
|
"name": "onSave",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when saving profile changes"
|
|
},
|
|
{
|
|
"name": "onCancel",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when canceling edit mode"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "elevation",
|
|
"className": "user-profile",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "User Profile"
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"gap": 3,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"className": "profile-avatar",
|
|
"sx": { "display": "flex", "justifyContent": "center" },
|
|
"children": [
|
|
{
|
|
"type": "Avatar",
|
|
"alt": "{{user.username}}",
|
|
"sx": { "width": 100, "height": 100 }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"gap": 2,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "caption",
|
|
"color": "textSecondary",
|
|
"children": "Username"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"children": "{{user.username}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "caption",
|
|
"color": "textSecondary",
|
|
"children": "Email"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"children": "{{user.email}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "caption",
|
|
"color": "textSecondary",
|
|
"children": "Bio"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"children": "{{user.bio || 'No bio provided'}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "comments_list",
|
|
"name": "CommentsList",
|
|
"description": "List of comments with pagination and delete functionality",
|
|
"category": "dashboard",
|
|
"props": [
|
|
{
|
|
"name": "comments",
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "Array of comment objects"
|
|
},
|
|
{
|
|
"name": "page",
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 0,
|
|
"description": "Current page for pagination"
|
|
},
|
|
{
|
|
"name": "pageSize",
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 10,
|
|
"description": "Number of items per page"
|
|
},
|
|
{
|
|
"name": "onDelete",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when deleting a comment"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "elevation",
|
|
"className": "comments-list",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Comments"
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"gap": 2,
|
|
"children": [
|
|
{
|
|
"type": "List",
|
|
"className": "comments-items",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"className": "no-comments",
|
|
"children": "No comments yet"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "TablePagination",
|
|
"count": 0,
|
|
"page": "{{page}}",
|
|
"rowsPerPage": "{{pageSize}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "comment_form",
|
|
"name": "CommentForm",
|
|
"description": "Form for writing and submitting new comments",
|
|
"category": "dashboard",
|
|
"props": [
|
|
{
|
|
"name": "onSubmit",
|
|
"type": "function",
|
|
"required": true,
|
|
"description": "Callback when form is submitted with comment text"
|
|
},
|
|
{
|
|
"name": "isLoading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Show loading state while submitting"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "comment-form",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Write a Comment"
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"gap": 2,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"placeholder": "Share your thoughts...",
|
|
"variant": "outlined",
|
|
"multiline": true,
|
|
"rows": 4,
|
|
"fullWidth": true,
|
|
"className": "comment-textarea"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "gap": 1, "justifyContent": "flex-end" },
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "text",
|
|
"children": "Cancel"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"children": "Submit",
|
|
"disabled": "{{isLoading}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "irc_chat",
|
|
"name": "IRCChat",
|
|
"description": "IRC-style chat interface with message list and input",
|
|
"category": "dashboard",
|
|
"props": [
|
|
{
|
|
"name": "messages",
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "Array of message objects with sender, text, timestamp"
|
|
},
|
|
{
|
|
"name": "onSendMessage",
|
|
"type": "function",
|
|
"required": true,
|
|
"description": "Callback when sending a message"
|
|
},
|
|
{
|
|
"name": "isLoading",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Show loading state while sending"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "elevation",
|
|
"className": "irc-chat",
|
|
"sx": { "height": "500px", "display": "flex", "flexDirection": "column" },
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"title": "Chat"
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"className": "chat-content",
|
|
"sx": { "flex": 1, "overflowY": "auto", "padding": 2 },
|
|
"children": [
|
|
{
|
|
"type": "List",
|
|
"className": "messages-list",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"className": "no-messages",
|
|
"sx": { "textAlign": "center", "padding": 2 },
|
|
"children": "No messages yet"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "chat-input-area",
|
|
"sx": { "padding": 2, "borderTop": "1px solid #e0e0e0" },
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"gap": 1,
|
|
"children": [
|
|
{
|
|
"type": "TextField",
|
|
"placeholder": "Type your message...",
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"fullWidth": true,
|
|
"className": "message-input"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "display": "flex", "justifyContent": "flex-end" },
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"children": "Send",
|
|
"disabled": "{{isLoading}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"exports": {
|
|
"components": ["StatCard", "DashboardGrid", "Widget", "DashboardHome", "UserProfile", "CommentsList", "CommentForm", "IRCChat"]
|
|
}
|
|
}
|