add prettier format

JoshK2 · Aug 29, 2019 · 3e2f1de · 3e2f1de
1 parent 91297d8
commit 3e2f1de
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 134 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120
+}
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "start": "react-scripts start",
     "build": "rm -rf dist && NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@bit/joshk.jotils.get-random-color": "^2.0.8",
+    "prettier": "^1.18.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "2.1.8"

diff --git a/src/components/Circle/index.js b/src/components/Circle/index.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Circle extends Component {
     render() {
@@ -9,9 +9,9 @@ export default class Circle extends Component {
 }
 
 Circle.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Circle.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Default/index.js b/src/components/Default/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Default extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 12; index++) {
-            div.push(<div style={{background: `${this.props.color}`}}></div>);
+            div.push(<div style={{ background: `${this.props.color}` }}></div>)
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +17,9 @@ export default class Default extends Component {
 }
 
 Default.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Default.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/DualRing/index.js b/src/components/DualRing/index.js
@@ -1,21 +1,21 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class DualRing extends Component {
     render() {
         return (
             <div className="lds-dual-ring">
-                <div className="lds-dual-ring-after" style={{borderColor: `${this.props.color} transparent`}}></div>
+                <div className="lds-dual-ring-after" style={{ borderColor: `${this.props.color} transparent` }}></div>
             </div>
         )
     }
 }
 
 DualRing.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 DualRing.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Ellipsis extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 4; index++) {
-            div.push(<div style={{background: `${this.props.color}`}}></div>);
+            div.push(<div style={{ background: `${this.props.color}` }}></div>)
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +17,9 @@ export default class Ellipsis extends Component {
 }
 
 Ellipsis.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Ellipsis.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Facebook/index.js b/src/components/Facebook/index.js
@@ -1,30 +1,28 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 function createArray(length) {
-    let array = [];
+    let array = []
     for (let num = 0; num < length; num++) {
-        array.push(null);
+        array.push(null)
     }
-    return array;
+    return array
 }
 
 export default class Facebook extends Component {
     static propTypes = {
         /** hex color */
-        color: PropTypes.string
+        color: PropTypes.string,
     }
 
     static defaultProps = { color: '#fff' }
 
     getCircles = () => {
-        return createArray(3).map(() =>
-            <div style={{ background: `${this.props.color}` }}></div>
-        );
+        return createArray(3).map(() => <div style={{ background: `${this.props.color}` }}></div>)
     }
 
     render() {
         return <div className="lds-facebook">{this.getCircles()}</div>
     }
-}
+}
diff --git a/src/components/Grid/index.js b/src/components/Grid/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Grid extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 9; index++) {
-            div.push(<div style={{background: `${this.props.color}`}}></div>);
+            div.push(<div style={{ background: `${this.props.color}` }}></div>)
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +17,9 @@ export default class Grid extends Component {
 }
 
 Grid.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Grid.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Heart/index.js b/src/components/Heart/index.js
@@ -1,17 +1,24 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Heart extends Component {
     render() {
-        return <div className="lds-heart"><div style={{background: this.props.color}}><div className="div-before" style={{background: this.props.color}}></div><div className="div-after" style={{background: this.props.color}}></div></div></div>
+        return (
+            <div className="lds-heart">
+                <div style={{ background: this.props.color }}>
+                    <div className="div-before" style={{ background: this.props.color }}></div>
+                    <div className="div-after" style={{ background: this.props.color }}></div>
+                </div>
+            </div>
+        )
     }
 }
 
 Heart.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Heart.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Hourglass/index.js b/src/components/Hourglass/index.js
@@ -1,17 +1,21 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Hourglass extends Component {
     render() {
-        return <div className="lds-hourglass"><div className="lds-hourglass-after" style={{background: this.props.color}}></div></div>
+        return (
+            <div className="lds-hourglass">
+                <div className="lds-hourglass-after" style={{ background: this.props.color }}></div>
+            </div>
+        )
     }
 }
 
 Hourglass.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Hourglass.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Ring/index.js b/src/components/Ring/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Ring extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 4; index++) {
-            div.push(<div style={{borderColor: `${this.props.color} transparent transparent transparent`}}></div>);
+            div.push(<div style={{ borderColor: `${this.props.color} transparent transparent transparent` }}></div>)
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +17,9 @@ export default class Ring extends Component {
 }
 
 Ring.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Ring.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Ripple/index.js b/src/components/Ripple/index.js
@@ -1,14 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Ripple extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 2; index++) {
-            div.push(<div style={{borderColor: `${this.props.color}`}}></div>);
+            div.push(<div style={{ borderColor: `${this.props.color}` }}></div>)
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +17,9 @@ export default class Ripple extends Component {
 }
 
 Ripple.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Ripple.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}
diff --git a/src/components/Roller/index.js b/src/components/Roller/index.js
@@ -1,14 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './style.css';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import './style.css'
 
 export default class Roller extends Component {
     Circles = () => {
-        let div = [];
+        let div = []
         for (let index = 0; index < 8; index++) {
-            div.push(<div><div className="div-after" style={{background: this.props.color}}></div></div>);
+            div.push(
+                <div>
+                    <div className="div-after" style={{ background: this.props.color }}></div>
+                </div>
+            )
         }
-        return div;
+        return div
     }
 
     render() {
@@ -17,9 +21,9 @@ export default class Roller extends Component {
 }
 
 Roller.propTypes = {
-    color: PropTypes.string
+    color: PropTypes.string,
 }
 
 Roller.defaultProps = {
-    color: '#fff'
-}
+    color: '#fff',
+}