import { storiesOf } from "@storybook/react" ; import * as React from "react" ; import apolloStorybookDecorator from "apollo-storybook-react" ; import { CurrencyConverter } from "./CurrencyConverter" ; import styled from "styled-components" ; const Container = styled . div `
  width: 500px;
` ; const typeDefs = `
  type Query {
    storefrontEthPrice: Float
    storefrontCvlPrice: Float
    storefrontCvlQuoteUsd(usdToSpend: Float!): Float
  }

  schema {
    query: Query
  }
` ; const mocks = { Query : ( ) => { return { storefrontEthPrice : ( ) => { return 102.98 ; } , storefrontCvlPrice : ( ) => { return 0.2 ; } , storefrontCvlQuoteUsd : ( ) => { return 500.48635 ; } , } ; } , } ; storiesOf ( "Common / Currency / Currency Converter" , module ) . addDecorator ( apolloStorybookDecorator ( { typeDefs , mocks , } ) ) . add ( "USD to ETH" , ( ) => { return ( < Container > < div > ( exchange rate is 0.5 x ) < /div> < CurrencyConverter fromValue = "3" currencyCodeFrom = "USD" currencyCodeTo = "ETH" currencyLabelFrom = "Enter USD Amount" currencyLabelTo = "Converted ETH" displayErrorMsg = { true } onConversion = { ( ) => null } doConversion = { async ( from ) => from * 2 } onNotEnoughEthError = { ( error ) => console . log ( error ) } /> < /Container>); } ) . add ( "CVL to ETH" , ( ) => { return ( < Container > < div > ( exchange rate is 2 x ) < /div> < CurrencyConverter currencyCodeFrom = "CVL" currencyCodeTo = "ETH" currencyLabelFrom = "Enter CVL Amount" currencyLabelTo = "Converted ETH" onConversion = { ( ) => null } doConversion = { async ( from ) => from * 2 } / > < /Container>); } ) ;