feat: add Storybook starter

[DustinJSilk]

What is it?

• [X] Feature / enhancement
• [ ] Bug
• [X] Docs / tests

Description

Adds a new starter script to add Storybook to a project.

Caveats

• This has been tested with Node 16, 17, 18 and only installs properly with node 17+.
• Qwik can't be built into a static Storybook site

Use cases and why

• 1. Regular users
• 2. Library maintainers

Checklist:

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

[bolt-new-by-stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[DustinJSilk]

@manucorporat The static storybook build doesn't work with Qwik, so we're unable to deploy preview versions. Is this something you could help with?

[manucorporat]

yes! i would love to help, are you in discord?

[DustinJSilk]

Yes! You can find me under DustinJSilk#5412, just sent you a message as well

[DustinJSilk]

One more issue to note is that the @qwik-city-sw-register module fails to import when adding a QwikCityMockProvider. This is also during a static build.

Failed to resolve module specifier "@qwik-city-sw-register". Relative references must start with either "/", "./", or "../".

[DustinJSilk]

I did a little more digging around and it seems like this configuration wont work with the next versions of storybook + builder-vite.

@literalpie I've taken your advice and I'll get a PR sent to the Storybook repository ASAP

[DustinJSilk]

I did a little more digging around and it seems like this configuration wont work with the next versions of storybook + builder-vite.

@literalpie I've taken your advice and I'll get a PR sent to the Storybook repository ASAP

Actually scratch that, it works quite well with the @storybook/html-vite framework. There's some issues to work through with the static build still however

[DustinJSilk]

Fixed storybook dependencies to 7.0.0-beta.8. beta.9+ can't run static builds: https://github.com/storybookjs/storybook/issues/20307.

Final issue remaining is HMR - or finding a way to refresh the iframe when a component updates

[literalpie]

I made a storybook-framework-qwik library and released a 0.0.1 version mostly based on the changes here.

I think having a framework package will be beneficial so improvements can be made to the configuration without consumers needing to change anything.

If you continue with this PR as is, I can make a follow-up to utilize the framework package (or you can use it now if you want)

[DustinJSilk]

@literalpie, yes that would be nice, have you tried sending a PR to storybook to get it merged in and officially supported there?

[literalpie]

@DustinJSilk Based on this comment, I think they prefer to let framework packages stabilize before they pull them into the monorepo. I'm guessing at a minimum, we should add better documentation, types, and follow the steps in documentation from that PR more closely (I'll try to circle back soon and do that soon) We can probably contact them before then to let them know about the framework (one of the steps recommended in that guide), but I think I'd prefer to wait until at least refreshing works before advertising this too widely.

[literalpie]

Hi, an update on progress with this: I've made a few new releases of my framework (0.0.3 is the latest right now). It now refreshes stories when code changes are made. Otherwise, it basically behaves the same as the setup in this starter.

I posted in the Storybook Discord, and they pointed me in a direction I can go to try getting npx storybook init working with storybook-framework-qwik outside the monorepo. I plan to get that set up in the next few days.

I think my ideal setup would be that qwik add storybook is basically just an alias for npx storybook init so we can avoid maintaining the logic in multiple places.

[DustinJSilk]

@literalpie I've updated this PR to include your library, well done! Feel free to suggest any changes

[literalpie]

Qwik support has been added to the storybook CLI. You can now add storybook to a qwik project with npx storybook@next init. Is there a way to have a starter script in the Qwik CLI just run another script? You could also update the documentation to link to the Storybook documentation (maybe at the end of the "usage" section would be a good place). It doesn't have any Qwik-specific content, and it just falls back to React examples, but I'll work on adding that soon.

[zanettin]

great job 🎉 thanks a lot! just have recognized that no qwik logo is visible on the SB docs page atm.

[DustinJSilk]

Closing this PR since the documentation & configuration exists in the storybook repository and in storybook-framework-qwik.