Merge branch 'master' into docs

* master: Fix some errors and change opinionated eslint add commons.scss to spec html add babel to devDepedenecy add rimraf devDependencies update webpack dev, test and build & update eslint rule Add scripts to generate a js+css version
2015-10-23 18:35:50 +02:00 · 2015-10-23 18:35:50 +02:00 · 8e00f773b1
parent de3af12737 d918e4d4d3
commit 8e00f773b1
52 changed files with 337 additions and 403 deletions
--- a/.csscomb.json
+++ b/.csscomb.json
@ -24,6 +24,7 @@
      "$variable",
      "$extend",
      "$include",
+      "composes",
      "position",
      "top",
      "right",
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +1,2 @@
-!node_modules
+**/node_modules/
+**/build/
--- a/.eslintrc
+++ b/.eslintrc
@ -1,5 +1,4 @@
 {
-  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
@ -12,9 +11,11 @@
    "templateStrings": true,
    "superInFunctions": false,
    "classes": true,
-    "modules": [2]
+    "modules": true
  },

+  "parser": "babel-eslint",
+
  "plugins": [
    "react"
  ],
@ -29,6 +30,7 @@
    "comma-spacing": [2],
    "comma-style": [2, "last"],
    "complexity": [0, 11],
+    "constructor-super": [2],
    "consistent-return": [2],
    "consistent-this": [0, "that"],
    "curly": [2, "multi-line"],
@ -140,6 +142,7 @@
    "no-sparse-arrays": [2],
    "no-sync": [0],
    "no-ternary": [0],
+    "no-this-before-super": [2],
    "no-throw-literal": [2],
    "no-trailing-spaces": [2],
    "no-undef": [2],
@ -152,7 +155,8 @@
      "vars": "all",
      "args": "after-used"
    }],
