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

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.

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

[scottnath]

@elevatebart do you have more info on what the bug might be? I’m seeing this error still in the latest storybook and vue3.

cheers