Storybook: DocsPage does not update when I add docstring in my react components

[mourad1081]

Describe the bug
The plugin docspage does not take into account the docstring of my component's props.

To Reproduce
Steps to reproduce the behavior:

1. Create a component
2. Add docstring
3. The docs tab does not show what I wrote in docstring

Expected behavior
The docs tab showing the dosctring in a nice way.

Screenshots

Code snippets

/**
 * This is a basic component.
 */
class Anchor extends React.Component {
    render() {  ... }
}

Anchor.propTypes = {
    /** Blah */
    label: PropTypes.string.isRequired,
    /** Blah2 */
    url: PropTypes.string.isRequired,
};

export default Anchor;

[ryanfitzer]

I'm also seeing this issue. The type column also fails to show.

"@mdx-js/react": "^1.5.0"
"@storybook/addon-docs": "^5.3.0-alpha.20"
"@storybook/addon-knobs": "^5.3.0-alpha.20"
"@storybook/react": "^5.3.0-alpha.20"

[shilman]

Can either of you share a reproduction I can look at?

[ryanfitzer]

For sure!

Component: https://gitlab.com/ryanfitzer/design-system-starter/tree/master/components/button

Static build: https://ryanfitzer.gitlab.io/design-system-starter/?path=/docs/components-button--default-story

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@ryanfitzer I ran your project with yarn sb --debug-webpack. I found:

• Your babel config is set up so that storybook's configurations are only run on files under the storybook directory, but your components are located outside of that.
• The props show up when I modify your setup to use this line from Storybook's config in your root babel config:

module.exports = {
  compact: true,
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-react-jsx',
    '/Users/shilman/projects/testing/design-system-starter/storybook/node_modules/babel-plugin-react-docgen/lib/index.js'
  ],
  presets: [ '@babel/preset-env', '@babel/preset-react' ]
};

Of course this is not the final solution, but it illustrates exactly what the problem is. All of our examples install Storybook inside the component library, not next to it, and I'd probably recommend doing the same.

[ryanfitzer]

Thanks for taking a look at this. I completely refactored the Storybook configuration to use @storybook/addon-docs/preset. I added a babel.config.js with babel-plugin-react-docgen to the /storybook directory that extends the root babel.config.js. The props are now showing.

Your babel config is set up so that storybook's configurations are only run on files under the storybook directory, but your components are located outside of that.

My expectation was that using @storybook/addon-docs/preset (instead of manually configuring webpack.config.js) would have resolved this, but that wasn't the case.

Based on the following refactored files, are you able to recommend how I could make sure storybook's configurations are used for the components?

• storybook/config.js
• storybook/babel.config.js
• storybook/presets.js
• storybook/webpack.config.js

Also, my understanding is that any files that are imported in a story file would automatically be applied to storybook's webpack rules. Is that not the case?

All of our examples install Storybook inside the component library, not next to it, and I'd probably recommend doing the same.

Unfortunately, that burned me during the transition from Babel v6 to v7 on a large enterprise project. Since then, I don't mix my application's dependencies with Storybook's.

[shilman]

Also, my understanding is that any files that are imported in a story file would automatically be applied to storybook's webpack rules. Is that not the case?

Unfortunately not the case.

I suppose it should be possible to set the include directory for Storybook's webpack/babel config to include your other source directory?

[ryanfitzer]

That did the trick. Thanks!

Any chance the root directory that Storybook uses in its default config could be configurable in a future release?

For documentation's sake, here's what I added to my webpack.config.js:

config.module.rules = config.module.rules.map( ( rule ) => {

    const isJSXRule = rule.test.toString() === /\.(mjs|jsx?)$/.toString();

    if ( isJSXRule ) {

        rule.include = [ root ];
        rule.exclude.push( /node_modules/ );

    }

    return rule;
} );

[shilman]

WDYT about making it easy to set the source root for configuration in SB6 @ndelangen @tmeasday. Seems reasonable to me.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!