Files
metabuilder/packages/route_manager/components/ui.json
johndoe6345789 3ec49cfe8c feat: Introduce schema-driven package system specification
- Added `package_system.tla` to model the schema-driven package system, including multi-source loading, validation, dependency resolution, and permission filtering.
- Created `package_system.cfg` for TLC model checker configuration, defining constants and invariants for bounded model checking.
- Updated `metabuilder.tla` to reflect the core specification of MetaBuilder, emphasizing the package lifecycle and related specifications.
2026-01-02 21:59:59 +00:00

758 lines
26 KiB
JSON

{
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
"schemaVersion": "2.0.0",
"package": "route_manager",
"description": "Route management components for configuring page URLs and access control",
"components": [
{
"id": "route_manager",
"name": "RouteManager",
"description": "Main route management interface with list and editor",
"props": [
{
"name": "tenantId",
"type": "string",
"required": true,
"description": "Current tenant ID"
}
],
"render": {
"type": "element",
"template": {
"type": "Box",
"className": "route-manager",
"children": [
{
"type": "Paper",
"elevation": 1,
"sx": { "p": 3 },
"children": [
{
"type": "Stack",
"direction": "row",
"justifyContent": "space-between",
"alignItems": "center",
"mb": 3,
"children": [
{
"type": "Typography",
"variant": "h5",
"children": "Route Manager"
},
{
"type": "Button",
"variant": "contained",
"startIcon": {
"type": "Icon",
"name": "Add"
},
"onClick": "{{handleCreateRoute}}",
"children": "New Route"
}
]
},
{
"type": "Stack",
"direction": "row",
"spacing": 2,
"mb": 3,
"children": [
{
"type": "TextField",
"placeholder": "Search routes...",
"value": "{{searchQuery}}",
"onChange": "{{handleSearchChange}}",
"size": "small",
"sx": { "flexGrow": 1 },
"InputProps": {
"startAdornment": {
"type": "InputAdornment",
"position": "start",
"children": [
{
"type": "Icon",
"name": "Search"
}
]
}
}
},
{
"type": "FormControl",
"size": "small",
"sx": { "minWidth": 150 },
"children": [
{
"type": "InputLabel",
"children": "Access Level"
},
{
"type": "Select",
"value": "{{filterLevel}}",
"onChange": "{{handleLevelFilter}}",
"label": "Access Level",
"children": [
{
"type": "MenuItem",
"value": "all",
"children": "All Levels"
},
{
"type": "MenuItem",
"value": "0",
"children": "Public"
},
{
"type": "MenuItem",
"value": "1",
"children": "User"
},
{
"type": "MenuItem",
"value": "2",
"children": "Moderator"
},
{
"type": "MenuItem",
"value": "3",
"children": "Admin"
},
{
"type": "MenuItem",
"value": "4",
"children": "God"
},
{
"type": "MenuItem",
"value": "5",
"children": "SuperGod"
}
]
}
]
}
]
},
{
"type": "Divider",
"sx": { "mb": 2 }
},
{
"type": "ComponentRef",
"ref": "route_list",
"props": {
"routes": "{{filteredRoutes}}",
"onEdit": "{{handleEditRoute}}",
"onDelete": "{{handleDeleteRoute}}",
"onPreview": "{{handlePreviewRoute}}"
}
}
]
},
{
"type": "conditional",
"condition": "{{editingRoute}}",
"then": {
"type": "ComponentRef",
"ref": "route_editor",
"props": {
"route": "{{editingRoute}}",
"isNew": "{{isNewRoute}}",
"onSave": "{{handleSaveRoute}}",
"onClose": "{{handleCloseEditor}}"
}
}
}
]
}
}
},
{
"id": "route_list",
"name": "RouteList",
"description": "Table view of configured routes",
"props": [
{
"name": "routes",
"type": "array",
"required": true,
"description": "List of routes to display"
},
{
"name": "onEdit",
"type": "function",
"required": false
},
{
"name": "onDelete",
"type": "function",
"required": false
},
{
"name": "onPreview",
"type": "function",
"required": false
}
],
"render": {
"type": "element",
"template": {
"type": "TableContainer",
"component": "Paper",
"variant": "outlined",
"children": [
{
"type": "Table",
"size": "small",
"children": [
{
"type": "TableHead",
"children": [
{
"type": "TableRow",
"children": [
{
"type": "TableCell",
"children": "Path"
},
{
"type": "TableCell",
"children": "Title"
},
{
"type": "TableCell",
"children": "Access Level"
},
{
"type": "TableCell",
"children": "Auth Required"
},
{
"type": "TableCell",
"children": "Status"
},
{
"type": "TableCell",
"align": "right",
"children": "Actions"
}
]
}
]
},
{
"type": "TableBody",
"children": [
{
"type": "each",
"items": "{{routes}}",
"as": "route",
"render": {
"type": "TableRow",
"hover": true,
"children": [
{
"type": "TableCell",
"children": [
{
"type": "Typography",
"variant": "body2",
"fontFamily": "monospace",
"children": "{{route.path}}"
}
]
},
{
"type": "TableCell",
"children": "{{route.title}}"
},
{
"type": "TableCell",
"children": [
{
"type": "Chip",
"label": "{{route.accessLevelName}}",
"size": "small",
"color": "{{route.accessLevel >= 4 ? 'error' : route.accessLevel >= 2 ? 'warning' : 'default'}}"
}
]
},
{
"type": "TableCell",
"children": [
{
"type": "conditional",
"condition": "{{route.requireAuth}}",
"then": {
"type": "Icon",
"name": "Lock",
"color": "action",
"fontSize": "small"
},
"else": {
"type": "Icon",
"name": "LockOpen",
"color": "disabled",
"fontSize": "small"
}
}
]
},
{
"type": "TableCell",
"children": [
{
"type": "Chip",
"label": "{{route.enabled ? 'Active' : 'Inactive'}}",
"size": "small",
"color": "{{route.enabled ? 'success' : 'default'}}"
}
]
},
{
"type": "TableCell",
"align": "right",
"children": [
{
"type": "Stack",
"direction": "row",
"spacing": 0.5,
"justifyContent": "flex-end",
"children": [
{
"type": "IconButton",
"size": "small",
"onClick": "{{() => onPreview(route)}}",
"children": [
{
"type": "Icon",
"name": "Visibility",
"fontSize": "small"
}
]
},
{
"type": "IconButton",
"size": "small",
"onClick": "{{() => onEdit(route)}}",
"children": [
{
"type": "Icon",
"name": "Edit",
"fontSize": "small"
}
]
},
{
"type": "IconButton",
"size": "small",
"color": "error",
"onClick": "{{() => onDelete(route)}}",
"children": [
{
"type": "Icon",
"name": "Delete",
"fontSize": "small"
}
]
}
]
}
]
}
]
}
}
]
}
]
}
]
}
}
},
{
"id": "route_editor",
"name": "RouteEditor",
"description": "Dialog for creating/editing routes",
"props": [
{
"name": "route",
"type": "object",
"required": false,
"description": "Route to edit (null for new)"
},
{
"name": "isNew",
"type": "boolean",
"required": false,
"default": false
},
{
"name": "onSave",
"type": "function",
"required": true
},
{
"name": "onClose",
"type": "function",
"required": true
}
],
"render": {
"type": "element",
"template": {
"type": "Dialog",
"open": true,
"onClose": "{{onClose}}",
"maxWidth": "sm",
"fullWidth": true,
"children": [
{
"type": "DialogTitle",
"children": "{{isNew ? 'Create New Route' : 'Edit Route'}}"
},
{
"type": "DialogContent",
"children": [
{
"type": "Stack",
"spacing": 3,
"sx": { "mt": 1 },
"children": [
{
"type": "TextField",
"label": "Path",
"value": "{{formData.path}}",
"onChange": "{{handleFieldChange('path')}}",
"fullWidth": true,
"required": true,
"placeholder": "/example/page",
"helperText": "URL path for this route (e.g., /dashboard, /users/:id)"
},
{
"type": "TextField",
"label": "Title",
"value": "{{formData.title}}",
"onChange": "{{handleFieldChange('title')}}",
"fullWidth": true,
"required": true,
"placeholder": "Page Title"
},
{
"type": "TextField",
"label": "Description",
"value": "{{formData.description}}",
"onChange": "{{handleFieldChange('description')}}",
"fullWidth": true,
"multiline": true,
"rows": 2,
"placeholder": "Brief description of this page"
},
{
"type": "Divider"
},
{
"type": "ComponentRef",
"ref": "access_control_settings",
"props": {
"accessLevel": "{{formData.accessLevel}}",
"requireAuth": "{{formData.requireAuth}}",
"onChange": "{{handleAccessChange}}"
}
},
{
"type": "Divider"
},
{
"type": "FormControlLabel",
"control": {
"type": "Switch",
"checked": "{{formData.enabled}}",
"onChange": "{{handleFieldChange('enabled')}}"
},
"label": "Route Enabled"
},
{
"type": "TextField",
"label": "Component",
"value": "{{formData.component}}",
"onChange": "{{handleFieldChange('component')}}",
"fullWidth": true,
"placeholder": "ComponentName",
"helperText": "React component to render for this route"
}
]
}
]
},
{
"type": "DialogActions",
"children": [
{
"type": "Button",
"onClick": "{{onClose}}",
"children": "Cancel"
},
{
"type": "Button",
"variant": "contained",
"onClick": "{{handleSave}}",
"children": "{{isNew ? 'Create' : 'Save'}}"
}
]
}
]
}
}
},
{
"id": "access_control_settings",
"name": "AccessControlSettings",
"description": "Access level and authentication settings",
"props": [
{
"name": "accessLevel",
"type": "number",
"required": false,
"default": 0
},
{
"name": "requireAuth",
"type": "boolean",
"required": false,
"default": false
},
{
"name": "onChange",
"type": "function",
"required": true
}
],
"render": {
"type": "element",
"template": {
"type": "Box",
"children": [
{
"type": "Typography",
"variant": "subtitle2",
"color": "textSecondary",
"mb": 2,
"children": "Access Control"
},
{
"type": "Stack",
"spacing": 2,
"children": [
{
"type": "FormControl",
"fullWidth": true,
"children": [
{
"type": "InputLabel",
"children": "Minimum Access Level"
},
{
"type": "Select",
"value": "{{accessLevel}}",
"onChange": "{{(e) => onChange({ accessLevel: e.target.value })}}",
"label": "Minimum Access Level",
"children": [
{
"type": "MenuItem",
"value": 0,
"children": "Level 0 - Public"
},
{
"type": "MenuItem",
"value": 1,
"children": "Level 1 - User"
},
{
"type": "MenuItem",
"value": 2,
"children": "Level 2 - Moderator"
},
{
"type": "MenuItem",
"value": 3,
"children": "Level 3 - Admin"
},
{
"type": "MenuItem",
"value": 4,
"children": "Level 4 - God"
},
{
"type": "MenuItem",
"value": 5,
"children": "Level 5 - SuperGod"
}
]
}
]
},
{
"type": "FormControlLabel",
"control": {
"type": "Checkbox",
"checked": "{{requireAuth}}",
"onChange": "{{(e) => onChange({ requireAuth: e.target.checked })}}"
},
"label": "Require Authentication"
},
{
"type": "Alert",
"severity": "info",
"sx": { "mt": 1 },
"children": "{{accessLevel >= 1 ? 'Users must be logged in and have level ' + accessLevel + ' or higher to access this route.' : 'This route is publicly accessible.'}}"
}
]
}
]
}
}
},
{
"id": "route_preview",
"name": "RoutePreview",
"description": "Preview of how a route will appear",
"props": [
{
"name": "route",
"type": "object",
"required": true
},
{
"name": "onClose",
"type": "function",
"required": true
}
],
"render": {
"type": "element",
"template": {
"type": "Dialog",
"open": true,
"onClose": "{{onClose}}",
"maxWidth": "sm",
"fullWidth": true,
"children": [
{
"type": "DialogTitle",
"children": "Route Preview"
},
{
"type": "DialogContent",
"children": [
{
"type": "Card",
"variant": "outlined",
"children": [
{
"type": "CardContent",
"children": [
{
"type": "Stack",
"spacing": 2,
"children": [
{
"type": "Box",
"children": [
{
"type": "Typography",
"variant": "caption",
"color": "textSecondary",
"children": "URL"
},
{
"type": "Typography",
"variant": "h6",
"fontFamily": "monospace",
"children": "{{route.path}}"
}
]
},
{
"type": "Box",
"children": [
{
"type": "Typography",
"variant": "caption",
"color": "textSecondary",
"children": "Page Title"
},
{
"type": "Typography",
"variant": "body1",
"children": "{{route.title}}"
}
]
},
{
"type": "Divider"
},
{
"type": "Stack",
"direction": "row",
"spacing": 1,
"children": [
{
"type": "Chip",
"label": "Level {{route.accessLevel}}",
"size": "small"
},
{
"type": "conditional",
"condition": "{{route.requireAuth}}",
"then": {
"type": "Chip",
"label": "Auth Required",
"size": "small",
"icon": {
"type": "Icon",
"name": "Lock"
}
}
},
{
"type": "Chip",
"label": "{{route.enabled ? 'Active' : 'Inactive'}}",
"size": "small",
"color": "{{route.enabled ? 'success' : 'default'}}"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "DialogActions",
"children": [
{
"type": "Button",
"onClick": "{{onClose}}",
"children": "Close"
},
{
"type": "Button",
"variant": "contained",
"href": "{{route.path}}",
"target": "_blank",
"children": "Open in New Tab"
}
]
}
]
}
}
}
]
}