Render React components with it's source... about storybook

[achtan]

view source - yes
edit source - no

[willdady]

Not sure if this is what everyone else had in mind but I'd rather see the component's implementation, not the source code. If I wanted to see the source code I'd look at the source code. If my story looked like this:

storiesOf('ProgressBar', module)
  .add('25%', () => (
    <ProgressBar progress={0.25} />
  ));

I'd like to see <ProgressBar progress={0.25} /> rendered somewhere in the storybook. Maybe as a separate panel above the action logger, or a separate tab?

[thani-sh]

Fixed with this addon

[ritz078]

I don't think we should go ahead with this idea at this moment. react-storybook shouldn't take the component development out of the application. We should edit real files because otherwise using this module will become as good as using codepen or jsfiddle. At the same time as long as we are using this for development and not for component display, we can use devtools to see source code.

[jeef3]

I would actually start to wonder the value of seeing even the source inline (other than to make this a complete component IDE of course).

Instead, what do you want Storybook to become? So far it is a place for seeing the different states a component might be in, while also providing hot-reloading, ideal for development. Does Storybook then become a living styleguide perhaps? A library so other developers on your team can see what components are available and how to use them? If this is the case, then there might be value in not necessarily story source code, but example usage source code? Could this be extracted from the story somehow and displayed, maybe?

[arunoda]

@stewartduffy using rawLoaders is a pretty interesting idea. @mnmtanish Check this.

[stewartduffy]

If there is talk of adding support for displaying code example - I think it's worth looking at how material ui do it in their docs. Quite a nice implemtation. They store their code example in external js module & import it in twice to their page. One using the raw webpack loader, they pass the result of this file into a markdown component & the pass the regular loaded example to their page component that renders the example. This way their code example stays in sync with actual component rendered. See https://github.com/callemall/material-ui/blob/master/docs/src/app/components/MarkdownElement.js & https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/FlatButton/Page.js

[arunoda]

@mnmtanish and @roonyh is working on project related to this.
See: https://github.com/kadirahq/react-storybook-story

We'll launch this soon. Anyway, you can use this right now as well.

[arunoda]

@jeef3 It's too early to say where Storybook goes. Currently, it's only work as dev tool. But we are working on a static builder. See: #88

With that, we could publish our storybook into a set of static HTML files and publish to GitHub pages (or similar).

There is also an attempt to use markdown inside stories and render proptypes. See: #19 (comment)

So, React Storybook could be used as a living style guide too.

[necolas]

With that, we could publish our storybook into a set of static HTML files and publish to GitHub pages (or similar).

I'm using this and it's a great feature. View source / edit source is complex and I'm not sure what value it adds to react development workflows.

[antoinegrant]

@willdady that's what I had in mind when stating this ticket.

[achtan]

@willdady exactly!

[ritz078]

Or maybe a panel showing the state and props just like React Devtools

[danielkcz]

Yes, that's definitely something that is missing to see what actual properties were used to display component in such state. As of now it only relies to having good enough description of the story.