blitz
blitz copied to clipboard
blitz-js
Storybook (or similar) Recipe
What do you want and why?
I prefer to develop reusable components in isolation using Storybook so support in Blitz would be very useful.
According to https://2019.stateofjs.com/testing/ Storybook is significantly more popular than alternatives such as Styleguidist.
Some teams might also benefit from publishing their Storybook as a helpful guide for other developers.
Possible implementation(s)
- Built-in Blitz support which would require adding the dependencies and config files to the generator templates
- As an installer
Given that Storybook is a popular choice and that it doesn't impose any restrictions on the user, I think built-in support could be best based on the "Convention over Configuration" argument.
Additional context
Hey @jamiedavenport thank you for chiming in! I do like the concept of Storybook, but I always find it so frustrating to use 😅
Someone is working on a new alternative that looks really promising. It's based on Next.js and so integration would be really nice.
Thanks for that link @flybayer I'll take a look at it. If we did move forward with integrating with one of these tools, do you think it'd be best as an external installer or more tightly integrated with Blitz?
I wasn't able to integrate storybook into blitz project because of the conflict between react versions, and I am now testing the mentioned alternative https://vitro.now.sh/. It creates a directory with a separate next.js instance, so there should not be any issues integrating it with the blitz. It doesn't have all storybook features, but for my use-case, it has everything I need.
Hey @anteprimorac would you be able to share an example of how you've got vitro working? I'm trying to but I'm stuck at
Error: module imports rewrite failed
Error: Cannot resolve 'app/core/components/MyComponent'
Hi @beerose!
I'd love to be assigned to this one then! I started trying it on a fork and found a few ways to make it work like originally discussed:
1.) Installs the dependencies, config files, and an example story file in the .stories.mdx format.
---- OR ----
2.) Use the addRunCommandStep() for recipe builders to use the npx sb init command although I'm noticing it runs forever when I use this 😕 (bug maybe?)
Personally, the first option makes more sense to me as you can get the required config files in the desired directory while the second option has the stories folder generated in the root directory instead of like app/core/components. Although when the Blitz Pivot occurs, the second option will work framework agnostic.
I'm open to whatever people think will be a better use for them and I will publish that PR 😃
Hey @Umayarz18!
I think that implementation-wise both solutions sound good and you should go with what you think is best/ more fun for you to implement. Regarding being framework-agnostic concern — even right now some recipes work only with Next (e.g. they edit files that are only in Next framework, and they use Next utilities), so we'll need to find a way to make recipes framework-agnostic anyway. I think that in some cases that would mean maintaining framework-specific recipes, as setup may look different for different frameworks. Having said that I think that we don't have to worry that much about it right now, and you can go ahead with either of your proposed solutions :)
Hiya @beerose,
I will go for that first solution then : ). I feel with the second approach being only just using the recipe builder to run the npx sb init command not helpful as blitz users can do that themselves and still need to rearrange everything for themselves. I think if blitz users want this storybook recipe, it should be configured to match the app folder structure and have story examples for included components.
Update: I've been having success with the recipe builder working properly 🥳. Now just dealing with Storybook only problems that I hope to fix soon. Will make a draft PR soon so others can see the progress on this recipe 😄