add prettier and fix bugs

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "requirePragma": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

.storybook/components/Block.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
 const wrapperStyle = {
   paddingBottom: '20px',
-};
+}
 
 const titleStyle = {
   textTransform: 'uppercase',
@@ -12,17 +12,17 @@ const titleStyle = {
   color: '#999',
   paddingBottom: '5px',
   fontWeight: 'bold',
-};
+}
 
 const contentStyle = {
   border: '1px solid #DDD',
-};
+}
 
 const Block = ({ children, title }) => (
   <div style={wrapperStyle}>
     <div style={titleStyle}>{title}</div>
     <div style={contentStyle}>{children}</div>
   </div>
-);
+)
 
-export default Block;
+export default Block

.storybook/components/Code.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github as theme } from 'react-syntax-highlighter/dist/styles';
-import Block from './Block';
+import React from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { github as theme } from 'react-syntax-highlighter/dist/styles'
+import Block from './Block'
 
 const Code = ({ children }) => (
   <Block title="Code">
     <SyntaxHighlighter language="jsx" style={theme} customStyle={{ margin: 0 }}>
       {children}
     </SyntaxHighlighter>
   </Block>
-);
+)
 
-export default Code;
+export default Code

.storybook/components/MobileBreakpoint.js

@@ -1,17 +1,20 @@
-import React from 'react';
-import withSizes from '../../src/withSizes';
+import React from 'react'
+import withSizes from '../../src/withSizes'
 
 const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
   <div>
-    <div>breakpoint: {breakpoint} | width: {width}</div>
+    <div>
+      breakpoint: {breakpoint} | width: {width}
+    </div>
     <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
-    <br /><br />
+    <br />
+    <br />
   </div>
-);
+)
 
 const mapSizesToProps = ({ width }, { breakpoint }) => ({
   isMobile: width < breakpoint,
   width,
-});
+})
 
-export default withSizes(mapSizesToProps)(MobileBreakpoint);
+export default withSizes(mapSizesToProps)(MobileBreakpoint)

.storybook/components/Result.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import Block from './Block';
+import React from 'react'
+import Block from './Block'
 
-const Result = ({ children }) => (
-  <Block title="Result">
-    {children}
-  </Block>
-);
+const Result = ({ children }) => <Block title="Result">{children}</Block>
 
-export default Result;
+export default Result

.storybook/components/index.js

@@ -1,3 +1,3 @@
-export Block from './Block';
-export Code from './Code';
-export Result from './Result';
+export Block from './Block'
+export Code from './Code'
+export Result from './Result'

.storybook/stories/index.js

@@ -1,26 +1,28 @@
-import React from 'react';
-import { storiesOf, action, linkTo } from '@kadira/storybook';
-import { Code, Result } from '../components';
-import MobileBreakpoint from '../components/MobileBreakpoint';
-import withSizes from '../../src/withSizes';
+import React from 'react'
+import { storiesOf, action, linkTo } from '@kadira/storybook'
+import { Code, Result } from '../components'
+import MobileBreakpoint from '../components/MobileBreakpoint'
+import withSizes from '../../src/withSizes'
 
 const mapSizesToProps = sizes => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',
   isMobile: withSizes.isMobile(sizes),
   isTablet: withSizes.isTablet(sizes),
   isDesktop: withSizes.isDesktop(sizes),
-});
+})
 
 const ExampleSizedComponent = withSizes(mapSizesToProps)(
   ({ isMobile, isTablet, isDesktop, backgroundColor }) => (
     <div style={{ backgroundColor, color: 'white', padding: '30px' }}>
-      <div><strong>Resize your window</strong></div>
+      <div>
+        <strong>Resize your window</strong>
+      </div>
       {isMobile && 'isMobile '}
       {isTablet && 'isTablet '}
       {isDesktop && 'isDesktop '}
     </div>
   )
-);
+)
 
 storiesOf('Sizes', module)
   .add('default behavior', () => (
@@ -29,7 +31,7 @@ storiesOf('Sizes', module)
         <ExampleSizedComponent />
       </Result>
       <Code>
-{`import React from 'react';
+        {`import React from 'react';
 import withSizes from 'react-sizes';
 
 const mapSizesToProps = sizes => ({
@@ -60,4 +62,3 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
       <MobileBreakpoint breakpoint={700} />
     </div>
   ))
-;

src/index.js

@@ -1,5 +1,6 @@
 import withSizes from './withSizes'
-import * as presets from './presets'
-
-export default Object.assign(withSizes, presets)
+import createSizedComponent from './createSizedComponent'
+import presets from './presets'
 
+export { createSizedComponent, presets, withSizes }
+export default withSizes

src/presets.js

@@ -2,12 +2,11 @@ export const isMobile = ({ width }) => width < 480
 export const isTablet = ({ width }) => width >= 480 && width < 1024
 export const isDesktop = ({ width }) => width >= 1024
 
-export const isGtMobile = (sizes) => !isMobile(sizes)
-export const isGtTablet = (sizes) => isDesktop(sizes)
+export const isGtMobile = sizes => !isMobile(sizes)
+export const isGtTablet = sizes => isDesktop(sizes)
 
-export const isStTablet = (sizes) => isMobile(sizes)
-export const isStDesktop = (sizes) => !isDesktop(sizes)
-
-export const isTabletAndGreater = (sizes) => !isMobile(sizes)
-export const isTabletAndSmaller = (sizes) => !isStDesktop(sizes)
+export const isStTablet = sizes => isMobile(sizes)
+export const isStDesktop = sizes => !isDesktop(sizes)
 
+export const isTabletAndGreater = sizes => !isMobile(sizes)
+export const isTabletAndSmaller = sizes => !isStDesktop(sizes)

src/utils/getDisplayName.js

@@ -1,9 +1,8 @@
-const getDisplayName = (Component) => (
+const getDisplayName = Component =>
   Component.displayName ||
   Component.name ||
   (typeof Component === 'string' && Component.length > 0
     ? Component
     : 'Unknown')
-)
 
 export default getDisplayName

src/utils/getWindowSizes.js

@@ -1,4 +1,4 @@
-const getSizes = () => {
+const getWindowSizes = () => {
   const canUseDOM = typeof window !== 'undefined'
 
   return {
@@ -8,4 +8,4 @@ const getSizes = () => {
   }
 }
 
-export default getSizes
+export default getWindowSizes

src/withSizes.js

@@ -7,10 +7,11 @@ import getDisplayName from './utils/getDisplayName'
 import shallowDiff from './utils/shallowDiff'
 import getWindowSizes from './utils/getWindowSizes'
 
-const debug = process && process.env &&
-  process.env.NODE_ENV === 'debug'
+import * as presets from './presets'
 
-const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
+const debug = process && process.env && process.env.NODE_ENV === 'debug'
+
+const withSizes = (...mappedSizesToProps) => WrappedComponent => {
   const parseMappedSizesToProps = (dimensions, props) =>
     mappedSizesToProps
       .map(check => check(dimensions, props))
@@ -34,9 +35,7 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
       }
     }
 
-    throttledDispatchSizes = (
-      throttle(this.dispatchSizes, 200)
-    )
+    throttledDispatchSizes = throttle(this.dispatchSizes, 200)
 
     /* Lifecycles */
 
@@ -60,4 +59,4 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
   }
 }
 
-export default withSizes
+export default Object.assign(withSizes, { ...presets })