[Feature]: Support codesandbox to provide interactive examples

[manudeli]

Package Scope

docs

• Add to an existing package
• New package

Package name:

Overview

Describe the solution you'd like

Additional context

[manudeli]

@minsoo-web How about making Pull Request for adding codesandbox embed in documentation
Let's make our documentation like Panda CSS. Can I assign you with me?

[minsoo-web]

Of course. It is my pleasure. I will do my best 🚀🚀🚀

[minsoo-web]

How about like this case ?
https://polaris.shopify.com/components/typography/text

[manudeli]

ref https://github.com/codesandbox/sandpack

[manudeli]

@minsoo-web Could I assign you for v2 docs soon?

@sonsurim We need someone have no experience for this library to see how difficulty to onboard with this. Could you be the one to see it objectively?

[minsoo-web]

@minsoo-web Could I assign you for v2 docs soon?

Of course, I'll work on it

[sonsurim]

@sonsurim We need someone have no experience for this library to see how difficulty to onboard with this. Could you be the one to see it objectively?

@manudeli
Sure, that's great, I'll see it out and leave a comment!

[sonsurim]

@manudeli I was just wondering, Could I see it when it's done?

[manudeli]

@manudeli I was just wondering, Could I see it when it's done?

@sonsurim I guess that v2 will be release until at least in March, After then We need to do this work(codesandbox for interactive examples) in v2. at that time We need your help for new examples or comment or review

[manudeli]

reference

https://github.com/TanStack/query/blob/main/.codesandbox/ci.json

We can check examples in Pull Request too.

[minsoo-web]

@manudeli

I'd like to ask for your opinion, the docs of @chara-ui/react, which I'm using as a reference, are provided as a library called react-live. I'm impressed that you can add scope, so that you can modify only the code blocks you need without separate function declarations and import syntax.

However, I think the import syntax is necessary information for the user, and the function declaration and use-case should also show the entire code. I'd love to hear your thoughts on whether using react-live or sandpack is the right way to go!

[manudeli]

@minsoo-web This issue is important. share plan please if you can