fix(renderer): fixed incorrect typings

- added AnyObject type for extensible props
- fixed component mapper expecting string instead of react component
- fixed useFieldApi return type to accept other props that input and meta
- fixed missing component type in form template
- fixed SormSpy not being exported as component
- added form template render props
- fixed wrong return type of useFormApi hook
- fixed field validator type schema definition

Author: Hyperkid123

packages/react-form-renderer/src/files/common.d.ts

@@ -0,0 +1,3 @@
+export interface AnyObject {
+  [key: string]: any;
+}

packages/react-form-renderer/src/files/component-mapper.d.ts

@@ -1,9 +1,11 @@
-export interface ExtendedMapperComponent extends Object {
-  component: string;
+import { AnyObject } from "./common";
+
+export interface ExtendedMapperComponent extends AnyObject {
+  component: React.ComponentType | React.FunctionComponent | React.ElementType;
 }
 
 interface ComponentMapper {
-  [key: string]: string | ExtendedMapperComponent;
+  [key: string]: React.ComponentType | React.FunctionComponent | React.ElementType | ExtendedMapperComponent;
 }
 
 export default ComponentMapper;

packages/react-form-renderer/src/files/field.d.ts

@@ -1,10 +1,11 @@
 import { Validator } from "./validators";
 import { ConditionDefinition } from './condition';
 import { DataType } from "./data-types";
+import { AnyObject } from "./common";
 
 export type FieldAction = [string, ...any[]];
 
-interface Field extends Object {
+interface Field extends AnyObject {
   name: string;
   component: string;
   validate?: Validator[];

packages/react-form-renderer/src/files/form-renderer.d.ts

@@ -1,10 +1,11 @@
-import { ComponentType } from 'react';
+import { ComponentType, FunctionComponent } from 'react';
 import { FormApi } from 'final-form';
 import Schema from './schema';
 import ComponentMapper from './component-mapper';
 import ValidatorMapper from './validator-mapper';
 import ActionMapper from './action-mapper';
 import SchemaValidatorMapper from './schema-validator-mapper';
+import { FormTemplateRenderProps } from '../../dist/cjs';
 
 export interface FormSubscription {
   [key: string]: boolean;
@@ -20,7 +21,7 @@ export interface FormRendererProps {
   subscription?: FormSubscription;
   clearedValue?: any;
   componentMapper: ComponentMapper;
-  FormTemplate: ComponentType;
+  FormTemplate: ComponentType<FormTemplateRenderProps> | FunctionComponent<FormTemplateRenderProps>;
   validatorMapper?: ValidatorMapper;
   actionMapper?: ActionMapper;
   schemaValidatorMapper?: SchemaValidatorMapper;

packages/react-form-renderer/src/files/form-spy.d.ts

@@ -1,3 +1,6 @@
+import { ComponentType } from 'react';
 import { FormSpyProps } from 'react-final-form';
 
-export default FormSpyProps;
+declare const FormSpy: ComponentType<FormSpyProps>;
+
+export default FormSpy;

packages/react-form-renderer/src/files/form-template-render-props.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ElementType } from "react";
+import Schema from "./schema";
+
+export interface FormTemplateRenderProps {
+  formFields: ElementType[];
+  schema: Schema;
+}
+
+export default FormTemplateRenderProps;

packages/react-form-renderer/src/files/renderer-context.d.ts

@@ -1,15 +1,18 @@
 import { ReactNode } from 'react';
 import { FormApi } from 'final-form';
+import { FormRenderProps } from 'react-final-form';
 import ComponentMapper from './component-mapper';
 import ValidatorMapper from './validator-mapper';
 import ActionMapper from './action-mapper';
 import Field from './field';
+import { AnyObject } from './common';
 
 export interface FormOptions extends FormApi {
   registerInputFile?: (name: string) => void;
   unRegisterInputFile?: (name: string) => void;
   onCancel?: (values: object, ...args: any[]) => void;
   onReset?: () => void;
+  handleSubmit: () => Promise<AnyObject | undefined> | undefined;
   clearedValue?: any;
   renderForm: (fields: Field[]) => ReactNode[];
 }

packages/react-form-renderer/src/files/use-field-api.d.ts

@@ -1,20 +1,23 @@
 import { ReactNode } from 'react';
-import { FieldInputProps, FieldMetaState } from 'react-final-form';
+import { FieldMetaState, FieldInputProps } from 'react-final-form';
+import { AnyObject } from './common';
 
 export interface ValidatorType extends Object {
   type: string;
   message?: ReactNode;
 }
 
-export interface UseFieldApiConfig extends Object {
+export interface UseFieldApiConfig extends AnyObject {
   name: string;
   component: string;
   validate?: ValidatorType[];
 }
 
-export interface UseFieldApiProps extends Object {
-  input: FieldInputProps<any>;
-  meta: FieldMetaState<any>;
+export interface UseFieldApiProps<
+ FieldValue,
+T extends HTMLElement = HTMLElement> extends AnyObject {
+  input: FieldInputProps<FieldValue, T>;
+  meta: FieldMetaState<FieldValue>;
 }
 
-export default function(options: UseFieldApiConfig): UseFieldApiProps;
+export default function(options: UseFieldApiConfig): UseFieldApiProps<string>;

packages/react-form-renderer/src/files/use-form-api.d.ts

@@ -1,3 +1,3 @@
-import { RendererContextValue } from './renderer-context';
+import { FormOptions } from './renderer-context';
 
-export default function(): RendererContextValue;
+export default function(): FormOptions;

packages/react-form-renderer/src/files/validators.d.ts

@@ -1,15 +1,18 @@
 import { ReactNode } from 'react';
+import { AnyObject } from './common';
 
 export type DataTypeValidators = "string" | "integer" | "boolean" | "number" | "float";
 
 export type ValidatorFunction = (value: any, allValues?: object) => Promise<any> | ReactNode | undefined;
 
-export interface Validator extends Object {
+export interface ValidatorConfiguration extends AnyObject {
+  type: string;
   message?: string;
   msg?: string;
 }
 
-export interface LenghtOptions extends Validator {
+export type Validator = ValidatorConfiguration | ValidatorFunction;
+export interface LenghtOptions extends ValidatorConfiguration {
   '='?: string;
   is?: number;
   max?: number;
@@ -18,12 +21,12 @@ export interface LenghtOptions extends Validator {
   minimum?: number;
 }
 
-export interface PatternOptions extends Validator {
+export interface PatternOptions extends ValidatorConfiguration {
   pattern?: string | RegExp;
   flags?: string;
 }
 
-export interface NumericalityOptions extends Validator {
+export interface NumericalityOptions extends ValidatorConfiguration {
   even?: boolean;
   odd?: boolean;
   equalTo?: number;