@react-typed-forms/schemas 1.0.0-dev.20 → 1.0.0-dev.21

package/lib/renderers.d.ts

@@ -50,8 +50,8 @@ export interface AdornmentRendererRegistration {
     adornmentType?: string | string[];
     render: (props: AdornmentProps) => AdornmentRenderer;
 }
-export type AnyRendererRegistration = DataRendererRegistration | GroupRendererRegistration | DisplayRendererRegistration | ActionRendererRegistration | LabelRendererRegistration | ArrayRendererRegistration | AdornmentRendererRegistration | VisibilityRendererRegistration;
-export declare function createFormRenderer(customRenderers?: AnyRendererRegistration[], defaultRenderers?: DefaultRenderers): FormRenderer;
+export type RendererRegistration = DataRendererRegistration | GroupRendererRegistration | DisplayRendererRegistration | ActionRendererRegistration | LabelRendererRegistration | ArrayRendererRegistration | AdornmentRendererRegistration | VisibilityRendererRegistration;
+export declare function createFormRenderer(customRenderers?: RendererRegistration[], defaultRenderers?: DefaultRenderers): FormRenderer;
 interface DefaultLabelRendererOptions {
     className?: string;
     groupLabelClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@react-typed-forms/schemas",
-	"version": "1.0.0-dev.20",
+	"version": "1.0.0-dev.21",
 	"description": "",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
@@ -36,12 +36,14 @@
 		"nswag": "^13.18.2",
 		"prettier": "^3.0.3",
 		"rimraf": "^3.0.2",
-		"typescript": "^5.2.2"
+		"typescript": "^5.2.2",
+		"markdown-magic": "^2.6.1"
 	},
 	"gitHead": "698e16cd3ab31b7dd0528fc76536f4d3205ce8c6",
 	"scripts": {
 		"build": "rimraf ./lib/ && microbundle -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
 		"watch": "microbundle -w -f cjs --no-compress --jsx React.createElement --jsxFragment React.Fragment",
+		"update-readme": "md-magic --path README.md",
 		"gencode": "nswag swagger2tsclient /input:http://localhost:5216/swagger/v1/swagger.json /runtime:Net60 /output:src/types.ts /GenerateClientClasses:false /MarkOptionalProperties:false /Template:Fetch /TypeStyle:Interface /DateTimeType:string"
 	}
 }

package/src/controlRender.tsx

@@ -15,9 +15,16 @@ import {
   SchemaValidator,
   visitControlDefinition,
 } from "./types";
