mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
johndoe6345789
6992c3a650
- Created package.json for ui_pages with dependencies and exports. - Added roles.json for access permissions related to UI pages. - Implemented functions.json for managing UI pages and routing. - Developed stories.json for Storybook showcasing UI pages components. - Defined styles tokens for UI pages including colors, spacing, and typography. feat(ui_permissions): Introduce UI Permissions package for access control - Created package.json for ui_permissions with permission utilities. - Added roles.json defining permissions for a 6-level access control system. - Implemented functions.json for permission checking and level management. - Developed stories.json for Storybook showcasing permission-related components. - Defined styles tokens for UI permissions including colors and spacing.
456 lines
12 KiB
JSON
456 lines
12 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "ui_pages",
|
|
"description": "UI page components including layouts, navigation, and page containers",
|
|
"components": [
|
|
{
|
|
"id": "page_layout",
|
|
"name": "PageLayout",
|
|
"description": "Base page layout with navigation and footer",
|
|
"props": [
|
|
{
|
|
"name": "level",
|
|
"type": "number",
|
|
"required": true,
|
|
"description": "Required permission level (1-6)"
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Page title"
|
|
},
|
|
{
|
|
"name": "children",
|
|
"type": "any",
|
|
"required": true,
|
|
"description": "Page content"
|
|
},
|
|
{
|
|
"name": "requiresAuth",
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "Whether authentication is required"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "page-layout min-h-screen",
|
|
"children": [
|
|
{
|
|
"type": "NavigationBar",
|
|
"props": {
|
|
"level": "{{level}}",
|
|
"onNavigate": "handleNavigate"
|
|
}
|
|
},
|
|
{
|
|
"type": "Container",
|
|
"maxWidth": "lg",
|
|
"className": "px-4 sm:px-6 lg:px-8 pt-6 space-y-6",
|
|
"children": "{{children}}"
|
|
},
|
|
{
|
|
"type": "AppFooter"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "navigation_bar",
|
|
"name": "NavigationBar",
|
|
"description": "Top navigation bar with level-based menu items",
|
|
"props": [
|
|
{
|
|
"name": "level",
|
|
"type": "number",
|
|
"required": true,
|
|
"description": "Current navigation level"
|
|
},
|
|
{
|
|
"name": "onNavigate",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Navigation handler function name"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "AppBar",
|
|
"position": "sticky",
|
|
"color": "default",
|
|
"children": [
|
|
{
|
|
"type": "Toolbar",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"children": "MetaBuilder"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"sx": { "flexGrow": 1 }
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"color": "inherit",
|
|
"children": "Home"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "app_footer",
|
|
"name": "AppFooter",
|
|
"description": "Application footer with links and copyright",
|
|
"props": [],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"component": "footer",
|
|
"sx": {
|
|
"mt": "auto",
|
|
"py": 3,
|
|
"px": 2,
|
|
"backgroundColor": "background.paper"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Container",
|
|
"maxWidth": "lg",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"align": "center",
|
|
"children": "© 2026 MetaBuilder. All rights reserved."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "server_status_card",
|
|
"name": "ServerStatusCard",
|
|
"description": "Card displaying server status information",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"default": "Server Status"
|
|
},
|
|
{
|
|
"name": "serverName",
|
|
"type": "string",
|
|
"default": "MetaBuilder Development Server"
|
|
},
|
|
{
|
|
"name": "status",
|
|
"type": "string",
|
|
"default": "Active"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"children": [
|
|
{
|
|
"type": "CardTitle",
|
|
"props": { "text": "{{title}}" }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"children": "{{serverName}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "textSecondary",
|
|
"children": "Status: {{status}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "login_form",
|
|
"name": "LoginForm",
|
|
"description": "Login form with username and password fields",
|
|
"props": [
|
|
{
|
|
"name": "onSubmit",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Submit handler function name"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Label",
|
|
"htmlFor": "username",
|
|
"children": "Username"
|
|
},
|
|
{
|
|
"type": "Input",
|
|
"id": "username",
|
|
"name": "username",
|
|
"placeholder": "Enter your username",
|
|
"required": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Label",
|
|
"htmlFor": "password",
|
|
"children": "Password"
|
|
},
|
|
{
|
|
"type": "Input",
|
|
"id": "password",
|
|
"name": "password",
|
|
"type": "password",
|
|
"placeholder": "Enter your password",
|
|
"required": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"type": "submit",
|
|
"variant": "contained",
|
|
"fullWidth": true,
|
|
"children": "Sign In"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "register_form",
|
|
"name": "RegisterForm",
|
|
"description": "Registration form with username, email fields",
|
|
"props": [
|
|
{
|
|
"name": "onSubmit",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Submit handler function name"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Label",
|
|
"htmlFor": "reg-username",
|
|
"children": "Username"
|
|
},
|
|
{
|
|
"type": "Input",
|
|
"id": "reg-username",
|
|
"name": "username",
|
|
"placeholder": "Choose a username",
|
|
"required": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Label",
|
|
"htmlFor": "email",
|
|
"children": "Email"
|
|
},
|
|
{
|
|
"type": "Input",
|
|
"id": "email",
|
|
"name": "email",
|
|
"type": "email",
|
|
"placeholder": "your@email.com",
|
|
"required": true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"type": "submit",
|
|
"variant": "contained",
|
|
"fullWidth": true,
|
|
"children": "Create Account"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"pages": [
|
|
{
|
|
"id": "level1",
|
|
"path": "/",
|
|
"title": "Home",
|
|
"level": 1,
|
|
"requiresAuth": false,
|
|
"layout": {
|
|
"type": "PageLayout",
|
|
"props": {
|
|
"level": 1,
|
|
"title": "Home"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "ServerStatusCard"
|
|
},
|
|
{
|
|
"type": "Tabs",
|
|
"defaultValue": "overview",
|
|
"children": [
|
|
{
|
|
"type": "TabsList",
|
|
"children": [
|
|
{ "type": "TabsTrigger", "value": "overview", "children": "Overview" },
|
|
{ "type": "TabsTrigger", "value": "features", "children": "Features" },
|
|
{ "type": "TabsTrigger", "value": "docs", "children": "Documentation" }
|
|
]
|
|
},
|
|
{
|
|
"type": "TabsContent",
|
|
"value": "overview",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h5",
|
|
"children": "Welcome to MetaBuilder"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"children": "MetaBuilder is a powerful data-driven platform with multi-level navigation."
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"children": "Explore Level 2",
|
|
"onClick": "navigateToLevel2"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"id": "login",
|
|
"path": "/login",
|
|
"title": "Login",
|
|
"level": 1,
|
|
"requiresAuth": false,
|
|
"layout": {
|
|
"type": "Box",
|
|
"className": "min-h-screen flex items-center justify-center p-4",
|
|
"sx": {
|
|
"background": "linear-gradient(to bottom right, rgba(var(--primary), 0.05), transparent, rgba(var(--accent), 0.05))"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "Card",
|
|
"sx": { "width": "100%", "maxWidth": 400 },
|
|
"children": [
|
|
{
|
|
"type": "CardHeader",
|
|
"children": [
|
|
{ "type": "CardTitle", "children": "Welcome to MetaBuilder" },
|
|
{ "type": "CardDescription", "children": "Sign in to your account or create a new one" }
|
|
]
|
|
},
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Tabs",
|
|
"defaultValue": "login",
|
|
"children": [
|
|
{
|
|
"type": "TabsList",
|
|
"sx": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "width": "100%" },
|
|
"children": [
|
|
{ "type": "TabsTrigger", "value": "login", "children": "Login" },
|
|
{ "type": "TabsTrigger", "value": "register", "children": "Register" }
|
|
]
|
|
},
|
|
{
|
|
"type": "TabsContent",
|
|
"value": "login",
|
|
"children": [
|
|
{ "type": "LoginForm", "onSubmit": "handleLogin" }
|
|
]
|
|
},
|
|
{
|
|
"type": "TabsContent",
|
|
"value": "register",
|
|
"children": [
|
|
{ "type": "RegisterForm", "onSubmit": "handleRegister" }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|