Add storybook

Author: pomber

.storybook/addons.js

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

.storybook/config.js

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

package.json

@@ -23,7 +23,9 @@
     "test-prettier": "prettier --check \"**/*.{js,jsx,md,json,html,css,yml}\" --ignore-path .gitignore",
     "test-cra": "react-scripts test",
     "test": "run-s test-prettier test-cra",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -36,6 +38,12 @@
   ],
   "devDependencies": {
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.16.4"
+    "prettier": "^1.16.4",
+    "@storybook/react": "^4.1.13",
+    "@storybook/addon-actions": "^4.1.13",
+    "@storybook/addon-links": "^4.1.13",
+    "@storybook/addons": "^4.1.13",
+    "@babel/core": "^7.3.4",
+    "babel-loader": "8.0.4"
   }
 }

src/scroller.story.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")}>😀 😎 👍 💯</Button>
+  ));