DevDocs: Gutenberg components - Updating examples

assets/stylesheets/sections/devdocs.scss

@@ -4,9 +4,7 @@
 @import 'devdocs/style';
 @import 'devdocs/design/style';
 @import 'devdocs/design/syntax.scss';
+@import 'devdocs/gutenberg-components/style';
 @import 'devdocs/gutenberg-blocks/style';
 
 @import 'assets/stylesheets/sections/media';
-
-// Gutenberg components
-@import '../../../node_modules/@wordpress/components/build-style/style';

client/devdocs/controller.js

@@ -166,7 +166,7 @@ const devdocs = {
 	// Gutenberg Components
 	gutenbergComponents: function( context, next ) {
 		context.primary = (
-			<AsyncLoad component={ context.params.component } require="./design/gutenberg-components" />
+			<AsyncLoad component={ context.params.component } require="./gutenberg-components" />
 		);
 		next();
 	},

client/devdocs/design/component-playground.jsx

@@ -44,9 +44,6 @@ class ComponentPlayground extends Component {
 		const { section } = this.props;
 		let scope = null;
 		switch ( section ) {
-			case 'gutenberg-components':
-				scope = require( '@wordpress/components' );
-				break;
 			case 'gutenberg-blocks':
 				scope = require( 'gutenberg-blocks' );
 				break;

client/devdocs/design/style.scss

@@ -13,7 +13,7 @@
 
 .design__playground {
 	margin: -24px;
-	@include breakpoint( '>960px') {
+	@include breakpoint( '>960px' ) {
 		margin: -32px;
 	}
 }
@@ -27,25 +27,25 @@
 	box-sizing: border-box;
 	color: $alert-red;
 	position: sticky;
-		top: 0;
+	top: 0;
 }
 
 .react-live-error,
 .design__preview {
 	padding: 24px;
-	@include breakpoint( '>960px') {
+	@include breakpoint( '>960px' ) {
 		padding: 32px;
 	}
 }
 
 .design__preview {
 	position: relative;
-	@include breakpoint( '>960px') {
+	@include breakpoint( '>960px' ) {
 		position: static;
 	}
 }
 
-@include breakpoint( '>960px') {
+@include breakpoint( '>960px' ) {
 	.design__playground {
 		display: flex;
 		height: calc( 100vh - 47px );
@@ -71,8 +71,8 @@
 .design__component-playground-clipboard {
 	padding: 0;
 	position: absolute;
-		right: 10px;
-		top: 10px;
+	right: 10px;
+	top: 10px;
 }
 
 .design__component-playground-show-code {

client/devdocs/design/test/component-playground.js

@@ -17,7 +17,6 @@ import ComponentPlayground from '../component-playground';
 
 jest.mock( 'devdocs/design/playground-scope', () => 'PlaygroundScope' );
 jest.mock( 'gutenberg-blocks', () => 'GutenbergBlocks' );
-jest.mock( '@wordpress/components', () => 'GutenbergComponents' );
 
 describe( 'ComponentPlayground', () => {
 	test( 'LiveProvider should use the components scope by default', () => {
@@ -28,18 +27,6 @@ describe( 'ComponentPlayground', () => {
 		expect( liveProvider.props().scope ).toBe( 'PlaygroundScope' );
 	} );
 
-	test(
-		'LiveProvider should use the Gutenberg components scope when section is Gutenberg' +
-			' components',
-		() => {
-			const wrapper = shallow(
-				<ComponentPlayground section="gutenberg-components" code="foo" name="foo" url="foo" />
-			);
-			const liveProvider = wrapper.find( LiveProvider );
-			expect( liveProvider.props().scope ).toBe( 'GutenbergComponents' );
-		}
-	);
-
 	test( 'LiveProvider should use the Gutenberg blocks scope when section is Gutenberg blocks', () => {
 		const wrapper = shallow(
 			<ComponentPlayground section="gutenberg-blocks" code="foo" name="foo" url="foo" />

client/devdocs/gutenberg-components/example.jsx

@@ -0,0 +1,77 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import * as components from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+import { getSettings } from '@wordpress/date';
+import { addFilter } from '@wordpress/hooks';
+import { LiveError, LivePreview, LiveProvider } from 'react-live';
+import request from 'superagent';
+import codeBlocks from 'gfm-code-blocks';
+import classnames from 'classnames';
+import { kebabCase } from 'lodash';
+import PropTypes from 'prop-types';
+
+class Example extends React.Component {
+	state = {
+		code: null,
+	};
+
+	componentDidMount() {
+		this.getCode();
+	}
+
+	async getReadme() {
+		const readmeFilePath = `/node_modules/@wordpress/components/src/${
+			this.props.readmeFilePath
+		}/README.md`;
+
+		const { text } = await request.get( '/devdocs/service/content' ).query( {
+			path: readmeFilePath,
+			format: 'markdown',
+		} );
+		return text;
+	}
+
+	async getCode() {
+		const readme = await this.getReadme();
+
+		// Example to render is the first jsx code block that appears in the readme
+		let code = codeBlocks( readme ).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).
+		code = code.replace( /^.*import.*$/gm, '' );
+
+		code = `${ code } render( <${ this.props.render } /> );`;
+
+		this.setState( { code } );
+	}
+
+	render() {
+		const { code } = this.state;
+		const scope = {
+			...components,
+			withState,
+			getSettings,
+			PropTypes,
+			addFilter,
+		};
+		const className = classnames(
+			'devdocs__gutenberg-components-example',
+			`devdocs__gutenberg-components-example--${ kebabCase( this.props.component ) }`
+		);
+
+		return code ? (
+			<LiveProvider code={ code } scope={ scope } className={ className } noInline={ true }>
+				<LiveError />
+				<LivePreview />
+			</LiveProvider>
+		) : null;
+	}
+}
+
+export default Example;

client/devdocs/gutenberg-components/examples.json

@@ -0,0 +1,90 @@
+[
+	{ "component": "Autocomplete" },
+	{ "component": "BaseControl" },
+	{ "component": "Button" },
+	{ "component": "ButtonGroup" },
+	{ "component": "CheckboxControl" },
+	{ "component": "ClipboardButton" },
+	{ "component": "ColorIndicator" },
+	{ "component": "ColorPalette" },
+	{ "component": "Dashicon" },
+	{ "component": "DateTimePicker", "readmeFilePath": "date-time" },
+	{ "component": "Disabled" },
+	{ "component": "Draggable" },
+	{ "component": "DropZone" },
+	{ "component": "Dropdown" },
+	{ "component": "DropdownMenu" },
+	{ "component": "ExternalLink" },
+	{ "component": "FocusableIframe" },
+	{ "component": "FontSizePicker" },
+	{ "component": "FormFileUpload" },
+	{ "component": "FormToggle" },
+	{ "component": "FormTokenField" },
+	{ "component": "IconButton" },
+	{ "component": "KeyboardShortcuts" },
+	{ "component": "MenuGroup" },
+	{ "component": "MenuItem" },
+	{ "component": "MenuItemsChoice" },
+	{ "component": "Modal" },
+	{
+		"component": "navigateRegions",
+		"readmeFilePath": "higher-order/navigate-regions",
+		"render": "MyComponentWithNavigateRegions"
+	},
+	{ "component": "NavigableContainer" },
+	{ "component": "Notice" },
+	{ "component": "Panel" },
+	{ "component": "Placeholder" },
+	{ "component": "Popover" },
+	{ "component": "QueryControls" },
+	{ "component": "RadioControl" },
+	{ "component": "RangeControl" },
+	{ "component": "ResponsiveWrapper" },
+	{ "component": "SandBox", "readmeFilePath": "sandbox" },
+	{ "component": "ScrollLock" },
+	{ "component": "SelectControl" },
+	{ "component": "SlotFillProvider", "readmeFilePath": "slot-fill" },
+	{ "component": "Spinner" },
+	{ "component": "TabPanel" },
+	{ "component": "TextControl" },
+	{ "component": "TextareaControl" },
+	{ "component": "ToggleControl" },
+	{ "component": "Toolbar" },
+	{ "component": "Tooltip" },
+	{ "component": "TreeSelect" },
+	{
+		"component": "withConstrainedTabbing",
+		"readmeFilePath": "higher-order/with-constrained-tabbing",
+		"render": "MyComponentWithConstrainedTabbing"
+	},
+	{
+		"component": "withFallbackStyles",
+		"readmeFilePath": "higher-order/with-fallback-styles",
+		"render": "MyComponentWithFallbackStyles"
+	},
+	{
+		"component": "withFilters",
+		"readmeFilePath": "higher-order/with-filters",
+		"render": "MyComponentWithFilters"
+	},
+	{
+		"component": "withFocusOutside",
+		"readmeFilePath": "higher-order/with-focus-outside",
+		"render": "MyComponentWithFocusOutside"
+	},
+	{
+		"component": "withFocusReturn",
+		"readmeFilePath": "higher-order/with-focus-return",
+		"render": "MyComponentWithFocusReturn"
+	},
+	{
+		"component": "withNotices",
+		"readmeFilePath": "higher-order/with-notices",
+		"render": "MyComponentWithNotices"
+	},
+	{
+		"component": "withSpokenMessages",
+		"readmeFilePath": "higher-order/with-spoken-messages",
+		"render": "MyComponentWithSpokenMessages"
+	}
+]