Open thedamon opened 1 month ago
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:
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>
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',
},
};
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;
},
};
/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
@larsrickert @chakAs3 @kasperpeulen is this something you can help with?
@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).
@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?
@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'] },
},
};
Describe the bug
I expect that providing
@values
ortype
to a prop should result in an enum/select style, as that's the functionality ofvue-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
jsdoc
comment:@values 'small', 'medium', 'large'
System
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