-import React, {Context, createContext, Key, ReactElement, ReactNode, useContext,} from "react";
-import {Control, newControl} from "@react-typed-forms/core";
-import {fieldDisplayName, findCompoundField, findField, findScalarField, isDataControl, isGroupControl} from "./util";
+import React, { Key, ReactElement, ReactNode } from "react";
+import { Control, newControl } from "@react-typed-forms/core";
+import {
+  fieldDisplayName,
+  findCompoundField,
+  findField,
+  findScalarField,
+  isDataControl,
+  isGroupControl,
+} from "./util";
 
 export interface SchemaHooks {
   useExpression(
@@ -38,13 +45,10 @@ export interface FormEditHooks {
     formState: FormEditState,
     definition: DataControlDefinition,
     field: SchemaField,
-    renderers: FormRenderer,
   ): DataRendererProps;
   useGroupProperties(
     formState: FormEditState,
     definition: GroupedControlsDefinition,
-    currentHooks: FormEditHooks,
-    renderers: FormRenderer,
   ): GroupRendererProps;
   useDisplayProperties(
     formState: FormEditState,
@@ -87,13 +91,19 @@ export interface ControlData {
   [field: string]: any;
 }
 
-export interface FormEditState {
+export interface FormDataContext {
   fields: SchemaField[];
   data: Control<ControlData>;
+}
+export interface FormEditState extends FormDataContext {
+  hooks: FormEditHooks;
+  renderer: FormRenderer;
   readonly?: boolean;
   invisible?: boolean;
 }
 
+export type RenderControlOptions = Omit<FormEditState, "data">;
+
 export interface ArrayRendererProps {
   definition: DataControlDefinition | GroupedControlsDefinition;
   control: Control<any[]>;
@@ -126,37 +136,6 @@ export interface FormRenderer {
   renderAdornment: (props: AdornmentProps) => AdornmentRenderer;
 }
 
-let _FormRendererComponentsContext: Context<FormRenderer | undefined> | null =
-  null;
-
-function FormRendererComponentsContext() {
-  if (!_FormRendererComponentsContext) {
-    _FormRendererComponentsContext = createContext<FormRenderer | undefined>(
-      undefined,
-    );
-  }
-  return _FormRendererComponentsContext;
-}
-
-export function FormRendererProvider({
-  value,
-  children,
-}: {
-  value: FormRenderer;
-  children: ReactNode;
-}) {
-  const { Provider } = FormRendererComponentsContext();
-  return <Provider value={value} children={children} />;
-}
-
-export function useFormRendererComponents() {
-  const c = useContext(FormRendererComponentsContext());
-  if (!c) {
-    throw "Need to use FormRendererComponentContext.Provider";
-  }
-  return c;
-}
-
 export interface Visibility {
   value: boolean;
   canChange: boolean;
@@ -195,11 +174,12 @@ export function controlTitle(
 
 export function renderControl<S extends ControlDefinition>(
   definition: S,
-  formState: FormEditState,
-  hooks: FormEditHooks,
-  key: Key,
+  data: Control<any>,
+  options: RenderControlOptions,
+  key?: Key,
 ): ReactElement {
-  const { fields } = formState;
+  const { fields } = options;
+  const formState = { ...options, data };
   return visitControlDefinition(
     definition,
     {
@@ -211,35 +191,19 @@ export function renderControl<S extends ControlDefinition>(
           <DataRenderer
             key={key}
             formState={formState}
-            hooks={hooks}
             controlDef={def}
             fieldData={fieldData}
           />
         );
       },
       group: (d: GroupedControlsDefinition) => (
-        <GroupRenderer
-          key={key}
-          hooks={hooks}
-          groupDef={d}
-          formState={formState}
-        />
+        <GroupRenderer key={key} groupDef={d} formState={formState} />
       ),
       action: (d: ActionControlDefinition) => (
-        <ActionRenderer
-          key={key}
-          hooks={hooks}
-          formState={formState}
-          actionDef={d}
-        />
+        <ActionRenderer key={key} formState={formState} actionDef={d} />
       ),
       display: (d: DisplayControlDefinition) => (
-        <DisplayRenderer
-          key={key}
-          hooks={hooks}
-          formState={formState}
-          displayDef={d}
-        />
+        <DisplayRenderer key={key} formState={formState} displayDef={d} />
       ),
     },
     () => <h1>Unknown control: {(definition as any).type}</h1>,
@@ -248,77 +212,62 @@ export function renderControl<S extends ControlDefinition>(
 
 /** @trackControls */
 function DataRenderer({
-  hooks,
   formState,
   controlDef,
   fieldData,
 }: {
-  hooks: FormEditHooks;
   controlDef: DataControlDefinition;
   formState: FormEditState;
   fieldData: SchemaField;
 }) {
-  const renderer = useFormRendererComponents();
-  const props = hooks.useDataProperties(
+  const props = formState.hooks.useDataProperties(
     formState,
     controlDef,
     fieldData,
-    renderer,
   );
-  return (props.customRender ?? renderer.renderData)(props);
+  return (props.customRender ?? formState.renderer.renderData)(props);
 }
 
 /** @trackControls */
 function ActionRenderer({
-  hooks,
   formState,
   actionDef,
 }: {
-  hooks: FormEditHooks;
   actionDef: ActionControlDefinition;
   formState: FormEditState;
 }) {
-  const { renderAction } = useFormRendererComponents();
-  const actionControlProperties = hooks.useActionProperties(
+  const actionControlProperties = formState.hooks.useActionProperties(
     formState,
     actionDef,
   );
-  return renderAction(actionControlProperties);
+  return formState.renderer.renderAction(actionControlProperties);
 }
 
 /** @trackControls */
 function GroupRenderer({
-  hooks,
   formState,
   groupDef,
 }: {
-  hooks: FormEditHooks;
   groupDef: GroupedControlsDefinition;
   formState: FormEditState;
 }) {
-  const renderers = useFormRendererComponents();
-  const groupProps = hooks.useGroupProperties(
-    formState,
-    groupDef,
-    hooks,
-    renderers,
-  );
-  return renderers.renderGroup(groupProps);
+  const groupProps = formState.hooks.useGroupProperties(formState, groupDef);
+  return formState.renderer.renderGroup(groupProps);
 }
 
 /** @trackControls */
 function DisplayRenderer({
-  hooks,
   formState,
   displayDef,
 }: {
-  hooks: FormEditHooks;
   displayDef: DisplayControlDefinition;
   formState: FormEditState;
 }) {
-  const { renderDisplay } = useFormRendererComponents();
-  const displayProps = hooks.useDisplayProperties(formState, displayDef);
-  return renderDisplay(displayProps);
+  const displayProps = formState.hooks.useDisplayProperties(
+    formState,
+    displayDef,
+  );
+  return formState.renderer.renderDisplay(displayProps);
 }
 
 export function controlForField(
@@ -359,7 +308,7 @@ export function createAction(
 
 export function visitControlData<S extends ControlDefinition, A>(
   definition: S,
-  { fields, data }: FormEditState,
+  { fields, data }: FormDataContext,
   cb: (
     definition: DataControlDefinition,
     control: Control<any>,

package/src/hooks.tsx

@@ -12,6 +12,7 @@ import {
   FieldOption,
   FieldValueExpression,
   GroupedControlsDefinition,
+  GroupRenderType,
   JsonataExpression,
   SchemaField,
   SchemaValidator,
@@ -28,6 +29,7 @@ import {
   FormEditState,
   GroupRendererProps,
   renderControl,
+  RenderControlOptions,
   SchemaHooks,
   Visibility,
 } from "./controlRender";
@@ -262,12 +264,7 @@ export const defaultFormEditHooks = createFormEditHooks(
 export function createFormEditHooks(schemaHooks: SchemaHooks): FormEditHooks {
   return {
     schemaHooks,
-    useDataProperties(
-      formState,
-      definition,
-      field,
-      renderer,
-    ): DataRendererProps {
+    useDataProperties(formState, definition, field): DataRendererProps {
       const visible = useIsControlVisible(definition, formState, schemaHooks);
       const isVisible = visible.value && !formState.invisible;
       const defaultValue = useDefaultValue(
@@ -318,7 +315,7 @@ export function createFormEditHooks(schemaHooks: SchemaHooks): FormEditHooks {
           field,
           definition,
           dataProps.readonly,
-          (c) => renderer.renderData({ ...dataProps, control: c }),
+          (c) => formState.renderer.renderData({ ...dataProps, control: c }),
         ),
       };
     },
@@ -326,45 +323,40 @@ export function createFormEditHooks(schemaHooks: SchemaHooks): FormEditHooks {
       const visible = useIsControlVisible(definition, fs, schemaHooks);
       return { visible, definition };
     },
-    useGroupProperties: (fs, definition, hooks, renderers) => {
+    useGroupProperties: (fs, definition) => {
       const visible = useIsControlVisible(definition, fs, schemaHooks);
       const field = definition.compoundField
         ? findCompoundField(fs.fields, definition.compoundField)
         : undefined;
-      const newFs: Omit<FormEditState, "data"> & { data: Control<any> } = {
+      const newFs: RenderControlOptions = {
         ...fs,
         fields: field ? field.children : fs.fields,
-        data: field ? fs.data.fields[field.field] : fs.data,
         invisible: !visible.value || fs.invisible,
       };
+      const data = field ? fs.data.fields[field.field] : fs.data;
       const groupProps = {
         visible,
-        hooks,
+        hooks: fs.hooks,
         hideTitle: definition.groupOptions.hideTitle ?? false,
         childCount: definition.children.length,
         renderChild: (i) =>
-          renderControl(definition.children[i], newFs, hooks, i),
+          renderControl(definition.children[i], data, newFs, i),
         definition,
       } satisfies GroupRendererProps;
       if (field?.collection) {
         return {
           ...groupProps,
           array: defaultArrayRendererProps(
-            newFs.data,
+            data,
             field,
             definition,
             fs.readonly,
             (e) =>
-              renderers.renderGroup({
+              fs.renderer.renderGroup({
                 ...groupProps,
                 hideTitle: true,
                 renderChild: (i) =>
-                  renderControl(
-                    definition.children[i],
-                    { ...newFs, data: e },
-                    hooks,
-                    i,
-                  ),
+                  renderControl(definition.children[i], e, newFs, i),
               }),
           ),
         };
@@ -427,9 +419,15 @@ function defaultArrayRendererProps(
   };
 }
 
-export function useControlsWithDefaults(
-  definition: GroupedControlsDefinition,
+const emptyGroupDefinition: GroupedControlsDefinition = {
+  type: ControlDefinitionType.Group,
+  children: [],
+  groupOptions: { type: GroupRenderType.Standard, hideTitle: true },
+};
+
+export function useControlDefinitionForSchema(
   sf: SchemaField[],
+  definition: GroupedControlsDefinition = emptyGroupDefinition,
 ) {
   return useMemo(
     () =>

package/src/renderers.tsx

@@ -106,7 +106,7 @@ export interface AdornmentRendererRegistration {
   render: (props: AdornmentProps) => AdornmentRenderer;
 }
 
-export type AnyRendererRegistration =
+export type RendererRegistration =
   | DataRendererRegistration
   | GroupRendererRegistration
   | DisplayRendererRegistration
@@ -117,7 +117,7 @@ export type AnyRendererRegistration =
   | VisibilityRendererRegistration;
 
 export function createFormRenderer(
-  customRenderers: AnyRendererRegistration[] = [],
+  customRenderers: RendererRegistration[] = [],
   defaultRenderers: DefaultRenderers = createClassStyledRenderers(),
 ): FormRenderer {
   const dataRegistrations = customRenderers.filter(isDataRegistration);
@@ -672,37 +672,37 @@ function createClassStyledRenderers() {
 }
 
 function isAdornmentRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is AdornmentRendererRegistration {
   return x.type === "adornment";
 }
 
 function isDataRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is DataRendererRegistration {
   return x.type === "data";
 }
 
 function isLabelRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is LabelRendererRegistration {
   return x.type === "label";
 }
 
 function isActionRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is ActionRendererRegistration {
   return x.type === "action";
 }
 
 function isArrayRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is ArrayRendererRegistration {
   return x.type === "array";
 }
 
 function isVisibilityRegistration(
-  x: AnyRendererRegistration,
+  x: RendererRegistration,
 ): x is VisibilityRendererRegistration {
   return x.type === "visibility";
 }