Use prettier

Author: diegohaz

.eslintrc

@@ -2,7 +2,9 @@
   "parser": "babel-eslint",
   "extends": [
     "airbnb-base",
-    "plugin:flowtype/recommended"
+    "plugin:flowtype/recommended",
+    "plugin:prettier/recommended",
+    "prettier/flowtype"
   ],
   "plugins": [
     "flowtype",
@@ -12,8 +14,6 @@
     "jest": true
   },
   "rules": {
-    "semi": [2, never],
-    "comma-dangle": 0,
-    "flowtype-errors/show-errors": 2
+    "flowtype-errors/show-errors": "error"
   }
 }

README.md

@@ -18,18 +18,18 @@ Useful interpolated functions for [styled-components](https://github.com/styled-
 Play with it on [WebpackBin](https://www.webpackbin.com/bins/-Kel3KgddZSrD5oK0fIk)
 
 ```jsx
-import styled, { css } from 'styled-components'
-import { prop, ifProp, switchProp } from 'styled-tools'
+import styled, { css } from "styled-components";
+import { prop, ifProp, switchProp } from "styled-tools";
 
 const Button = styled.button`
-  color: ${prop('color', 'red')};
-  font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
-  background-color: ${switchProp('theme', {
-    dark: 'blue', 
-    darker: 'mediumblue', 
-    darkest: 'darkblue' 
+  color: ${prop("color", "red")};
+  font-size: ${ifProp({ size: "large" }, "20px", "14px")};
+  background-color: ${switchProp("theme", {
+    dark: "blue", 
+    darker: "mediumblue", 
+    darkest: "darkblue" 
   })};
-`
+`;
 
 // renders with color: blue
 <Button color="blue" />
@@ -48,31 +48,31 @@ A more complex example:
 
 ```jsx
 const Button = styled.button`
-  color: ${prop('theme.colors.white', '#fff')};
-  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
-  background-color: ${prop('theme.colors.black', '#000')};
+  color: ${prop("theme.colors.white", "#fff")};
+  font-size: ${ifProp({ size: "large" }, prop("theme.sizes.lg", "20px"), prop("theme.sizes.md", "14px"))};
+  background-color: ${prop("theme.colors.black", "#000")};
   
-  ${switchProp('kind', {
+  ${switchProp("kind", {
     dark: css`
-      background-color: ${prop('theme.colors.blue', 'blue')};
-      border: 1px solid ${prop('theme.colors.blue', 'blue')};
+      background-color: ${prop("theme.colors.blue", "blue")};
+      border: 1px solid ${prop("theme.colors.blue", "blue")};
     `,
     darker: css`
-      background-color: ${prop('theme.colors.mediumblue', 'mediumblue')};
-      border: 1px solid ${prop('theme.colors.mediumblue', 'mediumblue')};
+      background-color: ${prop("theme.colors.mediumblue", "mediumblue")};
+      border: 1px solid ${prop("theme.colors.mediumblue", "mediumblue")};
     `,
     darkest: css`
-      background-color: ${prop('theme.colors.darkblue', 'darkblue')};
-      border: 1px solid ${prop('theme.colors.darkblue', 'darkblue')};
-    `,
+      background-color: ${prop("theme.colors.darkblue", "darkblue")};
+      border: 1px solid ${prop("theme.colors.darkblue", "darkblue")};
+    `
   })}
   
-  ${ifProp('disabled', css`
-    background-color: ${prop('theme.colors.gray', '#999')};
-    border-color: ${prop('theme.colors.gray', '#999')};
+  ${ifProp("disabled", css`
+    background-color: ${prop("theme.colors.gray", "#999")};
+    border-color: ${prop("theme.colors.gray", "#999")};
     pointer-events: none;
   `)}
-`
+`;
 ```
 
 ## API
@@ -101,8 +101,8 @@ Returns the value of `props[path]` or `defaultValue`
 
 ```javascript
 const Button = styled.button`
- color: ${prop('color', 'red')};
-`
+ color: ${prop("color", "red")};
+`;
 ```
 
 Returns **any** 
@@ -121,15 +121,15 @@ Returns `pass` if prop is truthy. Otherwise returns `fail`
 
 ```javascript
 // usage with styled-theme
-import styled from 'styled-components'
-import { ifProp } from 'styled-tools'
-import { palette } from 'styled-theme'
+import styled from "styled-components";
+import { ifProp } from "styled-tools";
+import { palette } from "styled-theme";
 
 const Button = styled.button`
-  background-color: ${ifProp('transparent', 'transparent', palette(0))};
-  color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
-  font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
-`
+  background-color: ${ifProp("transparent", "transparent", palette(0))};
+  color: ${ifProp(["transparent", "accent"], palette("secondary", 0))};
+  font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
+`;
 ```
 
 Returns **any** 
@@ -147,23 +147,22 @@ Calls a function passing properties values as arguments.
 
 ```javascript
 // example with polished
-import styled from 'styled-components'
-import { darken } from 'polished'
-import { withProp, prop } from 'styled-tools'
+import styled from "styled-components";
+import { darken } from "polished";
+import { withProp, prop } from "styled-tools";
 
 const Button = styled.button`
-  border-color: ${withProp(prop('theme.primaryColor', 'blue'), darken(0.5))};
-  font-size: ${withProp('theme.size', size => `${size + 1}px`)};
-  background: ${withProp(['foo', 'bar'], (foo, bar) => `${foo}${bar}`)};
-`
+  border-color: ${withProp(prop("theme.primaryColor", "blue"), darken(0.5))};
+  font-size: ${withProp("theme.size", size => `${size + 1}px`)};
+  background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
+`;
 ```
 
 Returns **any** 
 
 ### switchProp
 
 Switches on a given prop. Returns the value or function for a given prop value.
-Otherwise returns `defaultValue`
 
 **Parameters**
 
@@ -173,26 +172,26 @@ Otherwise returns `defaultValue`
 **Examples**
 
 ```javascript
-import styled, { css } from 'styled-components'
-import { switchProp, prop } from 'styled-tools'
+import styled, { css } from "styled-components";
+import { switchProp, prop } from "styled-tools";
 
 const Button = styled.button`
- font-size: ${switchProp(prop('size', 'medium'), {
-   small: prop('theme.sizes.sm', '12px'),
-   medium: prop('theme.sizes.md', '16px'),
-   large: prop('theme.sizes.lg', '20px'),
+ font-size: ${switchProp(prop("size", "medium"), {
+   small: prop("theme.sizes.sm", "12px"),
+   medium: prop("theme.sizes.md", "16px"),
+   large: prop("theme.sizes.lg", "20px")
  }};
- ${switchProp('theme.kind', {
+ ${switchProp("theme.kind", {
    light: css`
      color: LightBlue;
    `,
    dark: css`
      color: DarkBlue;
-   `,
+   `
  })}
-`
+`;
 
-<Button size="large" theme={{ kind: 'light' }} />
+<Button size="large" theme={{ kind: "light" }} />
 ```
 
 Returns **any** 

package.json

@@ -63,14 +63,17 @@
     "documentation": "^6.1.0",
     "eslint": "^4.15.0",
     "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-flowtype": "^2.29.2",
     "eslint-plugin-flowtype-errors": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "flow-bin": "^0.69.0",
     "flow-typed": "^2.0.0",
     "jest-cli": "^22.0.6",
     "npm-watch": "^0.3.0",
     "opn-cli": "^3.1.0",
+    "prettier": "^1.11.1",
     "rimraf": "^2.6.2"
   }
 }

src/ifProp.js

@@ -1,40 +1,42 @@
 // @flow
-import get from 'lodash/get'
-import at from 'lodash/at'
-import values from 'lodash/values'
-import difference from 'lodash/difference'
-import type { Needle } from '.'
+import get from "lodash/get";
+import at from "lodash/at";
+import values from "lodash/values";
+import difference from "lodash/difference";
+import type { Needle } from ".";
 
 /**
  * Returns `pass` if prop is truthy. Otherwise returns `fail`
  * @example
  * // usage with styled-theme
- * import styled from 'styled-components'
- * import { ifProp } from 'styled-tools'
- * import { palette } from 'styled-theme'
+ * import styled from "styled-components";
+ * import { ifProp } from "styled-tools";
+ * import { palette } from "styled-theme";
  *
  * const Button = styled.button`
- *   background-color: ${ifProp('transparent', 'transparent', palette(0))};
- *   color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
- *   font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
- * `
+ *   background-color: ${ifProp("transparent", "transparent", palette(0))};
+ *   color: ${ifProp(["transparent", "accent"], palette("secondary", 0))};
+ *   font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
+ * `;
  */
-const ifProp = (test: Needle | string[] | Object, pass?: any, fail?: any): any => (
-  (props: Object = {}): any => {
-    let result
-    if (Array.isArray(test)) {
-      result = !at(props, test).filter(value => !value).length
-    } else if (typeof test === 'function') {
-      result = test(props)
-    } else if (typeof test === 'object') {
-      const testKeys = Object.keys(test)
-      const testValues = values(test)
-      result = !difference(at(props, testKeys), testValues).length
-    } else {
-      result = get(props, test)
-    }
-    return result ? pass : fail
+const ifProp = (
+  test: Needle | string[] | Object,
+  pass?: any,
+  fail?: any
+): any => (props: Object = {}): any => {
+  let result;
+  if (Array.isArray(test)) {
+    result = !at(props, test).filter(value => !value).length;
+  } else if (typeof test === "function") {
+    result = test(props);
+  } else if (typeof test === "object") {
+    const testKeys = Object.keys(test);
+    const testValues = values(test);
+    result = !difference(at(props, testKeys), testValues).length;
+  } else {
+    result = get(props, test);
   }
-)
+  return result ? pass : fail;
+};
 
-export default ifProp
+export default ifProp;

src/index.js

@@ -1,4 +1,4 @@
-export ifProp from './ifProp'
-export prop from './prop'
-export switchProp from './switchProp'
-export withProp from './withProp'
+export ifProp from "./ifProp";
+export prop from "./prop";
+export switchProp from "./switchProp";
+export withProp from "./withProp";

src/prop.js

@@ -1,15 +1,14 @@
 // @flow
-import get from 'lodash/get'
+import get from "lodash/get";
 
 /**
  * Returns the value of `props[path]` or `defaultValue`
  * @example
  * const Button = styled.button`
- *  color: ${prop('color', 'red')};
- * `
+ *  color: ${prop("color", "red")};
+ * `;
  */
-const prop = (path: string, defaultValue?: any): any => (
-  (props: Object = {}) => get(props, path, defaultValue)
-)
+const prop = (path: string, defaultValue?: any): any => (props: Object = {}) =>
+  get(props, path, defaultValue);
 
-export default prop
+export default prop;

src/switchProp.js

@@ -1,35 +1,37 @@
 // @flow
-import get from 'lodash/get'
-import type { Needle } from '.'
+import get from "lodash/get";
+import type { Needle } from ".";
 
 /**
  * Switches on a given prop. Returns the value or function for a given prop value.
- * Otherwise returns `defaultValue`
  * @example
- * import styled, { css } from 'styled-components'
- * import { switchProp, prop } from 'styled-tools'
+ * import styled, { css } from "styled-components";
+ * import { switchProp, prop } from "styled-tools";
  *
  * const Button = styled.button`
- *  font-size: ${switchProp(prop('size', 'medium'), {
- *    small: prop('theme.sizes.sm', '12px'),
- *    medium: prop('theme.sizes.md', '16px'),
- *    large: prop('theme.sizes.lg', '20px'),
+ *  font-size: ${switchProp(prop("size", "medium"), {
+ *    small: prop("theme.sizes.sm", "12px"),
+ *    medium: prop("theme.sizes.md", "16px"),
+ *    large: prop("theme.sizes.lg", "20px")
  *  }};
- *  ${switchProp('theme.kind', {
+ *  ${switchProp("theme.kind", {
  *    light: css`
  *      color: LightBlue;
  *    `,
  *    dark: css`
  *      color: DarkBlue;
- *    `,
+ *    `
  *  })}
- * `
+ * `;
  *
- * <Button size="large" theme={{ kind: 'light' }} />
+ * <Button size="large" theme={{ kind: "light" }} />
  */
-const switchProp = (needle: Needle, switches: Object): any => (props: Object = {}): any => {
-  const value = typeof needle === 'function' ? needle(props) : get(props, needle)
-  return get(switches, value)
-}
+const switchProp = (needle: Needle, switches: Object): any => (
+  props: Object = {}
+): any => {
+  const value =
+    typeof needle === "function" ? needle(props) : get(props, needle);
+  return get(switches, value);
+};
 
-export default switchProp
+export default switchProp;