add storybook

.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react';
+
+import EmbarkJS from '../embarkArtifacts/embarkjs';
+export default EmbarkJS;
+// 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);

stories/EthAddress.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { actions, action, decorate } from '@storybook/addon-actions';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react'
+
+import EthAddress from '../app/components/EthAddress';
+
+const getProps = () => {
+    return {
+        onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+        onChange    : action('onChange'),
+        onLoad      : action('onLoad'),
+        disabled    : boolean('disabled', false),
+        control     : boolean('control', true),
+        value       : text('value', 'ethereum.eth'),
+        allowZero   : boolean('allowZero', false),
+        colors      : boolean('colors', true),
+        blocky      : boolean('blocky', true),
+        blockyScale : number("blockyScale", 4),
+        blockySize  : number("blockySize", 8),
+    }
+};
+storiesOf('EthAddress', module)
+  .addDecorator(withKnobs)
+  .add('static', () => <EthAddress {...getProps()}  />)
+  .add('active', () => {
+    class EthAddressStory extends React.Component {
+      constructor(props){
+        super(props);
+        this.state = {
+          value : this.props.value || ""
+        }
+      }
+      onChange = ( event )=> {
+        this.setState({ value: event.target.value })
+        this.props.onChange(event);
+      }
+      render() {
+        const props = {
+          ...this.props, 
+          onChange:this.onChange,
+          value:this.state.value   
+        }
+        return (<EthAddress {...props} />);
+      }
+    };
+
+    return <EthAddressStory {...getProps()} />
+
+  });

stories/EthAddressList.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action, actions, decorate } from '@storybook/addon-actions';
+import { withKnobs, boolean, number, array } from '@storybook/addon-knobs/react'
+
+import EthAddressList from '../app/components/EthAddressList';
+const getProps = () => {
+    return {
+        onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+        onChange    : action('onChange'),
+        onLoad    : action('onLoad'),
+        disabled    : boolean('disabled', false),
+        control     : boolean('control', true),
+        values      : array("values", ["unicorn.stateofus.eth", "ethereum.eth", "0x744d70FDBE2Ba4CF95131626614a1763DF805B9E"]),
+        allowAdd    : boolean('allowAdd', true),
+        allowRemove : boolean('allowRemove', true),
+        allowZero   : boolean('allowZero', false),
+        colors      : boolean('colors', true),
+        blocky      : boolean('blocky', true),
+        blockyScale : number("blockyScale", 4),
+        blockySize  : number("blockySize", 8),
+    }
+};
+const commonEvents = {...actions({ onChange: 'onChange'}), onError: decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError')};
+  storiesOf('EthAddressList', module)
+  .addDecorator(withKnobs)
+  .add('static', () => <EthAddressList {...getProps()}  />)
+  .add('active', () => {
+    class EthAddressListStory extends React.Component {
+      constructor(props){
+        super(props);
+        this.state = {
+          values : this.props.values || []
+        }
+      }
+      onChange = (values) => {
+        this.setState({ values })
+        this.props.onChange(values);
+      }
+      render() {
+        const props = {
+          ...this.props, 
+          onChange:this.onChange,
+          values:this.state.values   
+        }
+        return (<EthAddressList {...props} />);
+      }
+
+    };
+
+    return <EthAddressListStory {...getProps()} />
+
+  });

stories/EthTxSubmit.stories.js

@@ -0,0 +1,30 @@
+import MultiSigWallet from '../embarkArtifacts/contracts/MultiSigWallet';
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action, actions, decorate } from '@storybook/addon-actions';
+import { withKnobs, boolean, object } from '@storybook/addon-knobs/react'
+
+import EthTxSubmit from '../app/components/EthTxSubmit';
+
+const txObj = {
+ to: "0x3D597789ea16054a084ac84ce87F50df9198F415",
+ value: "100000000000000000",
+ data: "0x",
+ nonce: null
+};
+
+const getProps = (value = object("value", txObj)) => {
+  return {
+      onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+      ...actions({ onSubmission: 'onSubmission', onResult: 'onResult' , onReceipt: 'onReceipt' }),
+      disabled    : boolean('disabled', false),
+      control     : boolean('control', true),
+      value       : value
+  }
+};
+
+storiesOf('EthTxSubmit', module)
+  .addDecorator(withKnobs)
+  .add('web3.eth.sendTransaction', () => <EthTxSubmit {...getProps() }/>)
+  .add('web3.eth.Contract', () => <EthTxSubmit {...getProps(new EmbarkJS.Blockchain.Contract({ abi: MultiSigWallet._jsonInterface, address: "0xB913626032140A86c77D1fdde4f611A00D589C55" }).methods.changeRequirement(1)) }/>)

