storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
98 stars 29 forks source link

Svelte CSF Autodoc comments #148

Closed yustarandomname closed 8 months ago

yustarandomname commented 8 months ago

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
}

Screenshot 2023-10-25 at 15 48 28

JReinhold commented 8 months ago

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

yustarandomname commented 8 months ago

Validated that this works. Thank you