Documenting React Components With Storybook

Emma Wedekind ✨ 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]
markdown guide
 

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?

 
 

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?

 

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.

 

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

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 :)

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

 

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

 

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! :)

 

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

 

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

 
 
 

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

 

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?

 

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;
};
 

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

code of conduct - report abuse