Creating Useful Documentation for Your Angular Component Library Using Storybook

Component libraries in UI development are essential for any large-scale enterprise application to ensure consistency in both presentation and development. Documenting that component library is equally as critical to ensuring teams adopt and use it properly. At SailPoint, we have been building our own component library, internally called Armada, and have been documenting it using TypeDoc along with using Angular Components to demo functionality. While this helped us to show the documentation, it was difficult to maintain because the documentation was embedded in the component classes themselves, and the demos were manually created.


We decided to migrate our documentation to StoryBook since it is a library that not only helps to document components it also adds tools to streamline the development of components. In this article, we will tell you some of the benefits of StoryBook and how we use it at SailPoint to improve the Developer Experience.


What are the benefits of using StoryBook?



For starters, the StoryBook website is now the single source of truth for documentation for all components available in Armada. This is the main website where any team member, from UI Developers to Product Managers, can see the components, specs, and behavior.


For UI Developers, Storybook transformed from a documentation website to a component workshop because it provides an easier way to create demos(stories), test inputs, and even outputs. Instead of creating demo components, we could represent different component states by modifying a couple of arguments. Here’s an example:

/**The main template used for all the icon button stories*/
const Template: Story<IconButtonComponent> = args => {
   return {
      props: { ...args }
   };
};

export const Primary = Template.bind({});
Primary.args = { color: 'primary' };

export const Secondary = Template.bind({});
Secondary.args = { color: 'default' };

export const CustomColors = Template.bind({});
CustomColors.args = { color: 'custom-default' };

StoryBook gives the developer a full suite of utilities to test inputs, verify accessibility and see how components behave in different screen sizes.