DevDocs: Gutenberg Components - Loading examples dynamically

Adding compatibility for components having a name that doesn't match the
file path

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

@@ -4,8 +4,10 @@
  * External dependencies
  */
 import React from 'react';
-import * as scope from '@wordpress/components';
-import { LiveError, LiveProvider, LivePreview } from 'react-live';
+import * as components from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+import { getSettings } from '@wordpress/date';
+import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import request from 'superagent';
 import codeBlocks from 'gfm-code-blocks';
 
@@ -22,6 +24,7 @@ class Example extends React.Component {
 		const readmeFilePath = `/node_modules/@wordpress/components/src/${
 			this.props.readmeFilePath
 		}/README.md`;
+
 		request
 			.get( '/devdocs/service/content' )
 			.query( {
@@ -41,6 +44,11 @@ class Example extends React.Component {
 
 	render() {
 		const { code } = this.state;
+		const scope = {
+			...components,
+			withState,
+			getSettings,
+		};
 		return code ? (
 			<LiveProvider code={ code } scope={ scope } className="design__gutenberg-component-example">
 				<LiveError />

client/devdocs/design/gutenberg-components.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import page from 'page';
-import { trim } from 'lodash';
+import { isArray, trim } from 'lodash';
 
 /**
  * Internal dependencies
@@ -40,7 +40,7 @@ export default class extends React.Component {
 			'is-list': ! component,
 		} );
 
-		const componentsWithExamples = [
+		const componentsWithExample = [
 			'Autocomplete',
 			'Button',
 			'ButtonGroup',
@@ -49,6 +49,7 @@ export default class extends React.Component {
 			'Dashicon',
 			'Disabled',
 			'Draggable',
+			[ 'DateTimePicker', { readmeFilePath: 'date-time' } ],
 		];
 
 		return (
@@ -72,12 +73,18 @@ export default class extends React.Component {
 				) }
 
 				<Collection component={ component } filter={ filter } section="gutenberg-components">
-					{ componentsWithExamples.map( componentName => {
+					{ componentsWithExample.map( componentWithExample => {
+						const componentName = isArray( componentWithExample )
+							? componentWithExample[ 0 ]
+							: componentWithExample;
+						const readmeFilePath = isArray( componentWithExample )
+							? componentWithExample[ 1 ].readmeFilePath
+							: camelCaseToSlug( componentName );
 						return (
 							<GutenbergComponentExample
 								key={ componentName }
 								asyncName={ componentName }
-								readmeFilePath={ camelCaseToSlug( componentName ) }
+								readmeFilePath={ readmeFilePath }
 							/>
 						);
 					} ) }

client/devdocs/design/style.scss

@@ -90,11 +90,8 @@
 }
 
 .design__gutenberg-component-example {
+	// Styles the contenteditable div included in the Autocomplete example as an input
 	.components-autocomplete [contenteditable] {
 		@extend %form-field;
 	}
 }
-
-.docs__gutenberg-components-datepicker {
-	display: inline-block;
-}

package.json

@@ -33,7 +33,9 @@
     "@babel/runtime": "7.0.0-beta.53",
     "@wordpress/blocks": "1.0.0",
     "@wordpress/components": "1.0.1",
+    "@wordpress/compose": "1.0.1",
     "@wordpress/data": "1.0.1",
+    "@wordpress/date": "1.0.1",
     "autoprefixer": "9.0.1",
     "autosize": "4.0.2",
     "babel-loader": "8.0.0-beta.4",