DEV Community

Cover image for Documenting React Components With Storybook

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...
Collapse
 
michaeltharrington profile image
Michael Tharrington

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?

Collapse
 
emmabostian profile image
Emma Bostian ✨

LOOL ya thanks

Collapse
 
eerk profile image
eerk • 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?

Collapse
 
murkrage profile image
Mike Ekkel

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.

Collapse
 
eerk profile image
eerk

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

Thread Thread
 
murkrage profile image
Mike Ekkel

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

Thread Thread
 
eerk profile image
eerk

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

Collapse
 
axelledrouge profile image
AxelleDRouge

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

Collapse
 
elizabethschafer profile image
Elizabeth Schafer

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

Collapse
 
tirthaguha profile image
Tirtha Guha

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.

Collapse
 
alex_barashkov profile image
Alex Barashkov

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

Collapse
 
mccabiles profile image
Miguel

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

Collapse
 
equinusocio profile image
Mattia Astorino

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

Collapse
 
pgangwani profile image
pgangwani

Awesome write up

Collapse
 
christopherkade profile image
Christopher Kade

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

Collapse
 
anfossistudio profile image
AnfossiStudio

Awesome Article Thank you

Collapse
 
nampdn-ai profile image
Nam Pham • 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?

Collapse
 
leoyli profile image
Leo Y. Li

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;
};
Collapse
 
ecleptic profile image
Cameron Green

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