I2I: Isolated development and testing of components with Storybook

[wassgha]

Summary

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook will allow us to independently develop and manually test each component for compliance with accessibility standards, responsiveness and ensuring a good user experience.

Design document

A design document will come as a form of documentation for using the tool. The implementation will encompass adding two commands:

gulp storybook:amp

and

gulp storybook:bento

The first of which simulates an AMP document environment (amphtml) while the second emulates using components in a React/Preact environment. Both of the Storybook environments will come equipped with accessibility audit tools, previewing on multiple screen sizes and manipulating component attributes on the fly.

Motivation

The need for a faster way to develop and manually test components is increasingly important with Bento components. This environment will allow for complete isolation of components for the purposes of manual testing, accessibility auditing, showcasing examples, etc.

Additional context

PR coming soon

Launch tracker

TBD

/cc @ampproject/wg-approvers /cc @ampproject/wg-ui-and-a11y /cc @dvoytenko

[dvoytenko]

/cc @ampproject/wg-bento

[dvoytenko]

This sounds great! Let's start with bento version first.

[wassgha]

@dvoytenko too late 😆

[dvoytenko]

s/dvdyakonov/dvoytenko

[dvoytenko]

I guess, s/dyakonov/oytenko

[wassgha]

Closed by #27284