Feat: Interactive Component Playground

[adamdbradley]

Add an interactive component playground for each component.

Goals:

• Storybook-like component app with customizable "knobs"
• Compose one, or multiple components
• Markdown only
• NOT a replacement for "Usage" section, but does remove the need for a lot of code within each framework Usage
  to start
• Zero to many playgrounds in the same docs page possible
• No special build step required, a commit to the markdown file should be enough to build the playground
• Any custom markdown parsing should go into https://github.com/ionic-team/stencil-ssg

Out of scope:

• Copy to clipboard the example in the various framework's template code
• Live code editing

[claviska]

Here's an initial [crudely drawn] sketch based on some concepts I've looked at. The config on the right seems to be the most common and the best orientation UX-wise.

The mobile variation shown collapses the config panel into a drawer. I like this approach because users probably aren't as interested in toggling options on a phone. An alternative would be to bump the config panel below the preview, but depending on the size of the preview, this could mean a lot of scrolling on a phone.

Not sure if we care about a responsive slider, but I threw one in for now.

The config panel needs to support multiple prop types, some of which are sketched below.

The question of how to define, assign, and sync props in the context of a markdown file still remains, but we can experiment with some ideas.

[sean-perkins]

🎉 we now have component playgrounds: https://ionicframework.com/docs/api/datetime#basic-usage