We should have a better overview to display components

[LucaMele]

We should have a better overview on how we display components, especially if they grow in number

We need an evaluation of https://github.com/frctl/fractal (The "Storybook" of Vanilla.js)

Are you reporting a bug or a feature?

• Bug
• Feature

Expected Behavior

Better overview and usability of the main demo page of the patterns library (Example: https://axa-ch.github.io/patterns-library/molecules.html)

Actual Behavior

Difficult to have a overview on all the components

[AndyOGo]

Sounds great, we would save ourselves a whole lot of work.

[LucaMele]

thank you @jackblackCH for this input :)

[AndyOGo]

I nice read about storybook and web components
https://medium.com/storybookjs/how-to-combine-web-components-with-storybook-a-match-made-in-heaven-9d9939eedc76

[LucaMele]

So we need to evaluate fractal and Storybook for WC.

Main Requirements (Functional and Non Functionals):

• Semplicity (a apprentice can use it)
• Full With Pure Html testable
• Better usability then today (max 2 seconds to find the desired component starting of the main page and 1 second needed to know how to test it)

[AndyOGo]

I would add themability.

Edit:
I mean the ability to change the design of storybook or fractal to meet AXA's brand.
And to me this is a rather lower priority, though if it goes public it may be of strong interest for AXA in regards of branding.

Storybook theming support:

• Add theming support  storybookjs/storybook#428
• Change the Theme of storybook storybookjs/storybook#2423

And Fractal seems to have theme support too.

[LucaMele]

Ok you can add but if is a requirement is would like to have it „measurable“ and also we need to know mor clearly what you mean with it

[AndyOGo]

BTW, since we have our withReact helper, we could use storybook with our reactified web components 💪

[LucaMele]

i would reccomend something that supports them natively so we are not bound to a technology

[MarekLacoAXA]

It would be helpful to include a demo of a real-world micro site, including header/nav. menu/columns/form/validation/footer.
Perhaps as a bootstrapping template.

[AndyOGo]

@LucaMele
@MarekLacoAXA
@jackblackCH
We should have a checklist of features we need and an evaluation of them, so I start:

TL/DR: Let's go with storybook v4!

For devs:

• custom elements V1 support
• easy attribute updates (called knobs addon in Storybook)
• it has to be maintained
• markdown support
• feature to parse and render doclets like jsdocs, sassdoc, you name it
• extensible API
• Testing
• Search / Filter

For non-devs, designers, UXlers, users, etc.:

• Viewport emulation
• Web Accessibility compliance testing
• Allow for custom documentation, additional ressources like templates, etc.

For AXA branding

• Theming

Evaluation chart:

Feature	Fractal	Storybook
Maintained	Nope 💣	Yes
Custom Elements V1	Yes	Yes (through Vue, Polymer)
Knobs	Nope	Yes - knob addon
Markdown	Yes	Yes - through notes-addon
Doclets support	n/a	can be added
Extensible API	n/a	Yes called addons
Theming	Yes	Yes
Testing	n/a	Yes - maybe best for React
Viewport	n/a	Yes
Accessibility	n/a	Yes
Search / Filter	n/a	Yes

[LucaMele]

thank you for this overview @AndyOGo we need to sit down the 3 of us and dicuss it

[jackblackCH]

There is a new, but alraeady famous kid on the block: https://www.docz.site/

[jackblackCH]

And a discussion on spectrum.chat about the different tools: https://spectrum.chat/react/general/what-is-the-best-documentation-tools-for-a-react-library~d3649a8b-9c62-4b58-a504-3626cd60eec1

[LucaMele]

Closing as V2 is released. If issue is still relevant in v2, please re-open