Merge pull request #6 from cwlsn/5-storybook

Setup latest Storybook alpha for babel7 and webpack4 support

.browserlistrc

@@ -0,0 +1,8 @@
+{
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ]
+}

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../src/components', true, /[^/]+\/stories.js$/);
+
+function loadStories() {
+	req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

README.md

@@ -4,7 +4,7 @@
 
 > Rinse, React, repeat. A boilerplate to build a React component library.
 
-###### To learn how this project was made from scratch, [read the blog post](url)!
+#### To learn how this project was made from scratch, [read the blog post](url)!
 
 ## Get Started
 
@@ -16,3 +16,18 @@ $ cd cool-name
 $ rm -rf .git
 $ git init
 ```
+
+## Development and Storybook
+
+You can easily develop and interact with your components by using Storybook. To run the local server, simply run:
+
+```bash
+$ npm i
+$ npm run storybook
+```
+
+Navigate to [http://localhost:9001](http://localhost:9001) to view your stories. They should automatically update as you develop.
+
+Storybook will pick up any story from the `stories.js` file in a component folder. 
+
+Rinse is currently using the latest technology available, so you may need to update your Node versions to latest to accomodate Babel 7 and Webpack 4.

babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: ['@babel/preset-env', '@babel/preset-react'],
+};