mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 14:14:57 +00:00
105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { ReactNode } from 'react'
|
|
|
|
export type ComponentType =
|
|
| 'div' | 'section' | 'article' | 'header' | 'footer' | 'main'
|
|
| 'Button' | 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter'
|
|
| 'Input' | 'TextArea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput'
|
|
| 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'Dialog'
|
|
| 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container'
|
|
| 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
|
|
| 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge'
|
|
| 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'
|
|
| 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'
|
|
|
|
export type ActionType =
|
|
| 'create' | 'update' | 'delete' | 'navigate'
|
|
| 'show-toast' | 'open-dialog' | 'close-dialog'
|
|
| 'set-value' | 'toggle-value' | 'increment' | 'decrement'
|
|
| 'custom'
|
|
|
|
export type DataSourceType =
|
|
| 'kv' | 'computed' | 'static'
|
|
|
|
export interface DataSource {
|
|
id: string
|
|
type: DataSourceType
|
|
key?: string
|
|
defaultValue?: any
|
|
compute?: (data: Record<string, any>) => any
|
|
dependencies?: string[]
|
|
}
|
|
|
|
export interface Action {
|
|
id: string
|
|
type: ActionType
|
|
target?: string
|
|
path?: string
|
|
value?: any
|
|
// Legacy: function-based compute
|
|
compute?: (data: Record<string, any>, event?: any) => any
|
|
// New: JSON-friendly expression (e.g., "event.target.value", "data.fieldName")
|
|
expression?: string
|
|
// New: JSON template with dynamic values
|
|
valueTemplate?: Record<string, any>
|
|
message?: string
|
|
variant?: 'success' | 'error' | 'info' | 'warning'
|
|
}
|
|
|
|
export interface Binding {
|
|
source: string
|
|
path?: string
|
|
transform?: (value: any) => any
|
|
}
|
|
|
|
export interface EventHandler {
|
|
event: string
|
|
actions: Action[]
|
|
condition?: (data: Record<string, any>) => boolean
|
|
}
|
|
|
|
export interface UIComponent {
|
|
id: string
|
|
type: ComponentType
|
|
props?: Record<string, any>
|
|
bindings?: Record<string, Binding>
|
|
events?: EventHandler[]
|
|
children?: UIComponent[]
|
|
condition?: Binding
|
|
}
|
|
|
|
export interface Layout {
|
|
type: 'single' | 'split' | 'tabs' | 'grid'
|
|
areas?: LayoutArea[]
|
|
columns?: number
|
|
gap?: number
|
|
}
|
|
|
|
export interface LayoutArea {
|
|
id: string
|
|
component: UIComponent
|
|
size?: number
|
|
}
|
|
|
|
export interface PageSchema {
|
|
id: string
|
|
name: string
|
|
layout: Layout
|
|
dataSources: DataSource[]
|
|
components: UIComponent[]
|
|
globalActions?: Action[]
|
|
}
|
|
|
|
export interface JSONUIContext {
|
|
data: Record<string, any>
|
|
updateData: (sourceId: string, value: any) => void
|
|
executeAction: (action: Action, event?: any) => Promise<void>
|
|
}
|
|
|
|
export interface ComponentRendererProps {
|
|
component: UIComponent
|
|
data: Record<string, unknown>
|
|
onEvent?: (componentId: string, event: string, eventData: unknown) => void
|
|
}
|
|
|
|
export type ComponentSchema = UIComponent
|