From cb345bc47a79f0a3f7331dfb1f73bba8c9c59904 Mon Sep 17 00:00:00 2001
From: Nicholas Ramkissoon <nicholas.ramkissoon01@gmail.com>
Date: Thu, 29 Sep 2022 19:09:57 -0400
Subject: [PATCH] chore(examples): Convert  `with-react-hook-form` example to
 TypeScript (#38796)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Converted `with-react-hook-form` example to TypeScript as it is pointed out in the contributing docs that examples
should be converted to TS.

- updated dependencies
- fixed/added types where necessary

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
---
 examples/with-react-hook-form/package.json    | 12 ++++++++---
 examples/with-react-hook-form/pages/_app.js   |  5 -----
 examples/with-react-hook-form/pages/_app.tsx  |  6 ++++++
 .../pages/{index.js => index.tsx}             | 20 ++++++++++++++-----
 examples/with-react-hook-form/tsconfig.json   | 20 +++++++++++++++++++
 5 files changed, 50 insertions(+), 13 deletions(-)
 delete mode 100644 examples/with-react-hook-form/pages/_app.js
 create mode 100644 examples/with-react-hook-form/pages/_app.tsx
 rename examples/with-react-hook-form/pages/{index.js => index.tsx} (87%)
 create mode 100644 examples/with-react-hook-form/tsconfig.json

diff --git a/examples/with-react-hook-form/package.json b/examples/with-react-hook-form/package.json
index 9f4dd77809b8c..6d7ec20928960 100644
--- a/examples/with-react-hook-form/package.json
+++ b/examples/with-react-hook-form/package.json
@@ -7,8 +7,14 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "7.4.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.33.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.6",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/with-react-hook-form/pages/_app.js b/examples/with-react-hook-form/pages/_app.js
deleted file mode 100644
index 0bd950249faeb..0000000000000
--- a/examples/with-react-hook-form/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../styles/global.css'
-
-export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
diff --git a/examples/with-react-hook-form/pages/_app.tsx b/examples/with-react-hook-form/pages/_app.tsx
new file mode 100644
index 0000000000000..4169c151b5879
--- /dev/null
+++ b/examples/with-react-hook-form/pages/_app.tsx
@@ -0,0 +1,6 @@
+import { AppProps } from 'next/app'
+import '../styles/global.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/with-react-hook-form/pages/index.js b/examples/with-react-hook-form/pages/index.tsx
similarity index 87%
rename from examples/with-react-hook-form/pages/index.js
rename to examples/with-react-hook-form/pages/index.tsx
index b063590ee6044..1b6a0d3dced44 100644
--- a/examples/with-react-hook-form/pages/index.js
+++ b/examples/with-react-hook-form/pages/index.tsx
@@ -1,24 +1,34 @@
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
+interface User {
+  name: string
+}
+
+interface LoginFormValues {
+  username: string
+  password: string
+  remember: boolean
+}
+
 const IndexPage = () => {
-  const [user, setUser] = useState()
+  const [user, setUser] = useState<User>()
   const {
     register,
     formState: { errors },
     handleSubmit,
-  } = useForm()
-  const onSubmit = ({ username, password, remember }) => {
+  } = useForm<LoginFormValues>()
+  const onSubmit = handleSubmit(({ username, password, remember }) => {
     // You should handle login logic with username, password and remember form data
     setUser({ name: username })
-  }
+  })
 
   return (
     <div className="container">
       {user ? (
         <span className="hello-user">Hello, {user.name}!</span>
       ) : (
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={onSubmit}>
           <div className="row">
             <h3 className="form-header">LOGIN</h3>
           </div>
diff --git a/examples/with-react-hook-form/tsconfig.json b/examples/with-react-hook-form/tsconfig.json
new file mode 100644
index 0000000000000..b8d597880a1ae
--- /dev/null
+++ b/examples/with-react-hook-form/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}