Use ES6 import/exports in docs

docs/src/app/app-routes.jsx

@@ -1,54 +1,54 @@
-const React = require('react');
-const {
+import React from 'react';
+import {
   Route,
   Redirect,
   IndexRoute,
-} = require('react-router');
+} from 'react-router';
 
 // Here we define all our material-ui ReactComponents.
-const Master = require('./components/master');
-const Home = require('./components/pages/home');
+import Master from './components/master';
+import Home from './components/pages/home';
 
-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');
+import GetStarted from './components/pages/get-started';
+import Prerequisites from './components/pages/get-started/prerequisites';
+import Installation from './components/pages/get-started/installation';
+import Examples from './components/pages/get-started/examples';
 
-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');
+import Customization from './components/pages/customization';
+import Colors from './components/pages/customization/colors';
+import Themes from './components/pages/customization/themes';
+import InlineStyles from './components/pages/customization/inline-styles';
 
-const Components = require('./components/pages/components');
-const AppBar = require('./components/pages/components/app-bar');
-const AutoComplete = require('./components/pages/components/auto-complete');
-const Avatars = require('./components/pages/components/avatars');
-const Badge = require('./components/pages/components/badge');
-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 GridList = require('./components/pages/components/grid-list');
-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 Popover = require('./components/pages/components/popover');
-const Progress = require('./components/pages/components/progress');
-const RefreshIndicator = require('./components/pages/components/refresh-indicator');
-const SelectFields = require('./components/pages/components/select-fields');
-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');
+import Components from './components/pages/components';
+import AppBar from './components/pages/components/app-bar';
+import AutoComplete from './components/pages/components/auto-complete';
+import Avatars from './components/pages/components/avatars';
+import Badge from './components/pages/components/badge';
+import Buttons from './components/pages/components/buttons';
+import Cards from './components/pages/components/cards';
+import DatePicker from './components/pages/components/date-picker';
+import Dialog from './components/pages/components/dialog';
+import DropDownMenu from './components/pages/components/drop-down-menu';
+import GridList from './components/pages/components/grid-list';
+import Icons from './components/pages/components/icons';
+import IconButtons from './components/pages/components/icon-buttons';
+import IconMenus from './components/pages/components/icon-menus';
+import LeftNav from './components/pages/components/left-nav';
+import Lists from './components/pages/components/lists';
+import Menus from './components/pages/components/menus';
+import Paper from './components/pages/components/paper';
+import Popover from './components/pages/components/popover';
+import Progress from './components/pages/components/progress';
+import RefreshIndicator from './components/pages/components/refresh-indicator';
+import SelectFields from './components/pages/components/select-fields';
+import Sliders from './components/pages/components/sliders';
+import Snackbar from './components/pages/components/snackbar';
+import Switches from './components/pages/components/switches';
+import Table from './components/pages/components/table';
+import Tabs from './components/pages/components/tabs';
+import TextFields from './components/pages/components/text-fields';
+import TimePicker from './components/pages/components/time-picker';
+import Toolbars from './components/pages/components/toolbars';
 
 
 /**

docs/src/app/app.jsx

@@ -1,9 +1,9 @@
-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');
-const createHistory = require('history/lib/createHashHistory');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Router} from 'react-router';
+import AppRoutes from './app-routes.jsx';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import createHistory from 'history/lib/createHashHistory';
 
 //Helpers for debugging
 window.React = React;

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

@@ -1,10 +1,10 @@
-let React = require('react');
-let Router = require('react-router');
-let { MenuItem, LeftNav, Mixins, Styles } = require('material-ui');
-let { Colors, Spacing, Typography } = Styles;
-let { StylePropable } = Mixins;
+import React from 'react';
+import Router from 'react-router';
+import { MenuItem, LeftNav, Mixins, Styles } from 'material-ui';
+const { Colors, Spacing, Typography } = Styles;
+const { StylePropable } = Mixins;
 
-let menuItems = [
+const menuItems = [
     { route: 'get-started', text: 'Get Started' },
     { route: 'customization', text: 'Customization' },
     { route: 'components', text: 'Components' },
@@ -15,9 +15,9 @@ let menuItems = [
   ];
 
 
-let AppLeftNav = React.createClass({
+const AppLeftNav = React.createClass({
   mixins: [StylePropable],
-  
+
   contextTypes: {
     muiTheme: React.PropTypes.object,
     router: React.PropTypes.func,
@@ -78,7 +78,7 @@ let AppLeftNav = React.createClass({
     this.props.history.pushState(null, '/');
     this.refs.leftNav.close();
   },
-  
+
 });
 
 module.exports = AppLeftNav;

docs/src/app/components/code-example/code-block.jsx

@@ -1,6 +1,6 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const { Styles } = require('material-ui');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Styles } from 'material-ui';
 const { Spacing } = Styles;
 const { ThemeManager } = Styles;
 const DefaultRawTheme = Styles.LightRawTheme;

docs/src/app/components/code-example/code-example.jsx

@@ -1,17 +1,17 @@
-const React = require('react');
+import React from 'react';
 
-const {
+import {
   ClearFix,
   Paper,
   Styles,
-} = require('material-ui');
+} from 'material-ui';
 
 const {
   Spacing,
   Typography,
 } = Styles;
 
-const CodeBlock = require('./code-block');
+import CodeBlock from './code-block';
 const ThemeManager = Styles.ThemeManager;
 const DefaultRawTheme = Styles.LightRawTheme;
 

docs/src/app/components/component-doc.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
-const { ClearFix, Mixins, Styles } = require('material-ui');
-const CodeExample = require('./code-example/code-example');
-const ComponentInfo = require('./component-info');
+import React from 'react';
+import { ClearFix, Mixins, Styles } from 'material-ui';
+import CodeExample from './code-example/code-example';
+import ComponentInfo from './component-info';
 const Typography = Styles.Typography;
 const { Classable, StylePropable } = Mixins;
 const ThemeManager = Styles.ThemeManager;

docs/src/app/components/component-info.jsx

@@ -1,5 +1,5 @@
-const React = require('react');
-const { Mixins, Styles } = require('material-ui');
+import React from 'react';
+import { Mixins, Styles } from 'material-ui';
 
 const { StyleResizable, StylePropable } = Mixins;
 const { Typography, Spacing, Colors } = Styles;

docs/src/app/components/full-width-section.jsx

@@ -1,5 +1,5 @@
-let React = require('react');
-let { ClearFix, Mixins, Styles } = require('material-ui');
+import React from 'react';
+import { ClearFix, Mixins, Styles } from 'material-ui';
 let { StylePropable, StyleResizable } = Mixins;
 let DesktopGutter = Styles.Spacing.desktopGutter;
 

docs/src/app/components/master.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
-const Router = require('react-router');
-const AppLeftNav = require('./app-left-nav');
-const FullWidthSection = require('./full-width-section');
-const { AppBar,
+import React from 'react';
+import Router from 'react-router';
+import AppLeftNav from './app-left-nav';
+import FullWidthSection from './full-width-section';
+import { AppBar,
       AppCanvas,
       FontIcon,
       IconButton,
@@ -13,7 +13,7 @@ const { AppBar,
       Styles,
       Tab,
       Tabs,
-      Paper} = require('material-ui');
+      Paper} from 'material-ui';
 
 const { StylePropable } = Mixins;
 const { Colors, Spacing, Typography } = Styles;

docs/src/app/components/mobile-tear-sheet.jsx

@@ -1,5 +1,5 @@
-const React = require('react');
-const {Mixins} = require('material-ui');
+import React from 'react';
+import {Mixins} from 'material-ui';
 const { StylePropable } = Mixins;
 
 

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

@@ -1,5 +1,5 @@
-let React = require('react');
-let PageWithNav = require('./page-with-nav');
+import React from 'react';
+import PageWithNav from './page-with-nav';
 
 export default class Components extends React.Component {
 

docs/src/app/components/pages/components/app-bar.jsx

@@ -1,15 +1,15 @@
-const React = require('react');
-const { AppBar, DropDownMenu, Paper } = require('material-ui');
-const IconButton = require('icon-button');
-const NavigationClose = require('svg-icons/navigation/close');
-const FlatButton = require('flat-button');
-const ComponentDoc = require('../../component-doc');
-const CodeExample = require('../../code-example/code-example');
-const CodeBlock = require('../../code-example/code-block');
-const Code = require('app-bar-code');
-const IconMenu = require('menus/icon-menu');
-const MenuItem = require('menus/menu-item');
-const MoreVertIcon = require('svg-icons/navigation/more-vert');
+import React from 'react';
+import { AppBar, DropDownMenu, Paper } from 'material-ui';
+import IconButton from 'icon-button';
+import NavigationClose from 'svg-icons/navigation/close';
+import FlatButton from 'flat-button';
+import ComponentDoc from '../../component-doc';
+import CodeExample from '../../code-example/code-example';
+import CodeBlock from '../../code-example/code-block';
+import Code from 'app-bar-code';
+import IconMenu from 'menus/icon-menu';
+import MenuItem from 'menus/menu-item';
+import MoreVertIcon from 'svg-icons/navigation/more-vert';
 
 const styles = {
   title: {
@@ -130,8 +130,11 @@ export default class AppBarPage extends React.Component {
         <Paper style = {{marginBottom: '22px'}}>
           <CodeBlock>
           {
-            '//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' +
-            '//See material-ui/lib/index.js for more\n'
+            `//Import statement:
+import AppBar from 'material-ui/lib/app-bar';
+
+//See material-ui/lib/index.js for more
+            `
           }
           </CodeBlock>
         </Paper>

docs/src/app/components/pages/components/auto-complete.jsx

@@ -1,10 +1,10 @@
-const React = require('react');
+import React from 'react';
 
-const { AutoComplete } = require('material-ui');
-const ComponentDoc = require('../../component-doc');
-const CodeExample = require('../../code-example/code-example');
+import { AutoComplete } from 'material-ui';
+import ComponentDoc from '../../component-doc';
+import CodeExample from '../../code-example/code-example';
 
-const Code = require('auto-complete-code');
+import Code from 'auto-complete-code';
 
 class AutoCompletePage extends React.Component {
 

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

@@ -1,11 +1,11 @@
-const React = require('react');
-const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui');
-const ComponentDoc = require('../../component-doc');
-const FileFolder = require('svg-icons/file/folder');
+import React from 'react';
+import { Avatar, FontIcon, List, ListItem, Styles, Paper } from 'material-ui';
+import ComponentDoc from '../../component-doc';
+import FileFolder from 'svg-icons/file/folder';
 const { Colors } = Styles;
-const Code = require('avatars-code');
-const CodeExample = require('../../code-example/code-example');
-const CodeBlock = require('../../code-example/code-block');
+import Code from 'avatars-code';
+import CodeExample from '../../code-example/code-example';
+import CodeBlock from '../../code-example/code-block';
 
 
 export default class AvatarsPage extends React.Component {
@@ -75,7 +75,7 @@ export default class AvatarsPage extends React.Component {
         <Paper style = {{marginBottom: '22px'}}>
           <CodeBlock>
           {
-            '//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' +
+            '//Import statement:\nimport Avatar from \'material-ui/lib/avatar\';\n\n' +
             '//See material-ui/lib/index.js for more\n'
           }
           </CodeBlock>

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

@@ -1,13 +1,13 @@
-const React = require('react');
-const { FontIcon, IconButton, Badge, Paper } = require('material-ui');
-const ComponentDoc = require('../../component-doc');
-const Code = require('badge-code');
-const CodeExample = require('../../code-example/code-example');
-const NotificationsIcon = require('svg-icons/social/notifications');
-const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
-const FolderIcon = require('svg-icons/file/folder-open');
-const UploadIcon = require('svg-icons/file/cloud-upload');
-const CodeBlock = require('../../code-example/code-block');
+import React from 'react';
+import { FontIcon, IconButton, Badge, Paper } from 'material-ui';
+import ComponentDoc from '../../component-doc';
+import Code from 'badge-code';
+import CodeExample from '../../code-example/code-example';
+import NotificationsIcon from 'svg-icons/social/notifications';
+import ShoppingCartIcon from 'svg-icons/action/shopping-cart';
+import FolderIcon from 'svg-icons/file/folder-open';
+import UploadIcon from 'svg-icons/file/cloud-upload';
+import CodeBlock from '../../code-example/code-block';
 
 export default class BadgePage extends React.Component {
   constructor(props) {
@@ -64,14 +64,17 @@ export default class BadgePage extends React.Component {
         <Paper style = {{marginBottom: '22px'}}>
           <CodeBlock>
           {
-            '//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' +
-            '//See material-ui/lib/index.js for more\n'
+            `//Import statement:
+import Badge from 'material-ui/lib/badge';
+
+//See material-ui/lib/index.js for more
+            `
           }
           </CodeBlock>
         </Paper>
 
         <CodeExample code={Code}>
-          
+
           <Badge badgeContent={4} primary={true}>
             <NotificationsIcon />
           </Badge>