Creating Your First Stories in Storybook

Using Storybook to document our component library

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Build a Complete Company Design System

  • [00:00 - 01:24] So you may have already noticed that storybook read stories that end with extension.stories.mdx or.stories.js/ts/ts/tss/tss/tss. So to do this and load our previous components from React, we can create two stories and before doing that , we may also want to remove all the automatically generated assets from Storybook CLI. So we can select everything and delete. Perfect. And then in the stories folder, we can create a button.stories.tss/x and inside here, so we can copy and paste the code we can find inside the text version of this lesson. So here we import the button from React and the source button, then some TypeScript types from provided by Storybook. And then we're giving a title to our story and the component we want to document is the button component. And we are doing basically the same for icon button.

    [01:25 - 02:36] And we follow exactly the same approach. And here we should export the interface so we can read this appropriately in Storybook. And we provide a still drain to the button and SVG icon. And now we are ready to start again our Storybook and see how it looks like. So this is our Storybook, we can see this is the button component. This is completely unstyled as we haven't passed any style yet. And here are our properties if it's loading or not. And you can see that those are auto generated from TypeScript interfaces. This is our icon button again unstyled. And let's see how we can test for accessibility with Storybook.