feat(suspensive.org): add Sandpack component

[kangju2000]

Overview

related https://github.com/toss/suspensive/pull/867 closed https://github.com/toss/suspensive/issues/7

I have set up the documentation to easily add examples in MDX using Sandpack from CodeSandbox.

I have also carried over the theme selected in the related PR. If there's anything else that needs to be configured, please let me know!

Usage

import { Sandpack } from '@/components'

<Sandpack  
  customSetup={{
    dependencies: {
      '@suspensive/react': 'latest',
      '@suspensive/react-query': 'latest',
      '@tanstack/react-query': '^4.0.0',
    },
  }}
>

```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'

export default wrap
  .ErrorBoundaryGroup({ blockOutside: false })
  .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
  .Suspense({ fallback: <>loading...</>, clientOnly: true })
  .on(() => {
    const query = useSuspenseQuery({
      queryKey: ['key'],
      queryFn: () => api.text(),
    })
    return <>{query.data.text}</>
  })

export const api = {
  text: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { text: 'Hello, Suspensive!' }
  },
}

### Result

https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8

## PR Checklist

- [x] I did below actions if need

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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 5:35am
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 5:35am
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 5:35am

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 9863328945d491e2f7d46dd956909e466c1d1dc4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #963 will create unknown performance changes

_{Comparing sandpack (9863328) with main (20119f8)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 80.67%. Comparing base (20119f8) to head (9863328).

Additional details and impacted files

[](https://app.codecov.io/gh/toss/suspensive/pull/963?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #963 +/- ## ======================================= Coverage 80.67% 80.67% ======================================= Files 36 36 Lines 445 445 Branches 98 98 ======================================= Hits 359 359 Misses 77 77 Partials 9 9 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `96.98% <ø> (ø)` | | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `∅ <ø> (∅)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-await](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/963/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `23.52% <ø> (ø)` | |