Prettier and add esnext field, close #8

package-lock.json

@@ -4374,15 +4374,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
-          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -4394,6 +4385,15 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -8505,15 +8505,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "string-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
@@ -8556,6 +8547,15 @@
         "function-bind": "1.1.0"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "stringify-object": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-2.4.0.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "author": "Danilo Woznica",
   "license": "MIT",
+  "jsnext:main": "index",
   "bugs": {
     "url": "https://github.com/danilowoz/react-content-loader/issues"
   },
@@ -35,6 +36,7 @@
     "build-storybook": "build-storybook"
   },
   "devDependencies": {
+    "@storybook/react": "^3.1.9",
     "babel-cli": "^6.6.4",
     "babel-core": "^6.7.4",
     "babel-eslint": "^6.0.2",
@@ -52,13 +54,13 @@
     "jsdom": "^8.1.0",
     "mocha": "^2.4.5",
     "nodemon": "^1.9.1",
+    "prettier": "^1.6.1",
     "prop-types": "^15.5.10",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
     "sinon": "^1.17.3",
-    "uuid": "^3.0.1",
-    "@storybook/react": "^3.1.9"
+    "uuid": "^3.0.1"
   },
   "peerDependencies": {
     "react": "~0.14.8 || ^15.0.0",

src/Wrap.js

@@ -1,34 +1,58 @@
 import React from 'react'
-import uuid from 'uuid';
+import uuid from 'uuid'
 
-const Wrap = (props) => {
+const Wrap = props => {
+  let idClip = uuid.v1()
+  let idGradient = uuid.v1()
 
-    let idClip = uuid.v1()
-    let idGradient = uuid.v1()
+  return (
+    <svg
+      viewBox={`0 0 ${props.width} ${props.height}`}
+      version="1.1"
+      style={props.style}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <rect
+        style={{ fill: `url(#${idGradient})` }}
+        clipPath={`url(#${idClip})`}
+        x="0"
+        y="0"
+        width={props.width}
+        height={props.height}
+      />
 
-    return (
-        <svg viewBox={`0 0 ${props.width} ${props.height}`} version="1.1" style={props.style} preserveAspectRatio="xMidYMid meet">
-            <rect style={{fill: `url(#${idGradient})`}} clipPath={`url(#${idClip})`} x="0" y="0" width={props.width} height={props.height} />
+      <defs>
+        <clipPath id={`${idClip}`}>{props.children}</clipPath>
 
-            <defs>
-                <clipPath id={`${idClip}`}>
-                    { props.children }
-                </clipPath>
-
-                <linearGradient id={`${idGradient}`}>
-                    <stop offset="0%" stopColor={props.primaryColor}>
-                        <animate attributeName="offset" values="-2; 1" dur={`${props.speed}s`} repeatCount="indefinite" />
-                    </stop>
-                    <stop offset="50%" stopColor={props.secondaryColor}>
-                        <animate attributeName="offset" values="-1.5; 1.5" dur={`${props.speed}s`} repeatCount="indefinite" />
-                    </stop>
-                    <stop offset="100%" stopColor={props.primaryColor}>
-                        <animate attributeName="offset" values="-1; 2" dur={`${props.speed}s`} repeatCount="indefinite" />
-                    </stop>
-                </linearGradient>
-            </defs>
-        </svg>
-    )
+        <linearGradient id={`${idGradient}`}>
+          <stop offset="0%" stopColor={props.primaryColor}>
+            <animate
+              attributeName="offset"
+              values="-2; 1"
+              dur={`${props.speed}s`}
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="50%" stopColor={props.secondaryColor}>
+            <animate
+              attributeName="offset"
+              values="-1.5; 1.5"
+              dur={`${props.speed}s`}
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" stopColor={props.primaryColor}>
+            <animate
+              attributeName="offset"
+              values="-1; 2"
+              dur={`${props.speed}s`}
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
 }
 
 export default Wrap

src/custom/Circle.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-const Circle = (props) => {
-    const { x = 0, y = 0, radius = 50 } = props
-    return <circle cx={x} cy={y} r={radius} />
+const Circle = props => {
+  const { x = 0, y = 0, radius = 50 } = props
+  return <circle cx={x} cy={y} r={radius} />
 }
 
-export default Circle
+export default Circle

src/custom/Rect.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-const Rect = (props) => {
-    const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
-    return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
+const Rect = props => {
+  const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
+  return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
 }
 
-export default Rect
+export default Rect

src/index.js

@@ -12,79 +12,66 @@ import Rect from './custom/Rect'
 import Circle from './custom/Circle'
 
 class ContentLoader extends Component {
+	constructor(props) {
+		super(props)
 
-    constructor(props) {
-        super(props)
+		this.state = {
+			style: props.style,
+			type: props.type,
+			speed: props.speed,
+			width: props.width,
+			height: props.height,
+			primaryColor: props.primaryColor,
+			secondaryColor: props.secondaryColor,
+		}
+	}
 
-        this.state = {
-            style: props.style,
-            type: props.type,
-            speed: props.speed,
-            width: props.width,
-            height: props.height,
-            primaryColor: props.primaryColor,
-            secondaryColor: props.secondaryColor
-        }
-    }
+	render() {
+		if (this.props.children) {
+			return <Wrap {...this.state}>{this.props.children}</Wrap>
+		}
 
-    render() {
+		if (!this.props.children) {
+			switch (this.state.type.toLowerCase()) {
+				case 'instagram':
+					return <InstagramStyle {...this.state} />
+					break
 
-        if (this.props.children) {
+				case 'code':
+					return <CodeStyle {...this.state} />
+					break
 
-            return (
-                <Wrap {...this.state}>
-                    { this.props.children }
-                </Wrap>
-            )
+				case 'list':
+					return <ListStyle {...this.state} />
+					break
 
-        }
-        
-        if (!this.props.children) {
-
-            switch (this.state.type.toLowerCase()) {
-
-            case 'instagram':
-                return <InstagramStyle {...this.state} />
-                break
-
-            case 'code':
-                return <CodeStyle {...this.state} />
-                break
-
-            case 'list':
-                return <ListStyle {...this.state} />
-                break
-
-            default:  
-            case 'facebook': 
-                return <FacebookStyle {...this.state} />
-                break
-
-            }
-
-        }
-
-    }
+				default:
+				case 'facebook':
+					return <FacebookStyle {...this.state} />
+					break
+			}
+		}
+	}
 }
 
 ContentLoader.propTypes = {
-    style: PropTypes.object,
-    type: PropTypes.string,
-    speed: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    primaryColor: PropTypes.string,
-    secondaryColor: PropTypes.string
+	style: PropTypes.object,
+	type: PropTypes.string,
+	speed: PropTypes.number,
+	width: PropTypes.number,
+	height: PropTypes.number,
+	primaryColor: PropTypes.string,
+	secondaryColor: PropTypes.string,
 }
 
 ContentLoader.defaultProps = {
-    type: 'facebook',
-    speed: 2,
-    width: 400,
-    height: 130,
-    primaryColor: '#f0f0f0',
-    secondaryColor: '#e0e0e0'
+	type: 'facebook',
+	speed: 2,
+	width: 400,
+	height: 130,
+	primaryColor: '#f0f0f0',
+	secondaryColor: '#e0e0e0',
 }
 
 export default ContentLoader
-export { Rect, Circle }
+export { Rect, Circle }

src/stylized/CodeStyle.js

@@ -1,23 +1,23 @@
 import React from 'react'
 import Wrap from '../Wrap'
 
-const CodeStyle = (props) => {
-    return (
-        <Wrap {...props}>
-            <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
-            <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
-            <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
+const CodeStyle = props => 
+  return (
+    <Wrap {...props}>
+      <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
+      <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
+      <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
 
-            <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
-            <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
+      <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
+      <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
 
-            <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
-            <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
-            <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
+      <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
+      <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
+      <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
 
-            <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
-        </Wrap>
-    )
+      <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
+    </Wrap>
+  )
 }
 
 export default CodeStyle

src/stylized/FacebookStyle.js

@@ -1,19 +1,19 @@
 import React from 'react'
 import Wrap from '../Wrap'
 
-const FacebookStyle = (props) => {
-    return (
-        <Wrap {...props}>
-            <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+const FacebookStyle = props => {
+  return (
+    <Wrap {...props}>
+      <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
 
-            <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-            <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+      <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
 
-            <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
-            <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
-            <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
-        </Wrap>     
-    )
+      <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
+      <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
+      <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
+    </Wrap>
+  )
 }
 
 export default FacebookStyle

src/stylized/InstagramStyle.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import Wrap from '../Wrap'
 
-const InstagramStyle = (props) => {
-    return (
-        <Wrap {...props} height="480">
-            <circle cx="30" cy="30" r="30" />
+const InstagramStyle = props => {
+  return (
+    <Wrap {...props} height="480">
+      <circle cx="30" cy="30" r="30" />
 
-            <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
-            <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
-            <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
-        </Wrap>
-    )
+      <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
+      <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
+      <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
+    </Wrap>
+  )
 }
 
 export default InstagramStyle

src/stylized/ListStyle.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import Wrap from '../Wrap'
 
-const ListStyle = (props) => {
-    return (
-        <Wrap {...props}>
-            <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-            <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
-            <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
-            <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
-            <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
-            <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
-        </Wrap>
-    )
+const ListStyle = props => {
+  return (
+    <Wrap {...props}>
+      <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
+      <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
+      <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
+      <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
+      <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
+      <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
+    </Wrap>
+  )
 }
 
 export default ListStyle