Add storybook

storybookjs/storybook#5183
Explicitly set the version of babel-loader to 8.0.4

.storybook/addons.js

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

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  require('../src/stories');
+}
+
+configure(loadStories, module);

package.json

@@ -5,7 +5,13 @@
   "devDependencies": {
     "cypress": "^3.1.4",
     "eslint-config-prettier": "^3.6.0",
-    "serve": "^10.1.1"
+    "serve": "^10.1.1",
+    "@storybook/react": "^4.1.11",
+    "@storybook/addon-actions": "^4.1.11",
+    "@storybook/addon-links": "^4.1.11",
+    "@storybook/addons": "^4.1.11",
+    "@babel/core": "^7.2.2",
+    "babel-loader": "8.0.4"
   },
   "dependencies": {
     "color": "^2.0.0",
@@ -42,7 +48,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "browserslist": [
     ">0.2%",

src/stories/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));