Storybook

A Frontend Component Library

Our Agenda

• Material Design
• Bootstrap
• Antd Design
• Tailwind CSS

Some popular libraries

Storybook

Storybook is a tool that lets developers create Frontend component libraries... Plus more

• Component Isolation
• Component Showcase
• Interactive Development
• Testing
• Documentation

Plus More

Cool video on Storybook

Component Isolation

Storybook lets developers work on a component without it affecting the whole application. This is useful for testing and developing components without needing to go through the whole application.

Component Showcase

Developers can create a showcase of components with different variations and states. This is a living style guide, making it easy for designers, developers, and other stakeholders to see how different components look and behave.

Interactive Development

The interactive development environment allows developers to tweak component props and see the changes in real time. This helps in quickly iterating and fine-tuning components.

Testing

We can test for visual changes in the component.

Storybook also allows developers to write and run test cases directly within the Storybook interface. This helps catch UI bugs and ensures that components function correctly in different scenarios.

Documentation

Storybook makes writing documentation for components easy. Developers can add notes, examples, and guidelines directly within the Storybook interface.

It can read the code and automate the creation of docs to make it easier for others to read.

• Not dependent on third party for core business.
• Build functionality specific for our users with fewer compromises.
• Easier to create new features without fighting the library.

Storybook

• Not easy to customize pre-built components
• The design can be cookie-cutter.
• New features could be blocked if prebuilt library doesn't support functionality