Rename some components to new naming approach

.babelrc

@@ -1,5 +1,5 @@
 {
-  "stage": 2,
+  "stage": 1,
   "optional": ["es7.classProperties"],
   "env": {
     "development": {

.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
   }
 }

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
   };
 

components/app/index.js

@@ -0,0 +1 @@
+export default from './App.jsx';

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

components/app_bar/index.js

@@ -0,0 +1 @@
+export default from './AppBar.jsx';

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;

components/autocomplete/index.js

@@ -0,0 +1 @@
+export default from './Autocomplete.jsx';

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,

components/button/index.js

@@ -0,0 +1 @@
+export default from './Button.jsx';

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'])

components/card/index.js

@@ -0,0 +1 @@
+export default from './Card.jsx';

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;
@@ -65,14 +73,6 @@ class Checkbox extends React.Component {
       </label>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Checkbox;

components/checkbox/index.js

@@ -0,0 +1 @@
+export default from './Checkbox.jsx';

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}
         />

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';
 

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';
@@ -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>
     );
   }

components/date_picker/calendar/index.js

@@ -0,0 +1 @@
+export default from './Calendar.jsx';

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 {

components/date_picker/index.js

@@ -0,0 +1 @@
+export default from './DatePicker.jsx';

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) => {
@@ -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,

components/dialog/index.js

@@ -0,0 +1 @@
+export default from './Dialog.jsx';

components/drawer/Drawer.jsx

@@ -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'])

components/drawer/index.js

@@ -0,0 +1 @@
+export default from './Drawer.jsx';

components/dropdown/index.js

@@ -0,0 +1 @@
+export default from './Dropdown.jsx';

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
 };

components/font_icon/index.js

@@ -0,0 +1 @@
+export default from './FontIcon.jsx';

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;

components/form/index.js

@@ -0,0 +1 @@
+export default from './Form.jsx';

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,
@@ -80,14 +88,6 @@ class Input extends React.Component {
       </div>
     );
   }
-
-  blur () {
-    this.refs.input.blur();
-  }
-
-  focus () {
-    this.refs.input.focus();
-  }
 }
 
 export default Input;

components/input/index.js

@@ -0,0 +1 @@
+export default from './Input.jsx';

components/link/index.js

@@ -0,0 +1 @@
+export default from './Link.jsx';

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) => {

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';

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,

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

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;

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

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 = {

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';

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});
@@ -156,14 +157,6 @@ class Menu extends React.Component {
       </div>
     );
   }
-
-  show () {
-    this.setState({active: true});
-  }
-
-  hide () {
-    this.setState({active: false});
-  }
 }
 
 export default Menu;