Merge branch 'migrate-forms-typescript' of github.com:OperationCode/front-end into migrate-forms-typescript

Author: kylemh

components/Form/Checkbox/Checkbox.tsx

@@ -1,26 +1,18 @@
 import classNames from 'classnames';
-import { ErrorMessage } from 'formik';
+import { ErrorMessage, FieldProps } from 'formik';
 import { CHECKBOX, CHECKBOX_ERROR } from 'common/constants/testIDs';
 import Alert from 'components/Alert/Alert';
 import Label from 'components/Form/Label/Label';
 import styles from './Checkbox.module.css';
 
-export interface CheckboxPropsType {
+export interface CheckboxPropsType extends FieldProps {
   /**
    * Applies a label that to the form input.
    */
   label: React.ReactNode | string;
   /**
    * Sets the name and value for the input element.
    */
-  field: {
-    name: string;
-    value?: string;
-  };
-  form: {
-    touched: Record<string, any>;
-    errors?: Record<string, string>;
-  };
   /**
    * Passes an idea to the root input element.
    */

components/Form/Input/Input.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ErrorMessage } from 'formik';
+import { ErrorMessage, FieldProps } from 'formik';
 import { INPUT, INPUT_ERROR, INPUT_FEEDBACK_GROUPING } from 'common/constants/testIDs';
 import Alert from 'components/Alert/Alert';
 import Label from 'components/Form/Label/Label';
@@ -36,14 +36,6 @@ export type InputPropsType = {
   /**
    * Sets the name and value for the input element.
    */
-  field: {
-    name: string;
-    value?: string;
-  };
-  form: {
-    touched: Record<string, any>;
-    errors?: Record<string, string>;
-  };
   /**
    * Passes the input type to the base input element.
    * @default 'text'
@@ -67,7 +59,7 @@ export type InputPropsType = {
    * @default true
    */
   hasValidationStyling?: boolean;
-};
+} & FieldProps;
 
 function Input({
   className,

components/Form/Select/Select.tsx

@@ -1,27 +1,9 @@
-import { ErrorMessage } from 'formik';
+import { ErrorMessage, FieldProps } from 'formik';
 import Alert from 'components/Alert/Alert';
 import Label from 'components/Form/Label/Label';
 import ThemedReactSelect from './ThemedReactSelect';
 import styles from './Select.module.css';
 
-type FieldType = {
-  name: string;
-  value: string | string[] | number | number[] | boolean | boolean[];
-};
-
-type TouchedType = Record<string, any>;
-
-type ErrorsType = {
-  [key: string]: string;
-};
-
-type FormType = {
-  touched: TouchedType;
-  errors: ErrorsType;
-  setFieldTouched: (name: string) => void;
-  setFieldValue: (name: string, value: string | string[]) => void;
-};
-
 type SelectOptionType = {
   label: string;
   value: string;
@@ -30,16 +12,14 @@ type SelectOptionType = {
 type SelectOptionsType = SelectOptionType[];
 
 export type SelectPropsType = {
-  field: FieldType;
-  form: FormType;
   options: SelectOptionsType;
   label: string;
   hasValidationStyling?: boolean;
   id?: string;
   isLabelHidden?: boolean;
   isMulti?: boolean;
   isSearchable?: boolean;
-};
+} & FieldProps;
 
 export default function Select({
   field: { name, value: fieldValue },

components/Form/Select/ThemedReactSelect.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import ReactSelect from 'react-select'; // the only spot this import is allowed
+import { FormikTouched } from 'formik';
 import {
   primary,
   rgbValuesPrimary,
@@ -16,6 +17,8 @@ type OptionsType = OptionType[];
 
 type ValueType = string | OptionType | OptionsType;
 
+type TouchedType = FormikTouched<any> | FormikTouched<any>[] | boolean;
+
 export type ThemedReactSelect = {
   options: OptionsType;
   disabled?: boolean;
@@ -25,7 +28,7 @@ export type ThemedReactSelect = {
   instanceId?: string;
   isMulti?: boolean;
   isSearchable?: boolean;
-  isTouched?: any[] | boolean;
+  isTouched?: TouchedType;
   name?: string;
   onBlur?: () => void;
   onChange?: (selected: any) => void;