From 1611b491fa4c21ec2d669cb017e02e5b848ba335 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Sun, 22 Nov 2015 19:20:05 +0100
Subject: [PATCH] Rename some components to new naming approach

---
 .babelrc                                      |  2 +-
 .eslintrc                                     | 29 ++++++-
 components/app/{index.jsx => App.jsx}         |  1 +
 components/app/index.js                       |  1 +
 components/app_bar/{index.jsx => AppBar.jsx}  |  1 +
 components/app_bar/index.js                   |  1 +
 .../{index.jsx => Autocomplete.jsx}           |  8 +-
 components/autocomplete/index.js              |  1 +
 components/button/{index.jsx => Button.jsx}   |  2 +
 components/button/index.js                    |  1 +
 components/card/{index.jsx => Card.jsx}       | 13 +--
 components/card/index.js                      |  1 +
 .../checkbox/{index.jsx => Checkbox.jsx}      | 18 ++---
 components/checkbox/index.js                  |  1 +
 .../date_picker/{index.jsx => DatePicker.jsx} |  4 +-
 .../{dialog.jsx => DatePickerDialog.jsx}      |  2 +-
 .../calendar/{index.jsx => Calendar.jsx}      | 14 ++--
 components/date_picker/calendar/index.js      |  1 +
 components/date_picker/calendar/month.jsx     | 10 +--
 components/date_picker/index.js               |  1 +
 components/dialog/{index.jsx => Dialog.jsx}   |  9 ++-
 components/dialog/index.js                    |  1 +
 components/drawer/{index.jsx => Drawer.jsx}   |  3 +-
 components/drawer/index.js                    |  1 +
 .../dropdown/{index.jsx => Dropdown.jsx}      |  8 +-
 components/dropdown/index.js                  |  1 +
 .../font_icon/{index.jsx => FontIcon.jsx}     |  1 +
 components/font_icon/index.js                 |  1 +
 components/form/{index.jsx => Form.jsx}       | 79 ++++++++++---------
 components/form/index.js                      |  1 +
 components/input/{index.jsx => Input.jsx}     | 26 +++---
 components/input/index.js                     |  1 +
 components/link/{index.jsx => Link.jsx}       |  6 +-
 components/link/index.js                      |  1 +
 components/list/checkbox.jsx                  |  2 +-
 components/list/content.jsx                   |  2 +-
 components/list/index.jsx                     | 12 ++-
 components/list/item.jsx                      | 14 ++--
 components/list/list.jsx                      |  3 +-
 components/list/subheader.jsx                 |  3 +-
 .../menu/{icon_menu.jsx => IconMenu.jsx}      |  9 ++-
 .../{menu_divider.jsx => MenuDivider.jsx}     |  0
 .../menu/{menu_item.jsx => MenuItem.jsx}      | 11 +--
 components/menu/index.jsx                     | 15 +---
 components/menu/menu.jsx                      | 45 +++++------
 45 files changed, 201 insertions(+), 166 deletions(-)
 rename components/app/{index.jsx => App.jsx} (92%)
 create mode 100644 components/app/index.js
 rename components/app_bar/{index.jsx => AppBar.jsx} (94%)
 create mode 100644 components/app_bar/index.js
 rename components/autocomplete/{index.jsx => Autocomplete.jsx} (95%)
 create mode 100644 components/autocomplete/index.js
 rename components/button/{index.jsx => Button.jsx} (97%)
 create mode 100644 components/button/index.js
 rename components/card/{index.jsx => Card.jsx} (82%)
 create mode 100644 components/card/index.js
 rename components/checkbox/{index.jsx => Checkbox.jsx} (94%)
 create mode 100644 components/checkbox/index.js
 rename components/date_picker/{index.jsx => DatePicker.jsx} (95%)
 rename components/date_picker/{dialog.jsx => DatePickerDialog.jsx} (98%)
 rename components/date_picker/calendar/{index.jsx => Calendar.jsx} (88%)
 create mode 100644 components/date_picker/calendar/index.js
 create mode 100644 components/date_picker/index.js
 rename components/dialog/{index.jsx => Dialog.jsx} (85%)
 create mode 100644 components/dialog/index.js
 rename components/drawer/{index.jsx => Drawer.jsx} (92%)
 create mode 100644 components/drawer/index.js
 rename components/dropdown/{index.jsx => Dropdown.jsx} (86%)
 create mode 100644 components/dropdown/index.js
 rename components/font_icon/{index.jsx => FontIcon.jsx} (93%)
 create mode 100644 components/font_icon/index.js
 rename components/form/{index.jsx => Form.jsx} (98%)
 create mode 100644 components/form/index.js
 rename components/input/{index.jsx => Input.jsx} (87%)
 create mode 100644 components/input/index.js
 rename components/link/{index.jsx => Link.jsx} (70%)
 create mode 100644 components/link/index.js
 rename components/menu/{icon_menu.jsx => IconMenu.jsx} (89%)
 rename components/menu/{menu_divider.jsx => MenuDivider.jsx} (100%)
 rename components/menu/{menu_item.jsx => MenuItem.jsx} (76%)

