refactor(core/presentation): Split forms interfaces into three files:

- /forms/fields/interface.ts
- /forms/inputs/interface.ts
- /forms/layouts/interface.ts

app/scripts/modules/core/src/presentation/forms/fields/interface.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import { IFormInputProps, IFormInputValidation } from '../inputs';
+import { ILayoutProps } from '../layouts';
+import { IValidator } from '../validation';
+
+/** These props are used by FormFields such as FormikFormField and FormField */
+export interface ICommonFormFieldProps {
+  /** The Form Input component (or render function) */
+  input: React.ComponentType<IFormInputProps>;
+
+  /**
+   * An optional layout component (or render function).
+   * If none is provided, the default layout (from context) will be used
+   */
+  layout?: React.ComponentType<ILayoutProps>;
+
+  /** An inline validator function or functions */
+  validate?: IValidator | IValidator[];
+
+  /**
+   * A string (or React Node) containing an explicit validation message for the Form Field.
+   *
+   * This string can be constructed using the helper methods from core/presentation i.e.:
+   * errorMessage('Something went wrong!')
+   *
+   * Alternatively, a react node can be provided.
+   */
+  validationMessage?: IFormInputValidation['messageNode'];
+
+  /** An explicit 'touched' status for the Form Field */
+  touched?: IFormInputValidation['touched'];
+
+  // The following props are a subset of layout props that are accepted by a FormField or FormikFormField
+
+  /** A boolean marking this field as required */
+  required?: ILayoutProps['required'];
+
+  /** A string (or ReactNode) containing the field's label */
+  label?: ILayoutProps['label'];
+
+  /** A ReactNode containing the field's help component */
+  help?: ILayoutProps['help'];
+
+  /** A ReactNode containing the field's actions, such as 'delete item' */
+  actions?: ILayoutProps['actions'];
+}

