diff --git a/storybook/src/stories/UILevel4.stories.tsx b/storybook/src/stories/UILevel4.stories.tsx new file mode 100644 index 000000000..1cfc3fb7d --- /dev/null +++ b/storybook/src/stories/UILevel4.stories.tsx @@ -0,0 +1,534 @@ +/** + * UI Level 4 Package Stories + * + * God-Tier Builder - Application design and development interface + * Purple theme with schema editor, workflow designer, and code editor + */ + +import React from 'react' +import type { Meta, StoryObj } from '@storybook/react' + +// Tab Badge Component +const TabBadge: React.FC<{ count: number }> = ({ count }) => ( + + {count} + +) + +// Config Summary Component +const ConfigSummary: React.FC<{ + schemas: number + fields: number + workflows: number + nodes: number + scripts: number +}> = ({ schemas, fields, workflows, nodes, scripts }) => ( +
+

Configuration Summary

+
+
+ Data Models: + {schemas} +
+
+ Total Fields: + {fields} +
+
+ Workflows: + {workflows} +
+
+ Workflow Nodes: + {nodes} +
+
+ Lua Scripts: + {scripts} +
+
+
+) + +// Preview Button Component +const PreviewButton: React.FC<{ level: number }> = ({ level }) => ( + +) + +// Schema Card Component +const SchemaCard: React.FC<{ + name: string + label: string + fieldCount: number + isSelected?: boolean + onSelect?: () => void + onDelete?: () => void +}> = ({ name, label, fieldCount, isSelected, onSelect, onDelete }) => ( +
+
+
{label || name}
+
{fieldCount} fields
+
+ {onDelete && ( + + )} +
+) + +// Builder Navigation +const BuilderNav: React.FC = () => ( + +) + +// Schema Editor Component +const SchemaEditor: React.FC = () => ( +
+
+
+

Models

+ +
+

+ Data model definitions +

+
+ + + +
+
+ +
+

Edit Model: User

+
+
+ + +
+
+ + +
+
+
+ + +
+
+
• username (string, required)
+
• email (string, required)
+
• bio (text, optional)
+
• role (string, required)
+
• createdAt (datetime, required)
+
+
+
+
+
+) + +// Builder Workspace +const BuilderWorkspace: React.FC = () => ( +
+

+ Application Builder +

+

+ Design your application declaratively. Define schemas, create workflows, and write Lua scripts. +

+ +
+
+ + + +
+
+ + + + +
+) + +// Meta configuration +const meta: Meta = { + title: 'Packages/UI Level 4', + parameters: { + package: 'ui_level4', + layout: 'fullscreen', + }, +} + +export default meta + +// Stories +type Story = StoryObj + +export const Navigation: Story = { + render: () => , +} + +export const PreviewButtons: Story = { + render: () => ( +
+ + + +
+ ), +} + +export const ConfigurationSummary: Story = { + render: () => ( +
+ +
+ ), +} + +export const SchemaEditorPanel: Story = { + render: () => ( +
+ +
+ ), +} + +export const FullBuilderWorkspace: Story = { + render: () => ( +
+ + +
+ ), +} + +export const TabsDemo: Story = { + render: () => ( +
+
+ + + +
+
+ ), +}