From d8c63f6ed24443d0ef3adfa38db33d58ab536bf8 Mon Sep 17 00:00:00 2001 From: Ricardo Guilherme Schmidt Date: Wed, 21 Aug 2019 10:02:04 -0300 Subject: [PATCH] add storybook --- .storybook/addons.js | 4 +++ .storybook/config.js | 11 ++++++ stories/EthAddress.stories.js | 51 ++++++++++++++++++++++++++++ stories/EthAddressList.stories.js | 54 +++++++++++++++++++++++++++++ stories/EthCall.stories.js | 56 +++++++++++++++++++++++++++++++ stories/EthData.stories.js | 50 +++++++++++++++++++++++++++ stories/EthTxSubmit.stories.js | 30 +++++++++++++++++ stories/EthValue.stories.js | 44 ++++++++++++++++++++++++ stories/HexData.stories.js | 49 +++++++++++++++++++++++++++ stories/input.stories.js | 47 ++++++++++++++++++++++++++ 10 files changed, 396 insertions(+) create mode 100644 .storybook/addons.js create mode 100644 .storybook/config.js create mode 100644 stories/EthAddress.stories.js create mode 100644 stories/EthAddressList.stories.js create mode 100644 stories/EthCall.stories.js create mode 100644 stories/EthData.stories.js create mode 100644 stories/EthTxSubmit.stories.js create mode 100644 stories/EthValue.stories.js create mode 100644 stories/HexData.stories.js create mode 100644 stories/input.stories.js diff --git a/.storybook/addons.js b/.storybook/addons.js new file mode 100644 index 0000000..9991d84 --- /dev/null +++ b/.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'; diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 0000000..f2232f3 --- /dev/null +++ b/.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); diff --git a/stories/EthAddress.stories.js b/stories/EthAddress.stories.js new file mode 100644 index 0000000..118877c --- /dev/null +++ b/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', () => ) + .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 (); + } + }; + + return + + }); \ No newline at end of file diff --git a/stories/EthAddressList.stories.js b/stories/EthAddressList.stories.js new file mode 100644 index 0000000..581a69f --- /dev/null +++ b/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', () => ) + .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 (); + } + + }; + + return + + }); \ No newline at end of file diff --git a/stories/EthCall.stories.js b/stories/EthCall.stories.js new file mode 100644 index 0000000..c8276c6 --- /dev/null +++ b/stories/EthCall.stories.js @@ -0,0 +1,56 @@ +import React from 'react'; + +import { storiesOf, addDecorator } from '@storybook/react'; +import { action, decorate } from '@storybook/addon-actions'; +import { withKnobs, boolean, object, text} from '@storybook/addon-knobs/react' + +import EthCall from '../app/components/EthCall'; + + +const value = { + to: "ethereum.eth", + value: "0", + data: "0xba51a6df0000000000000000000000000000000000000000000000000000000000000003" +}; + +const abi = [{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"owners","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"}],"name":"removeOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"revokeConfirmation","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"isOwner","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"},{"name":"","type":"address"}],"name":"confirmations","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"pending","type":"bool"},{"name":"executed","type":"bool"}],"name":"getTransactionCount","outputs":[{"name":"count","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"}],"name":"addOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"isConfirmed","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"getConfirmationCount","outputs":[{"name":"count","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"transactions","outputs":[{"name":"destination","type":"address"},{"name":"value","type":"uint256"},{"name":"data","type":"bytes"},{"name":"executed","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"getOwners","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"from","type":"uint256"},{"name":"to","type":"uint256"},{"name":"pending","type":"bool"},{"name":"executed","type":"bool"}],"name":"getTransactionIds","outputs":[{"name":"_transactionIds","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"getConfirmations","outputs":[{"name":"_confirmations","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"transactionCount","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_required","type":"uint256"}],"name":"changeRequirement","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"confirmTransaction","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"destination","type":"address"},{"name":"value","type":"uint256"},{"name":"data","type":"bytes"}],"name":"submitTransaction","outputs":[{"name":"transactionId","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"MAX_OWNER_COUNT","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"required","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"},{"name":"newOwner","type":"address"}],"name":"replaceOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"executeTransaction","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_owners","type":"address[]"},{"name":"_required","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Confirmation","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Revocation","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Submission","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Execution","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"ExecutionFailure","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Deposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerAddition","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerRemoval","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"required","type":"uint256"}],"name":"RequirementChange","type":"event"}]; +; +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), + abi : object('abi', abi), + value : object("value", value) + } +}; +storiesOf('EthCall', module) + .addDecorator(withKnobs) + .add('static', () => ) + .add('active', () => { + class EthCallStory extends React.Component { + constructor(props){ + super(props); + this.state = { + value : this.props.value || { value: 0, data: "0x", to: "0x0000000000000000000000000000000000000000"} + } + } + onChange = value => { + this.setState({ value }) + this.props.onChange(value); + } + render() { + const props = { + ...this.props, + onChange:this.onChange, + value:this.state.value + } + return (); + } + + }; + + return + + }); diff --git a/stories/EthData.stories.js b/stories/EthData.stories.js new file mode 100644 index 0000000..5ecc913 --- /dev/null +++ b/stories/EthData.stories.js @@ -0,0 +1,50 @@ + +import React from 'react'; + +import { storiesOf, addDecorator } from '@storybook/react'; +import { action, decorate } from '@storybook/addon-actions'; +import { withKnobs, text, boolean, object } from '@storybook/addon-knobs/react' + +import EthData from '../app/components/EthData'; + +const abi = [{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"owners","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"}],"name":"removeOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"revokeConfirmation","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"isOwner","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"},{"name":"","type":"address"}],"name":"confirmations","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"pending","type":"bool"},{"name":"executed","type":"bool"}],"name":"getTransactionCount","outputs":[{"name":"count","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"}],"name":"addOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"isConfirmed","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"getConfirmationCount","outputs":[{"name":"count","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"transactions","outputs":[{"name":"destination","type":"address"},{"name":"value","type":"uint256"},{"name":"data","type":"bytes"},{"name":"executed","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"getOwners","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"from","type":"uint256"},{"name":"to","type":"uint256"},{"name":"pending","type":"bool"},{"name":"executed","type":"bool"}],"name":"getTransactionIds","outputs":[{"name":"_transactionIds","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"getConfirmations","outputs":[{"name":"_confirmations","type":"address[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"transactionCount","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_required","type":"uint256"}],"name":"changeRequirement","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"confirmTransaction","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"destination","type":"address"},{"name":"value","type":"uint256"},{"name":"data","type":"bytes"}],"name":"submitTransaction","outputs":[{"name":"transactionId","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"MAX_OWNER_COUNT","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"required","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"owner","type":"address"},{"name":"newOwner","type":"address"}],"name":"replaceOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"transactionId","type":"uint256"}],"name":"executeTransaction","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_owners","type":"address[]"},{"name":"_required","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Confirmation","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Revocation","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Submission","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"Execution","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"transactionId","type":"uint256"}],"name":"ExecutionFailure","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Deposit","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerAddition","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"}],"name":"OwnerRemoval","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"required","type":"uint256"}],"name":"RequirementChange","type":"event"}]; +const data = "0xba51a6df0000000000000000000000000000000000000000000000000000000000000002"; +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', data), + abi : object('ABI', abi) + } +}; +storiesOf('EthData', module) + .addDecorator(withKnobs) + .add('static', () => ) + .add('active', () => { + class EthDataStory 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 (); + } + + }; + + return + + }); diff --git a/stories/EthTxSubmit.stories.js b/stories/EthTxSubmit.stories.js new file mode 100644 index 0000000..d94a732 --- /dev/null +++ b/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', () => ) + .add('web3.eth.Contract', () => ) diff --git a/stories/EthValue.stories.js b/stories/EthValue.stories.js new file mode 100644 index 0000000..3e5cffc --- /dev/null +++ b/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', () => ) + .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 (); + } + }; + + return + }); diff --git a/stories/HexData.stories.js b/stories/HexData.stories.js new file mode 100644 index 0000000..44a4f52 --- /dev/null +++ b/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', () => ) + .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 (); + } + + }; + + return + + }); \ No newline at end of file diff --git a/stories/input.stories.js b/stories/input.stories.js new file mode 100644 index 0000000..b80f403 --- /dev/null +++ b/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', () => ) + .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 (); + } + + }; + + return + + }); + \ No newline at end of file