Adds react story bok

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src/stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,21 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add additional webpack configurations.
+// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+const path = require("path");
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    rules: [{
+        test: /\.scss$/,
+        loaders: ["style-loader", "css-loader", "sass-loader"],
+        include: path.resolve(__dirname, "../")
+      }
+    ],
+  },
+};

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@storybook/addon-notes": "^3.4.7",
     "autoprefixer": "7.1.6",
-    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.2",
@@ -41,9 +41,8 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom"
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -88,6 +87,8 @@
     "extends": "react-app"
   },
   "devDependencies": {
+    "@storybook/react": "git@github.com:storybooks/storybook.git",
+    "babel-core": "^6.26.0",
     "css-loader": "^0.28.7",
     "node-sass": "^4.7.1",
     "sass-loader": "^6.0.6",

src/stories/type.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Type, TextSize, TextBold } from '../design_system/type/Type.js';
+
+
+storiesOf('Type', module)
+  .add('default text', () => (
+    <Type>
+      Lorem ipsum
+    </Type>
+  )).add('bold text', () => (
+    <Type boldness={TextBold.semibold}>
+      Lorem ipsum
+    </Type>
+  )).add('header text', () => (
+    <Type size={TextSize.lg}>
+      Lorem ipsum
+    </Type>
+  ));
+
+