fix(Storybook): ts fixes for storybook

packages/blockchain-info-components/.storybook/webpack.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json']
+  },
   module: {
     rules: [
       {
@@ -7,7 +10,8 @@ module.exports = {
         query: {
           name: 'static/media/[name].[hash:8].[ext]'
         }
-      }
+      },
+      { test: /\.tsx?$/, loader: 'ts-loader' }
     ]
   }
 }

packages/blockchain-info-components/src/Carousels/Carousel/template.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 
-import { Color } from '../../Colors'
+import { Color } from '../../Colors/index.ts'
 import { Icon } from '../../Icons'
 
 const Wrapper = styled.div`

packages/blockchain-info-components/src/Dropdowns/ComponentDropdown/template.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 import { Icon } from '../../Icons'
 import { keysIn } from 'ramda'
-import { Palette } from '../../Colors'
+import { Palette } from '../../Colors/index.ts'
 
 const Wrapper = styled.div`
   display: inline-flex;

packages/blockchain-info-components/src/Dropdowns/SimpleDropdown/template.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 import { Icon } from '../../Icons'
 import { keysIn } from 'ramda'
-import { Palette } from '../../Colors'
+import { Palette } from '../../Colors/index.ts'
 
 const Wrapper = styled.div`
   display: inline-flex;

packages/blockchain-info-components/src/Footer/index.js

@@ -3,7 +3,7 @@ import Cookies from 'universal-cookie'
 import React, { PureComponent } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 
-import { Color } from '../Colors'
+import { Color } from '../Colors/index.ts'
 import { Image } from '../Images'
 import { Select } from './Select'
 import Link from '../Navigation/Link'

packages/blockchain-info-components/src/Gauges/SecurityGauge.js

@@ -1,4 +1,4 @@
-import { Color } from '../Colors'
+import { Color } from '../Colors/index.ts'
 import { Icon } from '../Icons'
 import PropTypes from 'prop-types'
 import React from 'react'

packages/blockchain-info-components/src/Links/Link.js

@@ -1,5 +1,5 @@
 import { keysIn } from 'ramda'
-import { Palette } from '../Colors'
+import { Palette } from '../Colors/index.ts'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'

packages/blockchain-info-components/src/Loaders/FlatLoader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled, { css, keyframes } from 'styled-components'
 
-import { Palette } from '../Colors'
+import { Palette } from '../Colors/index.ts'
 
 const stretchFrames = keyframes`
   0%, 40%, 100% { opacity: 1; }

packages/blockchain-info-components/src/Loaders/FlatLoader2.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled, { css, keyframes } from 'styled-components'
 
-import { Palette } from '../Colors'
+import { Palette } from '../Colors/index.ts'
 
 const stretchFrames = keyframes`
   0%, 40%, 100% { transform: scaleY(0.4); }  

packages/blockchain-info-components/src/Loaders/HeartbeatLoader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled, { css, keyframes } from 'styled-components'
 
-import { Palette } from '../Colors'
+import { Palette } from '../Colors/index.ts'
 
 const bounceFrames = keyframes`
   0%, 100% { transform: scale(0.0); }

packages/blockchain-info-components/src/Navigation/Button/index.js

@@ -1,4 +1,4 @@
-import { Color } from '../../Colors'
+import { Color } from '../../Colors/index.ts'
 import { trackButtonEvent } from '../Events'
 import Link from '../Link'
 import React from 'react'

packages/blockchain-info-components/src/Navigation/index.js

@@ -1,4 +1,4 @@
-import { Color } from '../Colors'
+import { Color } from '../Colors/index.ts'
 import { FormattedMessage, IntlProvider } from 'react-intl'
 import { Image } from '../Images'
 import { trackEvent } from './Events'

packages/blockchain-info-components/src/Normalize.js

@@ -1,6 +1,6 @@
 // https://github.com/necolas/normalize.css
 //
-import { Color } from './Colors'
+import { Color } from './Colors/index.ts'
 
 const Normalize8 = `
 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

packages/blockchain-info-components/src/Themes/index.js

@@ -1,4 +1,4 @@
-import { Palette } from '../Colors'
+import { Palette } from '../Colors/index.ts'
 import { ThemeProvider } from 'styled-components'
 import PropTypes from 'prop-types'
 import React from 'react'

packages/blockchain-info-components/stories/chapters/colors.js

@@ -1,10 +1,9 @@
-import React from 'react'
-import styled from 'styled-components'
-import { storiesOf } from '@storybook/react'
-
 import { keysIn } from 'ramda'
+import { Palette } from '../../src/Colors/index.ts'
+import { storiesOf } from '@storybook/react'
 import Layout from '../components/layout'
-import { Palette } from '../../src/Colors'
+import React from 'react'
+import styled from 'styled-components'
 
 const ColorLayout = styled.div`
   display: flex;
