Storybook (#122)

* adding storybook

* update webpack config

* Update package.json

* udpating build script

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 coverage
 /dist/*
+.DS_Store

.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';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+        include: path.resolve(__dirname, '../'),
+      },
+    ],
+  },
+}

package.json

@@ -4,11 +4,13 @@
   "description": "building an embeddable js widget with react",
   "main": "index.js",
   "scripts": {
-    "build": "NODE_ENV=production webpack-cli --mode production",
+    "build": "NODE_ENV=production webpack-cli --mode production && npm run build-storybook",
     "start": "webpack-dev-server",
     "test": "jest",
     "test-update-snapshots": "jest --updateSnapshot",
     "deploy": "npm run build && gh-pages -d dist",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -c .storybook -o dist/storybook",
     "lint": "./node_modules/.bin/eslint ."
   },
   "babel": {
@@ -73,6 +75,10 @@
     "@babel/plugin-proposal-throw-expressions": "7.2.0",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
     "@babel/plugin-syntax-import-meta": "7.2.0",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-links": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "@storybook/react": "^5.1.9",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.2",
     "babel-jest": "24.8.0",

stories/index.stories.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Widget from '../src/components/widget'
+
+storiesOf(`Widget`)
+  .add(`default`, () => <Widget />)