diff --git a/src/config/pages/lambda-designer.json b/src/config/pages/lambda-designer.json index 556a496..bb60b6e 100644 --- a/src/config/pages/lambda-designer.json +++ b/src/config/pages/lambda-designer.json @@ -1,792 +1,291 @@ -{ - "name": "Lambda Designer - "name": "Lambda Designer", - "layout": { - "type": "single" - }, - "dataSources": [ - { - "key": "app-lamb - }, - "id": "selectedLambda - "defaultValue": nu - { - - }, - "id": "editDialog - "defaultValue": null - }, - { - "id": "createDialogOpen", - "type": "static", - "defaultValue": false - }, - { - "id": "editDialogOpen", - "type": "static", - "defaultValue": false - }, - { - "id": "selectedLambda", - "type": "computed", - "compute": "(data) => data.lambdas?.find(l => l.id === data.selectedLambdaId) || null", - "dependencies": ["lambdas", "selectedLambdaId"] - }, - { - "id": "lambdaCount", - "type": "computed", - "compute": "(data) => (data.lambdas || []).length", - "dependencies": ["lambdas"] - }, - { - "id": "runtimeStats", - "type": "computed", - "compute": "(data) => { const lambdas = data.lambdas || []; return { nodejs: lambdas.filter(l => l.runtime?.startsWith('nodejs')).length, python: lambdas.filter(l => l.runtime?.startsWith('python')).length, total: lambdas.length }; }", - "dependencies": ["lambdas"] - } - ], - "components": [ - { - "id": "root", - "type": "div", - "props": { - "className": "h-full flex bg-gradient-to-br from-background via-background to-accent/5" - }, - "children": [ - { - "id": "sidebar", - "type": "div", - "props": { - "className": "w-80 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col" - }, - "children": [ - { - "id": "sidebar-header", - "children" - "t - "className": "text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-cli - - { - - "classNa - "bindi - "source": "lambdaCount" - - ] - { - "props": { - }, - { - "a - "type": "setState - - - ], - { - "props": { - "className": "mr-2 h-4 w-4" - }, - ] - ] - { - "type": "Sc - "classN - "childr - " - - - "operator": "gt - }, - { - - "itemCo - - }, - "conditi - - }, - "falseClass": "border-transpa - "events": [ - - - - - } - - "type": " - "c - "children": - "type": "div", - - - - - - - - - - "type": "ScrollArea", - "props": { - "className": "flex-1" - }, - "children": [ - { - "type": "div", - "props": { - "className": "p-4 space-y-2" - }, - "conditional": { - "source": "lambdaCount", - "operator": "gt", - "value": 0 - }, - "children": [ - { - "type": "list", - "dataSource": "lambdas", - "itemKey": "id", - "itemComponent": { - "type": "Card", - "props": { - "className": "group cursor-pointer hover:bg-accent/10 transition-all duration-200 hover:shadow-lg hover:shadow-accent/20 border-2 hover:border-accent/50" - }, - "conditionalClass": { - "condition": { - "source": "selectedLambdaId", - "operator": "eq", - "valueFrom": "item.id" - }, - "trueClass": "bg-accent/20 border-accent shadow-md shadow-accent/30", - "falseClass": "border-transparent" - }, - "events": [ - { - "event": "onClick", - "actions": [ - { - "type": "setState", - "target": "selectedLambdaId", - "valueFrom": "item.id" - } - ] - } - ], - "children": [ - { - "type": "CardHeader", - "props": { - "className": "p-4" - }, - "children": [ - { - "type": "div", - "props": { - "className": "flex items-start justify-between" - }, - "children": [ - { - "type": "div", - "props": { - "className": "flex-1" - }, - "children": [ - { - "type": "div", - "props": { - "className": "flex items-center gap-2 mb-1" - }, - "children": [ - { - "type": "icon", - "props": { - "name": "Lightning", - "className": "h-4 w-4 text-accent", - "weight": "duotone" - } - }, - { - "type": "CardTitle", - "props": { - "className": "text-sm font-semibold" - }, - "bindings": { - "children": { - "valueFrom": "item.name" - } - } - } - ] - }, - { - "type": "CardDescription", - "props": { - "className": "text-xs line-clamp-2" - }, - "bindings": { - "children": { - "valueFrom": "item.description", - "default": "No description" - } - } - } - ] - }, - { - "type": "div", - "props": { - "className": "flex gap-1" - }, - "children": [ - { - "type": "Button", - "props": { - "variant": "ghost", - "size": "icon", - "className": "h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity" - }, - "events": [ - { - "event": "onClick", - "stopPropagation": true, - "actions": [ - { - "type": "custom", - "handler": "handleDuplicateLambda", - "params": { - "className": "text-xs" - "children": [ - "type": - "va - - } - ] - ] - ] - ] - } - }, - "type": "div", - "className": "flex flex - "conditional": { - "operator": "eq", - }, - { - "props": { - "className": "h-16 w-16 text-muted-fo - } - { - "props": { - }, - }, - "type": "p", - "className": "text-sm text-muted-foreground - "children": "Create your first ser - { - "props": { - }, - { - "actions": [ - "type": "setState", - "value": true - ] - ], - { - "props": { - "className": "m - }, - ] - ] - ] - ] - { - "type": "div", - "className": "flex-1 flex f - "children": [ - "type": "div", - "className": "fle - "conditional": { - "operator": "tr - "children": [ - "type": "div", - "className": "max-w-6xl mx-auto space-y-6" - "children": [ - "type": "div", - "className" - "children": [ - "type": "div", - { - "props": { - }, - "children": { - "path": "name" - } - { - "props" - }, - "ch - "path": "descripti - } - } - }, - "type": "div - "className": "flex ga - "children": [ - "type": "Button", - "variant": "outline", - }, - { - "actions": [ - "type - "va - ] - ], - { - - - - - - - - - - - - - } - - - "name": - } - - - } - } - "type": "Card", - "classNa - "children": [ - "type": "CardHeader", - { - - - - ] - { - "props": { - - { - - - - - { - - }, - - - } - ] - { - - - - "children": - { - - }, - "children": { - "path - - - - - " - - "childr - { - "props": - }, - - - } - - - - - - - - - - - - - } - - - - { - "p - }, - - "chi - "type": "div" - "cla - - - - - - "children": "Edit your l - - - - }, - - "path": "language" - - ] - - { - "children": [ - - "className" - "children" - "type": "p", - - "children - ] - ] - ] - ] - ] - { - "props": { - }, - "source": "selectedLambd - }, - { - "props": { - }, - { - "props": { - "className": "h-20 w-20 text-muted-foreground/ - } - { - "props" - }, - }, - "ty - "className": "te - "children": "S - ] - ] - ] - ] - ] - - - - - - - - - - - - - - - - - - - - - - - - - - ] - }, - { - "type": "Button", - "props": { - "variant": "outline", - "size": "sm" - }, - "events": [ - { - "event": "onClick", - "actions": [ - { - "type": "toast", - "message": "Test execution coming soon", - "variant": "info" - } - ] - } - ], - "children": [ - { - "type": "icon", - "props": { - "name": "Play", - "className": "mr-2 h-4 w-4" - } - }, - "Test" - ] - } - ] - } - ] - }, - { - "type": "Card", - "props": { - "className": "border-2" - }, - "children": [ - { - "type": "CardHeader", - "children": [ - { - "type": "CardTitle", - "children": "Configuration" - }, - { - "type": "CardDescription", - "children": "Runtime settings and environment configuration" - } - ] - }, - { - "type": "CardContent", - "props": { - "className": "grid grid-cols-2 gap-4" - }, - "children": [ - { - "type": "div", - "children": [ - { - "type": "Label", - "props": { - "className": "text-sm font-medium mb-2 block" - }, - "children": "Runtime" - }, - { - "type": "p", - "props": { - "className": "text-sm" - }, - "bindings": { - "children": { - "source": "selectedLambda", - "path": "runtime" - } - } - } - ] - }, - { - "type": "div", - "children": [ - { - "type": "Label", - "props": { - "className": "text-sm font-medium mb-2 block" - }, - "children": "Handler" - }, - { - "type": "p", - "props": { - "className": "text-sm font-mono" - }, - "bindings": { - "children": { - "source": "selectedLambda", - "path": "handler" - } - } - } - ] - }, - { - "type": "div", - "children": [ - { - "type": "Label", - "props": { - "className": "text-sm font-medium mb-2 block" - }, - "children": "Timeout" - }, - { - "type": "p", - "props": { - "className": "text-sm" - }, - "bindings": { - "children": { - "source": "selectedLambda", - "path": "timeout", - "transform": "val => val + ' seconds'" - } - } - } - ] - }, - { - "type": "div", - "children": [ - { - "type": "Label", - "props": { - "className": "text-sm font-medium mb-2 block" - }, - "children": "Memory" - }, - { - "type": "p", - "props": { - "className": "text-sm" - }, - "bindings": { - "children": { - "source": "selectedLambda", - "path": "memory", - "transform": "val => val + ' MB'" - } - } - } - ] - } - ] - } - ] - }, - { - "type": "Card", - "props": { - "className": "border-2" - }, - "children": [ - { - "type": "CardHeader", - "children": [ - { - "type": "div", - "props": { - "className": "flex items-center justify-between" - }, - "children": [ - { - "type": "div", - "children": [ - { - "type": "CardTitle", - "children": "Function Code" - }, - { - "type": "CardDescription", - "children": "Edit your lambda function code" - } - ] - }, - { - "type": "Badge", - "props": { - "variant": "outline" - }, - "bindings": { - "children": { - "source": "selectedLambda", - "path": "language" - } - } - } - ] - } - ] - }, - { - "type": "CardContent", - "children": [ - { - "type": "div", - "props": { - "className": "border rounded-lg overflow-hidden bg-muted/50" - }, - "children": [ - { - "type": "p", - "props": { - "className": "p-4 text-sm text-muted-foreground" - }, - "children": "Code editor integration would go here" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "div", - "props": { - "className": "flex-1 flex items-center justify-center p-8" - }, - "conditional": { - "source": "selectedLambda", - "operator": "falsy" - }, - "children": [ - { - "type": "div", - "props": { - "className": "text-center" - }, - "children": [ - { - "type": "icon", - "props": { - "name": "Code", - "className": "h-20 w-20 text-muted-foreground/50 mx-auto mb-4", - "weight": "duotone" - } - }, - { - "type": "h3", - "props": { - "className": "text-xl font-semibold mb-2" - }, - "children": "No Lambda Selected" - }, - { - "type": "p", - "props": { - "className": "text-muted-foreground" - }, - "children": "Select a lambda from the sidebar or create a new one" - } - ] - } - ] - } - ] - } - ] - } - ] -} +{ + "name": "Lambda Designer", + "layout": { + "type": "single" + }, + "dataSources": [ + { + "id": "lambdas", + "key": "app-lambdas", + "type": "kv" + }, + { + "id": "selectedLambdaId", + "type": "static", + "defaultValue": null + }, + { + "id": "createDialogOpen", + "type": "static", + "defaultValue": false + }, + { + "id": "editDialogOpen", + "type": "static", + "defaultValue": false + }, + { + "id": "selectedLambda", + "type": "computed", + "compute": "(data) => data.lambdas?.find(l => l.id === data.selectedLambdaId) || null", + "dependencies": ["lambdas", "selectedLambdaId"] + }, + { + "id": "lambdaCount", + "type": "computed", + "compute": "(data) => (data.lambdas || []).length", + "dependencies": ["lambdas"] + } + ], + "components": [ + { + "id": "root", + "type": "div", + "props": { + "className": "h-full flex bg-gradient-to-br from-background via-background to-accent/5" + }, + "children": [ + { + "id": "sidebar", + "type": "div", + "props": { + "className": "w-80 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col" + }, + "children": [ + { + "id": "sidebar-header", + "type": "div", + "props": { + "className": "p-4 border-b border-border space-y-3" + }, + "children": [ + { + "type": "div", + "props": { + "className": "flex items-center justify-between" + }, + "children": [ + { + "type": "h2", + "props": { + "className": "text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent" + }, + "children": ["Lambdas"] + }, + { + "type": "Badge", + "props": { + "className": "text-xs" + }, + "bindings": { + "children": { + "source": "lambdaCount" + } + } + } + ] + }, + { + "type": "Button", + "props": { + "className": "w-full" + }, + "events": [ + { + "event": "onClick", + "actions": [ + { + "type": "setState", + "target": "createDialogOpen", + "value": true + } + ] + } + ], + "children": [ + { + "type": "icon", + "props": { + "name": "Plus", + "className": "mr-2 h-4 w-4" + } + }, + "Create Lambda" + ] + } + ] + }, + { + "type": "div", + "props": { + "className": "flex-1 overflow-auto p-4" + }, + "children": [ + { + "type": "div", + "props": { + "className": "space-y-2" + }, + "conditional": { + "source": "lambdaCount", + "operator": "gt", + "value": 0 + }, + "children": [ + { + "type": "text", + "children": ["Lambda list will be rendered here"] + } + ] + }, + { + "type": "div", + "props": { + "className": "flex flex-col items-center justify-center py-12 px-4 text-center" + }, + "conditional": { + "source": "lambdaCount", + "operator": "eq", + "value": 0 + }, + "children": [ + { + "type": "icon", + "props": { + "name": "Lightning", + "className": "h-16 w-16 text-muted-foreground/30 mb-4", + "weight": "duotone" + } + }, + { + "type": "h3", + "props": { + "className": "text-lg font-semibold mb-2" + }, + "children": ["No Lambdas Yet"] + }, + { + "type": "p", + "props": { + "className": "text-sm text-muted-foreground mb-4" + }, + "children": ["Create your first serverless function"] + } + ] + } + ] + } + ] + }, + { + "id": "main-content", + "type": "div", + "props": { + "className": "flex-1 flex flex-col" + }, + "children": [ + { + "type": "div", + "props": { + "className": "flex-1 flex items-center justify-center p-8" + }, + "conditional": { + "source": "selectedLambda", + "operator": "truthy" + }, + "children": [ + { + "type": "div", + "props": { + "className": "max-w-6xl mx-auto w-full space-y-6" + }, + "children": [ + { + "type": "div", + "props": { + "className": "flex items-center justify-between" + }, + "children": [ + { + "type": "div", + "children": [ + { + "type": "h1", + "props": { + "className": "text-3xl font-bold" + }, + "bindings": { + "children": { + "source": "selectedLambda", + "path": "name" + } + } + }, + { + "type": "p", + "props": { + "className": "text-muted-foreground" + }, + "bindings": { + "children": { + "source": "selectedLambda", + "path": "description" + } + } + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "div", + "props": { + "className": "flex-1 flex items-center justify-center p-8" + }, + "conditional": { + "source": "selectedLambda", + "operator": "falsy" + }, + "children": [ + { + "type": "div", + "props": { + "className": "text-center" + }, + "children": [ + { + "type": "icon", + "props": { + "name": "Code", + "className": "h-20 w-20 text-muted-foreground/50 mx-auto mb-4", + "weight": "duotone" + } + }, + { + "type": "h3", + "props": { + "className": "text-xl font-semibold mb-2" + }, + "children": ["No Lambda Selected"] + }, + { + "type": "p", + "props": { + "className": "text-muted-foreground" + }, + "children": ["Select a lambda from the sidebar or create a new one"] + } + ] + } + ] + } + ] + } + ] + } + ] +} diff --git a/src/config/pages/workflow-designer.json b/src/config/pages/workflow-designer.json index 88dae28..e15ea62 100644 --- a/src/config/pages/workflow-designer.json +++ b/src/config/pages/workflow-designer.json @@ -1,565 +1,278 @@ -{ - "name": "Workflow Designer - "name": "Workflow Designer", - "layout": { - "dataSources": [ - - "key": "app- - } - "id": "selectedWor - "defaultValue - { - "type": "static", - }, - - "defaultValue": "all" - { - "defaultValue": null - - { - "id": "selectedNodeId", - "type": "static", - "defaultValue": null - }, - { - "id": "statusFilter", - "type": "static", - "defaultValue": "all" - }, - { - "id": "createDialogOpen", - "type": "static", - "defaultValue": false - }, - { - "id": "filteredWorkflows - "compute": "(data - }, - - - } - "components": [ - "id": "root", - - - { - "type": "div", - "className": "w-80 border-r border-border bg-card/50 backdrop-blur flex flex-col" - "children": [ - - - }, - { - "type": "Heading", - "className": "text-xl font-bold - - - "type": " - "clas - }, - { - - - - - "id": "root", - "type": "div", - "props": { - "className": "h-full flex bg-gradient-to-br from-background via-background to-primary/5" - }, - "children": [ - { - "id": "sidebar", - "type": "div", - "props": { - "className": "w-80 border-r border-border bg-card/50 backdrop-blur flex flex-col" - }, - "children": [ - { - "id": "sidebar-header", - "type": "div", - "props": { - "className": "p-4 border-b border-border" - }, - "children": [ - { - "id": "header-title", - "type": "Heading", - "props": { - "className": "text-xl font-bold mb-2 flex items-center gap-2", - "children": "Workflows" - } - }, - { - "id": "create-button", - "type": "Button", - "props": { - "className": "w-full", - "children": "Create Workflow" - }, - "events": [ - { - "event": "click", - "actions": [ - { - "id": "open-create-dialog", - "type": "set-value", - "target": "createDialogOpen", - "value": true - } - ] - } - ] - } - ] - }, - { - "id": "filter-tabs", - "type": "div", - "props": { - "className": "p-4 space-y-2" - }, - "children": [ - { - "id": "filter-label", - "type": "Label", - "props": { - "className": "text-sm text-muted-foreground", - "children": "Status Filter" - } - }, - { - "id": "filter-buttons", - "type": "div", - "props": { - "className": "grid grid-cols-2 gap-2" - }, - "children": [ - { - "id": "filter-all", - "type": "Button", - "props": { - "variant": "outline", - "size": "sm", - "className": "justify-between" - }, - "bindings": { - "className": { - "source": "statusFilter", - "transform": "(val) => val === 'all' ? 'justify-between bg-primary text-primary-foreground' : 'justify-between'" - } - }, - "events": [ - { - "event": "click", - "actions": [ - { - "id": "set-filter-all", - "type": "set-value", - "target": "statusFilter", - "value": "all" - } - ] - } - ], - "children": [ - { - "id": "filter-all-content", - "type": "div", - "props": { - "className": "flex items-center justify-between w-full" - }, - "children": [ - { - "id": "filter-all-label", - "type": "Text", - "props": { - "children": "All" - } - }, - { - "id": "filter-all-count", - "type": "Badge", - "props": { - "variant": "secondary", - "className": "ml-auto" - }, - "bindings": { - "children": { - "source": "statusCounts", - "path": "all" - } - } - } - ] - } - ] - } - ] - } - ] - }, - { - "id": "workflow-list", - "type": "div", - "props": { - "className": "flex-1 overflow-auto p-4 space-y-2" - }, - "children": [] - } - ] - }, - { - "id": "main-content", - "type": "div", - "props": { - "className": "flex-1 flex flex-col" - }, - "children": [ - { - "id": "empty-state", - "type": "div", - "props": { - "className": "flex-1 flex items-center justify-center" - }, - "condition": { - "source": "selectedWorkflow", - "transform": "(val) => !val" - }, - "children": [ - { - "id": "empty-state-content", - "type": "div", - "props": { - "className": "text-center space-y-4" - }, - "children": [ - { - "id": "empty-state-title", - "type": "Heading", - "props": { - "className": "text-2xl font-bold text-muted-foreground", - "children": "No Workflow Selected" - } - }, - { - "id": "empty-state-description", - "type": "Text", - "props": { - "className": "text-muted-foreground", - "children": "Select a workflow from the sidebar or create a new one" - } - } - ] - } - ] - }, - { - "id": "workflow-editor", - "type": "div", - "props": { - "className": "flex-1 p-6 overflow-auto" - }, - "condition": { - "source": "selectedWorkflow", - "transform": "(val) => !!val" - }, - "children": [ - { - "id": "workflow-header", - "type": "div", - "props": { - "className": "mb-6" - }, - "children": [ - { - "id": "workflow-name", - "type": "Heading", - "props": { - "className": "text-3xl font-bold mb-2" - }, - "bindings": { - "children": { - "source": "selectedWorkflow", - "path": "name" - } - } - }, - { - "id": "workflow-description", - "type": "Text", - "props": { - "className": "text-muted-foreground" - }, - "bindings": { - "children": { - "source": "selectedWorkflow", - "path": "description" - } - } - } - ] - }, - { - "id": "workflow-canvas", - "type": "Card", - "props": { - "className": "min-h-[400px] bg-muted/20" - }, - "children": [ - { - "id": "canvas-content", - "type": "CardContent", - "props": { - "className": "p-6" - }, - "children": [ - { - "id": "canvas-placeholder", - "type": "div", - "props": { - "className": "text-center text-muted-foreground py-12", - "children": "Workflow canvas - Add nodes to build your workflow" - } - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "globalActions": [] -} - ] - } - ] - } - ] - }, - { - "id": "filter-tabs", - "type": "div", - "props": { - "className": "p-4 space-y-2" - }, - "children": [ - { - "id": "filter-label", - "type": "Label", - "props": { - "className": "text-sm text-muted-foreground", - "children": "Status Filter" - } - }, - { - "id": "filter-buttons", - "type": "div", - "props": { - "className": "grid grid-cols-2 gap-2" - }, - "children": [ - { - "id": "filter-all", - "type": "Button", - "props": { - "variant": "outline", - "size": "sm", - "className": "justify-between" - }, - "bindings": { - "className": { - "source": "statusFilter", - "transform": "(val) => val === 'all' ? 'justify-between bg-primary text-primary-foreground' : 'justify-between'" - } - }, - "events": [ - { - "event": "click", - "actions": [ - { - "id": "set-filter-all", - "type": "set-value", - "target": "statusFilter", - "value": "all" - } - ] - } - ], - "children": [ - { - "id": "filter-all-content", - "type": "div", - "props": { - "className": "flex items-center justify-between w-full" - }, - "children": [ - { - "id": "filter-all-label", - "type": "Text", - "props": { - "children": "All" - } - }, - { - "id": "filter-all-count", - "type": "Badge", - "props": { - "variant": "secondary", - "className": "ml-auto" - }, - "bindings": { - "children": { - "source": "statusCounts", - "path": "all" - } - } - } - ] - } - ] - } - ] - } - ] - }, - { - "id": "workflow-list", - "type": "div", - "props": { - "className": "flex-1 overflow-auto p-4 space-y-2" - }, - "children": [] - } - ] - }, - { - "id": "main-content", - "type": "div", - "props": { - "className": "flex-1 flex flex-col" - }, - "children": [ - { - "id": "empty-state", - "type": "div", - "props": { - "className": "flex-1 flex items-center justify-center" - }, - "condition": { - "source": "selectedWorkflow", - "transform": "(val) => !val" - }, - "children": [ - { - "id": "empty-state-content", - "type": "div", - "props": { - "className": "text-center space-y-4" - }, - "children": [ - { - "id": "empty-state-title", - "type": "Heading", - "props": { - "className": "text-2xl font-bold text-muted-foreground", - "children": "No Workflow Selected" - } - }, - { - "id": "empty-state-description", - "type": "Text", - "props": { - "className": "text-muted-foreground", - "children": "Select a workflow from the sidebar or create a new one" - } - } - ] - } - ] - }, - { - "id": "workflow-editor", - "type": "div", - "props": { - "className": "flex-1 p-6 overflow-auto" - }, - "condition": { - "source": "selectedWorkflow", - "transform": "(val) => !!val" - }, - "children": [ - { - "id": "workflow-header", - "type": "div", - "props": { - "className": "mb-6" - }, - "children": [ - { - "id": "workflow-name", - "type": "Heading", - "props": { - "className": "text-3xl font-bold mb-2" - }, - "bindings": { - "children": { - "source": "selectedWorkflow", - "path": "name" - } - } - }, - { - "id": "workflow-description", - "type": "Text", - "props": { - "className": "text-muted-foreground" - }, - "bindings": { - "children": { - "source": "selectedWorkflow", - "path": "description" - } - } - } - ] - }, - { - "id": "workflow-canvas", - "type": "Card", - "props": { - "className": "min-h-[400px] bg-muted/20" - }, - "children": [ - { - "id": "canvas-content", - "type": "CardContent", - "props": { - "className": "p-6" - }, - "children": [ - { - "id": "canvas-placeholder", - "type": "div", - "props": { - "className": "text-center text-muted-foreground py-12", - "children": "Workflow canvas - Add nodes to build your workflow" - } - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "globalActions": [] -} +{ + "name": "Workflow Designer", + "layout": { + "type": "single" + }, + "dataSources": [ + { + "id": "workflows", + "key": "app-workflows", + "type": "kv" + }, + { + "id": "selectedWorkflowId", + "type": "static", + "defaultValue": null + }, + { + "id": "selectedNodeId", + "type": "static", + "defaultValue": null + }, + { + "id": "statusFilter", + "type": "static", + "defaultValue": "all" + }, + { + "id": "createDialogOpen", + "type": "static", + "defaultValue": false + }, + { + "id": "selectedWorkflow", + "type": "computed", + "compute": "(data) => data.workflows?.find(w => w.id === data.selectedWorkflowId) || null", + "dependencies": ["workflows", "selectedWorkflowId"] + }, + { + "id": "workflowCount", + "type": "computed", + "compute": "(data) => (data.workflows || []).length", + "dependencies": ["workflows"] + } + ], + "components": [ + { + "id": "root", + "type": "div", + "props": { + "className": "h-full flex bg-gradient-to-br from-background via-background to-primary/5" + }, + "children": [ + { + "id": "sidebar", + "type": "div", + "props": { + "className": "w-80 border-r border-border bg-card/50 backdrop-blur flex flex-col" + }, + "children": [ + { + "id": "sidebar-header", + "type": "div", + "props": { + "className": "p-4 border-b border-border" + }, + "children": [ + { + "id": "header-title", + "type": "h2", + "props": { + "className": "text-xl font-bold mb-2 flex items-center gap-2" + }, + "children": ["Workflows"] + }, + { + "id": "create-button", + "type": "Button", + "props": { + "className": "w-full" + }, + "events": [ + { + "event": "onClick", + "actions": [ + { + "type": "setState", + "target": "createDialogOpen", + "value": true + } + ] + } + ], + "children": [ + { + "type": "icon", + "props": { + "name": "Plus", + "className": "mr-2 h-4 w-4" + } + }, + "Create Workflow" + ] + } + ] + }, + { + "id": "filter-tabs", + "type": "div", + "props": { + "className": "p-4 space-y-2" + }, + "children": [ + { + "id": "filter-label", + "type": "Label", + "props": { + "className": "text-sm text-muted-foreground" + }, + "children": ["Status Filter"] + } + ] + }, + { + "id": "workflow-list", + "type": "div", + "props": { + "className": "flex-1 overflow-auto p-4 space-y-2" + }, + "children": [ + { + "type": "div", + "conditional": { + "source": "workflowCount", + "operator": "eq", + "value": 0 + }, + "props": { + "className": "text-center py-8 text-muted-foreground" + }, + "children": ["No workflows yet"] + } + ] + } + ] + }, + { + "id": "main-content", + "type": "div", + "props": { + "className": "flex-1 flex flex-col" + }, + "children": [ + { + "id": "empty-state", + "type": "div", + "props": { + "className": "flex-1 flex items-center justify-center" + }, + "conditional": { + "source": "selectedWorkflow", + "operator": "falsy" + }, + "children": [ + { + "id": "empty-state-content", + "type": "div", + "props": { + "className": "text-center space-y-4" + }, + "children": [ + { + "type": "icon", + "props": { + "name": "GitBranch", + "className": "h-20 w-20 text-muted-foreground/50 mx-auto", + "weight": "duotone" + } + }, + { + "id": "empty-state-title", + "type": "h3", + "props": { + "className": "text-2xl font-bold text-muted-foreground" + }, + "children": ["No Workflow Selected"] + }, + { + "id": "empty-state-description", + "type": "p", + "props": { + "className": "text-muted-foreground" + }, + "children": ["Select a workflow from the sidebar or create a new one"] + } + ] + } + ] + }, + { + "id": "workflow-editor", + "type": "div", + "props": { + "className": "flex-1 p-6 overflow-auto" + }, + "conditional": { + "source": "selectedWorkflow", + "operator": "truthy" + }, + "children": [ + { + "id": "workflow-header", + "type": "div", + "props": { + "className": "mb-6" + }, + "children": [ + { + "id": "workflow-name", + "type": "h1", + "props": { + "className": "text-3xl font-bold mb-2" + }, + "bindings": { + "children": { + "source": "selectedWorkflow", + "path": "name" + } + } + }, + { + "id": "workflow-description", + "type": "p", + "props": { + "className": "text-muted-foreground" + }, + "bindings": { + "children": { + "source": "selectedWorkflow", + "path": "description" + } + } + } + ] + }, + { + "id": "workflow-canvas", + "type": "Card", + "props": { + "className": "min-h-[400px] bg-muted/20" + }, + "children": [ + { + "id": "canvas-content", + "type": "CardContent", + "props": { + "className": "p-6" + }, + "children": [ + { + "id": "canvas-placeholder", + "type": "div", + "props": { + "className": "text-center text-muted-foreground py-12" + }, + "children": ["Workflow canvas - Add nodes to build your workflow"] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] +}