diff --git a/.babelrc b/.babelrc
index e0e22ee7..99113d59 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "stage": 2,
+  "stage": 1,
   "optional": ["es7.classProperties"],
   "env": {
     "development": {
diff --git a/.eslintrc b/.eslintrc
index deff2827..5b38b7a8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -210,9 +210,30 @@
     "yoda": [2, "never", {
       "exceptRange": true
     }],
-    "react/jsx-uses-react": [2],
-    "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2],
-    "babel/object-shorthand": [2]
+    "babel/object-shorthand": [2],
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-sort-prop-types": 1,
+    "react/jsx-sort-props": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-unknown-property": 1,
+    "react/prop-types": [2, {"ignore": ["onMouseDown", "onTouchStart"]}],
+    "react/react-in-jsx-scope": 1,
+    "react/require-extension": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/wrap-multilines": 1
   }
 }
diff --git a/components/app/index.jsx b/components/app/App.jsx
similarity index 92%
rename from components/app/index.jsx
rename to components/app/App.jsx
index ca8a1166..e0227326 100644
--- a/components/app/index.jsx
+++ b/components/app/App.jsx
@@ -3,6 +3,7 @@ import style from './style';
 
 class App extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string
   };
 
diff --git a/components/app/index.js b/components/app/index.js
new file mode 100644
index 00000000..efe99548
--- /dev/null
+++ b/components/app/index.js
@@ -0,0 +1 @@
+export default from './App.jsx';
diff --git a/components/app_bar/index.jsx b/components/app_bar/AppBar.jsx
similarity index 94%
rename from components/app_bar/index.jsx
rename to components/app_bar/AppBar.jsx
index f53601fe..95d2832e 100644
--- a/components/app_bar/index.jsx
+++ b/components/app_bar/AppBar.jsx
@@ -15,6 +15,7 @@ const AppBar = (props) => {
 };
 
 AppBar.propTypes = {
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   fixed: React.PropTypes.bool,
   flat: React.PropTypes.bool
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
new file mode 100644
index 00000000..f3e152c0
--- /dev/null
+++ b/components/app_bar/index.js
@@ -0,0 +1 @@
+export default from './AppBar.jsx';
diff --git a/components/autocomplete/index.jsx b/components/autocomplete/Autocomplete.jsx
similarity index 95%
rename from components/autocomplete/index.jsx
rename to components/autocomplete/Autocomplete.jsx
index 604c20f2..7a6bcbf4 100644
--- a/components/autocomplete/index.jsx
+++ b/components/autocomplete/Autocomplete.jsx
@@ -87,7 +87,7 @@ class Autocomplete extends React.Component {
     if (this.props.direction === 'auto') {
       const client = ReactDOM.findDOMNode(this.refs.input).getBoundingClientRect();
       const screen_height = window.innerHeight || document.documentElement.offsetHeight;
-      const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
+      const up = client.top > ((screen_height / 2) + client.height);
       return up ? 'up' : 'down';
     } else {
       return this.props.direction;
@@ -179,8 +179,8 @@ class Autocomplete extends React.Component {
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
-        { this.renderSelected() }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
+        {this.renderSelected()}
         <Input
           ref='input'
           {...this.props}
@@ -192,7 +192,7 @@ class Autocomplete extends React.Component {
           onKeyUp={this.handleQueryKeyUp}
           value={this.state.query}
         />
-        { this.renderSuggestions() }
+        {this.renderSuggestions()}
       </div>
     );
   }
diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
new file mode 100644
index 00000000..cd659a51
--- /dev/null
+++ b/components/autocomplete/index.js
@@ -0,0 +1 @@
+export default from './Autocomplete.jsx';
diff --git a/components/button/index.jsx b/components/button/Button.jsx
similarity index 97%
rename from components/button/index.jsx
rename to components/button/Button.jsx
index e4dd1706..286710c9 100644
--- a/components/button/index.jsx
+++ b/components/button/Button.jsx
@@ -8,10 +8,12 @@ import events from '../utils/events';
 class Button extends React.Component {
   static propTypes = {
     accent: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
+    href: React.PropTypes.string,
     icon: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
diff --git a/components/button/index.js b/components/button/index.js
new file mode 100644
index 00000000..7a4ebccc
--- /dev/null
+++ b/components/button/index.js
@@ -0,0 +1 @@
+export default from './Button.jsx';
diff --git a/components/card/index.jsx b/components/card/Card.jsx
similarity index 82%
rename from components/card/index.jsx
rename to components/card/Card.jsx
index 65fbfd96..c06c439d 100644
--- a/components/card/index.jsx
+++ b/components/card/Card.jsx
@@ -11,6 +11,7 @@ class Card extends React.Component {
     image: React.PropTypes.string,
     loading: React.PropTypes.bool,
     onClick: React.PropTypes.func,
+    subtitle: React.PropTypes.string,
     text: React.PropTypes.string,
     title: React.PropTypes.string,
     type: React.PropTypes.oneOf(['wide', 'event', 'image'])
@@ -49,9 +50,9 @@ class Card extends React.Component {
     if (this.props.title || this.props.image) {
       return (
         <figure className={style.figure} style={styleFigure}>
-          { this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
-          { this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
-          { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
+          {this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null}
+          {this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null}
+          {this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null}
         </figure>
       );
     }
@@ -72,9 +73,9 @@ class Card extends React.Component {
         className={className}
         onMouseDown={this.handleMouseDown}
       >
-        { this.renderTitle() }
-        { this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
-        { this.renderActions() }
+        {this.renderTitle()}
+        {this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null}
+        {this.renderActions()}
         <Ripple
           ref='ripple'
           className={style.ripple}
diff --git a/components/card/index.js b/components/card/index.js
new file mode 100644
index 00000000..de126c79
--- /dev/null
+++ b/components/card/index.js
@@ -0,0 +1 @@
+export default from './Card.jsx';
diff --git a/components/checkbox/index.jsx b/components/checkbox/Checkbox.jsx
similarity index 94%
rename from components/checkbox/index.jsx
rename to components/checkbox/Checkbox.jsx
index 882cd5d8..17d4ba98 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/Checkbox.jsx
@@ -38,6 +38,14 @@ class Checkbox extends React.Component {
     }
   };
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     let fieldClassName = style.field;
     let checkboxClassName = style.check;
@@ -61,18 +69,10 @@ class Checkbox extends React.Component {
         <span data-role='checkbox' className={checkboxClassName} onMouseDown={this.handleMouseDown}>
           <Ripple ref='ripple' data-role='ripple' className={style.ripple} spread={3} centered />
         </span>
-        { this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null }
+        {this.props.label ? <span data-role='label' className={style.text}>{this.props.label}</span> : null}
       </label>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Checkbox;
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
new file mode 100644
index 00000000..626810b3
--- /dev/null
+++ b/components/checkbox/index.js
@@ -0,0 +1 @@
+export default from './Checkbox.jsx';
diff --git a/components/date_picker/index.jsx b/components/date_picker/DatePicker.jsx
similarity index 95%
rename from components/date_picker/index.jsx
rename to components/date_picker/DatePicker.jsx
index 82a6b07a..a6096754 100644
--- a/components/date_picker/index.jsx
+++ b/components/date_picker/DatePicker.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import CalendarDialog from './dialog';
+import CalendarDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
 import style from './style';
@@ -42,7 +42,7 @@ class DatePicker extends React.Component {
           className={style.input}
           onMouseDown={this.handleInputMouseDown}
           label={this.props.label}
-          readOnly={true}
+          readOnly
           type='text'
           value={date}
         />
diff --git a/components/date_picker/dialog.jsx b/components/date_picker/DatePickerDialog.jsx
similarity index 98%
rename from components/date_picker/dialog.jsx
rename to components/date_picker/DatePickerDialog.jsx
index 6df5cfa5..ee6f0845 100644
--- a/components/date_picker/dialog.jsx
+++ b/components/date_picker/DatePickerDialog.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Calendar from './calendar';
-import Dialog from '../dialog';
+import Dialog from '../Dialog';
 import style from './style';
 import time from '../utils/time';
 
diff --git a/components/date_picker/calendar/index.jsx b/components/date_picker/calendar/Calendar.jsx
similarity index 88%
rename from components/date_picker/calendar/index.jsx
rename to components/date_picker/calendar/Calendar.jsx
index deaded3f..5b8cf104 100644
--- a/components/date_picker/calendar/index.jsx
+++ b/components/date_picker/calendar/Calendar.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import CSSTransitionGroup from 'react-addons-css-transition-group';
+import CssTransitionGroup from 'react-addons-css-transition-group';
 import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
-import Month from './month';
+import Month from './Month';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
 import style from './style';
@@ -77,13 +77,13 @@ class Calendar extends React.Component {
       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>
     );
   }
@@ -98,7 +98,7 @@ class Calendar extends React.Component {
         <FontIcon className={style.next} value='chevron-right' onMouseDown={this.incrementViewMonth}>
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
-        <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
+        <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
             maxDate={this.props.maxDate}
@@ -106,7 +106,7 @@ class Calendar extends React.Component {
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
-        </CSSTransitionGroup>
+        </CssTransitionGroup>
       </div>
     );
   }
@@ -114,7 +114,7 @@ class Calendar extends React.Component {
   render () {
     return (
       <div className={style.root}>
-        { this.props.display === 'months' ? this.renderMonths() : this.renderYears() }
+        {this.props.display === 'months' ? this.renderMonths() : this.renderYears()}
       </div>
     );
   }
diff --git a/components/date_picker/calendar/index.js b/components/date_picker/calendar/index.js
new file mode 100644
index 00000000..0efaa9a6
--- /dev/null
+++ b/components/date_picker/calendar/index.js
@@ -0,0 +1 @@
+export default from './Calendar.jsx';
diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx
index 091ae187..ac75eaa2 100644
--- a/components/date_picker/calendar/month.jsx
+++ b/components/date_picker/calendar/month.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import time from '../../utils/time';
 import utils from '../../utils/utils';
-import Day from './day';
+import Day from './Day';
 import style from './style';
 
 class Month extends React.Component {
@@ -19,7 +19,7 @@ class Month extends React.Component {
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
+      return <span key={i}>{time.getFullDayOfWeek(i).charAt(0)}</span>;
     });
   }
 
@@ -45,10 +45,10 @@ class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+          {time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear()}
         </span>
-        <div className={style.week}>{ this.renderWeeks() }</div>
-        <div className={style.days}>{ this.renderDays() }</div>
+        <div className={style.week}>{this.renderWeeks()}</div>
+        <div className={style.days}>{this.renderDays()}</div>
       </div>
     );
   }
diff --git a/components/date_picker/index.js b/components/date_picker/index.js
new file mode 100644
index 00000000..38f9dabe
--- /dev/null
+++ b/components/date_picker/index.js
@@ -0,0 +1 @@
+export default from './DatePicker.jsx';
diff --git a/components/dialog/index.jsx b/components/dialog/Dialog.jsx
similarity index 85%
rename from components/dialog/index.jsx
rename to components/dialog/Dialog.jsx
index 921820e0..8a4cede4 100644
--- a/components/dialog/index.jsx
+++ b/components/dialog/Dialog.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '../button';
 import Overlay from '../overlay';
-import style from './style';
+import style from './style.scss';
 
 const Dialog = (props) => {
   const actions = props.actions.map((action, idx) => {
@@ -18,11 +18,11 @@ const Dialog = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
-          { props.title ? <h6 className={style.title}>{props.title}</h6> : null }
-          { props.children }
+          {props.title ? <h6 className={style.title}>{props.title}</h6> : null}
+          {props.children}
         </section>
         <nav role='navigation' className={style.navigation}>
-          { actions }
+          {actions}
         </nav>
       </div>
     </Overlay>
@@ -32,6 +32,7 @@ const Dialog = (props) => {
 Dialog.propTypes = {
   actions: React.PropTypes.array,
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   title: React.PropTypes.string,
diff --git a/components/dialog/index.js b/components/dialog/index.js
new file mode 100644
index 00000000..074f9e1f
--- /dev/null
+++ b/components/dialog/index.js
@@ -0,0 +1 @@
+export default from './Dialog.jsx';
diff --git a/components/drawer/index.jsx b/components/drawer/Drawer.jsx
similarity index 92%
rename from components/drawer/index.jsx
rename to components/drawer/Drawer.jsx
index 83ce1489..ec74071f 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/Drawer.jsx
@@ -11,7 +11,7 @@ const Drawer = (props) => {
     <Overlay active={props.active} onClick={props.onOverlayClick}>
       <div data-react-toolbox='drawer' className={className}>
         <aside className={style.content}>
-          { props.children }
+          {props.children}
         </aside>
       </div>
     </Overlay>
@@ -20,6 +20,7 @@ const Drawer = (props) => {
 
 Drawer.propTypes = {
   active: React.PropTypes.bool,
+  children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   type: React.PropTypes.oneOf(['left', 'right'])
diff --git a/components/drawer/index.js b/components/drawer/index.js
new file mode 100644
index 00000000..631e1dd3
--- /dev/null
+++ b/components/drawer/index.js
@@ -0,0 +1 @@
+export default from './Drawer.jsx';
diff --git a/components/dropdown/index.jsx b/components/dropdown/Dropdown.jsx
similarity index 86%
rename from components/dropdown/index.jsx
rename to components/dropdown/Dropdown.jsx
index 8e2c929c..86638528 100644
--- a/components/dropdown/index.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -52,7 +52,7 @@ class Dropdown extends React.Component {
     const className = item.value === this.props.value ? style.selected : null;
     return (
       <li key={idx} className={className} onMouseDown={this.handleSelect.bind(this, item.value)}>
-        { this.props.template ? this.props.template(item) : item.label }
+        {this.props.template ? this.props.template(item) : item.label}
       </li>
     );
   }
@@ -67,14 +67,14 @@ class Dropdown extends React.Component {
 
     return (
       <div data-react-toolbox='dropdown' className={className}>
-        { this.props.label ? <label className={style.label}>{this.props.label}</label> : null }
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : null}
 
         <ul ref='values' className={style.values}>
-          { this.props.source.map(this.renderItem.bind(this)) }
+          {this.props.source.map(this.renderItem.bind(this))}
         </ul>
 
         <div ref='value' className={style.value} onClick={this.handleClick}>
-          { this.props.template ? this.props.template(selected) : <span>{selected.label}</span> }
+          {this.props.template ? this.props.template(selected) : <span>{selected.label}</span>}
         </div>
       </div>
     );
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
new file mode 100644
index 00000000..dccf96d9
--- /dev/null
+++ b/components/dropdown/index.js
@@ -0,0 +1 @@
+export default from './Dropdown.jsx';
diff --git a/components/font_icon/index.jsx b/components/font_icon/FontIcon.jsx
similarity index 93%
rename from components/font_icon/index.jsx
rename to components/font_icon/FontIcon.jsx
index ab9acedd..3e7e6fdf 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -12,6 +12,7 @@ const FontIcon = props => {
 };
 
 FontIcon.propTypes = {
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
   value: React.PropTypes.string
 };
diff --git a/components/font_icon/index.js b/components/font_icon/index.js
new file mode 100644
index 00000000..f4a63e7e
--- /dev/null
+++ b/components/font_icon/index.js
@@ -0,0 +1 @@
+export default from './FontIcon.jsx';
diff --git a/components/form/index.jsx b/components/form/Form.jsx
similarity index 98%
rename from components/form/index.jsx
rename to components/form/Form.jsx
index 1de528dc..9cdd3cca 100644
--- a/components/form/index.jsx
+++ b/components/form/Form.jsx
@@ -14,6 +14,7 @@ import TimePicker from '../time_picker';
 class Form extends React.Component {
   static propTypes = {
     attributes: React.PropTypes.array,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onChange: React.PropTypes.func,
     onError: React.PropTypes.func,
@@ -69,45 +70,6 @@ class Form extends React.Component {
     }
   };
 
-  render () {
-    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}/>;
-      } else if (attribute.type === 'submit') {
-        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
-      } else if (attribute.type === 'checkbox') {
-        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'date_picker') {
-        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'dropdown') {
-        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'radio_group') {
-        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'slider') {
-        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'switch') {
-        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
-      } else if (attribute.type === 'time_picker') {
-        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
-      } else {
-        return <Input key={index} {...attribute} />;
-      }
-    });
-
-    return (
-      <form
-        data-react-toolbox='form'
-        className={className}
-        onChange={this.onChange}
-        onSubmit={this.onSubmit}
-      >
-        { attributes }
-        { this.props.children }
-      </form>
-    );
-  }
-
   storage (props, value) {
     const key = `react-toolbox-form-${props.storage}`;
     if (value) {
@@ -160,6 +122,45 @@ class Form extends React.Component {
       }
     }
   }
+
+  render () {
+    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}/>;
+      } else if (attribute.type === 'submit') {
+        return <Button key={index} {...attribute} ref='submit' onClick={this.onSubmit} type='square' />;
+      } else if (attribute.type === 'checkbox') {
+        return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'date_picker') {
+        return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'dropdown') {
+        return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'radio_group') {
+        return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'slider') {
+        return <Slider key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'switch') {
+        return <Switch key={index} {...attribute} onChange={this.onChange}/>;
+      } else if (attribute.type === 'time_picker') {
+        return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
+      } else {
+        return <Input key={index} {...attribute} />;
+      }
+    });
+
+    return (
+      <form
+        data-react-toolbox='form'
+        className={className}
+        onChange={this.onChange}
+        onSubmit={this.onSubmit}
+      >
+        {attributes}
+        {this.props.children}
+      </form>
+    );
+  }
 }
 
 export default Form;
diff --git a/components/form/index.js b/components/form/index.js
new file mode 100644
index 00000000..a6a1f3a0
--- /dev/null
+++ b/components/form/index.js
@@ -0,0 +1 @@
+export default from './Form.jsx';
diff --git a/components/input/index.jsx b/components/input/Input.jsx
similarity index 87%
rename from components/input/index.jsx
rename to components/input/Input.jsx
index 5d7592d8..e2ee34a6 100644
--- a/components/input/index.jsx
+++ b/components/input/Input.jsx
@@ -54,6 +54,14 @@ class Input extends React.Component {
     if (error || counter) return <span className={style.underline}>{error}{counter}</span>;
   }
 
+  blur () {
+    this.refs.input.blur();
+  }
+
+  focus () {
+    this.refs.input.focus();
+  }
+
   render () {
     const className = classNames({
       [style.root]: true,
@@ -71,23 +79,15 @@ class Input extends React.Component {
 
     return (
       <div data-react-toolbox='input' className={className}>
-        { this.renderInput() }
-        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
+        {this.renderInput()}
+        {this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null}
         <span className={style.bar}></span>
-        { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
-        { this.renderUnderline() }
-        { this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null }
+        {this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null}
+        {this.renderUnderline()}
+        {this.props.tooltip ? <Tooltip label={this.props.tooltip} delay={this.props.tooltipDelay}/> : null}
       </div>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Input;
diff --git a/components/input/index.js b/components/input/index.js
new file mode 100644
index 00000000..afc98883
--- /dev/null
+++ b/components/input/index.js
@@ -0,0 +1 @@
+export default from './Input.jsx';
diff --git a/components/link/index.jsx b/components/link/Link.jsx
similarity index 70%
rename from components/link/index.jsx
rename to components/link/Link.jsx
index b659aa21..8dcae78c 100644
--- a/components/link/index.jsx
+++ b/components/link/Link.jsx
@@ -12,9 +12,9 @@ const Link = (props) => {
       data-react-toolbox='link'
       className={className}
     >
-      { props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null }
-      { props.label ? <abbr>{props.label}</abbr> : null }
-      { props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
+      {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
+      {props.label ? <abbr>{props.label}</abbr> : null}
+      {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
     </a>
   );
 };
diff --git a/components/link/index.js b/components/link/index.js
new file mode 100644
index 00000000..28340297
--- /dev/null
+++ b/components/link/index.js
@@ -0,0 +1 @@
+export default from './Link.jsx';
diff --git a/components/list/checkbox.jsx b/components/list/checkbox.jsx
index c0723ed5..2e3eabf6 100644
--- a/components/list/checkbox.jsx
+++ b/components/list/checkbox.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import style from './style';
 
 const ListCheckbox = (props) => {
diff --git a/components/list/content.jsx b/components/list/content.jsx
index 1e4d5781..6fdd5cf5 100644
--- a/components/list/content.jsx
+++ b/components/list/content.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import style from './style';
 
-const ListItemContent = ({ caption, legend }) => (
+const ListItemContent = ({caption, legend}) => (
   <span className={style.text}>
     <span className={style.caption}>{caption}</span>
     <span className={style.legend}>{legend}</span>
diff --git a/components/list/index.jsx b/components/list/index.jsx
index 28a413ad..f8a57e7c 100644
--- a/components/list/index.jsx
+++ b/components/list/index.jsx
@@ -1,7 +1,5 @@
-import List from './list';
-import ListItem from './item';
-import ListDivider from './divider';
-import ListCheckbox from './checkbox';
-import ListSubHeader from './subheader';
-
-export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};
+export List from './List';
+export ListItem from './Item';
+export ListDivider from './Divider';
+export ListCheckbox from './Checkbox';
+export ListSubHeader from './Subheader';
diff --git a/components/list/item.jsx b/components/list/item.jsx
index cd8dc9a9..c5a259c6 100644
--- a/components/list/item.jsx
+++ b/components/list/item.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import ListItemContent from './content';
+import ListItemContent from './Content';
 import Ripple from '../ripple';
 import style from './style';
 
@@ -8,9 +8,11 @@ class ListItem extends React.Component {
   static propTypes = {
     avatar: React.PropTypes.string,
     caption: React.PropTypes.string.isRequired,
+    className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     leftIcon: React.PropTypes.string,
     legend: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     rightIcon: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool,
@@ -44,11 +46,11 @@ class ListItem extends React.Component {
 
     return (
       <span className={className}>
-        { this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
-        { this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
+        {this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null}
+        {this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null}
         <ListItemContent caption={this.props.caption} legend={this.props.legend} />
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
-        { this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null}
+        {this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null}
       </span>
     );
   }
@@ -56,7 +58,7 @@ class ListItem extends React.Component {
   render () {
     return (
       <li className={style['list-item']} onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
-        { this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
+        {this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent()}
       </li>
     );
   }
diff --git a/components/list/list.jsx b/components/list/list.jsx
index d020999d..4e44bdeb 100644
--- a/components/list/list.jsx
+++ b/components/list/list.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import ListItem from './item';
+import ListItem from './Item';
 import style from './style';
 
 class List extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     ripple: React.PropTypes.bool,
     selectable: React.PropTypes.bool
diff --git a/components/list/subheader.jsx b/components/list/subheader.jsx
index a5fcd342..690f337b 100644
--- a/components/list/subheader.jsx
+++ b/components/list/subheader.jsx
@@ -8,7 +8,8 @@ const ListSubHeader = (props) => {
 };
 
 ListSubHeader.propTypes = {
-  caption: React.PropTypes.string
+  caption: React.PropTypes.string,
+  className: React.PropTypes.string
 };
 
 export default ListSubHeader;
diff --git a/components/menu/icon_menu.jsx b/components/menu/IconMenu.jsx
similarity index 89%
rename from components/menu/icon_menu.jsx
rename to components/menu/IconMenu.jsx
index cf7c0371..0d875a3e 100644
--- a/components/menu/icon_menu.jsx
+++ b/components/menu/IconMenu.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import FontIcon from '../font_icon';
-import Menu from './menu';
+import Menu from './Menu';
 import Ripple from '../ripple';
 import style from './style.icon_menu';
 
 class IconMenu extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     iconRipple: React.PropTypes.bool,
     menuRipple: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     onHide: React.PropTypes.func,
-    onShow: React.PropTypes.func,
     onSelect: React.PropTypes.func,
+    onShow: React.PropTypes.func,
     position: React.PropTypes.string,
     selectable: React.PropTypes.bool,
     selected: React.PropTypes.any
@@ -61,9 +62,9 @@ class IconMenu extends React.Component {
           selectable={this.props.selectable}
           selected={this.props.selected}
         >
-          { this.props.children }
+          {this.props.children}
         </Menu>
-        { this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null }
+        {this.props.iconRipple ? <Ripple ref='ripple' className={style.ripple} spread={2.4} centered /> : null}
       </div>
     );
   }
diff --git a/components/menu/menu_divider.jsx b/components/menu/MenuDivider.jsx
similarity index 100%
rename from components/menu/menu_divider.jsx
rename to components/menu/MenuDivider.jsx
diff --git a/components/menu/menu_item.jsx b/components/menu/MenuItem.jsx
similarity index 76%
rename from components/menu/menu_item.jsx
rename to components/menu/MenuItem.jsx
index a827d81d..221ab111 100644
--- a/components/menu/menu_item.jsx
+++ b/components/menu/MenuItem.jsx
@@ -9,9 +9,10 @@ class MenuItem extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
+    onClick: React.PropTypes.func,
     ripple: React.PropTypes.bool,
-    shortcut: React.PropTypes.string,
-    selected: React.PropTypes.bool
+    selected: React.PropTypes.bool,
+    shortcut: React.PropTypes.string
   };
 
   static defaultProps = {
@@ -46,10 +47,10 @@ class MenuItem extends React.Component {
         onClick={this.handleClick}
         onMouseDown={this.handleMouseDown}
       >
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null }
+        {this.props.icon ? <FontIcon value={this.props.icon} className={style.icon}/> : null}
         <span className={style.caption}>{this.props.caption}</span>
-        { this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null }
-        { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null }
+        {this.props.shortcut ? <small className={style.shortcut}>{this.props.shortcut}</small> : null}
+        {this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2.5} /> : null}
       </li>
     );
   }
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index d26b5a90..779e68d1 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -1,11 +1,4 @@
-import Menu from './menu';
-import MenuItem from './menu_item';
-import MenuDivider from './menu_divider';
-import IconMenu from './icon_menu';
-
-export default {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  IconMenu
-};
+export Menu from './Menu';
+export MenuItem from './MenuItem';
+export MenuDivider from './MenuDivider';
+export IconMenu from './IconMenu';
diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
index 9157067b..8f1507ec 100644
--- a/components/menu/menu.jsx
+++ b/components/menu/menu.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import MenuItem from './menu_item';
+import MenuItem from './MenuItem';
 import { events, utils } from '../utils';
 import style from './style.menu';
 
@@ -16,6 +16,7 @@ const POSITION = {
 class Menu extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    children: React.PropTypes.node,
     className: React.PropTypes.string,
     onHide: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -46,15 +47,6 @@ class Menu extends React.Component {
     this.setState({ position, width, height });
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.active && !this.state.active) {
-      if (this.props.onHide) this.props.onHide();
-      events.removeEventsFromDocument({click: this.handleDocumentClick});
-    } else if (!prevState.active && this.state.active && this.props.onShow) {
-      this.props.onShow();
-    }
-  }
-
   componentWillReceiveProps (nextProps) {
     if (this.props.position !== nextProps.position) {
       const position = nextProps.position === POSITION.AUTO ? this.calculatePosition() : nextProps.position;
@@ -62,12 +54,6 @@ class Menu extends React.Component {
     }
   }
 
-  componentWillUpdate (prevState, nextState) {
-    if (!prevState.active && nextState.active) {
-      events.addEventsToDocument({click: this.handleDocumentClick});
-    }
-  }
-
   shouldComponentUpdate (nextProps, nextState) {
     if (!this.state.active && nextState.active && this.props.position === POSITION.AUTO) {
       const position = this.calculatePosition();
@@ -81,6 +67,21 @@ class Menu extends React.Component {
     return true;
   }
 
+  componentWillUpdate (prevState, nextState) {
+    if (!prevState.active && nextState.active) {
+      events.addEventsToDocument({click: this.handleDocumentClick});
+    }
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.active && !this.state.active) {
+      if (this.props.onHide) this.props.onHide();
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
+    } else if (!prevState.active && this.state.active && this.props.onShow) {
+      this.props.onShow();
+    }
+  }
+
   handleDocumentClick = (event) => {
     if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
@@ -149,21 +150,13 @@ class Menu extends React.Component {
 
     return (
       <div className={className} style={this.getRootStyle()}>
-        { this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null }
+        {this.props.outline ? <div className={style.outline} style={outlineStyle}></div> : null}
         <ul ref='menu' className={style.menu} style={this.getMenuStyle()}>
-          { this.renderItems() }
+          {this.renderItems()}
         </ul>
       </div>
     );
   }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
 }
 
 export default Menu;