@availity/mui-controlled-form 0.1.0

package/src/lib/CodesAutocomplete.stories.tsx

@@ -0,0 +1,79 @@
+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';
+
+const meta: Meta<typeof ControlledCodesAutocomplete> = {
+  title: 'Form Components/Controlled Form/Autocomplete/ControlledCodesAutocomplete',
+  component: ControlledCodesAutocomplete,
+  tags: ['autodocs'],
+  argTypes: missingRHFprops,
+};
+
+export default meta;
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const _ControlledCodesAutoComplete: StoryObj<typeof ControlledCodesAutocomplete> = {
+  render: (args) => {
+    const SubmittedValues = () => {
+      const {
+        getValues,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+
+      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>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    name: 'controlledCodesAutocomplete',
+    list: 'ABC',
+    FieldProps: {
+      label: 'Code Select',
+      helperText: 'Select a code from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+    limit: 15,
+    required: 'This is required.',
+  },
+};

package/src/lib/CodesAutocomplete.test.tsx

@@ -0,0 +1,128 @@
+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>
+  );
+};
+
+const onSubmit = jest.fn();
+
+describe('ControlledAsyncAutocomplete', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+  });
+
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+
+  test('should loadOptions successfully', 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>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => expect(screen.getByText('171100000X - Acupuncturist')).toBeDefined());
+  });
+
+  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>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => screen.getByText('171100000X - Acupuncturist'));
+
+    fireEvent.click(screen.getByText('171100000X - Acupuncturist'));
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledCodesAutocompleteValue = JSON.parse(result.innerHTML).controlledCodesAutocomplete;
+      expect(controlledCodesAutocompleteValue.code).toBe('171100000X');
+      expect(controlledCodesAutocompleteValue.value).toBe('Acupuncturist');
+    });
+  });
+});

package/src/lib/CodesAutocomplete.tsx

@@ -0,0 +1,76 @@
+import { CodesAutocomplete, CodesAutocompleteProps } from '@availity/mui-autocomplete';
+import { useFormContext, Controller, RegisterOptions, ControllerProps, FieldValues } from 'react-hook-form';
+
+type ControlledCodesAutocompleteProps = Omit<CodesAutocompleteProps, 'name'> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledCodesAutocomplete = ({
+  name,
+  defaultValue,
+  deps,
+  max,
+  maxLength,
+  onBlur,
+  onChange,
+  pattern,
+  required,
+  shouldUnregister,
+  validate,
+  value,
+  FieldProps,
+  ...rest
+}: ControlledCodesAutocompleteProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const errorMessage = errors[name]?.message;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      defaultValue={defaultValue}
+      rules={{
+        deps,
+        max,
+        maxLength,
+        onBlur,
+        onChange,
+        pattern,
+        required,
+        shouldUnregister,
+        validate,
+        value,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, value, onBlur } }) => (
+        <CodesAutocomplete
+          {...rest}
+          FieldProps={{
+            ...FieldProps,
+            error: !!errorMessage,
+            helperText:
+              errorMessage && typeof errorMessage === 'string' ? (
+                <>
+                  {errorMessage}
+                  <br />
+                  {FieldProps?.helperText}
+                </>
+              ) : (
+                FieldProps?.helperText
+              ),
+          }}
+          onChange={(event, value, reason) => {
+            if (reason === 'clear') {
+              onChange(null);
+            }
+            onChange(value);
+          }}
+          onBlur={onBlur}
+          value={value || null}
+        />
+      )}
+    />
+  );
+};

package/src/lib/ControlledForm.stories.tsx

