feat(renderer): add improved typings to schema

Author: Hyperkid123

packages/react-form-renderer/src/common-types/component-mapper.ts

@@ -9,4 +9,15 @@ interface ComponentMapper {
   [key: string]: React.ComponentType | React.FunctionComponent | React.ElementType | ExtendedMapperComponent;
 }
 
+// Pure generic type that extracts component props from any ComponentMapper
+export type ComponentPropsMap<T extends ComponentMapper> = {
+  [K in keyof T]: T[K] extends React.ComponentType<infer P>
+    ? P
+    : T[K] extends ExtendedMapperComponent
+    ? T[K]['component'] extends React.ComponentType<infer P>
+      ? P
+      : never
+    : never;
+};
+
 export default ComponentMapper;

packages/react-form-renderer/src/common-types/field.ts

@@ -5,6 +5,7 @@ import { AnyObject } from './any-object';
 import { FieldInputProps } from 'react-final-form';
 import { FormOptions } from '../renderer-context';
 import { Meta } from '../use-field-api';
+import ComponentMapper, { ComponentPropsMap } from './component-mapper';
 
 export type FieldAction = [string, ...any[]];
 
@@ -23,7 +24,46 @@ export type ResolvePropsFunction<FormValues = Record<string, any>, FieldValue =
   formOptions: FormOptions<FormValues>
 ) => AnyObject;
 
-interface Field<FormValues = Record<string, any>, FieldValue = FormValues[keyof FormValues]> extends AnyObject {
+// Re-export BaseFieldProps from use-field-api for consistency
+export { BaseFieldProps } from '../use-field-api';
+
+// Strict base field properties for generic type inference (without AnyObject)
+export interface StrictBaseFieldProps<FormValues = Record<string, any>, FieldValue = FormValues[keyof FormValues]> {
+  name: string;
+  label?: string;
+  helperText?: string;
+  description?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isVisible?: boolean;
+  hideField?: boolean;
+  validate?: Validator[];
+  condition?: ConditionDefinition | ConditionDefinition[];
+  initializeOnMount?: boolean;
+  dataType?: DataType;
+  initialValue?: FieldValue;
+  clearedValue?: FieldValue;
+  clearOnUnmount?: boolean;
+  actions?: FieldActions;
+  resolveProps?: ResolvePropsFunction<FormValues, FieldValue>;
+}
+
+// Utility type for users to create typed field component props without AnyObject
+export type TypedFieldProps<P = {}> = StrictBaseFieldProps & P;
+
+// Generic field type that infers component-specific props from any ComponentMapper
+export type Field<
+  T extends ComponentMapper = ComponentMapper,
+  C extends keyof T = keyof T,
+  FormValues = Record<string, any>,
+  FieldValue = FormValues[keyof FormValues]
+> = StrictBaseFieldProps<FormValues, FieldValue> & {
+  component: C;
+} & ComponentPropsMap<T>[C];
+
+// For backward compatibility - preserve the original interface
+interface LegacyField<FormValues = Record<string, any>, FieldValue = FormValues[keyof FormValues]> extends AnyObject {
   name: string;
   component: string;
   validate?: Validator[];
@@ -37,4 +77,5 @@ interface Field<FormValues = Record<string, any>, FieldValue = FormValues[keyof
   resolveProps?: ResolvePropsFunction<FormValues, FieldValue>;
 }
 
-export default Field;
+// Export the backward-compatible version as default for existing code
+export default LegacyField;

packages/react-form-renderer/src/common-types/index.ts

@@ -8,4 +8,5 @@ export * from './form-template-render-props';
 export { default as SchemaValidatorMapper } from './schema-validator-mapper';
 export * from './schema-validator-mapper';
 export { default as Schema } from './schema';
+export * from './schema';
 export { FieldInputProps as Input } from 'react-final-form';

packages/react-form-renderer/src/common-types/schema.ts

@@ -1,10 +1,28 @@
 import { ReactNode } from 'react';
-import Field from './field';
+import LegacyField, { Field } from './field';
+import ComponentMapper from './component-mapper';
 
-interface Schema {
+// Helper type to create a union of all possible Field types for a ComponentMapper
+type FieldUnion<T extends ComponentMapper> = {
+  [K in keyof T]: Field<T, K>;
+}[keyof T];
+
+// Generic schema type that infers all component props from ComponentMapper
+export interface Schema<T extends ComponentMapper = ComponentMapper> {
+  title?: ReactNode;
+  description?: ReactNode;
+  fields: FieldUnion<T>[];
+}
+
+// Backward-compatible legacy schema type
+export interface LegacySchema {
   title?: ReactNode;
   description?: ReactNode;
-  fields: Field[];
+  fields: LegacyField[];
 }
 
+// Export the generic Schema as default for new TypeScript usage
 export default Schema;
+
+// Export LegacySchema for explicit legacy usage
+export { LegacySchema as LegacySchemaType };

packages/react-form-renderer/src/index.ts

@@ -21,7 +21,7 @@ export * from './validators/validator-functions';
 export { default as WizardContext } from './wizard-context';
 
 // Export commonly used types
-export { Field, Schema, ComponentMapper, AnyObject } from './common-types';
+export { Field, Schema, ComponentMapper, AnyObject, TypedFieldProps } from './common-types';
 
 // Export all types
 export * from './component-types';

packages/react-form-renderer/src/validation/validation.ts

@@ -6,8 +6,8 @@ import getVisibleFields from '../get-visible-fields';
 import defaultValidatorMapper from '../validator-mapper';
 import { getValidate, ValidatorMapper as HelperValidatorMapper } from '../use-field-api/validator-helpers';
 import { ValidatorFunction } from '../validators';
-import Schema from '../common-types/schema';
-import Field from '../common-types/field';
+import { LegacySchema as Schema } from '../common-types/schema';
+import LegacyField from '../common-types/field';
 import ComponentMapper from '../common-types/component-mapper';
 import { ValidatorMapper } from '../validator-mapper';
 import { ActionMapper } from '../form-renderer/action-mapper';
@@ -52,7 +52,7 @@ const changeToDefaultComponent = (schema: Schema): Schema => {
       ...field,
       ...(field.component && { component: DEFAULT_COMPONENT }),
       ...(field.fields && {
-        fields: field.fields.map((subField: Field) => ({
+        fields: field.fields.map((subField: LegacyField) => ({
           ...subField,
           ...(subField.component && { component: DEFAULT_COMPONENT }),
         })),
@@ -99,7 +99,7 @@ const validation = async (schema: Schema, options: ValidationOptions): Promise<V
     finalSchema = changeToDefaultComponent(schema);
   }
 
-  defaultSchemaValidator(finalSchema, finalComponentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
+  defaultSchemaValidator(finalSchema as any, finalComponentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
 
   const visibleFieldsResult = getVisibleFields(finalSchema, values, undefined, conditionMapper);
   finalSchema = visibleFieldsResult as Schema;