Setup Storybook add-ons

[eddybrando]

With our basic Storybook setup (#1143) we already include Storybook essential add-ons:

• Docs
• Controls
• Actions
• Viewport
• Backgrounds
• Toolbars & globals

There are many more official and community add-ons in the Storybook ecosystem.

As part of #884 (comment), we should define which additional add-ons should be included in our project, and then set these up.

Here are my suggestions.

Official add-ons (besides those included as essential add-ons)

Add-on	Should be included?	Comment
Source	No	It displays the story's code, not the component's, so it's not very useful. The component's code is already shown with the docs add-on.
Storyshots	Yes	Pros: Reusable code between stories and snapshot test definitions. // Cons: Dependency on Storybook for snapshot testing.
Accessibility	Yes	Very helpful hints to cover accessibility basics.
Console	Yes	Could help remove some noise logs from the browser native console related to WebSockets.
Links	No	I can't think of a scenario where this could be applied in our project. But please correct me if I'm missing any.

Cherry-picked community add-ons (for the full list go to https://storybook.js.org/addons/)

Add-on	Should be included?	Comment
Paddings	Yes	Could be useful when testing shadows.
Screenshot	Yes	Useful UI assets ready to be shared.
Open Component Code	No	Pros: Handy shortcuts. Cons: It only works only for VSCode, making it not inclusive. We shouldn't restrict the usage of such a feature to only one code editor.
Figma	Yes	Helpful to cross-check design implementations.

---

Part of #884 (comment)

[y4izus]

Almost agree with everything.

In my opinion, our project isn't too big and hasn't too many complicated components, so I think Console and Paddings aren't necessary right now.

Storyshots and Screenshot are both for taking snapshots, what differences do you find and why do you think we should add both?

[eddybrando]

In my opinion, our project isn't too big and hasn't too many complicated components, so I think Console and Paddings aren't necessary right now.

I can agree with both.

For Console I didn't know yet if we could benefit from it since my overview of the project's components is still limited.

For Paddings I can also agree that it's not actually necessary at the moment.

So, I won't configure these two 🙂.

Storyshots and Screenshot are both for taking snapshots, what differences do you find and why do you think we should add both?

It's quite tricky but they mean different things by "snapshots":

• Storyshots is for snapshot testing
  It can help us reuse testing code.
  We can also leave this for later when we tackle our testing strategies. What do you think @y4izus?
• Screenshot takes literal visual snapshots (screenshots) via Puppeteer and saves these as image files
  It can be helpful to have these image assets to easily paste on GitHub issues, slides, Slack, or just to have as quick visual reference.
  More of a nice to have than a need.
  One caveat is that it requires Puppeteer, and thus requires a headless Chrome, which adds quite some size to the development build.

[korgan00]

Very interesting add-ons,
I agree with you; I think we can delay de storyshots for later.

[y4izus]

Storyshots has also integration with Puppeteer. There are differences between this and Screenshot?

Anyways, I agree with delaying this add-on and do it when we tackle the testing strategy

[techtolentino]

thank you for the breakdown of these add-ons, @eddybrando

I agree with everything that's been assessed so far.

I'll add a couple of potential nice-to-haves, for consideration...

• responsive views (disregard, what I was looking for, might already be baked into storybook)
• themes, (low priority)

[eddybrando]

• themes, (low priority)

Thanks @techtolentino!

@korgan00, I believe we could implement this later once we have the theming integrated 🙂. What do you think?

[korgan00]

yeah, i think so

[eddybrando]

To summarise...

Add-ons we don't need:

• Console
• Links
• Open Component Code
• Paddings
• Screenshot
• Source

Add-ons that may be interesting to revisit later:

• Storyshots
• Themes

Add-ons that we will integrate now:

• Accessibility
• Design (Figma)