WIP: Switch to Storybooks for Documentation and Sandboxing

[adaliszk]

What is it?

• [x] Feature/Enhancement
• [ ] Bug
• [x] Docs/Tests

Description

I am adding storybooks to describe the components' development, testing, and documentation. This allows us to iterate quickly without needing to build a custom website.

Why?

Storybook is relatively standard for UI library documentation; the general idea is to provide an automated documentation page that can act as a development playground.

TODOs

• [x] Add Storybooks v7 with Vite and render Qwik components
• [x] Create Storybook theme to reflect the color design of Qwik
• [x] Create Storybook template package for easily reusability
• [ ] Move website documentation into stories
• [ ] Setup landing page and deploy it to a CDN
• [ ] Extend the Contribution guide
• [ ] Add automated deployments for feature branches
• [ ] Add automated deployments for the main branch

Checklist:

• [ ] My code follows the developer guidelines of this project
• [ ] I have performed a self-review of my code
• [ ] I have made corresponding changes to the documentation
• [ ] Added new tests to cover the fix/functionality

References

• https://github.com/literalpie/storybook-framework-qwik
• https://storybook.js.org/docs/7.0/qwik/get-started/introduction
• https://www.chromatic.com/docs

[github-actions[bot]]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[adaliszk]

I have read the CLA Document and I hereby sign the CLA

[gioboa]

With this PR we can replace the entire documentation website, right? Can we add also information about "getting started" and other custom pages?

[adaliszk]

/related https://github.com/BuilderIO/qwik/issues/3061

[adaliszk]

/issue https://github.com/qwikifiers/qwik-ui/issues/77

[adaliszk]

@gioboa

With this PR, we can replace the entire documentation website, right? Can we also add information about "getting started" and other custom pages?

Yes, besides the auto-documentation and stories, we can also write custom pages with JSX flavored Markdown: https://storybook.js.org/docs/react/writing-docs/mdx

[gioboa]

@gioboa

With this PR, we can replace the entire documentation website, right? Can we also add information about "getting started" and other custom pages?

Yes, besides the auto-documentation and stories, we can also write custom pages with JSX flavored Markdown: https://storybook.js.org/docs/react/writing-docs/mdx

Sounds great 👏

[gioboa]

I converted the PR in draft because is WIP, please mark it as ready when it's ok. Thanks

[adaliszk]

Thank you, I have forgotten that. Can you also assign the PR and the issue to me?

[gioboa]

is this PR still valid? cc @shairez

[adaliszk]

I had no time in the past month to update it, so likely not anymore. I'll close it so no confusion would come from it :wink: