React v0.14

docs/package.json

@@ -16,6 +16,8 @@
   },
   "devDependencies": {
     "raw-loader": "^0.5.1",
+    "react": "^0.14.0-rc1",
+    "react-addons-linked-state-mixin": "^0.14.0-rc1",
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   }

docs/src/app/app-routes.jsx

@@ -1,48 +1,49 @@
-let React = require('react');
-let Router = require('react-router');
-let Route = Router.Route;
-let Redirect = Router.Redirect;
-let DefaultRoute = Router.DefaultRoute;
+const React = require('react');
+const {
+  Route,
+  Redirect,
+  IndexRoute,
+} = require('react-router');
 
 // Here we define all our material-ui ReactComponents.
-let Master = require('./components/master');
-let Home = require('./components/pages/home');
+const Master = require('./components/master');
+const Home = require('./components/pages/home');
 
-let GetStarted = require('./components/pages/get-started');
-let Prerequisites = require('./components/pages/get-started/prerequisites');
-let Installation = require('./components/pages/get-started/installation');
-let Examples = require('./components/pages/get-started/examples');
+const GetStarted = require('./components/pages/get-started');
+const Prerequisites = require('./components/pages/get-started/prerequisites');
+const Installation = require('./components/pages/get-started/installation');
+const Examples = require('./components/pages/get-started/examples');
 
-let Customization = require('./components/pages/customization');
-let Colors = require('./components/pages/customization/colors');
-let Themes = require('./components/pages/customization/themes');
-let InlineStyles = require('./components/pages/customization/inline-styles');
+const Customization = require('./components/pages/customization');
+const Colors = require('./components/pages/customization/colors');
+const Themes = require('./components/pages/customization/themes');
+const InlineStyles = require('./components/pages/customization/inline-styles');
 
-let Components = require('./components/pages/components');
-let AppBar = require('./components/pages/components/app-bar');
-let Avatars = require('./components/pages/components/avatars');
-let Buttons = require('./components/pages/components/buttons');
-let Cards = require('./components/pages/components/cards');
-let DatePicker = require('./components/pages/components/date-picker');
-let Dialog = require('./components/pages/components/dialog');
-let DropDownMenu = require('./components/pages/components/drop-down-menu');
-let Icons = require('./components/pages/components/icons');
-let IconButtons = require('./components/pages/components/icon-buttons');
-let IconMenus = require('./components/pages/components/icon-menus');
-let LeftNav = require('./components/pages/components/left-nav');
-let Lists = require('./components/pages/components/lists');
-let Menus = require('./components/pages/components/menus');
-let Paper = require('./components/pages/components/paper');
-let Progress = require('./components/pages/components/progress');
-let RefreshIndicator = require('./components/pages/components/refresh-indicator');
-let Sliders = require('./components/pages/components/sliders');
-let Snackbar = require('./components/pages/components/snackbar');
-let Switches = require('./components/pages/components/switches');
-let Table = require('./components/pages/components/table');
-let Tabs = require('./components/pages/components/tabs');
-let TextFields = require('./components/pages/components/text-fields');
-let TimePicker = require('./components/pages/components/time-picker');
-let Toolbars = require('./components/pages/components/toolbars');
+const Components = require('./components/pages/components');
+const AppBar = require('./components/pages/components/app-bar');
+const Avatars = require('./components/pages/components/avatars');
+const Buttons = require('./components/pages/components/buttons');
+const Cards = require('./components/pages/components/cards');
+const DatePicker = require('./components/pages/components/date-picker');
+const Dialog = require('./components/pages/components/dialog');
+const DropDownMenu = require('./components/pages/components/drop-down-menu');
+const Icons = require('./components/pages/components/icons');
+const IconButtons = require('./components/pages/components/icon-buttons');
+const IconMenus = require('./components/pages/components/icon-menus');
+const LeftNav = require('./components/pages/components/left-nav');
+const Lists = require('./components/pages/components/lists');
+const Menus = require('./components/pages/components/menus');
+const Paper = require('./components/pages/components/paper');
+const Progress = require('./components/pages/components/progress');
+const RefreshIndicator = require('./components/pages/components/refresh-indicator');
+const Sliders = require('./components/pages/components/sliders');
+const Snackbar = require('./components/pages/components/snackbar');
+const Switches = require('./components/pages/components/switches');
+const Table = require('./components/pages/components/table');
+const Tabs = require('./components/pages/components/tabs');
+const TextFields = require('./components/pages/components/text-fields');
+const TimePicker = require('./components/pages/components/time-picker');
+const Toolbars = require('./components/pages/components/toolbars');
 
 
 /** Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
@@ -54,52 +55,52 @@ let Toolbars = require('./components/pages/components/toolbars');
   * handler and its parent handler like so: Paper > Components > Master
   */
 
