Basic storybook implementation (#1636)

* install & configure storybook (via magic npx script)

* fix indentation in storybook generated files

* eslint ignore generated storybook files (for now at least)

* unhide storybook folder, consistent with Gutenberg project

* demo story for one of our components (with no css/styles)

* hack in scss webpack config & add story for button:
- fixes scss imports breaking storybook build
- note scss / styling doesn't work yet
+ organise our component stories into folder

* git ignore storybook-static build folder

* pin dependencies for storybook

* piggy-back off main webpack config for storybook module.rules (for scss)

* use gutenberg (wp-components) styles in storybook

* use system font for storybook, consistent with wp-admin/gberg and reasonable default for components in front end

* add --ci flag to prevent storybook opening new browser tab…
- see also storybookjs/storybook#6201

* rename default stories to Default (following Gutenberg pattern)

* add story for ErrorPlaceholder

* failing ProductPreview story (committing to PR as an example for discussion)

* storybook for components/icons

* fix aliased dependencies in components for storybook:
append our webpack aliases to storybook webpack config

* basic story for PriceSlider (looks right but interaction broken)

* fix PriceSlider user interaction:
- PriceSlider expects client to handle onChange and pass in new min/max

* add comment about priceslider max/min (todoish)

* remove default stories from storybook scaffolding

* organise stories by module (aka folder in codebase)

* package-lock update after rebase

* remove unnecessary ignores (default stories are gone)

* delete experimental/risky/broken stories:
- icons components are changing in #1644
- we need to refactor/do more work to get ProductPreview working (settings globals)

* remove unnecessary import

* clarify PriceSlider component intended usage comment in story

* remove redundant wrapper divs from stories

* add common storybook addons (used by Gutenberg storybook)

* rebuild package.lock after rebase

* remove unnecessary wrapper div

* package fixes after rebase

* add configuration for storybook source loader

* add decorators for a11y and knobs plugins

* remove unnecessary react import & import useState from WP

Co-authored-by: Darren Ethier <[email protected]>

.gitignore

@@ -49,3 +49,4 @@ tests/cli/vendor
 /build/
 bin/languages
 woocommerce-gutenberg-products-block.zip
+storybook-static/

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

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import Button from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/Button',
+	component: Button,
+};
+
+export const Default = () => <Button>Buy now</Button>;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PriceSlider from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/PriceSlider',
+	component: PriceSlider,
+};
+
+export const Default = () => {
+	// 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 (
+		<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/base/components/read-more/stories/index.js

@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import ReadMore from '../';
+
+export default {
+	title: 'WooCommerce Blocks/@base-components/ReadMore',
+	component: ReadMore,
+};
+
+export const Default = () => (
+	<ReadMore maxLines={ 2 }>
+		<h1>
+			No! Alderaan is peaceful. We have no weapons. You can&apos;t
+			possibly…
+		</h1>
+		<p>
+			As you wish. But with the blast shield down, I can&apos;t even see!
+			How am I supposed to fight? Look, I ain&apos;t in this for your
+			revolution, and I&apos;m not in it for you, Princess. I expect to be
+			well paid. I&apos;m in it for the money.
+		</p>
+		<p>
+			You mean it controls your actions?
+			<strong>
+				{ ' ' }
+				She must have hidden the plans in the escape pod.
+			</strong>{ ' ' }
+			<em>
+				Send a detachment down to retrieve them, and see to it
+				personally, Commander.
+			</em>
+			There&apos;ll be no one to stop us this time!
+		</p>
+		<h2>Escape is not his plan. I must face him, alone.</h2>
+		<ol>
+			<li>Partially, but it also obeys your commands.</li>
+			<li>
+				Leave that to me. Send a distress signal, and inform the Senate
+				that all on board were killed.
+			</li>
+			<li>
+				A tremor in the Force. The last time I felt it was in the
+				presence of my old master.
+			</li>
+		</ol>
+		<aside>
+			<a href="http://fillerama.io">
+				Content from http://fillerama.io &quot;Star Wars&quot;
+			</a>
+		</aside>
+	</ReadMore>
+);

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

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import ErrorPlaceholder from '../';
+
+export default {
+	title: 'WooCommerce Blocks/components/ErrorPlaceholder',
+	component: ErrorPlaceholder,
+};
+
+export const Default = () => (
+	<ErrorPlaceholder
+		error={ {
+			message:
+				'Unfortunately, we seem to have encountered a slight problem',
+			type: 'general',
+		} }
+	/>
+);