Blueprint: Add demo page

[viankakrisna]

I think it's useful for people to see the general view of this framework and how the components play with each other.

[mihirk]

Any examples of the kind of demo pages you have in mind?

[benheymink]

Not OP, but I found example in the docs to be a bit hidden; might be worth reorganising them to put the live examples first, and to perhaps have them in some sort of well/bounding container to make it clearer where the live examples are - similar to the Bootstrap component docs, for example.

At the moment, you have to select a component from the list on the left, and hunt for the component demo somewhat from the wall of text. (Not complaining by the way - the docs are outstanding)

[Setsun]

This might also be a good use case for something like react-hot-loader or component-playground.

React Hot Loader: http://gaearon.github.io/react-hot-loader
Component Playground: https://formidable.com/open-source/component-playground/

This can provide developers with an editing environment that supports JSX and give them a live preview of what those components will look like right in the docs. This can also be useful to see how components behave based on the props that are passed down.

[adidahiya]

there's also react-storybook

[Setsun]

I had not heard of react-storybook. It does look like a viable solution for showcasing how a component would behave based on a given state or when used with other components. However it doesn't look like it has a live-editing environment.

I think both react-storybook and react-hot-loader or another solution could work in tandem. I do still think a live-editing environment would be useful for developers to test their assumptions. Possibly it could belong in a different issue to be tracked separately?

[emlama]

Great to see that people are thinking about live editing of components in the docs. I had some troubles using react-hot-loader and component-playground when I built something similar for our system and ended up just using codemirror and babel-standalone but your milage may vary.

Anyhow, I wanted to get back to the original intent of this issue–a demo page. When I look at design systems and component libraries, there are two really helpful things they can do.

The first is to give you a 'kitchen sink' with everything in the system. As a designer, it's a great way to quickly sift through the system and pull out what you want. Moreover, it's a great way to see how tweaks to SASS variables ripple through the system.

The second, is to see demo pages or template pages so you can understand how the system plays together. I'd imagine that this is a wee bit more complicated then a kitchen sink but they go a long way to helping people visualize where a design system can take them.

[brsanthu]

Semantic UI React has a nice way of showing the React Code, rendered html and has the capability to edit the ReactCode on the fly.

http://react.semantic-ui.com/introduction

[adidahiya]

The code sandbox linked from the README and bug report template is a reasonable demo page in addition to the documentation. There are no plans to add any other kind of demo page.