-    "no-use-before-define": [2],
+    "no-use-before-define": [2, "nofunc"],
+    "no-var": [2],
    "no-void": [0],
    "no-warning-comments": [0, {
      "terms": ["todo", "fixme", "xxx"],
@ -163,6 +167,7 @@
    "operator-assignment": [0, "always"],
    "operator-linebreak": [2, "after"],
    "padded-blocks": [0],
+    "prefer-const": [2],
    "quote-props": [0],
    "radix": [0],
    "semi": [2],
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 build
-dist
+lib
 node_modules
 npm-debug.log
-.sass-cache/
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+4.2.1
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@ -99,6 +99,7 @@ linters:
      "$variable",
      "$extend",
      "$include",
+      "composes",
      "position",
      "top",
      "right",
--- a/.travis.yml
+++ b/.travis.yml
@ -1,3 +1,6 @@
 language: node_js
 node_js:
-  - 0.10
+  - "stable"
+script:
+  - npm run lint
+  - npm test
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/index.jsx
@ -52,7 +52,7 @@ class Autocomplete extends React.Component {
  handleQueryChange = () => {
    const query = this.refs.input.getValue();
    if (this.state.query !== query) {
-      this.setState({query: query});
+      this.setState({query});
    }
  };

@ -71,8 +71,8 @@ class Autocomplete extends React.Component {
  };

  handleFocus = () => {
-    let client = event.target.getBoundingClientRect();
-    let screen_height = window.innerHeight || document.documentElement.offsetHeight;
+    const client = event.target.getBoundingClientRect();
+    const screen_height = window.innerHeight || document.documentElement.offsetHeight;

    this.refs.suggestions.scrollTop = 0;
    this.setState({
@ -126,7 +126,7 @@ class Autocomplete extends React.Component {

    let suggestionsClassName = style.suggestions;
    if (this.state.up) suggestionsClassName += ` ${style.up}`;
-    let suggestionsStyle = {width: this.state.width};
+    const suggestionsStyle = {width: this.state.width};

    return (
      <div data-react-toolbox='autocomplete' className={className}>
@ -164,9 +164,9 @@ class Autocomplete extends React.Component {
  }

  _getSuggestions () {
-    let query = this.state.query.toLowerCase().trim() || '';
-    let suggestions = new Map();
-    for (let [key, value] of this.state.dataSource) {
+    const query = this.state.query.toLowerCase().trim() || '';
+    const suggestions = new Map();
+    for (const [key, value] of this.state.dataSource) {
      if (!this.state.values.has(key) && value.toLowerCase().trim().startsWith(query)) {
        suggestions.set(key, value);
      }
@ -175,14 +175,15 @@ class Autocomplete extends React.Component {
  }

  _selectOption (key) {
-    let { values, dataSource } = this.state;
-    let query = !this.props.multiple ? dataSource.get(key) : '';
+    const { dataSource } = this.state;
+    let { values } = this.state;
+    const query = !this.props.multiple ? dataSource.get(key) : '';
    values = new Map(values);

    if (!this.props.multiple) values.clear();
    values.set(key, dataSource.get(key));

-    this.setState({focus: false, query: query, values: values}, () => {
+    this.setState({focus: false, query, values}, () => {
      this.refs.input.blur();
      if (this.props.onChange) this.props.onChange(this);
    });
@ -190,26 +191,26 @@ class Autocomplete extends React.Component {

  _unselectOption (key) {
    if (key) {
-      let values = new Map(this.state.values);
+      const values = new Map(this.state.values);
      values.delete(key);
-      this.setState({focus: false, values: values}, () => {
+      this.setState({focus: false, values}, () => {
        if (this.props.onChange) this.props.onChange(this);
      });
    }
  }

  getValue () {
-    let values = [...this.state.values.keys()];
+    const values = [...this.state.values.keys()];
    return this.props.multiple ? values : (values.length > 0 ? values[0] : null);
  }

  setValue (dataParam = []) {
-    let values = new Map();
-    let data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
-    for (let [key, value] of this.state.dataSource) {
+    const values = new Map();
+    const data = (typeof dataParam === 'string') ? [dataParam] : dataParam;
+    for (const [key, value] of this.state.dataSource) {
      if (data.indexOf(key) !== -1) values.set(key, value);
    }
-    this.setState({values: values, query: this.props.multiple ? '' : values.get(data[0])});
+    this.setState({values, query: this.props.multiple ? '' : values.get(data[0])});
  }

  setError (data) {
--- a/components/card/index.jsx
+++ b/components/card/index.jsx
@ -30,7 +30,8 @@ class Card extends React.Component {
  };

  renderTitle () {
-    let styleFigure = {}, styleOverflow = {};
+    const styleFigure = {};
+    const styleOverflow = {};
    if (this.props.image) styleFigure.backgroundImage = `url(${this.props.image})`;
    if (this.props.color) {
      styleFigure.backgroundColor = this.props.color;
--- a/components/commons.scss
+++ b/components/commons.scss
@ -1,8 +1,17 @@
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
-@import "normalize.css";
+@import "~normalize.css";
@import "./base";

 //-- App
+.app {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+}
+
 html {
  font-size: 62.5%;
 }
@ -62,16 +71,6 @@ input:not([type="checkbox"]):not([type="radio"]), button {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }

-//-- App wrapper to allow overlays to block scroll
-[data-react-toolbox-app] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow-y: scroll;
-}
-
 // -- Material design font sizes
 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  @include typo-display-3($color-contrast: true);
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/index.jsx
@ -39,13 +39,13 @@ class Calendar extends React.Component {
  }

  handleDayClick = (day) => {
-    let newDate = utils.time.setDay(this.state.viewDate, day);
+    const 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);
+    const newDate = utils.time.setYear(this.state.selectedDate, year);
    this.setState({selectedDate: newDate, viewDate: newDate});
    if (this.props.onChange) this.props.onChange(newDate);
  };
@ -67,7 +67,7 @@ class Calendar extends React.Component {
  };

  renderYear (year) {
-    let props = {
+    const props = {
      className: year === this.state.viewDate.getFullYear() ? style.active : '',
      key: year,
      onClick: this.handleYearClick.bind(this, year)
@ -89,7 +89,7 @@ class Calendar extends React.Component {
  }

  renderMonths () {
-    let animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
+    const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
    return (
      <div data-react-toolbox='calendar'>
        <FontIcon className={style.prev} value='chevron-left' onMouseDown={this.decrementViewMonth}>
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@ -38,8 +38,7 @@ 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>
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/dialog.jsx
@ -24,7 +24,7 @@ class CalendarDialog extends React.Component {
  };

  handleCalendarChange = (date) => {
-    this.setState({date: date, display: 'months'});
+    this.setState({date, display: 'months'});
  };

  displayMonths = () => {
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/index.jsx
@ -26,7 +26,7 @@ class DatePicker extends React.Component {

  handleDateSelected = (value) => {
    this.refs.input.setValue(this.formatDate(value));
-    this.setState({value: value});
+    this.setState({value});
  };

  formatDate (date) {
@ -59,7 +59,7 @@ class DatePicker extends React.Component {
  }

  setValue (value) {
-    this.setState({value: value});
+    this.setState({value});
  }
 }

--- a/components/dropdown/index.jsx
+++ b/components/dropdown/index.jsx
@ -51,8 +51,8 @@ class Dropdown extends React.Component {
  }

  handleClick = (event) => {
-    let client = event.target.getBoundingClientRect();
-    let screen_height = window.innerHeight || document.documentElement.offsetHeight;
+    const client = event.target.getBoundingClientRect();
+    const screen_height = window.innerHeight || document.documentElement.offsetHeight;

    this.setState({
      active: true,
@ -62,8 +62,8 @@ class Dropdown extends React.Component {

  handleClickValue = (id) => {
    if (!this.props.disabled) {
-      let value = id.toString();
-      for (let item of this.props.dataSource) {
+      const value = id.toString();
+      for (const item of this.props.dataSource) {
        if (item.value.toString() === value) {
          this.setState({active: false, selected: item});
          break;
@ -73,7 +73,7 @@ class Dropdown extends React.Component {
  };

  renderValues () {
-    let items = this.props.dataSource.map((item, index) => {
+    const items = this.props.dataSource.map((item, index) => {
      let className;
      if (item.value === this.state.selected.value) className = ` ${style.selected}`;

@ -92,7 +92,7 @@ class Dropdown extends React.Component {

    let className = style.values;
    if (this.state.up) className += ` ${style.up}`;
-    let valuesStyle = {width: this.state.width};
+    const valuesStyle = {width: this.state.width};

    return <ul ref='values' className={className} style={valuesStyle}>{ items }</ul>;
  }
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@ -33,8 +33,8 @@ class Form extends React.Component {

  componentWillReceiveProps (next_props) {
    if (next_props.attributes) {
-      let attributes = this.storage(next_props);
-      this.setState({attributes: attributes});
+      const attributes = this.storage(next_props);
+      this.setState({attributes});
      this.setValue(attributes.map((item) => { return item; }));
    }
  }
@ -48,8 +48,8 @@ class Form extends React.Component {

  onChange = (event) => {
    let is_valid = true;
-    let value = this.getValue();
-    for (let attr of this.state.attributes) {
+    const value = this.getValue();
+    for (const attr of this.state.attributes) {
      if (attr.required && value[attr.ref] !== undefined && value[attr.ref].trim() === '') {
        is_valid = false;
        console.log('NOT VALUD');
@ -71,7 +71,7 @@ class Form extends React.Component {
  };

  render () {
-    let className = `${style.root} ${this.props.className}`;
+    const className = `${style.root} ${this.props.className}`;
    const attributes = this.state.attributes.map((attribute, index) => {
      if (attribute.type === 'autocomplete') {
        return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
@ -110,16 +110,16 @@ class Form extends React.Component {
  }

  storage (props, value) {
-    let key = `react-toolbox-form-${props.storage}`;
+    const key = `react-toolbox-form-${props.storage}`;
    if (value) {
-      let store = {};
-      for (let attr of props.attributes) {
+      const store = {};
+      for (const attr of props.attributes) {
        if (attr.storage) store[attr.ref] = value[attr.ref];
      }
      window.localStorage.setItem(key, JSON.stringify(store));
    } else if (props.storage) {
-      let store = JSON.parse(window.localStorage.getItem(key) || {});
-      for (let input of props.attributes) {
+      const store = JSON.parse(window.localStorage.getItem(key) || {});
+      for (const input of props.attributes) {
        if (store && store[input.ref]) {
          input.value = store[input.ref];
        }
@ -130,15 +130,15 @@ class Form extends React.Component {
  }

  getValue () {
-    let value = {};
-    for (let ref of Object.keys(this.refs)) {
-      let el = this.refs[ref];
+    const value = {};
+    for (const ref of Object.keys(this.refs)) {
+      const el = this.refs[ref];
      if (el.getValue) {
        if (ref.indexOf('.') === -1) {
          value[ref] = el.getValue();
        } else {
          let parent = value;
-          let hierarchy = ref.split('.');
+          const hierarchy = ref.split('.');
          hierarchy.forEach((attr, index) => {
            if (index === hierarchy.length - 1) {
              parent[attr] = el.getValue();
@ -155,7 +155,7 @@ class Form extends React.Component {
  }

  setValue (data = {}) {
-    for (let field of data) {
+    for (const field of data) {
      if (this.refs[field.ref].setValue) {
        this.refs[field.ref].setValue(field.value);
      }
--- a/components/index.js
+++ b/components/index.js
@ -1,4 +1,4 @@
-module.exports = {
+export default {
  Autocomplete: require('./autocomplete'),
  Button: require('./button'),
  Card: require('./card'),
--- a/components/input/index.jsx
+++ b/components/input/index.jsx
@ -100,7 +100,7 @@ class Input extends React.Component {
  }

  setValue (value) {
-    this.setState({value: value});
+    this.setState({value});
  }
 }

--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@ -44,13 +44,13 @@ class Menu extends React.Component {
  componentDidMount () {
    const { width, height } = this.refs.menu.getBoundingClientRect();
    const position = this.props.position === POSITION.AUTO ? this.calculatePosition() : this.props.position;
-    this.setState({position: position, width: width, height: height});
+    this.setState({ position, width, height });
  }

  componentWillReceiveProps (nextProps) {
    if (this.props.position !== nextProps.position) {
      const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
-      this.setState({ position: position });
+      this.setState({ position });
    }
  }

@ -58,7 +58,7 @@ class Menu extends React.Component {
    if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
      const position = this.calculatePosition();
      if (this.state.position !== position) {
-        this.setState({position: position, active: false}, () => {
+        this.setState({ position, active: false }, () => {
          setTimeout(() => {this.setState({active: true}); }, 20);
        });
        return false;
@ -89,8 +89,8 @@ class Menu extends React.Component {
  };

  handleSelect = (item) => {
-    let { value, onClick } = item.props;
-    this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
+    const { value, onClick } = item.props;
+    this.setState({ value, active: false, rippled: this.props.ripple }, () => {
      if (onClick) onClick();
      if (this.props.onSelect) this.props.onSelect(value, this);
    });
--- a/components/radio/radio_button.jsx
+++ b/components/radio/radio_button.jsx
@ -43,7 +43,7 @@ class RadioButton extends React.Component {

  render () {
    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    let radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
+    const radioClassName = style[this.props.checked ? 'radio-checked' : 'radio'];
    if (this.props.className) labelClassName += ` ${this.props.className}`;

    return (
--- a/components/radio/radio_group.jsx
+++ b/components/radio/radio_group.jsx
@ -20,7 +20,7 @@ class RadioGroup extends React.Component {
  };

  handleChange = (value, event) => {
-    this.setState({value: value}, () => {
+    this.setState({ value }, () => {
      if (this.props.onChange) this.props.onChange(event, this);
    });
  };
@ -54,7 +54,7 @@ class RadioGroup extends React.Component {
  }

  setValue (value) {
-    this.setState({value: value});
+    this.setState({ value });
  }
 }

--- a/components/ripple/index.jsx
+++ b/components/ripple/index.jsx
@ -29,8 +29,8 @@ class Ripple extends React.Component {
    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});
+      this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
+      this.setState({active: true, restarting: false, top, left, width});
    });
  };

@ -40,7 +40,7 @@ class Ripple extends React.Component {
  };

  _getDescriptor (pageX, pageY) {
-    let { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+    const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
    return {
      left: this.props.centered ? width / 2 : pageX - left,
      top: this.props.centered ? height / 2 : pageY - top,
@ -49,8 +49,8 @@ class Ripple extends React.Component {
  }

  render () {
-    let { left, top, width } = this.state;
-    let rippleStyle = {left: left, top: top, width: width, height: width};
+    const { left, top, width } = this.state;
+    const rippleStyle = {left, top, width, height: width};
    let className = style[this.props.loading ? 'loading' : 'normal'];
    if (this.state.active) className += ` ${style.active}`;
    if (this.state.restarting) className += ` ${style.restarting}`;
--- a/components/slider/tests/index.spec.jsx
+++ b/components/slider/tests/index.spec.jsx
@ -157,7 +157,7 @@ describe('Slider', function () {
    });

    it('calls onChange callback when the value is changed', function () {
-      let onChangeSpy = sinon.spy();
+      const onChangeSpy = sinon.spy();
      slider = utils.renderComponent(Slider, {onChange: onChangeSpy}, {sliderStart: 0, sliderLength: 1000});
      TestUtils.Simulate.mouseDown(slider.refs.slider, { pageX: 900 });
      expect(onChangeSpy.called).toEqual(true);
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@ -138,8 +138,8 @@ class Slider extends React.Component {
  }

  positionToValue (position) {
-    let { sliderStart: start, sliderLength: length } = this.state;
-    let { max, min } = this.props;
+    const { sliderStart: start, sliderLength: length } = this.state;
+    const { max, min } = this.props;
    return this.trimValue((position.x - start) / length * (max - min) + min);
  }

@ -163,7 +163,7 @@ class Slider extends React.Component {
  }

  knobOffset () {
-    let { max, min } = this.props;
+    const { max, min } = this.props;
    return this.state.sliderLength * (this.state.value - min) / (max - min);
  }

@ -194,7 +194,7 @@ class Slider extends React.Component {
  }

  render () {
-    let knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
+    const knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
    let className = this.props.className;
    if (this.props.editable) className += ` ${style.editable}`;
    if (this.props.pinned) className += ` ${style.pinned}`;
@ -246,7 +246,7 @@ class Slider extends React.Component {
  }

  setValue (value) {
-    this.setState({value: value});
+    this.setState({value});
  }
 }

--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@ -46,7 +46,7 @@ class Switch extends React.Component {

  render () {
    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    let switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
+    const switchClassName = style[this.state.checked ? 'switch-on' : 'switch-off'];
    if (this.props.className) labelClassName += ` ${this.props.className}`;

    return (
--- a/components/tabs/tabs.jsx
+++ b/components/tabs/tabs.jsx
@ -19,25 +19,25 @@ class Tabs extends React.Component {
  };

  componentDidMount () {
-    this.setState({
-      pointer: this._pointerPosition(this.state.index, this.refs.navigation)
-    });
+    setTimeout(() => {
+      this.setState({pointer: this._pointerPosition(this.state.index)});
+    }, 20);
  }

  componentWillReceiveProps (next_props) {
    const index = next_props.index || this.state.index;
    this.setState({
-      index: index,
-      pointer: this._pointerPosition(index, this.refs.navigation)
+      index,
+      pointer: this._pointerPosition(index)
    });
  }

-  _pointerPosition (index = 0, navigation) {
+  _pointerPosition (index = 0) {
    const startPoint = this.refs.tabs.getBoundingClientRect().left;
-    const label = navigation.children[index].getBoundingClientRect();
+    const label = this.refs.navigation.children[index].getBoundingClientRect();

    return {
-      top: `${navigation.getBoundingClientRect().height}px`,
+      top: `${this.refs.navigation.getBoundingClientRect().height}px`,
      left: `${label.left - startPoint}px`,
      width: `${label.width}px`
    };
@ -45,8 +45,8 @@ class Tabs extends React.Component {

  handleClick = (index) => {
    this.setState({
-      index: index,
-      pointer: this._pointerPosition(index, this.refs.navigation)
+      index,
+      pointer: this._pointerPosition(index)
    });
    if (this.props.onChange) this.props.onChange(this);
  };
@ -58,10 +58,10 @@ class Tabs extends React.Component {
  }

  render () {
-    let labels = [];
+    const labels = [];

    const tabs = this.props.children.map((tab, index) => {
-      let active = this.state.index === index;
+      const active = this.state.index === index;
      let className = `${style.label} ${tab.props.className}`;

      if (active) className += ` ${style.active}`;
@ -69,13 +69,13 @@ class Tabs extends React.Component {
      if (tab.props.hidden) className += ` ${style.hidden}`;

      labels.push({
-        className: className,
+        className,
        label: tab.props.label,
        key: index,
        onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
      });

-      return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
+      return React.cloneElement(tab, { active, key: index, tabIndex: index });
    });

    let className = style.root;
--- a/components/time_picker/clock/hand.jsx
+++ b/components/time_picker/clock/hand.jsx
@ -67,8 +67,8 @@ class Hand extends React.Component {
  }

  getPositionRadius (position) {
-    let x = this.props.origin.x - position.x;
-    let y = this.props.origin.y - position.y;
+    const x = this.props.origin.x - position.x;
+    const y = this.props.origin.y - position.y;
    return Math.sqrt(x * x + y * y);
  }

@ -86,14 +86,14 @@ class Hand extends React.Component {
  }

  move (position) {
-    let degrees = this.trimAngleToValue(this.positionToAngle(position));
-    let radius = this.getPositionRadius(position);
+    const degrees = this.trimAngleToValue(this.positionToAngle(position));
+    const radius = this.getPositionRadius(position);
    if (this.props.onMove) this.props.onMove(degrees === 360 ? 0 : degrees, radius);
  }

  render () {
    const className = `${style.hand} ${this.props.className}`;
-    let handStyle = utils.prefixer({
+    const handStyle = utils.prefixer({
      height: this.props.length - this.state.knobWidth / 2,
      transform: `rotate(${this.props.angle}deg)`
    });
--- a/components/time_picker/clock/hours.jsx
+++ b/components/time_picker/clock/hours.jsx
@ -21,7 +21,7 @@ class Hours extends React.Component {
  };

  handleHandMove = (degrees, radius) => {
-    let currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
+    const currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
    if (this.props.format === '24hr' && this.state.inner !== currentInner) {
      this.setState({inner: currentInner}, () => {
        this.props.onChange(this.valueFromDegrees(degrees));
--- a/components/time_picker/clock/index.jsx
+++ b/components/time_picker/clock/index.jsx
@ -52,7 +52,7 @@ class Clock extends React.Component {
  };

  handleCalculateShape = () => {
-    let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
+    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
    this.setState({
      center: { x: left + width / 2, y: top + width / 2 },
      radius: width / 2
--- a/components/time_picker/index.jsx
+++ b/components/time_picker/index.jsx
@ -62,7 +62,7 @@ class TimePicker extends React.Component {
  }

  setValue (value) {
-    this.setState({value: value});
+    this.setState({value});
  }
 }

--- a/components/utils/events.js
+++ b/components/utils/events.js
@ -22,13 +22,13 @@ module.exports = {
  },

  addEventsToDocument (eventMap) {
-    for (let key in eventMap) {
+    for (const key in eventMap) {
      document.addEventListener(key, eventMap[key], false);
    }
  },

  removeEventsFromDocument (eventMap) {
-    for (let key in eventMap) {
+    for (const key in eventMap) {
      document.removeEventListener(key, eventMap[key], false);
    }
  },
@ -40,6 +40,6 @@ module.exports = {
      node = node.parentNode;
    }
    return false;
-  },
+  }

 };
--- a/components/utils/index.js
+++ b/components/utils/index.js
@ -1,19 +1,22 @@
 module.exports = {

  angleFromPositions (cx, cy, ex, ey) {
-    let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
    return theta * 180 / Math.PI;
  },

  angle360FromPositions (cx, cy, ex, ey) {
-    let angle = this.angleFromPositions(cx, cy, ex, ey);
+    const angle = this.angleFromPositions(cx, cy, ex, ey);
    return angle < 0 ? 360 + angle : angle;
  },

  range (start = 0, stop = null, step = 1) {
-    let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
-    let length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    let range = Array(length);
+    let [_start, _stop] = [0, start];
+    if (stop !== null) {
+      [_start, _stop] = [start, stop];
+    }
+    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    const range = Array(length);

    for (let idx = 0; idx < length; idx++, _start += step) {
      range[idx] = _start;
@ -24,7 +27,7 @@ module.exports = {

  round (number, decimals) {
    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      let decimalPower = Math.pow(10, decimals);
+      const decimalPower = Math.pow(10, decimals);
      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
    }
    return NaN;
--- a/components/utils/prefixer.js
+++ b/components/utils/prefixer.js
@ -19,7 +19,7 @@ function getPrefixes (property, value) {
 function prefixer (style) {
  let _style = style;

-  for (let property in properties) {
+  for (const property in properties) {
    if (style[property]) {
      _style = Object.assign(_style, getPrefixes(property, style[property]));
    }
--- a/components/utils/testing.js
+++ b/components/utils/testing.js
@ -4,13 +4,13 @@ import TestUtils from 'react-addons-test-utils';
 module.exports = {

  renderComponent (Component, props = {}, state = {}) {
-    let component = TestUtils.renderIntoDocument(<Component {...props} />);
+    const component = TestUtils.renderIntoDocument(<Component {...props} />);
    if (state !== {}) { component.setState(state); }
    return component;
  },

  shallowRenderComponent (component, props, ...children) {
-    let shallowRenderer = TestUtils.createRenderer();
+    const shallowRenderer = TestUtils.createRenderer();
    shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
    return shallowRenderer.getRenderOutput();
  }
--- a/components/utils/time.js
+++ b/components/utils/time.js
@ -1,7 +1,7 @@
 module.exports = {

  getDaysInMonth (d) {
-    let resultDate = this.getFirstDayOfMonth(d);
+    const resultDate = this.getFirstDayOfMonth(d);
    resultDate.setMonth(resultDate.getMonth() + 1);
    resultDate.setDate(resultDate.getDate() - 1);
    return resultDate.getDate();
@ -20,7 +20,7 @@ module.exports = {
  },

  getFullMonth (d) {
-    let month = d.getMonth();
+    const month = d.getMonth();
    switch (month) {
      default: return 'Unknown';
      case 0: return 'January';
@ -39,7 +39,7 @@ module.exports = {
  },

  getShortMonth (d) {
-    let month = d.getMonth();
+    const month = d.getMonth();
    switch (month) {
      default: return 'Unknown';
      case 0: return 'Jan';
@ -88,7 +88,7 @@ module.exports = {
  },

  cloneAsDate (d) {
-    let clonedDate = this.clone(d);
+    const clonedDate = this.clone(d);
    clonedDate.setHours(0, 0, 0, 0);
    return clonedDate;
  },
@ -98,56 +98,56 @@ module.exports = {
  },

  addDays (d, days) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setDate(d.getDate() + days);
    return newDate;
  },

  addMonths (d, months) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setMonth(d.getMonth() + months);
    return newDate;
  },

  addYears (d, years) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setFullYear(d.getFullYear() + years);
    return newDate;
  },

  setDay (d, day) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setDate(day);
    return newDate;
  },

  setMonth (d, month) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setMonth(month);
    return newDate;
  },

  setYear (d, year) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setFullYear(year);
    return newDate;
  },

  setHours (d, hours) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setHours(hours);
    return newDate;
  },

  setMinutes (d, minutes) {
-    let newDate = this.clone(d);
+    const newDate = this.clone(d);
    newDate.setMinutes(minutes);
    return newDate;
  },

  toggleTimeMode (d) {
-    let newDate = this.clone(d);
-    let hours = newDate.getHours();
+    const newDate = this.clone(d);
+    const hours = newDate.getHours();

    newDate.setHours(hours - (hours > 12 ? -12 : 12));
    return newDate;
@ -158,8 +158,8 @@ module.exports = {
    let mins = date.getMinutes().toString();

    if (format === 'ampm') {
-      let isAM = hours < 12;
-      let additional = isAM ? ' am' : ' pm';
+      const isAM = hours < 12;
+      const additional = isAM ? ' am' : ' pm';

      hours = hours % 12;
      hours = (hours || 12).toString();
--- a/example/.gitignore
+++ b/example/.gitignore
@ -1,5 +0,0 @@
-build
-dist/**/*.css
-dist/**/*.js
-node_modules
-npm-debug.log
--- a/example/index.html
+++ b/example/index.html
@ -1,23 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Reack-Toolbox Example</title>
-    <meta name="description" content="A set of complementary tools to ReactJS.">
-    <meta name="author" content="@soyjavi">
-    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
-    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
-    <meta name="apple-mobile-web-app-title" content="Material Console">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="HandheldFriendly" content="True">
-    <meta http-equiv="cleartype" content="on">
-    <link href="./build/react-toolbox-example.commons.css" rel='stylesheet' type='text/css'>
-    <link href="./build/react-toolbox-example.test.css" rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <script src="./node_modules/react/dist/react-with-addons.js"></script>
-    <script src="./build/react-toolbox-example.test.js"></script>
-  </body>
-</html>
--- a/example/package.json
+++ b/example/package.json
@ -1,33 +0,0 @@
-{
-  "name": "react-toolbox-example",
-  "version": "0.6.28",
-  "description": "Sample project that uses react-toolbox",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/soyjavi/react-toolbox.git"
-  },
-  "scripts": {
-    "start": "npm run build & npm run server",
-    "server": "webpack-dev-server --hot",
-    "build": "webpack",
-    "watch": "webpack --watch",
-    "deploy": "NODE_ENV=production webpack -p"
-  },
-  "dependencies": {
-    "coffee-script": "*",
-    "react-toolbox": "^0.6.28",
-    "react": ">=0.13"
-  },
-  "devDependencies": {
-    "babel-core": "^5.8.23",
-    "babel-loader": "^5.3.2",
-    "babel-runtime": "^5.8.20",
-    "coffee-jsx-loader": "^0.1.2",
-    "css-loader": "^0.15.1",
-    "extract-text-webpack-plugin": "^0.8.2",
-    "node-libs-browser": "^0.5.2",
-    "style-loader": "^0.12.3",
-    "stylus-loader": "^1.2.1",
-    "webpack": "^1.9.11"
-  }
-}
--- a/example/src/app.jsx
+++ b/example/src/app.jsx
@ -1,31 +0,0 @@
-import React from 'react';
-
-// React-Toolbox full dependency way:
-// import {Button, Form} from 'react-toolbox'
-
-// Standalone dependencies way:
-import Button from 'react-toolbox/components/button';
-import Form from 'react-toolbox/components/form';
-
-class App extends React.Component {
-  state = {
-    fields: [
-      { ref: 'username', label: 'Your username', required: true},
-      { ref: 'password', type: 'password', label: 'Your password', required: true},
-      { type: 'submit', label: 'Login', disabled: true}
-    ]
-  };
-
-  render () {
-    return (
-      <app data-toolbox={true}>
-        <h1>Hello React-Toolbox</h1>
-        <Form attributes={this.state.fields} />
-        <Button label='Hello world!' type='square' style='primary'/>
-        <Button icon='adb' type='circle' style='accent' />
-      </app>
-    );
-  }
-}
-
-React.render(<App />, document.body);
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@ -1,36 +0,0 @@
-var pkg = require('./package.json');
-var node_modules = __dirname + '/node_modules';
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var environment = process.env.NODE_ENV;
-
-module.exports = {
-  cache: true,
-  resolve: {
-    extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
-  },
-  context: __dirname,
-  entry: {
-    commons: ['./node_modules/react-toolbox/components/commons.styl'],
-    test: ['webpack/hot/dev-server', './src/app.jsx']
-  },
-  output: {
-    path: environment === 'production' ? './dist' : './build',
-    filename: pkg.name + '.[name].js',
-    publicPath: '/build/'
-  },
-  devServer: {
-    host: '0.0.0.0',
-    port: 8080,
-    inline: true
-  },
-  module: {
-    noParse: [node_modules + '/react/dist/*.js'],
-    loaders: [
-      { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel?optional=runtime&stage=0&loose=all'},
-      { test: /\.cjsx$/, loader: 'coffee-jsx-loader'},
-      { test: /\.coffee$/, loader: 'coffee-jsx-loader'},
-      { test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!')}
-    ]
-  },
-  plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
-};
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,7 +1,4 @@
-require('webpack');
-
-var pkg = require('./package.json');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const webpackConfig = require('./webpack.config.test');

 module.exports = function (config) {
  config.set({
@ -15,17 +12,7 @@ module.exports = function (config) {
    ],
    reporters: ['dots'],
    preprocessors: {'tests.webpack.js': ['webpack']},
-    webpack: {
-      resolve: { extensions: ['', '.jsx', '.scss', '.js', '.json'] },
-      module: {
-        loaders: [
-          { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel' },
-          { test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') },
-        ]
-      },
-      watch: true,
-      plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
-    },
+    webpack: webpackConfig,
    webpackServer: {
      noInfo: true
    }
--- a/package.json
+++ b/package.json
@ -15,21 +15,16 @@
      "email": "javier.velasco86@gmail.com"
    }
  ],
-  "style": "commons.scss",
-  "main": "./components",
-  "directories": {
-    "react-toolbox": "./react-toolbox/components"
-  },
+  "main": "./lib",
  "scripts": {
-    "start": "npm run build & webpack-dev-server --hot",
-    "build": "npm run clean && webpack",
-    "watch": "webpack --watch",
-    "lint": "eslint ./components/**/*.jsx",
-    "deploy": "NODE_ENV=production webpack -p",
-    "babel": "babel --stage 0 --optional es7.classProperties ./components --out-dir ./lib",
-    "sass": "sass --update components:lib --sourcemap=none",
-    "dist": "npm run babel && npm run sass",
-    "clean": "rm -rf dist",
+    "start": "node ./server",
+    "babel": "babel ./components --out-dir ./lib",
+    "build": "npm run lint && npm run babel && npm run sass",
+    "clean": "rimraf ./lib",
+    "lint": "eslint ./components ./spec ./example --ext .js,.jsx",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "sass": "node-sass ./components -o ./lib",
    "test": "karma start",
    "test:watch": "karma start --no-single-run"
  },
@ -47,19 +42,20 @@
  "license": "MIT",
  "peerDependencies": {
    "react": "^0.14",
-    "react-dom": "^0.14.0"
+    "react-dom": "^0.14.0",
+    "react-addons-css-transition-group": "^0.14.0",
+    "normalize.css": "^3.0.3"
  },
  "devDependencies": {
-    "autoprefixer-core": "^5.1.11",
+    "autoprefixer": "^6.0.3",
+    "babel": "^5.8.23",
    "babel-core": "^5.8.23",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^5.3.2",
-    "babel-runtime": "^5.8.20",
-    "css-loader": "^0.16.0",
-    "eslint": "^1.3.1",
+    "css-loader": "^0.21.0",
+    "eslint": "^1.7.3",
    "eslint-plugin-react": "^3.3.1",
    "expect": "^1.8.0",
-    "extract-text-webpack-plugin": "^0.8.1",
    "karma": "^0.13.3",
    "karma-chrome-launcher": "^0.2.0",
    "karma-cli": "^0.1.0",
@ -71,15 +67,16 @@
    "node-sass": "^3.3.3",
    "normalize.css": "^3.0.3",
    "phantomjs-polyfill": "0.0.1",
-    "postcss-loader": "^0.4.3",
+    "postcss-loader": "^0.7.0",
    "react": "^0.14",
-    "react-dom": "^0.14.0",
    "react-addons-css-transition-group": "^0.14.0",
    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0",
    "react-hot-loader": "^1.3.0",
-    "sass-loader": "^2.0.1",
+    "rimraf": "^2.4.3",
+    "sass-loader": "^3.0.0",
    "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
-    "style-loader": "^0.12.3",
+    "style-loader": "^0.13.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.12.1"
  },
--- a/server.js
+++ b/server.js
@ -0,0 +1,20 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const config = require('./webpack.config.development');
+const devServer = {
+  host: '0.0.0.0',
+  port: 8080,
+  inline: true
+};
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  historyApiFallback: false,
+  stats: {
+    colors: true
+  }
+}).listen(devServer.port, devServer.host, (err) => {
+  if (err) console.error(err);
+  console.log(`Listening at ${devServer.host}:${devServer.port}`);
+  console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
+});
--- a/spec/app.jsx
+++ b/spec/app.jsx
@ -0,0 +1,52 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import commons from '../components/commons';
+import Autocomplete from './components/autocomplete';
+import Button from './components/button';
+import Card from './components/card';
+import Checkbox from './components/checkbox';
+import Dialog from './components/dialog';
+import Drawer from './components/drawer';
+import Dropdown from './components/dropdown';
+import IconMenu from './components/icon_menu';
+import Input from './components/input';
+import List from './components/list';
+import Menu from './components/menu';
+import Pickers from './components/pickers';
+import Progress from './components/progress';
+import Radio from './components/radio';
+import Snackbar from './components/snackbar';
+import Slider from './components/slider';
+import Switch from './components/switch';
+import Tabs from './components/tabs';
+import style from './style';
+
+const App = () => {
+  return (
+    <app className={`${commons.app} ${style.app}`}>
+      <h1>React Toolbox</h1>
+      <h3>Component Spec v0.10.20</h3>
+
+      <Autocomplete />
+      <Button />
+      <Card />
+      <Checkbox />
+      <Dialog />
+      <Drawer />
+      <Dropdown />
+      <IconMenu />
+      <Input />
+      <List />
+      <Menu />
+      <Pickers />
+      <Progress />
+      <Radio />
+      <Slider />
+      <Snackbar />
+      <Switch />
+      <Tabs />
+    </app>
+  );
+};
+
+export default App;
--- a/spec/components/pickers.jsx
+++ b/spec/components/pickers.jsx
@ -4,7 +4,7 @@ import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';

 const PickersTest = () => {
-  let datetime = new Date(1995, 11, 17);
+  const datetime = new Date(1995, 11, 17);
  datetime.setHours(17);
  datetime.setMinutes(28);

--- a/spec/index.html
+++ b/spec/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8">
-    <title>React-Toolbox</title>
+    <title>React Toolbox - Spec</title>
    <meta name="description" content="A set of complementary tools to ReactJS.">
    <meta name="author" content="@soyjavi">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
@ -13,21 +13,9 @@
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta http-equiv="cleartype" content="on">
-    <link href="../build/react-toolbox.commons.css" rel='stylesheet' type='text/css'>
-    <link href="../build/react-toolbox.test.css" rel='stylesheet' type='text/css'>
-    <style>
-      app { padding: 1.6rem; }
-      app > h1, app > h3 { line-height: 100%; }
-      app h5 { margin-top: 3.2rem; }
-      app p { margin-bottom: 1rem; opacity: 0.5;}
-      app [data-react-toolbox='card'] {
-        margin: 1.6rem 1.6rem 0 0;
-        display: inline-block;
-      }
-    </style>
  </head>
  <body>
    <div id="toolbox-test"></div>
-    <script src="../build/react-toolbox.test.js"></script>
+    <script src="/build/spec.js"></script>
  </body>
 </html>
--- a/spec/index.jsx
+++ b/spec/index.jsx
@ -1,52 +1,6 @@
 /*eslint-disable no-unused-vars*/
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import Autocomplete from './components/autocomplete';
-import Button from './components/button';
-import Card from './components/card';
-import Checkbox from './components/checkbox';
-import Dialog from './components/dialog';
-import Drawer from './components/drawer';
-import Dropdown from './components/dropdown';
-import IconMenu from './components/icon_menu';
-import Input from './components/input';
-import List from './components/list';
-import Menu from './components/menu';
-import Pickers from './components/pickers';
-import Progress from './components/progress';
-import Radio from './components/radio';
-import Snackbar from './components/snackbar';
-import Slider from './components/slider';
-import Switch from './components/switch';
-import Tabs from './components/tabs';
-
-const App = () => {
-  return (
-    <app data-react-toolbox-app>
-      <h1>React Toolbox</h1>
-      <h3>Component Spec v0.10.20</h3>
-
-      <Autocomplete />
-      <Button />
-      <Card />
-      <Checkbox />
-      <Dialog />
-      <Drawer />
-      <Dropdown />
-      <IconMenu />
-      <Input />
-      <List />
-      <Menu />
-      <Pickers />
-      <Progress />
-      <Radio />
-      <Slider />
-      <Snackbar />
-      <Switch />
-      <Tabs />
-    </app>
-  );
-};
+import App from './app';

 ReactDOM.render(<App/>, document.getElementById('toolbox-test'));
--- a/spec/style.scss
+++ b/spec/style.scss
@ -0,0 +1,16 @@
+.app {
+  padding: 1.6rem;
+  > h1, > h3 {
+    line-height: 100%;
+  }
+  h5 {
+    margin-top: 3.2rem;
+  }
+  p {
+    margin-bottom: 1rem;
+  }
+  [data-react-toolbox='card'] {
+    display: inline-block;
+    margin: 1.6rem 1.6rem 0 0;
+  }
+}
--- a/tests.webpack.js
+++ b/tests.webpack.js
@ -1,2 +1,2 @@
-var context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
+const context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
 context.keys().forEach(context);
--- a/webpack.config.development.js
+++ b/webpack.config.development.js
@ -0,0 +1,42 @@
+const path = require('path');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const devServer = 'http://0.0.0.0:8080';
+
+module.exports = {
+  context: __dirname,
+  devtool: '#eval-source-map',
+  entry: [
+    'webpack-dev-server/client?' + devServer,
+    'webpack/hot/only-dev-server',
+    './spec/index.jsx'
+  ],
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'spec.js',
+    publicPath: '/build/'
+  },
+  resolve: {
+    extensions: ['', '.jsx', '.scss', '.js', '.json']
+  },
+  module: {
+    loaders: [
+      {
+        test: /(\.js|\.jsx)$/,
+        exclude: /(node_modules)/,
+        loader: 'react-hot!babel'
+      }, {
+        test: /(\.scss|\.css)$/,
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
+      }
+    ]
+  },
+  postcss: [autoprefixer],
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ]
+};
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,35 +0,0 @@
-var pkg = require('./package.json');
-var node_modules = __dirname + '/node_modules';
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var environment = process.env.NODE_ENV;
-
-module.exports = {
-  cache: true,
-  resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json']
-  },
-  context: __dirname,
-  entry: {
-    commons: ['./components/commons'],
-    test: ['webpack/hot/dev-server', './spec/index.jsx']
-  },
-  output: {
-    path: environment === 'production' ? './dist' : './build',
-    filename: pkg.name + '.[name].js',
-    publicPath: '/build/'
-  },
-  devServer: {
-    host: '0.0.0.0',
-    port: 8080,
-    inline: true
-  },
-  module: {
-    noParse: [node_modules + '/react/dist/*.js'],
-    loaders: [
-      { test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loaders: ['babel'] },
-      { test: /(\.scss|\.css)$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass') }
-    ]
-  },
-  postcss: [require('autoprefixer-core')],
-  plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: true})]
-};
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@ -0,0 +1,27 @@
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /(\.js|\.jsx)$/,
+        exclude: /(node_modules)/,
+        loader: 'react-hot!babel'
+      }, {
+        test: /(\.scss|\.css)$/,
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.jsx', '.scss', '.js', '.json']
+  },
+  watch: true,
+  postcss: [autoprefixer],
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('test')
+    })
+  ]
+};