@json-render/react

<DataProvider initialData={object}>
  {children}
</DataProvider>

<ActionProvider handlers={Record<string, ActionHandler>}>
  {children}
</ActionProvider>

type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;

<VisibilityProvider auth={AuthState}>
  {children}
</VisibilityProvider>

interface AuthState {
  isSignedIn: boolean;
  roles?: string[];
}

<ValidationProvider functions={Record<string, ValidatorFn>}>
  {children}
</ValidationProvider>

type ValidatorFn = (value: unknown, args?: object) => boolean | Promise<boolean>;

<Renderer
  tree={UITree}
  registry={ComponentRegistry}
/>

type ComponentRegistry = Record<string, React.ComponentType<ComponentProps>>;

interface ComponentProps {
  element: UIElement;
  children?: React.ReactNode;
  onAction: (name: string, params: object) => void;
}

const {
  tree,       // UITree - current UI state
  isLoading,  // boolean - true while streaming
  error,      // Error | null
  generate,   // (prompt: string) => void
  abort,      // () => void
} = useUIStream({
  endpoint: string,
});

const {
  data,      // Record<string, unknown>
  setData,   // (data: object) => void
  getValue,  // (path: string) => unknown
  setValue,  // (path: string, value: unknown) => void
} = useData();

const value = useDataValue(path: string);

const [value, setValue] = useDataBinding(path: string);

const { dispatch } = useActions();
// dispatch(actionName: string, params: object)

const submitForm = useAction('submit_form');
// submitForm(params: object)

const isVisible = useIsVisible(condition?: VisibilityCondition);

const {
  value,     // unknown
  setValue,  // (value: unknown) => void
  errors,    // string[]
  validate,  // () => Promise<boolean>
  isValid,   // boolean
} = useFieldValidation(path: string, checks: ValidationCheck[]);