Storybook: Extract Vue component props to another file will be ignored by Storybook.

[rockmandash]

Describe the bug

If you write Vue component's props in another file, and then import it and spread it to the props property section, Storybook won't be able to detect those props.

To Reproduce

1. vue create sb6-test with TypeScript template
2. cd sb6-test
3. npx sb@next init
4. create two files

HelloWorldButton.vue

<template>
  <button :disabled="disabled">Hello World</button>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    disabled: Boolean,
  },
});
</script>

HelloWorldButton.stories.ts

import HelloWorldButton from "./HelloWorldButton.vue";

export default {
  title: "HelloWorldButton",
  component: HelloWorldButton,
};

export const Normal = (_: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { HelloWorldButton },
  template: `
    <HelloWorldButton v-bind="$props" />
  `,
});

Now everything looks fine

However, if you extract those props like this

<template>
  <button :disabled="disabled">Hello World</button>
</template>

<script lang="ts">
  import Vue from "vue";
  import { PropValidator } from "vue/types/options";

  const props = {
    disabled: Boolean as PropValidator<boolean>,
  };

  export default Vue.extend({
    props: {
      ...props,
    },
  });
</script>

Now the Storybook can't detect those props right now.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Sorry for the slow reply. I expect this is a limitation of vue-docgen-api, the library we use to extract the props table in Storybook.

@elevatebart can you confirm?
@jonniebigodes we should probably document these limitations somehow, although there are so many different corner cases I'm not sure the best place/way to do that. WDYT?

[elevatebart]

This is indeed a limitation of the current static analysis.
In Vue 2 at least, I would advise against using spread to show props of final components.
For clarity purposes, instead, you can use mixins or extends to avoid duplicating code. They will show on the documentation.

[stefashkaa]

Hello @elevatebart ! I have a similar issue but with mixins usage. You said that mixin props will show in the documentation, but it doesn't if it's not explicitly defined as argTypes in the story/stories.

I'm using Vue 2 with TypeScript and Storybook v6.0.28. Here is an example:

Button.vue

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import MyMixin from './MyMixin'

@Component
export default class MyButton extends Mixins(MyMixin) {}
</script>

MyMixin.ts

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class MyMixin extends Vue {
  /**
   * Some property which should be shown on a doc page
   */
  @Prop({ default: '', type: String }) readonly someProp!: string
}

Please tell me does Storybook have an alternative for displaying mixin props in the storybook documentation without explicitly using them as story controls?

[elevatebart]

Hello @stefashkaa

Thank you for taking the time to explain your use case.
Everything should indeed be working fine here, but you found a bug.
I will be fixing it soon.