@availity/mui-controlled-form 0.1.0

package/src/lib/AsyncAutocomplete.test.tsx

@@ -0,0 +1,162 @@
+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';
+import AvApi, { ApiConfig } from '@availity/api-axios';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+import { ControlledForm } from './ControlledForm';
+import { ControlledAsyncAutocomplete } from './AsyncAutocomplete';
+
+const api = new AvApi({ name: 'example' } as ApiConfig);
+
+type Option = {
+  label: string;
+  value: number;
+};
+
+type ExampleResponse = {
+  totalCount: number;
+  options: Option[];
+  count: number;
+};
+
+const getResults = async (offset: number, limit: number) => {
+  // const offset = page * limit;
+  const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
+
+  return {
+    totalCount: resp.data.totalCount,
+    offset,
+    limit,
+    options: resp.data.options,
+    count: resp.data.count,
+  };
+};
+
+const loadOptions = async (offset: number, limit: number) => {
+  const { options, totalCount } = await getResults(offset, limit);
+
+  return {
+    options,
+    hasMore: offset + limit < totalCount,
+    offset,
+  };
+};
+
+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>
+  );
+};
+
+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={{ controlledAutocomplete: undefined }} onSubmit={(data) => data}>
+          <ControlledAsyncAutocomplete
+            name="controlledAsyncAutocomplete"
+            FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+            getOptionLabel={(val: Option) => val.label}
+            loadOptions={loadOptions}
+            limit={10}
+            queryKey="example"
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => expect(screen.getByText('Option 1')).toBeDefined());
+  });
+
+  test('should set the value and submit the form data', async () => {
+    const screen = render(
+      <QueryClientProvider client={client}>
+        <ControlledForm values={{ controlledAutocomplete: undefined }} onSubmit={onSubmit}>
+          <ControlledAsyncAutocomplete
+            name="controlledAsyncAutocomplete"
+            FieldProps={{ label: 'Async Select', helperText: 'Helper Text', fullWidth: false }}
+            getOptionLabel={(val: Option) => val.label}
+            loadOptions={loadOptions}
+            limit={10}
+            queryKey="example"
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => screen.getByText('Option 1'));
+
+    fireEvent.click(screen.getByText('Option 1'));
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledAsyncAutocompleteValue = JSON.parse(result.innerHTML).controlledAsyncAutocomplete;
+      expect(controlledAsyncAutocompleteValue.label).toBe('Option 1');
+      expect(controlledAsyncAutocompleteValue.value).toBe(1);
+      expect(controlledAsyncAutocompleteValue.id).toBeDefined(); // This is a unique id
+    });
+  });
+});

package/src/lib/AsyncAutocomplete.tsx

@@ -0,0 +1,92 @@
+import { AsyncAutocomplete, AsyncAutocompleteProps } from '@availity/mui-autocomplete';
+import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { ChipTypeMap } from '@mui/material/Chip';
+
+type ControlledAsyncAutocompleteProps<
+  Option,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name'> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledAsyncAutocomplete = <
+  Option,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+>({
+  name,
+  deps,
+  max,
+  maxLength,
+  min,
+  minLength,
+  onBlur,
+  onChange,
+  pattern,
+  required,
+  shouldUnregister,
+  validate,
+  value,
+  FieldProps,
+  ...rest
+}: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const errorMessage = errors[name]?.message;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      defaultValue={rest.defaultValue}
+      rules={{
+        deps,
+        max,
+        maxLength,
+        min,
+        minLength,
+        onBlur,
+        onChange,
+        pattern,
+        required,
+        shouldUnregister,
+        validate,
+        value,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, value, onBlur } }) => (
+        <AsyncAutocomplete
+          {...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/Autocomplete.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledAutocomplete } from './Autocomplete';
+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 ControlledAutocomplete> = {
+  title: 'Form Components/Controlled Form/Autocomplete/ControlledAutocomplete',
+  component: ControlledAutocomplete,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledAutoComplete: StoryObj<typeof ControlledAutocomplete> = {
+  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 (
+      <ControlledForm values={{ controlledAutocomplete: undefined }} onSubmit={(data) => data}>
+        <ControlledAutocomplete {...args} />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledAutocomplete',
+    options: ['Option 1', 'Option 2'],
+    required: 'This is required.',
+    FieldProps: { label: 'Autocomplete Label' },
+  },
+};

package/src/lib/Autocomplete.test.tsx

@@ -0,0 +1,70 @@
+import { fireEvent, render, 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 { ControlledForm } from './ControlledForm';
+import { ControlledAutocomplete } from './Autocomplete';
+
+const onSubmit = jest.fn();
+
+describe('ControlledAsyncAutocomplete', () => {
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    jest.restoreAllMocks();
+  });
+
+  test('should set the value and submit the form', async () => {
+    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>
+      );
+    };
+    const screen = render(
+      <ControlledForm values={{ controlledAutocomplete: undefined }} onSubmit={onSubmit}>
+        <ControlledAutocomplete name="controlledAutocomplete" options={['Option 1', 'Option 2']} />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    fireEvent.click(screen.getByText('Option 1'));
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledAutocompleteValue = JSON.parse(result.innerHTML).controlledAutocomplete;
+      expect(controlledAutocompleteValue).toBe('Option 1');
+    });
+  });
+});

