[JSdoc] Create a <Result /> global component to omprove rendering of result of non react code mirror example

[kopax]

JSdoc cannot render nicely

react-styleguidist is made to quickly write documentation for react component but it also work for normal javascript.

It is convenient to reuse it for our js documentation because it uses the same engine for translating markdown into HTML and it support react but the current rendering features is note making things nice or simpler:

There's two @annotation that can be used to highlight code in jsdoc:

• @example: this will highlight static code using javascript language for the highlight
• @description: this will allow you to write plain markdown and an interactive code block can be created that way.

The rendering MUST use one single react node tree, and all the styling must be done within the example.

This takes time and complexifies the example of code, it cannot be copy past.

This ticket consist of creating a <Result /> component that will be attached to the global scope by default for all non react example with the following props:

import PropTypes from 'prop-types';
const propTypes = {
   /** the title of the example */
   title: PropTypes.string,
   /** description of the result */
   description: PropTypes.string,
   /** Use an highlight and the language (default: undefined) for the result */
   language: PropTypes.string,
   /** if passed it will be JSON.stringify() into the result and use the language json for the color */
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   /** pass a result here */
   children: PropTypes.oneOfType(PropTypes.arrayOf(Result), PropTypes.string, PropTypes.node),
}

Example of usage

With data

<Result 
  title="Page with routes config" 
  description="It also support routes map" 
  data={pages}
/>

With highlight:

<Result 
  title="Page layout" 
  description="This layout can be used for webpack" 
  highlight="html"
>
  {codeHtml}
</Result>

With nested Result:

<Result 
  title="More example" 
  description="This show how to display a table of result" 
>
  <Result title="example 1" data={moreresult} />
  <Result title="example 2" data={moreresult2} />
</Result>