Add component playground to devdocs

[enejb]

This is a try of a devdocs component playground. Probably not the best way forward but more of a proof of concept. In order to get some feedback

component-playground npm package does most of the heavy lifting. It also uses codemirror for the editor.

To try it out load up this branch and go to http://calypso.localhost:3000/devdocs/playground

This is what it looks like right now:

cc @MichaelArestad and @retrofox, @mcsf

[matticbot]

Test live: https://calypso.live/?branch=update/devdocs-styles

[stephanethomas]

Very dumb question but how do you import a specific component?

[enejb]

@stephanethomas You first need to add it to import it like this
https://github.com/Automattic/wp-calypso/pull/8284/files#diff-68077dca8353c22ec7e2895ed34eb556R12 and then expose it to the Playground component like https://github.com/Automattic/wp-calypso/pull/8284/files#diff-68077dca8353c22ec7e2895ed34eb556R52 by adding it to the scope.
inside client/devdocs/playground/index.jsx

There a are a few other parts that needs to get added in order to make it work well it an example component.

1. add a new example.txt file and import it
2. Add the example component to docClass.
   After that you should be able to expose the component in the url.
   http://calypso.localhost:3000/devdocs/playground/button

hope that helps.

[stephanethomas]

Thanks for the clarification Enej!

[retrofox]

I like the idea to can edit properties on the fly. One concern is that we'll have to add an example.txt file for each component, which is ok for me but It will bring more work at the time to add an example.

And the other thing I wonder if the PlayGround option at the sidebar came here to stay definitely. If so in my opinion, it isn't a good deal. I prefer to think of a single way/page for each component and then get different options: isolated mode, usage example (to copy and paste), etc. Among of these playground could be a nice option.

[retrofox]

I thought something like the following.

A simple toolbar for each component. I put Playground button like an example. The another one is Isolate mode. I'll create a PR for this in few minutes.

[MichaelArestad]

@retrofox I think we should add the playground to the individual component view you showed above, but with some design tweaks. Something like:

example code playground box
playground preview
more examples (like all the gridicons allowing for copy/paste and some of the cool examples you made to show off functionality)
readme (without the example code since it would be redundant)

[lancewillett]

Bumping since #10342 mentions it — if no activity next time it comes up in a scrub for older pull requests I'll probably close it.

[MichaelArestad]

@retrofox and @enejb Any interest in spending a day next week seeing if we can integrate something like this into devdocs?

[enejb]

Yes would love to see this in Dev Docs but next week I will on a meet. :(

[alisterscott]

Closing as this PR is stale - please reopen if necessary