@json-render/react 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +238 -0
- package/dist/index.d.mts +315 -0
- package/dist/index.d.ts +315 -0
- package/dist/index.js +796 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +769 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +59 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, ComponentType } from 'react';
|
|
3
|
+
import { DataModel, AuthState, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, Action, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, UITree, UIElement, Catalog, ComponentDefinition } from '@json-render/core';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Data context value
|
|
7
|
+
*/
|
|
8
|
+
interface DataContextValue {
|
|
9
|
+
/** The current data model */
|
|
10
|
+
data: DataModel;
|
|
11
|
+
/** Auth state for visibility evaluation */
|
|
12
|
+
authState?: AuthState;
|
|
13
|
+
/** Get a value by path */
|
|
14
|
+
get: (path: string) => unknown;
|
|
15
|
+
/** Set a value by path */
|
|
16
|
+
set: (path: string, value: unknown) => void;
|
|
17
|
+
/** Update multiple values at once */
|
|
18
|
+
update: (updates: Record<string, unknown>) => void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Props for DataProvider
|
|
22
|
+
*/
|
|
23
|
+
interface DataProviderProps {
|
|
24
|
+
/** Initial data model */
|
|
25
|
+
initialData?: DataModel;
|
|
26
|
+
/** Auth state */
|
|
27
|
+
authState?: AuthState;
|
|
28
|
+
/** Callback when data changes */
|
|
29
|
+
onDataChange?: (path: string, value: unknown) => void;
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Provider for data model context
|
|
34
|
+
*/
|
|
35
|
+
declare function DataProvider({ initialData, authState, onDataChange, children, }: DataProviderProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
/**
|
|
37
|
+
* Hook to access the data context
|
|
38
|
+
*/
|
|
39
|
+
declare function useData(): DataContextValue;
|
|
40
|
+
/**
|
|
41
|
+
* Hook to get a value from the data model
|
|
42
|
+
*/
|
|
43
|
+
declare function useDataValue<T>(path: string): T | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* Hook to get and set a value from the data model (like useState)
|
|
46
|
+
*/
|
|
47
|
+
declare function useDataBinding<T>(path: string): [T | undefined, (value: T) => void];
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Visibility context value
|
|
51
|
+
*/
|
|
52
|
+
interface VisibilityContextValue {
|
|
53
|
+
/** Evaluate a visibility condition */
|
|
54
|
+
isVisible: (condition: VisibilityCondition | undefined) => boolean;
|
|
55
|
+
/** The underlying visibility context */
|
|
56
|
+
ctx: VisibilityContext;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Props for VisibilityProvider
|
|
60
|
+
*/
|
|
61
|
+
interface VisibilityProviderProps {
|
|
62
|
+
children: ReactNode;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Provider for visibility evaluation
|
|
66
|
+
*/
|
|
67
|
+
declare function VisibilityProvider({ children }: VisibilityProviderProps): react_jsx_runtime.JSX.Element;
|
|
68
|
+
/**
|
|
69
|
+
* Hook to access visibility evaluation
|
|
70
|
+
*/
|
|
71
|
+
declare function useVisibility(): VisibilityContextValue;
|
|
72
|
+
/**
|
|
73
|
+
* Hook to check if a condition is visible
|
|
74
|
+
*/
|
|
75
|
+
declare function useIsVisible(condition: VisibilityCondition | undefined): boolean;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Pending confirmation state
|
|
79
|
+
*/
|
|
80
|
+
interface PendingConfirmation {
|
|
81
|
+
/** The resolved action */
|
|
82
|
+
action: ResolvedAction;
|
|
83
|
+
/** The action handler */
|
|
84
|
+
handler: ActionHandler;
|
|
85
|
+
/** Resolve callback */
|
|
86
|
+
resolve: () => void;
|
|
87
|
+
/** Reject callback */
|
|
88
|
+
reject: () => void;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Action context value
|
|
92
|
+
*/
|
|
93
|
+
interface ActionContextValue {
|
|
94
|
+
/** Registered action handlers */
|
|
95
|
+
handlers: Record<string, ActionHandler>;
|
|
96
|
+
/** Currently loading action names */
|
|
97
|
+
loadingActions: Set<string>;
|
|
98
|
+
/** Pending confirmation dialog */
|
|
99
|
+
pendingConfirmation: PendingConfirmation | null;
|
|
100
|
+
/** Execute an action */
|
|
101
|
+
execute: (action: Action) => Promise<void>;
|
|
102
|
+
/** Confirm the pending action */
|
|
103
|
+
confirm: () => void;
|
|
104
|
+
/** Cancel the pending action */
|
|
105
|
+
cancel: () => void;
|
|
106
|
+
/** Register an action handler */
|
|
107
|
+
registerHandler: (name: string, handler: ActionHandler) => void;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Props for ActionProvider
|
|
111
|
+
*/
|
|
112
|
+
interface ActionProviderProps {
|
|
113
|
+
/** Initial action handlers */
|
|
114
|
+
handlers?: Record<string, ActionHandler>;
|
|
115
|
+
/** Navigation function */
|
|
116
|
+
navigate?: (path: string) => void;
|
|
117
|
+
children: ReactNode;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Provider for action execution
|
|
121
|
+
*/
|
|
122
|
+
declare function ActionProvider({ handlers: initialHandlers, navigate, children, }: ActionProviderProps): react_jsx_runtime.JSX.Element;
|
|
123
|
+
/**
|
|
124
|
+
* Hook to access action context
|
|
125
|
+
*/
|
|
126
|
+
declare function useActions(): ActionContextValue;
|
|
127
|
+
/**
|
|
128
|
+
* Hook to execute an action
|
|
129
|
+
*/
|
|
130
|
+
declare function useAction(action: Action): {
|
|
131
|
+
execute: () => Promise<void>;
|
|
132
|
+
isLoading: boolean;
|
|
133
|
+
};
|
|
134
|
+
/**
|
|
135
|
+
* Props for ConfirmDialog component
|
|
136
|
+
*/
|
|
137
|
+
interface ConfirmDialogProps {
|
|
138
|
+
/** The confirmation config */
|
|
139
|
+
confirm: ActionConfirm;
|
|
140
|
+
/** Called when confirmed */
|
|
141
|
+
onConfirm: () => void;
|
|
142
|
+
/** Called when cancelled */
|
|
143
|
+
onCancel: () => void;
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* Default confirmation dialog component
|
|
147
|
+
*/
|
|
148
|
+
declare function ConfirmDialog({ confirm, onConfirm, onCancel }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Field validation state
|
|
152
|
+
*/
|
|
153
|
+
interface FieldValidationState {
|
|
154
|
+
/** Whether the field has been touched */
|
|
155
|
+
touched: boolean;
|
|
156
|
+
/** Whether the field has been validated */
|
|
157
|
+
validated: boolean;
|
|
158
|
+
/** Validation result */
|
|
159
|
+
result: ValidationResult | null;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Validation context value
|
|
163
|
+
*/
|
|
164
|
+
interface ValidationContextValue {
|
|
165
|
+
/** Custom validation functions from catalog */
|
|
166
|
+
customFunctions: Record<string, ValidationFunction>;
|
|
167
|
+
/** Validation state by field path */
|
|
168
|
+
fieldStates: Record<string, FieldValidationState>;
|
|
169
|
+
/** Validate a field */
|
|
170
|
+
validate: (path: string, config: ValidationConfig) => ValidationResult;
|
|
171
|
+
/** Mark field as touched */
|
|
172
|
+
touch: (path: string) => void;
|
|
173
|
+
/** Clear validation for a field */
|
|
174
|
+
clear: (path: string) => void;
|
|
175
|
+
/** Validate all fields */
|
|
176
|
+
validateAll: () => boolean;
|
|
177
|
+
/** Register field config */
|
|
178
|
+
registerField: (path: string, config: ValidationConfig) => void;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Props for ValidationProvider
|
|
182
|
+
*/
|
|
183
|
+
interface ValidationProviderProps {
|
|
184
|
+
/** Custom validation functions from catalog */
|
|
185
|
+
customFunctions?: Record<string, ValidationFunction>;
|
|
186
|
+
children: ReactNode;
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Provider for validation
|
|
190
|
+
*/
|
|
191
|
+
declare function ValidationProvider({ customFunctions, children, }: ValidationProviderProps): react_jsx_runtime.JSX.Element;
|
|
192
|
+
/**
|
|
193
|
+
* Hook to access validation context
|
|
194
|
+
*/
|
|
195
|
+
declare function useValidation(): ValidationContextValue;
|
|
196
|
+
/**
|
|
197
|
+
* Hook to get validation state for a field
|
|
198
|
+
*/
|
|
199
|
+
declare function useFieldValidation(path: string, config?: ValidationConfig): {
|
|
200
|
+
state: FieldValidationState;
|
|
201
|
+
validate: () => ValidationResult;
|
|
202
|
+
touch: () => void;
|
|
203
|
+
clear: () => void;
|
|
204
|
+
errors: string[];
|
|
205
|
+
isValid: boolean;
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* Props passed to component renderers
|
|
210
|
+
*/
|
|
211
|
+
interface ComponentRenderProps<P = Record<string, unknown>> {
|
|
212
|
+
/** The element being rendered */
|
|
213
|
+
element: UIElement<string, P>;
|
|
214
|
+
/** Rendered children */
|
|
215
|
+
children?: ReactNode;
|
|
216
|
+
/** Execute an action */
|
|
217
|
+
onAction?: (action: Action) => void;
|
|
218
|
+
/** Whether the parent is loading */
|
|
219
|
+
loading?: boolean;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* Component renderer type
|
|
223
|
+
*/
|
|
224
|
+
type ComponentRenderer<P = Record<string, unknown>> = ComponentType<ComponentRenderProps<P>>;
|
|
225
|
+
/**
|
|
226
|
+
* Registry of component renderers
|
|
227
|
+
*/
|
|
228
|
+
type ComponentRegistry = Record<string, ComponentRenderer<any>>;
|
|
229
|
+
/**
|
|
230
|
+
* Props for the Renderer component
|
|
231
|
+
*/
|
|
232
|
+
interface RendererProps {
|
|
233
|
+
/** The UI tree to render */
|
|
234
|
+
tree: UITree | null;
|
|
235
|
+
/** Component registry */
|
|
236
|
+
registry: ComponentRegistry;
|
|
237
|
+
/** Whether the tree is currently loading/streaming */
|
|
238
|
+
loading?: boolean;
|
|
239
|
+
/** Fallback component for unknown types */
|
|
240
|
+
fallback?: ComponentRenderer;
|
|
241
|
+
}
|
|
242
|
+
/**
|
|
243
|
+
* Main renderer component
|
|
244
|
+
*/
|
|
245
|
+
declare function Renderer({ tree, registry, loading, fallback }: RendererProps): react_jsx_runtime.JSX.Element | null;
|
|
246
|
+
/**
|
|
247
|
+
* Props for JSONUIProvider
|
|
248
|
+
*/
|
|
249
|
+
interface JSONUIProviderProps {
|
|
250
|
+
/** Component registry */
|
|
251
|
+
registry: ComponentRegistry;
|
|
252
|
+
/** Initial data model */
|
|
253
|
+
initialData?: Record<string, unknown>;
|
|
254
|
+
/** Auth state */
|
|
255
|
+
authState?: {
|
|
256
|
+
isSignedIn: boolean;
|
|
257
|
+
user?: Record<string, unknown>;
|
|
258
|
+
};
|
|
259
|
+
/** Action handlers */
|
|
260
|
+
actionHandlers?: Record<string, (params: Record<string, unknown>) => Promise<unknown> | unknown>;
|
|
261
|
+
/** Navigation function */
|
|
262
|
+
navigate?: (path: string) => void;
|
|
263
|
+
/** Custom validation functions */
|
|
264
|
+
validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
|
|
265
|
+
/** Callback when data changes */
|
|
266
|
+
onDataChange?: (path: string, value: unknown) => void;
|
|
267
|
+
children: ReactNode;
|
|
268
|
+
}
|
|
269
|
+
/**
|
|
270
|
+
* Combined provider for all JSONUI contexts
|
|
271
|
+
*/
|
|
272
|
+
declare function JSONUIProvider({ registry, initialData, authState, actionHandlers, navigate, validationFunctions, onDataChange, children, }: JSONUIProviderProps): react_jsx_runtime.JSX.Element;
|
|
273
|
+
/**
|
|
274
|
+
* Helper to create a renderer component from a catalog
|
|
275
|
+
*/
|
|
276
|
+
declare function createRendererFromCatalog<C extends Catalog<Record<string, ComponentDefinition>>>(_catalog: C, registry: ComponentRegistry): ComponentType<Omit<RendererProps, 'registry'>>;
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* Options for useUIStream
|
|
280
|
+
*/
|
|
281
|
+
interface UseUIStreamOptions {
|
|
282
|
+
/** API endpoint */
|
|
283
|
+
api: string;
|
|
284
|
+
/** Callback when complete */
|
|
285
|
+
onComplete?: (tree: UITree) => void;
|
|
286
|
+
/** Callback on error */
|
|
287
|
+
onError?: (error: Error) => void;
|
|
288
|
+
}
|
|
289
|
+
/**
|
|
290
|
+
* Return type for useUIStream
|
|
291
|
+
*/
|
|
292
|
+
interface UseUIStreamReturn {
|
|
293
|
+
/** Current UI tree */
|
|
294
|
+
tree: UITree | null;
|
|
295
|
+
/** Whether currently streaming */
|
|
296
|
+
isStreaming: boolean;
|
|
297
|
+
/** Error if any */
|
|
298
|
+
error: Error | null;
|
|
299
|
+
/** Send a prompt to generate UI */
|
|
300
|
+
send: (prompt: string, context?: Record<string, unknown>) => Promise<void>;
|
|
301
|
+
/** Clear the current tree */
|
|
302
|
+
clear: () => void;
|
|
303
|
+
}
|
|
304
|
+
/**
|
|
305
|
+
* Hook for streaming UI generation
|
|
306
|
+
*/
|
|
307
|
+
declare function useUIStream({ api, onComplete, onError, }: UseUIStreamOptions): UseUIStreamReturn;
|
|
308
|
+
/**
|
|
309
|
+
* Convert a flat element list to a UITree
|
|
310
|
+
*/
|
|
311
|
+
declare function flatToTree(elements: Array<UIElement & {
|
|
312
|
+
parentKey?: string | null;
|
|
313
|
+
}>): UITree;
|
|
314
|
+
|
|
315
|
+
export { type ActionContextValue, ActionProvider, type ActionProviderProps, type ComponentRegistry, type ComponentRenderProps, type ComponentRenderer, ConfirmDialog, type ConfirmDialogProps, type DataContextValue, DataProvider, type DataProviderProps, type FieldValidationState, JSONUIProvider, type JSONUIProviderProps, type PendingConfirmation, Renderer, type RendererProps, type UseUIStreamOptions, type UseUIStreamReturn, type ValidationContextValue, ValidationProvider, type ValidationProviderProps, type VisibilityContextValue, VisibilityProvider, type VisibilityProviderProps, createRendererFromCatalog, flatToTree, useAction, useActions, useData, useDataBinding, useDataValue, useFieldValidation, useIsVisible, useUIStream, useValidation, useVisibility };
|