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.

Description of a component is (still) not picked up right by [addon-info]

See original GitHub issue

Describe the bug Description of a component is (still) not picked up right by addon-info.

var validMatches = [kind, name];
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
  var componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
  retDiv = _react.default.createElement("div", null, _this3.marksy(componentDescription).tree);
}

The above code in Story.js function _getComponentDescription only work when:

  • The storiesOf ‘name’ parameter (kind) is exact match
  • The story.add ‘storyName’ parameter is an exact match (when would you want to do this?)

In my situation, I want to create hierarchy by using slashes in the storiesOf ‘name’ and I would use the storyName to describe the test/state of the component in the story, like so:

const stories = storiesOf('atoms/button/ButtonPrimary', module);
stories.add('default', () => <ButtonPrimary /> );
stories.add('some prop', () => <ButtonPrimary  someProp={true} />);

suggested solution would be to get the hierarchySeparator and split the storyKind with it and only use the last entree in the comparison, if that is possible and doesn’t break anything:

var realKind = kind.split(hierarchySeparator || '/');
var validMatches = [realKind[realKind.length - 1], name];
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
  var componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
  retDiv = _react.default.createElement("div", null, _this3.marksy(componentDescription).tree);
}

“react”: “^16.8.4”, “@storybook/react”: “^5.0.5”, “@storybook/addon-info”: “^5.0.5”

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, May 20, 2019

@marcel-k We’re generally focusing on addon-docs, a replacement for addon-info that fixes this issue and many others.

https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

It’s currently usable in technical preview in the #docs-mode channel on our Discord https://discord.gg/UUt2PJb and will be documented as part of the 5.1 release (but officially released in 5.2)

0reactions
stale[bot]commented, Jul 24, 2019

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Description of a component is (still) not picked up right by ...
Describe the bug Description of a component is (still) not picked up right by addon-info. var validMatches = [kind, name]; ...
Read more >
storybook-addons/react-docgen-typescript-loader - Snyk
Webpack loader to generate docgen information from TypeScript React components. For more information about how to use this package see README.
Read more >
Lui Extended : Graphic UI Mods - Elder Scrolls Online AddOns
LUI Extended is an addon that adds multiple custom components including: Base Game enhancements - better tooltips for abilities, custom icons ...
Read more >
Storybook Docs with mdx support and addon knobs - Medium
We have used Storybook to document our React component library for a while, and although we love it, we've had to use various...
Read more >
2022.8: You can fix it! - Home Assistant
First-class support for Bluetooth, get notified about detected issues and how to repair them, find integrations by brand name, and maps with ...
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