diff --git a/.eslintrc b/.eslintrc
index aa67535..49666a5 100644
--- a/.eslintrc
+++ b/.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"]
}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0e5c1db
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "trailingComma": "none",
+ "semi": false,
+ "singleQuote": true
+}
diff --git a/package.json b/package.json
index 3e5919f..b1fe7b8 100644
--- a/package.json
+++ b/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"
]
}
}
diff --git a/src/components/themr.js b/src/components/themr.js
index 305fcef..622580c 100644
--- a/src/components/themr.js
+++ b/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,7 +55,9 @@ 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
@@ -62,7 +65,11 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
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
diff --git a/test/components/ThemeProvider.spec.js b/test/components/ThemeProvider.spec.js
index da4df5c..809b70e 100644
--- a/test/components/ThemeProvider.spec.js
+++ b/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(
-