chores: match component to storybook

app/js/wizards/Sell/0_Asset/components/FiatSelectorForm.test.jsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-
-import FiatSelectorForm from "../../3_Currency/components/FiatSelectorForm";
-
-describe('FiatSelectorForm', () => {
-  it('should render correctly', () => {
-    const component = shallow(<FiatSelectorForm value={""} 
-                                                currencies={[]}
-                                                changeFiat={() => undefined}/>);
-  
-    expect(component).toMatchSnapshot();
-  });
-});

app/js/wizards/Sell/0_Asset/components/__snapshots__/FiatSelectorForm.test.jsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FiatSelectorForm should render correctly 1`] = `
-<Fragment>
-  <h2 />
-  <FormGroup
-    tag="div"
-  >
-    <TypeaheadContainer(WrappedTypeahead)
-      a11yNumResults={[Function]}
-      a11yNumSelected={[Function]}
-      align="justify"
-      allowNew={false}
-      autoFocus={false}
-      bodyContainer={false}
-      caseSensitive={false}
-      className="my-3"
-      clearButton={false}
-      defaultInputValue=""
-      defaultOpen={false}
-      defaultSelected={Array []}
-      disabled={false}
-      dropup={false}
-      emptyLabel=""
-      filterBy={Array []}
-      flip={false}
-      highlightOnlyResult={false}
-      ignoreDiacritics={true}
-      inputProps={Object {}}
-      isInvalid={false}
-      isLoading={false}
-      isValid={false}
-      labelKey="label"
-      maxResults={100}
-      minLength={0}
-      multiple={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onInputChange={[Function]}
-      onKeyDown={[Function]}
-      onPaginate={[Function]}
-      options={Array []}
-      paginate={true}
-      paginationText="Display additional results..."
-      placeholder=""
-      selectHintOnEnter={false}
-      submitFormOnEnter={true}
-    />
-    <p
-      className="text-muted"
-    />
-  </FormGroup>
-</Fragment>
-`;

stories/assets.stories.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import SellerAssets from '../app/js/components/Seller/SellerAssets';
-import {action} from "@storybook/addon-actions";
-
-storiesOf('Assets', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <SellerAssets selectedAsset={null} assets={['ETH', 'SNT']} selectAsset={action("select-asset")}/>
-    ))
-  )
-  .add(
-    "Selected",
-    withInfo({inline: true})(() => (
-      <SellerAssets selectedAsset={1} assets={['ETH', 'SNT']} selectAsset={action("select-asset")}/>
-    ))
-  );

stories/components/editContact.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {action} from "@storybook/addon-actions";
+
+import EditContact from '../../app/js/components/EditContact';
+
+storiesOf('Components/EditContact', module)
+  .add(
+    "Normal",
+    withInfo({inline: true})(() => (
+      <EditContact username=""
+                   statusContactCode=""
+                   isStatus={true}
+                   changeUsername={action('change-username')}
+                   changeContactCode={action('change-contactCode')}/>
+    ))
+  )
+  .add(
+    "Values",
+    withInfo({inline: true})(() => (
+      <EditContact username="User Names"
+                   isStatus={true}
+                   statusContactCode="123456789"
+                   changeUsername={action('change-nickname')}
+                   changeContactCode={action('change-contactCode')}/>
+    ))
+  );

stories/components/errorInformation.stories.jsx

@@ -5,9 +5,9 @@ import {withInfo} from "@storybook/addon-info";
 import {withKnobs} from '@storybook/addon-knobs';
 import {action} from '@storybook/addon-actions';
 
-import ErrorInformation from '../app/js/components/ui/ErrorInformation';
+import ErrorInformation from '../../app/js/components/ErrorInformation';
 
-storiesOf('ErrorInformation', module)
+storiesOf('Components/ErrorInformation', module)
   .addDecorator(withKnobs)
   .add(
     "provider",

stories/components/loading.stories.jsx

@@ -3,9 +3,9 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
 
-import Loading from '../app/js/components/ui/Loading';
+import Loading from '../../app/js/components/Loading';
 
-storiesOf('Loading', module)
+storiesOf('Components/Loading', module)
   .add(
     "Mining",
     withInfo({inline: true})(() => (

stories/components/map.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from "@storybook/addon-info";
 
-import Map, { Map as MapWrapped } from '../app/js/components/Buyer/Map';
+import Map, { Map as MapWrapped } from '../../app/js/components/Map';
 
 const info = {inline: true, propTables: [MapWrapped]};
 
@@ -12,19 +12,19 @@ const defaultCoords = {
   longitude: -73.617959
 };
 
-storiesOf('Map', module)
+storiesOf('Components/Map', module)
   .add(
-    "Display Map with Coords",
+    "With Coords",
     withInfo(info)(() => (
       <Map coords={defaultCoords}/>
     ))
   ).add(
-    "Display Map when access denied",
+    "When access denied",
     withInfo(info)(() => (
       <Map error={"denied access"}/>
     ))
   ).add(
-    "Display Map with errors",
+    "With errors",
     withInfo(info)(() => (
       <Map error={"Something Bad Happened"}/>
     ))

stories/components/reputation.stories.jsx

@@ -3,11 +3,11 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
 
-import Reputation from '../app/js/components/Reputation';
+import Reputation from '../../app/js/components/Reputation';
 
-storiesOf('Reputation', module)
+storiesOf('Components/Reputation', module)
   .add(
-    "Normal",
+    "Default",
     withInfo({inline: true})(() => (
       <Reputation reputation={{upCount: 1, downCount: 2}} />
     ))

stories/components/userInformation.stories.jsx

@@ -4,18 +4,25 @@ import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
-import Address from '../app/js/components/Address';
+import UserInformation from '../../app/js/components/UserInformation';
+import Address from '../../app/js/components/UserInformation/Address';
 
-storiesOf('Address', module)
-  .addDecorator(withKnobs)
+storiesOf('Components/UserInformation', module)
+.addDecorator(withKnobs)
   .add(
-    "Normal",
+    "Default",
+    withInfo({inline: true})(() => (
+      <UserInformation address={"0x123123123"} username={"Eric"} reputation={{upCount: 432, downCount: 54}}/>
+    ))
+  )
+  .add(
+    "Address",
     withInfo({inline: true})(() => (
       <Address address={text('Address', "0x1122334455667788990011223344556677889900")} compact={boolean('Compact', false)} />
     ))
   )
   .add(
-    "Compact",
+    "Address Compact",
     withInfo({inline: true})(() => (
       <Address address={text('Address', "0x1122334455667788990011223344556677889900")} compact={boolean('Compact', true)} />
     ))

stories/contactInfos.stories.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import ContactForm from '../app/js/components/ContactForm';
-import {action} from "@storybook/addon-actions";
-
-storiesOf('Seller contact infos', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <ContactForm nickname="" contactCode="" isStatus={true} changeNickname={action('change-nickname')} changeContactCode={action('change-contactCode')}/>
-    ))
-  )
-  .add(
-    "Values",
-    withInfo({inline: true})(() => (
-      <ContactForm nickname="Nick Names" isStatus={true} contactCode="123456789" changeNickname={action('change-nickname')} changeContactCode={action('change-contactCode')}/>
-    ))
-  );

stories/licenseBuy.stories.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import {action} from "@storybook/addon-actions";
-
-import LicenseBuy from '../app/js/components/License/LicenseBuy';
-
-storiesOf('LicenseBuy', module)
-  .addDecorator(withKnobs)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <LicenseBuy disabled={boolean('disabled', false)} onClick={action('buy-license')}/>
-    ))
-  );

stories/linceseInfo.stories.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-import { withKnobs, string } from '@storybook/addon-knobs';
-
-import LicenseInfo from '../app/js/components/License/LicenseInfo';
-
-storiesOf('LicenseInfo', module)
-  .addDecorator(withKnobs)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <LicenseInfo price={string('Price', '10')}/>
-    ))
-  );

stories/marginRate.stories.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import MarginSelectorForm from '../app/js/components/Seller/MarginSelectorForm';
-import {action} from "@storybook/addon-actions";
-
-storiesOf('Margin selector', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <MarginSelectorForm margin={{rate: null, isAbove: true}} fiat={{id: 'USD', label: 'United States Dollar - USD'}} onMarginChange={action('margin-change')}/>
-    ))
-  )
-  .add(
-    "Selected rate",
-    withInfo({inline: true})(() => (
-      <MarginSelectorForm margin={{rate: 12, isAbove: false}} fiat={{id: 'USD', label: 'United States Dollar - USD'}} onMarginChange={action('margin-change')}/>
-    ))
-  );

stories/offers.stories.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import Offers from '../app/js/components/Profile/Offers';
-
-storiesOf('Offers', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <Offers location="London" offers={
-        [
-          {
-            asset: '0x0',
-            currency: 'EUR',
-            paymentMethodsForHuman: ['Bank Transfer'],
-            rate: '1% Above Bitfinex'
-          }
-        ]
-      } />
-    ))
-  )
-  .add(
-    "Empty",
-    withInfo({inline: true})(() => (
-      <Offers offers={[]} />
-    ))
-  );

stories/pages/editMyContact.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {withKnobs, boolean} from '@storybook/addon-knobs';
+import {action} from "@storybook/addon-actions";
+
+import UpdateButton from '../../app/js/pages/EditMyContact/components/UpdateButton';
+
+storiesOf('Pages/EditMyContact', module)
+  .addDecorator(withKnobs)
+  .add(
+    "Update Button",
+    withInfo({inline: true})(() => (
+      <UpdateButton disabled={boolean('disabled', false)} onClick={action('update-my-contact')}/>
+    ))
+  );

stories/pages/license.stories.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {withKnobs, boolean, text} from '@storybook/addon-knobs';
+import {action} from "@storybook/addon-actions";
+
+import BuyButton from '../../app/js/pages/License/components/BuyButton';
+import Info from '../../app/js/pages/License/components/Info';
+import Balance from '../../app/js/pages/License/components/Balance';
+
+storiesOf('Pages/License', module)
+  .addDecorator(withKnobs)
+  .add(
+    "Buy Button",
+    withInfo({inline: true})(() => (
+      <BuyButton disabled={boolean('disabled', false)} onClick={action('buy-license')}/>
+    ))
+  )
+  .add(
+    "Info",
+    withInfo({inline: true})(() => (
+      <Info price={text('Price', '10')}/>
+    ))
+  )
+  .add(
+    "Balance",
+    withInfo({inline: true})(() => (
+      <Balance value={text('value', 10)}/>
+    ))
+  );

stories/pages/myProfile.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {withKnobs} from '@storybook/addon-knobs';
+
+import Offers from '../../app/js/pages/MyProfile/components/Offers';
+import Trades from '../../app/js/pages/MyProfile/components/Trades';
+import StatusContactCode from '../../app/js/pages/MyProfile/components/StatusContactCode';
+
+storiesOf('Pages/MyProfile', module)
+  .addDecorator(withKnobs)
+  .add(
+    "With Offers",
+    withInfo({inline: true})(() => (
+      <Offers location="London" offers={
+        [
+          {
+            asset: '0x0',
+            token: { symbol: 'ETH' },
+            currency: 'EUR',
+            paymentMethodsForHuman: ['Bank Transfer'],
+            rate: '1% Above Bitfinex'
+          }
+        ]
+      } />
+    ))
+  )
+  .add(
+    "Without Offers",
+    withInfo({inline: true})(() => (
+      <Offers location="London" offers={[]}/>
+    ))
+  )
+  .add(
+    "Status Contact Code",
+    withInfo({inline: true})(() => (
+      <StatusContactCode value="0xlsakjd123123" />
+    ))
+  )
+  .add(
+    "With Trades",
+    withInfo({inline: true})(() => (
+      <Trades trades={[{address: 'address', name: 'Name', value: '2', status: 'open'}]}/>
+    ))
+  )
+  .add(
+    "Without Trades",
+    withInfo({inline: true})(() => (
+      <Trades trades={[]} />
+    ))
+  );

stories/sellerInformation.stories.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import SellerInformation from '../app/js/components/SellerInformation';
-
-storiesOf('SellerInformation', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <SellerInformation address={"0x123123123"} username={"Eric"} reputation={{upCount: 432, downCount: 54}}/>
-    ))
-  );
-

stories/statusContactCode.stories.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import StatusContactCode from '../app/js/components/StatusContactCode';
-
-storiesOf('StatusContactCode', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <StatusContactCode value="0xlsakjd123123" />
-    ))
-  );
-

stories/tmp/arbitrationList.stories.jsx

@@ -5,7 +5,7 @@ import {withInfo} from "@storybook/addon-info";
 import {action} from '@storybook/addon-actions';
 import moment from 'moment';
 
-import ArbitrationList from '../app/js/components/tmp/ArbitrationList';
+import ArbitrationList from '../../app/js/components/tmp/ArbitrationList';
 
 global.web3 = {
   eth: {
@@ -54,7 +54,7 @@ const escrows = [
 
 const info = {inline: true};
 
-storiesOf('ArbitrationList', module)
+storiesOf('tmp/ArbitrationList', module)
   .add(
     "List with disputes",
     withInfo(info)(() => (

stories/tmp/createEscrowForm.stories.jsx

@@ -4,10 +4,10 @@ import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
 import {action} from '@storybook/addon-actions';
 
-import CreateEscrowForm from '../app/js/components/tmp/CreateEscrowForm';
+import CreateEscrowForm from '../../app/js/components/tmp/CreateEscrowForm';
 
 const info = {inline: true, propTables: [CreateEscrowForm.WrappedComponent]};
-storiesOf('CreateEscrowForm', module)
+storiesOf('tmp/CreateEscrowForm', module)
   .add(
     "Empty Form",
     withInfo(info)(() => (

stories/tmp/escrowList.stories.jsx

@@ -6,7 +6,7 @@ import {action} from '@storybook/addon-actions';
 import cloneDeep from 'clone-deep';
 import moment from 'moment';
 
-import EscrowList from '../app/js/components/tmp/EscrowList';
+import EscrowList from '../../app/js/components/tmp/EscrowList';
 
 global.web3 = {
   eth: {
@@ -106,7 +106,7 @@ sellerEscrows.forEach(escrow => {
 
 const info = {inline: true, propTables: [EscrowList.WrappedComponent]};
 
-storiesOf('EscrowList', module)
+storiesOf('tmp/EscrowList', module)
   .add(
     "Buyer List",
     withInfo(info)(() => (

stories/tmp/license.stories.jsx

@@ -5,11 +5,11 @@ import { withKnobs, number } from '@storybook/addon-knobs';
 import { withInfo } from "@storybook/addon-info";
 import { action } from '@storybook/addon-actions';
 
-import License from '../app/js/components/tmp/License';
+import License from '../../app/js/components/tmp/License';
 
 const info = {inline: true, propTables: [License.WrappedComponent]};
 
-const stories = storiesOf('License', module);
+const stories = storiesOf('tmp/License', module);
 
 stories.addDecorator(withKnobs);
 

stories/tmp/signatureForm.stories.jsx

@@ -3,11 +3,11 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
 
-import IncludeSignatureForm from '../app/js/components/tmp/IncludeSignatureForm';
+import IncludeSignatureForm from '../../app/js/components/tmp/IncludeSignatureForm';
 
 const info = {inline: true, propTables: [IncludeSignatureForm.WrappedComponent]};
 
-storiesOf('Signature Form', module)
+storiesOf('tmp/Signature Form', module)
   .add(
     "Empty Form",
     withInfo(info)(() => (

stories/trades.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-
-import Trades from '../app/js/components/Profile/Trades';
-
-storiesOf('Trades', module)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <Trades trades={[{address: 'address', name: 'Name', value: '2', status: 'open'}]}/>
-    ))
-  )
-  .add(
-    "Empty",
-    withInfo({inline: true})(() => (
-      <Trades trades={[]} />
-    ))
-  );

stories/updateUser.stories.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import {action} from "@storybook/addon-actions";
-
-import UpdateUser from '../app/js/components/Profile/UpdateUser';
-
-storiesOf('UpdateUser', module)
-  .addDecorator(withKnobs)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <UpdateUser disabled={boolean('disabled', false)} onClick={action('update-user')}/>
-    ))
-  );

stories/wizards/Sell/0_asset.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {action} from "@storybook/addon-actions";
+
+import SellerAssets from '../../../app/js/wizards/Sell/0_Asset/components/SellerAssets';
+
+storiesOf('Wizards/Sell/0_Asset', module)
+  .add(
+    "No Asset Selected",
+    withInfo({inline: true})(() => (
+      <SellerAssets selectedAsset={null} availableAssets={['ETH', 'SNT']} selectAsset={action("select-asset")}/>
+    ))
+  )
+  .add(
+    "Asset Selected",
+    withInfo({inline: true})(() => (
+      <SellerAssets selectedAsset={1} availableAssets={['ETH', 'SNT']} selectAsset={action("select-asset")}/>
+    ))
+  );

stories/wizards/Sell/1_location.stories.jsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
-
-import SellerPosition from '../app/js/components/Seller/SellerPosition';
 import {action} from "@storybook/addon-actions";
 
-storiesOf('Location', module)
+import SellerPosition from '../../../app/js/wizards/Sell/1_Location/components/SellerPosition';
+
+storiesOf('Wizards/Sell/1_Location', module)
   .add(
-    "Normal",
+    "Without default location",
     withInfo({inline: true})(() => (
       <SellerPosition changeLocation={action("change-location")} location="" />
     ))
   )
   .add(
-    "With default position",
+    "With default location",
     withInfo({inline: true})(() => (
       <SellerPosition changeLocation={action("change-location")} location="My Default" />
     ))

stories/wizards/Sell/2_paymentMethods.stories.jsx

@@ -2,15 +2,15 @@ import React from 'react';
 
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
-
-import SellerPaymentMethod from '../app/js/components/Seller/SellerPaymentMethod';
 import {action} from "@storybook/addon-actions";
 
+import SellerPaymentMethod from '../../../app/js/wizards/Sell/2_PaymentMethods/components/SellerPaymentMethod';
+
 const methods = ['Cash (In person)', 'Bank Transfer', 'International wire'];
 
-storiesOf('Payment Methods', module)
+storiesOf('Wizards/Sell/2_PaymentMethods', module)
   .add(
-    "Normal",
+    "Not Selected",
     withInfo({inline: true})(() => (
       <SellerPaymentMethod methods={methods} togglePaymentMethod={action('toggle-method')} selectedMethods={[]} />
     ))

stories/wizards/Sell/3_currency.stories.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import {storiesOf} from '@storybook/react';
 import {withInfo} from "@storybook/addon-info";
-
-import FiatSelectorForm from '../app/js/components/Seller/FiatSelectorForm';
 import {action} from "@storybook/addon-actions";
 
+import FiatSelectorForm from '../../../app/js/wizards/Sell/3_Currency/components/FiatSelectorForm';
+
 const CURRENCY_DATA = [
   {id: 'USD', label: 'United States Dollar - USD'},
   {id: 'EUR', label: 'Euro - EUR'},
@@ -15,9 +15,9 @@ const CURRENCY_DATA = [
   {id: 'KRW', label: 'South Korean Won - KRW'}
 ];
 
-storiesOf('Fiat selector', module)
+storiesOf('Wizards/Sell/3_Currency', module)
   .add(
-    "Normal",
+    "Not Selected",
     withInfo({inline: true})(() => (
       <FiatSelectorForm changeCurrency={action('change-currency')} currencies={CURRENCY_DATA} value={""}/>
     ))

stories/wizards/Sell/4_margin.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {storiesOf} from '@storybook/react';
+import {withInfo} from "@storybook/addon-info";
+import {action} from "@storybook/addon-actions";
+
+import MarginSelectorForm from '../../../app/js/wizards/Sell/4_Margin/components/MarginSelectorForm';
+
+storiesOf('Wizards/Sell/4_Margin', module)
+  .add(
+    "Default",
+    withInfo({inline: true})(() => (
+      <MarginSelectorForm margin={12}
+                          marketType={0}
+                          currency={'USD'}
+                          prices={{'ETH': {'USD': 1}}}
+                          token={{symbol: 'ETH'}}
+                          marginChange={action('margin-change')}
+                          marketTypeCHange={action('market-change')}/>
+    ))
+  );

stories/yourSNTBalance.stories.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {withInfo} from "@storybook/addon-info";
-import { withKnobs, string } from '@storybook/addon-knobs';
-
-import YourSNTBalance from '../app/js/components/YourSNTBalance';
-
-storiesOf('YourSNTBalance', module)
-  .addDecorator(withKnobs)
-  .add(
-    "Normal",
-    withInfo({inline: true})(() => (
-      <YourSNTBalance value={string('value', 10)}/>
-    ))
-  );