Props not showing in the DocsPage when they're imported from another file into the component (Vue)

Describe the bug I have a component where the props are in a different JavaScript file because it’s used for multiple button components but the props aren’t rendered in the docs, am i doing something wrong?

To Reproduce Steps to reproduce the behavior:

1. Run storybook with the 3 example files below

Expected behavior Props being rendered in the DocsPage

Screenshots

Code snippets

// ButtonBrops.js
export default {
    label: {
        type: String,
        default: 'Button',
    },
};

// Button.vue
<template>
    <button @click="clickButton">{{ label }}</button>
</template>

<script>
    import ButtonProps from './ButtonProps';

    export default {
        name: 'button',
        props: ButtonProps,
        methods: {
            clickButton() {
                this.$emit('click-button');
            },
        },
    };
</script>

// Button.stories.mdx
import { Meta, Props } from '@storybook/addon-docs/blocks';
import Button from './Button.vue';

<Meta title='Components/Button' component={Button} />

## Props, Events & Slots
<Props of={ Button } />

System:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 19.10 (Eoan Ermine)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 78.0.2
  npmPackages:
    @storybook/addon-actions: ^6.0.16 => 6.0.16
    @storybook/addon-docs:  ^6.0.16 => 6.0.16
    @storybook/addon-essentials:  ^6.0.16 => 6.0.16
    @storybook/addon-links:  ^6.0.16 => 6.0.16
    @storybook/vue:  ^6.0.16 => 6.0.16 

[elevatebart]

Hello @puyt, Thank you @shilman,

It is indeed a known limitation of vue-docgen-api. The library does not resolve variables in props. Since it is a static analyzer of the code, not its runtime, it often can’t guess what variables will contain.

Though, @puyt you make me think of a scenario where it would make sense to have the props as a separate object. Tell me if you have another scenario where it would be necessary.

Here it is:

Button.vue has 3 props color, size and variant. We then make an ActionButton.vue, who encapsulates the button and keeps all it’s props using v-bind. The props validations now have to be defined at 2 levels, and copied and pasted.

It would be better to have them defined once and imported.

This sounds feasible but not easy.

For reference here are other issues related to resolving non-explicit prop types: https://github.com/vue-styleguidist/vue-styleguidist/issues/923 https://github.com/vue-styleguidist/vue-styleguidist/issues/881

[elevatebart]

It is possible with a little elbow grease. I am planning support for this and advanced typescript types for 5.0.

I know how to do it, I have no idea when it is going to be done.

It is progressing though. I am about to share the first RFC for a breaking change on advanced types (union, intersection, interfaces,… )