app/scripts/modules/core/src/presentation/forms/inputs/CheckboxInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { orEmptyString, validationClassName } from './utils';
-import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
+import { IFormInputProps, OmitControlledInputPropsFrom } from './interface';
 
 interface ICheckBoxInputProps extends IFormInputProps, OmitControlledInputPropsFrom<React.InputHTMLAttributes<any>> {
   inputClassName?: string;

app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
+import { IFormInputProps, OmitControlledInputPropsFrom } from './interface';
 
 import { createFakeReactSyntheticEvent, isStringArray, orEmptyString, validationClassName } from './utils';
 

app/scripts/modules/core/src/presentation/forms/inputs/DayPickerInput.tsx

@@ -4,7 +4,7 @@ import { defaults } from 'lodash';
 import { DayPickerInputProps } from 'react-day-picker';
 import DayPicker from 'react-day-picker/DayPickerInput';
 
-import { IFormInputProps } from '../interface';
+import { IFormInputProps } from './interface';
 import { createFakeReactSyntheticEvent, orEmptyString, validationClassName } from './utils';
 
 import 'react-day-picker/lib/style.css';

app/scripts/modules/core/src/presentation/forms/inputs/NumberInput.tsx

@@ -3,7 +3,7 @@ import memoizeOne from 'memoize-one';
 
 import { orEmptyString, validationClassName } from './utils';
 import { composeValidators, IValidator, Validators } from '../validation';
-import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
+import { IFormInputProps, OmitControlledInputPropsFrom } from './interface';
 
 import './NumberInput.css';
 

app/scripts/modules/core/src/presentation/forms/inputs/RadioButtonInput.tsx

@@ -4,7 +4,7 @@ import { Option } from 'react-select';
 import { Markdown, OmitControlledInputPropsFrom } from 'core/presentation';
 
 import { isStringArray, orEmptyString, validationClassName } from './utils';
-import { IFormInputProps } from '../interface';
+import { IFormInputProps } from './interface';
 
 interface IRadioButtonInputProps
   extends IFormInputProps,

app/scripts/modules/core/src/presentation/forms/inputs/SelectInput.tsx

@@ -4,7 +4,7 @@ import { Option } from 'react-select';
 import { OmitControlledInputPropsFrom, StringsAsOptions } from 'core/presentation';
 
 import { isStringArray, orEmptyString, validationClassName } from './utils';
-import { IFormInputProps } from '../interface';
+import { IFormInputProps } from './interface';
 
 export interface ISelectInputProps
   extends IFormInputProps,

app/scripts/modules/core/src/presentation/forms/inputs/TextAreaInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { orEmptyString, validationClassName } from './utils';
-import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
+import { IFormInputProps, OmitControlledInputPropsFrom } from './interface';
 
 interface ITextAreaInputProps extends IFormInputProps, OmitControlledInputPropsFrom<React.TextareaHTMLAttributes<any>> {
   inputClassName?: string;

app/scripts/modules/core/src/presentation/forms/inputs/TextInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { orEmptyString, validationClassName } from './utils';
-import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
+import { IFormInputProps, OmitControlledInputPropsFrom } from './interface';
 
 interface ITextInputProps extends IFormInputProps, OmitControlledInputPropsFrom<React.InputHTMLAttributes<any>> {
   inputClassName?: string;

app/scripts/modules/core/src/presentation/forms/inputs/index.ts

@@ -10,4 +10,5 @@ export * from './StringsAsOptions';
 export * from './TextAreaInput';
 export * from './TextInput';
 export * from './expression';
+export * from './interface';
 export * from './utils';

app/scripts/modules/core/src/presentation/forms/inputs/interface.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { FieldProps } from 'formik';
+import { IValidationCategory, IValidator } from '../validation';
+
+/**
+ * These props are used by controlled components, such as <input> or Input components like TextInput
+ * Some of the typings reference the typings supplied by formik FieldProps
+ */
+export interface IControlledInputProps {
+  value: FieldProps['field']['value'];
+
+  onChange(e: React.ChangeEvent<any>): void;
+
+  onBlur: FieldProps['field']['onBlur'];
+  name: FieldProps['field']['name'];
+}
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export type OmitControlledInputPropsFrom<T> = Omit<T, keyof IControlledInputProps>;
+
+/** These props are used by Input components, such as TextInput */
+export interface IFormInputValidation {
+  touched?: boolean;
+  category?: IValidationCategory;
+  messageNode?: React.ReactNode;
+  hidden?: boolean;
+  addValidator?: (validator: IValidator) => void;
+  removeValidator?: (validator: IValidator) => void;
+}
+
+/** These props are used by Form Input components, such as TextInput */
+export interface IFormInputProps extends Partial<IControlledInputProps> {
+  validation?: IFormInputValidation;
+  inputClassName?: string;
+}

app/scripts/modules/core/src/presentation/forms/layouts/LayoutContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IFieldLayoutProps } from '../interface';
+import { ILayoutProps } from './interface';
 import { StandardFieldLayout } from './StandardFieldLayout';
 
-export const LayoutContext = React.createContext<React.ComponentType<IFieldLayoutProps>>(StandardFieldLayout);
+export const LayoutContext = React.createContext<React.ComponentType<ILayoutProps>>(StandardFieldLayout);
 export const { Provider: LayoutProvider, Consumer: LayoutConsumer } = LayoutContext;

app/scripts/modules/core/src/presentation/forms/layouts/index.ts

@@ -1,3 +1,4 @@
 export * from './StandardFieldLayout';
 export * from './LayoutContext';
 export * from './ResponsiveFieldLayout';
+export * from './interface';

app/scripts/modules/core/src/presentation/forms/layouts/interface.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { IFormInputValidation } from '../inputs';
+
+/** These props are used by FieldLayout components, such as StandardFieldLayout */
+export interface ILayoutProps {
+  required?: boolean;
+  label?: React.ReactNode;
+  help?: React.ReactNode;
+  actions?: React.ReactNode;
+  input: React.ReactNode;
+  validation?: IFormInputValidation;
+}