Run prettier over all files

styled-components · Mar 3, 2017 · bc8b5f4 · bc8b5f4
1 parent a3b4ab7
commit bc8b5f4
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write",
+      "prettier --write --single-quote --trailing-comma es5",
       "git add"
     ]
   },

diff --git a/src/App/index.js b/src/App/index.js
@@ -3,62 +3,56 @@ import { invert } from 'polished';
 import cssColors from 'color-name';
 import Tiles from '../Tiles';
 
-import {
-	BigTile,
-	Input,
-	Title,
-	ForkBanner,
-	Link,
-	Wrapper
-} from './style';
+import { BigTile, Input, Title, ForkBanner, Link, Wrapper } from './style';
 
 let inverted, color;
 class App extends Component {
-	state = {
-		color: '#65daa2'
-	}
+  state = {
+    color: '#65daa2',
+  };
 
-	changeColor = (evt) => {
-		this.setState({
-			color: evt.target.value,
-		});
-	}
+  changeColor = evt => {
+    this.setState({
+      color: evt.target.value,
+    });
+  };
 
   render() {
-		try {
-			let temp = cssColors[this.state.color];
-			if (temp) {
-				temp = `rgb(${temp[0]}, ${temp[1]}, ${temp[2]})`;
-			} else {
-				temp = this.state.color;
-			}
-			// This will throw if this.state.color is invalid,
-			// leaving us with the old colors if somebody enters
-			// an invalid color
-			inverted = invert(temp);
-			color = temp;
-		} catch (err) {}
+    try {
+      let temp = cssColors[this.state.color];
+      if (temp) {
+        temp = `rgb(${temp[0]}, ${temp[1]}, ${temp[2]})`;
+      } else {
+        temp = this.state.color;
+      }
+      // This will throw if this.state.color is invalid,
+      // leaving us with the old colors if somebody enters
+      // an invalid color
+      inverted = invert(temp);
+      color = temp;
+    } catch (err) {}
     return (
-			<Wrapper>
-	      <BigTile bg={color}>
-					<Title color={inverted}>Color Schemer</Title>
-					<Input
-						type="text"
-						autoFocus
-						value={this.state.color}
-						onChange={this.changeColor}
-						color={inverted}
-					/>
-	      </BigTile>
-				<Link href="https://github.com/styled-components/colors-demo">
-					<ForkBanner
-						src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
-						alt="Fork me on GitHub"
-						target="_blank"
-						data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
-				</Link>
-				<Tiles color={color} />
-			</Wrapper>
+      <Wrapper>
+        <BigTile bg={color}>
+          <Title color={inverted}>Color Schemer</Title>
+          <Input
+            type="text"
+            autoFocus
+            value={this.state.color}
+            onChange={this.changeColor}
+            color={inverted}
+          />
+        </BigTile>
+        <Link href="https://github.com/styled-components/colors-demo">
+          <ForkBanner
+            src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+            alt="Fork me on GitHub"
+            target="_blank"
+            data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
+          />
+        </Link>
+        <Tiles color={color} />
+      </Wrapper>
     );
   }
 }

diff --git a/src/App/style.js b/src/App/style.js
@@ -7,7 +7,7 @@ export const BigTile = styled.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`
+`;
 
 export const Input = styled.input`
 	background: transparent;
@@ -23,20 +23,20 @@ export const Input = styled.input`
 	&:hover {
 		outline: none;
 	}
-`
+`;
 
 export const Title = styled.h1`
 	position: absolute;
 	top: 0;
 	color: ${props => props.color};
-`
+`;
 
 export const ForkBanner = styled.img`
 	position: absolute;
 	top: 0;
 	right: 0;
 	border: 'none';
-`
+`;
 
 export const Link = styled.a``;
 

diff --git a/src/Tile/index.js b/src/Tile/index.js
@@ -2,51 +2,51 @@ import React from 'react';
 import { findDOMNode } from 'react-dom';
 import { invert } from 'polished';
 import Clipboard from 'clipboard';
