examples: url-sync-transit init

recruit-tech · Jul 24, 2022 · ce1f81b · ce1f81b
1 parent e064d19
commit ce1f81b
Show file tree

Hide file tree

Showing 20 changed files with 442 additions and 0 deletions.
diff --git a/examples/url-sync-transit/.eslintrc.json b/examples/url-sync-transit/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/url-sync-transit/.gitignore b/examples/url-sync-transit/.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/url-sync-transit/README.md b/examples/url-sync-transit/README.md
@@ -0,0 +1,8 @@
+## url-sync-json
+
+Example of `RecoilURLSyncJSONNext`.
+
+```bash
+# run example application
+yarn dev
+```
diff --git a/examples/url-sync-transit/next-env.d.ts b/examples/url-sync-transit/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/url-sync-transit/next.config.js b/examples/url-sync-transit/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/url-sync-transit/package-copy.sh b/examples/url-sync-transit/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/url-sync-transit/package.json b/examples/url-sync-transit/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "url-sync-json",
+  "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",
+    "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/url-sync-transit/pages/_app.tsx b/examples/url-sync-transit/pages/_app.tsx
@@ -0,0 +1,20 @@
+import '../styles/globals.css'
+import { RecoilRoot } from 'recoil'
+import { RecoilURLSyncJSONNext } from 'recoil-sync-next'
+
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <RecoilRoot>
+      <RecoilURLSyncJSONNext
+        storeKey="url-json-store"
+        location={{ part: 'queryParams' }}
+      >
+        <Component {...pageProps} />
+      </RecoilURLSyncJSONNext>
+    </RecoilRoot>
+  )
+}
+
+export default MyApp
diff --git a/examples/url-sync-transit/pages/index.tsx b/examples/url-sync-transit/pages/index.tsx
@@ -0,0 +1,31 @@
+import Head from 'next/head'
+import Link from 'next/link'
+
+import { Counter } from '../src/components/Counter'
+import { Links } from '../src/components/Links'
+import { Textfield } from '../src/components/Textfield'
+import styles from '../styles/Home.module.css'
+
+import type { NextPage } from 'next'
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Top - Example of RecoilURLSyncJSONNext</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Top page (Static)</h1>
+        <Textfield />
+        <Counter name="foo" initialValue={0} />
+        <Counter name="bar" initialValue={10} />
+        <Counter name="baz" initialValue={100} />
+        <Links />
+      </main>
+    </div>
+  )
+}
+
+export default Home
diff --git a/examples/url-sync-transit/pages/ssg/[id].tsx b/examples/url-sync-transit/pages/ssg/[id].tsx
@@ -0,0 +1,56 @@
+import Head from 'next/head'
+
+import { Counter } from '../../src/components/Counter'
+import { Textfield } from '../../src/components/Textfield'
+import { Links } from '../../src/components/Links'
+import styles from '../../styles/Home.module.css'
+
+import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
+
+type Props = {
+  id: string
+}
+
+const SSGPage: NextPage<Props> = ({ id }) => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSG - Example of RecoilURLSyncJSONNext</title>
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSG Page {id}</h1>
+        <Textfield />
+        <Counter name="foo" initialValue={0} />
+        <Counter name="bar" initialValue={10} />
+        <Counter name="baz" initialValue={100} />
+        <Links />
+      </main>
+    </div>
+  )
+}
+
+export default SSGPage
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [
+      { params: { id: '1' } },
+      { params: { id: '2' } },
+      { params: { id: '3' } },
+    ],
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps<Props, { id: string }> = async ({
+  params,
+}) => {
+  if (params?.id === undefined) throw new Error('`params.id` is undefined.')
+
+  return {
+    props: {
+      id: params?.id,
+    },
+  }
+}
diff --git a/examples/url-sync-transit/pages/ssr/[id].tsx b/examples/url-sync-transit/pages/ssr/[id].tsx
@@ -0,0 +1,46 @@
+import Head from 'next/head'
+
+import { Counter } from '../../src/components/Counter'
+import { Links } from '../../src/components/Links'
+import { Textfield } from '../../src/components/Textfield'
+import styles from '../../styles/Home.module.css'
+
+import type { GetServerSideProps, NextPage } from 'next'
+
+type Props = {
+  id: string
+}
+
+const SSRPage: NextPage<Props> = ({ id }) => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>SSR - Example of RecoilURLSyncJSONNext</title>
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>SSR Page {id}</h1>
+        <Textfield />
+        <Counter name="foo" initialValue={0} />
+        <Counter name="bar" initialValue={10} />
+        <Counter name="baz" initialValue={100} />
+        <Links />
+      </main>
+    </div>
+  )
+}
+
+export default SSRPage
+
+export const getServerSideProps: GetServerSideProps<
+  Props,
+  { id: string }
+> = async ({ params }) => {
+  if (params?.id === undefined) throw new Error('`params.id` is undefined.')
+
+  return {
+    props: {
+      id: params?.id,
+    },
+  }
+}
diff --git a/examples/url-sync-transit/public/favicon.ico b/examples/url-sync-transit/public/favicon.ico
diff --git a/examples/url-sync-transit/src/components/Counter/index.module.css b/examples/url-sync-transit/src/components/Counter/index.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 200px;
+}
diff --git a/examples/url-sync-transit/src/components/Counter/index.tsx b/examples/url-sync-transit/src/components/Counter/index.tsx
@@ -0,0 +1,32 @@
+import { number } from '@recoiljs/refine'
+import { useRecoilState } from 'recoil'
+import { syncEffect } from 'recoil-sync'
+import { atomFamilyWithInitialValue } from 'recoil-sync-next'
+
+import styles from './index.module.css'
+
+export const counter = atomFamilyWithInitialValue<number, string>({
+  key: 'counterState',
+  effects: [syncEffect({ storeKey: 'url-json-store', refine: number() })],
+})
+
+export type Props = {
+  name: string
+  initialValue: number
+}
+
+export const Counter: React.FC<Props> = ({ name, initialValue }) => {
+  const [count, setCount] = useRecoilState(counter(name, initialValue))
+
+  return (
+    <div key={name} className={styles.wrapper}>
+      <div>
+        count[{name}]: {count}
+      </div>
+      <div>
+        <button onClick={() => setCount((prev) => prev + 1)}>+</button>
+        <button onClick={() => setCount((prev) => prev - 1)}>-</button>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/url-sync-transit/src/components/Links/index.tsx b/examples/url-sync-transit/src/components/Links/index.tsx
@@ -0,0 +1,56 @@
+import Link from 'next/link'
+
+export const Links: React.FC = () => {
+  return (
+    <dl>
+      <dt>Top</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/">Top</Link>
+          </li>
+          <li>
+            <Link href={'/?textState="Recoil"'}>Top</Link>
+            <span>&nbsp;(with text: &quot;Recoil&quot;)</span>
+          </li>
+        </ul>
+      </dd>
+      <dt>SSR</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/ssr/1">SSR 1</Link>
+          </li>
+          <li>
+            <Link href={'/ssr/2?textState="Sync"'}>SSR 2</Link>
+            <span>&nbsp;(with text: &quot;Sync&quot;)</span>
+          </li>
+          <li>
+            <Link href={'/ssr/3?counterState__"foo"=1&counterState__"bar"=11'}>
+              SSR 3
+            </Link>
+            <span>&nbsp;(with foo: 1, bar: 11)</span>
+          </li>
+        </ul>
+      </dd>
+      <dt>SSG</dt>
+      <dd>
+        <ul>
+          <li>
+            <Link href="/ssg/1">SSG 1</Link>
+          </li>
+          <li>
+            <Link href={'/ssg/2?textState="Sync"'}>SSG 2</Link>
+            <span>&nbsp;(with text: &quot;Sync&quot;)</span>
+          </li>
+          <li>
+            <Link href={'/ssg/3?counterState__"foo"=1&counterState__"bar"=11'}>
+              SSG 3
+            </Link>
+            <span>&nbsp;(with foo: 1, bar: 11)</span>
+          </li>
+        </ul>
+      </dd>
+    </dl>
+  )
+}
diff --git a/examples/url-sync-transit/src/components/Textfield/index.module.css b/examples/url-sync-transit/src/components/Textfield/index.module.css
@@ -0,0 +1,3 @@
+.wrapper {
+  width: 200px;
+}