mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-25 22:34:56 +00:00
config: storybook,src,json (3 files)
This commit is contained in:
Richard Ward
132
storybook/src/mocks/data/nav_menu.json
Normal file
132
storybook/src/mocks/data/nav_menu.json
Normal file
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"metadata": {
|
||||
"packageId": "nav_menu",
|
||||
"name": "Navigation Menu",
|
||||
"version": "1.0.0",
|
||||
"description": "Navigation and menu components",
|
||||
"category": "ui",
|
||||
"minLevel": 1,
|
||||
"exports": {
|
||||
"scripts": ["sidebar", "navbar", "breadcrumbs"]
|
||||
}
|
||||
},
|
||||
"renders": {
|
||||
"init.lua": {
|
||||
"description": "Lifecycle hooks",
|
||||
"component": {
|
||||
"type": "Alert",
|
||||
"props": { "severity": "info" },
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "text": "init.lua - lifecycle hooks" } }
|
||||
]
|
||||
}
|
||||
},
|
||||
"sidebar.lua": {
|
||||
"description": "Sidebar navigation",
|
||||
"component": {
|
||||
"type": "Box",
|
||||
"props": { "sx": { "width": 280, "height": "100vh", "bgcolor": "background.paper", "borderRight": 1, "borderColor": "divider" } },
|
||||
"children": [
|
||||
{
|
||||
"type": "Box",
|
||||
"props": { "sx": { "p": 2, "borderBottom": 1, "borderColor": "divider" } },
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "variant": "h6", "text": "MetaBuilder" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "List",
|
||||
"children": [
|
||||
{
|
||||
"type": "ListItem",
|
||||
"props": { "button": true, "selected": true },
|
||||
"children": [
|
||||
{ "type": "Icon", "props": { "name": "home" } },
|
||||
{ "type": "Typography", "props": { "text": "Dashboard" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "ListItem",
|
||||
"props": { "button": true },
|
||||
"children": [
|
||||
{ "type": "Icon", "props": { "name": "users" } },
|
||||
{ "type": "Typography", "props": { "text": "Users" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "ListItem",
|
||||
"props": { "button": true },
|
||||
"children": [
|
||||
{ "type": "Icon", "props": { "name": "settings" } },
|
||||
{ "type": "Typography", "props": { "text": "Settings" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Divider"
|
||||
},
|
||||
{
|
||||
"type": "ListItem",
|
||||
"props": { "button": true },
|
||||
"children": [
|
||||
{ "type": "Icon", "props": { "name": "package" } },
|
||||
{ "type": "Typography", "props": { "text": "Packages" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "ListItem",
|
||||
"props": { "button": true },
|
||||
"children": [
|
||||
{ "type": "Icon", "props": { "name": "code" } },
|
||||
{ "type": "Typography", "props": { "text": "Scripts" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Box",
|
||||
"props": { "sx": { "position": "absolute", "bottom": 0, "left": 0, "right": 0, "p": 2, "borderTop": 1, "borderColor": "divider" } },
|
||||
"children": [
|
||||
{
|
||||
"type": "Flex",
|
||||
"props": { "alignItems": "center", "gap": 2 },
|
||||
"children": [
|
||||
{ "type": "Avatar", "props": { "children": "{{user.username}}" } },
|
||||
{
|
||||
"type": "Box",
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "variant": "body2", "text": "{{user.username}}" } },
|
||||
{ "type": "Typography", "props": { "variant": "caption", "color": "text.secondary", "text": "Level {{user.level}}" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"navbar.lua": {
|
||||
"description": "Top navigation bar",
|
||||
"component": {
|
||||
"type": "AppBar",
|
||||
"props": { "position": "static" },
|
||||
"children": [{
|
||||
"type": "Toolbar",
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "variant": "h6", "text": "MetaBuilder", "sx": { "flexGrow": 1 } } },
|
||||
{
|
||||
"type": "Stack",
|
||||
"props": { "direction": "row", "spacing": 2, "alignItems": "center" },
|
||||
"children": [
|
||||
{ "type": "Button", "props": { "color": "inherit", "children": "Dashboard" } },
|
||||
{ "type": "Button", "props": { "color": "inherit", "children": "Packages" } },
|
||||
{ "type": "Button", "props": { "color": "inherit", "children": "Settings" } },
|
||||
{ "type": "Avatar", "props": { "sx": { "width": 32, "height": 32 }, "children": "{{user.username}}" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
storybook/src/mocks/data/ui_login.json
Normal file
91
storybook/src/mocks/data/ui_login.json
Normal file
@@ -0,0 +1,91 @@
|
||||
{
|
||||
"metadata": {
|
||||
"packageId": "ui_login",
|
||||
"name": "Login UI",
|
||||
"version": "1.0.0",
|
||||
"description": "Authentication and login forms",
|
||||
"category": "ui",
|
||||
"minLevel": 1,
|
||||
"exports": {
|
||||
"scripts": ["login_form", "register_form", "forgot_password"]
|
||||
}
|
||||
},
|
||||
"renders": {
|
||||
"init.lua": {
|
||||
"description": "Lifecycle hooks",
|
||||
"component": {
|
||||
"type": "Alert",
|
||||
"props": { "severity": "info" },
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "text": "init.lua - lifecycle hooks" } }
|
||||
]
|
||||
}
|
||||
},
|
||||
"login_form.lua": {
|
||||
"description": "Login form",
|
||||
"component": {
|
||||
"type": "Box",
|
||||
"props": { "sx": { "minHeight": "100vh", "display": "flex", "alignItems": "center", "justifyContent": "center", "bgcolor": "background.default" } },
|
||||
"children": [{
|
||||
"type": "Card",
|
||||
"props": { "sx": { "width": 400, "p": 2 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "CardHeader",
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "variant": "h4", "text": "Sign In", "align": "center" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "CardContent",
|
||||
"children": [{
|
||||
"type": "Stack",
|
||||
"props": { "spacing": 3 },
|
||||
"children": [
|
||||
{ "type": "TextField", "props": { "label": "Email", "type": "email", "fullWidth": true } },
|
||||
{ "type": "TextField", "props": { "label": "Password", "type": "password", "fullWidth": true } },
|
||||
{ "type": "Button", "props": { "variant": "contained", "fullWidth": true, "children": "Sign In" } },
|
||||
{ "type": "Divider", "props": { "text": "or" } },
|
||||
{ "type": "Button", "props": { "variant": "outlined", "fullWidth": true, "children": "Sign in with Google" } }
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
"register_form.lua": {
|
||||
"description": "Registration form",
|
||||
"component": {
|
||||
"type": "Box",
|
||||
"props": { "sx": { "minHeight": "100vh", "display": "flex", "alignItems": "center", "justifyContent": "center" } },
|
||||
"children": [{
|
||||
"type": "Card",
|
||||
"props": { "sx": { "width": 400, "p": 2 } },
|
||||
"children": [
|
||||
{
|
||||
"type": "CardHeader",
|
||||
"children": [
|
||||
{ "type": "Typography", "props": { "variant": "h4", "text": "Create Account", "align": "center" } }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "CardContent",
|
||||
"children": [{
|
||||
"type": "Stack",
|
||||
"props": { "spacing": 3 },
|
||||
"children": [
|
||||
{ "type": "TextField", "props": { "label": "Username", "fullWidth": true } },
|
||||
{ "type": "TextField", "props": { "label": "Email", "type": "email", "fullWidth": true } },
|
||||
{ "type": "TextField", "props": { "label": "Password", "type": "password", "fullWidth": true } },
|
||||
{ "type": "TextField", "props": { "label": "Confirm Password", "type": "password", "fullWidth": true } },
|
||||
{ "type": "Button", "props": { "variant": "contained", "fullWidth": true, "children": "Create Account" } }
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,10 @@ import { processTemplates } from './schema'
|
||||
// Import all JSON mock files
|
||||
// Vite handles JSON imports natively
|
||||
import dashboardMock from './data/dashboard.json'
|
||||
import dataTableMock from './data/data_table.json'
|
||||
import navMenuMock from './data/nav_menu.json'
|
||||
import uiLevel4Mock from './data/ui_level4.json'
|
||||
import uiLoginMock from './data/ui_login.json'
|
||||
import userManagerMock from './data/user_manager.json'
|
||||
|
||||
/**
|
||||
@@ -53,7 +56,10 @@ function jsonToMockPackage(json: JsonMockPackage): MockPackageDefinition {
|
||||
*/
|
||||
const jsonMocks: JsonMockPackage[] = [
|
||||
dashboardMock as unknown as JsonMockPackage,
|
||||
dataTableMock as unknown as JsonMockPackage,
|
||||
navMenuMock as unknown as JsonMockPackage,
|
||||
uiLevel4Mock as unknown as JsonMockPackage,
|
||||
uiLoginMock as unknown as JsonMockPackage,
|
||||
userManagerMock as unknown as JsonMockPackage,
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user