@availity/mui-controlled-form 0.1.0

package/src/lib/Input.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledInput, ControlledInputProps } from './Input';
+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 ControlledInput> = {
+  title: 'Form Components/Controlled Form/ControlledInput',
+  component: ControlledInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _ControlledInput: StoryObj<typeof ControlledInput> = {
+  render: (args: ControlledInputProps) => {
+    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}>
+        <ControlledInput {...args} />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+  },
+  args: {
+    name: 'controlledInput',
+    required: true,
+    maxLength: { value: 10, message: 'Too long' },
+    inputProps: { 'aria-label': 'Input Label' },
+  },
+};

package/src/lib/Input.test.tsx

@@ -0,0 +1,98 @@
+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 { ControlledInput } from './Input';
+
+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('ControlledInput', () => {
+  test('should render the error styling if an error is returned', async () => {
+    const screen = render(
+      <ControlledForm values={{ controlledInput: undefined }} onSubmit={(data) => data}>
+        <ControlledInput
+          data-testid="controlledInputWrapper"
+          name="controlledInput"
+          required="This field is required."
+          maxLength={{ value: 10, message: 'Too long' }}
+          inputProps={{
+            'data-testid': 'testInput',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const input = screen.getByTestId('testInput');
+
+    fireEvent.change(input, { target: { value: 'This is way too much text' } });
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(0));
+
+    const muiInputBase = screen.getByTestId('controlledInputWrapper');
+
+    await waitFor(() => expect(muiInputBase.classList).toContain('Mui-error'));
+  });
+
+  test('should render the error styling if an error is returned', async () => {
+    const screen = render(
+      <ControlledForm values={{ controlledInput: undefined }} onSubmit={onSubmit}>
+        <ControlledInput
+          name="controlledInput"
+          required="This field is required."
+          maxLength={{ value: 10, message: 'Too long' }}
+          inputProps={{
+            'data-testid': 'testInput',
+          }}
+        />
+        <Actions />
+        <SubmittedValues />
+      </ControlledForm>
+    );
+
+    const input = screen.getByTestId('testInput');
+
+    fireEvent.change(input, { target: { value: 'Input 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).controlledInput;
+      expect(formValues).toBe('Input Text');
+    });
+  });
+});

package/src/lib/Input.tsx

@@ -0,0 +1,54 @@
+import { Input, InputProps } from '@availity/mui-form-utils';
+import { useFormContext, RegisterOptions, FieldValues } from 'react-hook-form';
+
+export type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & { name: string } & RegisterOptions<
+    FieldValues,
+    string
+  >;
+
+export const ControlledInput = ({
+  name,
+  required,
+  maxLength,
+  minLength,
+  max,
+  min,
+  pattern,
+  validate,
+  setValueAs,
+  disabled,
+  onChange,
+  onBlur,
+  value,
+  shouldUnregister,
+  deps,
+  ...rest
+}: ControlledInputProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+  return (
+    <Input
+      {...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/OrganizationAutocomplete.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledOrganizationAutocomplete } from './OrganizationAutocomplete';
+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 ControlledOrganizationAutocomplete> = {
+  title: 'Form Components/Controlled Form/Autocomplete/ControlledOrganizationAutocomplete',
+  component: ControlledOrganizationAutocomplete,
+  tags: ['autodocs'],
+  argTypes: missingRHFprops,
+};
+
+export default meta;
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const _ControlledOrganizationAutoComplete: StoryObj<typeof ControlledOrganizationAutocomplete> = {
+  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}>
+          <ControlledOrganizationAutocomplete {...args} />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    name: 'controlledOrganizationAutocomplete',
+    required: 'This is required.',
+    FieldProps: {
+      label: 'Organization Select',
+      helperText: 'Select an Organization from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+  },
+};

package/src/lib/OrganizationAutocomplete.test.tsx

@@ -0,0 +1,125 @@
+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 { ControlledOrganizationAutocomplete } from './OrganizationAutocomplete';
+
+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('ControlledOrganizationAutocomplete', () => {
+  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}>
+          <ControlledOrganizationAutocomplete
+            name="controlledOrganizationAutocomplete"
+            FieldProps={{
+              label: 'Organization Select',
+              helperText: 'Select an Organization from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => expect(screen.getByText('Organization 1')).toBeDefined());
+  });
+
+  test('should set the value and submit the form data', async () => {
+    const screen = render(
+      <QueryClientProvider client={client}>
+        <ControlledForm values={{}} onSubmit={onSubmit}>
+          <ControlledOrganizationAutocomplete
+            name="controlledOrganizationAutocomplete"
+            FieldProps={{
+              label: 'Organization Select',
+              helperText: 'Select an Organization from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => screen.getByText('Organization 1'));
+
+    fireEvent.click(screen.getByText('Organization 1'));
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledCodesAutocompleteValue = JSON.parse(result.innerHTML).controlledOrganizationAutocomplete;
+      expect(controlledCodesAutocompleteValue.customerId).toBe('1');
+      expect(controlledCodesAutocompleteValue.name).toBe('Organization 1');
+      expect(controlledCodesAutocompleteValue.id).toBeDefined();
+    });
+  });
+});

package/src/lib/OrganizationAutocomplete.tsx

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlledProviderAutocomplete } from './ProviderAutocomplete';
+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 ControlledProviderAutocomplete> = {
+  title: 'Form Components/Controlled Form/Autocomplete/ControlledProviderAutocomplete',
+  component: ControlledProviderAutocomplete,
+  tags: ['autodocs'],
+  argTypes: missingRHFprops,
+};
+
+export default meta;
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const _ControlledProviderAutoComplete: StoryObj<typeof ControlledProviderAutocomplete> = {
+  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={{ controlledAutocomplete: undefined }} onSubmit={(data) => data}>
+          <ControlledProviderAutocomplete {...args} />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    name: 'controlledProviderAutocomplete',
+    FieldProps: {
+      label: 'Provider Select',
+      helperText: 'Select a Provider from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+    limit: 10,
+    customerId: '1234',
+    required: 'This is required.',
+  },
+};

package/src/lib/ProviderAutocomplete.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 { ControlledProviderAutocomplete } from './ProviderAutocomplete';
+
+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('ControlledProviderAutocomplete', () => {
+  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}>
+          <ControlledProviderAutocomplete
+            name="controlledProviderAutocomplete"
+            FieldProps={{
+              label: 'Provider Select',
+              helperText: 'Select a Provider from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+            limit={10}
+            customerId="1234"
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => expect(screen.getByText('Provider 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}>
+          <ControlledProviderAutocomplete
+            name="controlledProviderAutocomplete"
+            FieldProps={{
+              label: 'Provider Select',
+              helperText: 'Select a Provider from the list',
+              placeholder: 'Select...',
+              fullWidth: false,
+            }}
+            limit={10}
+            customerId="1234"
+          />
+          <Actions />
+          <SubmittedValues />
+        </ControlledForm>
+      </QueryClientProvider>
+    );
+
+    const dropdown = screen.getByRole('combobox');
+    fireEvent.click(dropdown);
+    fireEvent.keyDown(dropdown, { key: 'ArrowDown' });
+
+    await waitFor(() => screen.getByText('Provider 1'));
+
+    fireEvent.click(screen.getByText('Provider 1'));
+
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledProviderAutocompleteValue = JSON.parse(result.innerHTML).controlledProviderAutocomplete;
+      expect(controlledProviderAutocompleteValue.uiDisplayName).toBe('Provider 1');
+      expect(controlledProviderAutocompleteValue.id).toBeDefined();
+    });
+  });
+});