Merge pull request #22 from markusguenther/migrate-to-prettier

Migrate to prettier

Author: markusguenther

.eslintrc

@@ -1,17 +1,26 @@
 {
-  "extends": "eslint-config-rackt",
+  "extends": "prettier",
   "env": {
     "browser": true,
     "mocha": true,
     "node": true
   },
+  "parser": "babel-eslint",
+  "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+          "jsx": true,
+          "modules": true,
+          "experimentalObjectRestSpread": true
+      }
+  },
   "rules": {
+    "prettier/prettier": "warn",
     "valid-jsdoc": 2,
     "react/jsx-uses-vars": 1,
     "react/jsx-uses-react": 1,
     "react/jsx-no-undef": 2
   },
-  "plugins": [
-    "react"
-  ]
+  "plugins": ["prettier", "react"]
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true
+}

package.json

@@ -28,19 +28,20 @@
     "@types/react": "^16.4.7",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.2.6",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "eslint": "^3.19.0",
-    "eslint-config-rackt": "^1.1.1",
-    "eslint-plugin-babel": "^4.1.1",
+    "eslint": "^5.3.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.10.0",
     "expect": "^1.18.0",
     "fbjs": "^0.8.17",
     "jsdom": "^9.8.3",
     "mocha": "^3.3.0",
+    "prettier": "^1.14.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
@@ -55,6 +56,7 @@
   "scripts": {
     "build": "babel src --out-dir lib",
     "lint": "eslint src test",
+    "lint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
     "prepublish": "rimraf lib && npm run build",
     "test": "mocha --compilers js:babel-core/register --recursive --reporter spec --require ./test/setup.js",
     "test:watch": "npm test -- --watch"
@@ -73,9 +75,7 @@
       "expect",
       "mocha",
       "sinon",
-      "jsdom",
-      "eslint",
-      "babel-eslint"
+      "jsdom"
     ]
   }
 }

src/components/themr.js

@@ -21,9 +21,10 @@ const DEFAULT_OPTIONS = {
   mapThemrProps: defaultMapThemrProps
 }
 
-const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
-  Symbol('THEMR_CONFIG') :
-  '__REACT_CSS_THEMR_CONFIG__'
+const THEMR_CONFIG =
+  typeof Symbol !== 'undefined'
+    ? Symbol('THEMR_CONFIG')
+    : '__REACT_CSS_THEMR_CONFIG__'
 
 /**
  * Themr decorator
@@ -32,7 +33,7 @@ const THEMR_CONFIG = typeof Symbol !== 'undefined' ?
  * @param {{}} [options] - Themr options
  * @returns {function(ThemedComponent:Function):Function} - ThemedComponent
  */