package/src/lib/Autocomplete.tsx

@@ -0,0 +1,96 @@
+import { Autocomplete, AutocompleteProps } from '@availity/mui-autocomplete';
+import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { ChipTypeMap } from '@mui/material/Chip';
+
+export type ControlledAutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = Omit<
+  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
+  'onChange' | 'onBlur' | 'value' | 'name'
+> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledAutocomplete = <
+  T,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+>({
+  name,
+  FieldProps,
+  defaultValue,
+  deps,
+  max,
+  maxLength,
+  min,
+  minLength,
+  onBlur,
+  onChange,
+  pattern,
+  required,
+  shouldUnregister,
+  validate,
+  value,
+  ...rest
+}: ControlledAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const errorMessage = errors[name]?.message;
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValue}
+      rules={{
+        deps,
+        max,
+        maxLength,
+        min,
+        minLength,
+        onBlur,
+        onChange,
+        pattern,
+        required,
+        shouldUnregister,
+        validate,
+        value,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, value, onBlur } }) => (
+        <Autocomplete
+          {...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/Checkbox.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledCheckbox } from './Checkbox';
+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 { FormControlLabel, FormGroup, FormControl, FormLabel } from '@availity/mui-form-utils';
+import { Grid } from '@availity/mui-layout';
+
+const meta: Meta<typeof ControlledCheckbox> = {
+  title: 'Form Components/Controlled Form/ControlledCheckbox',
+  component: ControlledCheckbox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledCheckbox: StoryObj<typeof ControlledCheckbox> = {
+  render: () => {
+    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 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>
+    );
+  },
+  args: {
+    name: 'controlledCheckbox',
+  },
+};

package/src/lib/Checkbox.test.tsx

@@ -0,0 +1,73 @@
+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>
+  );
+};
+
+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 option1 = screen.getByText('Option 1');
+
+    fireEvent.click(option1);
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const formValues = JSON.parse(result.innerHTML);
+      expect(formValues.option1).toBeTruthy();
+      expect(formValues.option2).toBeFalsy();
+      expect(formValues.option3).toBeFalsy();
+    });
+  });
+});

package/src/lib/Checkbox.tsx

@@ -0,0 +1,37 @@
+import { Checkbox, CheckboxProps } from '@availity/mui-checkbox';
+import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+
+type ControlledCheckboxProps = CheckboxProps & {
+  name: string;
+} & Omit<
+    RegisterOptions<FieldValues, string>,
+    'required' | 'max' | 'maxLength' | 'min' | 'minLength' | 'pattern' | 'validate'
+  >;
+
+export const ControlledCheckbox = ({
+  name,
+  setValueAs,
+  disabled,
+  onChange,
+  onBlur,
+  value,
+  shouldUnregister,
+  deps,
+  ...rest
+}: ControlledCheckboxProps) => {
+  const { register } = useFormContext();
+  return (
+    <Checkbox
+      {...rest}
+      {...register(name, {
+        setValueAs,
+        disabled,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps,
+      })}
+    />
+  );
+};