Add react storybook - Closes #496

.storybook/config.js

@@ -0,0 +1,10 @@
+import { configure } from '@storybook/react';
+import '../src/components/app/app.css';
+
+function loadStories() {
+  require('../src/components/account/stories');
+  require('../src/components/dialog/stories');
+  require('../src/components/formattedNumber/stories');
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,5 @@
+const config = require('../webpack.config.js');
+
+module.exports = config({
+  test: true,
+});

README.md

@@ -98,6 +98,18 @@ Run the protractor tests (replace `~/git/lisk/` with your path to lisk core):
 npm run e2e-test
 ```
 
+## Launch React Storybook
+
+To launch storybook sandbox with components run
+```
+npm run storybook
+```
+and go to
+
+http://localhost:6006/
+
+
+
 ## Authors
 
 - Ricardo Ferro <[email protected]>

package.json

@@ -16,7 +16,9 @@
     "dist:mac": "build --mac",
     "dist:linux": "build --linux --ia32 --x64 --armv7l",
     "copy-files": "mkdir dist && cp -r ./src/index.html ./src/assets ./dist",
-    "clean": "del dist -f"
+    "clean": "del dist -f",
+    "storybook": "start-storybook -p 6006 -s ./src/",
+    "build-storybook": "build-storybook"
   },
   "author": "Lisk Foundation <[email protected]>, lightcurve GmbH <[email protected]>",
   "license": "GPL-3.0",
@@ -99,7 +101,8 @@
     "url-loader": "=0.5.7",
     "webpack": "=2.2.1",
     "webpack-bundle-analyzer": "=2.4.0",
-    "webpack-dev-server": "=2.4.2"
+    "webpack-dev-server": "=2.4.2",
+    "@storybook/react": "=3.1.8"
   },
   "build": {
     "appId": "io.lisk.nano",

src/components/account/stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import Account from './accountComponent';
+import Address from './address';
+
+storiesOf('Account', module)
+  .add('delegate', () => (
+    <Account
+      peers={{
+        status: {
+          online: true,
+        },
+        data: {
+          options: {
+            name: 'testy',
+          },
+          currentPeer: 'testpeer',
+          port: 8000,
+        },
+      }}
+      account={{
+        isDelegate: true,
+        username: 'testy',
+        address: '9396639332432599292L',
+      }}
+      balance="3.1415926535"
+    />
+  ));
+
+storiesOf('Address', module)
+  .add('delegate', () => (
+    <Address
+      isDelegate={true}
+      username="testy"
+      address="9396639332432599292L"
+    />
+  ))
+  .add('non-delegate', () => (
+    <Address
+      isDelegate={false}
+      address="9396639332432599292L"
+    />
+  ));

src/components/dialog/stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Dialog from './dialogElement';
+
+const dialogContent = () => (<div>Hello</div>);
+
+storiesOf('Dialog', module)
+  .add('default', () => (
+    <Dialog
+      dialog={{
+        title: 'Title',
+        childComponent: dialogContent,
+      }}
+      onCancelClick={ action('onCancelClick') }
+    />
+  ));

src/components/formattedNumber/stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import FormattedNumber from './';
+
+storiesOf('FormattedNumber', module)
+  .add('with val', () => (
+    <FormattedNumber val="-3.1415926535" />
+  ));