Skip to content

Storybook: Can Your Next Project Benefit from It?

I will show you what Storybook is all about and hopefully help you decide if you need it in your next project. Don't worry if you have limited experience as an engineer because you don't need to have an advanced technical background to make use of Storybook.

🔗What is Storybook?

Storybook is a tool for developing UIs that allows you to work on one component at a time.

🔗What is a component?

A component is smallest part of a UI. In chemistry, we refer to it as an atom(Smallest unit of a matter). Most frameworks are now components based.

🔗Why Storybook?

Storybook allows you to actually develop the entire UIs without starting the major application.

But in order to cleary state why one would choose to use it, lets look at some benefits and challenges of Storybook.

🔗Benefits

  • Being able to build components in isolation,and not having to think about integrations or other systems running in your stack is a blessing
  • A clearer vision of your components styling and layout
  • Navigating between UI component as you get to see all component as a sidebar item
  • Communicating with other devs. It really allows you to show how your new component is supposed to be used and which features it boasts.
  • You can manipulate props value
  • Its is not framework agnostic i.e you can use for Vue, React, Angular, etc.
  • Great for documenting

🔗Challenges

  • If you’re integrating it into an existing project, there is some migration work to be done.
  • You rely on addons and decorators for handling data.
  • It can take up a lot of time to maintain and properly set up.
  • It takes team commitment to keep it updated and ensure everything still works.

🔗What are add-ons actually?

Add-ons are plugins that can be added to make certain feature work. For example, by default scss doesn't work on Storybook, so you will have to install an add-on to make it work as expected.

🔗When to use Storybook

In this section, we will the making use of This Dot Labs' Open source project starter.dev as a case study.

starter.dev is built using a variety of technologies to demonstrate architectural patterns and best practices using these tools. This project uses these technologies like Vue, React, Nextjs, Angular, etc to show various ways Github can be implemented!.

Lets Pick a component from starter.dev GitHub Showcases to demonstrate the features Storybook has.

Every conponent has a control tab that allows us to manipulte the props if there be any.

For example:

Issue Pullrequest Card issue-pullrequest-props

Here, looking at the image with the props, you will notice some properties:

  • cardType: This is a dropdown/select option with two opions issue and pullrequest.
  • state: this defines the state of the card
  • author: the person who created it or a name, or whatever, you get the point.

Lets change some of the props and see the result

  • cardType will be pullrequest
  • state will be closed

Issue Pullrequest updated-card Issue Pullrequest updated-props

Here, we can see there has been a change. This is so helpful, and tells the team members what the component can and can't do.

🔗Other features

Looking at other interesting features like

  • Settings

Here, we can toggle for feature like side nav, the controls (which, in the dropdown option, is call addons) Seetings options

  • Responsiveness

There are few options that help us test for responsivess. Below, you will find an image showing those options:

Responsive dropdown options

Here we can select any option to see the responsiveness of that component.

Large screen Issue Pullrequest Card on large screen

Mobile screen Issue Pullrequest Card on mobile screen

Hover state of the card Hover state

  • Inspection

Here, we can see certain properties like padding, and current width and height Inspected card

🔗Looking to get started

To get started, all you need is to visit this sites based on your prefered technology

🔗Conclusion

It's up to you to decide if Storybook helps you achieve your goals faster, or if you think it's useful for your project setup. It's important to look at what it could offer and what it can't. You can decide to use it for just plain documentation or for components, or both.


This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.co

You might also like

General

Semantic HTML: Why it matters and top tips on how to apply it

General

Getting Started with Git

General

Intro to Google DevTools: Console Panel

General

Intro to Google DevTools: Network Panel