[Bug]: @values in prop jsdoc do not populate controls through vue-docgen-api

[thedamon]

Describe the bug

I expect that providing @values or type to a prop should result in an enum/select style, as that's the functionality of vue-docgen-api, but I'm not seeing that behaviour.

Reproduction link

https://stackblitz.com/edit/github-hfdqmp?file=src%2Fstories%2FButton.stories.js,src%2Fstories%2FButton.vue&preset=node

Reproduction steps

1. Go to link
2. Observe jsdoc block in component
3. look at props table in docs story. It is a string input, but should be a select or radio button with the valid options provided in the jsdoc comment: @values 'small', 'medium', 'large'

System

Based on storybook.new starter I linked in the repro, but also happening in v7 and 8.2.1. 
I also tested the `vue-cli` and `typescript` Vue 3 starters on stackblitz.

Additional context

Also note the vue-component-meta is not working in this way as expected either, as demonstrated here: https://stackblitz.com/edit/github-akbacb?file=src%2Fstories%2FButton.stories.ts,src%2Fstories%2FButton.vue,.storybook%2Fmain.ts&preset=node

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To address the issue with @values in prop JSDoc not populating controls, follow these steps:

1. Update JSDoc in Component: Ensure your JSDoc includes @values correctly.

   <!-- src/stories/Button.vue -->
   <script setup>
   /**
   * Button size
   * @values 'small', 'medium', 'large'
   */
   defineProps({
    size: {
      type: String,
      default: 'medium'
    }
   });
   </script>

2. Configure Storybook: Ensure argTypes in your story file reflects the enum values.

   // src/stories/Button.stories.ts
   import type { Meta, StoryObj } from '@storybook/vue3';
   import Button from './Button.vue';
   
   const meta: Meta<typeof Button> = {
    title: 'Example/Button',
    component: Button,
    tags: ['autodocs'],
    argTypes: {
      size: { control: 'select', options: ['small', 'medium', 'large'] },
    },
    args: {
      size: 'medium',
    },
   };
   
   export default meta;
   type Story = StoryObj<typeof meta>;
   
   export const Primary: Story = {
    args: {
      size: 'medium',
    },
   };

3. Check vue-docgen-api Configuration: Ensure vue-docgen-api is correctly configured in your Storybook setup to parse JSDoc comments.

   // .storybook/main.ts
   module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-docs'],
    webpackFinal: async (config) => {
      config.module.rules.push({
        test: /\.vue$/,
        loader: 'vue-docgen-loader',
        options: {
          docgenOptions: {
            alias: { '@': path.resolve(__dirname, '../src') },
          },
        },
      });
      return config;
    },
   };

References

/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/ReferenceTypeProps.stories.ts /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta /code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/options-api /code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[shilman]

@larsrickert @chakAs3 @kasperpeulen is this something you can help with?

[chakAs3]

@thedamon, we've never been able to get vue-docgen-api to handle advanced features, so we consider it legacy. The references you're providing are using vue-component-meta, which is part of the official Vue language tools (Volar).

[thedamon]

@chakAs3 Ah k. this may explain it for the most part then. My reference is I know vue-docgen-api on its own is supposed to pull in possible values through the @values field in jsdoc, and that I have a hazy memory of it working in some combination of Vue 2 and storybook 6.

For vue-component-meta, though, I'm not sure how to make the auto-controls either if we aren't using TS... we're getting very limited results from the autodocs using it in our repo (maybe because of workspaces). The repro i made wasn't working for me to populate controls yesterday but it is for me today after rerunning yarn storybook; is there a way to tap into the autodocs controls using jsdoc if not using TS?

[larsrickert]

@thedamon I'd say auto controls without TypeScript is not possible since in Vue (independent of Storybook), vanilla JavaScript is limited to the Number, String, Boolean, Object, Array types which can not be typed more detailed.

Even if you add JSDoc tags for the enum values, if you hover over props, the Vue VSCode extension (which uses Volar just like vue-component-meta does) will also still show type String

I'd suggest to either use TypeScript or you can manually define the args like this which should be equivalent effort because you can remove the @values JSDoc tag then since it will not have any effect:

const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
  },
};