stories/EthValue.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action, decorate } from '@storybook/addon-actions';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs/react'
+import EthValue from '../app/components/EthValue';
+
+const getProps = () => {
+    return {
+        onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+        onChange    : action('onChange'),
+        disabled    : boolean('disabled', false),
+        control     : boolean('control', true),
+        value       : text('value', '100000000000000000')
+    }
+};
+
+storiesOf('EthValue', module)
+  .addDecorator(withKnobs)
+  .add('static', () => <EthValue {...getProps()}  />)
+  .add('active', () => {
+    class EthValueStory extends React.Component {
+      constructor(props){
+        super(props);
+        this.state = {
+          value : this.props.value || ""
+        }
+      }
+      onChange = value => {
+        this.setState({ value })
+        this.props.onChange(value);
+      }
+      render() {
+        const props = {
+          ...this.props, 
+          onChange:this.onChange,
+          value:this.state.value   
+        }
+        return (<EthValue {...props} />);
+      }
+    };
+    
+    return <EthValueStory {...getProps()} />
+  });

stories/HexData.stories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { action, decorate } from '@storybook/addon-actions';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react'
+
+import HexData from '../app/components/HexData';
+
+const getProps = () => {
+    return {
+        onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+        onChange    : action('onChange'),
+        disabled    : boolean('disabled', false),
+        control     : boolean('control', true),
+        buffer       : Buffer.from(text('Data', "00112233445566778899AABBCCDDEEFF"), "hex"),
+        rowLength   : number("Row Length", 32),
+        setLength   : number("Set Length", 4)
+    }
+};
+
+storiesOf('HexData', module)
+  .addDecorator(withKnobs)
+  .add('static', () => <HexData {...getProps()}  />)
+  .add('active', () => {
+    class HexDataStory extends React.Component {
+      constructor(props){
+        super(props);
+        this.state = {
+            buffer : this.props.buffer || Buffer.from("")
+        }
+      }
+      onChange = value => {
+        this.setState({ buffer: value })
+        this.props.onChange(value);
+      }
+      render() {
+        const props = {
+          ...this.props, 
+          onChange:this.onChange,
+          buffer:this.state.buffer   
+        }
+        return (<HexData {...props} />);
+      }
+
+    };
+
+    return <HexDataStory {...getProps()} />
+
+  });

stories/input.stories.js

@@ -0,0 +1,47 @@
+
+import React from 'react';
+
+import { storiesOf, addDecorator } from '@storybook/react';
+import { decorate, action } from '@storybook/addon-actions';
+
+import { withKnobs, text, boolean } from '@storybook/addon-knobs/react'
+
+const getProps = () => {return {
+    onError     : decorate([e => [e[0].name + ' : ' + e[0].message] ]).action('onError'),
+    onChange    : action('onChange'),
+    value       : text('value', ''),
+    type        : text('type', 'text'),
+    disabled    : boolean('disabled', false),
+    placeholder : text('placeholder', '')
+}};
+
+storiesOf('input', module)
+  .addDecorator(withKnobs)
+  .add('static', () => <input {...getProps()} />)
+  .add('active', () => {
+    class InputStory extends React.Component {
+      constructor(props){
+        super(props);
+        this.state = {
+          value : this.props.value || ""
+        }
+      }
+      onChange = event => {
+        this.setState({ value: event.target.value })
+        this.props.onChange(event);
+      }
+      render() {
+        const props = {
+          ...this.props, 
+          onChange:this.onChange,
+          value:this.state.value   
+        }
+        return (<input {...props} />);
+      }
+
+    };
+
+    return <InputStory {...getProps()} />
+
+  });
+