Today our Hunters team tells us about Storybook, an open source tool used to build user interfaces (UIs) by creating components and pages in isolation and independently. Storybook helps speed up development, testing and documentation for our front-end components.

Storybook features

Storybook is a tool designed to be used in numerous front-end frameworks such as React, Angular, VueJS, Ember, Svelte and Preact. It allows us to:

• Isolate the creation of visual components from business logic, which lowers the requirements to develop these components
• Easily test how different types and amounts of data are displayed in each component, which might otherwise be difficult to represent in the system.
• Access and view all application components from the Storybook interface, making it easier to keep to a style guide throughout the project.
• Generate and maintain documentation for UIs.
• Create front-end demos and prototypes by linking components.

You can also use addons to enhance Storybook’s functionalities, such as to check component compliance with accessibility standards or to display components in different screen sizes and resolutions. See all available addons at Addons | Storybook.

What are Stories?

Storybook is based on Stories. These represent different states of front-end components. This way, the same component can be represented in different Stories, each with its own state and content. This allows you to make changes and see how they affect all the defined component states, without having to change the state of the application to perform checks.

Stories can also be created from several components, allowing you to display full pages. By adding links to the components of these Stories, you can navigate between components, creating an interactive prototype.

How do you integrate Storybook?

Integrating Storybook into a project is straightforward. There is an npx package that detects the front-end framework used in the project and creates the necessary configuration to run Storybook.

After running it, you will be able to start Storybook in a new browser tab like the following:

Figure 1: Default Storybook project.

In Figure 1, in the left panel, you can see different Stories created by default. There is a page layout in the main panel containing the Header component at the top and the page content in the middle.

By clicking on a component and accessing the Docs tab at the top, you can view the properties of a component, as shown in Figure 2:

Figure 2: Component documentation tab.

Where can we use Storybook?

Storybook excels in the following use cases:

• Large front-end projects or projects with a long development time: By creating documentation on the components and having a central display, components created by other team members can be seen easily, making them easier to reuse and avoiding duplicates.
• Applications where components display a large amount of data from external sources or user-entered data: By defining multiple stories for each component, you can represent it in different states. If an application has texts of different lengths or images of different sizes, they can be represented and stored using Stories. This way you can view any subsequent changes to the component and their impact on how the data is presented.

Watch this video to see how it works:

Want to know more about Hunters?

At Altia, we have designed several programmes for people who are finishing their degrees and recent graduates to start out in the IT sector, bringing their talent and passion for technology. One of these programmes is Hunters: trailblazers who love to follow trends and want to help anticipate future challenges. Being a Hunter means being part of a diverse group that generates and transfers knowledge.

Anticipate the digital solutions that will help us grow. Find out more about Hunters on our website.

Nicolás Cuello

Software Engineer at Altia en Altia