examples: react-hook-form app init

recruit-tech · Sep 3, 2022 · 2e7ed66 · 2e7ed66
1 parent fc444b1
commit 2e7ed66
Show file tree

Hide file tree

Showing 17 changed files with 301 additions and 1 deletion.
diff --git a/examples/react-hook-form/.eslintrc.json b/examples/react-hook-form/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/react-hook-form/.gitignore b/examples/react-hook-form/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# yarn
+yarn.lock
diff --git a/examples/react-hook-form/README.md b/examples/react-hook-form/README.md
@@ -0,0 +1,8 @@
+## react-hook-form
+
+Example of `recoil-sync-next` & `react-hook-form`.
+
+```bash
+# run example application
+yarn dev
+```
diff --git a/examples/react-hook-form/next-env.d.ts b/examples/react-hook-form/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/react-hook-form/next.config.js b/examples/react-hook-form/next.config.js
@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  experimental: {
+    scrollRestoration: true,
+    newNextLinkBehavior: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/examples/react-hook-form/package-copy.sh b/examples/react-hook-form/package-copy.sh
@@ -0,0 +1,19 @@
+#!/bin/sh
+
+echo "[recoil-sync-next] copy to current directory..."
+
+CURRENT=`pwd`
+cd ../../
+yarn clean-build
+yarn pack --filename recoil-sync-next-local.tgz
+
+cd $CURRENT/node_modules
+rm -Rf recoil-sync-next/
+tar zxf ../../../recoil-sync-next-local.tgz
+mv package/ recoil-sync-next/
+
+cd ..
+rm -Rf .next/
+
+echo "[recoil-sync-next] copy success!"
+exit $?
diff --git a/examples/react-hook-form/package.json b/examples/react-hook-form/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-hook-form",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "inst": "yarn install",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint:eslint": "next lint",
+    "lint:tsc": "tsc --noEmit -p tsconfig.json",
+    "lint-fix:eslint": "next lint --fix",
+    "lint-fix:prettier": "prettier \"{pages,src,styles}/**/*.{ts,tsx,css}\" --write",
+    "local-build": "yarn run local-copy && yarn run build",
+    "local-dev": "yarn run local-copy && yarn run dev",
+    "local-copy": "./package-copy.sh"
+  },
+  "dependencies": {
+    "next": "^12.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.34.2",
+    "recoil": "^0.7.4",
+    "recoil-sync": "^0.1.0",
+    "recoil-sync-next": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "eslint": "^8.19.0",
+    "eslint-config-next": "^12.2.2",
+    "typescript": "^4.7.4"
+  }
+}
diff --git a/examples/react-hook-form/pages/_app.tsx b/examples/react-hook-form/pages/_app.tsx
@@ -0,0 +1,17 @@
+import '../styles/globals.css'
+import { RecoilRoot } from 'recoil'
+import { RecoilHistorySyncJSONNext } from 'recoil-sync-next'
+
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <RecoilRoot>
+      <RecoilHistorySyncJSONNext>
+        <Component {...pageProps} />
+      </RecoilHistorySyncJSONNext>
+    </RecoilRoot>
+  )
+}
+
+export default MyApp
diff --git a/examples/react-hook-form/pages/form/[index].tsx b/examples/react-hook-form/pages/form/[index].tsx
@@ -0,0 +1,50 @@
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { useForm } from 'react-hook-form'
+import { SubmitHandler } from 'react-hook-form/dist/types/form'
+import styles from '../../styles/form.module.css'
+
+import type { NextPage } from 'next'
+
+type FormData = {
+  name: string
+  comment: string
+}
+
+const Form: NextPage = () => {
+  const router = useRouter()
+  const { handleSubmit, register } = useForm<FormData>()
+  const onSubmit: SubmitHandler<FormData> = async data => {
+    console.log('submit data', data)
+    await router.push('/form/success')
+  }
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Form</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Form</h1>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <dl className={styles.formList}>
+            <dt>name</dt>
+            <dd>
+              <input type="text" {...register('name')} />
+            </dd>
+            <dt>comment</dt>
+            <dd>
+              <input type="text" {...register('comment')} />
+            </dd>
+          </dl>
+          <button>submit</button>
+        </form>
+      </main>
+    </div>
+  )
+}
+
+export default Form
diff --git a/examples/react-hook-form/pages/form/success.tsx b/examples/react-hook-form/pages/form/success.tsx
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import styles from '../../styles/common.module.css'
+
+import type { NextPage } from 'next'
+
+const SubmitSuccess: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>submit success</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Submit success!!!</h1>
+        <Link href="/form/1">form</Link>
+      </main>
+    </div>
+  )
+}
+
+export default SubmitSuccess
diff --git a/examples/react-hook-form/pages/index.tsx b/examples/react-hook-form/pages/index.tsx
@@ -0,0 +1,23 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import styles from '../styles/common.module.css'
+
+import type { NextPage } from 'next'
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Top - Example of RecoilHistorySyncJSONNext</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Top page</h1>
+        <Link href="/form/1">form</Link>
+      </main>
+    </div>
+  )
+}
+
+export default Home
diff --git a/examples/react-hook-form/public/favicon.ico b/examples/react-hook-form/public/favicon.ico
diff --git a/examples/react-hook-form/styles/common.module.css b/examples/react-hook-form/styles/common.module.css
@@ -0,0 +1,12 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  min-width: 700px;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/examples/react-hook-form/styles/form.module.css b/examples/react-hook-form/styles/form.module.css
@@ -0,0 +1,18 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  min-width: 700px;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.formList {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: 10px;
+}
diff --git a/examples/react-hook-form/styles/globals.css b/examples/react-hook-form/styles/globals.css
@@ -0,0 +1,16 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: blue;
+  text-decoration: underline;
+}
+
+* {
+  box-sizing: border-box;
+}
diff --git a/examples/react-hook-form/tsconfig.json b/examples/react-hook-form/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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"]
+}
diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "run-ex:history-sync-json": "yarn --cwd examples/history-sync-json run $CMD",
     "run-ex:history-sync-transit": "yarn --cwd examples/history-sync-transit run $CMD",
     "run-ex:url-sync-json": "yarn --cwd examples/url-sync-json run $CMD",
-    "run-ex:url-sync-transit": "yarn --cwd examples/url-sync-transit run $CMD"
+    "run-ex:url-sync-transit": "yarn --cwd examples/url-sync-transit run $CMD",
+    "run-ex:react-hook-from": "yarn --cwd examples/react-hook-form run $CMD"
   },
   "simple-git-hooks": {
     "pre-commit": "yarn run lint:lib:eslint && yarn run lint:ex:eslint && yarn run test"