mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 14:25:02 +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.
355 lines
9.6 KiB
JSON
355 lines
9.6 KiB
JSON
{
|
|
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
|
|
"schemaVersion": "2.0.0",
|
|
"package": "social_hub",
|
|
"description": "Social hub components including hero section, feed, composer, and stats",
|
|
"components": [
|
|
{
|
|
"id": "social_hub_root",
|
|
"name": "SocialHubRoot",
|
|
"description": "Root container for the social hub with all sections",
|
|
"props": [
|
|
{
|
|
"name": "children",
|
|
"type": "any",
|
|
"required": false
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"spacing": 3,
|
|
"className": "social-hub-root",
|
|
"children": "{{children}}"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_hero",
|
|
"name": "SocialHubHero",
|
|
"description": "Hero section with title and subtitle",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "Social Hub"
|
|
},
|
|
{
|
|
"name": "subtitle",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "A modern feed for creator updates, curated stories, and live moments."
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "social-hub-hero",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h4",
|
|
"fontWeight": "bold",
|
|
"gutterBottom": true,
|
|
"children": "{{title}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body1",
|
|
"color": "text.secondary",
|
|
"children": "{{subtitle}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_stat_card",
|
|
"name": "SocialHubStatCard",
|
|
"description": "Single statistic card for social metrics",
|
|
"props": [
|
|
{
|
|
"name": "label",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Stat label text"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Stat value to display"
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Optional icon name"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "social-hub-stat-card",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "caption",
|
|
"color": "text.secondary",
|
|
"children": "{{label}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h5",
|
|
"fontWeight": "semibold",
|
|
"children": "{{value}}"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_stats",
|
|
"name": "SocialHubStats",
|
|
"description": "Grid of social statistics",
|
|
"props": [
|
|
{
|
|
"name": "stats",
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "Array of stat objects with label and value"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Grid",
|
|
"container": true,
|
|
"spacing": 2,
|
|
"className": "social-hub-stats-grid",
|
|
"children": {
|
|
"type": "map",
|
|
"items": "{{stats}}",
|
|
"template": {
|
|
"type": "Grid",
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 4,
|
|
"children": [
|
|
{
|
|
"type": "SocialHubStatCard",
|
|
"label": "{{item.label}}",
|
|
"value": "{{item.value}}"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_composer",
|
|
"name": "SocialHubComposer",
|
|
"description": "Post composer with textarea and action buttons",
|
|
"props": [
|
|
{
|
|
"name": "placeholder",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "What are you building today?"
|
|
},
|
|
{
|
|
"name": "onPublish",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when publish button is clicked"
|
|
},
|
|
{
|
|
"name": "onMediaAdd",
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "Callback when add media button is clicked"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "social-hub-composer",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "subtitle2",
|
|
"children": "Share a quick update"
|
|
},
|
|
{
|
|
"type": "TextField",
|
|
"multiline": true,
|
|
"rows": 3,
|
|
"fullWidth": true,
|
|
"placeholder": "{{placeholder}}",
|
|
"variant": "outlined"
|
|
},
|
|
{
|
|
"type": "Stack",
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Button",
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "{{onPublish}}",
|
|
"children": "Publish"
|
|
},
|
|
{
|
|
"type": "Button",
|
|
"variant": "outlined",
|
|
"onClick": "{{onMediaAdd}}",
|
|
"children": "Add media"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_post",
|
|
"name": "SocialHubPost",
|
|
"description": "Single post card with title, body, and badge",
|
|
"props": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Post title"
|
|
},
|
|
{
|
|
"name": "body",
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "Post content"
|
|
},
|
|
{
|
|
"name": "badge",
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "Badge label"
|
|
},
|
|
{
|
|
"name": "badgeVariant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "default",
|
|
"description": "Badge color variant"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Card",
|
|
"variant": "outlined",
|
|
"className": "social-hub-post",
|
|
"children": [
|
|
{
|
|
"type": "CardContent",
|
|
"children": [
|
|
{
|
|
"type": "Stack",
|
|
"spacing": 1,
|
|
"children": [
|
|
{
|
|
"type": "Typography",
|
|
"variant": "h6",
|
|
"fontWeight": "semibold",
|
|
"children": "{{title}}"
|
|
},
|
|
{
|
|
"type": "Typography",
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"children": "{{body}}"
|
|
},
|
|
{
|
|
"type": "conditional",
|
|
"condition": "{{badge}}",
|
|
"then": {
|
|
"type": "Chip",
|
|
"label": "{{badge}}",
|
|
"size": "small",
|
|
"color": "{{badgeVariant === 'secondary' ? 'secondary' : 'primary'}}",
|
|
"variant": "outlined"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "social_hub_feed",
|
|
"name": "SocialHubFeed",
|
|
"description": "Feed container for multiple posts",
|
|
"props": [
|
|
{
|
|
"name": "posts",
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "Array of post objects"
|
|
}
|
|
],
|
|
"render": {
|
|
"type": "element",
|
|
"template": {
|
|
"type": "Stack",
|
|
"spacing": 2,
|
|
"className": "social-hub-feed",
|
|
"children": {
|
|
"type": "map",
|
|
"items": "{{posts}}",
|
|
"template": {
|
|
"type": "SocialHubPost",
|
|
"title": "{{item.title}}",
|
|
"body": "{{item.body}}",
|
|
"badge": "{{item.badge}}",
|
|
"badgeVariant": "{{item.badgeVariant}}"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|