mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 22:04:56 +00:00
johndoe6345789
af80a8e761
- Created contact-form.json defining the structure and validation for the contact form. - Added package.json for form_builder package with dependencies and exports. - Implemented functions.json for form field handlers and validation functions. - Configured storybook for form_builder with various form field stories. - Established style tokens for form fields including colors and spacing. - Defined validation patterns and functions for form fields in validators.json. feat(notification_center): introduce notification components and event handling - Added ui.json for notification components including summary, toast, and list. - Created schema.json for Notification entity with fields and relations. - Implemented event handlers for notification events in handlers.json. - Established package.json for notification_center with components and scripts. - Developed functions.json for notification management and display functions. - Configured storybook for notification_center with various notification stories. - Defined style tokens for notifications including colors and spacing.
282 lines
7.8 KiB
JSON
282 lines
7.8 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "notification_center",
|
|
"description": "Notification components including toast, list, and summary",
|
|
"components": [
|
|
{
|
|
"id": "notification_summary",
|
|
"name": "NotificationSummary",
|
|
"description": "Summary card showing notification counts by severity level",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"default": "Notification Summary"
|
|
},
|
|
{
|
|
"name": "subtitle",
|
|
"type": "string",
|
|
"required": false
|
|
},
|
|
{
|
|
"name": "totalLabel",
|
|
"type": "string",
|
|
"default": "Total"
|
|
}
|
|
],
|
|
"state": [
|
|
{
|
|
"name": "total",
|
|
"type": "number",
|
|
"default": 0
|
|
},
|
|
{
|
|
"name": "items",
|
|
"type": "array",
|
|
"default": []
|
|
}
|
|
],
|
|
"handlers": {
|
|
"init": "summary.prepareSummary"
|
|
},
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"className": "space-y-4 p-4",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"className": "space-y-1",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "overline",
|
|
"className": "tracking-[0.3em] text-muted-foreground",
|
|
"children": "{{title}}"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "flex items-baseline justify-between gap-3",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h3",
|
|
"className": "font-bold",
|
|
"children": "{{total}}"
|
|
},
|
|
{
|
|
"type": "Badge",
|
|
"variant": "secondary",
|
|
"label": "{{totalLabel}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Separator"
|
|
},
|
|
{
|
|
"type": "List",
|
|
"dataSource": "items",
|
|
"className": "space-y-3",
|
|
"itemTemplate": {
|
|
"type": "Box",
|
|
"className": "flex items-center justify-between gap-3",
|
|
"children": [
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"fontWeight": "semibold",
|
|
"children": "{{item.label}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "caption",
|
|
"color": "textSecondary",
|
|
"children": "{{item.hint}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "flex items-center gap-2",
|
|
"children": [
|
|
{
|
|
"type": "Badge",
|
|
"variant": "outline",
|
|
"className": "{{item.classes}}",
|
|
"label": "{{item.count}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "overline",
|
|
"className": "tracking-[0.4em]",
|
|
"children": "{{item.severity}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "notification_toast",
|
|
"name": "NotificationToast",
|
|
"description": "Toast notification popup",
|
|
"props": [
|
|
{
|
|
"name": "type",
|
|
"type": "string",
|
|
"default": "info",
|
|
"enum": ["info", "success", "warning", "error"]
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "message",
|
|
"type": "string",
|
|
"required": true
|
|
},
|
|
{
|
|
"name": "duration",
|
|
"type": "number",
|
|
"default": 5000
|
|
}
|
|
],
|
|
"handlers": {
|
|
"onDismiss": "toast.dismiss"
|
|
},
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Box",
|
|
"className": "toast toast-{{type}}",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{type === 'success' ? 'CheckCircle' : type === 'error' ? 'XCircle' : type === 'warning' ? 'AlertTriangle' : 'Info'}}",
|
|
"size": 20
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"fontWeight": "semibold",
|
|
"children": "{{title}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"children": "{{message}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "ghost",
|
|
"size": "sm",
|
|
"onClick": "onDismiss",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "X",
|
|
"size": 16
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "notification_list",
|
|
"name": "NotificationList",
|
|
"description": "List of notifications with read/unread status",
|
|
"props": [
|
|
{
|
|
"name": "notifications",
|
|
"type": "array",
|
|
"default": []
|
|
},
|
|
{
|
|
"name": "showUnreadOnly",
|
|
"type": "boolean",
|
|
"default": false
|
|
}
|
|
],
|
|
"handlers": {
|
|
"markAsRead": "list.markAsRead",
|
|
"dismiss": "list.dismiss"
|
|
},
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "List",
|
|
"dataSource": "notifications",
|
|
"className": "notification-list",
|
|
"itemTemplate": {
|
|
"type": "Box",
|
|
"className": "notification-item {{item.read ? 'read' : 'unread'}}",
|
|
"children": [
|
|
{
|
|
"type": "Icon",
|
|
"name": "{{item.icon || 'Bell'}}",
|
|
"size": 24,
|
|
"color": "{{item.type}}"
|
|
},
|
|
{
|
|
"type": "Box",
|
|
"className": "flex-1",
|
|
"children": [
|
|
{
|
|
"type": "Text",
|
|
"fontWeight": "{{item.read ? 'normal' : 'semibold'}}",
|
|
"children": "{{item.title}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "secondary",
|
|
"children": "{{item.message}}"
|
|
},
|
|
{
|
|
"type": "Text",
|
|
"variant": "caption",
|
|
"color": "secondary",
|
|
"children": "{{item.createdAt}}"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{!item.read}}",
|
|
"then": {
|
|
"type": "Badge",
|
|
"variant": "dot",
|
|
"color": "primary"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"exports": {
|
|
"components": ["NotificationSummary", "NotificationToast", "NotificationList"]
|
|
}
|
|
}
|