Set up default examples for components

[andyearnshaw]

I was thinking of using BlueKit as an interactive documentation tool for an internally-used library of components. However, many components look plain or completely blank until props/children are set, or the description isn't sufficient to describe how the component should work.

To this end, I think it would be useful if I could write examples in the JSDoc comments, with the first example being the default-display for the component within BlueKit. Something along the lines of:

/**
 * Renders a button.
 * 
 * @example Rounded corners
 * <Button style="rounded" onClick={ () => alert('clicked') }>
 *   Press me
 * </Button>
 *
 * @example No background
 * <Button style="ghost" onClick={ () => alert('clicked') }>
 *   Press me
 * </Button>
 */

That's a simple demonstration of what I mean, these examples would allow default children and props to be defined for the initial display of a component. The text after @example would be added to a select box, with the content up until the end or next @ tag being used to pre-populate the props/children.