DEV Community

Documenting React Components With Storybook

Emma Bostian ✨ on May 06, 2019

What Is Storybook? Storybook markets itself as a playground for UI components and its main focus is on “writing stories.” Storybook use...

Read full post

Michael Tharrington • May 6 '19

I'm admittedly not the most technical person here 😅 but it's possible that I caught a typo:

"Storybook uses the concept of stories to document complements."

Is complements meant to be components there?

Emma Bostian ✨ • May 7 '19

LOOL ya thanks

eerk • May 9 '19 • Edited

I still find it hard to wrap my head around the storybooks concept.... what's the difference with just writing React components to test out a UI?

And what if I'm happy with my storybook... can I export it as a React app?

Mike Ekkel • Jun 27 '19

Bit late to the party here, but I don't think it's about being able to export it as a React app but more to document your components. Knowing what components you have and how they behave is invaluable as it will reduce the time you spend re-inventing the wheel you invented a while ago with some other component.

eerk • Jun 28 '19

So it's just for testing out components, and when they work, then you... copy > paste the code?

Mike Ekkel • Jun 28 '19

I have yet to test it out this far. I'm probably going to dabble around with Storybook this weekend as I want to suggest it to my team. I recently joined the team but there is no design system in place, nor are any of the components documented which makes the codebase a bit of a mess. I'm trying to turn the tide and looking for ways to help us keep track of our components, how we use them and what we can customise. Storybook seems like a good choice, but I'll have to give it a whirl before I know for sure. I'll write about my experience with it and will include a way to 'export' it to your own codebase if I find one :)

eerk • Jun 28 '19

Haha, great! Looking forward to the post. So many things to learn and try out.

Elizabeth Schafer • May 6 '19

I love Storybook! It's so much easier building and testing components in isolation.

Tirtha Guha • Sep 30 '19

Hi,

Are there any alternatives of storybook. I find storybooks a little un-customisable, if I have to host my component library for demo purpose. I want to have a different home page and component listing, may be some custom tags like experimental, under development, release versions etc against each component.

AxelleDRouge • Jan 16 '20

I have just started working with storybook on a project that I have designed, with Adobe XD. I love the process with the Component Driven Development. It feels more clean and swift.I know what I want and to how to get it component by component. love it <3

Alex Barashkov • May 6 '19

Thanks for the article. Exactly wanted this sort of guide to throw it to devs who don't familiar with a storybook concept.

Miguel • May 7 '19

Thank you for this article! I have dabbled into Storybook with Vue a few days ago and was considering writing an article on my experience as well, and your post has inspired me to do so. Cheers! :)

pgangwani • May 6 '19

Awesome write up

Christopher Kade • May 11 '19

Thanks for the article ! It pushed me to start writing a component library just for the heck of it 😍, the development experience is extremely smooth so far

Mattia Astorino • May 7 '19

Awesome! I also use the plugin storybook-knobs to set states in a single story and storybook-addon-a11y to run basic a11y tests.

AnfossiStudio • May 6 '19

Awesome Article Thank you

Nam Pham • May 8 '19 • Edited

I’m struggling with setting up React TypeScript with the react-native-package, it could not build using webpack tweak. Do you have any skill in this topic?

Leo Y. Li • May 8 '19

You may want to join our discord here: discordapp.com/invite/UUt2PJb. But this should be easy to do using Babel 7 by putting this extending webpack under .storybook folder:

const webpack = require('webpack');

module.exports = async ({ config }) => {
 // typescript supports
 config.module.rules[0] = { ...config.module.rules[0], test: /\.(mjs|jsx?|tsx?)$/ };
 config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];

 return config;
};

Cameron Green • May 24 '19

Ahh. I struggled way too long with themeing my storybook!
Thanks!