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. 🙂

[saintplay]

Storybook has just released an alpha version with babel 7 support, and they have an officially plugin for storybook now. I guess we have to wait a bit longer, because the plugin is still not stable.

[riddla]

@chrisvfritz: Could you elaborate on this topic?
I see Storybook more as a living component documentation and development tool. As it mainly focuses on presenting components in different states.
On the other hand Cypress can do unit testing and "behave like a user" respectively do proper end-to-end-testing.

I am curious: why do you think that Cypress (unit tests) give the the same (or some) benefits of Storybook?

[chrisvfritz]

@riddla I think the Cypress client could potentially offer a superset of what Storybook does. For example, custom blocks such as <docs> and <story> in .vue files could work in combination with a custom Cypress command to not only display documentation and component states, but also demonstrate specific workflows and at the same time, actually confirm that each component works the way it should.

Does that make sense?

[smile921]

good ! So how is it progressed now

[elevatebart]

Hello All, have you had a look at vue-styleguidist. it uses Markdown instead of JavaScript to write the examples in. Apart from that it does the same job as storybook... in <docs> block.

[freddiv]

Hi, I am trying to add storybook testing to the vue-enterprise-boilerplate. I already went through the learnstorybook tutorial for vue and it went smoothly. When I completed the setup in the vue-enterprise-boilerplate application and completed the tutorial code within this project everything worked except it doesn't pick up the styles. I tried everything I could think of but it just doesn't seem to pick up the styling at all in the storybook served test. Any ideas on what I can try next?

[abreumatheus]

No news about this? :(

[marceloavf]

I get it working @abreumatheus and I'll try to pull request it soon.