Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Shawn Wang
InstructorShawn Wang

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up the Info addon to make your Storybook stories into interactive documentation, including the best way to style the Info addon to your heart's desires.

Instructor: [00:00] Start by adding the info addon to your storybook project. The info addon doesn't require additional configuration on top of what you already have. You just have a function called withInfo, which you can wrap around your existing elements.

[00:23] Inside withInfo, you can type in some descriptive texts. Now, when you run storybook, it will show the text. If you click show info on the top right, you will see a description of the component, as also source and types if you use prop types.

[00:47] WithInfo does this markdown, so you can do things like escaping and putting code blocks within your markdown for further descriptive ability. If you save it over here, you should be able to see that additional markdown up in your info box.

[01:08] You can optionally style your info box by passing in an object, and declaring the component styles, like so. Here, I am putting a red color on the H1s, and passing in the same text that I used to have -- description, button.

[01:45] If I reload over here, I can see that the H1 has been styled. I don't necessarily recommend defining your own styles inline every single time. I do like setting up utilities folder, utilities.js, and then defining the styles that I like, particularly the inline display, and then using this as a high-order component from my other stories.

[02:12] Over in my stories, I can just replace withInfo with my new utility, wInfo from utilities. Wherever I used to say withInfo, I can just say wInfo and skip the styling. That seems a lot more reasonable to use.

[02:38] Now, when I refresh, this is how it looks by default, with everything inline and no additional click needed on the top right.

Jesse Gonzalez
Jesse Gonzalez
~ 3 years ago

adding withInfo() and by extension wInfo() to addWithJSX(), the JSX addon shows the Story component. You can pass {skip: 1} to addwithJSX() to suppress.

Steve
Steve
~ 3 years ago

Hmm, I just looked up the docs and tried the skip option and i​ couldn't see any difference!?!

Terry DI LUZIO
Terry DI LUZIO
~ 3 years ago

Just saw that withInfo is deprecated. We now have to use addDecorator(withInfo); // Globally in your .storybook/config.js.

See at https://www.npmjs.com/package/@storybook/addon-info

Dale Francis
Dale Francis
~ 3 years ago

Haha I love that you completely skip over how the withInfo completely destroys the work done with addWithJSX, you may want to update this video and show some more info about how to add it globally now that it is deprecated and how to ensure it doesn't have issues with other things

Vitalie Andries
Vitalie Andries
~ 3 years ago

Haha I love that you completely skip over how the withInfo completely destroys the work done with addWithJSX, you may want to update this video and show some more info about how to add it globally now that it is deprecated and how to ensure it doesn't have issues with other things +1

Nacho López
Nacho López
~ 3 years ago

Haha I love that you completely skip over how the withInfo completely destroys the work done with addWithJSX, you may want to update this video and show some more info about how to add it globally now that it is deprecated and how to ensure it doesn't have issues with other things +1

BrightPixels
BrightPixels
~ 3 years ago

I am getting Uknown tags around my component when view the withinfo panel. Why? See screenshot please: https://imgur.com/bARJuq6