Svelte CSF Autodoc comments
yustarandomname opened this issue ยท 2 comments
Currently, you can add the following to specify the meta of the story in both CSF-svelte files and "normal" [name].stories.ts. Note the inclusion of autodocs.
import type { Meta } from '@storybook/svelte';
import Button from '../Button.svelte';
export const meta = {
title: '2d components/Button',
component: Button,
tags: ['autodocs'], // <----- NOTE: WE ENABLE AUTO DOC HERE
argTypes: {
title: { type: 'string' },
background: { type: 'string' }
}
} satisfies Meta<Button>;
This results in a correct and expected docs for this story to be created in both cases. However the "normal" .ts story has an additional feature where you can specify a comment on top of a story and let it be rendered as description of a story in the auto docs (see below). I tried to add a comment on top of a CSF story but noticed that the description was missing. Is there a way to add this functionality of comment descriptions in CSF autodocs?
Example of a description by comment in autodoc
/**
* The default angle is a 90 degree angle.
*/
export const Default: Story = {
// other data
}
Parsing JSDoc comments from meta or stories is currently not supported - it would be a good feature request though if you want to make one.
There's a workaround where you specify the (markdown) content at parameters.docs.description.story|component
as documented here: https://storybook.js.org/docs/vue/api/doc-block-description#writing-descriptions
It could look something like this:
<script context='module'>
import Button from './Button.svelte';
export const meta = {
title: 'Button',
component: Button,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component: "your component description here" // ๐๐๐๐๐
}
}
}
}
</script>
<Template let:args>
<Button {...args}>
Click me
</Button>
</Template>
<Story name="Default" parameters={{ docs: { description: {story: "your story-specific description here"} } }}/>
See it in action here: https://stackblitz.com/edit/github-7v75vw?file=src%2Fstories%2FButton.stories.svelte
Validated that this works. Thank you