Sjaakluthart/eslint

.eslintrc

@@ -5,7 +5,15 @@
     "comma-dangle": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,
-    "react/no-danger": 0
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/mouse-events-have-key-events": 0,
+    "react/no-danger": 0,
+    "jsx-a11y/label-has-for": [ 2,
+      { "components": [ "Label" ],
+        "required":
+        { "every": [ "id" ] },
+      "allowChildren": false }
+    ]
   },
   "globals": {
     "Image": true,

docs/src/components/app.jsx

@@ -41,14 +41,10 @@ class App extends Component {
     const { children } = this.props;
     const { media, menu } = this.state;
 
-    const childrenWithProps = React.Children.map(
-      children, child => React.cloneElement(
-        child,
-        {
-          setColor: this.setColor
-        }
-      )
-    );
+    const childrenWithProps = React.Children.map(children, child => React.cloneElement(
+      child,
+      { setColor: this.setColor }
+    ));
 
     const query = {
       medium: '(min-width: 768px)'

docs/src/components/commands/mentions.jsx

@@ -16,7 +16,7 @@ class CommandsDoc extends Component {
   }
 
   changeValue = (event) => {
-    const value = event.currentTarget.value;
+    const { value } = event.currentTarget;
 
     let valueToMatch = '';
 

docs/src/components/commands/slash-commands.jsx

@@ -16,7 +16,7 @@ class SlashCommands extends Component {
   }
 
   changeValue = (event) => {
-    const value = event.currentTarget.value;
+    const { value } = event.currentTarget;
 
     let valueToMatch = '';
 

docs/src/components/emoji-filter.jsx

@@ -26,7 +26,7 @@ class EmojiFilterDoc extends Component {
   }
 
   changeValue = (event) => {
-    const value = event.currentTarget.value;
+    const { value } = event.currentTarget;
 
     let valueToMatch = '';
 

docs/src/components/input.jsx

@@ -20,8 +20,6 @@ class InputDoc extends Component {
       value: 'Default value',
       valueMultiline: '',
       valueText: '',
-      valueNumber: '',
-      valueDate: '',
       valueMaxLength: '',
       valueError: 'Value'
     };

docs/src/components/list.jsx

@@ -72,9 +72,11 @@ const ListDoc = () => {
                 active={currentChannel === channel.name}
                 rightButton={
                   currentChannel === channel.name
-                  ? <Button iconButton onClick={() => {}}>
-                    <IconClose color={colors.white} />
-                  </Button>
+                  ? (
+                    <Button iconButton onClick={() => {}}>
+                      <IconClose color={colors.white} />
+                    </Button>
+                  )
                   : null
                 }
                 avatar={channel.avatar}

docs/src/components/message.jsx

@@ -144,7 +144,9 @@ class MessageDoc extends Component {
   selectAvatar = (event, avatar) => this.setState({ avatar });
 
   render() {
-    const { collapsed, fontSize, compact, iconMenu, edited, multiline, avatar } = this.state;
+    const {
+      collapsed, fontSize, compact, iconMenu, edited, multiline, avatar
+    } = this.state;
     const componentData = _.find(components, component => component.displayName === 'Message');
     const style = {
       paper: {

docs/src/components/profile.jsx

@@ -25,7 +25,8 @@ const ProfileDoc = () => {
     },
     profile: {
       width: '100%',
-      margin: '10px' }
+      margin: '10px'
+    }
   };
 
   return (

package.json

@@ -46,12 +46,12 @@
     "chai": "^3.5.0",
     "codecov": "^3.0.0",
     "enzyme": "^2.7.0",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-plugin-import": "^2.6.1",
-    "eslint-plugin-jsx-a11y": "^5.1.0",
+    "eslint": "^4.11.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-mocha": "^4.8.0",
-    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react": "^7.5.1",
     "mocha": "^3.2.0",
     "nyc": "^11.3.0",
     "prettier": "^1.7.4",

src/admin-badge/component.jsx

@@ -1,40 +1,36 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import getStyles from './get-styles';
 
-/** Used for displaying an user's Admin status */
-class AdminBadge extends Component {
-  static displayName = 'AdminBadge'
+const displayName = 'AdminBadge';
 
-  static propTypes = {
-    /** The badge's text */
-    text: PropTypes.node,
-    /** Override the styles of the root element */
-    style: PropTypes.instanceOf(Object),
-    /** Inverts color */
-    inverted: PropTypes.bool,
-    color: PropTypes.string.isRequired
-  }
+const propTypes = {
+  /** The badge's text */
+  text: PropTypes.node,
+  /** Override the styles of the root element */
+  style: PropTypes.instanceOf(Object),
+  /** Inverts color */
+  inverted: PropTypes.bool,
+  color: PropTypes.string.isRequired
+};
 
-  static defaultProps = {
-    style: {},
-    inverted: false,
-    text: 'Admin'
-  }
+const defaultProps = {
+  style: {},
+  inverted: false,
+  text: 'Admin'
+};
 
-  static contextTypes = {
-    color: PropTypes.string
-  }
+/** Used for displaying an user's Admin role */
+const AdminBadge = ({
+  text, inverted, style, color, ...custom
+}) => (
+  <span style={getStyles.root(color, inverted, style)} {...custom}>
+    {text}
+  </span>
+);
 
-  render() {
-    const { text, inverted, style, color, ...custom } = this.props;
-
-    return (
-      <span style={getStyles.root(color, inverted, style)} {...custom}>
-        {text}
-      </span>
-    );
-  }
-}
+AdminBadge.displayName = displayName;
+AdminBadge.propTypes = propTypes;
+AdminBadge.defaultProps = defaultProps;
 
 export default AdminBadge;

src/alert/component.jsx

@@ -10,31 +10,9 @@ import Button from '../button';
 import colors from '../settings/colors';
 import darken from '../internal/darken';
 
-const icons = {
-  success: <IconSuccess color={darken(colors.alert.success, 0.65)} />,
-  error: <IconError color={darken(colors.alert.error, 0.65)} />,
-  warning: <IconWarning color={darken(colors.alert.warning, 0.65)} />,
-  info: <IconInfo color={darken(colors.alert.info, 0.65)} />
-};
+const displayName = 'Alert';
 
-/** Four types of (system) messages for alerting your user */
-const Alert = ({ text, hideAlert, type, style, iconStyle, textStyle, buttonStyle, ...custom }) => (
-  <section style={getStyles.root(type, style)} {...custom}>
-    <div style={getStyles.icon(iconStyle)}>{icons[type]}</div>
-    <p style={getStyles.text(textStyle)}>{text}</p>
-    {
-      hideAlert
-      ? <Button iconButton onClick={hideAlert} style={getStyles.button(buttonStyle)}>
-        <IconClose color={darken(colors.alert[type], 0.65)} />
-      </Button>
-      : null
-    }
-  </section>
-);
-
-Alert.displayName = 'Alert';
-
-Alert.propTypes = {
+const propTypes = {
   /** Text to display */
   text: PropTypes.node.isRequired,
   /** Type of alert. One of the following: ["info", "success", "warning", "error"] */
@@ -55,12 +33,42 @@ Alert.propTypes = {
   hideAlert: PropTypes.func
 };
 
-Alert.defaultProps = {
+const defaultProps = {
   style: {},
   iconStyle: {},
   textStyle: {},
   buttonStyle: {},
   hideAlert: null
 };
 
+const icons = {
+  success: <IconSuccess color={darken(colors.alert.success, 0.65)} />,
+  error: <IconError color={darken(colors.alert.error, 0.65)} />,
+  warning: <IconWarning color={darken(colors.alert.warning, 0.65)} />,
+  info: <IconInfo color={darken(colors.alert.info, 0.65)} />
+};
+
+/** Four types of (system) messages for alerting your user */
+const Alert = ({
+  text, hideAlert, type, style, iconStyle, textStyle, buttonStyle, ...custom
+}) => (
+  <section style={getStyles.root(type, style)} {...custom}>
+    <div style={getStyles.icon(iconStyle)}>{icons[type]}</div>
+    <p style={getStyles.text(textStyle)}>{text}</p>
+    {
+      hideAlert
+      ? (
+        <Button iconButton onClick={hideAlert} style={getStyles.button(buttonStyle)}>
+          <IconClose color={darken(colors.alert[type], 0.65)} />
+        </Button>
+      )
+      : null
+    }
+  </section>
+);
+
+Alert.displayName = displayName;
+Alert.propTypes = propTypes;
+Alert.defaultProps = defaultProps;
+
 export default Alert;

src/app-header/component.jsx

@@ -2,41 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import getStyles from './get-styles';
 
-/** Your app's header */
-const AppHeader = (
-  {
-    text,
-    icon,
-    rightButton,
-    style,
-    iconStyle,
-    textStyle,
-    rightButtonStyle,
-    leftButton,
-    leftButtonStyle,
-    color,
-    ...custom
-  }
-) => (
-  <header style={getStyles.root(color, leftButton, rightButton, style)} {...custom}>
-    {
-      leftButton
-      ? <div style={getStyles.leftButton(leftButtonStyle)}>{leftButton}</div>
-      : null
-    }
-    {icon ? <div style={getStyles.icon(iconStyle)}>{icon}</div> : null}
-    {text ? <h1 style={getStyles.text(textStyle)}>{text}</h1> : null}
-    {
-      rightButton
-      ? <div style={getStyles.rightButton(rightButtonStyle)}>{rightButton}</div>
-      : null
-    }
-  </header>
-);
+const displayName = 'AppHeader';
 
-AppHeader.displayName = 'AppHeader';
-
-AppHeader.propTypes = {
+const propTypes = {
   /** Title text (your app's name) */
   text: PropTypes.node,
   /** Icon (your app's icon) */
@@ -58,7 +26,7 @@ AppHeader.propTypes = {
   color: PropTypes.string.isRequired
 };
 
-AppHeader.defaultProps = {
+const defaultProps = {
   text: null,
   style: {},
   textStyle: {},
@@ -70,4 +38,38 @@ AppHeader.defaultProps = {
   leftButtonStyle: {}
 };
 
+/** Your app's header */
+const AppHeader = ({
+  text,
+  icon,
+  rightButton,
+  style,
+  iconStyle,
+  textStyle,
+  rightButtonStyle,
+  leftButton,
+  leftButtonStyle,
+  color,
+  ...custom
+}) => (
+  <header style={getStyles.root(color, leftButton, rightButton, style)} {...custom}>
+    {
+      leftButton
+      ? <div style={getStyles.leftButton(leftButtonStyle)}>{leftButton}</div>
+      : null
+    }
+    {icon ? <div style={getStyles.icon(iconStyle)}>{icon}</div> : null}
+    {text ? <h1 style={getStyles.text(textStyle)}>{text}</h1> : null}
+    {
+      rightButton
+      ? <div style={getStyles.rightButton(rightButtonStyle)}>{rightButton}</div>
+      : null
+    }
+  </header>
+);
+
+AppHeader.displayName = displayName;
+AppHeader.propTypes = propTypes;
+AppHeader.defaultProps = defaultProps;
+
 export default AppHeader;