@react-typed-forms/schemas 15.2.0 → 16.0.0

package/lib/renderers.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
-import { ActionRendererProps, AdornmentProps, AdornmentRenderer, ArrayRendererProps, ControlLayoutProps, DataRendererProps, DisplayRendererProps, FormRenderer, GroupRendererProps, HtmlComponents, LabelRendererProps, LabelType, RenderedControl, VisibilityRendererProps } from "./controlRender";
-import { AccordionAdornment, ControlAdornment, IconAdornment, OptionalAdornment, RenderOptions, SetFieldAdornment } from "./controlDefinition";
+import { AdornmentProps, AdornmentRenderer, ArrayRendererProps, ControlLayoutProps, DataRendererProps, DisplayRendererProps, FormRenderer, GroupRendererProps, HtmlComponents, LabelRendererProps, LabelType, RenderedControl, VisibilityRendererProps } from "./controlRender";
+import { AccordionAdornment, ControlAdornment, IconAdornment, OptionalAdornment, RenderOptions, SetFieldAdornment } from "@astroapps/forms-core";
+import { ActionRendererProps } from "./types";
 export interface DefaultRenderers {
     data: DataRendererRegistration;
     label: LabelRendererRegistration;
@@ -12,7 +13,6 @@ export interface DefaultRenderers {
     renderLayout: LayoutRendererRegistration;
     visibility: VisibilityRendererRegistration;
     extraRenderers: RendererRegistration[];
-    renderText: (props: ReactNode) => ReactNode;
     html: HtmlComponents;
 }
 export interface LayoutRendererRegistration {

package/lib/types.d.ts

@@ -0,0 +1,31 @@
+import { ActionStyle, EntityExpression, FormContextData, IconPlacement, IconReference, SchemaDataNode, SchemaInterface } from "@astroapps/forms-core";
+import React, { Key, ReactNode } from "react";
+import { CleanupScope } from "@react-typed-forms/core";
+/**
+ * Interface representing the control data context.
+ */
+export interface ControlDataContext {
+    schemaInterface: SchemaInterface;
+    dataNode: SchemaDataNode | undefined;
+    parentNode: SchemaDataNode;
+    variables: Record<string, any>;
+}
+export type ControlActionHandler = (actionId: string, actionData: any, ctx: ControlDataContext) => (() => void) | undefined;
+export interface ActionRendererProps {
+    key?: Key;
+    actionId: string;
+    actionContent?: ReactNode;
+    actionText: string;
+    actionData?: any;
+    actionStyle?: ActionStyle | null;
+    icon?: IconReference | null;
+    iconPlacement?: IconPlacement | null;
+    onClick: () => void;
+    className?: string | null;
+    textClass?: string | null;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    hidden?: boolean;
+    inline?: boolean;
+}
+export type RunExpression = (scope: CleanupScope, expression: EntityExpression, returnResult: (v: unknown) => void, bindings?: FormContextData) => void;

package/lib/util.d.ts

@@ -1,8 +1,7 @@
-import { ControlActionHandler, ControlDataVisitor, ControlDefinition, DataControlDefinition, DisplayOnlyRenderOptions, FormTree, GroupRenderOptions } from "./controlDefinition";
+import { CompoundField, ControlDataVisitor, ControlDefinition, DataControlDefinition, EntityExpression, FieldOption, SchemaDataNode, SchemaField, SchemaNode } from "@astroapps/forms-core";
 import { MutableRefObject } from "react";
-import { CompoundField, FieldOption, SchemaDataNode, SchemaField, SchemaNode } from "./schemaField";
 import { Control } from "@react-typed-forms/core";
-import { ActionRendererProps } from "./controlRender";
+import { ActionRendererProps, ControlActionHandler, RunExpression } from "./types";
 /**
  * Interface representing the classes for a control.
  */
@@ -10,11 +9,9 @@ export interface ControlClasses {
     styleClass?: string;
     layoutClass?: string;
     labelClass?: string;
+    textClass?: string;
+    labelTextClass?: string;
 }
-/**
- * Type representing a JSON path, which can be a string or a number.
- */
-export type JsonPath = string | number;
 /**
  * Applies default values to the given record based on the provided schema fields.
  * @param v - The record to apply default values to.
@@ -117,47 +114,22 @@ export declare function addMissingControls(fields: SchemaField[], controls: Cont
  * @returns The control definitions with missing controls added.
  */
 export declare function addMissingControlsForSchema(schema: SchemaNode, controls: ControlDefinition[], warning?: (msg: string) => void): ControlDefinition[];
-/**
- * Adds missing controls to the provided form tree based on the schema fields.
- * @param schema - The root schema node to use for adding missing controls.
- * @param tree - The form tree to add missing controls to.
- * @param warning - An optional function to call with warning messages.
- */
-export declare function addMissingControlsToForm(schema: SchemaNode, tree: FormTree, warning?: (msg: string) => void): void;
 /**
  * Custom hook to use an updated reference.
  * @param a - The value to create a reference for.
  * @returns A mutable reference object.
  */
 export declare function useUpdatedRef<A>(a: A): MutableRefObject<A>;
-/**
- * Checks if a control definition is readonly.
- * @param c - The control definition to check.
- * @returns True if the control definition is readonly, false otherwise.
- */
-export declare function isControlReadonly(c: ControlDefinition): boolean;
-/**
- * Checks if a control definition is disabled.
- * @param c - The control definition to check.
- * @returns True if the control definition is disabled, false otherwise.
- */
-export declare function isControlDisabled(c: ControlDefinition): boolean;
-/**
- * Returns the display-only render options for a control definition.
- * @param d - The control definition to get the display-only render options for.
- * @returns The display-only render options, or undefined if not applicable.
- */
-export declare function getDisplayOnlyOptions(d: ControlDefinition): DisplayOnlyRenderOptions | undefined;
 /**
  * Cleans data for a schema based on the provided schema fields.
  * @param v - The data to clean.
- * @param fields - The schema fields to use for cleaning the data.
+ * @param schemaNode
  * @param removeIfDefault - Flag indicating if default values should be removed.
  * @returns The cleaned data.
  */
 export declare function cleanDataForSchema(v: {
     [k: string]: any;
-} | undefined, fields: SchemaField[], removeIfDefault?: boolean): any;
+} | undefined, schemaNode: SchemaNode, removeIfDefault?: boolean): any;
 /**
  * Returns all referenced classes for a control definition.
  * @param c - The control definition to get the referenced classes for.
@@ -165,13 +137,6 @@ export declare function cleanDataForSchema(v: {
  * @returns An array of referenced classes.
  */
 export declare function getAllReferencedClasses(c: ControlDefinition, collectExtra?: (c: ControlDefinition) => (string | undefined | null)[]): string[];
