@availity/mui-controlled-form 0.3.2 → 1.0.0

package/src/lib/ControlledForm.stories.tsx

@@ -1,76 +0,0 @@
-// 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';
-
-/** Deprecated. Use `FormProvider` and `useForm` directly. */
-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="Enter your name"
-          label="Name"
-          inputProps={{
-            'data-testid': 'testTextField',
-          }}
-        />
-        <Actions />
-        <SubmittedValues />
-      </ControlledForm>
-    );
-  },
-  args: {
-    values: { controlledTextField: undefined },
-    onSubmit: (data) => data,
-  },
-};

package/src/lib/ControlledForm.test.tsx

@@ -1,77 +0,0 @@
-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

@@ -1,39 +0,0 @@
-import { FormHTMLAttributes } from 'react';
-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>;
-  /** 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;
-  /** 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 = {
-  values: Record<string, any>;
-  resolver?: Resolver;
-};
-
-/** @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);
-  }
-  const methods = useForm(useFormOptions);
-
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} noValidate {...rest} />
-    </FormProvider>
-  );
-};