Introducing Design Systems with React and Typescript in Storybook

Set up Storybook for React from Scratch

Add your first React Story to Storybook

Add a Welcome Page with Sequential Stories to a React Storybook

Display the JSX of a React Storybook Story with the JSX Addon

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

Create Interactive Storybook Stories with the Knobs Decorator

Configure React Storybook for use with Typescript

Automate Documentation Generation in your Typescript React Codebase with Storybook

Design Systems with React and Typescript in Storybook

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 Knobs decorator in Storybook to make your Storybook stories infinitely interactive based on their props, and not just your predefined Stories.

https://app.egghead.io/api/v1/lessons/react-create-interactive-storybook-stories-with-the-knobs-decorator/subtitles

Instructor: [00:00] First, we're going to add the Knobs addon to our project. Then we register it in addons.js.

[00:08] Next, over in config.js we're going to import a new method called decorators, so add decorator. We're going to configure that with the withKnobs decorator from addon-knobs.

[00:22] Now we're all set to use the knobs decorator. Just head over to the stories, import the appropriate knob. For example, I'm importing the text knob over here. Wherever I have text, I can now use the text knob to make it dynamic.

[00:40] BG, so you just have a label here and then whatever text you want it to submit as your ordinary text. Now when I refresh my storybooks, you can see a new area called knobs.

[00:59] Here I can change it to whatever I want. Let's just say, "Purple." It just changes to purple. It's reactive to whatever I do. This is very handy for testing any props that your components may have.

[01:14] There are a whole range of other knobs, and I encourage you to read the docs to explore them. For example, since we're really using colors here, I can say for the color knob I can have a default value of green. I can also have a color-picker over here and pick a different color based on whatever I want.

Create Interactive Storybook Stories with the Knobs Decorator

Share this video with your friends

Course

Design Systems with React and Typescript in Storybook