stricter eslint rules

.eslintrc.yml

@@ -9,6 +9,28 @@ rules:
   react/no-direct-mutation-state: error
   react/no-string-refs: error
   react/jsx-handler-names: error
+  react/jsx-boolean-value:
+    - error
+    - never
+  react/sort-comp: error
+  react/jsx-no-bind:
+    - error
+    - ignoreRefs: true
+      allowArrowFunctions: false
+      allowBind: false
+  react/jsx-no-duplicate-props: error
+  react/jsx-key:
+    - error
+  react/sort-prop-types:
+    - error
+    - ignoreCase: true
+      callbacksLast: true
+      requiredFirst: true
+  react/jsx-sort-props:
+    - error
+    - callbacksLast: true
+      shorthandFirst: true
+      ignoreCase: true
   react/react-in-jsx-scope: off
   react/jsx-uses-react: off
   react/jsx-filename-extension: off

src/Button.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import { Component, PropTypes } from 'react'
 
 export default class Button extends Component {
@@ -54,7 +54,7 @@ export default class Button extends Component {
       className: customClassName,
       ...other,
     } = this.props
-    const className = classNames('uk-button', customClassName, {
+    const className = cx('uk-button', customClassName, {
       'uk-button-primary': primary,
       'uk-button-success': success,
       'uk-button-danger': danger,

src/Dropdown.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import { Component, PropTypes } from 'react'
 
 export default class Dropdown extends Component {
@@ -46,7 +46,7 @@ export default class Dropdown extends Component {
     this.setState({ isOpen: !this.state.isOpen })
   }
   render() {
-    const className = classNames('uk-button-dropdown', {
+    const className = cx('uk-button-dropdown', {
       'uk-open': this.state.isOpen,
     })
     return (

src/Select/CreateOption.js

@@ -1,8 +1,8 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import { PropTypes } from 'react'
 
 const CreateOption = ({ isFocused, addLabelText, children }) => (
-  <li className={classNames({ 'uk-active': isFocused })}>
+  <li className={cx({ 'uk-active': isFocused })}>
     <a>
       {addLabelText}&nbsp;
       <span className="uk-text-bold">

src/Select/Option.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import { Component, PropTypes } from 'react'
 
 export default class Option extends Component {
@@ -62,7 +62,7 @@ export default class Option extends Component {
 
   render() {
     const { option, instancePrefix, optionIndex } = this.props
-    let className = classNames(this.props.className, option.className)
+    let className = cx(this.props.className, option.className)
     return option.disabled ? (
       <li
         className={className}

src/Select/Value.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import { Component, PropTypes } from 'react'
 
 export default class Value extends Component {
@@ -91,7 +91,7 @@ export default class Value extends Component {
   render() {
     return (
       <div
-        className={classNames('uk-component-select__value', this.props.value.className)}
+        className={cx('uk-component-select__value', this.props.value.className)}
         style={this.props.value.style}
         title={this.props.value.title}
       >

src/Select/index.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import cx from 'classnames'
 import Input from 'react-input-autosize'
 import ReactDOM from 'react-dom'
 import { Component, PropTypes } from 'react'
@@ -730,10 +730,10 @@ export default class Select extends Component {
     if (this.props.inputRenderer) {
       return this.props.inputRenderer()
     } else {
-      let className = classNames('uk-component-select__input', this.props.inputProps.className)
+      let className = cx('uk-component-select__input', this.props.inputProps.className)
       const isOpen = !!this.state.isOpen
 
-      const ariaOwns = classNames({
+      const ariaOwns = cx({
         [this._instancePrefix + '-list']: isOpen,
         [this._instancePrefix + '-backspace-remove-message']: this.props.multi &&
                                                               !this.props.disabled &&
@@ -883,7 +883,7 @@ export default class Select extends Component {
           let isSelected = valueArray && valueArray.indexOf(option) > -1
           let isFocused = option === focusedOption
           let optionRef = isFocused ? 'focused' : null
-          let optionClass = classNames(this.props.optionClassName, {
+          let optionClass = cx(this.props.optionClassName, {
             'Select-option': true,
             'is-selected': isSelected,
             'uk-active': isFocused,
@@ -1013,7 +1013,7 @@ export default class Select extends Component {
     } else {
       focusedOption = this._focusedOption = null
     }
-    let className = classNames('uk-autocomplete uk-component-select', this.props.className, {
+    let className = cx('uk-autocomplete uk-component-select', this.props.className, {
       'uk-component-select--multi': this.props.multi,
       'uk-component-select--single': !this.props.multi,
       'uk-component-select--disabled': this.props.disabled,

test/Button.js

@@ -13,7 +13,7 @@ describe('<Button />', () => {
     expect(wrapper.hasClass('uk-active')).toBe(true)
   })
 
-  it('toggles classNames based on props', () => {
+  it('toggles css class names based on props', () => {
     const wrapper = shallow(<Button primary />)
 
     expect(wrapper.hasClass('uk-button-primary')).toBe(true)