Introduce Storybook

[asvae]

• Add histoire to vuestic-ui
• Convert stories from vue-book for a couple of components (va-button, va-badge, va-breadcrumbs)

Stories documentation

We use histoire to develop and test components.

In component folder you'll generally see a structure like this:

components/va-badge/stories/
- VaBadge.story.vue
- VaBadge-avatar.vue // optional
- ...

Let's see what each of these do.

VaBadge.story.vue is a main story file of component, there should be only one such file. Here's how it looks inside:

<Story title="va-badge">
  <Variant title="default">
    <va-badge text="Paid" />
    <va-badge
      text="Success theme color"
      color="success"
    />
  </Variant>
  <Variant title="text color">
    <va-badge text="Default" />
    <va-badge
      text="Dark theme color"
      text-color="textPrimary"
    />
  </Variant>
  <Variant title="avatar">
    <va-badge-avatar />
  </Variant>
<Story>

• If variant is about basic use of component - it should be titled as default.
• If variant is too large (has state or needs special styling or imports other component i.e. va-badge-avatar) - it's recommended to move it to separate component, then import it to main story.
• Story and Variant are the only components with caps because of Histoire requirements. All other components in template should be kebab-case.
• You can add other files you need to stories folder as well.
• See histoire docs on Story and Variant for details on customization.

---

State we'll end up with:

• few stories would work with histoire
• most stories would work with vue-book (which is the only one deployed on staging)

That's not great, but converting everything at once is too big of a change.