8 ms·

Storybook 6.0 your new favourite tool for front-end development

168 points by winkerVSbecks 6y ago

gmaster1440 6y ago
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 6y ago
  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/?path=/story/components-brand--without-brand-link https://5d28eb5ee163f6002046d6fb-paaagcevde.chromatic.com/?p...
  - ghengeveld 6y ago
    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
andybak 6y ago
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 6y ago
  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-documentation-and-code-reviews/ http://www.sheshbabu.com/posts/how-we-use-storybook-for-docu...
  - andybak 6y ago
    That's much clearer. I wish someone like you had written the original article.
randiantech 6y ago
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.
hsavit1 6y ago
anyone out there using Storybook with React Native? I'm curious to hear if it is as useful as Storybook for web is.
- winkerVSbecks 6y ago
  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 6y ago
    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 6y ago
      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-storybook-or-your-app https://github.com/storybookjs/react-native#optionally-run-s...
      - yawnr 6y ago
        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.
- yawnr 6y ago
  We were using it for awhile and it was pretty much a nightmare. Couldn’t use a debugger, hot reloading didn’t work, if an error was thrown you’d have to refresh like 8 times. That being said I think it was v4 or v5. Maybe it’s better now. Eventually I just decided to roll my own for our team.
city41 6y ago
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 6y ago
  Do you mind explaining more about how you use Storybook for your game entities?
  - city41 6y ago
    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 6y ago
      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
michaelmior 6y ago
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 6y ago
  If you like Percy, check out Chromatic which is similar and actually built by the same people who maintain Storybook.
  - michaelmior 6y ago
    Thanks for the pointer! Somehow I hadn't heard of Chromatic. I'll have to check it out.
sthomas1618 6y ago
In addition to Storybook, their Chromatic product is amazing. Hot take: Delete your snapshot tests. Use Chromatic instead.
- thrownaway954 6y ago
  when suggesting a complementary or competing tool... it is best to add a link to it. https://www.chromatic.com/ https://www.chromatic.com/
- mikewhy 6y ago
  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 6y ago
    I've never understood snapshot tests either. My team tried them early on but abandoned them quickly. Whats the value in them?
xrd 6y ago
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.
- city41 6y ago
  Storybook is also a nice launching point for visual diffing. At my previous job we used a tool that ran all of our stories and did an image diff. It makes catching css regressions much easier. There are some challenges, for example when I had left we still hadn't fully found a solid way to diff the components in interactive states, but even without that it was very useful.
- ghengeveld 6y ago
  Check out Chromatic if you want CI for Storybook.
- DrBazza 6y ago
  Jetbrains use Storybook and capture screenshots of the UI and automatically (visually) diff them. https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-do-we-test-it/ https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-...
- winkerVSbecks 6y ago
  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.
somehnguy 6y ago
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 6y ago
  Fixing now, thanks for bringing it to our attention
cheez 6y ago
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.
xingped 6y ago
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.
- city41 6y ago
  Storybook as an official documentation tool is a fairly new idea. They added Storybook Docs pretty recently, which is basically stories that can be written in MDX. It also enables you to document a component's props among other things. IMO, Storybook Docs is on the right path and will become a great documentation tool. But just using straight up Storybook as documentation, I agree that isn't very good. Whenever I'm just given a random Storybook, my success with that library has been pretty low.
- ghengeveld 6y ago
  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 6y ago
    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!
brightball 6y ago
Can it work with TailwindCSS?
- wingtask 6y ago
  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.
Rapzid 6y ago
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 6y ago
  Interested on the incrementally enhanced part of your comment. Are you using Vue with the script tags and using .vue components?
  - Rapzid 6y ago
    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 6y ago
      What kind of webpack config are you using? Something similar to Laravel Mix?
mixmastamyk 6y ago
> 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.
yboris 6y ago
FYI: https://storybook.js.org/ https://storybook.js.org/ eats 100% of my CPU when I'm on the website!
- kylesuss 6y ago
  Thanks for the heads up! We just merged a fix for this so it should be fixed shortly.
