docs: add js-doc

fix toss#12

.lintstagedrc

@@ -1,3 +1,5 @@
 {
-  "*.ts": "eslint"
+  "*.{ts,tsx}": [
+    "prettier --write",
+  ]
 }

packages/react-query/src/QueryAsyncBoundary.tsx

@@ -37,7 +37,17 @@ const CSROnlyQueryAsyncBoundary = forwardRef<
   </QueryErrorResetBoundary>
 ))
 
+/**
+ * This component wrapping QueryErrorResetBoundary of @tanstack/react-query with @suspensive/react's AsyncBoundary.
+ *
+ * with this component, You don't have to make unnecessary repetitive implementation to combine AsyncBoundary with QueryErrorResetBoundary
+ * @see {@link https://docs.suspensive.org/docs/react-query/src/QueryErrorResetBoundary.i18n Suspensive Official Docs}
+ */
 export const QueryAsyncBoundary = BaseQueryAsyncBoundary as typeof BaseQueryAsyncBoundary & {
+  /**
+   * CSROnly mode make QueryAsyncBoundary can be used in SSR framework like Next.js with React 17 or under
+   * @see {@link https://docs.suspensive.org/docs/react/src/QueryErrorResetBoundary.i18n Suspensive Official Docs}
+   */
   CSROnly: typeof CSROnlyQueryAsyncBoundary
 }
 QueryAsyncBoundary.CSROnly = CSROnlyQueryAsyncBoundary

packages/react-query/src/QueryErrorBoundary.tsx

@@ -2,6 +2,12 @@ import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react'
 import { ErrorBoundary } from '@suspensive/react'
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
+/**
+ * This component wrapping QueryErrorResetBoundary of @tanstack/react-query with @suspensive/react's ErrorBoundary.
+ *
+ * with this component, You don't have to make unnecessary repetitive implementation to combine ErrorBoundary with QueryErrorResetBoundary
+ * @see {@link https://docs.suspensive.org/docs/react-query/src/QueryErrorResetBoundary.i18n Suspensive Official Docs}
+ */
 export const QueryErrorBoundary = forwardRef<
   ComponentRef<typeof ErrorBoundary>,
   ComponentPropsWithoutRef<typeof ErrorBoundary>

packages/react-query/src/useSuspenseInfiniteQuery.ts

@@ -35,6 +35,10 @@ export type UseSuspenseInfiniteQueryOptions<
   'suspense' | 'queryKey' | 'queryFn'
 >
 
+/**
+ * This hook wrapping useInfiniteQuery of @tanstack/react-query with default suspense option. with this hook, you don't have to make unnecessary type narrowing
+ * @see {@link https://docs.suspensive.org/docs/react-query/src/useSuspenseInfiniteQuery.i18n Suspensive Official Docs}
+ */
 export function useSuspenseInfiniteQuery<
   TQueryFnData = unknown,
   TError = unknown,

packages/react-query/src/useSuspenseQuery.ts

@@ -23,6 +23,10 @@ export type UseSuspenseQueryOptions<
   TQueryKey extends QueryKey = QueryKey
 > = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'suspense' | 'queryKey' | 'queryFn'>
 
+/**
+ * This hook wrapping useQuery of @tanstack/react-query with default suspense option. with this hook, you don't have to make unnecessary type narrowing
+ * @see {@link https://docs.suspensive.org/docs/react-query/src/useSuspenseQuery.i18n Suspensive Official Docs}
+ */
 export function useSuspenseQuery<
   TQueryFnData = unknown,
   TError = unknown,

packages/react/src/AsyncBoundary.tsx

@@ -25,7 +25,15 @@ const CSROnlyAsyncBoundary = forwardRef<ComponentRef<typeof ErrorBoundary>, Prop
   )
 )
 
+/**
+ * This component is just wrapping Suspense and ErrorBoundary in this library. to use Suspense with ErrorBoundary at once easily.
+ * @see {@link https://docs.suspensive.org/docs/react/src/AsyncBoundary.i18n Suspensive Official Docs}
+ */
 export const AsyncBoundary = BaseAsyncBoundary as typeof BaseAsyncBoundary & {
+  /**
+   * CSROnly mode make AsyncBoundary can be used in SSR framework like Next.js with React 17 or under
+   * @see {@link https://docs.suspensive.org/docs/react/src/AsyncBoundary.i18n Suspensive Official Docs}
+   */
   CSROnly: typeof CSROnlyAsyncBoundary
 }
 AsyncBoundary.CSROnly = CSROnlyAsyncBoundary

packages/react/src/ErrorBoundary.tsx

