Convert markdown JSX code blocks to actual JS files for component documentation.

plugins/woocommerce-admin/client/devdocs/example.js

@@ -2,78 +2,40 @@
 /**
  * External dependencies
  */
-import codeBlocks from 'gfm-code-blocks';
 import { Component } from '@wordpress/element';
-import { LiveError, LivePreview, LiveProvider } from 'react-live';
-// Used to provide scope in LivePreview
-import { addFilter } from '@wordpress/hooks';
-import { withState } from '@wordpress/compose';
-import * as wpComponents from '@wordpress/components';
-import Gridicon from 'gridicons';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import * as components from 'components';
-import * as pkgComponents from '@woocommerce/components';
+import React from 'react';
 
 class Example extends Component {
 	state = {
-		code: null,
+		example: null,
 	};
 
 	componentDidMount() {
-		this.getCode();
+		this.getExample();
 	}
 
-	async getCode() {
-		let readme;
+	async getExample() {
+		let exampleComponent;
+
 		try {
-			readme = require( `components/src/${ this.props.filePath }/example.md` );
+			exampleComponent = require( `components/src/${ this.props.filePath }/docs/example` );
 		} catch ( e ) {
-			readme = require( `components/${ this.props.filePath }/example.md` );
+			console.error( e );
 		}
-		if ( ! readme ) {
+
+		if ( ! exampleComponent ) {
 			return;
 		}
 
-		// 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 } );
+		this.setState( {
+			example: React.createElement( exampleComponent.default || exampleComponent ),
+		} );
 	}
 
 	render() {
-		const { code } = this.state;
-		const scope = {
-			...wpComponents,
-			...components,
-			...pkgComponents,
-			Component,
-			withState,
-			PropTypes,
-			addFilter,
-			Gridicon,
-		};
+		const { example } = this.state;
 
-		return code ? (
-			<LiveProvider
-				code={ code }
-				scope={ scope }
-				className="woocommerce-devdocs__example"
-				noInline={ true }
-			>
-				<LiveError />
-				<LivePreview />
-			</LiveProvider>
-		) : null;
+		return <div className="woocommerce-devdocs__example">{ example }</div>;
 	}
 }
 

plugins/woocommerce-admin/packages/components/src/advanced-filters/docs/example.js

@@ -1,8 +1,11 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { AdvancedFilters } from '@woocommerce/components';
 const { orderStatuses } = wcSettings;
 
-const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
+const path = ( new URL( document.location ) ).searchParams.get( 'path' ) || '/devdocs';
 const query = {};
 
 const advancedFilters = {
@@ -41,7 +44,7 @@ const advancedFilters = {
 				remove: 'Remove products filter',
 				rule: 'Select a product filter match',
 				title: '{{title}}Product{{/title}} {{rule /}} {{filter /}}',
-				filter:'Select products',
+				filter: 'Select products',
 			},
 			rules: [
 				{
@@ -70,8 +73,8 @@ const advancedFilters = {
 			input: {
 				component: 'SelectControl',
 				options: [
-					{ value: 'new', label: 'New', },
-					{ value: 'returning', label: 'Returning', },
+					{ value: 'new', label: 'New' },
+					{ value: 'returning', label: 'Returning' },
 				],
 				defaultOption: 'new',
 			},
@@ -130,7 +133,7 @@ const advancedFilters = {
 	},
 };
 
-const MyAdvancedFilters = () => (
+export default () => (
     <AdvancedFilters
         path={ path }
         query={ query }
@@ -138,4 +141,3 @@ const MyAdvancedFilters = () => (
 		config={ advancedFilters }
     />
 );
-```

plugins/woocommerce-admin/packages/components/src/animation-slider/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { AnimationSlider } from '@woocommerce/components';
 
-class MyAnimationSlider extends Component {
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+
+export default class MyAnimationSlider extends Component {
 	constructor() {
 		super();
 		this.state = {
@@ -39,7 +47,7 @@ class MyAnimationSlider extends Component {
 		return (
 			<div>
 				<AnimationSlider animationKey={ page } animate={ animate }>
-					{ status => (
+					{ () => (
 						<div style={ style }>
 							{ pages[ page ] }
 						</div>
@@ -55,4 +63,3 @@ class MyAnimationSlider extends Component {
 		);
 	}
 }
-```

plugins/woocommerce-admin/packages/components/src/autocomplete/docs/example.js

@@ -1,6 +1,13 @@
-```jsx
+/**
+ * Internal dependencies
+ */
 import { Autocomplete } from '@woocommerce/components';
 
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
 const options = [
     {
         key: 'apple',
@@ -15,73 +22,69 @@ const options = [
 	{
         key: 'banana',
 		label: 'Banana',
-		keywords: ['best', 'fruit'],
-		value: { id: 'banana' }
+		keywords: [ 'best', 'fruit' ],
+		value: { id: 'banana' },
 	},
 	{
         key: 'blueberry',
 		label: 'Blueberry',
-		value: { id: 'blueberry' }
+		value: { id: 'blueberry' },
 	},
 	{
         key: 'cherry',
 		label: 'Cherry',
-		value: { id: 'cherry' }
+		value: { id: 'cherry' },
 	},
 	{
         key: 'cantaloupe',
 		label: 'Cantaloupe',
-		value: { id: 'cantaloupe' }
+		value: { id: 'cantaloupe' },
 	},
 	{
         key: 'dragonfruit',
 		label: 'Dragon Fruit',
-		value: { id: 'dragonfruit' }
+		value: { id: 'dragonfruit' },
 	},
 	{
         key: 'elderberry',
 		label: 'Elderberry',
-		value: { id: 'elderberry' }
+		value: { id: 'elderberry' },
     },
 ];
-const onChange = (selected) => {
-	console.log( selected );
-}
 
-const MyAutocomplete = withState( {
+export default withState( {
 	singleSelected: [],
 	multipleSelected: [],
 	inlineSelected: [],
 } )( ( { singleSelected, multipleSelected, inlineSelected, setState } ) => (
 	<div>
 		<Autocomplete
-			label='Single value'
+			label="Single value"
 			onChange={ ( selected ) => setState( { singleSelected: selected } ) }
 			options={ options }
-			placeholder='Start typing to filter options...'
+			placeholder="Start typing to filter options..."
 			selected={ singleSelected }
 		/>
-		<br/>
+		<br />
 		<Autocomplete
-			label='Inline tags'
+			label="Inline tags"
 			multiple
 			inlineTags
 			onChange={ ( selected ) => setState( { inlineSelected: selected } ) }
 			options={ options }
-			placeholder='Start typing to filter options...'
+			placeholder="Start typing to filter options..."
 			selected={ inlineSelected }
 		/>
-		<br/>
+		<br />
 		<Autocomplete
 			hideBeforeSearch
-			label='Hidden options before search'
+			label="Hidden options before search"
 			multiple
 			onChange={ ( selected ) => setState( { multipleSelected: selected } ) }
 			options={ options }
-			placeholder='Start typing to filter options...'
+			placeholder="Start typing to filter options..."
 			selected={ multipleSelected }
 			showClearButton
 		/>
 	</div>
 ) );
-```

plugins/woocommerce-admin/packages/components/src/calendar/docs/example.js

@@ -1,10 +1,23 @@
-```jsx
-import { DateRange, DatePicker } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import {
+	DateRange,
+	DatePicker,
+	H,
+	Section,
+} from '@woocommerce/components';
+
+/**
+ * External dependencies
+ */
 import moment from 'moment';
+import { withState } from '@wordpress/compose';
 
 const dateFormat = 'MM/DD/YYYY';
 
-const MyDateRange =  withState( {
+export default withState( {
 	after: null,
 	afterText: '',
 	before: null,
@@ -12,19 +25,19 @@ const MyDateRange =  withState( {
 	afterError: null,
 	beforeError: null,
 	focusedInput: 'startDate',
-} )( ( { after, afterText, before, beforeText, afterError, beforeError, focusedInput, setState } ) => {
+} )( ( { after, afterText, before, beforeText, afterError, focusedInput, setState } ) => {
 	function onRangeUpdate( update ) {
 		setState( update );
 	}
-	
+
 	function onDatePickerUpdate( { date, text, error } ) {
-		setState( { 
-			after: date, 
+		setState( {
+			after: date,
 			afterText: text,
 			afterError: error,
 		} );
 	}
-	
+
 	return (
 		<div>
 			<H>Date Range Picker</H>
@@ -40,19 +53,17 @@ const MyDateRange =  withState( {
 					isInvalidDate={ date => moment().isBefore( moment( date ), 'date' ) }
 				/>
 			</Section>
-	
 			<H>Date Picker</H>
 			<Section component={ false }>
 				<DatePicker
 					date={ after }
 					text={ afterText }
-					error={ afterError } 
+					error={ afterError }
 					onUpdate={ onDatePickerUpdate }
 					dateFormat={ dateFormat }
 					isInvalidDate={ date => moment( date ).day() === 1 }
 				/>
 			</Section>
 		</div>
-	)
+	);
 } );
-```

plugins/woocommerce-admin/packages/components/src/card/docs/example.js

@@ -0,0 +1,16 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { Card } from '@woocommerce/components';
+
+export default () => (
+	<div>
+		<Card title="Store Performance" description="Key performance metrics">
+			<p>Your stuff in a Card.</p>
+		</Card>
+		<Card title="Inactive Card" isInactive>
+			<p>This Card is grayed out and has no box-shadow.</p>
+		</Card>
+	</div>
+);

plugins/woocommerce-admin/packages/components/src/card/example.md

@@ -1,14 +0,0 @@
-```jsx
-import { Card } from '@woocommerce/components';
-
-const MyCard = () => (
-	<div>
-		<Card title={ "Store Performance" } description={ "Key performance metrics" }>
-			<p>Your stuff in a Card.</p>
-		</Card>
-		<Card title={ "Inactive Card" } isInactive={ true }>
-			<p>This Card is grayed out and has no box-shadow.</p>
-		</Card>
-	</div>
-);
-```

plugins/woocommerce-admin/packages/components/src/chart/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Chart } from '@woocommerce/components';
 
-const data =  [
+const data = [
 	{
 		date: '2018-05-30T00:00:00',
 		Hoodie: { value: 21599 },
@@ -28,9 +31,8 @@ const data =  [
 	},
 ];
 
-const MyChart = () => (
+export default () => (
 	<div>
 		<Chart data={ data } title="Example Chart" layout="item-comparison" />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/compare-filter/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { CompareFilter } from '@woocommerce/components';
 
-const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
+const path = ( new URL( document.location ) ).searchParams.get( 'path' ) || '/devdocs';
 const query = {};
 const compareFilter = {
 	type: 'products',
@@ -17,7 +20,6 @@ const compareFilter = {
 	},
 };
 
-const MyCompareFilter = () => (
+export default () => (
     <CompareFilter path={ path } query={ query } { ...compareFilter } />
 );
-```

plugins/woocommerce-admin/packages/components/src/count/docs/example.js

@@ -1,7 +1,9 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Count } from '@woocommerce/components';
 
-const MyCount = () => (
+export default () => (
 	<Count count={ 33 } />
 );
-```

plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/docs/example.js

@@ -1,13 +1,15 @@
-```jsx
-import DateRangeFilterPicker from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { DateRangeFilterPicker } from '@woocommerce/components';
 
 const query = {};
 
-const MyDateRangeFilterPicker = () => (
+export default () => (
     <DateRangeFilterPicker
         key="daterange"
         query={ query }
         onRangeSelect={ () => {} }
     />
 );
-```

plugins/woocommerce-admin/packages/components/src/date/docs/example.js

@@ -1,7 +1,9 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Date } from '@woocommerce/components';
 
-const MyDate = () => (
+export default () => (
   <Date date="2019-01-01" />
 );
-```

plugins/woocommerce-admin/packages/components/src/dropdown-button/docs/example.js

@@ -1,8 +1,15 @@
-```jsx
-import { Dropdown } from '@wordpress/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { DropdownButton } from '@woocommerce/components';
 
-const MyDropdownButton = () => (
+/**
+ * External dependencies
+ */
+import { Dropdown } from '@wordpress/components';
+
+export default () => (
 	<Dropdown
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<DropdownButton
@@ -16,4 +23,3 @@ const MyDropdownButton = () => (
 		) }
 	/>
 );
-```

plugins/woocommerce-admin/packages/components/src/ellipsis-menu/docs/example.js

@@ -1,7 +1,21 @@
-```jsx
-import { EllipsisMenu, MenuItem, MenuTitle, Button } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import {
+	Button,
+	EllipsisMenu,
+	MenuItem,
+	MenuTitle,
+	ToggleControl,
+} from '@woocommerce/components';
 
-const MyEllipsisMenu = withState( {
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
 	showCustomers: true,
 	showOrders: true,
 } )( ( { setState, showCustomers, showOrders } ) => (
@@ -10,7 +24,7 @@ const MyEllipsisMenu = withState( {
 			return (
 				<div>
 					<MenuTitle>Display Stats</MenuTitle>
-					<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } )  }>
+					<MenuItem onInvoke={ () => setState( { showCustomers: ! showCustomers } ) }>
 						<ToggleControl
 							label="Show Customers"
 							checked={ showCustomers }
@@ -37,4 +51,3 @@ const MyEllipsisMenu = withState( {
 		} }
 	/>
 ) );
-```

plugins/woocommerce-admin/packages/components/src/empty-content/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { EmptyContent } from '@woocommerce/components';
 
-const MyEmptyContent = () => (
+export default () => (
 	<EmptyContent
 		title="Nothing here"
 		message="Some descriptive text"
@@ -9,4 +12,3 @@ const MyEmptyContent = () => (
 		actionURL="#"
 	/>
 );
-```

plugins/woocommerce-admin/packages/components/src/filter-picker/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { FilterPicker } from '@woocommerce/components';
 
-const path = (new URL(document.location)).searchParams.get('path') || '/devdocs';
+const path = ( new URL( document.location ) ).searchParams.get( 'path' ) || '/devdocs';
 const query = {
     meal: 'breakfast',
 };
@@ -40,7 +43,6 @@ const config = {
     ],
 };
 
-const MyFilterPicker = () => (
+export default () => (
     <FilterPicker config={ config } path={ path } query={ query } />
 );
-```

plugins/woocommerce-admin/packages/components/src/filters/docs/example.js

@@ -1,5 +1,14 @@
-```jsx
-import { ReportFilters } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import {
+	AdvancedFilters,
+	CompareFilter,
+	H,
+	ReportFilters,
+	Section,
+} from '@woocommerce/components';
 const { orderStatuses } = wcSettings;
 
 const path = '';
@@ -53,7 +62,7 @@ const advancedFilters = {
 				remove: 'Remove products filter',
 				rule: 'Select a product filter match',
 				title: 'Product {{rule /}} {{filter /}}',
-				filter:'Select products',
+				filter: 'Select products',
 			},
 			rules: [
 				{
@@ -82,8 +91,8 @@ const advancedFilters = {
 			input: {
 				component: 'SelectControl',
 				options: [
-					{ value: 'new', label: 'New', },
-					{ value: 'returning', label: 'Returning', },
+					{ value: 'new', label: 'New' },
+					{ value: 'returning', label: 'Returning' },
 				],
 				defaultOption: 'new',
 			},
@@ -156,7 +165,7 @@ const compareFilter = {
 	},
 };
 
-const MyReportFilters = () => (
+export default () => (
 	<div>
 		<H>Date picker only</H>
 		<Section component={ false }>
@@ -188,4 +197,3 @@ const MyReportFilters = () => (
 		</Section>
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/flag/docs/example.js

@@ -1,22 +1,22 @@
-```jsx
-import { Flag } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { Flag, H, Section } from '@woocommerce/components';
 
-const MyFlag = () => (
+export default () => (
 	<div>
 		<H>Default (inherits parent font size)</H>
 		<Section component={ false }>
-			<Flag code="VU"  />
+			<Flag code="VU" />
 		</Section>
-		
 		<H>Large</H>
 		<Section component={ false }>
 			<Flag code="VU" size={ 48 } />
 		</Section>
-		
 		<H>Invalid Country Code</H>
 		<Section component={ false }>
 			<Flag code="invalid country code" />
 		</Section>
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/form/docs/example.js

@@ -1,7 +1,20 @@
-```jsx
-import { Button, CheckboxControl, RadioControl, SelectControl, TextControl } from '@wordpress/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Form } from '@woocommerce/components';
 
+/**
+ * External dependencies
+ */
+import {
+	Button,
+	CheckboxControl,
+	RadioControl,
+	SelectControl,
+	TextControl,
+} from '@wordpress/components';
+
 const validate = ( values ) => {
 	const errors = {};
 	if ( ! values.firstName ) {
@@ -16,13 +29,12 @@ const validate = ( values ) => {
 const onSubmitCallback = ( values ) => console.log( values );
 const initialValues = { firstName: '', lastName: '', select: '3', checkbox: true, radio: '2' };
 
-const MyForm = () => (
+export default () => (
 	<Form validate={ validate } onSubmitCallback={ onSubmitCallback } initialValues={ initialValues }>
 		{ ( {
 			getInputProps,
 			values,
 			errors,
-			setValue,
 			handleSubmit,
 		} ) => (
 			<div>
@@ -35,7 +47,7 @@ const MyForm = () => (
 					{ ...getInputProps( 'lastName' ) }
 				/>
 				<SelectControl
-					label='Select'
+					label="Select"
 					options={ [
 						{ label: 'Option 1', value: '1' },
 						{ label: 'Option 2', value: '2' },
@@ -44,11 +56,11 @@ const MyForm = () => (
 					{ ...getInputProps( 'select' ) }
 				/>
 				<CheckboxControl
-					label='Checkbox'
+					label="Checkbox"
 					{ ...getInputProps( 'checkbox' ) }
 				/>
 				<RadioControl
-					label='Radio'
+					label="Radio"
 					options={ [
 						{ label: 'Option 1', value: '1' },
 						{ label: 'Option 2', value: '2' },
@@ -71,5 +83,3 @@ const MyForm = () => (
 		) }
 	</Form>
 );
-```
-		

plugins/woocommerce-admin/packages/components/src/gravatar/docs/example.js

@@ -1,10 +1,12 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Gravatar } from '@woocommerce/components';
 
-const MyGravatar = () => (
+export default () => (
 	<Gravatar
 		user="email@example.org"
 		size={ 48 }
 	/>
 );
-```

plugins/woocommerce-admin/packages/components/src/image-asset/docs/example.js

@@ -1,10 +1,12 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { ImageAsset } from '@woocommerce/components';
 
-const MyImageAsset = () => (
+export default () => (
 	<ImageAsset
 		src="https://cldup.com/6L9h56D9Bw.jpg"
 		alt="An illustration of sunglasses"
 	/>
 );
-```

plugins/woocommerce-admin/packages/components/src/link/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Link } from '@woocommerce/components';
 
-const MyLink = () => (
+export default () => (
 	<Link
 		href="edit.php?post_type=shop_coupon"
 		type="wp-admin"
@@ -9,4 +12,3 @@ const MyLink = () => (
 		Coupons
 	</Link>
 );
-```

plugins/woocommerce-admin/packages/components/src/list/docs/example.js

@@ -1,5 +1,12 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { List } from '@woocommerce/components';
+
+/**
+ * External dependencies
+ */
 import Gridicon from 'gridicons';
 
 const listItems = [
@@ -25,9 +32,8 @@ const listItems = [
     },
 ];
 
-const MyList = () => (
+export default () => (
 	<div>
 		<List items={ listItems } />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/order-status/docs/example.js

@@ -1,11 +1,13 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { OrderStatus } from '@woocommerce/components';
 
-const MyOrderStatus = () => (
+export default () => (
 	<div>
 		<OrderStatus order={ { status: 'processing' } } />
 		<OrderStatus order={ { status: 'pending' } } />
 		<OrderStatus order={ { status: 'completed' } } />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/pagination/docs/example.js

@@ -0,0 +1,23 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { Pagination } from '@woocommerce/components';
+
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
+	page: 2,
+	perPage: 50,
+} )( ( { page, perPage, setState } ) => (
+	<Pagination
+		page={ page }
+		perPage={ perPage }
+		total={ 500 }
+		onPageChange={ ( newPage ) => setState( { page: newPage } ) }
+		onPerPageChange={ ( newPerPage ) => setState( { perPage: newPerPage } ) }
+	/>
+) );

plugins/woocommerce-admin/packages/components/src/pagination/example.md

@@ -1,16 +0,0 @@
-```jsx
-import { Pagination } from '@woocommerce/components';
-
-const MyPagination = withState( {
-	page: 2,
-	perPage: 50,
-} )( ( { page, perPage, setState } ) => (
-	<Pagination
-		page={ page }
-		perPage={ perPage }
-		total={ 500 }
-		onPageChange={ ( page ) => setState( { page } ) }
-		onPerPageChange={ ( perPage ) => setState( { perPage } ) }
-	/>
-) );
-```

plugins/woocommerce-admin/packages/components/src/product-image/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { ProductImage } from '@woocommerce/components';
 
-const MyProductImage = () => (
+export default () => (
 	<div>
 		<ProductImage product={ null } />
 		<ProductImage product={ { images: [] } } />
@@ -12,4 +15,3 @@ const MyProductImage = () => (
 		] } } />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/rating/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { ReviewRating, ProductRating, Rating } from '@woocommerce/components';
 
-const MyRating = () => {
+export default () => {
 	const product = { average_rating: 3.5 };
 	const review = { rating: 5 };
 
@@ -22,4 +25,3 @@ const MyRating = () => {
 		</div>
 	);
 };
-```

plugins/woocommerce-admin/packages/components/src/search-list-control/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { SearchListControl } from '@woocommerce/components';
 
-const MySearchListControl = withState( {
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
 	selected: [],
 	loading: true,
 } )( ( { selected, loading, setState } ) => {
@@ -26,4 +34,3 @@ const MySearchListControl = withState( {
 		</div>
 	);
 } );
-```

plugins/woocommerce-admin/packages/components/src/search/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
-import { Search } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { H, Search, Section } from '@woocommerce/components';
 
-const MySearch = withState( {
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
 	selected: [],
 	inlineSelected: [],
 } )( ( { selected, inlineSelected, setState } ) => (
@@ -27,4 +35,3 @@ const MySearch = withState( {
 		</Section>
 	</div>
 ) );
-```

plugins/woocommerce-admin/packages/components/src/section-header/docs/example.js

@@ -0,0 +1,7 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import { SectionHeader } from '@woocommerce/components';
+
+export default () => <SectionHeader title={ 'Store Performance' } />;

plugins/woocommerce-admin/packages/components/src/section-header/example.md

@@ -1,5 +0,0 @@
-```jsx
-import { SectionHeader } from '@woocommerce/components';
-
-const MySectionHeader = () => <SectionHeader title={ 'Store Performance' } />;
-```

plugins/woocommerce-admin/packages/components/src/section/docs/example.js

@@ -1,10 +1,13 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { H, Section } from '@woocommerce/components';
 
-const MySection = () => (
+export default () => (
 	<div>
 		<H>Header using a contextual level (h3)</H>
-		<Section component='article'>
+		<Section component="article">
 			<p>This is an article component wrapper.</p>
 			<H>Another header with contextual level (h4)</H>
 			<Section component={ false }>
@@ -14,4 +17,3 @@ const MySection = () => (
 		</Section>
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/segmented-selection/docs/example.js

@@ -1,9 +1,17 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { SegmentedSelection } from '@woocommerce/components';
 
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
 const name = 'number';
 
-const MySegmentedSelection = withState( {
+export default withState( {
 	selected: 'two',
 } )( ( { selected, setState } ) => (
 	<SegmentedSelection
@@ -15,8 +23,7 @@ const MySegmentedSelection = withState( {
 		] }
 		selected={ selected }
 		legend="Select a number"
-		onSelect={ ( data ) => setState( { selected: data[name] } ) }
+		onSelect={ ( data ) => setState( { selected: data[ name ] } ) }
 		name={ name }
 	/>
 ) );
-```

plugins/woocommerce-admin/packages/components/src/simple-select-control/docs/example.js

@@ -1,8 +1,15 @@
-
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { SimpleSelectControl } from '@woocommerce/components';
 
-class MySimpleSelectControl extends Component {
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+
+export default class MySimpleSelectControl extends Component {
 	constructor() {
 		super();
 		this.state = {
@@ -47,4 +54,3 @@ class MySimpleSelectControl extends Component {
 		);
 	}
 }
-```

plugins/woocommerce-admin/packages/components/src/spinner/docs/example.js

@@ -1,9 +1,11 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Spinner } from '@woocommerce/components';
 
-const MySpinner = () => (
+export default () => (
 	<div>
 		<Spinner />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/split-button/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { SplitButton } from '@woocommerce/components';
 
-const MySplitButton = () => (
+/**
+ * External dependencies
+ */
+import Gridicon from 'gridicons';
+
+export default () => (
 	<div>
 		<SplitButton
 			isPrimary
@@ -58,4 +66,3 @@ const MySplitButton = () => (
 		/>
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/stepper/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Stepper } from '@woocommerce/components';
 
-const MyStepper = withState( {
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
 	currentStep: 'first',
 	isComplete: false,
 	isPending: false,
@@ -48,13 +56,13 @@ const MyStepper = withState( {
 		) : (
 			<div>
 				<button
-					onClick={ () => setState( { currentStep: steps[ currentIndex - 1 ]['key'] } ) }
+					onClick={ () => setState( { currentStep: steps[ currentIndex - 1 ].key } ) }
 					disabled={ currentIndex < 1 }
 				>
 					Previous step
 				</button>
 				<button
-					onClick={ () => setState( { currentStep: steps[ currentIndex + 1 ]['key'] } ) }
+					onClick={ () => setState( { currentStep: steps[ currentIndex + 1 ].key } ) }
 					disabled={ currentIndex >= steps.length - 1 }
 				>
 					Next step
@@ -90,4 +98,3 @@ const MyStepper = withState( {
 	</div>
 	);
 } );
-```

plugins/woocommerce-admin/packages/components/src/summary/docs/example.js

@@ -1,7 +1,10 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { SummaryList, SummaryNumber } from '@woocommerce/components';
 
-const MySummaryList = () => (
+export default () => (
 	<SummaryList>
 		{ () => {
 			return [
@@ -25,9 +28,8 @@ const MySummaryList = () => (
 					value={ '$49.90' }
 					label="Coupons"
 					href="/analytics/report"
-				/>
+				/>,
 			];
 		} }
 	</SummaryList>
 );
-```

plugins/woocommerce-admin/packages/components/src/table/docs/example.js

@@ -1,5 +1,16 @@
-```jsx
-import { TableCard } from '@woocommerce/components';
+/** @format */
+/**
+ * Internal dependencies
+ */
+import {
+	EmptyTable,
+	H,
+	Section,
+	Table,
+	TableCard,
+	TablePlaceholder,
+	TableSummary,
+} from '@woocommerce/components';
 
 const noop = () => {};
 const headers = [
@@ -30,7 +41,7 @@ const summary = [
 	{ label: 'Shipping', value: '$50.00' },
 ];
 
-const MyTable = () => (
+export default () => (
 	<div>
 		<H>TableCard</H>
 		<Section component={ false }>
@@ -76,4 +87,3 @@ const MyTable = () => (
 		</Section>
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/tag/docs/example.js

@@ -1,13 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { Tag } from '@woocommerce/components';
 
 const noop = () => {};
 
-const MyTag = () => (
+export default () => (
 	<div>
 		<Tag label="My tag" id={ 1 } />
 		<Tag label="Removable tag" id={ 2 } remove={ noop } />
 		<Tag label="Tag with popover" popoverContents={ ( <p>This is a popover</p> ) } />
 	</div>
 );
-```

plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/docs/example.js

@@ -1,7 +1,15 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { TextControlWithAffixes } from '@woocommerce/components';
 
-const MyTextControlWithAffixes = withState( {
+/**
+ * External dependencies
+ */
+import { withState } from '@wordpress/compose';
+
+export default withState( {
 	first: '',
 	second: '',
 	third: '',
@@ -43,4 +51,3 @@ const MyTextControlWithAffixes = withState( {
 		/>
 	</div>
 ) );
-```

plugins/woocommerce-admin/packages/components/src/view-more-list/docs/example.js

@@ -1,9 +1,11 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { ViewMoreList } from '@woocommerce/components';
 
-const MyViewMoreList = () => (
+export default () => (
 	<ViewMoreList
 		items={ [ <i>Lorem</i>, <i>Ipsum</i>, <i>Dolor</i>, <i>Sit</i> ] }
 	/>
 );
-```

plugins/woocommerce-admin/packages/components/src/web-preview/docs/example.js

@@ -1,9 +1,11 @@
-```jsx
+/** @format */
+/**
+ * Internal dependencies
+ */
 import { WebPreview } from '@woocommerce/components';
 
-const MyWebPreview = () => (
+export default () => (
 	<div>
 		<WebPreview src="https://themes.woocommerce.com/?name=galleria" title="My Web Preview" />
 	</div>
 );
-```