@availity/mui-controlled-form 0.2.5 → 0.3.0

package/src/lib/Checkbox.stories.tsx

@@ -1,64 +1,71 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ControlledCheckbox } from './Checkbox';
-import { ControlledForm } from './ControlledForm';
+import { ControlledCheckbox, ControlledCheckboxProps } from './Checkbox';
 import { Button } from '@availity/mui-button';
-import { useFormContext } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { FormControlLabel, FormGroup, FormControl, FormLabel } from '@availity/mui-form-utils';
 import { Grid } from '@availity/mui-layout';
+import { AllControllerPropertiesCategorized, CheckboxPropsCategorized } from './Types';
 
 const meta: Meta<typeof ControlledCheckbox> = {
   title: 'Form Components/Controlled Form/ControlledCheckbox',
   component: ControlledCheckbox,
   tags: ['autodocs'],
+  argTypes: {...AllControllerPropertiesCategorized, ...CheckboxPropsCategorized},
+  parameters: {
+    controls: {
+      exclude: [
+        'form',
+        'formAction',
+        'formEncType',
+        'formMethod',
+        'formNoValidate',
+        'formTarget',
+        'key',
+        'max',
+        'maxLength',
+        'min',
+        'minLength',
+        'pattern',
+        'style',
+        'tabIndex'
+      ]
+    }
+  }
 };
 
 export default meta;
 
 export const _ControlledCheckbox: StoryObj<typeof ControlledCheckbox> = {
-  render: () => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+  render: (args: ControlledCheckboxProps) => {
+    const methods = useForm();
 
-      return isSubmitSuccessful ? (
-        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-          <Typography variant="h2">Submitted Values</Typography>
-          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
-        </Paper>
-      ) : null;
-    };
-
-    const Actions = () => {
-      const {
-        reset,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-      return (
-        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-          <Button disabled={!isSubmitSuccessful} children="Reset" color="secondary" onClick={() => reset()} />
-          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-        </Grid>
-      );
-    };
     return (
-      <ControlledForm onSubmit={(data) => data} values={{ controlledCheckbox: undefined }}>
-        <FormControl>
-          <FormLabel id="radio-group" component="div">
-            Radio Group
-          </FormLabel>
-          <FormGroup>
-            <FormControlLabel label="Option 1" control={<ControlledCheckbox name="Option 1" />} />
-            <FormControlLabel label="Option 2" control={<ControlledCheckbox name="Option 2" />} />
-            <FormControlLabel label="Option 3" control={<ControlledCheckbox name="Option 3" />} />
-          </FormGroup>
-        </FormControl>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <FormControl>
+            <FormLabel id="radio-group" component="div">
+              Radio Group
+            </FormLabel>
+            <FormGroup>
+              <FormControlLabel label="Option 1" control={<ControlledCheckbox {...args} />} />
+              <FormControlLabel label="Option 2" control={<ControlledCheckbox name="Option 2" />} />
+              <FormControlLabel label="Option 3" control={<ControlledCheckbox name="Option 3" />} />
+            </FormGroup>
+          </FormControl>
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          { methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null }
+        </form>
+      </FormProvider>
     );
   },
   args: {

package/src/lib/Checkbox.test.tsx

@@ -1,57 +1,25 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { FormControl, FormLabel, FormControlLabel, FormGroup } from '@availity/mui-form-utils';
-import { useFormContext } from 'react-hook-form';
-import { Paper } from '@availity/mui-paper';
-import { Typography } from '@availity/mui-typography';
-import { Grid } from '@availity/mui-layout';
-import { Button } from '@availity/mui-button';
-import { ControlledForm } from './ControlledForm';
 import { ControlledCheckbox } from './Checkbox';
-
-const SubmittedValues = () => {
-  const {
-    getValues,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  return isSubmitSuccessful ? (
-    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-      <Typography variant="h2">Submitted Values</Typography>
-      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
-    </Paper>
-  ) : null;
-};
-
-const Actions = () => {
-  const {
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-  return (
-    <Grid container direction="row" justifyContent="space-between">
-      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-    </Grid>
-  );
-};
+import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
 describe('ControlledCheckbox', () => {
   test('should set the value and submit the form data', async () => {
-    const screen = render(
-      <ControlledForm onSubmit={onSubmit} values={{ controlledCheckbox: undefined }}>
-        <FormControl>
-          <FormLabel id="radio-group" component="div">
-            Radio Group
-          </FormLabel>
-          <FormGroup>
-            <FormControlLabel label="Option 1" control={<ControlledCheckbox name="option1" />} />
-            <FormControlLabel label="Option 2" control={<ControlledCheckbox name="option2" />} />
-            <FormControlLabel label="Option 3" control={<ControlledCheckbox name="option3" />} />
-          </FormGroup>
-        </FormControl>
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      const screen = render(
+        <TestForm onSubmit={onSubmit} UseFormOptions={{values: { option1: undefined, option2: undefined, option3: undefined }}}>
+          <FormControl>
+            <FormLabel id="radio-group" component="div">
+              Radio Group
+            </FormLabel>
+            <FormGroup>
+              <FormControlLabel label="Option 1" control={<ControlledCheckbox name="option1" />} />
+              <FormControlLabel label="Option 2" control={<ControlledCheckbox name="option2" />} />
+              <FormControlLabel label="Option 3" control={<ControlledCheckbox name="option3" />} />
+            </FormGroup>
+          </FormControl>
+      </TestForm>
     );
 
     const option1 = screen.getByText('Option 1');

package/src/lib/Checkbox.tsx

@@ -1,37 +1,52 @@
 import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
-import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledCheckboxProps = CheckboxProps & {
-  name: string;
-} & Omit<
-    RegisterOptions<FieldValues, string>,
-    'required' | 'max' | 'maxLength' | 'min' | 'minLength' | 'pattern' | 'validate'
-  >;
+export type ControlledCheckboxProps = Omit<CheckboxProps,
+  'disabled' | 'onBlur' | 'onChange' | 'value' | 'name'
+> & Pick<RegisterOptions<FieldValues, string>,
+  'disabled' | 'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& Omit<DeprecatedRulesProps,
+| 'required'
+| 'max'
+| 'maxLength'
+| 'min'
+| 'minLength'
+| 'pattern'>;
 
 export const ControlledCheckbox = ({
   name,
-  setValueAs,
   disabled,
   onChange,
   onBlur,
   value,
+  defaultValue = false,
+  rules = {},
   shouldUnregister,
   deps,
+  validate,
   ...rest
 }: ControlledCheckboxProps) => {
-  const { register } = useFormContext();
   return (
-    <Checkbox
-      {...rest}
-      {...register(name, {
-        setValueAs,
-        disabled,
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      rules={{
         onChange,
         onBlur,
         value,
         shouldUnregister,
         deps,
-      })}
+        validate,
+        ...rules,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field }) => (
+        <Checkbox {...rest} {...field} checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />
+      )}
     />
   );
 };

package/src/lib/CodesAutocomplete.stories.tsx

@@ -1,19 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledCodesAutocomplete } from './CodesAutocomplete';
-import { ControlledForm } from './ControlledForm';
 import { Button } from '@availity/mui-button';
-import { useFormContext } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { missingRHFprops } from '../../docs/propDefinitions';
+import { AllControllerPropertiesCategorized, CodesAutocompletePropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledCodesAutocomplete> = {
   title: 'Form Components/Controlled Form/Autocomplete/ControlledCodesAutocomplete',
   component: ControlledCodesAutocomplete,
   tags: ['autodocs'],
-  argTypes: missingRHFprops,
+  argTypes: {...AllControllerPropertiesCategorized, ...CodesAutocompletePropsCategorized}
 };
 
 export default meta;
@@ -28,39 +27,25 @@ const client = new QueryClient({
 
 export const _ControlledCodesAutoComplete: StoryObj<typeof ControlledCodesAutocomplete> = {
   render: (args) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+    const methods = useForm();
 
-      return isSubmitSuccessful ? (
-        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-          <Typography variant="h2">Submitted Values</Typography>
-          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
-        </Paper>
-      ) : null;
-    };
-
-    const Actions = () => {
-      const {
-        reset,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-      return (
-        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-          <Button disabled={!isSubmitSuccessful} children="Reset" color="secondary" onClick={() => reset()} />
-          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-        </Grid>
-      );
-    };
     return (
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={(data) => data}>
-          <ControlledCodesAutocomplete {...args} />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit((data) => data)}>
+            <ControlledCodesAutocomplete {...args} />
+            <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+              <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+              <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+            </Grid>
+            { methods?.formState?.isSubmitSuccessful ? (
+              <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+                <Typography variant="h2">Submitted Values</Typography>
+                <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+              </Paper>
+            ) : null }
+          </form>
+        </FormProvider>
       </QueryClientProvider>
     );
   },
@@ -72,8 +57,9 @@ export const _ControlledCodesAutoComplete: StoryObj<typeof ControlledCodesAutoco
       helperText: 'Select a code from the list',
       placeholder: 'Select...',
       fullWidth: false,
+      required: true
     },
     limit: 15,
-    required: 'This is required.',
+    rules: { required:'This is required.' },
   },
 };

package/src/lib/CodesAutocomplete.test.tsx

@@ -1,39 +1,9 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Paper } from '@availity/mui-paper';
-import { Typography } from '@availity/mui-typography';
-import { useFormContext } from 'react-hook-form';
-import { Grid } from '@availity/mui-layout';
-import { Button } from '@availity/mui-button';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '@availity/mock/src/lib/server';
-import { ControlledForm } from './ControlledForm';
 import { ControlledCodesAutocomplete } from './CodesAutocomplete';
-
-const SubmittedValues = () => {
-  const {
-    getValues,
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-
-  return isSubmitSuccessful ? (
-    <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-      <Typography variant="h2">Submitted Values</Typography>
-      <pre data-testid="result">{JSON.stringify(getValues(), null, 2)}</pre>
-    </Paper>
-  ) : null;
-};
-
-const Actions = () => {
-  const {
-    formState: { isSubmitSuccessful },
-  } = useFormContext();
-  return (
-    <Grid container direction="row" justifyContent="space-between">
-      <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-    </Grid>
-  );
-};
+import { TestForm } from './UtilComponents';
 
 const onSubmit = jest.fn();
 
@@ -61,7 +31,7 @@ describe('ControlledAsyncAutocomplete', () => {
   test('should loadOptions successfully', async () => {
     const screen = render(
       <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
+        <TestForm onSubmit={onSubmit}>
           <ControlledCodesAutocomplete
             name="controlledCodesAutocomplete"
             list="ABC"
@@ -73,11 +43,9 @@ describe('ControlledAsyncAutocomplete', () => {
             }}
             limit={15}
           />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
-      </QueryClientProvider>
-    );
+      </TestForm>
+    </QueryClientProvider>
+  );
 
     const dropdown = screen.getByRole('combobox');
     fireEvent.click(dropdown);
@@ -87,23 +55,21 @@ describe('ControlledAsyncAutocomplete', () => {
   });
 
   test('should set the value and submit the form data', async () => {
-    const screen = render(
-      <QueryClientProvider client={client}>
-        <ControlledForm values={{}} onSubmit={onSubmit}>
-          <ControlledCodesAutocomplete
-            name="controlledCodesAutocomplete"
-            list="ABC"
-            FieldProps={{
-              label: 'Code Select',
-              helperText: 'Select a code from the list',
-              placeholder: 'Select...',
-              fullWidth: false,
-            }}
-            limit={15}
-          />
-          <Actions />
-          <SubmittedValues />
-        </ControlledForm>
+      const screen = render(
+        <QueryClientProvider client={client}>
+          <TestForm onSubmit={onSubmit}>
+            <ControlledCodesAutocomplete
+              name="controlledCodesAutocomplete"
+              list="ABC"
+              FieldProps={{
+                label: 'Code Select',
+                helperText: 'Select a code from the list',
+                placeholder: 'Select...',
+                fullWidth: false,
+              }}
+              limit={15}
+            />
+        </TestForm>
       </QueryClientProvider>
     );
 

package/src/lib/CodesAutocomplete.tsx

@@ -1,9 +1,14 @@
 import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, Controller, RegisterOptions, ControllerProps, FieldValues } from 'react-hook-form';
+import { Controller, RegisterOptions, FieldValues } from 'react-hook-form';
+import { ControllerProps, DeprecatedRulesProps } from './Types';
 
-export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'name'> &
-  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
-  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+export type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps,
+'onBlur' | 'onChange' | 'value' | 'name'
+> & Pick<RegisterOptions<FieldValues, string>,
+'onBlur' | 'onChange' | 'value'
+> & ControllerProps
+//TODO v1 - remove deprecated props
+& DeprecatedRulesProps;
 
 export const ControlledCodesAutocomplete = ({
   name,
@@ -15,18 +20,16 @@ export const ControlledCodesAutocomplete = ({
   onChange,
   pattern,
   required,
+  rules = {},
   shouldUnregister,
   validate,
   value,
   FieldProps,
   ...rest
 }: ControlledCodesAutocompleteProps) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={defaultValue}
       rules={{
         deps,
@@ -39,25 +42,25 @@ export const ControlledCodesAutocomplete = ({
         shouldUnregister,
         validate,
         value,
+        ...rules,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
         <CodesAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
-            required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
+            inputRef:ref
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {

package/src/lib/ControlledForm.stories.tsx

@@ -11,6 +11,7 @@ import { ControlledTextField } from './TextField';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+/** Deprecated. Use `FormProvider` and `useForm` directly. */
 const meta: Meta<typeof ControlledForm> = {
   title: 'Form Components/Controlled Form/ControlledForm',
   component: ControlledForm,

package/src/lib/ControlledForm.tsx

@@ -1,6 +1,7 @@
 import { FormHTMLAttributes } from 'react';
-import { useForm, SubmitHandler, FormProvider, Resolver } from 'react-hook-form';
+import { useForm, SubmitHandler, FormProvider, Resolver, UseFormProps } from 'react-hook-form';
 
+/** @deprecated Use `UseFormProps` directly with `useForm` and `FormProvider` */
 export type ControlledFormProps = {
   /** This function will receive the form data if form validation is successful. */
   onSubmit: SubmitHandler<any>;
@@ -13,6 +14,8 @@ export type ControlledFormProps = {
    * found here: https://github.com/react-hook-form/resolvers#quickstart
    */
   validationResolver?: (schema: unknown) => Resolver;
+  /** Additional react-hook-form `useForm` options, like `defaultValues` and validation `mode`. For more information see the [react-hook-form useForm docs](https://react-hook-form.com/docs/useform) */
+  additionalUseFormOptions?: Omit<UseFormProps, 'values' | 'resolver'>;
 } & FormHTMLAttributes<HTMLFormElement>;
 
 type UseFormOptions = {
@@ -20,8 +23,9 @@ type UseFormOptions = {
   resolver?: Resolver;
 };
 
-export const ControlledForm = ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => {
-  const useFormOptions: UseFormOptions = { values };
+/** @deprecated Use `FormProvider` and `useForm` directly. */
+export const ControlledForm = ({ onSubmit, values, schema, validationResolver, additionalUseFormOptions = {mode: 'onBlur'}, ...rest }: ControlledFormProps) => {
+  const useFormOptions: UseFormOptions = { values, ...additionalUseFormOptions };
   if (schema && validationResolver) {
     useFormOptions.resolver = validationResolver(schema);
   }
@@ -29,7 +33,7 @@ export const ControlledForm = ({ onSubmit, values, schema, validationResolver, .
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...rest} />
+      <form onSubmit={methods.handleSubmit(onSubmit)} noValidate {...rest} />
     </FormProvider>
   );
 };

package/src/lib/Datepicker.stories.tsx

@@ -1,54 +1,41 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ControlledDatepicker, ControlledDatepickerProps } from './Datepicker';
-import { ControlledForm } from './ControlledForm';
 import { Button } from '@availity/mui-button';
-import { useFormContext } from 'react-hook-form';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Grid } from '@availity/mui-layout';
+import { AllControllerPropertiesCategorized, DatepickerPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
 
 const meta: Meta<typeof ControlledDatepicker> = {
   title: 'Form Components/Controlled Form/ControlledDatepicker',
   component: ControlledDatepicker,
   tags: ['autodocs'],
+  argTypes: {...AllControllerPropertiesCategorized, ...DatepickerPropsCategorized}
 };
 
 export default meta;
 
 export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
   render: (args: ControlledDatepickerProps) => {
-    const SubmittedValues = () => {
-      const {
-        getValues,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
+    const methods = useForm();
 
-      return isSubmitSuccessful ? (
-        <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
-          <Typography variant="h2">Submitted Values</Typography>
-          <pre>{JSON.stringify(getValues(), null, 2)}</pre>
-        </Paper>
-      ) : null;
-    };
-
-    const Actions = () => {
-      const {
-        reset,
-        formState: { isSubmitSuccessful },
-      } = useFormContext();
-      return (
-        <Grid container direction="row" justifyContent="space-between" marginTop={1}>
-          <Button disabled={!isSubmitSuccessful} children="Reset" color="secondary" onClick={() => reset()} />
-          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
-        </Grid>
-      );
-    };
     return (
-      <ControlledForm values={{ controlledInput: undefined }} onSubmit={(data) => data}>
-        <ControlledDatepicker {...args} />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledDatepicker {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button disabled={!methods?.formState?.isSubmitSuccessful} children="Reset" color="secondary" onClick={() => methods.reset()} />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          { methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null }
+        </form>
+      </FormProvider>
     );
   },
   args: {