Integrate storybook for components

[chrisvfritz]

I'd like it to be pretty seamless and built into the main development workflow, so possibly as a <story> custom block inside .vue files.

[shentao]

It also came to my mind, though I’m worried the SFC file might get a bit crowded. But I guess this can be easily solved with an opt-in/opt-out prompt when using the component generator.

[shentao]

Btw. it might be quite nice to include a Loki setup on top of Storybook.

[mattrothenberg]

I would love to tackle this. Any ideas around what content you envision putting into that <story></story> block? For example –

// PrimaryButton.vue
<template>
  <button :disabled="disabled">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'primary-button',
  props: ['disabled']
}
</script>

<story>
  <primary-button :disabled="true">Hello!</primary-button>
</story>

[shentao]

What about something like

<story case="button is disabled">
  <primary-button :disabled="true">Hello!</primary-button>
</story>

<story case="button is enabled">
  <primary-button :disabled="false">Hello!</primary-button>
</story>

Not sure how to handle actions and variables though.

[mattrothenberg]

@shentao Excellent, I like that API. I'll put together a proof-of-concept here shortly

[mattrothenberg]

Repo: https://github.com/mattrothenberg/vue-storybook/
I wrote a custom Webpack loader that parses the <story> block and pulls out the requisite information.

[chrisvfritz]

I like it! I'll be taking a closer look at this soon. 😻

[mattrothenberg]

Hooray! I welcome any/all feedback, given I'm more of a designer than a dev 😈

[chrisvfritz]

@mattrothenberg Evan used to say that too. 😉

[chrisvfritz]

Just an update here: I'll finally be able to look into this a little more after VueConf next week, but am also a little bit torn. I'm playing with the possibility of using Cypress for component unit tests, instead of Jest, which would also provide a lot of the same benefits of Storybook. That would mean fewer tools for developers to learn, so if I can get it to work the way I want, I might be leaning in that direction.

[mattrothenberg]

Sounds good @chrisvfritz. In either event, it was fun (and a great learning exercise) to get that vue-storybook idea out of my head and into code. Keep me posted!

[patrickcate]

I'm playing with the possibility of using Cypress for component unit tests, instead of Jest

This is an interesting concept, any progress update?

[etroynov]

Hi all,

have some any news?

[chrisvfritz]

Still experimenting - nothing I've tried so far has been ideal, but I'm not out of ideas yet. 🙂