From 3c96b733b238c8922c7f8e66e291f971f5f4f62c Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 13:03:24 +0000 Subject: [PATCH] Move wrapper layouts into JSON definition files --- .../ComponentBindingDialogWrapper.tsx | 2 +- .../DataSourceEditorDialogWrapper.tsx | 2 +- .../wrappers/GitHubBuildStatusWrapper.tsx | 2 +- src/lib/json-ui/wrappers/definitions.ts | 555 ------------------ .../definitions/component-binding-dialog.json | 200 +++++++ .../data-source-editor-dialog.json | 141 +++++ .../definitions/github-build-status.json | 210 +++++++ 7 files changed, 554 insertions(+), 558 deletions(-) delete mode 100644 src/lib/json-ui/wrappers/definitions.ts create mode 100644 src/lib/json-ui/wrappers/definitions/component-binding-dialog.json create mode 100644 src/lib/json-ui/wrappers/definitions/data-source-editor-dialog.json create mode 100644 src/lib/json-ui/wrappers/definitions/github-build-status.json diff --git a/src/lib/json-ui/wrappers/ComponentBindingDialogWrapper.tsx b/src/lib/json-ui/wrappers/ComponentBindingDialogWrapper.tsx index 1adfe31..1912823 100644 --- a/src/lib/json-ui/wrappers/ComponentBindingDialogWrapper.tsx +++ b/src/lib/json-ui/wrappers/ComponentBindingDialogWrapper.tsx @@ -1,7 +1,7 @@ import type { ChangeEvent } from 'react' import { ComponentRenderer } from '@/lib/json-ui/component-renderer' import { cn } from '@/lib/utils' -import { componentBindingDialogDefinition } from './definitions' +import componentBindingDialogDefinition from './definitions/component-binding-dialog.json' import type { ComponentBindingDialogWrapperProps } from './interfaces' export function ComponentBindingDialogWrapper({ diff --git a/src/lib/json-ui/wrappers/DataSourceEditorDialogWrapper.tsx b/src/lib/json-ui/wrappers/DataSourceEditorDialogWrapper.tsx index 6bab82e..72530c7 100644 --- a/src/lib/json-ui/wrappers/DataSourceEditorDialogWrapper.tsx +++ b/src/lib/json-ui/wrappers/DataSourceEditorDialogWrapper.tsx @@ -1,7 +1,7 @@ import type { ChangeEvent } from 'react' import { ComponentRenderer } from '@/lib/json-ui/component-renderer' import { cn } from '@/lib/utils' -import { dataSourceEditorDialogDefinition } from './definitions' +import dataSourceEditorDialogDefinition from './definitions/data-source-editor-dialog.json' import type { DataSourceEditorDialogWrapperProps } from './interfaces' export function DataSourceEditorDialogWrapper({ diff --git a/src/lib/json-ui/wrappers/GitHubBuildStatusWrapper.tsx b/src/lib/json-ui/wrappers/GitHubBuildStatusWrapper.tsx index faee8a0..112037a 100644 --- a/src/lib/json-ui/wrappers/GitHubBuildStatusWrapper.tsx +++ b/src/lib/json-ui/wrappers/GitHubBuildStatusWrapper.tsx @@ -1,6 +1,6 @@ import { ComponentRenderer } from '@/lib/json-ui/component-renderer' import { cn } from '@/lib/utils' -import { gitHubBuildStatusDefinition } from './definitions' +import gitHubBuildStatusDefinition from './definitions/github-build-status.json' import type { GitHubBuildStatusWrapperProps, GitHubBuildStatusWorkflowItem } from './interfaces' const getWorkflowStatus = (workflow: GitHubBuildStatusWorkflowItem) => { diff --git a/src/lib/json-ui/wrappers/definitions.ts b/src/lib/json-ui/wrappers/definitions.ts deleted file mode 100644 index 1a7d422..0000000 --- a/src/lib/json-ui/wrappers/definitions.ts +++ /dev/null @@ -1,555 +0,0 @@ -import type { UIComponent } from '@/types/json-ui' - -export const componentBindingDialogDefinition: UIComponent = { - id: 'component-binding-dialog', - type: 'Dialog', - bindings: { - open: 'open', - onOpenChange: 'onOpenChange', - }, - children: [ - { - id: 'component-binding-dialog-content', - type: 'DialogContent', - bindings: { - className: 'contentClassName', - }, - children: [ - { - id: 'component-binding-dialog-header', - type: 'DialogHeader', - children: [ - { - id: 'component-binding-dialog-title', - type: 'DialogTitle', - bindings: { - children: 'title', - }, - }, - { - id: 'component-binding-dialog-description', - type: 'DialogDescription', - bindings: { - children: 'description', - }, - }, - ], - }, - { - id: 'component-binding-dialog-info', - type: 'div', - props: { - className: 'rounded-md border border-border bg-muted/30 p-3 text-sm', - }, - conditional: { - if: 'componentType || componentId', - }, - children: [ - { - id: 'component-binding-dialog-type', - type: 'div', - props: { - className: 'flex items-center gap-2', - }, - conditional: { - if: 'componentType', - }, - children: [ - { - id: 'component-binding-dialog-type-label', - type: 'span', - props: { - className: 'text-muted-foreground', - }, - children: 'Component:', - }, - { - id: 'component-binding-dialog-type-value', - type: 'span', - props: { - className: 'font-mono font-medium', - }, - bindings: { - children: 'componentType', - }, - }, - ], - }, - { - id: 'component-binding-dialog-id', - type: 'div', - props: { - className: 'flex items-center gap-2', - }, - conditional: { - if: 'componentId', - }, - children: [ - { - id: 'component-binding-dialog-id-label', - type: 'span', - props: { - className: 'text-muted-foreground', - }, - children: 'ID:', - }, - { - id: 'component-binding-dialog-id-value', - type: 'span', - props: { - className: 'font-mono text-xs', - }, - bindings: { - children: 'componentId', - }, - }, - ], - }, - ], - }, - { - id: 'component-binding-dialog-body', - type: 'div', - props: { - className: 'space-y-4', - }, - children: [ - { - id: 'component-binding-dialog-empty', - type: 'p', - props: { - className: 'text-sm text-muted-foreground', - }, - bindings: { - children: 'emptyMessage', - }, - conditional: { - if: '!bindingFields || bindingFields.length === 0', - }, - }, - { - id: 'component-binding-dialog-fields', - type: 'div', - props: { - className: 'space-y-4', - }, - conditional: { - if: 'bindingFields && bindingFields.length > 0', - }, - loop: { - source: 'bindingFields', - itemVar: 'field', - }, - children: [ - { - id: 'component-binding-dialog-field', - type: 'div', - props: { - className: 'space-y-2', - }, - children: [ - { - id: 'component-binding-dialog-field-label', - type: 'Label', - bindings: { - children: 'field.label', - }, - }, - { - id: 'component-binding-dialog-field-input', - type: 'Input', - bindings: { - value: 'field.value', - placeholder: 'field.placeholder', - onChange: 'onBindingFieldChange', - 'data-field-id': 'field.id', - }, - }, - ], - }, - ], - }, - ], - }, - { - id: 'component-binding-dialog-footer', - type: 'DialogFooter', - children: [ - { - id: 'component-binding-dialog-cancel', - type: 'Button', - props: { - variant: 'outline', - }, - bindings: { - onClick: 'onCancel', - children: 'cancelLabel', - }, - }, - { - id: 'component-binding-dialog-save', - type: 'Button', - bindings: { - onClick: 'onSave', - children: 'saveLabel', - }, - }, - ], - }, - ], - }, - ], -} - -export const dataSourceEditorDialogDefinition: UIComponent = { - id: 'data-source-editor-dialog', - type: 'Dialog', - bindings: { - open: 'open', - onOpenChange: 'onOpenChange', - }, - children: [ - { - id: 'data-source-editor-dialog-content', - type: 'DialogContent', - bindings: { - className: 'contentClassName', - }, - children: [ - { - id: 'data-source-editor-dialog-header', - type: 'DialogHeader', - children: [ - { - id: 'data-source-editor-dialog-title', - type: 'DialogTitle', - bindings: { - children: 'title', - }, - }, - { - id: 'data-source-editor-dialog-description', - type: 'DialogDescription', - bindings: { - children: 'description', - }, - }, - ], - }, - { - id: 'data-source-editor-dialog-body', - type: 'div', - props: { - className: 'space-y-4', - }, - children: [ - { - id: 'data-source-editor-dialog-empty', - type: 'p', - props: { - className: 'text-sm text-muted-foreground', - }, - bindings: { - children: 'emptyMessage', - }, - conditional: { - if: '!fields || fields.length === 0', - }, - }, - { - id: 'data-source-editor-dialog-fields', - type: 'div', - props: { - className: 'space-y-4', - }, - conditional: { - if: 'fields && fields.length > 0', - }, - loop: { - source: 'fields', - itemVar: 'field', - }, - children: [ - { - id: 'data-source-editor-dialog-field', - type: 'div', - props: { - className: 'space-y-2', - }, - children: [ - { - id: 'data-source-editor-dialog-field-label', - type: 'Label', - bindings: { - children: 'field.label', - }, - }, - { - id: 'data-source-editor-dialog-field-input', - type: 'Input', - bindings: { - value: 'field.value', - placeholder: 'field.placeholder', - onChange: 'onFieldChange', - 'data-field-id': 'field.id', - }, - }, - { - id: 'data-source-editor-dialog-field-helper', - type: 'p', - props: { - className: 'text-xs text-muted-foreground', - }, - bindings: { - children: 'field.helperText', - }, - conditional: { - if: 'field.helperText', - }, - }, - ], - }, - ], - }, - ], - }, - { - id: 'data-source-editor-dialog-footer', - type: 'DialogFooter', - children: [ - { - id: 'data-source-editor-dialog-cancel', - type: 'Button', - props: { - variant: 'outline', - }, - bindings: { - onClick: 'onCancel', - children: 'cancelLabel', - }, - }, - { - id: 'data-source-editor-dialog-save', - type: 'Button', - bindings: { - onClick: 'onSave', - children: 'saveLabel', - }, - }, - ], - }, - ], - }, - ], -} - -export const gitHubBuildStatusDefinition: UIComponent = { - id: 'github-build-status-card', - type: 'Card', - bindings: { - className: 'className', - }, - children: [ - { - id: 'github-build-status-header', - type: 'CardHeader', - children: [ - { - id: 'github-build-status-title', - type: 'CardTitle', - props: { - className: 'flex items-center gap-2', - }, - bindings: { - children: 'title', - }, - }, - { - id: 'github-build-status-description', - type: 'CardDescription', - bindings: { - children: 'description', - }, - }, - ], - }, - { - id: 'github-build-status-content', - type: 'CardContent', - props: { - className: 'space-y-4', - }, - children: [ - { - id: 'github-build-status-loading', - type: 'p', - props: { - className: 'text-sm text-muted-foreground', - }, - bindings: { - children: 'loadingMessage', - }, - conditional: { - if: 'isLoading', - }, - }, - { - id: 'github-build-status-error', - type: 'div', - props: { - className: 'flex items-center gap-2 text-sm text-red-500', - }, - conditional: { - if: 'errorMessage', - }, - children: [ - { - id: 'github-build-status-error-text', - type: 'span', - bindings: { - children: 'errorMessage', - }, - }, - ], - }, - { - id: 'github-build-status-empty', - type: 'p', - props: { - className: 'text-sm text-muted-foreground', - }, - bindings: { - children: 'emptyMessage', - }, - conditional: { - if: '!isLoading && !errorMessage && !hasWorkflows', - }, - }, - { - id: 'github-build-status-list', - type: 'div', - props: { - className: 'space-y-3', - }, - conditional: { - if: 'hasWorkflows', - }, - loop: { - source: 'workflows', - itemVar: 'workflow', - }, - children: [ - { - id: 'github-build-status-item', - type: 'div', - props: { - className: 'flex items-center justify-between gap-3 rounded-lg border border-border p-3', - }, - children: [ - { - id: 'github-build-status-item-info', - type: 'div', - props: { - className: 'min-w-0', - }, - children: [ - { - id: 'github-build-status-item-row', - type: 'div', - props: { - className: 'flex items-center gap-2', - }, - children: [ - { - id: 'github-build-status-item-name', - type: 'p', - props: { - className: 'text-sm font-medium truncate', - }, - bindings: { - children: 'workflow.name', - }, - }, - { - id: 'github-build-status-item-badge', - type: 'Badge', - bindings: { - className: 'workflow.statusClass', - children: 'workflow.statusLabel', - }, - }, - ], - }, - { - id: 'github-build-status-item-meta', - type: 'div', - props: { - className: 'text-xs text-muted-foreground truncate', - }, - bindings: { - children: 'workflow.summaryLine', - }, - }, - ], - }, - { - id: 'github-build-status-item-link', - type: 'Button', - props: { - variant: 'ghost', - size: 'sm', - asChild: true, - }, - conditional: { - if: 'workflow.url', - }, - children: [ - { - id: 'github-build-status-item-anchor', - type: 'a', - bindings: { - href: 'workflow.url', - }, - props: { - target: '_blank', - rel: 'noopener noreferrer', - }, - children: 'View', - }, - ], - }, - ], - }, - ], - }, - { - id: 'github-build-status-footer', - type: 'Button', - props: { - variant: 'outline', - size: 'sm', - asChild: true, - className: 'w-full', - }, - conditional: { - if: 'footerLinkUrl', - }, - children: [ - { - id: 'github-build-status-footer-anchor', - type: 'a', - bindings: { - href: 'footerLinkUrl', - children: 'footerLinkLabel', - }, - props: { - target: '_blank', - rel: 'noopener noreferrer', - }, - }, - ], - }, - ], - }, - ], -} diff --git a/src/lib/json-ui/wrappers/definitions/component-binding-dialog.json b/src/lib/json-ui/wrappers/definitions/component-binding-dialog.json new file mode 100644 index 0000000..a59d0f2 --- /dev/null +++ b/src/lib/json-ui/wrappers/definitions/component-binding-dialog.json @@ -0,0 +1,200 @@ +{ + "id": "component-binding-dialog", + "type": "Dialog", + "bindings": { + "open": "open", + "onOpenChange": "onOpenChange" + }, + "children": [ + { + "id": "component-binding-dialog-content", + "type": "DialogContent", + "bindings": { + "className": "contentClassName" + }, + "children": [ + { + "id": "component-binding-dialog-header", + "type": "DialogHeader", + "children": [ + { + "id": "component-binding-dialog-title", + "type": "DialogTitle", + "bindings": { + "children": "title" + } + }, + { + "id": "component-binding-dialog-description", + "type": "DialogDescription", + "bindings": { + "children": "description" + } + } + ] + }, + { + "id": "component-binding-dialog-info", + "type": "div", + "props": { + "className": "rounded-md border border-border bg-muted/30 p-3 text-sm" + }, + "conditional": { + "if": "componentType || componentId" + }, + "children": [ + { + "id": "component-binding-dialog-type", + "type": "div", + "props": { + "className": "flex items-center gap-2" + }, + "conditional": { + "if": "componentType" + }, + "children": [ + { + "id": "component-binding-dialog-type-label", + "type": "span", + "props": { + "className": "text-muted-foreground" + }, + "children": "Component:" + }, + { + "id": "component-binding-dialog-type-value", + "type": "span", + "props": { + "className": "font-mono font-medium" + }, + "bindings": { + "children": "componentType" + } + } + ] + }, + { + "id": "component-binding-dialog-id", + "type": "div", + "props": { + "className": "flex items-center gap-2" + }, + "conditional": { + "if": "componentId" + }, + "children": [ + { + "id": "component-binding-dialog-id-label", + "type": "span", + "props": { + "className": "text-muted-foreground" + }, + "children": "ID:" + }, + { + "id": "component-binding-dialog-id-value", + "type": "span", + "props": { + "className": "font-mono text-xs" + }, + "bindings": { + "children": "componentId" + } + } + ] + } + ] + }, + { + "id": "component-binding-dialog-body", + "type": "div", + "props": { + "className": "space-y-4" + }, + "children": [ + { + "id": "component-binding-dialog-empty", + "type": "p", + "props": { + "className": "text-sm text-muted-foreground" + }, + "bindings": { + "children": "emptyMessage" + }, + "conditional": { + "if": "!bindingFields || bindingFields.length === 0" + } + }, + { + "id": "component-binding-dialog-fields", + "type": "div", + "props": { + "className": "space-y-4" + }, + "conditional": { + "if": "bindingFields && bindingFields.length > 0" + }, + "loop": { + "source": "bindingFields", + "itemVar": "field" + }, + "children": [ + { + "id": "component-binding-dialog-field", + "type": "div", + "props": { + "className": "space-y-2" + }, + "children": [ + { + "id": "component-binding-dialog-field-label", + "type": "Label", + "bindings": { + "children": "field.label" + } + }, + { + "id": "component-binding-dialog-field-input", + "type": "Input", + "bindings": { + "value": "field.value", + "placeholder": "field.placeholder", + "onChange": "onBindingFieldChange", + "data-field-id": "field.id" + } + } + ] + } + ] + } + ] + }, + { + "id": "component-binding-dialog-footer", + "type": "DialogFooter", + "children": [ + { + "id": "component-binding-dialog-cancel", + "type": "Button", + "props": { + "variant": "outline" + }, + "bindings": { + "onClick": "onCancel", + "children": "cancelLabel" + } + }, + { + "id": "component-binding-dialog-save", + "type": "Button", + "bindings": { + "onClick": "onSave", + "children": "saveLabel" + } + } + ] + } + ] + } + ] +} diff --git a/src/lib/json-ui/wrappers/definitions/data-source-editor-dialog.json b/src/lib/json-ui/wrappers/definitions/data-source-editor-dialog.json new file mode 100644 index 0000000..edf37a4 --- /dev/null +++ b/src/lib/json-ui/wrappers/definitions/data-source-editor-dialog.json @@ -0,0 +1,141 @@ +{ + "id": "data-source-editor-dialog", + "type": "Dialog", + "bindings": { + "open": "open", + "onOpenChange": "onOpenChange" + }, + "children": [ + { + "id": "data-source-editor-dialog-content", + "type": "DialogContent", + "bindings": { + "className": "contentClassName" + }, + "children": [ + { + "id": "data-source-editor-dialog-header", + "type": "DialogHeader", + "children": [ + { + "id": "data-source-editor-dialog-title", + "type": "DialogTitle", + "bindings": { + "children": "title" + } + }, + { + "id": "data-source-editor-dialog-description", + "type": "DialogDescription", + "bindings": { + "children": "description" + } + } + ] + }, + { + "id": "data-source-editor-dialog-body", + "type": "div", + "props": { + "className": "space-y-4" + }, + "children": [ + { + "id": "data-source-editor-dialog-empty", + "type": "p", + "props": { + "className": "text-sm text-muted-foreground" + }, + "bindings": { + "children": "emptyMessage" + }, + "conditional": { + "if": "!fields || fields.length === 0" + } + }, + { + "id": "data-source-editor-dialog-fields", + "type": "div", + "props": { + "className": "space-y-4" + }, + "conditional": { + "if": "fields && fields.length > 0" + }, + "loop": { + "source": "fields", + "itemVar": "field" + }, + "children": [ + { + "id": "data-source-editor-dialog-field", + "type": "div", + "props": { + "className": "space-y-2" + }, + "children": [ + { + "id": "data-source-editor-dialog-field-label", + "type": "Label", + "bindings": { + "children": "field.label" + } + }, + { + "id": "data-source-editor-dialog-field-input", + "type": "Input", + "bindings": { + "value": "field.value", + "placeholder": "field.placeholder", + "onChange": "onFieldChange", + "data-field-id": "field.id" + } + }, + { + "id": "data-source-editor-dialog-field-helper", + "type": "p", + "props": { + "className": "text-xs text-muted-foreground" + }, + "bindings": { + "children": "field.helperText" + }, + "conditional": { + "if": "field.helperText" + } + } + ] + } + ] + } + ] + }, + { + "id": "data-source-editor-dialog-footer", + "type": "DialogFooter", + "children": [ + { + "id": "data-source-editor-dialog-cancel", + "type": "Button", + "props": { + "variant": "outline" + }, + "bindings": { + "onClick": "onCancel", + "children": "cancelLabel" + } + }, + { + "id": "data-source-editor-dialog-save", + "type": "Button", + "bindings": { + "onClick": "onSave", + "children": "saveLabel" + } + } + ] + } + ] + } + ] +} diff --git a/src/lib/json-ui/wrappers/definitions/github-build-status.json b/src/lib/json-ui/wrappers/definitions/github-build-status.json new file mode 100644 index 0000000..18393d1 --- /dev/null +++ b/src/lib/json-ui/wrappers/definitions/github-build-status.json @@ -0,0 +1,210 @@ +{ + "id": "github-build-status-card", + "type": "Card", + "bindings": { + "className": "className" + }, + "children": [ + { + "id": "github-build-status-header", + "type": "CardHeader", + "children": [ + { + "id": "github-build-status-title", + "type": "CardTitle", + "props": { + "className": "flex items-center gap-2" + }, + "bindings": { + "children": "title" + } + }, + { + "id": "github-build-status-description", + "type": "CardDescription", + "bindings": { + "children": "description" + } + } + ] + }, + { + "id": "github-build-status-content", + "type": "CardContent", + "props": { + "className": "space-y-4" + }, + "children": [ + { + "id": "github-build-status-loading", + "type": "p", + "props": { + "className": "text-sm text-muted-foreground" + }, + "bindings": { + "children": "loadingMessage" + }, + "conditional": { + "if": "isLoading" + } + }, + { + "id": "github-build-status-error", + "type": "div", + "props": { + "className": "flex items-center gap-2 text-sm text-red-500" + }, + "conditional": { + "if": "errorMessage" + }, + "children": [ + { + "id": "github-build-status-error-text", + "type": "span", + "bindings": { + "children": "errorMessage" + } + } + ] + }, + { + "id": "github-build-status-empty", + "type": "p", + "props": { + "className": "text-sm text-muted-foreground" + }, + "bindings": { + "children": "emptyMessage" + }, + "conditional": { + "if": "!isLoading && !errorMessage && !hasWorkflows" + } + }, + { + "id": "github-build-status-list", + "type": "div", + "props": { + "className": "space-y-3" + }, + "conditional": { + "if": "hasWorkflows" + }, + "loop": { + "source": "workflows", + "itemVar": "workflow" + }, + "children": [ + { + "id": "github-build-status-item", + "type": "div", + "props": { + "className": "flex items-center justify-between gap-3 rounded-lg border border-border p-3" + }, + "children": [ + { + "id": "github-build-status-item-info", + "type": "div", + "props": { + "className": "min-w-0" + }, + "children": [ + { + "id": "github-build-status-item-row", + "type": "div", + "props": { + "className": "flex items-center gap-2" + }, + "children": [ + { + "id": "github-build-status-item-name", + "type": "p", + "props": { + "className": "text-sm font-medium truncate" + }, + "bindings": { + "children": "workflow.name" + } + }, + { + "id": "github-build-status-item-badge", + "type": "Badge", + "bindings": { + "className": "workflow.statusClass", + "children": "workflow.statusLabel" + } + } + ] + }, + { + "id": "github-build-status-item-meta", + "type": "div", + "props": { + "className": "text-xs text-muted-foreground truncate" + }, + "bindings": { + "children": "workflow.summaryLine" + } + } + ] + }, + { + "id": "github-build-status-item-link", + "type": "Button", + "props": { + "variant": "ghost", + "size": "sm", + "asChild": true + }, + "conditional": { + "if": "workflow.url" + }, + "children": [ + { + "id": "github-build-status-item-anchor", + "type": "a", + "bindings": { + "href": "workflow.url" + }, + "props": { + "target": "_blank", + "rel": "noopener noreferrer" + }, + "children": "View" + } + ] + } + ] + } + ] + }, + { + "id": "github-build-status-footer", + "type": "Button", + "props": { + "variant": "outline", + "size": "sm", + "asChild": true, + "className": "w-full" + }, + "conditional": { + "if": "footerLinkUrl" + }, + "children": [ + { + "id": "github-build-status-footer-anchor", + "type": "a", + "bindings": { + "href": "footerLinkUrl", + "children": "footerLinkLabel" + }, + "props": { + "target": "_blank", + "rel": "noopener noreferrer" + } + } + ] + } + ] + } + ] +}