The Story of a Storybook addon

Cosmin

Cosmin

Software Developer
Cosmin is a passionate software developer at Softvision, with 1+ years of experience in the Web apps field. He’s very interested in the latest technologies & trends. He started his career as a front-end developer and continues to develop in that direction, specializing in JavaScript, and
lately, React JS.
Cosmin

Latest posts by Cosmin

Introduction

React Storybook is a javascript library for React, React Native and Vue js where the engineers can develop, design and test the UI components outside your app in an isolated environment. In the recent React project, we needed the advantages that Storybook offers, and we decided to use it.The major advantage was that this allows us to develop UI components outside the app and allows other people in our team to work on them.

In this article, we are offering the details of a solution we created for a need that is not covered by React Storybook. We are providing in the article a preview of the styling code used inside various components.

The main features of React Storybook are:

  1. Completely isolate the environment for your components
  2. HMR — hot module replacement
  3. Clean and fast user interface
  4.  Multiple add-ons like:

Accessibility
CSS regression
Snapshot testing of React components
Knobs allow you to edit React props dynamically

Just visit React Storybook for the full list of features.

Why another add-on

Recently, on our current, project we came up with a needed display of the CSS code samples inside the Storybook panel along with the React component. After doing our fair share of research into existing add-ons mentioned earlier, we’ve come up empty. So we decided to create our own add-on called storybook-addon-code that not only displays CSS code but support other languages like javascript, HTML, typescript, etc.

How it works

Before we get started, you need to install react storybook and storybook-addon-code.

In your Storybook config folder create an addons.js and add the following code:

Note:

setTab function accept and object like {label: ‘Sass’, type:’sass’} or if you want to have multiple tabs you can pass an array with multiple objects. The label will be displayed in the Storybook panel.

Then write your stories like this:

Supported languages

The plugin has a wide variety of built-in support for common Web programming languages. The most common built-in languages include:

  • css
  • html
  • javascript
  • scss
  • mnathml
  • sass
  • svg
  • typescript
  • xml

Anatomy of a Storybook plugin

It turns out developing our custom React Storybook plugin wasn’t that all complicated. You can too, very easily, build your own plugins if you feel the need to.

On a high level, this is how we’ve built our own:

  1. We’ve created a top level React component Code Addon that gets displayed in Storybook panel and shows off the code samples.
  2. Created a decorator function withCode. This function is used to decorate any stories that need source code info being displayed alongside them. withCode has 2 parameter, source code of the file to display and the type of the file. When is called the function emit a message through a channel that is created dynamically based on the language type.
  3. Code Addon component listens to that specific channel name and calls a function that renders a text with the received code properly formatted.
  4. We used PrismJS for code highlighting and because it can be used with various code samples like CSS, Typescript, Javascript, HTML etc.

For more details on how to build a Storybook addon, access the official tutorial.

Future development

We would like to see at least 2 features added to it in the near and medium term:

  1. Support for displaying markdown content alongside the component. Useful for displaying extra info alongside the component being showcased, it would allow us to get rid of an extra plugin like withReadme.
  2. Extend the built in language collection with additional languages We are opened to Pull Requests, so please don’t hesitate to get involved!

If you like this plugin and find it useful in your day to day work please don’t hesitate to give us a little Github star or tweet about it!

Share This Article


Cosmin

Cosmin

Software Developer
Cosmin is a passionate software developer at Softvision, with 1+ years of experience in the Web apps field. He’s very interested in the latest technologies & trends. He started his career as a front-end developer and continues to develop in that direction, specializing in JavaScript, and
lately, React JS.
Cosmin

Latest posts by Cosmin

No Comments

Post A Comment