Files
metabuilder/packages/ui_home/components/ui.json
johndoe6345789 42446ef255 feat: Update package schemas and scripts to support JSON-based lifecycle hooks
- Added `jsonScript` property to metadata schema for JSON script entry points.
- Refactored `generate-package.ts` to replace Lua scripts with JSON scripts for lifecycle hooks.
- Updated test generation to use JSON format for metadata validation.
- Modified documentation and comments to reflect the transition from Lua to JSON scripting.
- Adjusted Storybook configuration and mock data to align with new JSON script structure.
- Renamed relevant files and references from Lua to JSON for consistency across the project.
2026-01-07 15:25:45 +00:00

641 lines
25 KiB
JSON

{
"$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
"schemaVersion": "2.0.0",
"package": "ui_home",
"description": "Home page components including hero, features, about, and contact sections",
"components": [
{
"id": "home_page",
"name": "HomePage",
"description": "Main home page layout with all sections",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Box",
"component": "main",
"className": "home-page",
"sx": {
"minHeight": "100vh",
"background": "linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%, rgba(var(--color-accent-rgb), 0.05) 100%)"
},
"children": [
{ "$ref": "hero_section" },
{ "$ref": "features_section" },
{ "$ref": "about_section" },
{ "$ref": "contact_section" }
]
}
}
},
{
"id": "hero_section",
"name": "HeroSection",
"description": "Hero section with title, subtitle, and call-to-action buttons",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "Build Anything, Visually"
},
{
"name": "subtitle",
"type": "string",
"required": false,
"default": "A 6-level meta-architecture for creating entire applications through visual workflows, schema editors, and embedded scripting. No code required."
}
],
"render": {
"type": "element",
"template": {
"type": "Box",
"component": "section",
"className": "hero-section",
"sx": {
"py": { "xs": 8, "md": 12 },
"px": { "xs": 2, "md": 4 }
},
"children": [
{
"type": "Container",
"maxWidth": "lg",
"className": "hero-container",
"children": [
{
"type": "Stack",
"spacing": 3,
"alignItems": "center",
"className": "hero-content",
"sx": { "textAlign": "center" },
"children": [
{
"type": "Text",
"variant": "h1",
"className": "hero-title",
"children": "{{title}}",
"sx": {
"fontWeight": 700,
"fontSize": { "xs": "2.5rem", "sm": "3.5rem", "md": "4rem" },
"lineHeight": 1.1,
"background": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%)",
"backgroundClip": "text",
"WebkitBackgroundClip": "text",
"WebkitTextFillColor": "transparent",
"color": "transparent"
}
},
{
"type": "Text",
"variant": "h5",
"className": "hero-subtitle",
"children": "{{subtitle}}",
"sx": {
"color": "text.secondary",
"fontWeight": 400,
"maxWidth": "600px",
"fontSize": { "xs": "1rem", "md": "1.25rem" },
"lineHeight": 1.6
}
},
{
"type": "Stack",
"direction": { "xs": "column", "sm": "row" },
"spacing": 2,
"className": "hero-cta-group",
"sx": { "mt": 2, "flexWrap": "wrap", "justifyContent": "center" },
"children": [
{
"type": "Button",
"variant": "contained",
"color": "primary",
"size": "large",
"children": "Get Started",
"className": "hero-cta-primary",
"onClick": "{{onNavigate(2)}}",
"sx": {
"px": 4,
"py": 1.5,
"fontSize": "1rem",
"fontWeight": 600,
"borderRadius": 2
}
},
{
"type": "Button",
"variant": "outlined",
"color": "primary",
"size": "large",
"children": "Watch Demo",
"className": "hero-cta-secondary",
"sx": {
"px": 4,
"py": 1.5,
"fontSize": "1rem",
"fontWeight": 600,
"borderRadius": 2
}
}
]
}
]
}
]
}
]
}
}
},
{
"id": "features_section",
"name": "FeaturesSection",
"description": "Features grid showcasing the 6 levels of MetaBuilder",
"props": [
{
"name": "title",
"type": "string",
"required": false,
"default": "Six Levels of Power"
}
],
"render": {
"type": "element",
"template": {
"type": "Box",
"component": "section",
"id": "features",
"className": "features-section",
"sx": {
"py": { "xs": 6, "md": 10 },
"px": { "xs": 2, "md": 4 }
},
"children": [
{
"type": "Container",
"maxWidth": "lg",
"className": "features-container",
"children": [
{
"type": "Text",
"variant": "h2",
"children": "{{title}}",
"className": "features-header",
"sx": { "fontWeight": 700, "textAlign": "center", "mb": 6 }
},
{
"type": "Grid",
"container": true,
"spacing": 3,
"className": "features-grid",
"children": [
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_1" }] },
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_2" }] },
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_3" }] },
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_4" }] },
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_5" }] },
{ "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_6" }] }
]
}
]
}
]
}
}
},
{
"id": "feature_card_1",
"name": "FeatureCard1",
"description": "Level 1 - Public Website feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level1",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "divider",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "1" }]
},
{ "type": "Text", "variant": "h6", "children": "Public Website", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Beautiful landing pages with responsive design and hamburger menus", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "Perfect for marketing sites, portfolios, and public-facing content", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "feature_card_2",
"name": "FeatureCard2",
"description": "Level 2 - User Area feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level2",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "divider",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "2" }]
},
{ "type": "Text", "variant": "h6", "children": "User Area", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Authenticated dashboards with profiles and comment systems", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "User registration, profile management, and interactive features", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "feature_card_3",
"name": "FeatureCard3",
"description": "Level 3 - Moderator Panel feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level3",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "divider",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #f97316 0%, #ea580c 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "3" }]
},
{ "type": "Text", "variant": "h6", "children": "Moderator Panel", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Content moderation and user management tools", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "Review content, manage reports, and maintain community standards", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "feature_card_4",
"name": "FeatureCard4",
"description": "Level 4 - Admin Panel feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level4",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "divider",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "4" }]
},
{ "type": "Text", "variant": "h6", "children": "Admin Panel", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Django-style data management with CRUD operations and filters", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "Complete control over data models with list views and inline editing", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "feature_card_5",
"name": "FeatureCard5",
"description": "Level 5 - God-Tier Builder feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level5",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "divider",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #a855f7 0%, #9333ea 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "5" }]
},
{ "type": "Text", "variant": "h6", "children": "God-Tier Builder", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Meta-builder with workflows, schemas, and automation scripting", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "Design and generate entire applications procedurally", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "feature_card_6",
"name": "FeatureCard6",
"description": "Level 6 - Super God Panel feature card",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Card",
"className": "feature-card feature-card--level6",
"sx": {
"height": "100%",
"border": 2,
"borderColor": "warning.main",
"background": "linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(234, 179, 8, 0.05) 100%)",
"transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
"&:hover": { "borderColor": "warning.dark", "transform": "translateY(-2px)" }
},
"children": [
{
"type": "CardHeader",
"className": "feature-card-header",
"children": [
{
"type": "Box",
"className": "feature-icon",
"sx": {
"width": 48, "height": 48, "borderRadius": 2,
"background": "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
"display": "flex", "alignItems": "center", "justifyContent": "center",
"color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
},
"children": [{ "type": "Text", "children": "6" }]
},
{
"type": "Stack",
"direction": "row",
"spacing": 1,
"alignItems": "center",
"children": [
{ "type": "Text", "variant": "h6", "children": "Super God Panel", "sx": { "fontWeight": 600 } },
{
"type": "Chip",
"label": "NEW",
"size": "small",
"sx": {
"bgcolor": "rgba(245, 158, 11, 0.2)",
"color": "warning.dark",
"fontWeight": 600,
"fontSize": "0.65rem"
}
}
]
},
{ "type": "Text", "variant": "body2", "children": "Multi-tenant control with power transfer and homepage management", "sx": { "color": "text.secondary", "mt": 1 } }
]
},
{
"type": "CardContent",
"className": "feature-card-content",
"children": [
{ "type": "Text", "variant": "body2", "children": "Supreme administrator access for multi-tenant architecture", "sx": { "color": "text.secondary" } }
]
}
]
}
}
},
{
"id": "about_section",
"name": "AboutSection",
"description": "About section with MetaBuilder description",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Box",
"component": "section",
"id": "about",
"className": "about-section",
"sx": {
"py": { "xs": 6, "md": 10 },
"px": { "xs": 2, "md": 4 },
"bgcolor": "action.hover"
},
"children": [
{
"type": "Container",
"maxWidth": "md",
"className": "about-container",
"children": [
{
"type": "Stack",
"spacing": 3,
"alignItems": "center",
"className": "about-content",
"sx": { "textAlign": "center" },
"children": [
{ "type": "Text", "variant": "h2", "children": "About MetaBuilder", "className": "about-title", "sx": { "fontWeight": 700 } },
{
"type": "Text",
"variant": "body1",
"children": "MetaBuilder is a revolutionary platform that lets you build entire application stacks through visual interfaces. From public websites to complex admin panels, everything is generated from declarative configurations, workflows, and embedded scripts.",
"className": "about-description",
"sx": { "color": "text.secondary", "fontSize": { "xs": "1rem", "md": "1.125rem" }, "lineHeight": 1.7 }
},
{
"type": "Text",
"variant": "body1",
"children": "Whether you're a designer who wants to create without code, or a developer who wants to work at a higher level of abstraction, MetaBuilder adapts to your needs.",
"className": "about-description",
"sx": { "color": "text.secondary", "fontSize": { "xs": "1rem", "md": "1.125rem" }, "lineHeight": 1.7 }
}
]
}
]
}
]
}
}
},
{
"id": "contact_section",
"name": "ContactSection",
"description": "Contact section with form",
"props": [],
"render": {
"type": "element",
"template": {
"type": "Box",
"component": "section",
"id": "contact",
"className": "contact-section",
"sx": {
"py": { "xs": 6, "md": 10 },
"px": { "xs": 2, "md": 4 }
},
"children": [
{
"type": "Container",
"maxWidth": "sm",
"className": "contact-container",
"children": [
{
"type": "Card",
"className": "contact-card",
"sx": { "p": { "xs": 3, "md": 4 } },
"children": [
{
"type": "Stack",
"spacing": 1,
"alignItems": "center",
"className": "contact-header",
"sx": { "textAlign": "center", "mb": 4 },
"children": [
{ "type": "Text", "variant": "h4", "children": "Get in Touch", "className": "contact-title", "sx": { "fontWeight": 600 } },
{ "type": "Text", "variant": "body2", "children": "Have questions? We'd love to hear from you.", "className": "contact-subtitle", "sx": { "color": "text.secondary" } }
]
},
{
"type": "Stack",
"component": "form",
"spacing": 3,
"className": "contact-form",
"children": [
{ "type": "TextField", "label": "Name", "placeholder": "Your name", "fullWidth": true, "variant": "outlined", "className": "contact-field contact-field--name" },
{ "type": "TextField", "label": "Email", "placeholder": "your@email.com", "type": "email", "fullWidth": true, "variant": "outlined", "className": "contact-field contact-field--email" },
{ "type": "TextField", "label": "Message", "placeholder": "Your message...", "fullWidth": true, "multiline": true, "rows": 4, "variant": "outlined", "className": "contact-field contact-field--message" },
{ "type": "Button", "variant": "contained", "color": "primary", "fullWidth": true, "size": "large", "children": "Send Message", "className": "contact-submit", "sx": { "py": 1.5, "fontWeight": 600 } }
]
}
]
}
]
}
]
}
}
}
],
"exports": {
"components": [
"HomePage",
"HeroSection",
"FeaturesSection",
"FeatureCard1",
"FeatureCard2",
"FeatureCard3",
"FeatureCard4",
"FeatureCard5",
"FeatureCard6",
"AboutSection",
"ContactSection"
]
}
}