[Bug]: Svelte JSDoc type annotations aren't translated to argTypes automatically

mstachowiak commented 1 year ago

Describe the bug

Previously (v6.5), JSDoc @type annotations on Svelte component parameters were correctly translated to automatically build the argTypes for component stories. In particular, types that defined multiple options were translated to radio buttons.

For example, given the component parameter:

  /**
   * @type {'small' | 'medium' | 'large'} How large should the button be?
   */
  export let size = 'medium';

Storybook v6.5 would generate a radio button control with 3 options, without the need for a manual argTypes definition in the stories file. With v7, a radio button is still identified as the appropriate control but an error occurs and no options are provided to the radio button control.

While investigating, I was able to uncover sveltedoc-parser still correctly parses the Svelte component and identifies the JSDoc annotations, interpreting the size parameter as a union type, same as before (this 3rd party package hasn't been updated in over a year). Further, the extractArgTypes function in the svelte renderer appears to identify the control type as a radio button with the appropriate set of options. However, somewhere down stream of extractArgTypes the options get lost. The front-end outputs a console log message stating "Radio with no options: size".

To Reproduce

https://github.com/michaelstachowiak/storybook-v7-svelte-issue

To reproduce, you can just create the reproduction for svelte and comment out the manual `argTypes` definition for button sizes, which I've done in the public repository above.  In v6.5 it would have correctly generated a radio button, in v7 it encounters the error outlined above.

System

Environment Info:

  System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 3.3.1 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-interactions: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-links: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/blocks: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/svelte: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/svelte-webpack5: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

Output from extractArgTypes for the individual argument. Given this output, it is unclear to me why the radio button doesn't render any options, the appear to have been extracted correctly.

{
    "control": {
        "type": "radio",
        "options": [
            "small",
            "medium",
            "large"
        ]
    },
    "name": "color",
    "description": "How large should the button be?",
    "type": {
        "required": false,
        "name": "'small' | 'medium' | 'large'"
    },
    "table": {
        "type": {
            "summary": "'small' | 'medium' | 'large'"
        },
        "defaultValue": {
            "summary": "medium"
        },
        "category": "properties"
    }
}

SharifClick commented 10 months ago

Unfortunately, the issue persists. Any additional insights or suggestions are greatly appreciated. Thanks for your ongoing support. 🙏

sabirveli commented 9 months ago

Hi there, any updates on this issue?

storybookjs / storybook