@availity/mui-controlled-form 0.1.0

package/src/lib/ProviderAutocomplete.tsx

@@ -0,0 +1,80 @@
+import { ProviderAutocomplete, ProviderAutocompleteProps } from '@availity/mui-autocomplete';
+import { useFormContext, Controller, RegisterOptions, FieldValues, ControllerProps } from 'react-hook-form';
+
+type ControlledProviderAutocompleteProps = Omit<ProviderAutocompleteProps, 'name'> &
+  Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledProviderAutocomplete = ({
+  name,
+  defaultValue,
+  deps,
+  max,
+  maxLength,
+  min,
+  minLength,
+  onBlur,
+  onChange,
+  pattern,
+  required,
+  shouldUnregister,
+  validate,
+  value,
+  FieldProps,
+  ...rest
+}: ControlledProviderAutocompleteProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const errorMessage = errors[name]?.message;
+  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, onBlur } }) => (
+        <ProviderAutocomplete
+          {...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/RadioGroup.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledRadioGroup, ControlledRadioGroupProps } from './RadioGroup';
+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, Radio } from '@availity/mui-form-utils';
+import { Grid } from '@availity/mui-layout';
+
+const meta: Meta<typeof ControlledRadioGroup> = {
+  title: 'Form Components/Controlled Form/ControlledRadioGroup',
+  component: ControlledRadioGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledRadioGroup: StoryObj<typeof ControlledRadioGroup> = {
+  render: (args: ControlledRadioGroupProps) => {
+    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={{ controlledRadioGroup: 'N/A' }}>
+        <ControlledRadioGroup {...args}>
+          <FormControlLabel control={<Radio />} label="N/A" value="N/A" />
+          <FormControlLabel control={<Radio />} label="Yes" value="Yes" />
+          <FormControlLabel control={<Radio />} label="No" value="No" />
+        </ControlledRadioGroup>
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledRadioGroup',
+    label: 'Radio Group',
+  },
+};

package/src/lib/RadioGroup.test.tsx

@@ -0,0 +1,66 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { FormControlLabel, Radio } 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 { ControlledRadioGroup } from './RadioGroup';
+
+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('ControlledRadioGroup', () => {
+  test('should set the value and submit the form data', async () => {
+    const screen = render(
+      <ControlledForm onSubmit={onSubmit} values={{ controlledRadioGroup: undefined }}>
+        <ControlledRadioGroup name="controlledRadioGroup" label="Radio Group" value="N/A">
+          <FormControlLabel control={<Radio />} label="N/A" value="N/A" />
+          <FormControlLabel control={<Radio />} label="Yes" value="Yes" />
+          <FormControlLabel control={<Radio />} label="No" value="No" />
+        </ControlledRadioGroup>
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const option1 = screen.getByDisplayValue('Yes');
+
+    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).controlledRadioGroup;
+      expect(formValues).toBe('Yes');
+    });
+  });
+});

package/src/lib/RadioGroup.tsx

@@ -0,0 +1,68 @@
+import { RadioGroup, RadioGroupProps } from '@availity/mui-form-utils';
+import { useFormContext, ControllerProps, Controller, RegisterOptions, FieldValues } from 'react-hook-form';
+import { FormControl, FormLabel, FormHelperText } from '@availity/mui-form-utils';
+
+export type ControlledRadioGroupProps = RadioGroupProps & {
+  name: string;
+  label: string;
+  helperText?: string;
+} & Omit<
+    RegisterOptions<FieldValues, string>,
+    | 'disabled'
+    | 'valueAsNumber'
+    | 'valueAsDate'
+    | 'setValueAs'
+    | 'max'
+    | 'maxLength'
+    | 'min'
+    | 'minLength'
+    | 'pattern'
+    | 'validate'
+  > &
+  Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
+
+export const ControlledRadioGroup = ({
+  name,
+  helperText,
+  label,
+  defaultValue,
+  deps,
+  onBlur,
+  onChange,
+  required,
+  shouldUnregister,
+  value,
+  ...rest
+}: ControlledRadioGroupProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const errorMessage = errors[name]?.message;
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValue}
+      rules={{ deps, onBlur, onChange, required, shouldUnregister, value }}
+      shouldUnregister={shouldUnregister}
+      render={({ field }) => (
+        <FormControl error={!!errorMessage}>
+          <FormLabel>{label}</FormLabel>
+          <RadioGroup {...field} {...rest} />
+          <FormHelperText>
+            {errorMessage && typeof errorMessage === 'string' ? (
+              <>
+                {errorMessage}
+                <br />
+                {helperText}
+              </>
+            ) : (
+              helperText
+            )}
+          </FormHelperText>
+        </FormControl>
+      )}
+    />
+  );
+};

