📕 Storybook

[streamich]

Add Storybook Kibana-wide (currently we have Storybook installation in canvas).

• Allow any plugin to have its own Storybook

---

• Initial discussion with @clintandrewhall @spalger @streamich
  • How do we add it to Kibana as a whole? (per plugin? global? in ./pacakges folder?)
    • Decided that most likely a single configuration will live at Kibana top level.
    • It will be possible to start a Storybook just for a specific plugin.
  • Will core need Storybook?
    • Probably not.
  • Snapshot testing with Storyshots.
    • Discussed possibility of selectively picking stories that will be snapshot tested, due to possibility of large diffs in snapshots.
  • Possibly it could be hard to maintain Storybook and help devs to learn it.
    • This is an extra piece of configuration for ops team.
  • How/where do we publish static storybook?
  • On push post a link to static Storybook build in PR thread.

---

TODO:

• think about documentation, best practices.
• @streamich to re-use configuration of canvas Storybook, and "convert" one of the plugins (possibly in Management app) to use Storybook.
• Re-sync again.

[elasticmachine]

Pinging @elastic/kibana-canvas

[elasticmachine]

Pinging @elastic/kibana-platform

[streamich]

• 2^nd sync
  • Decided will never run all stories of all plugins in one Storybook, but Storybook per plugin.
    • (Thus, plugins don't need to namespace their stories.)
  • @streamich presented small demo.
    • Allowed Storybook from Canvas to load stories Kibana-wide.
    • Created stories for few SIEM app components.
    • Showed one way how it is possible to load stories only for a specific plugin (thx to @dgieselaar).
  • @spalger suggested there might be another way to load stories for a specific plugin—using symlinks and generating config files dynamically.
  • Should Storybook config be global or each plugin should have its own config?
    • Each plugin could have its own "entry" file where it loads all stories.
  • @clintandrewhall suggested to use canvas/scripts/storybook.js script as that watches and rebuilds SASS.
  • Storybook build might fail for many reasons (TypeScript, React, Storyshots), developers will need to know they have to update stories for React components they modify.
  • @clintandrewhall is pro Storyshot snapshot testing. @spalger slightly skeptical as snapshots generated by Storyshots might be very large (maybe wrong?).
    • If EUI changes some CSS class name, is it good or bad if hundreds of Storyshot tests in Kibana fail?
    • There is a way to globally Jest-mock modules in Storyshots.
    • There might be ways to Jest-mock modules in more granular way.
  • We don't really have best practices.
    • Maybe could mention something about folder structure and how to separated "pure" and "connected" React components.
    • Would be interesting to see what other people come up with.

---

TODO:

• @streamich to make PR of the demo (and possibly add more stories for SIEM components).
• @spalger to take over Storybook configuration.
  • See how it can be extracted from Canvas somewhere globally.
  • See what is the best way to load stories for individual plugins.
  • See what is is the best way to do Storyshot snapshot testing.
• Sync again

[streamich]

#38943 — demo PR: using Storybook in SIEM app

[streamich]

#38856 — separate package.json for Storybook

[elasticmachine]

Pinging @elastic/kibana-app-arch

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[streamich]

Next steps: #54707