Merge branch 'main' into react/feat/all-props

.changeset/orange-pants-vanish.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+docs(react): update doc for Delay

.changeset/silly-wolves-shave.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+docs(react): update doc for ErrorBoundaryGroup

CONTRIBUTING.md

@@ -0,0 +1,66 @@
+# Contributing to Suspensive libraries
+
+Welcome contribution from everyone <br/>
+All communications in this repository will be by English.
+
+> Every contributor to Suspensive libraries should adhere to [our Code of Conduct](./CODE_OF_CONDUCT.md). Please read it to understand what actions will and will not be tolerated.
+
+## Contributing as issue
+
+### 1. Search for duplicates
+
+[Search the existing issues](https://github.com/suspensive/react/issues) before logging a new one.
+
+### 2. Have a question?
+
+The issue tracker is for **issues**, in other words, bugs and suggestions.
+If you have a _question_, please use [GitHub Discussions](https://github.com/suspensive/react/discussions), your favorite search engine, or other resources.
+
+### 3. Found a bug?
+
+When logging a bug, please be sure to include the following:
+
+- What version of TypeScript you're using (run `tsc --v`)
+- If at all possible, an _isolated_ way to reproduce the behavior
+- The behavior you expect to see, and the actual behavior
+
+### 4. Feature suggestion?
+
+We also accept suggestions in the [issue tracker](https://github.com/suspensive/react/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=%5BFeature%5D%3A).
+
+In general, things we find useful when reviewing suggestions are:
+
+- A description of the problem you're trying to solve
+- An overview of the suggested solution
+
+## Contributing as code
+
+### Prerequisites
+
+0. [Choose an issue about bug or feature you want to work on](https://github.com/suspensive/react/issues)
+1. Clone the repository
+    ```shell
+    git clone [email protected]:suspensive/react.git
+    ```
+2. Install relative packages. [We use pnpm v8. Install it please if need](https://pnpm.io/installation)
+    ```shell
+    pnpm install
+    ```
+
+### Pull Requests
+
+> [Opening a pull request](https://github.com/suspensive/react/pulls)
+
+All commit message and title of your Pull Request should match the following format:
+
+```
+<type>[optional package scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+> We adhere [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/). We check your commits on pre-commit(git-hook) by husky with our rules. please follow it.
+
+Several predefined GitHub Workflows will check qualities. If you fail our checks, please check the error message and update the Pull Request.

packages/react/src/Delay.en.mdx

@@ -3,14 +3,63 @@ sidebar_position: 5
 title: <Delay/>
 ---
 
-This component delays when children are exposed.
+### props.ms
+
+This component delays the exposure of children by ms. In the code below, exposure of children is delayed by 200ms.
 
 ```tsx
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
-  <Delay ms={2000}>
+  <Delay ms={200}>
     <Delayed />
   </Delay>
 )
 ```
+
+:::info
+
+#### Delayed loading UI sometimes provides better usability
+
+```tsx
+import { Delay, Suspense } from '@suspensive/react'
+
+const Example = () => (
+  <Suspense
+    fallback={
+      <Delay ms={200}>
+        <Skeleton />
+      </Delay>
+    }
+  >
+    ...
+  </Suspense>
+)
+```
+
+:::
+
+:::tip
+
+### 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.i18n).
+
+:::
+
+## withDelay
+
+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
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```

packages/react/src/Delay.ko.mdx

@@ -3,14 +3,63 @@ sidebar_position: 5
 title: <Delay/>
 ---
 
-이 컴포넌트는 children이 노출되는 시점을 지연시킵니다.
+### props.ms
+
+이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.
 
 ```tsx
 import { Delay } from '@suspensive/react'
 
 const Example = () => (
-  <Delay ms={2000}>
+  <Delay ms={200}>
     <Delayed />
   </Delay>
 )
 ```
+
+:::info
+
+#### 로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다
+
+```tsx
+import { Delay, Suspense } from '@suspensive/react'
+
+const Example = () => (
+  <Suspense
+    fallback={
+      <Delay ms={200}>
+        <Skeleton />
+      </Delay>
+    }
+  >
+    ...
+  </Suspense>
+)
+```
+
+:::
+
+:::tip
+
+### Default ms
+
+`<Delay/>`는 `<SuspensiveProvider/>`와 함께 사용할 때 더욱 강력해집니다. `<SuspensiveProvider/>`를 사용하여 여러 `<Delay/>` default ms를 제어합니다. 자세한 내용은 [`<SuspensiveProvider/>` 페이지](./SuspensiveProvider.i18n)에 소개되어 있습니다.
+
+:::
+
+## withDelay
+
+withDelay를 사용하면 컴포넌트를 `<Delay/>`로 쉽게 래핑할 수 있습니다.
+아래와 같이 withDelay를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다.
+withDelay의 두 번째 인자는 children이 없는 `<Delay/>`의 props입니다.
+
+```tsx
+import { withDelay } from '@suspensive/react'
+
+const Example = withDelay(
+  function Component() {
+    return <>...</>
+  },
+  { ms: 200 }
+)
+```

packages/react/src/ErrorBoundaryGroup.en.mdx

@@ -3,85 +3,96 @@ sidebar_position: 3
 title: <ErrorBoundaryGroup/>
 ---
 
-This is a component for managing multiple ErrorBoundaries at once.
+This is a component for managing multiple `<ErrorBoundary/>`s easily.
 
-If you use ErrorBoundaryGroup, you can easily reset multiple ErrorBoundaries at once if they are children of ErrorBoundaryGroup, without having to connect resetKey state to resetKeys of multiple ErrorBoundary.
-
-### ErrorBoundaryGroup.Reset
-
-Multiple ErrorBoundary as children of ErrorBoundaryGroup can be reset at once by ErrorBoundaryGroup.Reset.
+`<ErrorBoundary/>`s as children of nested `<ErrorBoundaryGroup/>` will also be reset by parent `<ErrorBoundaryGroup.Reset/>`.
 
 ```tsx
-import { ErrorBoundaryGroup, ErrorBoundary, AsyncBoundary } from '@suspensive/react'
+import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
 const Example = () => (
   <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset Children</button>} />
-    <ErrorBoundary />
-    <AsyncBoundary /* ErrorBoundary wrapped by AsyncBoundary also will be reset by ErrorBoundaryGroup.Reset */ />
+    {/* Resets all ErrorBoundaries that are children of ErrorBoundaryGroup. All ErrorBoundaries within nested ErrorBoundaryGroups are also reset. */}
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
+    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <CanThrowError />
+    </ErrorBoundary>
+    <ErrorBoundaryGroup>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
+      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+        <CanThrowError />
+      </ErrorBoundary>
+    </ErrorBoundaryGroup>
   </ErrorBoundaryGroup>
 )
 ```
 
-### withErrorBoundaryGroup, useErrorBoundaryGroup
-
-If you want to use HOC(Higher Order Component) with hook, Use withErrorBoundaryGroup, useErrorBoundaryGroup.
+:::note
 
-```tsx
-import { withErrorBoundaryGroup, useErrorBoundaryGroup, ErrorBoundary, AsyncBoundary } from '@suspensive/react'
+#### `<ErrorBoundaryGroup>` manage `<AsyncBoundary>`s too
 
-const Example = withErrorBoundaryGroup(() => {
-  const group = useErrorBoundaryGroup()
+[`<AsyncBoundary/>`](./AsyncBoundary.i18n) is influenced by `<ErrorBoundaryGroup>` because it wraps `<ErrorBoundary>`.
 
-  return (
-    <>
-      <button onClick={group.reset}>Reset All</button>
-      <ErrorBoundary />
-      <AsyncBoundary />
-    </>
-  )
-})
-```
+:::
 
-### Nested ErrorBoundaryGroup
+### props.blockOutside
 
-ErrorBoundary as children of nested ErrorBoundaryGroup will be reset by parent ErrorBoundaryGroup.Reset.
-But nested ErrorBoundaryGroup.Reset will reset only ErrorBoundary inside of nested ErrorBoundaryGroup self.
+If you want to block resetting nested `<ErrorBoundaryGroup/>` by parent `<ErrorBoundaryGroup/>`, Use blockOutside.
 
 ```tsx
-import { ErrorBoundaryGroup, ErrorBoundary, AsyncBoundary } from '@suspensive/react'
+import { ErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
 
 const Example = () => (
   <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset /* reset all of children */ />
-    <ErrorBoundary />
-    <AsyncBoundary />
-    <ErrorBoundaryGroup>
-      <ErrorBoundaryGroup.Reset /* reset all of children */ />
-      <ErrorBoundary />
-      <AsyncBoundary />
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
+    <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+      <CanThrowError />
+    </ErrorBoundary>
+    {/* blockOutside prop prevents reset by the parent ErrorBoundaryGroup*/}
+    <ErrorBoundaryGroup blockOutside>
+      <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset</button>} />
+      <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+        <CanThrowError />
+      </ErrorBoundary>
     </ErrorBoundaryGroup>
   </ErrorBoundaryGroup>
 )
 ```
 
-### blockOutside: boolean
+## useErrorBoundaryGroup
 
-If you want to block resetting nested ErrorBoundaryGroup by parent ErrorBoundaryGroup, Use blockOutside.
+If you use useErrorBoundaryGroup, you can get a function to reset `<ErrorBoundary/>`s in `<ErrorBoundaryGroup/>`.
 
 ```tsx
-import { ErrorBoundaryGroup, ErrorBoundary, AsyncBoundary } from '@suspensive/react'
+const Example = () => {
+  const group = useErrorBoundaryGroup()
 
-const Example = () => (
-  <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset />
-    <ErrorBoundary />
-    <AsyncBoundary />
-    <ErrorBoundaryGroup blockOutside /* block resetting by parent ErrorBoundaryGroup */>
-      <ErrorBoundaryGroup.Reset />
-      <ErrorBoundary />
-      <AsyncBoundary />
-    </ErrorBoundaryGroup>
-  </ErrorBoundaryGroup>
+  return <button onClick={group.reset}>reset</button>
+}
+```
+
+## withErrorBoundaryGroup
+
+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
+import { withErrorBoundaryGroup, useErrorBoundaryGroup, ErrorBoundary } from '@suspensive/react'
+
+const Example = withErrorBoundaryGroup(
+  function Component() {
+    const group = useErrorBoundaryGroup()
+
+    return (
+      <>
+        <button onClick={group.reset}>Reset</button>
+        <ErrorBoundary fallback={(caught) => <>{caught.error}</>}>
+          <CanThrowError />
+        </ErrorBoundary>
+      </>
+    )
+  },
+  { blockOutside: true }
 )
 ```