-export default (componentName, localTheme, options = {}) => (ThemedComponent) => {
+export default (componentName, localTheme, options = {}) => ThemedComponent => {
   const {
     composeTheme: optionComposeTheme,
     mapThemrProps: optionMapThemrProps
@@ -54,15 +55,21 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
    * @property {{wrappedInstance: *}} refs
    */
   class Themed extends Component {
-    static displayName = `Themed${(ThemedComponent.displayName || ThemedComponent.name || "Component")}`;
+    static displayName = `Themed${ThemedComponent.displayName ||
+      ThemedComponent.name ||
+      'Component'}`
 
     static contextTypes = {
       themr: PropTypes.object
     }
 
     static propTypes = {
       ...ThemedComponent.propTypes,
-      composeTheme: PropTypes.oneOf([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ]),
+      composeTheme: PropTypes.oneOf([
+        COMPOSE_DEEPLY,
+        COMPOSE_SOFTLY,
+        DONT_COMPOSE
+      ]),
       innerRef: PropTypes.func,
       theme: PropTypes.object,
       themeNamespace: PropTypes.string,
@@ -81,9 +88,10 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
     }
 
     getWrappedInstance() {
-      invariant(true,
+      invariant(
+        true,
         'DEPRECATED: To access the wrapped instance, you have to pass ' +
-        '{ innerRef: fn } and retrieve with a callback ref style.'
+          '{ innerRef: fn } and retrieve with a callback ref style.'
       )
 
       return this.refs.wrappedInstance
@@ -94,13 +102,21 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
       if (!themeNamespace) return theme
 
       if (themeNamespace && !theme) {
-        throw new Error('Invalid themeNamespace use in friendsofreactjs/react-css-themr. ' +
-        'themeNamespace prop should be used only with theme prop.')
+        throw new Error(
+          'Invalid themeNamespace use in friendsofreactjs/react-css-themr. ' +
+            'themeNamespace prop should be used only with theme prop.'
+        )
       }
 
       return Object.keys(theme)
         .filter(key => key.startsWith(themeNamespace))
-        .reduce((result, key) => ({ ...result, [removeNamespace(key, themeNamespace)]:  theme[key] }), {})
+        .reduce(
+          (result, key) => ({
+            ...result,
+            [removeNamespace(key, themeNamespace)]: theme[key]
+          }),
+          {}
+        )
     }
 
     getThemeNotComposed(props) {
@@ -118,14 +134,14 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
     getTheme(props) {
       return props.composeTheme === COMPOSE_SOFTLY
         ? {
-          ...this.getContextTheme(),
-          ...config.localTheme,
-          ...this.getNamespacedTheme(props)
-        }
+            ...this.getContextTheme(),
+            ...config.localTheme,
+            ...this.getNamespacedTheme(props)
+          }
         : themeable(
-          themeable(this.getContextTheme(), config.localTheme),
-          this.getNamespacedTheme(props)
-        )
+            themeable(this.getContextTheme(), config.localTheme),
+            this.getNamespacedTheme(props)
+          )
     }
 
     calcTheme(props) {
@@ -208,7 +224,9 @@ function merge(original = {}, mixin = {}) {
 
           default: {
             //can't merge an object with a non-object
-            throw new Error(`You are merging object ${key} with a non-object ${originalValue}`)
+            throw new Error(
+              `You are merging object ${key} with a non-object ${originalValue}`
+            )
           }
         }
         break
@@ -225,7 +243,9 @@ function merge(original = {}, mixin = {}) {
         switch (typeof originalValue) {
           case 'object': {
             //can't merge a non-object with an object
-            throw new Error(`You are merging non-object ${mixinValue} with an object ${key}, (can occur when using empty or :global only base theme stylesheet)`)
+            throw new Error(
+              `You are merging non-object ${mixinValue} with an object ${key}, (can occur when using empty or :global only base theme stylesheet)`
+            )
           }
 
           case 'undefined': {
@@ -240,9 +260,12 @@ function merge(original = {}, mixin = {}) {
 
           default: {
             //finally we can merge
-            result[key] = originalValue.split(' ')
+            result[key] = originalValue
+              .split(' ')
               .concat(mixinValue.split(' '))
-              .filter((item, pos, self) => self.indexOf(item) === pos && item !== '')
+              .filter(
+                (item, pos, self) => self.indexOf(item) === pos && item !== ''
+              )
               .join(' ')
             break
           }
@@ -263,7 +286,9 @@ function merge(original = {}, mixin = {}) {
  * @returns {undefined}
  */
 function validateComposeOption(composeTheme) {
-  if ([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ].indexOf(composeTheme) === -1) {
+  if (
+    [COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE].indexOf(composeTheme) === -1
+  ) {
     throw new Error(
       `Invalid composeTheme option for friendsofreactjs/react-css-themr. Valid composition options\
  are ${COMPOSE_DEEPLY}, ${COMPOSE_SOFTLY} and ${DONT_COMPOSE}. The given\
@@ -294,10 +319,10 @@ function removeNamespace(key, themeNamespace) {
  */
 function defaultMapThemrProps(ownProps, theme) {
   const {
-    composeTheme,   //eslint-disable-line no-unused-vars
+    composeTheme, //eslint-disable-line no-unused-vars
     innerRef,
     themeNamespace, //eslint-disable-line no-unused-vars
-    mapThemrProps,  //eslint-disable-line no-unused-vars
+    mapThemrProps, //eslint-disable-line no-unused-vars
     ...rest
   } = ownProps
 

test/components/ThemeProvider.spec.js

@@ -4,13 +4,12 @@ import PropTypes from 'prop-types'
 import TestUtils from 'react-dom/test-utils'
 import { ThemeProvider } from '../../src/index'
 
-
-before(function () {
+before(function() {
   /* eslint-disable no-console */
-  console.error = function () {}
+  console.error = function() {}
 })
 
-after(function () {
+after(function() {
   delete console.error
 })
 
@@ -33,23 +32,26 @@ describe('ThemeProvider', () => {
     ThemeProvider.propTypes = {}
 
     try {
-      expect(() => TestUtils.renderIntoDocument(
-        <ThemeProvider theme={theme}>
-          <div />
-        </ThemeProvider>
-      )).toNotThrow()
+      expect(() =>
+        TestUtils.renderIntoDocument(
+          <ThemeProvider theme={theme}>
+            <div />
+          </ThemeProvider>
+        )
+      ).toNotThrow()
 
-      expect(() => TestUtils.renderIntoDocument(
-        <ThemeProvider theme={theme}>
-          <div />
-          <div />
-        </ThemeProvider>
-      )).toThrow(/expected to receive a single React element child/)
+      expect(() =>
+        TestUtils.renderIntoDocument(
+          <ThemeProvider theme={theme}>
+            <div />
+            <div />
+          </ThemeProvider>
+        )
+      ).toThrow(/expected to receive a single React element child/)
 
-      expect(() => TestUtils.renderIntoDocument(
-        <ThemeProvider theme={theme}>
-        </ThemeProvider>
-      )).toThrow(/expected to receive a single React element child/)
+      expect(() =>
+        TestUtils.renderIntoDocument(<ThemeProvider theme={theme} />)
+      ).toThrow(/expected to receive a single React element child/)
     } finally {
       ThemeProvider.propTypes = propTypes
     }