package/src/lib/Select.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledSelect } from './Select';
+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 { MenuItem } from '@availity/mui-menu';
+import { FormControl, FormLabel } from '@availity/mui-form-utils';
+
+const meta: Meta<typeof ControlledSelect> = {
+  title: 'Form Components/Controlled Form/ControlledSelect',
+  component: ControlledSelect,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledSelect: StoryObj<typeof ControlledSelect> = {
+  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({ controlledSelect: undefined })}
+          />
+          <Button type="submit" disabled={isSubmitSuccessful} children="Submit" />
+        </Grid>
+      );
+    };
+
+    return (
+      <ControlledForm values={{ controlledSelect: undefined }} onSubmit={(data) => data}>
+        <FormControl>
+          <FormLabel id={`${args.id}-label`}>{args.label}</FormLabel>
+          <ControlledSelect {...args} labelId={`${args.id}-label`}>
+            <MenuItem value={1}>Option 1</MenuItem>
+            <MenuItem value={2}>Option 2</MenuItem>
+            <MenuItem value={3}>Option 3</MenuItem>
+          </ControlledSelect>
+          <Actions />
+          <SubmittedValues />
+        </FormControl>
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledSelect',
+    required: 'This is required.',
+    label: 'Select Label',
+  },
+};

package/src/lib/Select.test.tsx

@@ -0,0 +1,68 @@
+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 { ControlledForm } from './ControlledForm';
+import { ControlledSelect } from './Select';
+import { MenuItem } from '@availity/mui-menu';
+
+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('ControlledSelect', () => {
+  test('should render the error styling if an error is returned', async () => {
+    const screen = render(
+      <ControlledForm values={{ controlledSelect: undefined }} onSubmit={onSubmit}>
+        <ControlledSelect name="controlledSelect">
+          <MenuItem value={1}>Option 1</MenuItem>
+          <MenuItem value={2}>Option 2</MenuItem>
+          <MenuItem value={3}>Option 3</MenuItem>
+        </ControlledSelect>
+        <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 controlledSelectValue = JSON.parse(result.innerHTML).controlledSelect;
+      expect(controlledSelectValue).toBe(1);
+    });
+  });
+});

package/src/lib/Select.tsx

@@ -0,0 +1,55 @@
+import { Select, SelectProps } from '@availity/mui-form-utils';
+import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+
+type ControlledSelectProps = Omit<SelectProps, 'error' | 'required'> & { name: string } & RegisterOptions<
+    FieldValues,
+    string
+  >;
+
+export const ControlledSelect = ({
+  name,
+  required,
+  maxLength,
+  minLength,
+  max,
+  min,
+  pattern,
+  validate,
+  setValueAs,
+  disabled,
+  onChange,
+  onBlur,
+  value,
+  shouldUnregister,
+  deps,
+  ...rest
+}: ControlledSelectProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <Select
+      {...rest}
+      error={!!errors[name]}
+      required={!!required}
+      {...register(name, {
+        required,
+        maxLength,
+        minLength,
+        max,
+        min,
+        pattern,
+        validate,
+        setValueAs,
+        disabled,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps,
+      })}
+    />
+  );
+};

package/src/lib/TextField.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledTextField, ControlledTextFieldProps } from './TextField';
+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 ControlledTextField> = {
+  title: 'Form Components/Controlled Form/ControlledTextField',
+  component: ControlledTextField,
+  tags: ['autodocs'],
+  argTypes: {
+    helperText: {
+      type: 'string',
+    },
+  },
+};
+
+export default meta;
+
+export const _ControlledTextField: StoryObj<typeof ControlledTextField> = {
+  render: (args: ControlledTextFieldProps) => {
+    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={{ controlledTextField: undefined }} onSubmit={(data) => data}>
+        <ControlledTextField {...args} />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledTextField',
+    helperText: 'This is some helper text',
+    placeholder: 'Name',
+    required: 'This field is required.',
+    maxLength: { value: 10, message: 'Too long' },
+    label: 'TextField Label',
+  },
+};

package/src/lib/TextField.test.tsx

@@ -0,0 +1,99 @@
+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 { ControlledForm } from './ControlledForm';
+import { ControlledTextField } from './TextField';
+
+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('ControlledTextField', () => {
+  test('should render the error styling if an error is returned', async () => {
+    const screen = render(
+      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={(data) => data}>
+        <ControlledTextField
+          name="controlledTextField"
+          helperText="This is some helper text"
+          placeholder="Name"
+          required="This field is required."
+          maxLength={{ value: 10, message: 'Too long' }}
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const input = screen.getByTestId('testTextField');
+
+    fireEvent.change(input, { target: { value: 'This is way too much text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+
+    await waitFor(() => expect(screen.findByText('Too long')).toBeDefined());
+  });
+
+  test('should render the error styling if an error is returned', async () => {
+    const screen = render(
+      <ControlledForm values={{ controlledTextField: undefined }} onSubmit={onSubmit}>
+        <ControlledTextField
+          name="controlledTextField"
+          helperText="This is some helper text"
+          placeholder="Name"
+          required="This field is required."
+          maxLength={{ value: 10, message: 'Too long' }}
+          inputProps={{
+            'data-testid': 'testTextField',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const input = screen.getByTestId('testTextField');
+
+    fireEvent.change(input, { target: { value: 'Some Text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const formValues = JSON.parse(result.innerHTML).controlledTextField;
+      expect(formValues).toBe('Some Text');
+    });
+  });
+});