storybookjs/storybook

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

Open

#28558 opened on Jul 11, 2024

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugdocgenhelp wantedsev:S3vue3

Description

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

Contributor guide

Tech stack
typescriptvue
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic Vue knowledgeFamiliarity with Storybook addons
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
Investigate how vue docgen api parses @values from JSDoc in Vue components and how Storybook's addon vue maps props to controls. Look at the source code in the 'addons/vue' directory, specifically the part that extracts prop metadata. Examine the reproduction URLs to understand the expected behavior (select/radio) vs actual (string input). Check if there are related issue comments or PRs that hint at the root cause.