refactor(form): migrate Form from Flow to TypeScript

src/components/form-elements/form/Form.js → src/components/form-elements/form/Form.js.flow

@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+// @flow
+import * as React from 'react';
 import serialize from 'form-serialize';
 
 import { FormContext } from './FormContext';
 
-function getFormValidityState(form) {
+function getFormValidityState(form: any) {
     // Turn the form.elements HTMLCollection into Array before reducing
     return [].slice.call(form.elements).reduce((validityObj, inputEl) => {
         // Only serialize inputs that have a name defined
@@ -26,28 +26,16 @@ function getFormValidityState(form) {
     }, {});
 }
 
-class Form extends Component {
-    static propTypes = {
-        children: PropTypes.node,
-        /** Called when an input in the form changes */
-        onChange: PropTypes.func,
-        /** Called when a valid submit is made */
-        onValidSubmit: PropTypes.func.isRequired,
-        /** Called when an invalid submit is made */
-        onInvalidSubmit: PropTypes.func,
-        /** An object mapping input names to error messages */
-        formValidityState: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
-    };
-
-    constructor(props) {
+class Form extends React.Component<any, any> {
+    constructor(props: any) {
         super(props);
 
         this.state = {
             registeredInputs: {},
         };
     }
 
-    componentDidUpdate({ formValidityState: prevFormValidityState }) {
+    componentDidUpdate({ formValidityState: prevFormValidityState }: any) {
         const { formValidityState } = this.props;
         const { registeredInputs } = this.state;
 
@@ -60,7 +48,7 @@ class Form extends Component {
         }
     }
 
-    onChange = ({ currentTarget }) => {
+    onChange = ({ currentTarget }: any) => {
         if (this.props.onChange) {
             const formData = serialize(currentTarget, {
                 hash: true,
@@ -70,7 +58,7 @@ class Form extends Component {
         }
     };
 
-    onSubmit = event => {
+    onSubmit = (event: any) => {
         const form = event.target;
         event.preventDefault();
         const isValid = form.checkValidity();
@@ -94,7 +82,7 @@ class Form extends Component {
         }
     };
 
-    registerInput = (name, setValidityStateHandler) => {
+    registerInput = (name: string, setValidityStateHandler: Function) => {
         const { registeredInputs } = this.state;
 
         if (registeredInputs[name]) {
@@ -106,7 +94,7 @@ class Form extends Component {
         this.setState(nextState);
     };
 
-    unregisterInput = name => {
+    unregisterInput = (name: string) => {
         const nextState = this.state;
         delete nextState.registeredInputs[name];
         this.setState(nextState);

src/components/form-elements/form/Form.stories.js → src/components/form-elements/form/Form.stories.tsx

@@ -1,23 +1,22 @@
-// @flow
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as React from 'react';
 
-import Button from '../../button/Button';
+import Button, { ButtonType } from '../../button/Button';
 import Select from '../../select/Select';
 import TextArea from '../text-area/TextArea';
 import TextInput from '../text-input/TextInput';
 import Toggle from '../../toggle/Toggle';
 
-import Form from './Form';
+import Form, { FormSerializedData, FormValidityStateMap } from './Form';
 import notes from './Form.stories.md';
 
 export const basic = () => {
-    const [formData, setFormData] = React.useState({
+    const [formData, setFormData] = React.useState<FormSerializedData>({
         showtextareatoggle: '',
     });
-    const [formValidityState, setFormValidityState] = React.useState({});
+    const [formValidityState, setFormValidityState] = React.useState<FormValidityStateMap>({});
 
-    const customValidationFunc = value => {
+    const customValidationFunc = (value: string) => {
         if (value !== 'box') {
             return {
                 code: 'notbox',
@@ -91,7 +90,7 @@ export const basic = () => {
                 ) : null}
             </div>
 
-            <Button type="submit">Submit</Button>
+            <Button type={ButtonType.SUBMIT}>Submit</Button>
         </Form>
     );
 };

src/components/form-elements/form/Form.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+// @ts-ignore no types for form-serialize
+import serialize from 'form-serialize';
+
+import { FormContext } from './FormContext';
+
+export type FormSerializedData = Record<string, unknown>;
+
+export type FormInputValidityState = ValidityState & {
+    customErrorCode?: string;
+};
+
+export interface FormFieldValidityState {
+    /** Server-side error code */
+    code?: string;
+    /** Server-side error message */
+    message?: string;
+    /** HTML constraint-validation state from an invalid named input */
+    validityState?: FormInputValidityState;
+}
+
+export type FormValidityStateMap = Record<string, FormFieldValidityState | null | undefined>;
+
+export interface FormProps {
+    /** Form fields and other child content */
+    children?: React.ReactNode;
+    /** An object mapping input names to error messages */
+    formValidityState?: FormValidityStateMap;
+    /** Called when an input in the form changes */
+    onChange?: (formData: FormSerializedData) => void;
+    /** Called when an invalid submit is made */
+    onInvalidSubmit?: (formValidityState: FormValidityStateMap) => void;
+    /** Called when a valid submit is made */
+    onValidSubmit: (formData: FormSerializedData) => void;
+}
+
+interface FormState {
+    registeredInputs: Record<string, (validityState: unknown) => void>;
+}
+
+function getFormValidityState(form: HTMLFormElement): FormValidityStateMap {
+    // Turn the form.elements HTMLCollection into Array before reducing
+    return [].slice.call(form.elements).reduce((validityObj: FormValidityStateMap, inputEl: HTMLInputElement) => {
+        // Only serialize inputs that have a name defined
+        if (inputEl.name && !inputEl.validity.valid) {
+            const validityState = inputEl.validity as FormInputValidityState;
+
+            if (inputEl.validity.customError) {
+                // If the input is displaying a custom error,
+                // we expose the errorCode stored in the validationMessage
+                validityState.customErrorCode = inputEl.validationMessage;
+            }
+
+            validityObj[inputEl.name] = {
+                validityState,
+            };
+            return validityObj;
+        }
+        return validityObj;
+    }, {});
+}
+
+class Form extends React.Component<FormProps, FormState> {
+    constructor(props: FormProps) {
+        super(props);
+
+        this.state = {
+            registeredInputs: {},
+        };
+    }
+
+    componentDidUpdate({ formValidityState: prevFormValidityState }: FormProps) {
+        const { formValidityState } = this.props;
+        const { registeredInputs } = this.state;
+
+        if (formValidityState !== prevFormValidityState) {
+            Object.keys(formValidityState).forEach(key => {
+                if (registeredInputs[key]) {
+                    registeredInputs[key](formValidityState[key]);
+                }
+            });
+        }
+    }
+
+    onChange = ({ currentTarget }: React.FormEvent<HTMLFormElement>) => {
+        if (this.props.onChange) {
+            const formData = serialize(currentTarget, {
+                hash: true,
+                empty: true,
+            });
+            this.props.onChange(formData);
+        }
+    };
+
+    onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        const form = event.target as HTMLFormElement;
+        event.preventDefault();
+        const isValid = form.checkValidity();
+        const { onInvalidSubmit, onValidSubmit } = this.props;
+        const { registeredInputs } = this.state;
+
+        if (isValid) {
+            const formData = serialize(form, { hash: true, empty: true });
+            onValidSubmit(formData);
+        } else {
+            const formValidityState = getFormValidityState(form);
+
+            // Push form validity state to inputs so errors are shown on submit
+            Object.keys(formValidityState).forEach(
+                key => registeredInputs[key] && registeredInputs[key](formValidityState[key].validityState),
+            );
+
+            if (onInvalidSubmit) {
+                onInvalidSubmit(formValidityState);
+            }
+        }
+    };
+
+    registerInput = (name: string, setValidityStateHandler: (validityState: unknown) => void) => {
+        const { registeredInputs } = this.state;
+
+        if (registeredInputs[name]) {
+            throw new Error(`Input '${name}' is already registered.`);
+        }
+
+        const nextState = this.state;
+        nextState.registeredInputs[name] = setValidityStateHandler;
+        this.setState(nextState);
+    };
+
+    unregisterInput = (name: string) => {
+        const nextState = this.state;
+        delete nextState.registeredInputs[name];
+        this.setState(nextState);
+    };
+
+    render() {
+        const { children } = this.props;
+        return (
+            <FormContext.Provider
+                value={{
+                    form: {
+                        registerInput: this.registerInput,
+                        unregisterInput: this.unregisterInput,
+                    },
+                }}
+            >
+                <form noValidate onChange={this.onChange} onSubmit={this.onSubmit}>
+                    {children}
+                </form>
+            </FormContext.Provider>
+        );
+    }
+}
+
+export default Form;

src/components/form-elements/form/FormContext.js.flow

@@ -0,0 +1,6 @@
+// @flow
+import * as React from 'react';
+
+export const FormContext = React.createContext<any>(null);
+
+FormContext.displayName = 'FormContext';

src/components/form-elements/form/FormContext.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface FormContextValue {
+    form?: {
+        /** Registers a named input so the form can push validity updates */
+        registerInput: (name: string, setValidityStateHandler: (validityState: unknown) => void) => void;
+        /** Unregisters a previously registered named input */
+        unregisterInput: (name: string) => void;
+    };
+}
+
+export const FormContext = React.createContext<FormContextValue | null>(null);
+
+FormContext.displayName = 'FormContext';

src/components/form-elements/form/FormInput.js → src/components/form-elements/form/FormInput.js.flow

@@ -1,17 +1,9 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+// @flow
+import * as React from 'react';
 
 import { FormContext } from './FormContext';
 
-class FormInput extends Component {
-    static propTypes = {
-        children: PropTypes.node.isRequired,
-        /** callback called when Form pushed down a new validityState, useful for displaying server validation errors */
-        onValidityStateUpdate: PropTypes.func.isRequired,
-        /** Input name */
-        name: PropTypes.string.isRequired,
-    };
-
+class FormInput extends React.Component<any> {
     componentDidMount() {
         const { name, onValidityStateUpdate } = this.props;
         const formContext = this.context;
@@ -33,6 +25,7 @@ class FormInput extends Component {
     }
 }
 
+// $FlowFixMe contextType is supported at runtime
 FormInput.contextType = FormContext;
 
 export default FormInput;

src/components/form-elements/form/FormInput.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { FormContext } from './FormContext';
+import type { FormContextValue } from './FormContext';
+
+export interface FormInputProps {
+    /** Input (or other field) registered with the parent form */
+    children: React.ReactNode;
+    /** Input name */
+    name: string;
+    /** Called when Form pushes down a new validityState, useful for displaying server validation errors */
+    onValidityStateUpdate: (validityState: unknown) => void;
+}
+
+class FormInput extends React.Component<FormInputProps> {
+    static contextType = FormContext;
+
+    componentDidMount() {
+        const { name, onValidityStateUpdate } = this.props;
+        const formContext = this.context as FormContextValue | null;
+
+        if (formContext?.form) {
+            formContext.form.registerInput(name, onValidityStateUpdate);
+        }
+    }
+
+    componentWillUnmount() {
+        const formContext = this.context as FormContextValue | null;
+        if (formContext?.form) {
+            formContext.form.unregisterInput(this.props.name);
+        }
+    }
+
+    render() {
+        return <div>{this.props.children}</div>;
+    }
+}
+
+export default FormInput;