docs(suspensive.org): add docs for @suspensive/jotai

docs/suspensive.org/src/pages/docs/_meta.en.json

@@ -5,6 +5,7 @@
   },
   "react": "@suspensive/react",
   "react-query": "@suspensive/react-query",
+  "jotai": "@suspensive/jotai",
   "react-await": {
     "title": "@suspensive/react-await",
     "theme": {

docs/suspensive.org/src/pages/docs/_meta.ko.json

@@ -5,6 +5,7 @@
   },
   "react": "@suspensive/react",
   "react-query": "@suspensive/react-query",
+  "jotai": "@suspensive/jotai",
   "react-await": {
     "title": "@suspensive/react-await",
     "theme": {

docs/suspensive.org/src/pages/docs/jotai/Atom.en.mdx

@@ -0,0 +1,57 @@
+import { Callout } from '@/components'
+
+# Atom
+
+<Callout type='experimental'>
+
+`<Atom/>` is experimental feature, this interfaces could be changed
+
+</Callout>
+
+The Atom component provides the same props interface as Jotai's [useAtom](https://jotai.org/docs/core/use-atom#useatom) hook and can be used declaratively.
+
+### props.atom
+
+You can use Jotai's atom as is.
+
+```tsx /Atom/
+import { Atom } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const countAtom = atom(1);
+
+const Example = () => (
+  <Atom atom={countAtom}>
+    {([count, setCount]) => (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount(count + 1)}>+1</button>
+      </>
+    )}
+  </Atom>
+)
+```
+
+For Async Atom, you can handle the loading state using Suspense.
+
+```tsx /Atom/
+import { Atom } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { atom } from "jotai";
+
+const countAtom = atom(1)
+const asyncDoubleCountAtom = atom(async (get) => {
+  await delay(2000)
+  return get(countAtom) * 2
+})
+
+const Example = () => (
+    <Suspense fallback={'pending...'}>
+      <Atom atom={asyncDoubleCountAtom}>
+        {([count]) => (
+          <>count: {count}</>
+        )}
+      </Atom>
+    </Suspense>
+)
+```

docs/suspensive.org/src/pages/docs/jotai/Atom.ko.mdx

@@ -0,0 +1,108 @@
+import { Callout } from '@/components'
+
+# Atom
+
+<Callout type='experimental'>
+
+`<Atom/>`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
+
+</Callout>
+
+Atom 컴포넌트는 Jotai의 [useAtom](https://jotai.org/docs/core/use-atom#useatom) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.
+
+### props.atom
+
+Jotai의 atom을 그대로 사용할 수 있습니다.
+
+```tsx /Atom/
+import { Atom } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const countAtom = atom(1);
+
+const Example = () => (
+  <Atom atom={countAtom}>
+    {([count, setCount]) => (
+      <>
+        <div>count: {count}</div>
+        <button onClick={() => setCount(count + 1)}>+1</button>
+      </>
+    )}
+  </Atom>
+)
+```
+
+Async Atom일 경우 Suspense를 사용하여 로딩 상태를 처리할 수 있습니다.
+
+```tsx /Atom/
+import { Atom } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { atom } from "jotai";
+
+const countAtom = atom(1)
+const asyncDoubleCountAtom = atom(async (get) => {
+  await delay(2000)
+  return get(countAtom) * 2
+})
+
+const Example = () => (
+    <Suspense fallback={'pending...'}>
+      <Atom atom={asyncDoubleCountAtom}>
+        {([count]) => (
+          <>count: {count}</>
+        )}
+      </Atom>
+    </Suspense>
+)
+```
+
+### 동기
+
+상위 컴포넌트에서 useAtom이 명확하게 드러나지 않습니다. 하위에 선언된 컴포넌트가 내부적으로 어떤 Atom을 사용하고, Suspense를 발생할지 예상하기 어렵습니다.
+
+```tsx
+// payment/page.tsx
+import { Atom } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { UserInfo, ShoppingCart } from '~/components'
+
+const PaymentPage = () => (
+  <Suspense fallback={'pending...'}>
+    <UserInfo /> {/* 내부적으로 Atom을 사용하는지, Suspense를 발생할지 예상하기 어렵습니다. */}
+    <ShoppingCart /> {/* 내부적으로 Atom을 사용하는지, Suspense를 발생할지 예상하기 어렵습니다. */}
+  </Suspense>
+)
+```
+
+```tsx
+// payment/components/UserInfo.tsx
+import { useAtomValue } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { UserAddress } from '~/components'
+import { userAsyncAtom } from "~/atoms";
+
+// 이 컴포넌트를 사용하는 입장에서 UserInfo라는 이름만으로 내부적으로 어떤 Atom을 사용하고, Suspense를 발생할지 예상하기 어렵습니다.
+const UserInfo = () => {
+  const data = useAtomValue(userAsyncAtom)
+
+  return <UserAddress {...data} />
+}
+```
+
+```tsx
+// payment/components/ShoppingCart.tsx
+import { Atom } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { shoppingCartAtom } from "~/atoms";
+
+// 이 컴포넌트를 사용하는 입장에서 ShoppingCart라는 이름만으로 내부적으로 어떤 Atom을 사용하고, Suspense를 발생할지 예상하기 어렵습니다.
+const ShoppingCart = () => {
+  const [data] = useAtom(shoppingCartAtom)
+
+  return (
+    <>
+      {data.map(item => <ShoppingItem key={item.id} {...item} />)}
+    </>
+  )
+}
+```

docs/suspensive.org/src/pages/docs/jotai/AtomValue.en.mdx

@@ -0,0 +1,54 @@
+import { Callout } from '@/components'
+
+# AtomValue
+
+<Callout type='experimental'>
+
+`<AtomValue/>` is experimental feature, this interfaces could be changed
+
+</Callout>
+
+The AtomValue component provides the same props interface as Jotai's [useAtomValue](https://jotai.org/docs/core/use-atom#useatomvalue) hook and can be used declaratively.
+
+### props.atom
+
+You can use Jotai's atom as is.
+
+```tsx /AtomValue/
+import { AtomValue } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const countAtom = atom(1);
+
+const Example = () => (
+  <AtomValue atom={countAtom}>
+    {(count) => (
+      <>count: {count}</>
+    )}
+  </AtomValue>
+)
+```
+
+For Async Atom, you can handle the loading state using Suspense.
+
+```tsx /AtomValue/
+import { AtomValue } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { atom } from "jotai";
+
+const countAtom = atom(1)
+const asyncDoubleCountAtom = atom(async (get) => {
+  await delay(2000)
+  return get(countAtom) * 2
+})
+
+const Example = () => (
+  <Suspense fallback={'pending...'}>
+    <AtomValue atom={asyncDoubleCountAtom}>
+      {(count) => (
+        <>count: {count}</>
+      )}
+    </AtomValue>
+  </Suspense>
+)
+```

docs/suspensive.org/src/pages/docs/jotai/AtomValue.ko.mdx

@@ -0,0 +1,58 @@
+import { Callout } from '@/components'
+
+# AtomValue
+
+<Callout type='experimental'>
+
+`<AtomValue/>`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
+
+</Callout>
+
+AtomValue 컴포넌트는 Jotai의 [useAtomValue](https://jotai.org/docs/core/use-atom#useatomvalue) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.
+
+### props.atom
+
+Jotai의 atom을 그대로 사용할 수 있습니다.
+
+```tsx /AtomValue/
+import { AtomValue } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const countAtom = atom(1);
+
+const Example = () => (
+  <AtomValue atom={countAtom}>
+    {(count) => (
+      <>count: {count}</>
+    )}
+  </AtomValue>
+)
+```
+
+Async Atom일 경우 Suspense를 사용하여 로딩 상태를 처리할 수 있습니다.
+
+```tsx /AtomValue/
+import { AtomValue } from '@suspensive/jotai'
+import { Suspense } from '@suspensive/react'
+import { atom } from "jotai";
+
+const countAtom = atom(1)
+const asyncDoubleCountAtom = atom(async (get) => {
+  await delay(2000)
+  return get(countAtom) * 2
+})
+
+const Example = () => (
+  <Suspense fallback={'pending...'}>
+    <AtomValue atom={asyncDoubleCountAtom}>
+      {(count) => (
+        <>count: {count}</>
+      )}
+    </AtomValue>
+  </Suspense>
+)
+```
+
+### 동기
+
+[`<Atom/>`](https://suspensive.org/ko/docs/jotai/Atom)의 동기와 같이 `<AtomValue/>` 또한, 상위 컴포넌트에서 명확하게 드러나지 않습니다. 하위에 선언된 컴포넌트가 내부적으로 어떤 Atom을 사용하고, Suspense를 발생할지 예상하기 어렵습니다.

docs/suspensive.org/src/pages/docs/jotai/SetAtom.en.mdx

@@ -0,0 +1,53 @@
+import { Callout } from '@/components'
+
+# SetAtom
+
+<Callout type='experimental'>
+
+`<SetAtom/>` is experimental feature, this interfaces could be changed
+
+</Callout>
+
+The SetAtom component provides the same props interface as Jotai's [useSetAtom](https://jotai.org/docs/core/use-atom#usesetatom) hook and can be used declaratively.
+
+### props.atom
+
+You can use Jotai's atom as is.
+
+```tsx /SetAtom/
+import { SetAtom } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const switchAtom = atom(false)
+
+const Example = () => (
+  <SetAtom atom={switchAtom}>
+    {(setCount) => (
+      <>
+        <button onClick={() => setCount(true)}>Set True</button>
+        <button onClick={() => setCount(false)}>Set False</button>
+      </>
+    )}
+  </SetAtom>
+)
+```
+
+For Async Atom, Suspense is triggered until the Promise is resolved.
+
+```tsx /SetAtom/
+import { SetAtom } from '@suspensive/jotai'
+import { atom } from "jotai";
+
+const request = async () => fetch('https://...').then((res) => res.json())
+const baseAtom = atom(0)
+
+const Example = () => (
+  <SetAtom atom={baseAtom}>
+    {(setValue) => (
+      <>
+        <button onClick={() => setValue(request())}>request</button> // Suspend is triggered until the promise is resolved.
+      </>
+    )}
+  </SetAtom>
+)
+```