@@ -0,0 +1,74 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+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, ControlledFormProps } from './ControlledForm';
+import { ControlledTextField } from './TextField';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+const meta: Meta<typeof ControlledForm> = {
+  title: 'Form Components/Controlled Form/ControlledForm',
+  component: ControlledForm,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledForm: StoryObj<typeof ControlledForm> = {
+  render: ({ values, onSubmit, ...args }: ControlledFormProps) => {
+    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 {
+        reset,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+      return (
+        <Grid container direction="row" justifyContent="space-between">
+          <Button disabled={!isSubmitSuccessful} children="Reset" color="secondary" onClick={() => reset()} />
+          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+        </Grid>
+      );
+    };
+    return (
+      <ControlledForm
+        values={values}
+        onSubmit={onSubmit}
+        schema={yup.object({ controlledTextField: yup.string().max(10) })}
+        validationResolver={yupResolver}
+        {...args}
+      >
+        <ControlledTextField
+          name="controlledTextField"
+          placeholder="Name"
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    values: { controlledTextField: undefined },
+    onSubmit: (data) => data,
+  },
+};

package/src/lib/ControlledForm.test.tsx

@@ -0,0 +1,77 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import * as yup from 'yup';
+import { ControlledForm } from './ControlledForm';
+import { ControlledTextField } from './TextField';
+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 { yupResolver } from '@hookform/resolvers/yup';
+
+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>
+  );
+};
+
+const onSubmit = jest.fn();
+
+describe('ControlledForm', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <ControlledForm onSubmit={(data) => data} values={{}}>
+        Test
+      </ControlledForm>
+    );
+    expect(getByText('Test')).toBeTruthy();
+  });
+  test('should handle yup schema resolver', async () => {
+    const screen = render(
+      <ControlledForm
+        values={{ controlledTextField: undefined }}
+        onSubmit={onSubmit}
+        schema={yup.object({ controlledTextField: yup.string().max(10) })}
+        validationResolver={yupResolver}
+      >
+        <ControlledTextField
+          name="controlledTextField"
+          placeholder="Name"
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const input = screen.getByTestId('testTextField');
+
+    fireEvent.change(input, { target: { value: 'This is too much text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+    await waitFor(() => expect(screen.findByText('controlledTextField must be at most 10 characters')).toBeDefined());
+  });
+});

package/src/lib/ControlledForm.tsx

@@ -0,0 +1,35 @@
+import { FormHTMLAttributes } from 'react';
+import { useForm, SubmitHandler, FormProvider, Resolver } from 'react-hook-form';
+
+export type ControlledFormProps = {
+  /** This function will receive the form data if form validation is successful. */
+  onSubmit: SubmitHandler<any>;
+  /** Reactive values to update the form values. */
+  values: Record<string, any>;
+  /** The schema used by the validationResolver. */
+  schema?: unknown;
+  /** Integrates with your preferred schema validation library.
+   * More information on react-hook-form's resolvers can be
+   * found here: https://github.com/react-hook-form/resolvers#quickstart
+   */
+  validationResolver?: (schema: unknown) => Resolver;
+} & FormHTMLAttributes<HTMLFormElement>;
+
+type UseFormOptions = {
+  values: Record<string, any>;
+  resolver?: Resolver;
+};
+
+export const ControlledForm = ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => {
+  const useFormOptions: UseFormOptions = { values };
+  if (schema && validationResolver) {
+    useFormOptions.resolver = validationResolver(schema);
+  }
+  const methods = useForm(useFormOptions);
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)} {...rest} />
+    </FormProvider>
+  );
+};

package/src/lib/Datepicker.stories.tsx

@@ -0,0 +1,63 @@
+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';
+
+const meta: Meta<typeof ControlledDatepicker> = {
+  title: 'Form Components/Controlled Form/ControlledDatepicker',
+  component: ControlledDatepicker,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledInput: StoryObj<typeof ControlledDatepicker> = {
+  render: (args: ControlledDatepickerProps) => {
+    const SubmittedValues = () => {
+      const {
+        getValues,
+        formState: { isSubmitSuccessful },
+      } = useFormContext();
+
+      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>
+    );
+  },
+  args: {
+    name: 'controlledDatepicker',
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Date',
+    },
+  },
+};

package/src/lib/Datepicker.test.tsx

@@ -0,0 +1,73 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+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 { ThemeProvider } from '@availity/theme-provider';
+import dayjs from 'dayjs';
+import { ControlledForm } from './ControlledForm';
+import { ControlledDatepicker } from './Datepicker';
+
+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>
+  );
+};
+
+const onSubmit = jest.fn();
+
+describe('Datepicker', () => {
+  test('should render successfully and submit selection', async () => {
+    const screen = render(
+      <ThemeProvider>
+        <ControlledForm values={{ controlledDatepicker: undefined }} onSubmit={onSubmit}>
+          <ControlledDatepicker
+            name="controlledDatepicker"
+            FieldProps={{
+              fullWidth: false,
+              helperText: 'Help text for the field',
+              helpTopicId: '1234',
+              label: 'Date',
+            }}
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </ThemeProvider>
+    );
+    expect(screen.getAllByText('Date')).toBeTruthy();
+    const input = screen.getByLabelText('Choose date');
+    fireEvent.click(input);
+    const date = screen.getAllByRole('gridcell');
+    fireEvent.click(date[7]); // The 8th gridcell will always be a day because it is the first day of the second week of the month.
+
+    fireEvent.click(screen.getByText('Submit'));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledDatepickerValue = JSON.parse(result.innerHTML).controlledDatepicker;
+      expect(controlledDatepickerValue).toBeDefined();
+      expect(dayjs(controlledDatepickerValue).isValid()).toBeTruthy();
+    });
+  }, 10000);
+});

package/src/lib/Datepicker.tsx

@@ -0,0 +1,49 @@
+import { Datepicker, DatepickerProps } from '@availity/mui-datepicker';
+import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+
+export type ControlledDatepickerProps = DatepickerProps &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledDatepicker = ({
+  name,
+  defaultValue,
+  deps,
+  max,
+  maxLength,
+  min,
+  minLength,
+  onBlur,
+  onChange,
+  pattern,
+  required,
+  shouldUnregister,
+  validate,
+  value,
+  ...rest
+}: ControlledDatepickerProps) => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      name={name}
+      control={control}
+      defaultValue={defaultValue}
+      rules={{
+        deps,
+        max,
+        maxLength,
+        min,
+        minLength,
+        onBlur,
+        onChange,
+        pattern,
+        required,
+        shouldUnregister,
+        validate,
+        value,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, value } }) => <Datepicker {...rest} onChange={onChange} value={value || null} />}
+    />
+  );
+};