Render Gutenberg examples assuming they are defining a MyComponent co…

…mponent

client/devdocs/design/gutenberg-component-example.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import * as components from '@wordpress/components';
 import { withState } from '@wordpress/compose';
 import { getSettings } from '@wordpress/date';
+import { Fragment } from '@wordpress/element';
 import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import request from 'superagent';
 import codeBlocks from 'gfm-code-blocks';
@@ -33,12 +34,20 @@ class Example extends React.Component {
 				format: 'markdown',
 			} )
 			.then( ( { text } ) => {
-				let code = codeBlocks( text ).filter( block => 'jsx' === block.lang )[ 0 ].code;
+				let code = codeBlocks( text ).find( block => 'jsx' === block.lang ).code;
 
 				// react-live cannot resolve imports in real time, so we get rid of them
-				// (dependencies will be injected via the scope property)
+				// (dependencies will be injected via the scope property).
 				code = code.replace( /^.*import.*$/gm, '' );
 
+				// All the examples are defining a functional component called My<ComponentName> we
+				// can render.
+				code = `
+					${ code }
+					
+					render( <My${ this.props.component } /> );
+				`;
+
 				this.setState( { code } );
 			} );
 	}
@@ -49,14 +58,15 @@ class Example extends React.Component {
 			...components,
 			withState,
 			getSettings,
+			Fragment,
 		};
 		const className = classnames(
 			'design__gutenberg-component-example',
 			`design__gutenberg-component-example--${ this.props.readmeFilePath }`
 		);
 
 		return code ? (
-			<LiveProvider code={ code } scope={ scope } className={ className }>
+			<LiveProvider code={ code } scope={ scope } className={ className } noInline={ true }>
 				<LiveError />
 				<LivePreview />
 			</LiveProvider>

client/devdocs/design/gutenberg-components.jsx

@@ -42,6 +42,7 @@ export default class extends React.Component {
 
 		const componentsWithExample = [
 			'Autocomplete',
+			'BaseControl',
 			'Button',
 			'ButtonGroup',
 			'CheckboxControl',
@@ -66,6 +67,7 @@ export default class extends React.Component {
 			'MenuGroup',
 			'MenuItem',
 			'MenuItemsChoice',
+			'Modal',
 		];
 
 		return (
@@ -100,6 +102,7 @@ export default class extends React.Component {
 							<GutenbergComponentExample
 								key={ componentName }
 								asyncName={ componentName }
+								component={ componentName }
 								readmeFilePath={ readmeFilePath }
 							/>
 						);

package.json

@@ -38,6 +38,7 @@
     "@wordpress/compose": "1.0.2",
     "@wordpress/data": "1.0.1",
     "@wordpress/date": "1.0.2",
+    "@wordpress/element": "1.0.2",
     "autoprefixer": "9.1.0",
     "autosize": "4.0.2",
     "babel-loader": "8.0.0-beta.4",