-let AppRoutes = (
-  <Route name="root" path="/" handler={Master}>
-    <Route name="home" handler={Home} />
-    <Route name="get-started" handler={GetStarted}>
-      <Route name="prerequisites" handler={Prerequisites} />
-      <Route name="installation" handler={Installation} />
-      <Route name="examples" handler={Examples} />
-      <Redirect from="/get-started" to="prerequisites" />
+const AppRoutes = (
+  <Route path="/" component={Master}>
+    <Route path="home" component={Home} />
+    <Route path="get-started" component={GetStarted}>
+      <Route path="prerequisites" component={Prerequisites} />
+      <Route path="installation" component={Installation} />
+      <Route path="examples" component={Examples} />
+      <Redirect from="/get-started" to="/prerequisites" />
     </Route>
 
-    <Route name="customization" handler={Customization}>
-      <Route name="colors" handler={Colors} />
-      <Route name="themes" handler={Themes} />
-      <Route name="inline-styles" handler={InlineStyles} />
-      <Redirect from="/customization" to="themes" />
+    <Route path="customization" component={Customization}>
+      <Route path="colors" component={Colors} />
+      <Route path="themes" component={Themes} />
+      <Route path="inline-styles" component={InlineStyles} />
+      <Redirect from="/customization" to="/themes" />
     </Route>
 
-    <Route name="components" handler={Components}>
-      <Route name="appbar" handler={AppBar} />
-      <Route name="avatars" handler={Avatars} />
-      <Route name="buttons" handler={Buttons} />
-      <Route name="cards" handler={Cards} />
-      <Route name="date-picker" handler={DatePicker} />
-      <Route name="dialog" handler={Dialog} />
-      <Route name="dropdown-menu" handler={DropDownMenu} />
-      <Route name="icons" handler={Icons} />
-      <Route name="icon-buttons" handler={IconButtons} />
-      <Route name="icon-menus" handler={IconMenus} />
-      <Route name="left-nav" handler={LeftNav} />
-      <Route name="lists" handler={Lists} />
-      <Route name="menus" handler={Menus} />
-      <Route name="paper" handler={Paper} />
-      <Route name="progress" handler={Progress} />
-      <Route name="refresh-indicator" handler={RefreshIndicator} />
-      <Route name="sliders" handler={Sliders} />
-      <Route name="switches" handler={Switches} />
-      <Route name="snackbar" handler={Snackbar} />
-      <Route name="table" handler={Table} />
-      <Route name="tabs" handler={Tabs} />
-      <Route name="text-fields" handler={TextFields} />
-      <Route name="time-picker" handler={TimePicker} />
-      <Route name="toolbars" handler={Toolbars} />
-      <Redirect from="/components" to="appbar" />
+    <Route name="components" component={Components}>
+      <Route name="appbar" component={AppBar} />
+      <Route name="avatars" component={Avatars} />
+      <Route name="buttons" component={Buttons} />
+      <Route name="cards" component={Cards} />
+      <Route name="date-picker" component={DatePicker} />
+      <Route name="dialog" component={Dialog} />
+      <Route name="dropdown-menu" component={DropDownMenu} />
+      <Route name="icons" component={Icons} />
+      <Route name="icon-buttons" component={IconButtons} />
+      <Route name="icon-menus" component={IconMenus} />
+      <Route name="left-nav" component={LeftNav} />
+      <Route name="lists" component={Lists} />
+      <Route name="menus" component={Menus} />
+      <Route name="paper" component={Paper} />
+      <Route name="progress" component={Progress} />
+      <Route name="refresh-indicator" component={RefreshIndicator} />
+      <Route name="sliders" component={Sliders} />
+      <Route name="switches" component={Switches} />
+      <Route name="snackbar" component={Snackbar} />
+      <Route name="table" component={Table} />
+      <Route name="tabs" component={Tabs} />
+      <Route name="text-fields" component={TextFields} />
+      <Route name="time-picker" component={TimePicker} />
+      <Route name="toolbars" component={Toolbars} />
+      <Redirect from="/components" to="/appbar" />
     </Route>
 
-    <DefaultRoute handler={Home}/>
+    <IndexRoute component={Home}/>
   </Route>
 );
 

docs/src/app/app.jsx

@@ -1,33 +1,22 @@
-(function () {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {Router} = require('react-router');
+const AppRoutes = require('./app-routes.jsx');
+const injectTapEventPlugin = require("react-tap-event-plugin");
 
-  let React = require('react'),
-    Router = require('react-router'),
-    AppRoutes = require('./app-routes.jsx'),
-    injectTapEventPlugin = require("react-tap-event-plugin");
+//Needed for React Developer Tools
+window.React = React;
 
-  //Needed for React Developer Tools
-  window.React = React;
+//Needed for onTouchTap
+//Can go away when react 1.0 release
+//Check this repo:
+//https://github.com/zilverline/react-tap-event-plugin
+injectTapEventPlugin();
 
-  //Needed for onTouchTap
-  //Can go away when react 1.0 release
-  //Check this repo:
-  //https://github.com/zilverline/react-tap-event-plugin
-  injectTapEventPlugin();
-
-  /** Render the main app component. You can read more about the react-router here:
-    *  https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
-    */
-  Router
-    // Runs the router, similiar to the Router.run method. You can think of it as an
-    // initializer/constructor method.
-    .create({
-      routes: AppRoutes,
-      scrollBehavior: Router.ScrollToTopBehavior
-    })
-    // This is our callback function, whenever the url changes it will be called again.
-    // Handler: The ReactComponent class that will be rendered
-    .run(function (Handler) {
-      React.render(<Handler/>, document.getElementById('app'));
-    });
-
-})();
+/**
+ * Render the main app component. You can read more about the react-router here:
+ * https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
+ */
+ReactDOM.render(<Router>
+  {AppRoutes}
+</Router>, document.getElementById('app'));

docs/src/app/components/app-left-nav.jsx

@@ -67,7 +67,7 @@ class AppLeftNav extends React.Component {
 
     for (let i = menuItems.length - 1; i >= 0; i--) {
       currentItem = menuItems[i];
-      if (currentItem.route && this.context.router.isActive(currentItem.route)) return i;
+      if (currentItem.route && this.props.history.isActive(currentItem.route)) return i;
     }
   }
 

docs/src/app/components/master.jsx

@@ -15,7 +15,6 @@ const { AppBar,
       Tabs,
       Paper} = require('material-ui');
 
-const RouteHandler = Router.RouteHandler;
 const { Colors, Spacing, Typography } = Styles;
 const ThemeManager = Styles.ThemeManager;
 const DefaultRawTheme = Styles.LightRawTheme;
@@ -94,9 +93,9 @@ const Master = React.createClass({
   render() {
     let styles = this.getStyles();
     let title =
-      this.context.router.isActive('get-started') ? 'Get Started' :
-      this.context.router.isActive('customization') ? 'Customization' :
-      this.context.router.isActive('components') ? 'Components' : '';
+      this.props.history.isActive('get-started') ? 'Get Started' :
+      this.props.history.isActive('customization') ? 'Customization' :
+      this.props.history.isActive('components') ? 'Components' : '';
 
     let githubButton = (
       <IconButton
@@ -120,8 +119,8 @@ const Master = React.createClass({
         {githubButton}
         {this.state.renderTabs ? this._getTabs(): this._getAppBar()}
 
-        <RouteHandler />
-        <AppLeftNav ref="leftNav" />
+        {this.props.children}
+        <AppLeftNav ref="leftNav" history={this.props.history} />
         <FullWidthSection style={styles.footer}>
           <p style={styles.p}>
             Hand crafted with love by the engineers at <a style={styles.a} href="http://call-em-all.com">Call-Em-All</a> and our
@@ -222,21 +221,21 @@ const Master = React.createClass({
   },
 
   _getSelectedIndex() {
-    return this.context.router.isActive('get-started') ? '1' :
-      this.context.router.isActive('customization') ? '2' :
-      this.context.router.isActive('components') ? '3' : '0';
+    return this.props.history.isActive('get-started') ? '1' :
+      this.props.history.isActive('customization') ? '2' :
+      this.props.history.isActive('components') ? '3' : '0';
   },
 
   _handleTabChange(value, e, tab) {
-    this.context.router.transitionTo(tab.props.route);
+    this.props.history.transitionTo(tab.props.route);
     this.setState({tabIndex: this._getSelectedIndex()});
   },
 
   _getAppBar() {
     let title =
-      this.context.router.isActive('get-started') ? 'Get Started' :
-      this.context.router.isActive('customization') ? 'Customization' :
-      this.context.router.isActive('components') ? 'Components' : '';
+      this.props.history.isActive('get-started') ? 'Get Started' :
+      this.props.history.isActive('customization') ? 'Customization' :
+      this.props.history.isActive('components') ? 'Components' : '';
 
     let githubButton = (
       <IconButton

docs/src/app/components/pages/components/menus.jsx

@@ -1,5 +1,5 @@
-let React = require('react/addons');
-let ReactTransitionGroup = React.addons.TransitionGroup;
+let React = require('react');
+const ReactTransitionGroup = require('react-addons-transition-group');
 let Menu = require('menus/menu');
 let MenuItem = require('menus/menu-item');
 let MenuDivider = require('menus/menu-divider');

docs/src/app/components/pages/components/text-fields.jsx

@@ -1,14 +1,15 @@
-let React = require('react/addons');
+let React = require('react');
 let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
 let { Colors } = Styles;
 let { StyleResizable } = Mixins;
 let Code = require('text-fields-code');
 let CodeExample = require('../../code-example/code-example');
+const LinkedStateMixin = require('react-addons-linked-state-mixin');
 
 let TextFieldsPage = React.createClass({
 
-  mixins: [StyleResizable, React.addons.LinkedStateMixin],
+  mixins: [StyleResizable, LinkedStateMixin],
 
   getInitialState() {
     return {

examples/browserify-gulp-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
-  let React = require('react/addons');
+  let React = require('react');
   let injectTapEventPlugin = require('react-tap-event-plugin');
   let Main = require('./components/main.jsx'); // Our custom react component
 

examples/webpack-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
-  let React = require('react/addons');
+  let React = require('react');
   let injectTapEventPlugin = require('react-tap-event-plugin');
   let Main = require('./components/main.jsx'); // Our custom react component
 

package.json

@@ -33,8 +33,13 @@
     "react-draggable2": "^0.5.1"
   },
   "peerDependencies": {
-    "react": ">=0.13",
-    "react-tap-event-plugin": "^0.1.3"
+    "react": ">=0.14.0-rc1",
+    "react-dom": ">=0.14.0-rc1",
+    "react-tap-event-plugin": "^0.2.0",
+    "react-addons-transition-group": "^0.14.0-rc1",
+    "react-addons-update": "^0.14.0-rc1",
+    "react-addons-create-fragment": "^0.14.0-rc1",
+    "react-addons-pure-render-mixin": "^0.14.0-rc1"
   },
   "devDependencies": {
     "babel": "^5.4.3",
@@ -61,9 +66,7 @@
     "mocha": "^2.2.5",
     "phantomjs": "^1.9.17",
     "react-hot-loader": "^1.2.8",
-    "react-router": "^0.13.3",
-    "react-stub-context": "^0.3.0",
-    "react-tap-event-plugin": "^0.1.6",
+    "react-router": "^1.0.0-rc1",
     "sinon": "^1.15.4",
     "sinon-chai": "^2.8.0",
     "transfer-webpack-plugin": "^0.1.4",

src/avatar.jsx

@@ -1,4 +1,4 @@
-const React = require('react/addons');
+const React = require('react');
 const StylePropable = require('./mixins/style-propable');
 const Colors = require('./styles/colors');
 const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');

src/buttons/flat-button-label.jsx

@@ -1,4 +1,4 @@
-const React = require('react/addons');
+const React = require('react');
 const ContextPure = require('../mixins/context-pure');
 const Styles = require('../utils/styles');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');