Ask HN: Is it time for a new Storybook?

[samhuk]

I'm sure many have heard of Storybook [0]. I've used it pretty much since the start from ~2016 (back when Angular was cargo-culting it like mad). I've always had generally negative experiences with it:

1) Messy Javascript API resulting in inexpressive storybook files, particularly for big frameworks like Angular and big components.

2) Slow AF with webpack/terser/etc. And that's before you start bolting on crazy addons like compodoc.

3) Tries to solve so many different problems (just a subjective opinion of mine).

4) Insane levels of "framework magic", particularly when I've used it with Angular, but also in other scenarios too.

---

So, I wanted to ask HN to gauge the appetite for a similar but not same kind of Storybook:

1) Extremely expressive Javascript API. Think Jest.

2) Go CLI (allowing direct interface with ESBuild, etc.).

3) ESBuild-centric (rather than webpack, or worse, addons [1]).

4) Typescript-centric (rather than seeming like an after-thought).

5) Much less framework magic (think React, Redux, etc. Stick mostly to simple explicit JS behaviors).

6) Probably a lot more that haven't come to mind yet.

Before I go any further with it, it would be amazing to hear what you guys think about all of this. What are your thoughts about Storybook? Too much tech debt for them to modernize? Am I just being silly and picky about Storybook? Am I the crazy one?

I just think it would be amazing to have a frontend workshop app with the speed of esbuild, the expressiveness of jest and cypress, the elegance of React.

Thanks HN!

[0] https://storybook.js.org/

[1] https://storybook.js.org/addons/storybook-addon-turbo-build

[matthewwolfe]

I’ve tried out storybook 7 recently and it does seem a bit better, but I do agree with you that storybook is less than ideal. I see storybook in the same way I see a complex webpack config, I have no idea how it works and once it is finally set up I don’t touch it. I would love to see something as easy as Jest to install with a simple interface for writing and testing react code.

I think storybook tries to do too much, and I’d like to see a really dead simple interface with Vite or similar where I can easily prototype and test stuff based on *.stories.tsx or similar.

I don’t need all the stupid addons, just give me a dev server with navigation and routing built in, and an easy way to hide the whole interface to simulate a normal web page.

[samhuk]

I agree with your comparison to Webpack (and also brought back all of my pre-esbuild memories...). I've worked at some places where a simple component library repo has >100 LoC storybook config files and I was always confused why it had to be like that.

Thanks for your feedback. This is helping me a lot towards understanding what we want from a "component workshop" that perhaps Storybook and others (like Ladle) don't either have or do the way we want. :)

[lmiller1990]

I think a single tool to solve design + testing would be great. Cypress does Component Testing now, and you can use it in a Storybook-esque fashion, but it doesn't export to a static site for documentation, and instead of using knobs/plugins, you automate with the Cypress API. It's missing some of the design touches of Storybook, though.

Storybook is good for design, but the testing integration is definitely lacking. Having to maintain <test suite in Jest> alongside <design suite> feels like a lot of code.

[chantastic]

lmiller1990, have you experimented much with @storybook/test-runner?

I've found it pretty capable for doubling my stories as Jest tests. For those using testing-library for component testing, it even acts like a GUI for those tests.

If you're interested, I threw together a little walkthru that show some of the ways I'm using it with Jest: https://github.com/chantastic/vite-react-jest-testing-librar...

[samhuk]

Thanks for your feedback. I agree on most of your points.

I feel like Cypress moving into the component testing arena was an interesting move.

[babayega2]

Coupled with DOMPurify [0], it helps much to simplify the messy JavaScript, HTML. Yin [1] has book on that.

[0]:https://github.com/cure53/DOMPurify [1]:https://leanpub.com/react-wagtail

[monssoen]

There are some alternatives being built, of which I find ladle.dev the most useful.

[samhuk]

Just taken a look. It's very nice to use. It appears a little early at the moment, and I'm not sure, but it would be nice if it had integrated puppeteer integration for e2e testing (I didn't look for very long, so I may have missed it!).

Thanks for your feedback :)