Documentation: Try using Storybook

.storybook/config.js

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react';
+import * as element from 'element';
+
+function loadStories() {
+	console.log( 'aloooooo' );
+	window.wp = { ...window.wp, element };
+  require( '../components/story' );
+  require( '../components/button/story' );
+}
+
+configure( loadStories, module );

.storybook/webpack.config.js

@@ -0,0 +1,11 @@
+const config = require( '../webpack.config' );
+config.module.rules = [
+	...config.module.rules,
+	{
+		test: /\.md/,
+		use: 'raw-loader',
+	},
+]
+config.externals = [],
+
+module.exports = config;

components/button/README.md

@@ -0,0 +1,25 @@
+Button
+======
+
+This component is used to implement dang sweet buttons.
+
+#### How to use:
+
+```jsx
+import Button from 'components/button';
+
+export default function RockOnButton() {
+	return (
+		<Button isPrimary>
+			You rock!
+		</Button>
+	);
+}
+```
+
+#### Props
+
+The following props are used to control the display of the component. Any additional props will be passed to the rendered `<a />` or `<button />` element. The presence of a `href` prop determines whether an anchor element is rendered instead of a button.
+
+* `isPrimary`: (bool) whether the button is styled as a primary button.
+* `href`: (string) if this property is added, it will use an `a` rather than a `button` element.

components/button/index.js

@@ -4,7 +4,12 @@
 import './style.scss';
 import classnames from 'classnames';
 
-class Button extends wp.element.Component {
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+
+class Button extends Component {
 	constructor( props ) {
 		super( props );
 		this.setRef = this.setRef.bind( this );

components/button/story/index.js

@@ -0,0 +1,16 @@
+/**
+ * External components
+ */
+import ReactMarkdown from 'react-markdown';
+import { storiesOf } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../';
+import readme from '../README.md';
+
+storiesOf( 'Components', module ).add( 'Button', () => <div>
+	<Button>Test</Button>
+	<ReactMarkdown source={ readme } />
+</div> );

components/story/index.js

@@ -0,0 +1,12 @@
+/**
+ * External components
+ */
+import ReactMarkdown from 'react-markdown';
+import { storiesOf } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import readme from '../README.md';
+
+storiesOf( 'Components', module ).add( 'Welcome', () => <ReactMarkdown source={ readme } /> );

package.json

@@ -34,6 +34,7 @@
     "uuid": "^3.0.1"
   },
   "devDependencies": {
+    "@storybook/react": "^3.0.0",
     "autoprefixer": "^6.7.7",
     "babel-core": "^6.24.0",
     "babel-eslint": "^7.2.0",
@@ -64,6 +65,7 @@
     "pegjs-loader": "^0.5.1",
     "postcss-loader": "^1.3.3",
     "raw-loader": "^0.5.1",
+    "react-markdown": "^2.5.0",
     "react-test-renderer": "^15.5.4",
     "sass-loader": "^6.0.3",
     "sinon": "^2.1.0",
@@ -82,6 +84,8 @@
     "dev": "cross-env BABEL_ENV=default webpack --watch",
     "test": "npm run lint && npm run test-unit",
     "ci": "concurrently \"npm run build\" \"npm test\"",
-    "package-plugin": "./bin/build-plugin-zip.sh"
+    "package-plugin": "./bin/build-plugin-zip.sh",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }