Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte CSF Autodoc comments #148

Closed
yustarandomname opened this issue Oct 25, 2023 · 2 comments
Closed

Svelte CSF Autodoc comments #148

yustarandomname opened this issue Oct 25, 2023 · 2 comments

Comments

@yustarandomname
Copy link

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
Copy link
Collaborator

JReinhold commented Oct 25, 2023

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
Copy link
Author

Validated that this works. Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants