storybook: Primary slot description using JsDoc comment not working

Describe the bug I have a JsDoc comment in my component source file, just above the line export default but it doesn’t reflect in DocsPage generated for my component. Its my first time trying this feature so I am not sure if this is actually a bug or something I might be doing wrong

To Reproduce I have a source component file that looks like this

/**
 * Controlled stateless component for a circular checkbox with a click event handler prop.
 */
export default class CheckboxCircular extends React.Component<ICheckboxCircularProps> { ...`

Expected behavior But right now description only gets populated in the generated DocsPage when I try this in my story file

export default {
    title: 'Circular Checkbox',
    component: CheckboxCircular,
    decorators: [cardDecorator, withKnobs],
    parameters: {
        componentSubtitle: "Controlled component",
        docs: {
            extractComponentDescription: () => "Controlled stateless component for a circular checkbox with a click event handler prop."
        }
    }
}

I want it to work out of the box since I don’t want to use this workaround everywhere. I am onboarding a big ux repo to storybook with lots of components

Screenshots It should look like this in the doc page of this component

But without ‘extractComponentDescription’ it looks like

System: System: OS: Windows 10 10.0.18363 CPU: (4) x64 Intel® Core™ i7-7600U CPU @ 2.80GHz Binaries: Node: 12.18.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 npmPackages: @storybook/addon-actions: ^5.3.19 => 5.3.19 @storybook/addon-docs: ^5.3.19 => 5.3.19 @storybook/addon-knobs: ^5.3.19 => 5.3.19 @storybook/addon-links: ^5.3.19 => 5.3.19 @storybook/addon-storysource: ^5.3.19 => 5.3.19 @storybook/addons: ^5.3.19 => 5.3.19 @storybook/react: ^5.3.19 => 5.3.19

Additional context Add any other context about the problem here.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

@hardikjain0309 glad you got it working! FYI, the installation instructions are here:

https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#installation

Specifically:

Then add the following to your .storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-docs'],
};

When you don’t add /register to the end, it uses the preset, which pre-configures a lot of stuff for you.

Here’s another variant of that a little bit lower in the same file:

Preset options

The addon-docs preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here’s an example of how to use the preset with options:

module.exports = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
        babelOptions: {},
        sourceLoaderOptions: null,
      },
    },
  ],
};

A few lines lower:

We recommend using the preset, which should work out of the box.

And so on…

shilman on Jul 7, 2020