[Bug]: Vue3 PropType declarations are not parsed correctly or correctly editable on the autodocs page.

[its-lee]

Describe the bug

For Vue3 codebases, when defining a prop with PropType as a string union type, the user should be able to select from the list of options on the autodocs page.

E.g.:

    colour: {
      type: String as PropType<Colour>,
      default: "red",
    },

What actually happens is that when defining a prop with PropType as a string union type, the data type is inferred as object, and you can not even enter the string value of the prop on the autodocs page as it expects an stringified object to be passed.

To Reproduce

https://github.com/its-lee/storybook-vue3-proptype-issue

System

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 111.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.6 => 7.0.6 
    @storybook/addon-interactions: ^7.0.6 => 7.0.6 
    @storybook/addon-links: ^7.0.6 => 7.0.6 
    @storybook/blocks: ^7.0.6 => 7.0.6 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2 
    @storybook/vue3: ^7.0.6 => 7.0.6 
    @storybook/vue3-vite: ^7.0.6 => 7.0.6

Additional context

No response

[larsrickert]

Hey, this will be fixed in #22285

[its-lee]

Amazing - what's been done there makes sense to me!

[larsrickert]

Fixed with #22285 in version 8