feat: add move-errors-to-formState codemod

Author: jorisre

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: 'module'
   },
+  ignorePatterns: ['**/__testfixtures__/**/*.js'],
   plugins: ['@typescript-eslint'],
   rules: {
     semi: ['error', 'always'],

README.md

@@ -36,7 +36,7 @@ This will start an interactive wizard, and then run the specified transform.
 
 #### `v7/update-register`
 
-Update the `register` API inside a component which use `useForm` of React Hook Form. This transform is not applied if the component doesn't use `useForm`.
+Update the `register` API inside a component that use `useForm` of React Hook Form. This transform is not applied if the component doesn't use `useForm`.
 
     npx @hookform/codemod v7/update-register
 
@@ -77,6 +77,47 @@ With a custom `register` name
 
 </details>
 
+#### `v7/move-errors-to-formState`
+
+It moves `errors` API into `formState` inside a component that use `useForm` of React Hook Form. This transform is not applied if the component doesn't use `useForm`.
+
+    npx @hookform/codemod v7/move-errors-to-formState
+
+<details>
+    <summary>Examples</summary>
+
+```diff
+- const { errors } = useForm();
++ const { formState: { errors } } = useForm();
+
+- const { errors: customErrors } = useForm();
++ const { formState: { errors: customErrors } } = useForm();
+
+- const { errors, formState: { isDirty } } = useForm();
++ const { formState: { isDirty, errors } } = useForm();
+
+- const { errors: customErrors, formState: { isDirty } } = useForm();
++ const { formState: { isDirty, errors: customErrors } } = useForm();
+```
+
+With a custom `register` name
+
+```diff
+    function MyForm() {
+-     const { errors, formState } = useForm();
++     const { formState } = useForm();
++     const { errors } = formState;
+
+      const isDirty = formState.isDirty;
+
+      return (
+        //
+      );
+    }
+```
+
+</details>
+
 ## Backers
 
 Thanks goes to all our backers! [[Become a backer](https://opencollective.com/react-hook-form#backer)].

bin/cli.ts

@@ -94,6 +94,10 @@ const TRANSFORMER_INQUIRER_CHOICES = [
   {
     name: 'v7/update-register: Transforms register api from v6 to v7',
     value: 'v7/update-register'
+  },
+  {
+    name: 'v7/move-errors-to-formState: Move `errors` key to `formState` key',
+    value: 'v7/move-errors-to-formState'
   }
 ];
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { errors, formState } = useForm();
+
+  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.output.js

@@ -0,0 +1,21 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const {
+    formState,
+  } = useForm();
+
+  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.input.js

@@ -0,0 +1,15 @@
+import { useForm } from 'react-hook-form';
+
+const Form = () => {
+  const { errors: customErrors, formState } = useForm();
+
+  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.output.js

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

transforms/__tests__/v7/move-errors-to-formState.test.ts

@@ -0,0 +1,15 @@
+import { defineTest } from '../../../utils/defineTest';
+
+/* global jest */
+jest.autoMockOff();
+
+const fixtures = [
+  'function-component',
+  'with-custom-errors',
+  'with-formState-1',
+  'with-formState-2',
+  'with-formState-3',
+  'already-migrated'
+];
+
+fixtures.forEach(defineTest(__dirname, 'v7/move-errors-to-formState'));