Fix semi broken __docgenInfo integration in addon info #1030

bigassdragon · 2017-05-13T21:20:40Z

Issue:
I'd like to see the component description from __docgenInfo in the story documentation in the info plugin.
I'd like to get the prop type from __docgenInfo for when the type comes back as "other".
PropVal had a problem where 'content' was being directly rendered as an object.

What I did

added to PropTable
added to PropVal
added to Story

How to test

Make a story with a component that has documented (via docgen-style text) description, and the description will show up.

Like this:

/** Component description here */
const Button = ({children, onClick}) => (
  <button onClick={onClick}>{children}</button>
)
Button.propTypes = {
  onClick: PropTypes.func // make sure this does not come from React, make it come from prop-types module.
}

storiesOf('Button', module)
  .addWithInfo('demo', 'Button with children', () => (
    <Button onClick={action('clicked')}>David</Button>
  ))
 .addWithInfo('demo', '', () => (
    <Button onClick={action('clicked')}>David</Button>
  ))

You will see a description under the info description, you will also see that the prop type is not 'other' when you use PropTypes from something other than React (for support of React >= 15.5.x.

…omponent, fixed issue with `content` was being rendered as an object and give errors for that, added a fix to when you use `PropTypes` from something other than `React` that you can get the type from docgen.

ndelangen

Thank you for this PR!

ndelangen · 2017-05-16T05:40:22Z

packages/addon-info/src/components/Story.js

+  _getComponentDescription() {
+    let retDiv = null;
+
+    if (Object.keys(window.STORYBOOK_REACT_CLASSES).length) {


Can you explain the usage of window here, and why this is necessary?

@ndelangen my linter gave syntax errors because it did not know where STORYBOOK_REACT_CLASSES came from. I understand that STORYBOOK_REACT_CLASSES is a global variable and that should work without the need of window at all. Sorry for any confusion I really only added it to get rid of the errors from my linter. I would be more than willing to do a commit that removes the need for window.

danielduan · 2017-05-18T21:12:38Z

Hey @bigassdragon, I was actually going to open a PR to add these features as well. Thanks for doing this.

You should probably run your code through the project's eslint config and rebase off the latest master. A lot of lines in your changes are stylistic but it doesn't match the convention used across the project. That's why one of the bitHound tests is failing. I'd love to see this merged soon, let me know if you need help.

bigassdragon · 2017-05-18T22:26:50Z

@danielduan Thank you for your comment, I was a little confused. I ran it through eslint using the config inside of storybook and committed the code that I modified.

danielduan · 2017-05-19T17:20:56Z

@bigassdragon you still need to do a rebase unfortunately. there are conflicts which means that there have been changes to the files since you last edited them so your changes can't be automatically merged.

…omponent, fixed issue with `content` was being rendered as an object and give errors for that, added a fix to when you use `PropTypes` from something other than `React` that you can get the type from docgen.

bigassdragon · 2017-05-19T18:10:52Z

@danielduan I have rebased now and committed.

ndelangen · 2017-05-19T20:18:36Z

package.json

@@ -28,6 +28,7 @@
  },
  "scripts": {
    "bootstrap": "lerna bootstrap",
+    "postinstall": "lerna bootstrap --hoist",


Because a few reason we don't do this, and instead bootstrap manually.

For some CI tasks bootstrapping is unnecessary, but installing is. Bootstrapping is rather slow.

We do npm install in examples, this will cause the postinstall to re-run, causing a lot of unnecessary delay.

When adding a root dependency for development, bootstrapping is not needed.

Please remove this postinstall hook?

ndelangen · 2017-05-19T20:20:02Z

package.json

@@ -28,7 +28,6 @@
  },
  "scripts": {
    "bootstrap": "lerna bootstrap",
-    "postinstall": "lerna bootstrap --hoist",


Ah never mind then

ndelangen · 2017-05-19T20:20:49Z

package.json

@@ -1,6 +1,5 @@
 {
  "name": "storybook",
-  "version": "1.0.0",


I'm confused 🙄

ndelangen · 2017-05-19T20:22:57Z

addons/info/src/components/Story.js

-import Node from './Node';
-import { baseFonts } from './theme';
-import { Pre } from './markdown';
+import PropTypes from 'prop-types'


sorry, you linted everything right, and I made you revert it... Luckely linting will soon be fixed! #1000

ndelangen · 2017-05-19T20:25:20Z

Hey @bigassdragon,

Thanks you so much, quite a lot of work you did here, I'll be releasing a new alpha, I really hope you can help test this?

🏅

bigassdragon · 2017-05-19T20:33:47Z

Hey @ndelangen,

You are very welcome, sorry for taking so long.

I would be more than happy to test it once it is available.

I hope to make more PR's in the future, I really like what you guys are doing here.

Thanks

danielduan · 2017-05-19T20:53:20Z

Hey @bigassdragon, thanks for this. Might need your help updating the addon-info README as well. I personally haven't been able to get the __docgenInfo on the components so I'd love to see what you're doing to the .babelrc and other configs to get it running. Thanks again!

bigassdragon · 2017-05-19T21:06:05Z

Hey @danielduan I am not actually doing anything special to get __docgenInfo running on my side at all.

I did however add window.STORYBOOK_REACT_CLASSES = {} to my storybook config.js. I do not use a .babelrc file at all, I put my babel inside of my package.json. It looks like this:
"babel": {
"presets": [
"latest",
"react",
"stage-2"
],
"ignore": [
"stories.js",
"**/story.js"
]
}

ndelangen · 2017-05-19T21:41:50Z

It's published!

bigassdragon · 2017-05-19T22:59:39Z

@ndelangen awesome thank you very much!

bigassdragon · 2017-05-19T23:15:22Z

@ndelangen I am unable to download the new version. Maybe I am doing something wrong.

I tried this npm install --save-dev @kadira/storybook@3.0.0-alpha.1 <--- is that not correct?

ndelangen · 2017-05-20T06:25:59Z

Yeah that's incorrect, package name is @storybook/react

ndelangen · 2017-05-27T23:17:03Z

Did it work for you @bigassdragon ?

bigassdragon · 2017-05-28T05:32:40Z

Hey @ndelangen,

I have been busy with personal life and work, so I have not had time to try everything out yet sorry.

I will make some time to try it all out today.

Thanks for the reminder.

bigassdragon · 2017-05-30T22:06:02Z

Hey @ndelangen,

I double checked everything, and it looks like everything is a drop in fix for it.

I am able to use all the docgen information without any issues.

Thanks again for taking this PR.

shilman · 2017-05-30T22:09:56Z

Yay! Thanks for your contribution @bigassdragon 🙇

BTW any thoughts on #1147?

bigassdragon · 2017-05-30T22:18:10Z

Hey @shilman,

Would that be a new addon?

konsumer · 2017-08-29T00:09:53Z

Does this still work? I worked on this with @bigassdragon when he originally fixed it, but I can't seem to get it to work in my current project using these versions:

    "@storybook/addon-info": "^3.2.9",
    "@storybook/addon-options": "^3.2.6",
    "@storybook/react": "^3.2.8",

I added this to config.js:

window.STORYBOOK_REACT_CLASSES = {}

and have comments like this:

MyComponent.propTypes = {
  /**
   *  number of stars to display full
   */
  stars: PropTypes.number,

  /** color to use for fill and stroke */
  color: PropTypes.string
}

In my stories, Component.__docgenInfo is still undefined.

konsumer · 2017-08-29T00:37:50Z

I tried with both methods to add info, and .__docgenInfo is undefined in both.

I did this in my config.js:

import { configure, setAddon } from '@storybook/react'
import infoAddon from '@storybook/addon-info'

setAddon(infoAddon)

window.STORYBOOK_REACT_CLASSES = {}

function loadStories () {
  require('../src/stories')
}

configure(loadStories, module)

and made stories that looked like this:

import React from 'react'

import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'

import Docs from './Docs'

storiesOf('Docs', module)
  .add('withInfo', withInfo('Heading here')(() => (<Docs name='David' />)))
  .addWithInfo('addWithInfo', 'Heading here', () => (<Docs name='David' />))

and Docs.js looks like this:

import React from 'react'
import PropTypes from 'prop-types'

/** A dumb component that says "hello" */
export const Docs = ({name}) => (<div>Hello {name}</div>)

Docs.propTypes = {
  /** the name of the person to say "hello" to */
  name: PropTypes.string
}

Docs.defaultProps = {
  name: 'World'
}

export default Docs

I tried class Docs extends React.Component style, too.

Still no "description" field in either story:

steps to reproduce:

npm i -g create-react-app @storybook/cli
create-react-app demo
cd demo
getstorybook

Then I made changes, above.

ndelangen · 2017-08-29T06:21:14Z

@konsumer Can you open a new issue?

konsumer · 2017-08-29T07:04:43Z

@ndelangen Yep, no prob. #1762

Nelson, Joe added 5 commits May 10, 2017 12:52

added version number.

b613d53

working on getting more documentation.

a546a2e

added a post install script.

5ac9286

added code to support js documentation for adding descriptions to a c…

38a3c53

…omponent, fixed issue with `content` was being rendered as an object and give errors for that, added a fix to when you use `PropTypes` from something other than `React` that you can get the type from docgen.

removed version number.

d61acd6

ndelangen requested changes May 16, 2017

View reviewed changes

removed reference to window since it is not needed.

2ba6511

fixed code style problems.

cd3ab0f

Nelson, Joe added 8 commits May 19, 2017 11:01

added version number.

a984acc

working on getting more documentation.

edd6b69

added a post install script.

7958923

added code to support js documentation for adding descriptions to a c…

ad15e80

…omponent, fixed issue with `content` was being rendered as an object and give errors for that, added a fix to when you use `PropTypes` from something other than `React` that you can get the type from docgen.

removed version number.

8dc1369

removed reference to window since it is not needed.

622dadb

fixed code style problems.

ad0fcfe

Merge branch 'master' of github.com:bigassdragon/storybook

3e7bc3c

Merge branch 'master' into master

d08b51b

ndelangen approved these changes May 19, 2017

View reviewed changes

ndelangen merged commit c777084 into storybookjs:master May 19, 2017

shilman mentioned this pull request May 20, 2017

3.0.0 release notes && release notes automation #1047

Merged

shilman added the misc label May 27, 2017

ndelangen changed the title ~~Added component description from __docgenInfo, Added the ability to get the PropType from __docgenInfo for prop table, Fixed an issue with PropVal rendering an object~~ Add better __docgenInfo integration in addon info May 27, 2017

ndelangen added the bug label May 27, 2017

ndelangen changed the title ~~Add better __docgenInfo integration in addon info~~ Fix half-working __docgenInfo integration in addon info May 27, 2017

ndelangen changed the title ~~Fix half-working __docgenInfo integration in addon info~~ Fix semi broken __docgenInfo integration in addon info May 27, 2017

konsumer mentioned this pull request Aug 29, 2017

addon-info: Component.__docgenInfo not defined. #1762

Closed

dependencies bot mentioned this pull request Nov 8, 2017

Update 8 dependencies from npm #2262

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix semi broken __docgenInfo integration in addon info #1030

Fix semi broken __docgenInfo integration in addon info #1030

bigassdragon commented May 13, 2017

ndelangen left a comment

ndelangen May 16, 2017

bigassdragon May 16, 2017

danielduan commented May 18, 2017 •

edited

Loading

bigassdragon commented May 18, 2017

danielduan commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen May 19, 2017

ndelangen May 19, 2017

ndelangen May 19, 2017

ndelangen May 19, 2017

ndelangen May 19, 2017

ndelangen commented May 19, 2017

bigassdragon commented May 19, 2017

danielduan commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen commented May 19, 2017

bigassdragon commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen commented May 20, 2017

ndelangen commented May 27, 2017

bigassdragon commented May 28, 2017

bigassdragon commented May 30, 2017

shilman commented May 30, 2017

bigassdragon commented May 30, 2017

konsumer commented Aug 29, 2017 •

edited

Loading

konsumer commented Aug 29, 2017 •

edited

Loading

ndelangen commented Aug 29, 2017

konsumer commented Aug 29, 2017

Fix semi broken __docgenInfo integration in addon info #1030

Fix semi broken __docgenInfo integration in addon info #1030

Conversation

bigassdragon commented May 13, 2017

What I did

How to test

ndelangen left a comment

Choose a reason for hiding this comment

ndelangen May 16, 2017

Choose a reason for hiding this comment

bigassdragon May 16, 2017

Choose a reason for hiding this comment

danielduan commented May 18, 2017 • edited Loading

bigassdragon commented May 18, 2017

danielduan commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen May 19, 2017

Choose a reason for hiding this comment

ndelangen May 19, 2017

Choose a reason for hiding this comment

ndelangen May 19, 2017

Choose a reason for hiding this comment

ndelangen May 19, 2017

Choose a reason for hiding this comment

ndelangen May 19, 2017

Choose a reason for hiding this comment

ndelangen commented May 19, 2017

bigassdragon commented May 19, 2017

danielduan commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen commented May 19, 2017

bigassdragon commented May 19, 2017

bigassdragon commented May 19, 2017

ndelangen commented May 20, 2017

ndelangen commented May 27, 2017

bigassdragon commented May 28, 2017

bigassdragon commented May 30, 2017

shilman commented May 30, 2017

bigassdragon commented May 30, 2017

konsumer commented Aug 29, 2017 • edited Loading

konsumer commented Aug 29, 2017 • edited Loading

ndelangen commented Aug 29, 2017

konsumer commented Aug 29, 2017

danielduan commented May 18, 2017 •

edited

Loading

konsumer commented Aug 29, 2017 •

edited

Loading

konsumer commented Aug 29, 2017 •

edited

Loading