-/**
- * Converts a JSON path array to a string.
- * @param jsonPath - The JSON path array to convert.
- * @param customIndex - Optional function to customize the index format.
- * @returns The JSON path string.
- */
-export declare function jsonPathString(jsonPath: JsonPath[], customIndex?: (n: number) => string): string;
 /**
  * Finds a child control definition within a parent control definition.
  * @param parent - The parent control definition.
@@ -231,30 +196,18 @@ export declare function deepMerge<A>(value: A, fallback: A): A;
  * @returns {string} - The coerced string.
  */
 export declare function coerceToString(v: unknown): string;
-/**
- * Returns the group renderer options for a control definition.
- * @param {ControlDefinition} def - The control definition to get the group renderer options for.
- * @returns {GroupRenderOptions | undefined} - The group renderer options, or undefined if not applicable.
- */
-export declare function getGroupRendererOptions(def: ControlDefinition): GroupRenderOptions | undefined;
 /**
  * Returns the group class overrides for a control definition.
  * @param {ControlDefinition} def - The control definition to get the group class overrides for.
  * @returns {ControlClasses} - The group class overrides.
  */
 export declare function getGroupClassOverrides(def: ControlDefinition): ControlClasses;
-/**
- * Checks if a control definition is display-only.
- * @param {ControlDefinition} def - The control definition to check.
- * @returns {boolean} - True if the control definition is display-only, false otherwise.
- */
-export declare function isControlDisplayOnly(def: ControlDefinition): boolean;
 /**
  * Combines multiple action handlers into a single handler.
  * @param {...(ControlActionHandler | undefined)[]} handlers - The action handlers to combine.
  * @returns {ControlActionHandler} - The combined action handler.
  */
