Mastering Storybook: A Comprehensive Guide on Adding Custom Tags to Storybook

Difficulty Level: Advanced

Prerequisite: You should be familiar with Storybook and using storybook tool for components documentation

Takeaways: This article helps to setup custom tags to storybook components documentation

Why StoryBook?

We use Storybook as a tool for creating and showcasing UI components. It provides a structured environment for developers to build and document the components. In this article you learn about adding custom tags to stories.

Are tags really important to stories(component documentation)?

Let's discuss a real world use case of custom tags to storybook documentation. Before diving deeper, if you're aligned with below 2 questions, then custom tags add more value to your stories.

Why Multiple frontend projects maintained for a product?

Creating a feature-rich web application involves more complexity and maintaining a large codebase. To address this challenge, we delegate user interfaces to different repositories. Instead of having all the frontend code in a single monolithic repository, we compartmentalize the UI components and functionalities into distinct subprojects. These subprojects operate independently, allowing for more focused development efforts and improved codebase manageability.

Owning a component library?

To ensure consistency and reusability across different frontend subprojects, we maintain a master components repository. This repository serves as a centralized hub for reusable components that are shared among various frontend projects.

In the above diagram, the master components are consumed in different projects. When there are enhancements to be made to existing components, we should be very careful in understanding the existing usage and impact areas. Apart from documentation on the usage of the component, it's very important to maintain a list of projects where the components are being consumed as part of the documentation.

Add ability to render Custom Tags in existing storybook app

Configure the list of tags inside configs directory storybook-project/stories/configs/yourTagsList.js

1
2
3
4
5
6
7

export default {
  USER_DASHBOARD: 'User Dashboard',
  PROFILE_SETTING: 'Profile Settings',
  ONBOARDING: 'Onboarding',
  MARKETPLACE: 'Marketplace',
  ADMIN_EXPERIENCE: 'Admin Experience'
};

Create a new file under .storybook
File name -> storybook-project/.storybook/addTagsToStories.js
Add below code to addTagsToStories.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

export const addTagsToStories = (story, context) => {
  const projectConsumed = context.parameters?.projectsConsumed?.map(item => {
    return `<div class="sbdocs-project-consumed-item">${item}</div>`;
  })?.join('');
  let template = '';
  if (projectConsumed) {
    template = `<div>
      <div class="sbdocs-project-consumed-title">Projects Consumed:</div>
      ${projectConsumed}
      <hr />
      <br />
      <story />
    </div>`
  }
  return {
    components: { story },
    template: template || `<story />`
  };
}

Import the above script to .storybook/preview.js as below

1
2
3
4
5
6
7

import { addTagsToStories } from './addTagsToStories.js';

...

export const decorators = [
  addTagsToStories
]

Update Component Stories

Let's consider example of Button component documentation in storybook
Create a button component
Filename -> storybook-project/stories/button/component.js

1
2
3

export const Button = ({ label }) => {
  return `<button>${label}</button>`;
}

Create a documentation page for button component in storybook
Filename -> storybook-project/stories/button/demo.stories.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { Button } from './component';
import projects from 'stories/configs/yourTagsList';

export default {
  title: 'Components/Button',
  component: 'Button',
  argTypes: {
    label: {
      control: 'text',
      description: 'Changes the text inside the button.',
      table: {
        type: {
          summary: 'string'
        }
      }
    }
  },
};

const Template = ({ ...args }) => {
  return Button({ ...args });
};

export const Demo = Template.bind({});
Demo.args = {
  label: 'Button Action'
};

Demo.parameters = {
  projectsConsumed: [
    projects.USER_DASHBOARD,
    projects.ONBOARDING
  ]
};

Output

Benefits of Custom Tags

Encouraging Adoption

Create your custom storybook components with Meant4

If you need help creating Storybook components or custom tags, don't hesitate to reach out! Whether you're looking to build bulletproof UI components or tailor your design system, our team is ready to assist you. Let's work together to bring your ideas to life — contact us today!

Written by:

Chandra Sekar

Senior Frontend Developer

Chandra is an exceptional Vue.js frontend developer who consistently delivers outstanding results. With a keen eye for detail and a deep understanding of Vue.js, Chandra transforms design concepts into seamless and visually captivating user interfaces.

Chandra is an exceptional Vue.js frontend developer who consistently delivers outstanding results. With a keen eye for detail and a deep understanding of Vue.js, Chandra transforms design concepts into seamless and visually captivating user interfaces.