feat(useFormContext): migrate V6 to V7: register & formState errors

Added useFormContext variant to the codemod

Author: jorisre

transforms/__testfixtures__/v7/move-errors-to-formState/already-migrated-context.input.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { formState: {
+    errors,
+  } } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/already-migrated-context.output.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { formState: {
+    errors,
+  } } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/function-component-context.input.js

@@ -0,0 +1,13 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { errors } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/function-component-context.output.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { formState: {
+    errors,
+  } } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-custom-errors-context.input.js

@@ -0,0 +1,13 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { errors: customErrors } = useFormContext();
+
+  return (
+    <form>
+      <span>{customErrors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-custom-errors-context.output.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { formState: {
+    errors: customErrors,
+  } } = useFormContext();
+
+  return (
+    <form>
+      <span>{customErrors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-1-context.input.js

@@ -0,0 +1,13 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { errors, formState: { isDirty } } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-1-context.output.js

@@ -0,0 +1,18 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const {
+    formState: {
+      isDirty,
+      errors,
+    },
+  } = useFormContext();
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-2-context.input.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { errors, formState } = useFormContext();
+
+  const diry = formState.isDirty;
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-2-context.output.js

@@ -0,0 +1,21 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const {
+    formState,
+  } = useFormContext();
+
+  const {
+    errors,
+  } = formState;
+
+  const diry = formState.isDirty;
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-3-context.input.js

@@ -0,0 +1,15 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { errors: customErrors, formState } = useFormContext();
+
+  const diry = formState.isDirty;
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/move-errors-to-formState/with-formState-3-context.output.js

@@ -0,0 +1,21 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const {
+    formState,
+  } = useFormContext();
+
+  const {
+    errors: customErrors,
+  } = formState;
+
+  const diry = formState.isDirty;
+
+  return (
+    <form>
+      <span>{errors.username.message}</span>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/already-migrated-context.input.js

@@ -0,0 +1,16 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useFormContext();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/already-migrated-context.output.js

@@ -0,0 +1,16 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useFormContext();
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/custom-register-context.input.js

@@ -0,0 +1,13 @@
+import { useFormContext as useRenamedForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register: customRegister } = useRenamedForm();
+
+  return (
+    <form>
+      <input ref={customRegister} name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/custom-register-context.output.js

@@ -0,0 +1,13 @@
+import { useFormContext as useRenamedForm } from 'react-hook-form';
+
+const Form = () => {
+  const { register: customRegister } = useRenamedForm();
+
+  return (
+    <form>
+      <input {...customRegister('example')} />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/function-component-2-context.input.js

@@ -0,0 +1,29 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { register, handleSubmit } = useFormContext();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputContainer label="Email">
+        <Input
+          name="email"
+          ref={register}
+          autoComplete="username"
+        />
+      </InputContainer>
+      <InputContainer label="Password *">
+        <Input
+          name="password"
+          ref={register({
+            required: true,
+            validate: (value) => !!value
+          })}
+          type="password"
+        />
+      </InputContainer>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/function-component-2-context.output.js

@@ -0,0 +1,23 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { register, handleSubmit } = useFormContext();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <InputContainer label="Email">
+        <Input {...register('email')} autoComplete="username" />
+      </InputContainer>
+      <InputContainer label="Password *">
+        <Input
+          {...register('password', {
+            required: true,
+            validate: (value) => !!value
+          })}
+          type="password" />
+      </InputContainer>
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/function-component-context.input.js

@@ -0,0 +1,25 @@
+import { useFormContext } from 'react-hook-form';
+
+function Input() {
+  return <input />;
+}
+
+const Form = () => {
+  const { register } = useFormContext();
+
+  useEffect(() => {
+    register('example');
+  }, [register]);
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <Input ref={register} name="example-4" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/function-component-context.output.js

@@ -0,0 +1,25 @@
+import { useFormContext } from 'react-hook-form';
+
+function Input() {
+  return <input />;
+}
+
+const Form = () => {
+  const { register } = useFormContext();
+
+  useEffect(() => {
+    register('example');
+  }, [register]);
+
+  return (
+    <form>
+      <input {...register('example', { required: true })} />
+      <input {...register('example-2')} />
+      <input {...register('example-3')} />
+      <Input {...register('example-4')} />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;

transforms/__testfixtures__/v7/update-register/function-components-context.input.js

@@ -0,0 +1,29 @@
+import { useFormContext } from 'react-hook-form';
+
+const Form = () => {
+  const { register } = useFormContext();
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};
+
+export default Form;
+
+export const Form2 = () => {
+  const { register } = useFormContext();
+
+  return (
+    <form>
+      <input ref={register({ required: true })} name="example" />
+      <input ref={register()} name="example-2" />
+      <input ref={register} name="example-3" />
+      <input ref="useless-ref" name="example" />
+    </form>
+  );
+};