-export declare function actionHandlers(...handlers: (ControlActionHandler | undefined)[]): ControlActionHandler;
+export declare function actionHandlers(...handlers: (ControlActionHandler | undefined)[]): ControlActionHandler | undefined;
 export declare function getDiffObject(dataNode: SchemaDataNode, force?: boolean): any;
 export declare function getNullToggler(c: Control<any>): Control<boolean>;
 export interface ExternalEditAction {
@@ -275,3 +228,4 @@ export declare function collectDifferences(dataNode: SchemaDataNode, values: unk
     editing: number;
 };
 export declare function validationVisitor(onInvalid: (data: Control<unknown>) => void): ControlDataVisitor<any>;
+export declare function useExpression<T>(defaultValue: T, runExpression: RunExpression, expression: EntityExpression | null | undefined, coerce: (x: any) => T, bindings?: Record<string, any>): Control<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-typed-forms/schemas",
-  "version": "15.2.0",
+  "version": "16.0.0",
   "description": "",
   "type": "module",
   "main": "lib/index.cjs",
@@ -33,15 +33,16 @@
   "dependencies": {
     "clsx": "^1 || ^2",
     "uuid": "^10.0.0",
-    "jsonata": "^2.0.4"
+    "jsonata": "^2.0.4",
+    "@astroapps/forms-core": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19",
-    "@react-typed-forms/core": "^4.0.0"
+    "@react-typed-forms/core": "^4.4.0"
   },
   "devDependencies": {
     "react": "^18.2.0 || ^19",
-    "@react-typed-forms/core": "^4.0.0",
+    "@react-typed-forms/core": "^4.4.0",
     "@react-typed-forms/transform": "^0.2.0",
     "jest": "^29.7.0",
     "tsx": "^4.19.1",

package/src/RenderForm.tsx

@@ -0,0 +1,301 @@
+import {
+  ControlLayoutProps,
+  ControlRenderOptions,
+  ControlRenderProps,
+  defaultDataProps,
+  FormRenderer,
+  renderControlLayout,
+  Visibility,
+} from "./controlRender";
+import React, {
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  ControlDefinition,
+  ControlState,
+  createFormState,
+  createSchemaDataNode,
+  createSchemaTree,
+  defaultSchemaInterface,
+  FormNode,
+  FormState,
+  isDataControl,
+  JsonPath,
+  legacyFormNode,
+  SchemaDataNode,
+  SchemaField,
+} from "@astroapps/forms-core";
+import { ControlDataContext } from "./types";
+import {
+  actionHandlers,
+  getGroupClassOverrides,
+  rendererClass,
+  useUpdatedRef,
+} from "./util";
+import { Control, useControl } from "@react-typed-forms/core";
+
+export interface RenderFormProps {
+  data: SchemaDataNode;
+  form: FormNode;
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+}
+/* @trackControls */
+export function RenderForm({
+  data,
+  form,
+  renderer,
+  options = {},
+}: RenderFormProps) {
+  const schemaInterface = options.schemaInterface ?? defaultSchemaInterface;
+  const [formState, setFormState] = useState(
+    () => options?.formState ?? createFormState(schemaInterface),
+  );
+  const state = formState.getControlState(data, form, options);
+
+  useEffect(() => {
+    if (!options?.formState) {
+      return () => formState.cleanup();
+    }
+  }, [formState, options?.formState]);
+
+  const definition = state.definition;
+
+  const visible = !state.hidden;
+
+  const visibility = useControl<Visibility | undefined>(() =>
+    visible != null
+      ? {
+          visible,
+          showing: visible,
+        }
+      : undefined,
+  );
+  visibility.fields.visible.value = visible;
+
+  const dataContext: ControlDataContext = {
+    schemaInterface: state.schemaInterface,
+    dataNode: state.dataNode,
+    parentNode: data,
+    variables: state.variables,
+  };
+
+  const adornments =
+    definition.adornments?.map((x) =>
+      renderer.renderAdornment({
+        adornment: x,
+        dataContext,
+        formOptions: state,
+      }),
+    ) ?? [];
+
+  const {
+    styleClass,
+    labelClass,
+    layoutClass,
+    labelTextClass,
+    textClass,
+    ...inheritableOptions
+  } = options;
+  const { readonly, hidden, disabled, variables } = state;
+  const childOptions: ControlRenderOptions = {
+    ...inheritableOptions,
+    readonly,
+    disabled,
+    variables,
+    formState,
+  };
+
+  const labelAndChildren = renderControlLayout({
+    formNode: form,
+    renderer,
+    state,
+    renderChild: (k, child, options) => {
+      const overrideClasses = getGroupClassOverrides(definition);
+      const { parentDataNode, actionOnClick, variables, ...renderOptions } =
+        options ?? {};
+      const dContext = parentDataNode ?? dataContext.dataNode ?? data;
+      const allChildOptions = {
+        ...childOptions,
+        ...overrideClasses,
+        ...renderOptions,
+        variables: { ...childOptions.variables, ...variables },
+        actionOnClick: actionHandlers(
+          actionOnClick,
+          childOptions.actionOnClick,
+        ),
+      };
+      return (
+        <RenderForm
+          key={k}
+          form={child}
+          renderer={renderer}
+          data={dContext}
+          options={allChildOptions}
+        />
+      );
+    },
+    inline: options?.inline,
+    displayOnly: options?.displayOnly,
+    createDataProps: defaultDataProps,
+    formOptions: state,
+    dataContext,
+    control: dataContext.dataNode?.control,
+    schemaInterface,
+    style: state.style,
+    allowedOptions: state.allowedOptions,
+    customDisplay: options.customDisplay,
+    actionOnClick: options.actionOnClick,
+    styleClass: styleClass,
+    labelClass: labelClass,
+    labelTextClass: labelTextClass,
+    textClass: textClass,
+    getChildState(child: FormNode, parent?: SchemaDataNode): ControlState {
+      return formState.getControlState(
+        parent ?? state.dataNode ?? data,
+        child,
+        childOptions,
+      );
+    },
+    runExpression: (scope, expr, returnResult) => {
+      if (expr?.type) {
+        formState.evalExpression(expr, {
+          scope,
+          dataNode: data,
+          schemaInterface,
+          returnResult,
+        });
+      }
+    },
+  });
+  const layoutProps: ControlLayoutProps = {
+    ...labelAndChildren,
+    adornments,
+    className: rendererClass(options.layoutClass, definition.layoutClass),
+    style: state.layoutStyle,
+  };
+  const renderedControl = renderer.renderLayout(
+    options.adjustLayout?.(dataContext, layoutProps) ?? layoutProps,
+  );
+  return renderer.renderVisibility({ visibility, ...renderedControl });
+}
+
+/**
+ * @deprecated Use RenderForm instead.
+ */
+export function useControlRendererComponent(
+  controlOrFormNode: ControlDefinition | FormNode,
+  renderer: FormRenderer,
+  options: ControlRenderOptions = {},
+  parentDataNode: SchemaDataNode,
+): FC<{}> {
+  const [definition, formNode] =
+    "definition" in controlOrFormNode
+      ? [controlOrFormNode.definition, controlOrFormNode]
+      : [controlOrFormNode, legacyFormNode(controlOrFormNode)];
+
+  const r = useUpdatedRef({
+    options,
+    renderer,
+    parentDataNode,
+    formNode,
+  });
+
+  return useMemo(
+    () => () => {
+      const { options, parentDataNode, formNode, renderer } = r.current;
+      return (
+        <RenderForm
+          data={parentDataNode}
+          form={formNode}
+          renderer={renderer}
+          options={options}
+        />
+      );
+    },
+    [r],
+  );
+}
+
+/**
+ * @deprecated Use RenderForm instead.
+ */
+export function ControlRenderer({
+  definition,
+  fields,
+  renderer,
+  options,
+  control,
+  parentPath,
+}: {
+  definition: ControlDefinition;
+  fields: SchemaField[];
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+  control: Control<any>;
+  parentPath?: JsonPath[];
+}) {
+  const schemaDataNode = createSchemaDataNode(
+    createSchemaTree(fields).rootNode,
+    control,
+  );
+  const Render = useControlRendererComponent(
+    definition,
+    renderer,
+    options,
+    schemaDataNode,
+  );
+  return <Render />;
+}
+
+/**
+ * @deprecated Use RenderForm instead.
+ */
+export function NewControlRenderer({
+  definition,
+  renderer,
+  options,
+  parentDataNode,
+}: {
+  definition: ControlDefinition | FormNode;
+  renderer: FormRenderer;
+  options?: ControlRenderOptions;
+  parentDataNode: SchemaDataNode;
+}) {
+  const Render = useControlRendererComponent(
+    definition,
+    renderer,
+    options,
+    parentDataNode,
+  );
+  return <Render />;
+}
+
+/**
+ * @deprecated Use RenderForm instead.
+ */
+export function useControlRenderer(
+  definition: ControlDefinition,
+  fields: SchemaField[],
+  renderer: FormRenderer,
+  options: ControlRenderOptions = {},
+): FC<ControlRenderProps> {
+  const r = useUpdatedRef({ definition, fields, renderer, options });
+  return useCallback(
+    ({ control, parentPath }) => {
+      return (
+        <ControlRenderer
+          {...r.current}
+          control={control}
+          parentPath={parentPath}
+        />
+      );
+    },
+    [r],
+  );
+}

package/src/controlBuilder.ts

@@ -7,39 +7,37 @@ import {
   ControlDefinition,
   ControlDefinitionType,
   DataControlDefinition,
+  DataExpression,
+  DataMatchExpression,
   DataRenderType,
+  DateValidator,
   DisplayControlDefinition,
   DisplayDataType,
   DisplayOnlyRenderOptions,
   DynamicProperty,
   DynamicPropertyType,
+  EntityExpression,
+  ExpressionType,
   GroupedControlsDefinition,
   GroupRenderType,
   HtmlDisplay,
+  JsonataExpression,
   JsonataRenderOptions,
+  JsonataValidator,
+  LengthValidator,
   RadioButtonRenderOptions,
   RenderOptions,
+  SchemaField,
+  SchemaMap,
+  SchemaNode,
   TextDisplay,
   TextfieldRenderOptions,
-} from "./controlDefinition";
-import { ActionRendererProps } from "./controlRender";
+  ValidatorType,
+} from "@astroapps/forms-core";
 import { useMemo } from "react";
 import { addMissingControls } from "./util";
-import { mergeFields, resolveSchemas } from "./schemaBuilder";
-import {
-  DateValidator,
-  JsonataValidator,
-  LengthValidator,
-  ValidatorType,
-} from "./schemaValidator";
-import { SchemaField, SchemaMap, SchemaNode } from "./schemaField";
-import {
-  DataExpression,
-  DataMatchExpression,
-  EntityExpression,
-  ExpressionType,
-  JsonataExpression,
-} from "./entityExpression";
+import { mergeFields, resolveSchemas } from "@astroapps/forms-core";
+import { ActionRendererProps } from "./types";
 
 export function dataControl(
   field: string,
@@ -200,10 +198,15 @@ export function actionControl(
 export function createAction(
   actionId: string,
   onClick: () => void,
-  actionText?: string,
+  actionText?: string | null,
   options?: Partial<ActionRendererProps>,
 ): ActionRendererProps {
-  return { actionId, onClick, actionText: actionText ?? actionId, ...options };
+  return {
+    actionId,
+    onClick,
+    actionText: actionText ?? actionId,
+    ...options,
+  };
 }
 
 export const emptyGroupDefinition: GroupedControlsDefinition = {