question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Primary slot description using JsDoc comment not working

See original GitHub issue

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 image

But without ‘extractComponentDescription’ it looks like image

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, Jul 7, 2020

@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…

0reactions
wbr911commented, Sep 21, 2022

I’m having the same problem as NikolaiDokken using the latest 6.5.8 version

after my investigation. the easist way is to add additional named export , because react-docgen-typescript only support named export

before

/** 
* your comments
*/
export default class CheckboxCircular 

change to

/** 
* your comments
*/
export const class CheckboxCircular 
export default CheckboxCircular
Read more comments on GitHub >

github_iconTop Results From Across the Web

Commenting JavaScript code with JSDoc - Engineering Blog
JavaScript developers do not document their code often. Discover how you can use JSDoc comments to clarify your code and generate ...
Read more >
Joshua's Docs - JSDoc Cheatsheet and Type Safety Tricks
Cheatsheet on using JSDoc, especially with VSCode, and some tips on type safety and advanced usage.
Read more >
jsDoc - set type without importing file - Stack Overflow
I have seen the type-def comment and tried writing a custom type in the service file : /** {MyService} CustomService */ then reference...
Read more >
eslint-plugin-jsdoc - npm
Start using eslint-plugin-jsdoc in your project by running `npm i ... be checked to find a jsdoc comment block before the given code...
Read more >
How to Document an Express API with Swagger UI and JSDoc
JSDoc is a popular tool for generating documentation from comments in the source code of your app. Th... Tagged with javascript, node, api, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found