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

Addon-docs PropsTable doesn't show for a TypeScript component wrapped in HoC #8910

Closed
SenhorLion opened this issue Nov 21, 2019 · 1 comment

Comments

@SenhorLion
Copy link

SenhorLion commented Nov 21, 2019

Describe the bug

Using Storybook 5.2.6 - 5.3.0-beta.3 with TypeScript the @storybook/addons-docs doesn't show the PropsTable for any component wrapped in a Hoc, for example Material-UI withStyles.
It shows a No props found for this component message when using 5.3.0-beta(2|3) and Cannot read property 'classes' of undefined when using 5.2.6.

To Reproduce

  1. Using Storybook 5.2.6 - 5.3.0-beta.3 with TypeScript 3.5.3 and React 16.9.0 installing the @storybooks/addons-docs.
  2. Create a component in TypeScript using Material-UI withStyles HoC.
  3. Add a component story with addParameters for the component

Expected behavior

The docs for the component story should display the PropsTable showing props for message, classes and testId.

Instead it shows a No props found for this component message

Code snippets

Source for component:

// bar/index.tsx
export interface IProps extends WithStyles<typeof styles> {
  /**
   * Message
   * @default null
   */
  message?: string;
    /**
   * TestId
   * @default 'error-bar'
   */
  testId?: string;
}

export const Bar: FunctionComponent<IProps> = ({
    classes,
    message,
    testId = 'error-bar',
  }) => {

  if (!message) { return null; }
  return (
    <Typography className={classes.error} data-testid={testId}>
      {message}
    </Typography>
  );
};

export default withStyles(styles)(Bar);

Source for story:

// bar/index.stories.tsx
storiesOf('Bar', module)
  .addDecorator(story => <MuiThemeProvider theme={theme}>{story()}</MuiThemeProvider>)
  .addParameters({ component: Bar, componentSubtitle: 'Displays a Bar with message' })
  .add('Default', () => <Bar message="Lorem ipsum dolor" />);

System:

Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

System:
OS: macOS Mojave 10.14
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Binaries:
Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
Browsers:
Chrome: 78.0.3904.97
Firefox: 66.0.3
Safari: 12.0
npmPackages:
@storybook/addon-actions: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/addon-docs: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/addon-links: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/addons: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/preset-typescript: ^1.1.0 => 1.1.0
@storybook/react: 5.3.0-beta.3 => 5.3.0-beta.3

Additional context

If the component is not wrapped in the HoC the Docs props table displays as it should

@shilman
Copy link
Member

shilman commented Nov 26, 2019

Closing this as a dupe to #8361

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

No branches or pull requests

2 participants