@@ -16,10 +16,33 @@ import { isDifferentArray } from './utils'
 
 type Props = PropsWithRef<
   PropsWithChildren<{
+    /**
+     * an array of elements for the ErrorBoundary to check each render. If any of those elements change between renders, then the ErrorBoundary will reset the state which will re-render the children
+     */
     resetKeys?: unknown[]
+    /**
+     * when ErrorBoundary is reset by resetKeys or fallback's props.reset, onReset will be triggered
+     */
     onReset?(): void
+    /**
+     * when ErrorBoundary catch error, onError will be triggered
+     */
     onError?(error: Error, info: ErrorInfo): void
-    fallback: ReactNode | ((props: { error: Error; reset: () => void }) => ReactNode)
+    /**
+     * when ErrorBoundary catch error, fallback will be render instead of children
+     */
+    fallback:
+      | ReactNode
+      | ((props: {
+          /**
+           * when ErrorBoundary catch error, you can use this error
+           */
+          error: Error
+          /**
+           * when you want to reset caught error, you can use this reset
+           */
+          reset: () => void
+        }) => ReactNode)
   }>
 >
 
@@ -81,6 +104,10 @@ class BaseErrorBoundary extends Component<Props, State> {
   }
 }
 
+/**
+ * This component provide a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.
+ * @see {@link https://docs.suspensive.org/docs/react/src/ErrorBoundary.i18n Suspensive Official Docs}
+ */
 export const ErrorBoundary = forwardRef<{ reset(): void }, ComponentPropsWithoutRef<typeof BaseErrorBoundary>>(
   (props, resetRef) => {
     const group = useContext(ErrorBoundaryGroupContext)

packages/react/src/ErrorBoundaryGroup.tsx

@@ -6,11 +6,23 @@ if (process.env.NODE_ENV !== 'production') {
   ErrorBoundaryGroupContext.displayName = 'ErrorBoundaryGroupContext'
 }
 
+/**
+ * ErrorBoundaryGroup is Component to manage multiple ErrorBoundaries
+ * @see {@link https://docs.suspensive.org/docs/react/src/ErrorBoundaryGroup.i18n Suspensive Official Docs}
+ * @see {@link https://github.com/toss/slash/pull/157 Pull Request to add ErrorBoundaryGroup in @toss/error-boundary}
+ */
 export const ErrorBoundaryGroup = ({
   blockOutside = false,
   children,
 }: {
+  /**
+   * If you use blockOutside as true, ErrorBoundaryGroup will protect multiple ErrorBoundaries as its children from external ErrorBoundaryGroup's resetKey
+   * @default false
+   */
   blockOutside?: boolean
+  /**
+   * Use multiple ErrorBoundaries inside of children
+   */
   children?: ReactNode
 }) => {
   const [resetKey, reset] = useKey()
@@ -26,7 +38,14 @@ export const ErrorBoundaryGroup = ({
   return <ErrorBoundaryGroupContext.Provider value={{ reset, resetKey }}>{children}</ErrorBoundaryGroupContext.Provider>
 }
 
-const ErrorBoundaryGroupReset = ({ trigger: Trigger }: { trigger: ComponentType<{ reset: () => void }> }) => {
+const ErrorBoundaryGroupReset = ({
+  trigger: Trigger,
+}: {
+  /**
+   * When you want to reset multiple ErrorBoundaries as children of ErrorBoundaryGroup, You can combine any other components with this trigger's reset
+   */
+  trigger: ComponentType<ReturnType<typeof useErrorBoundaryGroup>>
+}) => {
   const { reset } = useErrorBoundaryGroup()
 
   return <Trigger reset={reset} />
@@ -37,7 +56,12 @@ ErrorBoundaryGroup.Reset = ErrorBoundaryGroupReset
 export const useErrorBoundaryGroup = () => {
   const { reset } = useContext(ErrorBoundaryGroupContext)
 
-  return { reset }
+  return {
+    /**
+     * When you want to reset multiple ErrorBoundaries as children of ErrorBoundaryGroup, You can use this reset
+     */
+    reset,
+  }
 }
 
 export const withErrorBoundaryGroup =

packages/react/src/Suspense.tsx

@@ -5,7 +5,15 @@ type Props = SuspenseProps
 const DefaultSuspense = (props: Props) => <BaseSuspense {...props} />
 const CSROnlySuspense = (props: Props) => (useIsMounted() ? <BaseSuspense {...props} /> : <>{props.fallback}</>)
 
+/**
+ * This component is just wrapping React's Suspense. to use Suspense easily in Server-side rendering environment like Next.js
+ * @see {@link https://docs.suspensive.org/docs/react/src/Suspense.i18n Suspensive Official Docs}
+ */
 export const Suspense = DefaultSuspense as typeof DefaultSuspense & {
+  /**
+   * CSROnly mode make Suspense can be used in SSR framework like Next.js with React 17 or under
+   * @see {@link https://docs.suspensive.org/docs/react/src/Suspense.i18n Suspensive Official Docs}
+   */
   CSROnly: typeof CSROnlySuspense
 }
 Suspense.CSROnly = CSROnlySuspense