Introduce an optional Preview component

[johno]

Currently this works, however the preview is understandably a bit broken. I'm wondering if perhaps we offer an optional Preview component?:

import {
  Provider,
  Library,
  Example,
  Preview,
  Knobs
} from '@compositor/kit'

import Doc from '../docs/components/Button.md'
import { Button } from './ui'

export default () =>
  <Provider>
    <Library>
      <Library.Nav />
      <Example name='Button'>
        <Preview>
          <Button>Button</Button>
        </Preview>

        <Doc />

        <Knobs>
          <Button size='normal'>Hello</Button>
          <Knobs.Input name='children' />
          <Knobs.Select name='size'>
            <option></option>
            <option>small</option>
            <option>normal</option>
            <option>large</option>
          </Knobs.Select>
        </Knobs>
      </Example>
    </Library>
   </Provider>

In this example, only Preview is rendered in the library view, and the remainder is rendered in the component view.

[jxnblk]

Yeah, I was pondering this as well. Would make more sense than each component like Knobs trying to handle that – I wonder if it should be an optional Example.Preview component to make it more clearly tied to Library and Example

[jxnblk]

I showed a code example in Slack, but this approach might be nice, where the Detail component is excluded from the grid/list view

<Library>
  <Example>
    <Button>Beep</Button>
    <Detail>
      {....knobsEtc}
    </Detail>
  </Example>
</Library>