Fr33maan 6y ago
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
littlecranky67 6y ago
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 6y ago
  If you're interested in maintaining knobs, please jump on our Discord! https://discord.gg/UUt2PJb https://discord.gg/UUt2PJb

168 points by winkerVSbecks 6y ago

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 6y ago
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/?path=/story/components-brand--without-brand-link https://5d28eb5ee163f6002046d6fb-paaagcevde.chromatic.com/?p...
- ghengeveld 6y ago
  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

andybak 6y ago

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 6y ago
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-documentation-and-code-reviews/ http://www.sheshbabu.com/posts/how-we-use-storybook-for-docu...
- andybak 6y ago
  That's much clearer. I wish someone like you had written the original article.

randiantech 6y ago

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.

hsavit1 6y ago

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

winkerVSbecks 6y ago
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 6y ago
  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 6y ago
    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-storybook-or-your-app https://github.com/storybookjs/react-native#optionally-run-s...
    - yawnr 6y ago
      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.
yawnr 6y ago
We were using it for awhile and it was pretty much a nightmare. Couldn’t use a debugger, hot reloading didn’t work, if an error was thrown you’d have to refresh like 8 times. That being said I think it was v4 or v5. Maybe it’s better now. Eventually I just decided to roll my own for our team.

city41 6y ago

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 6y ago
Do you mind explaining more about how you use Storybook for your game entities?
- city41 6y ago
  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 6y ago
    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

michaelmior 6y ago

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 6y ago
If you like Percy, check out Chromatic which is similar and actually built by the same people who maintain Storybook.
- michaelmior 6y ago
  Thanks for the pointer! Somehow I hadn't heard of Chromatic. I'll have to check it out.

sthomas1618 6y ago

In addition to Storybook, their Chromatic product is amazing. Hot take: Delete your snapshot tests. Use Chromatic instead.

thrownaway954 6y ago
when suggesting a complementary or competing tool... it is best to add a link to it. https://www.chromatic.com/ https://www.chromatic.com/
mikewhy 6y ago
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 6y ago
  I've never understood snapshot tests either. My team tried them early on but abandoned them quickly. Whats the value in them?

xrd 6y ago

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.

city41 6y ago
Storybook is also a nice launching point for visual diffing. At my previous job we used a tool that ran all of our stories and did an image diff. It makes catching css regressions much easier. There are some challenges, for example when I had left we still hadn't fully found a solid way to diff the components in interactive states, but even without that it was very useful.
ghengeveld 6y ago
Check out Chromatic if you want CI for Storybook.
DrBazza 6y ago
Jetbrains use Storybook and capture screenshots of the UI and automatically (visually) diff them. https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-do-we-test-it/ https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-...
winkerVSbecks 6y ago
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.

somehnguy 6y ago

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 6y ago
Fixing now, thanks for bringing it to our attention

cheez 6y ago

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.

xingped 6y ago

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.

city41 6y ago
Storybook as an official documentation tool is a fairly new idea. They added Storybook Docs pretty recently, which is basically stories that can be written in MDX. It also enables you to document a component's props among other things. IMO, Storybook Docs is on the right path and will become a great documentation tool. But just using straight up Storybook as documentation, I agree that isn't very good. Whenever I'm just given a random Storybook, my success with that library has been pretty low.
ghengeveld 6y ago
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 6y ago
  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!

brightball 6y ago

Can it work with TailwindCSS?

wingtask 6y ago
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.

Rapzid 6y ago

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 6y ago
Interested on the incrementally enhanced part of your comment. Are you using Vue with the script tags and using .vue components?
- Rapzid 6y ago
  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 6y ago
    What kind of webpack config are you using? Something similar to Laravel Mix?

mixmastamyk 6y ago

> 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.

yboris 6y ago

FYI: https://storybook.js.org/ https://storybook.js.org/ eats 100% of my CPU when I'm on the website!

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

Fr33maan 6y ago

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

littlecranky67 6y ago

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 6y ago
If you're interested in maintaining knobs, please jump on our Discord! https://discord.gg/UUt2PJb https://discord.gg/UUt2PJb