storybook show source code

[maxhudson]

storybook should show source code

[maeriens]

I'll chime in - you have a few approaches to this right now

For them, some nice to haves would be to

1. Add PropTypes to each component, or at least the table (package is now installed but it is not being used). I think you can even force the StickyTable children to be Row, and Row children to be only Cell.
2. Add defaultProp to each component, or at least the table. This also gets rid of a few =1 inside the table
3. Use it as PropsTable of the story
4. Optionally, you can add comments in the PropTypes to show the descriptions
5. Replace the code inside each story for the actual return values of the classes you reference (if you render <Basic /> you get the output in the image below, if you put a the code that's in the return() inside the render() of Basic, the code gets show). Using functional components might help.

Now, the addons that help with this:
The first one is to use the info addon. Codewise changes are minimal, add the addon, register it, done.

The second one is to go for the docs addon, which will replace info in the coming storybook.
For this approach, although the storiesOf syntax might remain, they offer two new ways of writting stories, CSF (Component Story Format) and MDX (A JSX/MD mix). CSF is nice to write, MDX I didn't really like so did not check. This is the official example of it. This approach also can eliminate the need for the knobs addon in storybook 6.

A third option is the jsx addon but it is not officialy supported so I did not try it anywhere.

[maxhudson]

Thanks! PropTypes would be good - but I'm thinking the source code of each example would be nice to get below the functioning example, in-case you wanted to straight-up copy and paste the example into a project or see some detail of how it worked.

I tried info addon and it didn't seem to work - but it sounds like it's supposed to do what I'm hoping for.

docs addon seemed more complex, so I didn't try

[maxhudson]

my not-working PR: #99