Storybook: Can't get props for addon-info when using decorator (higher order component) on my component

[michalg42]

Hello

I wanted to use addon-info to get props in stories, but I got something like this in PropTypes section:
"withTheme(withStyles(Avatar))" Component
No propTypes defined!
Well, that's obvious for me why it's like this, but I would like to get props for Avatar, not its HOC. I couldn't find how to do it in readme, neither in issues.
How can I achieve this?

[Hypnosphi]

Are those HOCs your own, or are they taken from some library like recompose? If the former, you may want to extend the output with static methods from input:

function withSomething(ComposedComponent) {
  const Component = ...
  return Object.assign(Component, ComposedComponent)
}

[michalg42]

Unfortunately for me they are from libraries, in my case these are react-intl and material-ui (v1).

[UsulPro]

@michalg42 There're two ways to get props in your case.

1. You can simply add everything you need into propTables option like this:

withInfo({
      text: 'doc string about my component',
      propTables: [Avatar],
    })

1. You can separate your component from HOC. It means you can add High Order Components via addDecorator and then apply withInfo to your <Avatar> and add it as a story. I guess it's more "Storybook" way.

If you're using Material-UI library you might try to use this Storybook addon:
https://github.com/react-theming/storybook-addon-material-ui
It does exactly what I described in the second point: wraps your own components via decorator

[loliver]

I'm getting an issue when manually specifying propTables where the prop descriptions aren't passed through. The tables themselves are correct, just no comments are being parsed.

E: Have been doing some more investigation today and I don't think it's related to specifying propTables, have no idea why __docgenInfo isn't being generated in this one case, will keep experimenting.

[yaminyaylo]

@loliver I have the same issue with components that have linked a style sheet (export default withStyles(styles)(NavigationMenu)) and then manually adding to propTables.

Maybe you have some thoughts how to resolve this?

[baktiaditya]

@loliver me too :(
is there any luck getting the description in a wrapped component?

[loliver]

I wasn't able to find anything further, we've decided to stop using this addon for any documentation going forwards as it doesn't quite do what we need unfortunately.

[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 60 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!

[zhukmj]

Here is a workaround I used in my project

// ...
const Button = (props) => {
   return (
    <button}>Click me</button>
  );
};

Button.propTypes = {
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
};

export const ButtonComponent = Button;
export default withStyles(styles)(Button);

And now my story will look like

// ...
import Button, { ButtonComponent } from '../src/Button';

storiesOf('Button', module)
  .add('Simple', withInfo({
    text: 'Simple button description',
    source: false,
    propTables: [ButtonComponent], // display propTable for Button component
    propTablesExclude: [Button], // do not display propTable for HOC
  })(() => <Button primary>Primary Button</Button>));

[spencerdcarlson]

Another solution is to add the propTypes after the HOC

// ...
const Button = (props) => {
   return (
    <button}>Click me</button>
  );
};

const HOC = withStyles(styles)(Button);

HOC.propTypes = {
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
};

export default HOC;

[PolGuixe]

I have tried @zhukmj and as I am using Flow, it just works partially and is not able to get all the information.

[eddiemonge]

I think this issue should still be opened, especially as CSSinJS becomes more popular

[Itrulia]

Yeah I think the same, using styled-compoents will result in

<Styled(styled.button) onClick={clicked}>
  Button
</Styled(styled.button)>

[mlnor27]

Hi everyone !
I encountered the same issue using the memo optimization HOC for functional component. Do we still have any news on this ?

[mlnor27]

Another solution is to add the propTypes after the HOC

// ...
const Button = (props) => {
   return (
    <button}>Click me</button>
  );
};

const HOC = withStyles(styles)(Button);

HOC.propTypes = {
  primary: PropTypes.bool,
  secondary: PropTypes.bool,
};

export default HOC;

Props end up not being passed at all :/

[typosadovsky]

@zhukmj's workaround works, but how can I get rid of the unnecessary HOC propTable? I see he is using propTablesExclude to exclude the HOC propTable in his story, but when I use that, it has no effect and is still visible. It appears that the propTablesExclude parameter does not work on HOC components. Any suggestions?