Basic storybook implementation

.eslintignore

@@ -6,7 +6,3 @@ languages
 node_modules
 vendor
 legacy
-
-# ignore various storybook generated files for now (we may be able to trim this down or take ownership of these files)
-stories/0-Welcome.stories.js
-stories/1-Button.stories.js

assets/js/base/components/button/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { Button as WPButton } from 'wordpress-components';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

assets/js/base/components/button/stories/index.js

@@ -13,8 +13,4 @@ export default {
 	component: Button,
 };
 
-export const Default = () => (
-	<div>
-		<Button>Buy now</Button>
-	</div>
-);
+export const Default = () => <Button>Buy now</Button>;

assets/js/base/components/price-slider/stories/index.js

@@ -14,32 +14,29 @@ export default {
 };
 
 export const Default = () => {
-	// PriceSlider expects client to update min & max price
-	// is this a bug? not fully self-contained
+	// PriceSlider expects client to update min & max price, i.e. is a controlled component
 	const [ min, setMin ] = useState( 1000 );
 	const [ max, setMax ] = useState( 5000 );
 	return (
-		<div>
-			<PriceSlider
-				minPrice={ min }
-				maxPrice={ max }
-				onChange={ ( values ) => {
-					setMin( values[ 0 ] );
-					setMax( values[ 1 ] );
-				} }
-				minConstraint={ 1000 }
-				maxConstraint={ 5000 }
-				step={ 250 }
-				currency={ {
-					code: 'nzd',
-					symbol: '$',
-					thousandSeparator: ' ',
-					decimalSeparator: '.',
-					minorUnit: 2,
-					prefix: '$',
-					suffix: '',
-				} }
-			/>
-		</div>
+		<PriceSlider
+			minPrice={ min }
+			maxPrice={ max }
+			onChange={ ( values ) => {
+				setMin( values[ 0 ] );
+				setMax( values[ 1 ] );
+			} }
+			minConstraint={ 1000 }
+			maxConstraint={ 5000 }
+			step={ 250 }
+			currency={ {
+				code: 'nzd',
+				symbol: '$',
+				thousandSeparator: ' ',
+				decimalSeparator: '.',
+				minorUnit: 2,
+				prefix: '$',
+				suffix: '',
+			} }
+		/>
 	);
 };

assets/js/components/error-placeholder/stories/index.js

@@ -14,13 +14,11 @@ export default {
 };
 
 export const Default = () => (
-	<div>
-		<ErrorPlaceholder
-			error={ {
-				message:
-					'Unfortunately, we seem to have encountered a slight problem',
-				type: 'general',
-			} }
-		/>
-	</div>
+	<ErrorPlaceholder
+		error={ {
+			message:
+				'Unfortunately, we seem to have encountered a slight problem',
+			type: 'general',
+		} }
+	/>
 );