Storybook Addons
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.
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.
Knobs
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:
Actions
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
Source
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
Code Preview
This addon is used for displaying “code preview” with the user selected knobs in various framework code.
"CodePreview": {
"type": "Code",
"status": "In production"
}
Dark Mode
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"
}
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.
Documentation
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.
Zeplin
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"
}
Conclusion
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:
