From 7c43f935a10e0e125ba2fcd47868619c8b9303f7 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Thu, 22 Oct 2015 01:31:17 +0200
Subject: [PATCH] Babel to stage 2 and remove decorators

---
 .babelrc                                  |   4 +-
 components/autocomplete/index.jsx         | 146 +++++++++++-----------
 components/button/index.jsx               |   8 +-
 components/card/index.jsx                 |  22 ++--
 components/checkbox/index.jsx             |  28 ++---
 components/date_picker/calendar/day.jsx   |  13 +-
 components/date_picker/calendar/index.jsx |  46 +++----
 components/date_picker/calendar/month.jsx |  13 +-
 components/date_picker/dialog.jsx         |  32 ++---
 components/date_picker/index.jsx          |  24 ++--
 components/dialog/index.jsx               |   6 +-
 components/drawer/index.jsx               |  10 +-
 components/dropdown/index.jsx             |  23 ++--
 components/form/index.jsx                 |  14 +--
 components/input/index.jsx                |  10 +-
 components/link/index.jsx                 |   2 +-
 components/list/item.jsx                  |  14 +--
 components/list/list.jsx                  |   6 +-
 components/menu/icon_menu.jsx             |  14 +--
 components/menu/menu.jsx                  |  26 ++--
 components/menu/menu_item.jsx             |  14 +--
 components/progress_bar/index.jsx         |   6 +-
 components/radio/radio_button.jsx         |  22 ++--
 components/radio/radio_group.jsx          |  10 +-
 components/ripple/index.jsx               |  18 +--
 components/slider/index.jsx               |  80 ++++++------
 components/snackbar/index.jsx             |  11 +-
 components/switch/index.jsx               |  22 ++--
 components/tabs/tab.jsx                   |   6 +-
 components/tabs/tabs.jsx                  |  12 +-
 components/time_picker/clock/face.jsx     |   8 +-
 components/time_picker/clock/hand.jsx     |  30 ++---
 components/time_picker/clock/hours.jsx    |  28 ++---
 components/time_picker/clock/index.jsx    |  40 +++---
 components/time_picker/clock/minutes.jsx  |  24 ++--
 components/time_picker/dialog.jsx         |  42 +++----
 components/time_picker/index.jsx          |  14 +--
 package.json                              |   2 +-
 spec/components/autocomplete.jsx          |  10 +-
 spec/components/card.jsx                  |  14 +--
 spec/components/checkbox.jsx              |  18 +--
 spec/components/dialog.jsx                |  12 +-
 spec/components/drawer.jsx                |  16 +--
 spec/components/dropdown.jsx              |  18 +--
 spec/components/form.jsx                  |  18 +--
 spec/components/icon_menu.jsx             |  22 ++--
 spec/components/menu.jsx                  |  14 +--
 spec/components/navigation.jsx            |   6 +-
 spec/components/progress.jsx              |  18 +--
 spec/components/radio.jsx                 |  18 +--
 spec/components/snackbar.jsx              |  14 +--
 spec/components/switch.jsx                |  12 +-
 52 files changed, 527 insertions(+), 533 deletions(-)

diff --git a/.babelrc b/.babelrc
index 15d27ad9..1c6ca3a6 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
 {
-  "stage": 0,
-  "loose": "all"
+  "stage": 2,
+  "optional": ["es7.classProperties"]
 }
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx
index ce78e245..7d1aab65 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
-import utils from '../utils';
 import Input from '../input';
 import style from './style';
+import utils from '../utils';
 
-@autobind
-export default class Autocomplete extends React.Component {
+class Autocomplete extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     dataSource: React.PropTypes.any,
@@ -51,14 +49,14 @@ export default class Autocomplete extends React.Component {
     this.refs.input.setValue(state.query);
   }
 
-  handleQueryChange () {
+  handleQueryChange = () => {
     const query = this.refs.input.getValue();
     if (this.state.query !== query) {
       this.setState({query: query});
     }
-  }
+  };
 
-  handleKeyPress (event) {
+  handleKeyPress = (event) => {
     if (event.which === 13 && this.state.active) {
       this._selectOption(this.state.active);
     }
@@ -70,9 +68,9 @@ export default class Autocomplete extends React.Component {
       if (index >= suggestionsKeys.length) index = 0;
       this.setState({active: suggestionsKeys[index]});
     }
-  }
+  };
 
-  handleFocus () {
+  handleFocus = () => {
     let client = event.target.getBoundingClientRect();
     let screen_height = window.innerHeight || document.documentElement.offsetHeight;
 
@@ -82,23 +80,79 @@ export default class Autocomplete extends React.Component {
       up: client.top > ((screen_height / 2) + client.height),
       focus: true
     });
-  }
+  };
 
-  handleBlur () {
+  handleBlur = () => {
     if (this.state.focus) this.setState({focus: false});
-  }
+  };
 
-  handleHover (event) {
+  handleHover = (event) => {
     this.setState({active: event.target.getAttribute('id')});
-  }
+  };
 
-  handleSelect (event) {
+  handleSelect = (event) => {
     utils.events.pauseEvent(event);
     this._selectOption(event.target.getAttribute('id'));
+  };
+
+  handleUnselect = (event) => {
+    this._unselectOption(event.target.getAttribute('id'));
+  };
+
+  renderSelected () {
+    if (this.props.multiple) {
+      return (
+        <ul className={style.values} onClick={this.handleUnselect}>
+          {[...this.state.values].map(([key, value]) => {
+            return (<li className={style.value} key={key} id={key}>{value}</li>);
+          })}
+        </ul>
+      );
+    }
   }
 
-  handleUnselect (event) {
-    this._unselectOption(event.target.getAttribute('id'));
+  renderSuggestions () {
+    return [...this._getSuggestions()].map(([key, value]) => {
+      let className = style.suggestion;
+      if (this.state.active === key) className += ` ${style.active}`;
+      return <li id={key} key={key} className={className}>{value}</li>;
+    });
+  }
+
+  render () {
+    let className = style.root;
+    if (this.props.className) className += ` ${this.props.className}`;
+    if (this.state.focus) className += ` ${style.focus}`;
+
+    let suggestionsClassName = style.suggestions;
+    if (this.state.up) suggestionsClassName += ` ${style.up}`;
+    let suggestionsStyle = {width: this.state.width};
+
+    return (
+      <div data-react-toolbox='autocomplete' className={className}>
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
+        {this.renderSelected()}
+        <Input
+          ref='input'
+          {...this.props}
+          label=''
+          value=''
+          className={style.input}
+          onBlur={this.handleBlur}
+          onChange={this.handleQueryChange}
+          onFocus={this.handleFocus}
+          onKeyUp={this.handleKeyPress} />
+        <ul
+          ref='suggestions'
+          className={suggestionsClassName}
+          onMouseDown={this.handleSelect}
+          onMouseOver={this.handleHover}
+          style={suggestionsStyle}
+        >
+          {this.renderSuggestions()}
+        </ul>
+      </div>
+    );
   }
 
   _indexDataSource (data = {}) {
@@ -161,60 +215,6 @@ export default class Autocomplete extends React.Component {
   setError (data) {
     this.input.setError(data);
   }
-
-  renderSelected () {
-    if (this.props.multiple) {
-      return (
-        <ul className={style.values} onClick={this.handleUnselect}>
-          {[...this.state.values].map(([key, value]) => {
-            return (<li className={style.value} key={key} id={key}>{value}</li>);
-          })}
-        </ul>
-      );
-    }
-  }
-
-  renderSuggestions () {
-    return [...this._getSuggestions()].map(([key, value]) => {
-      let className = style.suggestion;
-      if (this.state.active === key) className += ` ${style.active}`;
-      return <li id={key} key={key} className={className}>{value}</li>;
-    });
-  }
-
-  render () {
-    let className = style.root;
-    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.state.focus) className += ` ${style.focus}`;
-
-    let suggestionsClassName = style.suggestions;
-    if (this.state.up) suggestionsClassName += ` ${style.up}`;
-    let suggestionsStyle = {width: this.state.width};
-
-    return (
-      <div data-react-toolbox='autocomplete' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
-        {this.renderSelected()}
-        <Input
-          ref='input'
-          {...this.props}
-          label=''
-          value=''
-          className={style.input}
-          onBlur={this.handleBlur}
-          onChange={this.handleQueryChange}
-          onFocus={this.handleFocus}
-          onKeyUp={this.handleKeyPress} />
-        <ul
-          ref='suggestions'
-          className={suggestionsClassName}
-          onMouseDown={this.handleSelect}
-          onMouseOver={this.handleHover}
-          style={suggestionsStyle}
-        >
-          {this.renderSuggestions()}
-        </ul>
-      </div>
-    );
-  }
 }
+
+export default Autocomplete;
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 86dfe467..9554894c 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
 import style from './style.scss';
 import events from '../utils/events';
 
-@autobind
-export default class Button extends React.Component {
+class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -31,7 +29,7 @@ export default class Button extends React.Component {
     ripple: true
   };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     events.pauseEvent(event);
     this.refs.ripple.start(event);
   }
@@ -60,3 +58,5 @@ export default class Button extends React.Component {
     );
   }
 }
+
+export default Button;
diff --git a/components/card/index.jsx b/components/card/index.jsx
index d1d8b13d..406cbd4f 100644
--- a/components/card/index.jsx
+++ b/components/card/index.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Navigation from '../navigation';
 import Ripple from '../ripple';
 import style from './style.scss';
 
-@autobind
-export default class Card extends React.Component {
+class Card extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     color: React.PropTypes.string,
@@ -23,17 +21,13 @@ export default class Card extends React.Component {
     type: 'default'
   };
 
-  state = {
-    loading: this.props.loading
-  };
-
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (this.props.onClick) {
       event.preventDefault();
       this.refs.ripple.start(event);
       this.props.onClick(event, this);
     }
-  }
+  };
 
   renderTitle () {
     let styleFigure = {}, styleOverflow = {};
@@ -68,7 +62,7 @@ export default class Card extends React.Component {
     if (this.props.onClick) className += ` ${style.touch}`;
     if (this.props.image || this.props.color) className += ` ${style.contrast}`;
     if (this.props.color) className += ` ${style.color}`;
-    if (this.state.loading) className += ` ${style.loading}`;
+    if (this.props.loading) className += ` ${style.loading}`;
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
@@ -83,14 +77,12 @@ export default class Card extends React.Component {
         <Ripple
           ref='ripple'
           className={style.ripple}
-          loading={this.state.loading}
+          loading={this.props.loading}
           spread={2.5}
         />
       </div>
     );
   }
-
-  loading (value) {
-    this.setState({loading: value});
-  }
 }
+
+export default Card;
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index 570efa20..e629b149 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Ripple from '../ripple';
-import style from './style';
 import events from '../utils/events';
+import style from './style';
 
-@autobind
-export default class Checkbox extends React.Component {
+class Checkbox extends React.Component {
   static propTypes = {
     checked: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -27,31 +25,31 @@ export default class Checkbox extends React.Component {
     checked: this.props.checked
   };
 
-  handleChange (event) {
+  handleChange = (event) => {
     this.setState({checked: !this.state.checked}, () => {
       if (this.props.onChange) this.props.onChange(event, this);
     });
-  }
+  };
 
-  handleClick (event) {
+  handleClick = (event) => {
     events.pauseEvent(event);
     if (!this.props.disabled) this.handleChange(event);
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (!this.props.disabled) this.refs.ripple.start(event);
-  }
+  };
 
-  handleInputClick (event) {
+  handleInputClick = (event) => {
     events.pauseEvent(event);
-  }
+  };
 
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
+    if (this.state.checked) checkboxClassName += ` ${style.checked}`;
     if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
     if (this.props.className) fieldClassName += ` ${this.props.className}`;
-    if (this.state.checked) checkboxClassName += ` ${style.checked}`;
 
     return (
       <label
@@ -63,8 +61,8 @@ export default class Checkbox extends React.Component {
           {...this.props}
           ref='input'
           type='checkbox'
-          checked={this.state.checked}
           className={style.input}
+          checked={this.state.checked}
           onChange={this.handleChange}
           onClick={this.handleInputClick}
         />
@@ -92,3 +90,5 @@ export default class Checkbox extends React.Component {
     this.setState({checked: value});
   }
 }
+
+export default Checkbox;
diff --git a/components/date_picker/calendar/day.jsx b/components/date_picker/calendar/day.jsx
index 6dcc6ba9..f609946f 100644
--- a/components/date_picker/calendar/day.jsx
+++ b/components/date_picker/calendar/day.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import time from '../../utils/time';
 import style from './style';
 
-@autobind
-export default class Day extends React.Component {
+class Day extends React.Component {
   static propTypes = {
     day: React.PropTypes.number,
     onClick: React.PropTypes.func,
@@ -28,10 +26,15 @@ export default class Day extends React.Component {
   }
 
   render () {
+    const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
     return (
-      <div className={this.isSelected() ? `${style.day} ${style.active}` : style.day} style={this.dayStyle()}>
-          <span onClick={this.props.onClick}>{this.props.day}</span>
+      <div className={className} style={this.dayStyle()}>
+          <span onClick={this.props.onClick}>
+            {this.props.day}
+          </span>
       </div>
     );
   }
 }
+
+export default Day;
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/index.jsx
index af9a29f7..61ea936e 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
-import utils from '../../utils';
 import Month from './month';
+import utils from '../../utils';
 import style from './style';
 
-@autobind
-export default class Calendar extends React.Component {
+class Calendar extends React.Component {
   static propTypes = {
     display: React.PropTypes.oneOf(['months', 'years']),
     onChange: React.PropTypes.func,
@@ -33,18 +31,6 @@ export default class Calendar extends React.Component {
     }
   }
 
-  onDayClick (day) {
-    let newDate = utils.time.setDay(this.state.viewDate, day);
-    this.setState({selectedDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
-  }
-
-  onYearClick (year) {
-    let newDate = utils.time.setYear(this.state.selectedDate, year);
-    this.setState({selectedDate: newDate, viewDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
-  }
-
   scrollToActive () {
     this.refs.years.scrollTop =
       this.refs.activeYear.offsetTop -
@@ -52,15 +38,27 @@ export default class Calendar extends React.Component {
       this.refs.activeYear.offsetHeight / 2;
   }
 
-  incrementViewMonth () {
+  handleDayClick = (day) => {
+    let newDate = utils.time.setDay(this.state.viewDate, day);
+    this.setState({selectedDate: newDate});
+    if (this.props.onChange) this.props.onChange(newDate);
+  };
+
+  handleYearClick = (year) => {
+    let newDate = utils.time.setYear(this.state.selectedDate, year);
+    this.setState({selectedDate: newDate, viewDate: newDate});
+    if (this.props.onChange) this.props.onChange(newDate);
+  };
+
+  incrementViewMonth = () => {
     this.refs.rippleRight.start(event);
     this.setState({
       direction: 'right',
       viewDate: utils.time.addMonths(this.state.viewDate, 1)
     });
-  }
+  };
 
-  decrementViewMonth () {
+  decrementViewMonth = () => {
     this.refs.rippleLeft.start(event);
     this.setState({
       direction: 'left',
@@ -72,20 +70,20 @@ export default class Calendar extends React.Component {
     let props = {
       className: year === this.state.viewDate.getFullYear() ? style.active : '',
       key: year,
-      onClick: this.onYearClick.bind(this, year)
+      onClick: this.handleYearClick.bind(this, year)
     };
 
     if (year === this.state.viewDate.getFullYear()) {
       props.ref = 'activeYear';
     }
 
-    return (<li {...props}>{ year }</li>);
+    return <li {...props}>{ year }</li>;
   }
 
   renderYears () {
     return (
       <ul ref="years" className={style.years}>
-        { utils.range(1900, 2100).map(i => { return this.renderYear(i); })}
+        { utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
       </ul>
     );
   }
@@ -105,7 +103,7 @@ export default class Calendar extends React.Component {
             key={this.state.viewDate.getMonth()}
             viewDate={this.state.viewDate}
             selectedDate={this.state.selectedDate}
-            onDayClick={this.onDayClick} />
+            onDayClick={this.handleDayClick} />
         </CSSTransitionGroup>
       </div>
     );
@@ -119,3 +117,5 @@ export default class Calendar extends React.Component {
     );
   }
 }
+
+export default Calendar;
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index d7e9aefd..2afbc71a 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import utils from '../../utils';
 import Day from './day';
 import style from './style';
 
-@autobind
-export default class Month extends React.Component {
+class Month extends React.Component {
   static propTypes = {
     onDayClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
   };
 
-  handleDayClick (day) {
+  handleDayClick = (day) => {
     if (this.props.onDayClick) this.props.onDayClick(day);
-  }
+  };
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
@@ -40,7 +38,8 @@ export default class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { utils.time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear() }
+          { utils.time.getFullMonth(this.props.viewDate)}
+          { this.props.viewDate.getFullYear() }
         </span>
         <div className={style.week}>{ this.renderWeeks() }</div>
         <div className={style.days}>{ this.renderDays() }</div>
@@ -48,3 +47,5 @@ export default class Month extends React.Component {
     );
   }
 }
+
+export default Month;
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/dialog.jsx
index d2c530c4..5752fa70 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import time from '../utils/time';
 import Calendar from './calendar';
 import Dialog from '../dialog';
 
-@autobind
-export default class CalendarDialog extends React.Component {
+class CalendarDialog extends React.Component {
   static propTypes = {
     initialDate: React.PropTypes.object,
     onDateSelected: React.PropTypes.func
@@ -20,14 +18,22 @@ export default class CalendarDialog extends React.Component {
     date: this.props.initialDate,
     display: 'months',
     actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onDateCancel },
-      { label: 'Ok', className: style.button, onClick: this.onDateSelected }
+      { label: 'Cancel', className: style.button, onClick: this.onDateCancel.bind(this) },
+      { label: 'Ok', className: style.button, onClick: this.onDateSelected.bind(this) }
     ]
   };
 
-  onCalendarChange (date) {
+  handleCalendarChange = (date) => {
     this.setState({date: date, display: 'months'});
-  }
+  };
+
+  displayMonths = () => {
+    this.setState({display: 'months'});
+  };
+
+  displayYears = () => {
+    this.setState({display: 'years'});
+  };
 
   onDateCancel () {
     this.refs.dialog.hide();
@@ -42,14 +48,6 @@ export default class CalendarDialog extends React.Component {
     this.refs.dialog.show();
   }
 
-  displayMonths () {
-    this.setState({display: 'months'});
-  }
-
-  displayYears () {
-    this.setState({display: 'years'});
-  }
-
   render () {
     const display = `display-${this.state.display}`;
     const headerClassName = `${style.header} ${style[display]}`;
@@ -73,10 +71,12 @@ export default class CalendarDialog extends React.Component {
             <Calendar
               ref="calendar"
               display={this.state.display}
-              onChange={this.onCalendarChange}
+              onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />
           </div>
       </Dialog>
     );
   }
 }
+
+export default CalendarDialog;
diff --git a/components/date_picker/index.jsx b/components/date_picker/index.jsx
index 2e6eb2ee..5c41c6c5 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
-import style from './style';
-import time from '../utils/time';
-import events from '../utils/events';
 import CalendarDialog from './dialog';
 import Input from '../input';
+import events from '../utils/events';
+import time from '../utils/time';
+import style from './style';
 
-@autobind
-export default class DatePicker extends React.Component {
+class DatePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     value: React.PropTypes.object
@@ -21,15 +19,15 @@ export default class DatePicker extends React.Component {
     value: this.props.value
   };
 
-  openCalendarDialog (event) {
+  handleMouseDown = (event) => {
     events.pauseEvent(event);
     this.refs.dialog.show();
-  }
+  };
 
-  onDateSelected (value) {
+  handleDateSelected = (value) => {
     this.refs.input.setValue(this.formatDate(value));
     this.setState({value: value});
-  }
+  };
 
   formatDate (date) {
     return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
@@ -43,14 +41,14 @@ export default class DatePicker extends React.Component {
           type='text'
           readOnly={true}
           className={style.input}
-          onMouseDown={this.openCalendarDialog}
+          onMouseDown={this.handleMouseDown}
           placeholder='Pick up date'
           value={this.state.value ? this.formatDate(this.state.value) : null}
         />
         <CalendarDialog
           ref='dialog'
           initialDate={this.state.value}
-          onDateSelected={this.onDateSelected}
+          onDateSelected={this.handleDateSelected}
         />
       </div>
     );
@@ -64,3 +62,5 @@ export default class DatePicker extends React.Component {
     this.setState({value: value});
   }
 }
+
+export default DatePicker;
diff --git a/components/dialog/index.jsx b/components/dialog/index.jsx
index cf8760cd..d94c168c 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/index.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Button from '../button';
 import style from './style';
 
-@autobind
-export default class Dialog extends React.Component {
+class Dialog extends React.Component {
   static propTypes = {
     actions: React.PropTypes.array,
     active: React.PropTypes.bool,
@@ -59,3 +57,5 @@ export default class Dialog extends React.Component {
     this.setState({active: false});
   }
 }
+
+export default Dialog;
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index 62747099..a5a80356 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style.scss';
 
-@autobind
-export default class Drawer extends React.Component {
+class Drawer extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -20,11 +18,11 @@ export default class Drawer extends React.Component {
     active: this.props.active
   };
 
-  handleOverlayClick () {
+  handleOverlayClick = () => {
     if (this.props.hideable) {
       this.setState({active: false});
     }
-  }
+  };
 
   render () {
     let className = `${style.drawer} ${style[this.props.type]}`;
@@ -49,3 +47,5 @@ export default class Drawer extends React.Component {
     this.setState({active: false});
   }
 }
+
+export default Drawer;
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.jsx
index 0464853e..8ec08305 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import ReactDOM from 'react-dom';
 import Ripple from '../ripple';
 import style from './style';
 
-function _selectValue (value, dataSource) {
+const _selectValue = (value, dataSource) => {
   let item;
   if (value) {
     for (item of dataSource) {
@@ -14,10 +13,9 @@ function _selectValue (value, dataSource) {
   } else {
     return dataSource[0];
   }
-}
+};
 
-@autobind
-export default class Dropdown extends React.Component {
+class Dropdown extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     dataSource: React.PropTypes.array,
@@ -52,7 +50,7 @@ export default class Dropdown extends React.Component {
     }
   }
 
-  handleClick (event) {
+  handleClick = (event) => {
     let client = event.target.getBoundingClientRect();
     let screen_height = window.innerHeight || document.documentElement.offsetHeight;
 
@@ -60,22 +58,19 @@ export default class Dropdown extends React.Component {
       active: true,
       up: client.top > ((screen_height / 2) + client.height)
     });
-  }
+  };
 
-  handleClickValue (id) {
+  handleClickValue = (id) => {
     if (!this.props.disabled) {
       let value = id.toString();
       for (let item of this.props.dataSource) {
         if (item.value.toString() === value) {
-          this.setState({
-            active: false,
-            selected: item
-          });
+          this.setState({active: false, selected: item});
           break;
         }
       }
     }
-  }
+  };
 
   renderValues () {
     let items = this.props.dataSource.map((item, index) => {
@@ -127,3 +122,5 @@ export default class Dropdown extends React.Component {
     this.setState({selected: data});
   }
 }
+
+export default Dropdown;
diff --git a/components/form/index.jsx b/components/form/index.jsx
index e865cfe1..9271bb83 100644
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import Autocomplete from '../autocomplete';
 import Button from '../button';
@@ -12,8 +11,7 @@ import Slider from '../slider';
 import Switch from '../switch';
 import TimePicker from '../time_picker';
 
-@autobind
-export default class Form extends React.Component {
+class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
     className: React.PropTypes.string,
@@ -41,14 +39,14 @@ export default class Form extends React.Component {
     }
   }
 
-  onSubmit (event) {
+  onSubmit = (event) => {
     event.preventDefault();
     if (this.props.onSubmit) {
       this.props.onSubmit(event, this);
     }
-  }
+  };
 
-  onChange (event) {
+  onChange = (event) => {
     let is_valid = true;
     let value = this.getValue();
     for (let attr of this.state.attributes) {
@@ -70,7 +68,7 @@ export default class Form extends React.Component {
       if (this.refs.submit) this.refs.submit.getDOMNode().setAttribute('disabled', true);
       if (this.props.onError) this.props.onError(event, this);
     }
-  }
+  };
 
   render () {
     let className = `${style.root} ${this.props.className}`;
@@ -164,3 +162,5 @@ export default class Form extends React.Component {
     }
   }
 }
+
+export default Form;
diff --git a/components/input/index.jsx b/components/input/index.jsx
index 512c9041..bb97893d 100644
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style.scss';
 import FontIcon from '../font_icon';
 
-@autobind
-export default class Input extends React.Component {
+class Input extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
@@ -35,11 +33,11 @@ export default class Input extends React.Component {
     value: this.props.value
   };
 
-  onChange (event) {
+  onChange = (event) => {
     this.setState({value: event.target.value}, () => {
       if (this.props.onChange) this.props.onChange(event, this);
     });
-  }
+  };
 
   renderInput () {
     let className = style.input;
@@ -105,3 +103,5 @@ export default class Input extends React.Component {
     this.setState({value: value});
   }
 }
+
+export default Input;
diff --git a/components/link/index.jsx b/components/link/index.jsx
index 50b047b5..65f50cc8 100644
--- a/components/link/index.jsx
+++ b/components/link/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import style from './style';
 import FontIcon from '../font_icon';
 
-const Link = props => {
+const Link = (props) => {
   let className = style.root;
   if (props.className) className += ` ${props.className}`;
   return (
diff --git a/components/list/item.jsx b/components/list/item.jsx
index ac7b5811..12d6fbda 100644
--- a/components/list/item.jsx
+++ b/components/list/item.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import FontIcon from '../font_icon';
 import ListItemContent from './content';
 import Ripple from '../ripple';
 import style from './style';
 
-@autobind
-export default class ListItem extends React.Component {
+class ListItem extends React.Component {
   static propTypes = {
     avatar: React.PropTypes.string,
     caption: React.PropTypes.string.isRequired,
@@ -24,17 +22,17 @@ export default class ListItem extends React.Component {
     selectable: false
   };
 
-  handleClick (event) {
+  handleClick = (event) => {
     if (this.props.onClick && !this.props.disabled) {
       this.props.onClick(event);
     }
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (this.refs.ripple && !this.props.disabled) {
       this.refs.ripple.start(event);
     }
-  }
+  };
 
   render () {
     let className = style.item;
@@ -58,3 +56,5 @@ export default class ListItem extends React.Component {
     );
   }
 }
+
+export default ListItem;
diff --git a/components/list/list.jsx b/components/list/list.jsx
index b4f1dee0..37aa1462 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import ListItem from './item';
 import style from './style';
 
-@autobind
-export default class List extends React.Component {
+class List extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     onClick: React.PropTypes.func,
@@ -41,3 +39,5 @@ export default class List extends React.Component {
     );
   }
 }
+
+export default List;
diff --git a/components/menu/icon_menu.jsx b/components/menu/icon_menu.jsx
index 0fbc1374..a88171ac 100644
--- a/components/menu/icon_menu.jsx
+++ b/components/menu/icon_menu.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import FontIcon from '../font_icon';
 import Menu from './menu';
 import Ripple from '../ripple';
 import style from './style.icon_menu';
 
-@autobind
-export default class IconMenu extends React.Component {
+class IconMenu extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
@@ -27,16 +25,16 @@ export default class IconMenu extends React.Component {
     selectable: false
   };
 
-  handleButtonClick () {
+  handleButtonClick = () => {
     this.refs.menu.show();
     if (this.props.onClick) this.props.onClick();
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (this.props.iconRipple) {
       this.refs.ripple.start(event);
     }
-  }
+  };
 
   render () {
     let className = style.root;
@@ -66,3 +64,5 @@ export default class IconMenu extends React.Component {
     );
   }
 }
+
+export default IconMenu;
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index af921899..08c4eb0d 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
 import MenuItem from './menu_item';
 import utils from '../utils';
 import style from './style.menu';
@@ -14,8 +13,7 @@ const POSITION = {
   BOTTOM_RIGHT: 'bottom-right'
 };
 
-@autobind
-export default class Menu extends React.Component {
+class Menu extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -84,11 +82,19 @@ export default class Menu extends React.Component {
     }
   }
 
-  handleDocumentClick (event) {
+  handleDocumentClick = (event) => {
     if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
     }
-  }
+  };
+
+  handleSelect = (item) => {
+    let { value, onClick } = item.props;
+    this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
+      if (onClick) onClick();
+      if (this.props.onSelect) this.props.onSelect(value, this);
+    });
+  };
 
   calculatePosition () {
     const {top, left, height, width} = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect();
@@ -121,14 +127,6 @@ export default class Menu extends React.Component {
     }
   }
 
-  handleSelect (item) {
-    let { value, onClick } = item.props;
-    this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
-      if (onClick) onClick();
-      if (this.props.onSelect) this.props.onSelect(value, this);
-    });
-  }
-
   renderItems () {
     return React.Children.map(this.props.children, (item) => {
       if (item.type === MenuItem) {
@@ -172,3 +170,5 @@ export default class Menu extends React.Component {
     this.setState({active: false});
   }
 }
+
+export default Menu;
diff --git a/components/menu/menu_item.jsx b/components/menu/menu_item.jsx
index 5608e30d..01ccd2ab 100644
--- a/components/menu/menu_item.jsx
+++ b/components/menu/menu_item.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
 import style from './style.menu_item';
 
-@autobind
-export default class MenuItem extends React.Component {
+class MenuItem extends React.Component {
   static propTypes = {
     caption: React.PropTypes.string,
     disabled: React.PropTypes.bool,
@@ -21,17 +19,17 @@ export default class MenuItem extends React.Component {
     selected: false
   };
 
-  handleClick (event) {
+  handleClick = (event) => {
     if (this.props.onClick && !this.props.disabled) {
       this.props.onClick(event, this);
     }
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (this.props.ripple && !this.props.disabled) {
       this.refs.ripple.start(event);
     }
-  }
+  };
 
   render () {
     let className = style.root;
@@ -54,3 +52,5 @@ export default class MenuItem extends React.Component {
     );
   }
 }
+
+export default MenuItem;
diff --git a/components/progress_bar/index.jsx b/components/progress_bar/index.jsx
index 29f974df..1f9f2daa 100644
--- a/components/progress_bar/index.jsx
+++ b/components/progress_bar/index.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import prefixer from '../utils/prefixer';
 
-@autobind
-export default class progressBar extends React.Component {
+class ProgressBar extends React.Component {
   static propTypes = {
     buffer: React.PropTypes.number,
     className: React.PropTypes.string,
@@ -87,3 +85,5 @@ export default class progressBar extends React.Component {
     );
   }
 }
+
+export default ProgressBar;
diff --git a/components/radio/radio_button.jsx b/components/radio/radio_button.jsx
index 7b6f35f3..a777aa54 100644
--- a/components/radio/radio_button.jsx
+++ b/components/radio/radio_button.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Ripple from '../ripple';
 import style from './style';
 import events from '../utils/events';
 
-@autobind
-export default class RadioButton extends React.Component {
+class RadioButton extends React.Component {
   static propTypes = {
     checked: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -24,24 +22,24 @@ export default class RadioButton extends React.Component {
     disabled: false
   };
 
-  handleClick (event) {
+  handleClick = (event) => {
     events.pauseEvent(event);
     if (!this.props.disabled) this.handleChange(event);
-  }
+  };
 
-  handleChange (event) {
+  handleChange = (event) => {
     if (!this.props.checked && this.props.onChange) {
       this.props.onChange(event, this);
     }
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (!this.props.disabled) this.refs.ripple.start(event);
-  }
+  };
 
-  handleInputClick (event) {
+  handleInputClick = (event) => {
     events.pauseEvent(event);
-  }
+  };
 
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
@@ -74,3 +72,5 @@ export default class RadioButton extends React.Component {
     this.refs.input.focus();
   }
 }
+
+export default RadioButton;
diff --git a/components/radio/radio_group.jsx b/components/radio/radio_group.jsx
index 83497ba0..f94366bc 100644
--- a/components/radio/radio_group.jsx
+++ b/components/radio/radio_group.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import RadioButton from './radio_button';
 
-@autobind
-export default class RadioGroup extends React.Component {
+class RadioGroup extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
@@ -21,11 +19,11 @@ export default class RadioGroup extends React.Component {
     value: this.props.value
   };
 
-  handleChange (value, event) {
+  handleChange = (value, event) => {
     this.setState({value: value}, () => {
       if (this.props.onChange) this.props.onChange(event, this);
     });
-  }
+  };
 
   renderRadioButtons () {
     return React.Children.map(this.props.children, (radio, idx) => {
@@ -59,3 +57,5 @@ export default class RadioGroup extends React.Component {
     this.setState({value: value});
   }
 }
+
+export default RadioGroup;
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx
index d90e6d58..7413673b 100644
--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
 import style from './style.scss';
 
-@autobind
-export default class Ripple extends React.Component {
+class Ripple extends React.Component {
   static propTypes = {
     centered: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -27,19 +25,19 @@ export default class Ripple extends React.Component {
     width: null
   };
 
-  start ({ pageX, pageY }) {
-    document.addEventListener('mouseup', this.end);
+  start = ({ pageX, pageY }) => {
+    document.addEventListener('mouseup', this.handleEnd);
     const {top, left, width} = this._getDescriptor(pageX, pageY);
     this.setState({active: false, restarting: true, width: 0}, () => {
       this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
       this.setState({active: true, restarting: false, top: top, left: left, width: width});
     });
-  }
+  };
 
-  end () {
-    document.removeEventListener('mouseup', this.end);
+  handleEnd = () => {
+    document.removeEventListener('mouseup', this.handleEnd);
     this.setState({active: false});
-  }
+  };
 
   _getDescriptor (pageX, pageY) {
     let { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
@@ -65,3 +63,5 @@ export default class Ripple extends React.Component {
     );
   }
 }
+
+export default Ripple;
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index ee877c5a..1d5cab1b 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
 import style from './style';
 import utils from '../utils';
 import ProgressBar from '../progress_bar';
 import Input from '../input';
 
-@autobind
-export default class Slider extends React.Component {
+class Slider extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     editable: React.PropTypes.bool,
@@ -38,12 +36,12 @@ export default class Slider extends React.Component {
   };
 
   componentDidMount () {
-    window.addEventListener('resize', this.onResize);
-    this.onResize();
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
   }
 
   componentWillUnmount () {
-    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('resize', this.handleResize);
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -53,76 +51,76 @@ export default class Slider extends React.Component {
     }
   }
 
-  onResize () {
+  handleResize = () => {
     const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
     this.setState({sliderStart: left, sliderLength: right - left});
-  }
+  };
 
-  onSliderFocus () {
+  handleSliderFocus = () => {
     utils.events.addEventsToDocument(this.getKeyboardEvents());
-  }
+  };
 
-  onSliderBlur () {
+  handleSliderBlur = () => {
     utils.events.removeEventsFromDocument(this.getKeyboardEvents());
-  }
+  };
 
-  onInputChange () {
+  handleInputChange = () => {
     this.setState({value: this.trimValue(this.refs.input.getValue()) });
-  }
+  };
 
-  onKeyDown (event) {
+  handleKeyDown = (event) => {
     if ([13, 27].indexOf(event.keyCode) !== -1) ReactDOM.findDOMNode(this).blur();
     if (event.keyCode === 38) this.addToValue(this.props.step);
     if (event.keyCode === 40) this.addToValue(-this.props.step);
     if (event.keyCode !== 9) utils.events.pauseEvent(event);
-  }
+  };
 
-  onMouseDown (event) {
+  handleMouseDown = (event) => {
     utils.events.addEventsToDocument(this.getMouseEventMap());
     this.start(utils.events.getMousePosition(event));
     utils.events.pauseEvent(event);
-  }
+  };
 
-  onTouchStart (event) {
+  handleTouchStart = (event) => {
     this.start(utils.events.getTouchPosition(event));
     utils.events.addEventsToDocument(this.getTouchEventMap());
     utils.events.pauseEvent(event);
-  }
+  };
 
-  onMouseMove (event) {
+  handleMouseMove = (event) => {
     utils.events.pauseEvent(event);
     this.move(utils.events.getMousePosition(event));
-  }
+  };
 
-  onTouchMove (event) {
+  handleTouchMove = (event) => {
     this.move(utils.events.getTouchPosition(event));
-  }
+  };
 
-  onMouseUp () {
+  handleMouseUp = () => {
     this.end(this.getMouseEventMap());
-  }
+  };
 
-  onTouchEnd () {
+  handleTouchEnd = () => {
     this.end(this.getTouchEventMap());
-  }
+  };
 
   getMouseEventMap () {
     return {
-      mousemove: this.onMouseMove,
-      mouseup: this.onMouseUp
+      mousemove: this.handleMouseMove,
+      mouseup: this.handleMouseUp
     };
   }
 
   getTouchEventMap () {
     return {
-      touchmove: this.onTouchMove,
-      touchend: this.onTouchEnd
+      touchmove: this.handleTouchMove,
+      touchend: this.handleTouchEnd
     };
   }
 
   getKeyboardEvents () {
     return {
-      keydown: this.onKeyDown
+      keydown: this.handleKeyDown
     };
   }
 
@@ -189,7 +187,7 @@ export default class Slider extends React.Component {
         <Input
           ref='input'
           className={style.input}
-          onChange={this.onInputChange}
+          onChange={this.handleInputChange}
           value={this.valueForInput(this.state.value)} />
       );
     }
@@ -208,21 +206,21 @@ export default class Slider extends React.Component {
         data-react-toolbox='slider'
         className={style.root + className}
         tabIndex='0'
-        onFocus={this.onSliderFocus}
-        onBlur={this.onSliderBlur} >
+        onFocus={this.handleSliderFocus}
+        onBlur={this.handleSliderBlur} >
 
         <div
           ref='slider'
           className={style.container}
-          onTouchStart={this.onTouchStart}
-          onMouseDown={this.onMouseDown} >
+          onTouchStart={this.handleTouchStart}
+          onMouseDown={this.handleMouseDown} >
 
           <div
             ref='knob'
             className={style.knob}
             style={knobStyles}
-            onMouseDown={this.onMouseDown}
-            onTouchStart={this.onTouchStart} >
+            onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleTouchStart} >
               <div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
           </div>
 
@@ -251,3 +249,5 @@ export default class Slider extends React.Component {
     this.setState({value: value});
   }
 }
+
+export default Slider;
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index cadb1d1f..7af7ab37 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import Button from '../button';
 import FontIcon from '../font_icon';
 
-@autobind
-export default class Slider extends React.Component {
+class Slider extends React.Component {
   static propTypes = {
     action: React.PropTypes.string,
     icon: React.PropTypes.string,
@@ -19,12 +17,12 @@ export default class Slider extends React.Component {
     active: false
   };
 
-  handleClick (event) {
+  handleClick = (event) => {
     this.setState({active: false});
     if (this.props.onClick) {
       this.props.onClick(event, this);
     }
-  }
+  };
 
   renderButton () {
     if (this.props.action) {
@@ -53,7 +51,6 @@ export default class Slider extends React.Component {
     );
   }
 
-  // -- Extends
   hide () {
     this.setState({active: false});
   }
@@ -67,3 +64,5 @@ export default class Slider extends React.Component {
     }
   }
 }
+
+export default Slider;
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index 0dc6352b..7fed7abd 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Ripple from '../ripple';
 import style from './style';
 import events from '../utils/events';
 
-@autobind
-export default class Switch extends React.Component {
+class Switch extends React.Component {
   static propTypes = {
     checked: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -27,24 +25,24 @@ export default class Switch extends React.Component {
     checked: this.props.checked
   };
 
-  handleChange (event) {
+  handleChange = (event) => {
     this.setState({checked: !this.state.checked}, () => {
       if (this.props.onChange) this.props.onChange(event, this);
     });
-  }
+  };
 
-  handleClick (event) {
+  handleClick = (event) => {
     events.pauseEvent(event);
     if (!this.props.disabled) this.handleChange(event);
-  }
+  };
 
-  handleInputClick (event) {
+  handleInputClick = (event) => {
     events.pauseEvent(event);
-  }
+  };
 
-  handleMouseDown (event) {
+  handleMouseDown = (event) => {
     if (!this.props.disabled) this.refs.ripple.start(event);
-  }
+  };
 
   render () {
     let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
@@ -92,3 +90,5 @@ export default class Switch extends React.Component {
     this.setState({checked: value});
   }
 }
+
+export default Switch;
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
index 6f7217d7..bfc9e9fa 100644
--- a/components/tabs/tab.jsx
+++ b/components/tabs/tab.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 
-@autobind
-export default class Tab extends React.Component {
+class Tab extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -50,3 +48,5 @@ export default class Tab extends React.Component {
     }
   }
 }
+
+export default Tab;
diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
index 99c83240..7d7d7096 100644
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 
-@autobind
-export default class Tabs extends React.Component {
+class Tabs extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     index: React.PropTypes.number.isRequired,
@@ -45,13 +43,13 @@ export default class Tabs extends React.Component {
     };
   }
 
-  onClick (index) {
+  handleClick = (index) => {
     this.setState({
       index: index,
       pointer: this._pointerPosition(index, this.refs.navigation)
     });
     if (this.props.onChange) this.props.onChange(this);
-  }
+  };
 
   renderLabels (labels) {
     return labels.map((props) => {
@@ -74,7 +72,7 @@ export default class Tabs extends React.Component {
         className: className,
         label: tab.props.label,
         key: index,
-        onClick: !tab.props.disabled ? this.onClick.bind(this, index) : null
+        onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
       });
 
       return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
@@ -101,3 +99,5 @@ export default class Tabs extends React.Component {
     }
   }
 }
+
+export default Tabs;
diff --git a/components/time_picker/clock/face.jsx b/components/time_picker/clock/face.jsx
index 5105c4cd..754e8d1c 100644
--- a/components/time_picker/clock/face.jsx
+++ b/components/time_picker/clock/face.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 
-@autobind
-export default class Face extends React.Component {
+class Face extends React.Component {
   static defaultProps = {
     active: null,
     numbers: [],
@@ -49,8 +47,10 @@ export default class Face extends React.Component {
         onMouseDown={this.props.onMouseDown}
         style={this.faceStyle()}
       >
-        { this.props.numbers.map(this.renderNumber)}
+        { this.props.numbers.map(this.renderNumber.bind(this))}
       </div>
     );
   }
 }
+
+export default Face;
diff --git a/components/time_picker/clock/hand.jsx b/components/time_picker/clock/hand.jsx
index 77e58446..769227c3 100644
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/clock/hand.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import utils from '../../utils';
 
-@autobind
-export default class Hand extends React.Component {
+class Hand extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     angle: React.PropTypes.number,
@@ -29,33 +27,33 @@ export default class Hand extends React.Component {
 
   getMouseEventMap () {
     return {
-      mousemove: this.onMouseMove,
-      mouseup: this.onMouseUp
+      mousemove: this.handleMouseMove,
+      mouseup: this.handleMouseUp
     };
   }
 
   getTouchEventMap () {
     return {
-      touchmove: this.onTouchMove,
-      touchend: this.onTouchEnd
+      touchmove: this.handleTouchMove,
+      touchend: this.handleTouchEnd
     };
   }
 
-  onMouseMove (event) {
+  handleMouseMove = (event) => {
     this.move(utils.events.getMousePosition(event));
-  }
+  };
 
-  onTouchMove (event) {
+  handleTouchMove = (event) => {
     this.move(utils.events.getTouchPosition(event));
-  }
+  };
 
-  onMouseUp () {
+  handleMouseUp = () => {
     this.end(this.getMouseEventMap());
-  }
+  };
 
-  onTouchEnd () {
+  handleTouchEnd = () => {
     this.end(this.getTouchEventMap());
-  }
+  };
 
   mouseStart (event) {
     utils.events.addEventsToDocument(this.getMouseEventMap());
@@ -107,3 +105,5 @@ export default class Hand extends React.Component {
     );
   }
 }
+
+export default Hand;
diff --git a/components/time_picker/clock/hours.jsx b/components/time_picker/clock/hours.jsx
index 5809cc6d..f73f454a 100644
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/clock/hours.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import utils from '../../utils';
 import Face from './face';
 import Hand from './hand';
@@ -9,8 +8,7 @@ const innerNumbers = [12, ...utils.range(1, 12)];
 const innerSpacing = 1.7;
 const step = 360 / 12;
 
-@autobind
-export default class Hours extends React.Component {
+class Hours extends React.Component {
   static propTypes = {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
@@ -22,7 +20,7 @@ export default class Hours extends React.Component {
     inner: this.props.format === '24hr' && this.props.selected > 0 && this.props.selected <= 12
   };
 
-  onHandMove (degrees, radius) {
+  handleHandMove = (degrees, radius) => {
     let currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
     if (this.props.format === '24hr' && this.state.inner !== currentInner) {
       this.setState({inner: currentInner}, () => {
@@ -31,15 +29,15 @@ export default class Hours extends React.Component {
     } else {
       this.props.onChange(this.valueFromDegrees(degrees));
     }
-  }
+  };
 
-  onMouseDown (event) {
+  handleMouseDown = (event) => {
     this.refs.hand.mouseStart(event);
-  }
+  };
 
-  onTouchStart (event) {
+  handleTouchStart = (event) => {
     this.refs.hand.touchStart(event);
-  }
+  };
 
   valueFromDegrees (degrees) {
     if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
@@ -53,8 +51,8 @@ export default class Hours extends React.Component {
     if (this.props.format === '24hr') {
       return (
         <Face
-          onTouchStart={this.onTouchStart}
-          onMouseDown={this.onMouseDown}
+          onTouchStart={this.handleTouchStart}
+          onMouseDown={this.handleMouseDown}
           numbers={innerNumbers}
           spacing={this.props.spacing}
           radius={innerRadius}
@@ -71,8 +69,8 @@ export default class Hours extends React.Component {
     return (
       <div>
           <Face
-            onTouchStart={this.onTouchStart}
-            onMouseDown={this.onMouseDown}
+            onTouchStart={this.handleTouchStart}
+            onMouseDown={this.handleMouseDown}
             numbers={is24hr ? outerNumbers : innerNumbers}
             spacing={spacing}
             radius={radius}
@@ -83,7 +81,7 @@ export default class Hours extends React.Component {
           <Hand ref='hand'
             angle={selected * step}
             length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
-            onMove={this.onHandMove}
+            onMove={this.handleHandMove}
             onMoved={onHandMoved}
             origin={center}
             step={step}
@@ -92,3 +90,5 @@ export default class Hours extends React.Component {
     );
   }
 }
+
+export default Hours;
diff --git a/components/time_picker/clock/index.jsx b/components/time_picker/clock/index.jsx
index 4e80ec96..8d326b99 100644
--- a/components/time_picker/clock/index.jsx
+++ b/components/time_picker/clock/index.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import time from '../../utils/time';
 import Hours from './hours';
 import Minutes from './minutes';
 
-@autobind
-export default class Clock extends React.Component {
+class Clock extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     display: React.PropTypes.oneOf(['hours', 'minutes']),
@@ -29,29 +27,37 @@ export default class Clock extends React.Component {
   };
 
   componentDidMount () {
-    window.addEventListener('resize', this.calculateShape);
-    this.calculateShape();
+    window.addEventListener('resize', this.handleCalculateShape);
+    this.handleCalculateShape();
   }
 
   componentWillUnmount () {
-    window.removeEventListener('resize', this.calculateShape);
+    window.removeEventListener('resize', this.handleCalculateShape);
   }
 
-  onHourChange (hours) {
+  handleHourChange = (hours) => {
     if (this.state.time.getHours() !== hours) {
       const newTime = time.setHours(this.state.time, this.adaptHourToFormat(hours));
       this.setState({time: newTime});
       if (this.props.onChange) this.props.onChange(newTime);
     }
-  }
+  };
 
-  onMinuteChange (minutes) {
+  handleMinuteChange = (minutes) => {
     if (this.state.time.getMinutes() !== minutes) {
       const newTime = time.setMinutes(this.state.time, minutes);
       this.setState({time: newTime});
       if (this.props.onChange) this.props.onChange(newTime);
     }
-  }
+  };
+
+  handleCalculateShape = () => {
+    let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
+    this.setState({
+      center: { x: left + width / 2, y: top + width / 2 },
+      radius: width / 2
+    });
+  };
 
   toggleTimeMode () {
     const newTime = time.toggleTimeMode(this.state.time);
@@ -71,20 +77,12 @@ export default class Clock extends React.Component {
     }
   }
 
-  calculateShape () {
-    let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
-    this.setState({
-      center: { x: left + width / 2, y: top + width / 2 },
-      radius: width / 2
-    });
-  }
-
   renderHours () {
     return (
       <Hours
         center={this.state.center}
         format={this.props.format}
-        onChange={this.onHourChange}
+        onChange={this.handleHourChange}
         radius={this.state.radius}
         selected={this.state.time.getHours()}
         spacing={this.state.radius * 0.18}
@@ -96,7 +94,7 @@ export default class Clock extends React.Component {
     return (
       <Minutes
         center={this.state.center}
-        onChange={this.onMinuteChange}
+        onChange={this.handleMinuteChange}
         radius={this.state.radius}
         selected={this.state.time.getMinutes()}
         spacing={this.state.radius * 0.18}
@@ -115,3 +113,5 @@ export default class Clock extends React.Component {
     );
   }
 }
+
+export default Clock;
diff --git a/components/time_picker/clock/minutes.jsx b/components/time_picker/clock/minutes.jsx
index eab2d40d..164091b6 100644
--- a/components/time_picker/clock/minutes.jsx
+++ b/components/time_picker/clock/minutes.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import utils from '../../utils';
 import style from './style';
 import Face from './face';
@@ -8,8 +7,7 @@ import Hand from './hand';
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
-@autobind
-export default class Minutes extends React.Component {
+class Minutes extends React.Component {
   static propTypes = {
     selected: React.PropTypes.number,
     onChange: React.PropTypes.func
@@ -20,24 +18,24 @@ export default class Minutes extends React.Component {
     onChange: null
   };
 
-  onHandMove (degrees) {
+  handleHandMove = (degrees) => {
     this.props.onChange(degrees / step);
-  }
+  };
 
-  onMouseDown (event) {
+  handleMouseDown = (event) => {
     this.refs.hand.mouseStart(event);
-  }
+  };
 
-  onTouchStart (event) {
+  handleTouchStart = (event) => {
     this.refs.hand.touchStart(event);
-  }
+  };
 
   render () {
     return (
       <div>
         <Face
-          onTouchStart={this.onTouchStart}
-          onMouseDown={this.onMouseDown}
+          onTouchStart={this.handleTouchStart}
+          onMouseDown={this.handleMouseDown}
           numbers={minutes}
           spacing={this.props.spacing}
           radius={this.props.radius}
@@ -48,7 +46,7 @@ export default class Minutes extends React.Component {
           className={minutes.indexOf(this.props.selected) === -1 ? style.small : ''}
           angle={this.props.selected * step}
           length={this.props.radius - this.props.spacing}
-          onMove={this.onHandMove}
+          onMove={this.handleHandMove}
           origin={this.props.center}
           step={step}
         />
@@ -56,3 +54,5 @@ export default class Minutes extends React.Component {
     );
   }
 }
+
+export default Minutes;
diff --git a/components/time_picker/dialog.jsx b/components/time_picker/dialog.jsx
index 1bc0f80f..5685fa48 100644
--- a/components/time_picker/dialog.jsx
+++ b/components/time_picker/dialog.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import style from './style';
 import time from '../utils/time';
 import Clock from './clock';
 import Dialog from '../dialog';
 
-@autobind
-export default class TimePickerDialog extends React.Component {
+class TimePickerDialog extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
     initialTime: React.PropTypes.object,
@@ -24,14 +22,26 @@ export default class TimePickerDialog extends React.Component {
     display: 'hours',
     time: this.props.initialTime,
     actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onTimeCancel },
-      { label: 'Ok', className: style.button, onClick: this.onTimeSelected }
+      { label: 'Cancel', className: style.button, onClick: this.onTimeCancel.bind(this) },
+      { label: 'Ok', className: style.button, onClick: this.onTimeSelected.bind(this) }
     ]
   };
 
-  onClockChange (newTime) {
+  handleClockChange = (newTime) => {
     this.setState({time: newTime});
-  }
+  };
+
+  displayMinutes = () => {
+    this.setState({display: 'minutes'});
+  };
+
+  displayHours = () => {
+    this.setState({display: 'hours'});
+  };
+
+  toggleTimeMode = () => {
+    this.refs.clock.toggleTimeMode();
+  };
 
   onTimeCancel () {
     this.refs.dialog.hide();
@@ -42,21 +52,9 @@ export default class TimePickerDialog extends React.Component {
     this.refs.dialog.hide();
   }
 
-  displayMinutes () {
-    this.setState({display: 'minutes'});
-  }
-
-  displayHours () {
-    this.setState({display: 'hours'});
-  }
-
-  toggleTimeMode () {
-    this.refs.clock.toggleTimeMode();
-  }
-
   show () {
     this.refs.dialog.show();
-    setTimeout(this.refs.clock.calculateShape, 1000);
+    setTimeout(this.refs.clock.handleCalculateShape, 1000);
   }
 
   formatHours () {
@@ -100,9 +98,11 @@ export default class TimePickerDialog extends React.Component {
           display={this.state.display}
           format={this.props.format}
           initialTime={this.props.initialTime}
-          onChange={this.onClockChange}
+          onChange={this.handleClockChange}
         />
       </Dialog>
     );
   }
 }
+
+export default TimePickerDialog;
diff --git a/components/time_picker/index.jsx b/components/time_picker/index.jsx
index af4b5a47..99a97409 100644
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import time from '../utils/time';
 import style from './style';
 import events from '../utils/events';
 import Input from '../input';
 import TimeDialog from './dialog';
 
-@autobind
-export default class TimePicker extends React.Component {
+class TimePicker extends React.Component {
   static propTypes = {
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     value: React.PropTypes.object
@@ -21,15 +19,15 @@ export default class TimePicker extends React.Component {
     value: this.props.value
   };
 
-  onTimeSelected (newTime) {
+  onTimeSelected = (newTime) => {
     this.refs.input.setValue(time.formatTime(newTime, this.props.format));
     this.setState({value: newTime});
-  }
+  };
 
-  openTimeDialog (event) {
+  openTimeDialog = (event) => {
     events.pauseEvent(event);
     this.refs.dialog.show();
-  }
+  };
 
   formatTime () {
     if (this.state.value) {
@@ -67,3 +65,5 @@ export default class TimePicker extends React.Component {
     this.setState({value: value});
   }
 }
+
+export default TimePicker;
diff --git a/package.json b/package.json
index aa5d5ccc..cea66e08 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "start": "npm run build & webpack-dev-server --hot",
     "build": "webpack",
     "watch": "webpack --watch",
+    "lint": "eslint ./components/**/*.jsx",
     "deploy": "NODE_ENV=production webpack -p",
     "test": "karma start",
     "test:watch": "karma start --no-single-run"
@@ -41,7 +42,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "autobind-decorator": "^1.3.2",
     "react": "^0.14",
     "react-addons-css-transition-group": "^0.14.0",
     "react-dom": "^0.14.0"
diff --git a/spec/components/autocomplete.jsx b/spec/components/autocomplete.jsx
index bff6cc1f..c41b7347 100644
--- a/spec/components/autocomplete.jsx
+++ b/spec/components/autocomplete.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Autocomplete from '../../components/autocomplete';
 
-@autobind
-export default class AutocompleteTest extends React.Component {
+class AutocompleteTest extends React.Component {
   state = {
     countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
     countries_obj: {
@@ -14,10 +12,10 @@ export default class AutocompleteTest extends React.Component {
     }
   };
 
-  onAutocompleteValues () {
+  onAutocompleteValues = () => {
     console.log(this.refs.autocomplete_multiple.getValue());
     console.log(this.refs.autocomplete_simple.getValue());
-  }
+  };
 
   render () {
     const countries_selected = ['USA', 'Tongo'];
@@ -46,3 +44,5 @@ export default class AutocompleteTest extends React.Component {
     );
   }
 }
+
+export default AutocompleteTest;
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index cf756d22..0f4dde4b 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Card from '../../components/card';
 
-@autobind
-export default class CardTest extends React.Component {
-  onClick () {
+class CardTest extends React.Component {
+  onClick = () => {
     console.log('onClick', arguments);
-  }
+  };
 
   onActionClick () {
     console.log('onClick', arguments);
@@ -15,8 +13,8 @@ export default class CardTest extends React.Component {
   render () {
     const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
     const actions = [
-      { label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick },
-      { label: 'Close', className: 'flat', onClick: this.onActionClick }];
+      { label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick.bind(this) },
+      { label: 'Close', className: 'flat', onClick: this.onActionClick.bind(this) }];
 
     return (
       <section>
@@ -37,3 +35,5 @@ export default class CardTest extends React.Component {
     );
   }
 }
+
+export default CardTest;
diff --git a/spec/components/checkbox.jsx b/spec/components/checkbox.jsx
index 3a37fef7..e1511f8c 100644
--- a/spec/components/checkbox.jsx
+++ b/spec/components/checkbox.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Checkbox from '../../components/checkbox';
 
-@autobind
-export default class CheckboxTest extends React.Component {
-  handleChange (event, instance) {
+class CheckboxTest extends React.Component {
+  handleChange = (event, instance) => {
     console.log('Changed!', instance.getValue());
-  }
+  };
 
-  handleFocus () {
+  handleFocus = () => {
     console.log('Focused');
-  }
+  };
 
-  handleBlur () {
+  handleBlur = () => {
     console.log('Blur');
-  }
+  };
 
   render () {
     return (
@@ -47,3 +45,5 @@ export default class CheckboxTest extends React.Component {
     );
   }
 }
+
+export default CheckboxTest;
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index f1051f27..e6aa9a0d 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -1,15 +1,13 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Button from '../../components/button';
 import Dialog from '../../components/dialog';
 
-@autobind
-export default class DialogTest extends React.Component {
+class DialogTest extends React.Component {
   state = {
     title: 'Use Google\'s location service?',
     actions: [
-      { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose },
-      { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose }]
+      { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) },
+      { label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
   };
 
   onClose () {
@@ -25,7 +23,7 @@ export default class DialogTest extends React.Component {
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
-        <Button kind='raised' label='Show Dialog' onClick={this.onShow} />
+        <Button kind='raised' label='Show Dialog' onClick={this.onShow.bind(this)} />
         <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
           <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>
@@ -33,3 +31,5 @@ export default class DialogTest extends React.Component {
     );
   }
 }
+
+export default DialogTest;
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index 586477a6..5611606c 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Button from '../../components/button';
 import Drawer from '../../components/drawer';
 
-@autobind
-export default class DrawerTest extends React.Component {
-  onClick (ref, method) {
+class DrawerTest extends React.Component {
+  handleClick = (ref, method) => {
     this.refs[ref][method]();
-  }
+  };
 
   render () {
     return (
@@ -22,14 +20,16 @@ export default class DrawerTest extends React.Component {
         </Drawer>
 
         <Drawer ref='right' type='right'>
-          <Button label='Close' onClick={this.onClick.bind(this, 'right', 'hide')} />
+          <Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left hideable' kind='raised' onClick={this.onClick.bind(this, 'left', 'show')} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.onClick.bind(this, 'right', 'show')} />
+          <Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
+          <Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
         </nav>
       </section>
     );
   }
 }
+
+export default DrawerTest;
diff --git a/spec/components/dropdown.jsx b/spec/components/dropdown.jsx
index 8e89f09e..ed1a792a 100644
--- a/spec/components/dropdown.jsx
+++ b/spec/components/dropdown.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Dropdown from '../../components/dropdown';
 
-@autobind
-export default class DropdownTest extends React.Component {
+class DropdownTest extends React.Component {
   state = {
     countries: [
       { value: 'ES-es', label: 'Spain', img: 'http://' },
@@ -15,9 +13,9 @@ export default class DropdownTest extends React.Component {
     selected: 'TH-th'
   };
 
-  onChange (dropdown) {
+  handleChange = (dropdown) => {
     console.log('[DROPDOWN]', dropdown.getValue());
-  }
+  };
 
   customDropdownItem (data) {
     const style = {
@@ -43,11 +41,13 @@ export default class DropdownTest extends React.Component {
       <section>
         <h5>Dropdown</h5>
         <p>lorem ipsum...</p>
-        <Dropdown dataSource={this.state.countries} label="Countries" onChange={this.onChange}/>
-        <Dropdown dataSource={this.state.countries} disabled={true} onChange={this.onChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.onChange}/>
-        <Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.onChange}/>
+        <Dropdown dataSource={this.state.countries} label="Countries" onChange={this.handleChange}/>
+        <Dropdown dataSource={this.state.countries} disabled={true} onChange={this.handleChange}/>
+        <Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.handleChange}/>
+        <Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.handleChange}/>
       </section>
     );
   }
 }
+
+export default DropdownTest;
diff --git a/spec/components/form.jsx b/spec/components/form.jsx
index 2de1db2d..81555728 100644
--- a/spec/components/form.jsx
+++ b/spec/components/form.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Form from '../../components/form';
 
-@autobind
-export default class FormTest extends React.Component {
+class FormTest extends React.Component {
   state = {
     attributes: [
       { ref: 'name', label: 'Your Name', required: true, storage: true},
@@ -22,9 +20,9 @@ export default class FormTest extends React.Component {
     ]
   };
 
-  onEvent (type, event, form) {
+  handleEvent = (type, event, form) => {
     console.log(`[FORM.${type}]`, form.getValue());
-  }
+  };
 
   render () {
     return (
@@ -35,11 +33,13 @@ export default class FormTest extends React.Component {
         <Form
           attributes={this.state.attributes}
           storage="example-form"
-          onChange={this.onEvent.bind(this, 'change')}
-          onError={this.onEvent.bind(this, 'error')}
-          onValid={this.onEvent.bind(this, 'valid')}
-          onSubmit={this.onEvent.bind(this, 'submit')} />
+          onChange={this.handleEvent.bind(this, 'change')}
+          onError={this.handleEvent.bind(this, 'error')}
+          onValid={this.handleEvent.bind(this, 'valid')}
+          onSubmit={this.handleEvent.bind(this, 'submit')} />
       </section>
     );
   }
 }
+
+export default FormTest;
diff --git a/spec/components/icon_menu.jsx b/spec/components/icon_menu.jsx
index e657bf95..601801ab 100644
--- a/spec/components/icon_menu.jsx
+++ b/spec/components/icon_menu.jsx
@@ -1,24 +1,22 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import { MenuItem, IconMenu } from '../../components/menu';
 
-@autobind
-export default class IconMenuTest extends React.Component {
-  handleShow () {
+class IconMenuTest extends React.Component {
+  handleShow = () => {
     console.log('Showing menu...');
-  }
+  };
 
-  handleHide () {
+  handleHide = () => {
     console.log('Hiding menu...');
-  }
+  };
 
-  handleSelect (value, instance) {
+  handleSelect = (value, instance) => {
     console.log('Option selected', value, instance);
-  }
+  };
 
-  handleItem () {
+  handleItem = () => {
     console.log('Refresh clicked');
-  }
+  };
 
   render () {
     return (
@@ -44,3 +42,5 @@ export default class IconMenuTest extends React.Component {
     );
   }
 }
+
+export default IconMenuTest;
diff --git a/spec/components/menu.jsx b/spec/components/menu.jsx
index 5e74ede8..59c6110d 100644
--- a/spec/components/menu.jsx
+++ b/spec/components/menu.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import { Menu, MenuItem, MenuDivider } from '../../components/menu';
 
-@autobind
-export default class MenuTest extends React.Component {
-  handleSelect (e, instance) {
+class MenuTest extends React.Component {
+  handleSelect = (e, instance) => {
     console.log('Menu selection changed!!, now its', instance.getValue());
-  }
+  };
 
-  handleItemClick () {
+  handleItemClick = () => {
     console.log('This item is so special that has a special handler');
-  }
+  };
 
   render () {
     return (
@@ -31,3 +29,5 @@ export default class MenuTest extends React.Component {
     );
   }
 }
+
+export default MenuTest;
diff --git a/spec/components/navigation.jsx b/spec/components/navigation.jsx
index 080829e4..50e2462d 100644
--- a/spec/components/navigation.jsx
+++ b/spec/components/navigation.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Navigation from '../../components/navigation';
 
-@autobind
-export default class NavigationTest extends React.Component {
+class NavigationTest extends React.Component {
   state = {
     routes: [
       { label: 'Github', route: 'http://www.github.com', icon: 'bookmark' },
@@ -22,3 +20,5 @@ export default class NavigationTest extends React.Component {
     );
   }
 }
+
+export default NavigationTest;
diff --git a/spec/components/progress.jsx b/spec/components/progress.jsx
index 9b549483..9683f99d 100644
--- a/spec/components/progress.jsx
+++ b/spec/components/progress.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import ProgressBar from '../../components/progress_bar';
 
-@autobind
-export default class ProgressBarTest extends React.Component {
-  state = {
-    progress: 0,
-    buffer: 10
-  };
+const initialState = {
+  progress: 0,
+  buffer: 10
+};
+
+class ProgressBarTest extends React.Component {
+  state = initialState;
 
   componentWillMount () {
     this.simulateProgress();
@@ -19,7 +19,7 @@ export default class ProgressBarTest extends React.Component {
         this.increaseProgress();
         if (this.state.progress > this.state.buffer) this.increaseBuffer();
       } else {
-        this.replaceState(this.getInitialState());
+        this.setState(initialState);
       }
       this.simulateProgress();
     }, (Math.random() * 1 + 1) * 1000);
@@ -51,3 +51,5 @@ export default class ProgressBarTest extends React.Component {
     );
   }
 }
+
+export default ProgressBarTest;
diff --git a/spec/components/radio.jsx b/spec/components/radio.jsx
index d6bc82b3..711e7088 100644
--- a/spec/components/radio.jsx
+++ b/spec/components/radio.jsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import { RadioGroup, RadioButton } from '../../components/radio';
 
-@autobind
-export default class RadioGroupTest extends React.Component {
-  handleChange (event, instance) {
+class RadioGroupTest extends React.Component {
+  handleChange = (event, instance) => {
     console.log('Changed!', { comic: instance.getValue()});
-  }
+  };
 
-  handleFocus () {
+  handleFocus = () => {
     console.log('Focused V for a Vendetta');
-  }
+  };
 
-  handleBlur () {
+  handleBlur = () => {
     console.log('Blurred Watchmen');
-  }
+  };
 
   render () {
     return (
@@ -32,3 +30,5 @@ export default class RadioGroupTest extends React.Component {
     );
   }
 }
+
+export default RadioGroupTest;
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index afe9e63c..61783a17 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
-@autobind
-export default class SnackbarTest extends React.Component {
-  handleClick (event, snackbar) {
+class SnackbarTest extends React.Component {
+  handleClick = (event, snackbar) => {
     console.log('handleClick', event, snackbar);
-  }
+  };
 
-  handleSnackbar () {
+  handleSnackbar = () => {
     this.refs.snackbar.show();
-  }
+  };
 
   render () {
     return (
@@ -31,3 +29,5 @@ export default class SnackbarTest extends React.Component {
     );
   }
 }
+
+export default SnackbarTest;
diff --git a/spec/components/switch.jsx b/spec/components/switch.jsx
index 8a96e8fd..d3015b2d 100644
--- a/spec/components/switch.jsx
+++ b/spec/components/switch.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import autobind from 'autobind-decorator';
 import Switch from '../../components/switch';
 
-@autobind
-export default class SwitchTest extends React.Component {
-  onChange (event, instance) {
+class SwitchTest extends React.Component {
+  handleChange = (event, instance) => {
     console.log('[Switch] Changed', instance.getValue());
-  }
+  };
 
   render () {
     return (
@@ -14,9 +12,11 @@ export default class SwitchTest extends React.Component {
         <h5>Switches</h5>
         <p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
         <Switch label="Push notifications" />
-        <Switch checked label="Mail notifications" onChange={this.onChange} />
+        <Switch checked label="Mail notifications" onChange={this.handleChange} />
         <Switch disabled label="Nothing, thanks"/>
       </section>
     );
   }
 }
+
+export default SwitchTest;