docs(docs-v1): show deprecated apis in docs (#429)

close #423 

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

I show deprecated apis in docs

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

Co-authored-by: Minsoo Kim <[email protected]>

docs/v1/src/pages/docs/react/AsyncBoundary.en.mdx

@@ -0,0 +1,110 @@
+import { Callout } from 'nextra/components'
+
+# AsyncBoundary (deprecated)
+
+<Callout type='warning'>
+
+deprecated: Use [`<Suspense/>`](./Suspense) and [`<ErrorBoundary/>`](./ErrorBoundary) directly
+
+</Callout>
+
+`<AsyncBoundary/>` wraps @suspensive/react's [`<Suspense/>`](./Suspense) and [`<ErrorBoundary/>`](./ErrorBoundary) to use them at once.
+
+```tsx /AsyncBoundary/
+import { AsyncBoundary } from '@suspensive/react'
+
+const Example = () => (
+  <AsyncBoundary
+    pendingFallback={<Loading />}
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+    onReset={() => console.log('reset')}
+    onError={(error) => console.log(error)}
+  >
+    <Children />
+  </AsyncBoundary>
+)
+```
+
+### AsyncBoundaryProps
+
+<Callout type='warning'>
+
+deprecated: Use SuspenseProps and ErrorBoundaryProps directly
+
+</Callout>
+
+```tsx /AsyncBoundaryProps/
+type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
+  Omit<ErrorBoundaryProps, 'fallback'> & {
+    pendingFallback?: SuspenseProps['fallback']
+    rejectedFallback: ErrorBoundaryProps['fallback']
+  }
+```
+
+### Avoid Server side rendering (CSROnly)
+
+<Callout type='warning'>
+
+deprecated: Use `<Suspense.CSROnly/>` and `<ErrorBoundary/>` directly
+
+</Callout>
+
+Since it wraps `<Suspense.CSROnly/>`, it provides the same CSROnly.
+
+```tsx /AsyncBoundary.CSROnly/
+import { AsyncBoundary } from '@suspensive/react'
+
+const Example = () => (
+  <AsyncBoundary.CSROnly
+    pendingFallback={<Loading />}
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+    onReset={() => console.log('reset')}
+    onError={(error) => console.log(error)}
+  >
+    <Children />
+  </AsyncBoundary.CSROnly>
+)
+```
+
+## withAsyncBoundary
+
+<Callout type='warning'>
+
+deprecated: Use [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap) instead
+
+</Callout>
+
+You can use withAsyncBoundary to wrap component by `<AsyncBoundary/>` easily.
+we don't need to make unncessary code to wrap it if we use withAsyncBoundary like below.
+withAsyncBoundary's 2nd parameter is props of `<AsyncBoundary/>` without children
+
+```tsx /withAsyncBoundary/
+import { withAsyncBoundary } from '@suspensive/react'
+
+const Example = withAsyncBoundary(
+  function Component() {
+    return <>...</>
+  },
+  {
+    pendingFallback: <Loading />,
+    rejectedFallback: (props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    ),
+    onReset: () => console.log('reset'),
+    onError: (error) => console.log(error),
+  }
+)
+```

docs/v1/src/pages/docs/react/AsyncBoundary.ko.mdx

@@ -0,0 +1,112 @@
+import { Callout } from 'nextra/components'
+
+# AsyncBoundary (deprecated)
+
+<Callout type='warning'>
+
+deprecated: Use [`<Suspense/>`](./Suspense) and [`<ErrorBoundary/>`](./ErrorBoundary) directly
+
+</Callout>
+
+`<AsyncBoundary/>`는 @suspensive/react의 [`<Suspense/>`](./Suspense)와 [`<ErrorBoundary/>`](./ErrorBoundary)를 한번에 사용하기 위해 래핑한 컴포넌트입니다.
+
+```tsx /AsyncBoundary/
+import { AsyncBoundary } from '@suspensive/react'
+
+const Example = () => (
+  <AsyncBoundary
+    pendingFallback={<Loading />}
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+    onReset={() => console.log('reset')}
+    onError={(error) => console.log(error)}
+  >
+    <Children />
+  </AsyncBoundary>
+)
+```
+
+### AsyncBoundaryProps
+
+<Callout type='warning'>
+
+deprecated: SuspenseProps와 ErrorBoundaryProps를 직접 사용하세요
+
+</Callout>
+
+`<AsyncBoundary/>` Props의 타입은 `<Suspense/>`와 `<ErrorBoundary/>`를 조합합니다.
+
+```tsx /AsyncBoundaryProps/
+type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'> &
+  Omit<ErrorBoundaryProps, 'fallback'> & {
+    pendingFallback?: SuspenseProps['fallback']
+    rejectedFallback: ErrorBoundaryProps['fallback']
+  }
+```
+
+### 서버사이드 렌더링을 피하기 (CSROnly)
+
+<Callout type='warning'>
+
+deprecated: `<Suspense.CSROnly/>`와 `<ErrorBoundary/>`를 직접 사용하세요
+
+</Callout>
+
+`<Suspense.CSROnly/>`를 래핑하기 때문에 동일하게 CSROnly를 제공합니다.
+
+```tsx /AsyncBoundary.CSROnly/
+import { AsyncBoundary } from '@suspensive/react'
+
+const Example = () => (
+  <AsyncBoundary.CSROnly
+    pendingFallback={<Loading />}
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+    onReset={() => console.log('reset')}
+    onError={(error) => console.log(error)}
+  >
+    <Children />
+  </AsyncBoundary.CSROnly>
+)
+```
+
+## withAsyncBoundary
+
+<Callout type='warning'>
+
+deprecated: [wrap.ErrorBoundary().Suspense().on](./wrap), [wrap.ErrorBoundary().Suspense.CSROnly().on](./wrap)를 대신 사용하세요
+
+</Callout>
+
+withAsyncBoundary를 사용하면 컴포넌트를 `<AsyncBoundary/>`로 쉽게 래핑할 수 있습니다.
+아래와 같이 withAsyncBoundary를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withAsyncBoundary의 두 번째 인자는 children이 없는 `<AsyncBoundary/>`의 props입니다.
+
+```tsx /withAsyncBoundary/
+import { withAsyncBoundary } from '@suspensive/react'
+
+const Example = withAsyncBoundary(
+  function Component() {
+    return <>...</>
+  },
+  {
+    pendingFallback: <Loading />,
+    rejectedFallback: (props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    ),
+    onReset: () => console.log('reset'),
+    onError: (error) => console.log(error),
+  }
+)
+```

docs/v1/src/pages/docs/react/Delay.en.mdx

@@ -45,3 +45,26 @@ Default ms
 `<Delay/>` are more powerful when used with `<SuspensiveProvider/>`. Control multiple `<Delay/>`s default ms with `<SuspensiveProvider/>`. Details are introduced in [`<SuspensiveProvider/>` page](./SuspensiveProvider).
 
 </Callout>
+
+## withDelay
+
+<Callout type='warning'>
+
+deprecated: Use [wrap.Delay().on](./wrap) instead
+
+</Callout>
+
+We can use withDelay to wrap component by `<Delay/>` easily.
+we don't need to make unncessary code to wrap it if we use withDelay like below.
+withDelay's 2nd parameter is props of `<Delay/>` without children
+
+```tsx /withDelay/
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```

docs/v1/src/pages/docs/react/Delay.ko.mdx

@@ -45,3 +45,26 @@ Default ms
 `<Delay/>`는 `<SuspensiveProvider/>`와 함께 사용할 때 더욱 강력해집니다. `<SuspensiveProvider/>`를 사용하여 여러 `<Delay/>` default ms를 제어합니다. 자세한 내용은 [`<SuspensiveProvider/>` 페이지](./SuspensiveProvider)에 소개되어 있습니다.
 
 </Callout>
+
+## withDelay
+
+<Callout type='error'>
+
+deprecated: 대신 [wrap.Delay().on](./wrap)를 사용하세요
+
+</Callout>
+
+withDelay를 사용하면 컴포넌트를 `<Delay/>`로 쉽게 래핑할 수 있습니다.
+아래와 같이 withDelay를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withDelay의 두 번째 인자는 children이 없는 `<Delay/>`의 props입니다.
+
+```tsx /withDelay/
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```

docs/v1/src/pages/docs/react/ErrorBoundary.en.mdx

@@ -214,3 +214,28 @@ Controlling multiple `<ErrorBoundary/>`s
 Details are introduced in [`<ErrorBoundaryGroup/>` page](./ErrorBoundaryGroup).
 
 </Callout>
+
+## withErrorBoundary
+
+<Callout type='warning'>
+
+deprecated: Use [wrap.ErrorBoundary().on](./wrap) instead
+
+</Callout>
+
+We can use withErrorBoundary to wrap component by `<ErrorBoundary/>` easily.
+we don't need to make unncessary code to wrap it if we use withErrorBoundary like below.
+withErrorBoundary's 2nd parameter is props of `<ErrorBoundary/>` without children
+
+```tsx /withErrorBoundary/
+import { withErrorBoundary, useErrorBoundary } from '@suspensive/react'
+
+const Example = withErrorBoundary(
+  function Component() {
+    const errorBoundary = useErrorBoundary()
+
+    return <>...</>
+  },
+  { fallback: ErrorBoundaryFallback }
+)
+```

docs/v1/src/pages/docs/react/ErrorBoundary.ko.mdx

@@ -206,6 +206,31 @@ const SetErrorAfterFetch = () => {
 }
 ```
 
+## withErrorBoundary
+
+<Callout type='warning'>
+
+deprecated: [wrap.ErrorBoundary().on](./wrap)를 대신 사용하세요
+
+</Callout>
+
+withErrorBoundary를 사용하면 컴포넌트를 `<ErrorBoundary/>`로 쉽게 래핑할 수 있습니다.
+아래와 같이 withErrorBoundary를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withErrorBoundary의 두 번째 인자는 children이 없는 `<ErrorBoundary/>`의 props입니다.
+
+```tsx /withErrorBoundary/
+import { withErrorBoundary, useErrorBoundary } from '@suspensive/react'
+
+const Example = withErrorBoundary(
+  function Component() {
+    const errorBoundary = useErrorBoundary()
+
+    return <>...</>
+  },
+  { fallback: ErrorBoundaryFallback }
+)
+```
+
 <Callout>
 
 다수의 `<ErrorBoundary/>`를 제어하기

docs/v1/src/pages/docs/react/ErrorBoundaryGroup.en.mdx

@@ -63,3 +63,35 @@ const Example = () => {
   return <button onClick={group.reset}>Try again</button>
 }
 ```
+
+## withErrorBoundaryGroup
+
+<Callout type='warning'>
+
+deprecated: Use [wrap.ErrorBoundaryGroup().on](./wrap) instead
+
+</Callout>
+
+withErrorBoundaryGroup allows you to easily wrap your component in `<ErrorBoundaryGroup/>`.
+If you use withErrorBoundaryGroup as shown below, you don't need to create unnecessary code to wrap it.
+The second argument to withErrorBoundaryGroup is a prop of `<ErrorBoundaryGroup/>` without children.
+
+```tsx /withErrorBoundaryGroup/
+import { withErrorBoundaryGroup, useErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
+
+const Example = withErrorBoundaryGroup(
+  function Component() {
+    const group = useErrorBoundaryGroup()
+
+    return (
+      <>
+        <button onClick={group.reset}>Try again</button>
+        <ErrorBoundary fallback={(props) => <>{props.error}</>}>
+          <CanThrowError />
+        </ErrorBoundary>
+      </>
+    )
+  },
+  { blockOutside: true }
+)
+```