Build a Component Development Workflow With Storybook

It's vital we have a solid grounding for our component workflow if we are to build an entire library of them. In this lesson, we will set up a smooth, component-driven development workflow from code to Storybook.

It's vital we have a solid grounding for our component workflow if we are to build an entire library of them. In this lesson, we will be:

  • Setting up a smooth, component-driven development workflow from code to Storybook

  • Connecting your app and your component library locally

  • Verifying the connection by having both projects open, updating a component, and witnessing the change in the application

For now, let us scope a component to a very simple one: just a DIV element with some text.

Begin by navigating into your component library codebase.

Creating a simple demo component#

Naturally, since this is React, it's wise to start with the component code.

Let's write a component in src/components/Demo/Demo.js.

It's a very plain stateless functional component. We export it as default from this file.

Storybook#

However, this won't be enough for Storybook. It expects us to have a dedicated story file. To quote the documentation,

"... story is a function that describes how to render a component".

You can have one or more stories in a file. These files need to follow a naming convention in order to be found and processed. Usually, they have the format COMPONENT_NAME.stories.FILE_FORMAT.

For this story, we will import the component we just wrote and export it. The first export defines something similar to a section in Storybook, and the second export is the actual story. For our format, we will use MDX, a kind of powerful hybrid between React and Markdown.

Write the following in src/components/Demo/Demo.stories.mdx.

That's all we need for a primitive React component with a story. The Meta element lets us specify the component and details like wherein the Storybook should reside. The Story element in this simple case is just a named wrapper around our Demo component.

Verify that it works by running npm start.

Storybook is set up

This lesson preview is part of the The newline Guide to React Component Design Systems with Figmagic 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.

Unlock This Course

Get unlimited access to The newline Guide to React Component Design Systems with Figmagic, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to React Component Design Systems with Figmagic