
Storybook 6.0 your new favourite tool for front-end development - winkerVSbecks
https://medium.com/storybookjs/storybook-6-0-1e14a2071000
======
xrd
Many teams struggle to write tests for their UI. It's a hard problem to solve,
a mixture of culture challenges and technology challenges.

Tests show how pieces work together outside of the small confines of a live
system. If you don't write tests, you probably aren't considering all the ways
you component can work outside of the narrow confines when you, as the author,
wrote and tested it. And, you probably can't consider how another developer
will use your component and change the environmental code around it.

Storybook gives you all the benefits of tests in that you can pull out pieces
and play them back in isolation. I see all the benefits of tests (except that
I don't see the results in CI) when using storybook and refactoring. Broken
stories tell me a lot about code problems.

Storybook is UI testing done right, we just needed to brand it as a story
rather than a test. ;)

Congratulations on a big milestone. This is an incredible piece of software
that I use on all my projects.

~~~
winkerVSbecks
Storybook pairs extremely well with
[https://www.chromatic.com](https://www.chromatic.com) to give you that great
test automation experience. Essentially Chromatic runs visual diffing for all
your stories. You can run them on multiple browsers and even for multiple view
port sizes.

~~~
dbbk
It actually pairs well because this is a SaaS service run by the maintainers
of Storybook.

------
city41
This is great to see. I've always been a fan of Storybook but have also
struggled with it a lot. Each new release has reduced the struggle. To their
credit, it's hard to drop something like Storybook into a project because
frontend projects have almost no rhyme or reason to how they are made up
(well, React anyway, which is what I mostly work in).

I am also using Storybook for my game dev. I wrote my own renderer for my
engine and so the entities in my game have stories. It makes building new
entities and seeing how two entities interact so much nicer and faster.

~~~
Kiro
Do you mind explaining more about how you use Storybook for your game
entities?

~~~
city41
I will eventually write a blog post about it. But in the mean time this tweet
give the overall gist

[https://twitter.com/mattegreer/status/1244012323976515584](https://twitter.com/mattegreer/status/1244012323976515584)

I made it so I can create a game scene out of ASCII characters, and then I can
also tweak the scene and/or entities within the scene with code if needed (but
it almost never is). Then the Storybook renderer instantiates a canvas and the
game engine, and populates it with the scene.

Making your own renderer is pretty much totally undocumented. I took the React
renderer as a basis
([https://github.com/storybookjs/storybook/tree/next/app/react](https://github.com/storybookjs/storybook/tree/next/app/react))
and tweaked from there. I have spoken with Michael Shilman about this and
there are plans to document it and make it easier to do, not sure where they
are on that though.

It's so undocumented and uncharted I'm not even sure if "renderer" is the
right name for these things.

~~~
ghengeveld
There's documentation for creating your own framework integration now:
[https://storybook.js.org/docs/react/api/new-
frameworks](https://storybook.js.org/docs/react/api/new-frameworks)

~~~
city41
Oh awesome! Thanks for adding that, I will definitely be making use.

------
xingped
Anecdote, but at my work there's two teams whose libraries we use that use
Storybook for documentation and it is decidedly worse than other teams that
create non-Storybook documentation.

I don't know if this is a doc writing problem or a product problem with how
Storybook works (is it even supposed to be a documentation product? I don't
know), but so far my experience has been a 0 for 2 with Storybook-based
documentation being significantly worse than normal.

~~~
ghengeveld
Hey, someone from the Storybook team here. We'd love to get actionable
feedback about Storybook for documentation. Why is it so much worse that what
you're used to? Can you be specific?

~~~
xingped
Hey there! I just say this as an anecdote of someone who has been a consumer
of two teams that use Storybook, so I have not used Storybook myself.

That said, the biggest problem I've had is the "living code samples". I'm not
sure of the exact name, but the feature where you display a component on the
page and click the Show Code button to do a flip and see the code that drives
it. The libraries we use that use Storybook are fairly complex, so I'm not
sure how much that has something to do with it, but not a single "living code
sample" has been a self-contained example.

When I look at code samples for libraries, I expect I should be able to more
or less copy/paste the code directly into my application and it should just
work (once the dependencies are added). This includes things like import
statements as well so I know where things are being imported from in the case
of multiple import paths for a library. Unfortunately, instead it's been lots
of wrappers and helper functions in the storybook examples and I've only
gotten vague answers of "storybook limitations" as to why they're not totally
self-contained copy-and-paste-able.

I'll see if I can speak with one of the engineers at work to ask more about
the limitations he meant when I complained about the examples not being self-
contained and get back to you on that.

I hope this makes sense and is actually helpful!

------
andybak
I've skimmed that page and I'm not entirely sure I came away knowing what it
meant. It's good to see an open source project that can compete with large
commercial companies in terms of inscrutable fluff.

~~~
rkwz
Storybook is a tool for organizing UI components. It displays the different
components and their variants in a easy to glance UI. Highly recommended if
you're working with React, Vue etc

Here's a post I wrote about how my team uses it -
[http://www.sheshbabu.com/posts/how-we-use-storybook-for-
docu...](http://www.sheshbabu.com/posts/how-we-use-storybook-for-
documentation-and-code-reviews/)

~~~
andybak
That's much clearer. I wish someone like you had written the original article.

------
michaelmior
I haven't played around with v6.0 yet, but I've been using Storybook for a
while now and it's been great! A lot of the new features aren't relevant to
most of the components in the current app I'm working on, but the changes
still help reduce a lot of the boilerplate with configuration.

On a related note, I've also started playing with Percy
([https://percy.io/](https://percy.io/)) which automatically integrates with
Storybook to provide visual diffs of components in multiple browsers. Super
useful for quickly validating changes since it can automatically comment on
your GitHub PRs when a change is detected. (Not affiliated with Percy at all,
just a fan.)

~~~
ghengeveld
If you like Percy, check out Chromatic which is similar and actually built by
the same people who maintain Storybook.

~~~
michaelmior
Thanks for the pointer! Somehow I hadn't heard of Chromatic. I'll have to
check it out.

------
sthomas1618
In addition to Storybook, their Chromatic product is amazing.

Hot take: Delete your snapshot tests. Use Chromatic instead.

~~~
mikewhy
I would love for someone to give examples of how snapshot / storyshot testing
actually helped. Always seemed like the dollar-store version of screenshot
diffing, with extra baggage kept around the source tree, added maintenance,
and seemingly worthless tests.

(No, `expect(<MyComponent />).toMatchSnapshot()` is not a good test).

~~~
sthomas1618
I've never understood snapshot tests either. My team tried them early on but
abandoned them quickly. Whats the value in them?

------
randiantech
Although configuration can be a bit problematic at first, the benefits of
using Storybook are clear. In my previous job, the typical question of "Is
there a component for something like <X>?" was pretty much resolved going to
Storybook and check for it.

------
Rapzid
Storybook has been great working on an incrementally enhanced Vue app. The
standard app doesn't really work with HMR and is a PITA when it comes to
feedback loop.

Building out components in Storybook with all but the final page integration
into the main app has been a great workflow thus far. Some custom API
recording/playback utils have even made it a snap to work on larger
"connected" components within Storybook. Even just being able to manually
verify a bunch of different states after making a refactor by flipping through
the component stories is a huge win over doing that in-app.

What was no so great with 5.x is getting it to build like a @vue/cli stock
build with sass and full sourcemap support. This took quite a bit of Webpack
knowledge of which I already had a fair bit but now have far more. Still the
source lines are wrong in error messages for Vue compoments(at least with
TypeScript) and I haven't looked too far into why yet.

I know they have put work into making Storybook 6.0 setup for Vue closer to
the ecosystem defacto defaults, but I'm not super looking forward to upgrading
and having to sort out any issues haha.

~~~
raihansaputra
Interested on the incrementally enhanced part of your comment. Are you using
Vue with the script tags and using .vue components?

~~~
Rapzid
Essentially. We build out a bunch of separate entry points(pages in @vue/cli
language) in two separate groups; components and pages. Both serve the same
purpose in that the entry point is responsible for wiring the Vue components
into the legacy page. Components may be included on every page or a number of
pages, "page" entry points are meant to be included on certain routes.

They are brought in via script tags in the legacy web framework.

~~~
raihansaputra
What kind of webpack config are you using? Something similar to Laravel Mix?

~~~
Rapzid
I just found out about Laravel Mix a month or so ago so I'm not sure. They are
customized @vue/cli configs:

Main UI:
[https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai...](https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-
spa/packages/ui/vue.config.js)

Component lib:
[https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai...](https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-
spa/packages/ui-trellis/vue.config.js)

Storybook:
[https://github.com/rundeck/rundeck/blob/main/rundeckapp/grai...](https://github.com/rundeck/rundeck/blob/main/rundeckapp/grails-
spa/packages/ui-trellis/.storybook/main.js)

~~~
raihansaputra
Thank you for sharing!

------
somehnguy
This looks fantastic! I just installed it to a test branch on my React/Redux
project. Unfortunately after running 'npm run storybook' and clicking any of
the 'Configure' options I get a 404 from Github.

Any of these links:
[https://i.imgur.com/GwrOwiS.png](https://i.imgur.com/GwrOwiS.png)

Maybe it has to do with my install method? The 'npx sb init' on the get-
started page did not work, I had to hunt down the npm package manually and do
'npx -p @storybook/cli sb init'. I'm assuming the sb init listed on the get-
started page failed because I didn't have it installed yet? No mention of how
to do that on the page though. I'm relatively inexperienced with npm. It does
report that I'm running v6.0.4 instead of v6.0.0 though.

Again this looks like it'll be a great help for my work (I tend to struggle
with UI work a bit) but by now I should know that when a project promises
'magic simple setup' it is never the case :P

I'll keep playing when I have more time later because I think it will be worth
it.

~~~
domyen
Fixing now, thanks for bringing it to our attention

------
gmaster1440
Really enjoyed using the tool when I was working on a React codebase, would
love to see support for Blazor[1] at some point!

[1] [https://dotnet.microsoft.com/apps/aspnet/web-
apps/blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor)

~~~
rkwz
Yes, that would be awesome!

I wonder how they render the components - I see that the the component
previews [1] are rendered inside an iframe, maybe they render the component to
string and insert it into an iframe? If so, should be straightforward to
implement if the wasm frameworks support render-to-string or equivalent apis.

[1] [https://5d28eb5ee163f6002046d6fb-
paaagcevde.chromatic.com/?p...](https://5d28eb5ee163f6002046d6fb-
paaagcevde.chromatic.com/?path=/story/components-brand--without-brand-link)

~~~
ghengeveld
Here's how to add a new framework:
[https://storybook.js.org/docs/react/api/new-
frameworks](https://storybook.js.org/docs/react/api/new-frameworks)

------
littlecranky67
I've played a little with storybooks now included-by-default addon-controls
package (designated successor to addon-knobs) and got to say, the API has
become worse - especially if you are using TypeScript. It seems the API wasn't
created at all with strong typing in mind, and I can't see how they will ever
be able to get there. Instead of having strong typed concise functions
(number(), color(), etc.) everything now is supposed to be a generic map of
string properties, attached to Component.args and the "type" information is a
custom map assigned to Component.argTypes (similar to prop-types which are
almost obsolete when using TypeScript).

If a SB dev reads this: Please, drop controls, and continue to support the
knobs API.

~~~
shilman
If you're interested in maintaining knobs, please jump on our Discord!
[https://discord.gg/UUt2PJb](https://discord.gg/UUt2PJb)

------
Fr33maan
I strangely use storybook with cypress for react native ui testing automation.
Also to get multiple screen size on the same screen to check everything is
done properly.

I didn't intended to share the repo but as HN is talking about storybook, here
it is. Not ready for prod, many todos but the storybook/cypress is
demonstrated here.

[https://github.com/Fr33maan/react-native-ui-real-
boilerplate](https://github.com/Fr33maan/react-native-ui-real-boilerplate)

------
yboris
FYI: [https://storybook.js.org/](https://storybook.js.org/) eats 100% of my
CPU when I'm on the website!

~~~
kylesuss
Thanks for the heads up! We just merged a fix for this so it should be fixed
shortly.

------
mixmastamyk
> The UI component explorer you’ll ️ to use. > Production-grade component
> development

Huh? Yes, as a dev I understand what these words mean. But there should be
just a tiny amount of exposition of why I'd want to this, on the front page.
Not sure why I'd want to, besides neat pictures.

I'm guessing the folks are so deep into this they don't remember what it's
like to be a newcomer. Interestingly, the github readme is a bit more
descriptive.

------
hsavit1
anyone out there using Storybook with React Native? I'm curious to hear if it
is as useful as Storybook for web is.

~~~
winkerVSbecks
Yea absolutely. I've used it on a few projects. The workflow is slightly
different since the stories on the the simulator/device but, you get all the
same benefits.

~~~
rkwz
Can you elaborate on the workflow you use? The web storybooks can be hosted
which makes it easily shareable with anyone but the RN version cannot be
shared easily - we need to build the storybook and run it inside the
simulator.

~~~
winkerVSbecks
The distribution mechanism is different. The Stories can't be hosted on the
web but, you can embed them in the app itself and give people access to it
with a dev mode flag.

[https://github.com/storybookjs/react-native#optionally-
run-s...](https://github.com/storybookjs/react-native#optionally-run-
storybook-or-your-app)

~~~
yawnr
This is if your components are in the app’s codebase itself and not in a
shared components library. The workflow there gets a bit messy IMO since you
probably need to then maintain an entirely separate RN app just for the
storybook in that component library’s codebase, which leads to a decent amount
of redundant work when upgrading RN versions.

------
brightball
Can it work with TailwindCSS?

~~~
wingtask
Yes I use storybook and tailwindcss. Storybook uses webpack so you configure
it's webpack config with postcss-loader and then use the tailwindcss plugins;
no different than just using tailwindcss and webpack anywhere else.

------
cheez
I have a Jupyter notebook that does this. Not sure I see the value of this
tool but I guess packaging it up nicely is the value.

