Vue automatic controls, required dependencies

Looking into this problem is what lead me to work on #11547. So, there are four somewhat unrelated things here:

• Storybook does not automatically generate controls for Vue as well as it does for React
• Vue requires vue-docgen-loader and docgens created for Vue components - this seems like an unnecessary dependency.
• @storybook/addon-controls requires @storybook/addon-docs, which doesn’t make much sense to me.
• @storybook/addon-docs has code for each app type directly in it, instead of app-specific (e.g. Vue) code staying in the @storybook/vue package.

Storybook does not automatically generate controls for Vue as well as it does for React

This story will generate controls for React:

export default {
  title: 'Button',
  component: Button
};

export const WithArgs = (args: any) => <Button label="etc" />;

This story will not generate controls for Vue:

export default {
  title: 'Button',
  component: Button
};

export const Button = (args: any) => ({ components: { Button }, template: '<Button label="etc" />' });

When I looked into this, it seemed to be because automatic control generation requires either

a) vue-docgen-loader stuff (I couldn’t find any documentation on how to get this going, either. It was all in vue-styleguidist which is a whole project on its own) b) Hints such as Button.args = { label } and exporting argTypes: { label: 'text' }.

This restriction doesn’t seem necessary, because the prop types should be extractable from the component options almost as well as in React. It won’t have a description or anything, but that’s enough.

Vue requires vue-docgen-loader and docgens created for Vue components - this seems like an unnecessary dependency.

Continued from above, it seems like vue-docgen-loader is used to extract the prop types from the component, as well as descriptions and such. While that’s nice if it’s there, it shouldn’t be required in order for prop types to be extracted, as most Vue components look like this, and have props that can be realtively easily extracted:

export default {
  props: {
    label: { type: String, required: true },
    color: { type: String, validator: ( x ) => isColor( x ), default: '#fff' },
    enable: { type: Boolean }
  }
};

@storybook/addon-controls requires @storybook/addon-docs, which doesn’t make much sense to me.

From my short investigation, it seems that the reason that @storybook/addon-docs is required is because automatic prop extraction from components is handled in @storybook/addon-docs, as well as a few other bits of code that glue together the UI and props. This code could be added to @storybook/addon-controls and each app (e.g.) @storybook/vue, then @storybook/addon-docs would not be required for the controls.

@storybook/addon-docs has code for each app type directly in it, instead of app-specific (e.g. Vue) code staying in the @storybook/vue package.

Right now @storybook/addon-docs has code for each app type, for automatically extracting props to the components. Instead, I think each app type e.g. @storybook/vue should (somehow, perhaps the ClientApi interface they all export) include methods for extracting the props from a component, and then returning them in a format that @storybook/addon-controls supports. Then @storybook/addon-docs and @storybook/addon-controls would have no implicit dependencies on any app type.

Let me know your thoughts, or if I missed any reasons that things are the way they currently are!

@shilman?

[shilman]

@altryne @abrenneke Installing @storybook/vue should also install vue-docgen-loader/vue-docgen-api as dependencies. Are you saying that you need to install them manually in order to get things working? If so, I’d like to get to the bottom of that.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!