Vue: support @values in args table

[adrianpdm]

Issue: #13764 Addon-docs/Vue: Support @values in ArgsTable

What I did

Framework
Vue

Changes

• addon/docs
  • Change how ArgTypes is returned from the extractArgTypes: ArgTypesExtractor
    • Mutate propDef, ensuring its type is converted to enum if @values tag is defined
    • Sync sbType with mutated propDef.type
    • Append corresponding enumerated values into the propDef.type.summary
• examples/vue-cli
  • Add example in Button.vue
  • Remove argTypes.size from Button's story, ensuring its size options are inferred from the generated docs, rather than being manually defined.

How to test

cd examples/vue-cli
yarn storybook

Enums defined using @values tag will be shown under Description and available as either radio or select control in the ArgsTable.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit ae970f4. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[adrianpdm]

Hi, it seems that there is a conflict. Should i rebase my branch?.

[yannbf]

Hi, it seems that there is a conflict. Should i rebase my branch?.

Yes! Or merge the latest next into it, whatever feels more comfortable to you. Let me know if you'd like any assistance :)

[adrianpdm]

Hi, it seems that there is a conflict. Should i rebase my branch?.

Yes! Or merge the latest next into it, whatever feels more comfortable to you. Let me know if you'd like any assistance :)

Hi, thank you for reaching out 🙏. As for the conflicts, I chose to rebase my branch onto next.

[yannbf]

Thanks a lot for your contribution @adrianpdm!

While I was testing this, I found a few things worth mentioning:
1 - You should probably check for empty values. If you set @values first, second, and leave a dangling comma, controls will show an empty value as possible option:

2 - When changing the @values annotation while Storybook is running, HMR works and things are rebuilt, however there are no changes in the controls panel. Even when switching stories they don't change, so you need to reload the entire page for the change to have effect.

Regarding point 2, @shilman I believe this might be a bug in controls and not something related to this change. WDYT?

[adrianpdm]

Thank you for testing this out @yannbf 😃

I surely can filter out the empty values that is caused by the dangling commas. Although, to me it is to be expected since that just how vue-docgen behaves. WDYT?.

As for the HMR issue, i do experience the same behavior in my company's Storybook (v6.2.9), which doesn't trigger rebuilt when making some docgen-related changes.

[yannbf]

Hey @adrianpdm sorry for the long time (I was on vacation) to reply!
I believe we should just keep things as is. The HMR is something not related to this PR anyway, and we should look further into it.

Thanks a lot for your contribution! This one is good to go!