-import {
-	Wrapper,
-	Text
-} from './style';
+import { Wrapper, Text } from './style';
 
 class Tile extends React.Component {
-	state = {
-		text: this.props.color,
-	};
+  state = {
+    text: this.props.color,
+  };
 
-	// Set the text of the tile temporarily, reverting
-	// back to the color after one second
-	setText = (text) => {
-		this.setState({
-			text: text,
-		});
-		setTimeout(() => {
-			this.setState({
-				text: this.props.color,
-			});
-		}, 1000);
-	}
+  // Set the text of the tile temporarily, reverting
+  // back to the color after one second
+  setText = text => {
+    this.setState({
+      text: text,
+    });
+    setTimeout(
+      () => {
+        this.setState({
+          text: this.props.color,
+        });
+      },
+      1000
+    );
+  };
 
-	componentDidMount() {
-		const clipboard = new Clipboard(findDOMNode(this.tile));
-		clipboard.on('success', () => {
-			this.setText('Copied! 💯');
-		});
-		clipboard.on('error', function(e) {
-		  this.setText('Copying failed 😢');
-		});
-	}
+  componentDidMount() {
+    const clipboard = new Clipboard(findDOMNode(this.tile));
+    clipboard.on('success', () => {
+      this.setText('Copied! 💯');
+    });
+    clipboard.on('error', function(e) {
+      this.setText('Copying failed 😢');
+    });
+  }
 
-	render() {
-		const { color } = this.props;
-		return (
-			<Wrapper
-				bg={color}
-				ref={comp => this.tile = comp}
-				data-clipboard-text={color}
-			>
-				<Text color={invert(color)}>{this.state.text}</Text>
-			</Wrapper>
-		);
-	}
+  render() {
+    const { color } = this.props;
+    return (
+      <Wrapper
+        bg={color}
+        ref={comp => this.tile = comp}
+        data-clipboard-text={color}
+      >
+        <Text color={invert(color)}>{this.state.text}</Text>
+      </Wrapper>
+    );
+  }
 }
 
-export default Tile
+export default Tile;
diff --git a/src/Tile/style.js b/src/Tile/style.js
@@ -16,9 +16,9 @@ export const Wrapper = styled.button`
 		width: 100%;
 		height: 10vh;
 	}
-`
+`;
 
 export const Text = styled.p`
 	font-size: 1.75em;
 	color: ${props => props.color};
-`
+`;
diff --git a/src/Tiles/index.js b/src/Tiles/index.js
@@ -1,21 +1,21 @@
 import React from 'react';
 // These are currently not officially exposed, so we import them directly
-import parseColor from 'polished/lib/internalHelpers/_parseColorString'
-import rgbToHsl from 'polished/lib/internalHelpers/_rgbToHsl'
-import hslToHex from 'polished/lib/internalHelpers/_hslToHex'
+import parseColor from 'polished/lib/internalHelpers/_parseColorString';
+import rgbToHsl from 'polished/lib/internalHelpers/_rgbToHsl';
+import hslToHex from 'polished/lib/internalHelpers/_hslToHex';
 
 import Tile from '../Tile';
 import { Wrapper } from './style';
 
 export default ({ color }) => {
-	const base = rgbToHsl(parseColor(color));
-	return (
-		<Wrapper>
-			<Tile color={hslToHex(base.hue, base.saturation, 0.1)} />
-			<Tile color={hslToHex(base.hue, base.saturation, 0.3)} />
-			<Tile color={hslToHex(base.hue, base.saturation, 0.5)} />
-			<Tile color={hslToHex(base.hue, base.saturation, 0.7)} />
-			<Tile color={hslToHex(base.hue, base.saturation, 0.9)} />
-		</Wrapper>
-	)
-}
+  const base = rgbToHsl(parseColor(color));
+  return (
+    <Wrapper>
+      <Tile color={hslToHex(base.hue, base.saturation, 0.1)} />
+      <Tile color={hslToHex(base.hue, base.saturation, 0.3)} />
+      <Tile color={hslToHex(base.hue, base.saturation, 0.5)} />
+      <Tile color={hslToHex(base.hue, base.saturation, 0.7)} />
+      <Tile color={hslToHex(base.hue, base.saturation, 0.9)} />
+    </Wrapper>
+  );
+};
diff --git a/src/Tiles/style.js b/src/Tiles/style.js
@@ -7,4 +7,4 @@ export const Wrapper = styled.div`
 	@media screen and (max-aspect-ratio: 2/3) {
 		flex-direction: column;
 	}
-`
+`;
diff --git a/src/global-styles.js b/src/global-styles.js
@@ -15,4 +15,4 @@ injectGlobal`
 	@media screen and (min-aspect-ratio: 2/3) {
 		overflow: hidden;
 	}
-`
+`;
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,4 @@ import ReactDOM from 'react-dom';
 import './global-styles';
 import App from './App';
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export const Wrapper = styled.div` @@
     	@media screen and (max-aspect-ratio: 2/3) {
     		flex-direction: column;
     	}
-    `
+    `;