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.

Addon docs - Docgen regression with spead props

See original GitHub issue

Describe the bug Composed props are not displayed anymore in the generated docs.

Last working version: 5.2.8 The next is not working anymore: 5.3.0-alpha.0 (RC-1 and RC-4 also verifed)

To Reproduce Steps to reproduce the behavior:

  1. Create a component with its story
  2. Define propTypes with spread:
AudioPlayerWidget.propTypes = {
  /**
   * All these props coming from elsewhere are not displayed anymore
   */
  ...Widget.propTypes,

  /**
   * This prop is displayed correctly
   */
  sample: PropTypes.number
};

Expected behavior The name (and only the name) of the prop should be displayed. I don’t expect type, description and default value as the problem for these fields come from the React-docgen which does not support prop composition (https://github.com/reactjs/react-docgen/issues/151).

System: React 16

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
patricklafrancecommented, Dec 30, 2019

@ylacaute this is how I fixed it in my design system until the issue is solved in react-docgen:

https://github.com/gsoft-inc/sg-orbit/blob/master/packages/react-components/components/date-picker/src/range/date-range-picker.jsx#L14

IMO it’s better than adding back a fallback in storybook docs that will only partially render the prop. It’s ugly but you’ll get a proper rendering with the prop name & type.

0reactions
ylacautecommented, Dec 31, 2019

I agree with you, don’t add this fallback.

From what I understand, all your DatePick declare all props directly, you don’t factorize the props definition, that is exaclty what I was tried to not do but it is not a big deal, I will do the same 😃

I will give a closer look at Orbit, it seems a very nice project !! Thank you for sharing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

@types/storybook__react | Yarn - Package Manager
Angular: set the @ViewChild with a non-empty value in StorybookWrapperComponent (#14586); Addon-docs: Fix ArgsTable sorting when using of={Component} ...
Read more >
storybook-addon-react-docgen
A storybook addon to display react docgen info. This addon is a drop in replacement for the "info" addon's prop table functionality.
Read more >
https://raw.githubusercontent.com/storybooks/story...
Bug Fixes - Addon-docs/Angular: Fix inline rendering setup ... 2021) ### Bug Fixes - Addon-docs/Vue,Vue3: Fix preset options for vue-docgen-api ...
Read more >
React Design Patterns and Best Practices
Props. 23. Children. 24. Differences with HTML ... Spreading props on DOM elements ... generate documentation dynamically from them with React Docgen.
Read more >
node_modules/@material-ui/styles/CHANGELOG.md - GitLab
[docs] Fix broken link to jss-nested plugin (#19837) @Izhaki ... [docs] Clarify props spread for ListItem when button flag is set (#17466) @rossmmurray ......
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