Idea: Adding StoryBook to Web Components

[heymitali]

Write stories once, reuse everywhere

Hi Team,
I am proposing to use Storybook for developing and showcasing our web components.

Why Storybook?

• Streamlined Development: Build and test components in isolation, ensuring high quality before integration.
• Improved Collaboration: Provides a visual catalog, making it easier for all stakeholders to understand and contribute.
• Reusable Stories: Saves variations of components, which can be reused for documentation and testing.
• Storybook keeps track of every story
• Rich Add-ons: Access tools for accessibility checks, performance insights, and more.

Read more here on their official website: https://storybook.js.org/docs/get-started/why-storybook

Storybook is an industry wide standard for showcasing the components. And there is a separate section on the Storybook official website showcasing StoryBook from all popular companies: https://storybook.js.org/showcase

This tool aligns perfectly with our goals of efficiency and clarity across multiple projects. I believe integrating Storybook will enhance our workflow and make component reuse more seamless.

Let me know your thoughts!

cc: @Kout95 , @alexgarel , @teolemon

Example StoryBook:

[heymitali]

Current State: Right now we are using this website for showcasing our developed web components: https://openfoodfacts.github.io/openfoodfacts-webcomponents/

If we agree to use Storybook, it is going to replace this website.

[alexgarel]

@heymitali I think story book is a great tool, and yes it could replace this, but we have to evaluate how much it costs to do so. So your experimentation is useful.

[heymitali]

Thank you for the reply @alexgarel. From the efforts side, it's not much work. I did the POC which I already mentioned and that only took few hours of efforts. And moving forward we just have to write stories for each new component that we are going to implement, it's just represent different scenarios for that component.

From the cost perspective, Story book is free and is open-source.
https://github.com/storybookjs/storybook

[heymitali]

I already did a POC on this for proving that we can easily setup and configure StoryBook for our web-components repository.

Find my draft PR here: #105
Feel free to try it out, I have also shared the commands to run it in the PR itself.

Attaching screenshot of how our web-component's Storybook would look like:

The idea is that, for each component we will be creating a file "Button.stories.ts" which will create all different types of use-case or scenario based stories for that component. These stories will show different variations of the component, maybe how that component would look like in differnt screens or how the component behaves when we pass different property values to it.