Storybook Addons

Pallavi Hemmige
Nov 19 · 4 min read
Image for post
Image for post
Image by: Storybook

A major strength of Storybook are addons that extend Storybook’s UI and behaviour. There are many third-party addons as well as “official” addons developed by the Storybook core team. Storybook ships by default with a set of “essential” addons that add to the initial user experience.

Storybook is a tool or framework used for UI development, a playground allowing us to visualise components in action and debug them as well. Addons like the name suggests, are additional customisations that can be used to extend and enhance the developer experience when building these UIs.

Image for post
Image for post
Testing Pyramid

The Testing pyramid is important for both Dev and QA teams. It is a widely used concept or standard that is used in the software industry, giving us an idea of the different types of testing.

“Storybook” is the heavy lifter for manual testing before going into production and can be used by Engineering, Design, Product teams and all the other stakeholders for quick checks in terms of alignment as well as functionality.

The testing pyramid consists of mainly 3 sections, manual, e2e and Unit testing. Manual testing is a crucial part and an important step for frontend development.

Now, we will take a look at some of the addons we have implemented in our component library at redBus as well as some additional ones under exploration.

With the help of knobs in storybook, we can pass any props to our react component without having to rebuild the story, in the UI interface. In order to do so, we need to add @storybook/addon-knobs.

"Knobs": {
"type": "Code",
"status": "In production"
}

Then import it in the storybook/addons.js file:

and in storybook/config.js:

Image for post
Image for post
Knobs

Actions addon is used to display data received by event handler(callback) arguments in stories.

"Actions": {
"type": "Code",
"status": "In production"
}

With this particular addon, we can,

  • share feedback when an action is performed on an interactive element, helps in ensuring that the event is being triggered,
  • checks if the correct data is being passed,
  • detect if the component is emitting the correct HTML events
Image for post
Image for post

Source addon helps to display the source code of the story you have created.

"Source": {
"type": "Code",
"status": "In production"
}

Here is an example of how it would look like in the Storybook UI

Image for post
Image for post
‘Source’ addon

This addon is used for displaying “code preview” with the user selected knobs in various framework code.

"CodePreview": {
"type": "Code",
"status": "In production"
}
Image for post
Image for post
‘Code Preview’ addon

Used to change Storybook to “dark” mode. It allows to toggle between the light and dark theme.

This is an interesting new addon we implemented to change the appearance of our component library.

"DarkMode": {
"type": "Appearance",
"status": "In production"
}
Image for post
Image for post

Since addons are such an integral part of how Storybook works, our frontend team has been looking into some additional addons. Some of these are still under progress and few more hoping to implement soon.

With this addon, we are able to document the

  • usage of the component
  • implementation details
  • list out all the existing stories for that component
  • any other metadata
"Documentation": {
"type": "Organize",
"status": "In Progress"
}

When you install Docs, every story gets a DocsPage. DocsPage pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.

Image for post
Image for post
Image by: npmjs

Zeplin is a design handoff tool that generates styleguides from design files.

One of the addons that might helps us bridge the gap between design and development is the Zeplin addon. This addon lets you to link Storybook components from inside their desktop app.

"Zeplin": {
"type": "Design",
"status": "Under Research"
}
Image for post
Image for post
Image By: Storybook for Design

With so many addons to choose from, Storybook allows us to customise and enhance our development workflow!

This is the part 2 of the series on In-house built Component Library using React Storybook, Part-1 can be find here:

redbus India Blog

redBus India Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store