From 4d8fbc22e12f111d7bb6a512a378f7986c8b4be4 Mon Sep 17 00:00:00 2001 From: Richard Ward Date: Tue, 30 Dec 2025 21:15:09 +0000 Subject: [PATCH] config: storybook,src,json (3 files) --- storybook/src/mocks/data/nav_menu.json | 132 +++++++++++++++++++++++++ storybook/src/mocks/data/ui_login.json | 91 +++++++++++++++++ storybook/src/mocks/json-loader.ts | 6 ++ 3 files changed, 229 insertions(+) create mode 100644 storybook/src/mocks/data/nav_menu.json create mode 100644 storybook/src/mocks/data/ui_login.json diff --git a/storybook/src/mocks/data/nav_menu.json b/storybook/src/mocks/data/nav_menu.json new file mode 100644 index 000000000..237692341 --- /dev/null +++ b/storybook/src/mocks/data/nav_menu.json @@ -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}}" } } + ] + } + ] + }] + } + } + } +} diff --git a/storybook/src/mocks/data/ui_login.json b/storybook/src/mocks/data/ui_login.json new file mode 100644 index 000000000..fc0d8703b --- /dev/null +++ b/storybook/src/mocks/data/ui_login.json @@ -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" } } + ] + }] + } + ] + }] + } + } + } +} diff --git a/storybook/src/mocks/json-loader.ts b/storybook/src/mocks/json-loader.ts index d3e4ea631..067d66180 100644 --- a/storybook/src/mocks/json-loader.ts +++ b/storybook/src/mocks/json-loader.ts @@ -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, ]