@@ -32,20 +31,20 @@ const Code = styled.div`
   display: block;
   width: 100%;
   height: 50px;
-  border: 1px solid #CDCDCD;
+  border: 1px solid #cdcdcd;
   box-sizing: border-box;
   font-size: 16px;
   font-weight: 500;
   text-align: center;
 `
 
-const PaletteLayout = (props) => {
+const PaletteLayout = props => {
   const palette = Palette(props.theme)
   const keys = keysIn(palette)
 
   return (
     <ColorLayout>
-      { keys.map(function (key, index) {
+      {keys.map(function (key, index) {
         return (
           <Container key={index}>
             <Sample bgColor={palette[key]} />
@@ -67,18 +66,20 @@ const ColorGridRow = styled.tr`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid #EFEFEF;
-  border-bottom: 1px ${props => props.last ? 'solid' : 'none'} #EFEFEF;
+  border-top: 1px solid #efefef;
+  border-bottom: 1px ${props => (props.last ? 'solid' : 'none')} #efefef;
 `
 const ColorGridCell = styled.td`
   flex-basis: 20%;
   font-size: 18px;
   text-transform: uppercase;
   text-align: center;
-  border-left: 1px solid #EFEFEF;
-  border-right: 1px ${props => props.last ? 'solid' : 'none'} #EFEFEF;
-  background-color: ${props => props.color ? props.color : 'white'};
-  &:first-child { flex-basis: 40%; }
+  border-left: 1px solid #efefef;
+  border-right: 1px ${props => (props.last ? 'solid' : 'none')} #efefef;
+  background-color: ${props => (props.color ? props.color : 'white')};
+  &:first-child {
+    flex-basis: 40%;
+  }
 `
 
 const PaletteGrid = props => {
@@ -90,13 +91,25 @@ const PaletteGrid = props => {
       <ColorGridBody>
         <ColorGridRow>
           <ColorGridCell>&nbsp;</ColorGridCell>
-          {themes.map((theme, index) => <ColorGridCell key={index} last={index === themes.length - 1}>{theme}</ColorGridCell>) }
+          {themes.map((theme, index) => (
+            <ColorGridCell key={index} last={index === themes.length - 1}>
+              {theme}
+            </ColorGridCell>
+          ))}
         </ColorGridRow>
-        { keys.map((key, indexRow) => {
+        {keys.map((key, indexRow) => {
           return (
             <ColorGridRow key={indexRow} last={indexRow === keys.length - 1}>
               <ColorGridCell>{key}</ColorGridCell>
-              {themes.map((theme, indexCell) => <ColorGridCell key={indexCell} last={indexCell === themes.length - 1} color={Palette(theme)[key]}>&nbsp;</ColorGridCell>) }
+              {themes.map((theme, indexCell) => (
+                <ColorGridCell
+                  key={indexCell}
+                  last={indexCell === themes.length - 1}
+                  color={Palette(theme)[key]}
+                >
+                  &nbsp;
+                </ColorGridCell>
+              ))}
             </ColorGridRow>
           )
         })}
@@ -106,7 +119,7 @@ const PaletteGrid = props => {
 }
 
 storiesOf('Colors', module)
-  .addDecorator(story => (<Layout>{story()}</Layout>))
+  .addDecorator(story => <Layout>{story()}</Layout>)
   .add('All colors', () => <PaletteGrid />)
   .add('Theme Default', () => <PaletteLayout theme='default' />)
   .add('Theme Complement', () => <PaletteLayout theme='complement' />)

packages/blockchain-info-components/stories/chapters/icons.js

@@ -1,12 +1,11 @@
+import { Icon, IconGlobalStyles } from '../../src'
+import { keysIn } from 'ramda'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
-import React from 'react'
-import styled from 'styled-components'
-
-import { Icon } from '../../src'
-import { keysIn } from 'ramda'
 import IcomoonMap from '../../src/Icons/Icomoon'
 import Layout from '../components/layout'
+import React from 'react'
+import styled from 'styled-components'
 
 const IconWrapper = styled.div`
   display: flex;
@@ -62,7 +61,14 @@ const IconLayout = props => {
 const iconKeys = keysIn(IcomoonMap)
 
 storiesOf('Icons', module)
-  .addDecorator(story => <Layout>{story()}</Layout>)
+  .addDecorator(story => (
+    <Layout>
+      <>
+        {story()}
+        <IconGlobalStyles />
+      </>
+    </Layout>
+  ))
   .addDecorator((story, context) =>
     withInfo({ text: 'Documentation', inline: true })(story)(context)
   )

packages/blockchain-info-components/stories/components/layout.js

@@ -1,9 +1,9 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled, { ThemeProvider } from 'styled-components'
 
+import { Color, Palette } from '../../src/Colors/index.ts'
 import { SimpleDropdown } from '../../src/Dropdowns'
-import { Color, Palette } from '../../src/Colors'
 
 const BasePage = styled.div`
   font-family: -apple-system, '.SFNSText-Regular', 'San Francisco', Roboto,