[Core] PascalCase component names, reorganise directory structure

docs/src/app/AppRoutes.jsx

@@ -6,17 +6,17 @@ import {
 } from 'react-router';
 
 // Here we define all our material-ui ReactComponents.
-import Master from './components/master';
-import Home from './components/pages/home';
+import Master from './components/Master';
+import Home from './components/pages/Home';
 
 import Prerequisites from './components/pages/get-started/Prerequisites';
 import Installation from './components/pages/get-started/Installation';
 import Usage from './components/pages/get-started/Usage';
 import Examples from './components/pages/get-started/Examples';
 import ServerRendering from './components/pages/get-started/ServerRendering';
 
-import Colors from './components/pages/customization/colors';
-import Themes from './components/pages/customization/themes';
+import Colors from './components/pages/customization/Colors';
+import Themes from './components/pages/customization/Themes';
 import InlineStyles from './components/pages/customization/InlineStyles';
 
 import AppBarPage from './components/pages/components/AppBar/Page';

docs/src/app/components/AppLeftNav.jsx

@@ -1,20 +1,14 @@
 import React from 'react';
-import LeftNav from 'material-ui/lib/left-nav';
-import List from 'material-ui/lib/lists/list';
-import ListItem from 'material-ui/lib/lists/list-item';
-import Divider from 'material-ui/lib/divider';
-import Subheader from 'material-ui/lib/Subheader';
-import DropDownMenu from 'material-ui/lib/DropDownMenu';
-import MenuItem from 'material-ui/lib/menus/menu-item';
-import {SelectableContainerEnhance} from 'material-ui/lib/hoc/selectable-enhance';
-import {
-  Spacing,
-  Typography,
-} from 'material-ui/lib/styles';
-import zIndex from 'material-ui/lib/styles/zIndex';
-import {cyan500} from 'material-ui/lib/styles/colors';
+import LeftNav from 'material-ui/LeftNav';
+import {List, ListItem, MakeSelectable} from 'material-ui/List';
+import Divider from 'material-ui/Divider';
+import Subheader from 'material-ui/Subheader';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import {spacing, typography, zIndex} from 'material-ui/styles';
+import {cyan500} from 'material-ui/styles/colors';
 
-const SelectableList = SelectableContainerEnhance(List);
+const SelectableList = MakeSelectable(List);
 
 const AppLeftNav = React.createClass({
 
@@ -98,15 +92,15 @@ const AppLeftNav = React.createClass({
     logo: {
       cursor: 'pointer',
       fontSize: 24,
-      color: Typography.textFullWhite,
-      lineHeight: `${Spacing.desktopKeylineIncrement}px`,
-      fontWeight: Typography.fontWeightLight,
+      color: typography.textFullWhite,
+      lineHeight: `${spacing.desktopKeylineIncrement}px`,
+      fontWeight: typography.fontWeightLight,
       backgroundColor: cyan500,
-      paddingLeft: Spacing.desktopGutter,
+      paddingLeft: spacing.desktopGutter,
       marginBottom: 8,
     },
     version: {
-      paddingLeft: Spacing.desktopGutterLess,
+      paddingLeft: spacing.desktopGutterLess,
       fontSize: 16,
     },
   },

docs/src/app/components/CodeExample/CodeBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MarkdownElement from '../MarkdownElement';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Transitions from 'material-ui/lib/styles/transitions';
+import transitions from 'material-ui/styles/transitions';
 import CodeBlockTitle from './CodeBlockTitle';
 
 const styles = {
@@ -12,7 +12,7 @@ const styles = {
   markdown: {
     overflow: 'auto',
     maxHeight: 1400,
-    transition: Transitions.create('max-height', '800ms', '0ms', 'ease-in-out'),
+    transition: transitions.create('max-height', '800ms', '0ms', 'ease-in-out'),
     marginTop: 0,
     marginBottom: 0,
   },

docs/src/app/components/CodeExample/CodeBlockTitle.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import IconButton from 'material-ui/lib/icon-button';
-import CodeIcon from 'material-ui/lib/svg-icons/action/code';
-import Toolbar from 'material-ui/lib/toolbar/toolbar';
-import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
-import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
+import IconButton from 'material-ui/IconButton';
+import CodeIcon from 'material-ui/svg-icons/action/code';
+import {Toolbar, ToolbarGroup, ToolbarTitle} from 'material-ui/Toolbar';
 
 const CodeBlockTitle = (props) => (
   <Toolbar>

docs/src/app/components/CodeExample/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CodeBlock from './CodeBlock';
-import ClearFix from 'material-ui/lib/clearfix';
-import Paper from 'material-ui/lib/paper';
+import ClearFix from 'material-ui/internal/ClearFix';
+import Paper from 'material-ui/Paper';
 
 class CodeExample extends React.Component {
   static propTypes = {

docs/src/app/components/ComponentDoc.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {ClearFix, Styles} from 'material-ui';
+import {ClearFix} from 'material-ui';
 import ComponentInfo from './ComponentInfo';
-const Typography = Styles.Typography;
+import typography from 'styles/typography';
 
 const ComponentDoc = React.createClass({
 
@@ -30,7 +30,7 @@ const ComponentDoc = React.createClass({
         fontSize: 15,
         letterSpacing: '0',
         lineHeight: '24px',
-        color: Typography.textDarkBlack,
+        color: typography.textDarkBlack,
       },
       ol: {
         fontSize: 13,
@@ -53,8 +53,8 @@ const ComponentDoc = React.createClass({
         paddingTop: 16,
         marginBottom: 12,
         letterSpacing: '0',
-        fontWeight: Typography.fontWeightNormal,
-        color: Typography.textDarkBlack,
+        fontWeight: typography.fontWeightNormal,
+        color: typography.textDarkBlack,
       },
     };
   },

docs/src/app/components/ComponentInfo.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Mixins, Styles} from 'material-ui';
 
 const {StyleResizable} = Mixins;
-const {Typography, Spacing} = Styles;
+const {typography, spacing} = Styles;
 
 const ComponentInfo = React.createClass({
 
@@ -19,17 +19,17 @@ const ComponentInfo = React.createClass({
   mixins: [StyleResizable],
 
   getStyles() {
-    const desktopGutter = Spacing.desktopGutter;
+    const desktopGutter = spacing.desktopGutter;
     const borderColor = this.context.muiTheme.rawTheme.palette.borderColor;
     const styles = {
       root: {
         fontSize: 15,
         letterSpacing: '0',
-        fontWeight: Typography.fontWeightNormal,
+        fontWeight: typography.fontWeightNormal,
         lineHeight: '24px',
         paddingTop: 3,
         marginBottom: 13,
-        color: Typography.textDarkBlack,
+        color: typography.textDarkBlack,
         width: '100%',
       },
       table: {
@@ -42,10 +42,10 @@ const ComponentInfo = React.createClass({
       },
       name: {
         position: 'absolute',
-        fontWeight: Typography.fontWeightMedium,
+        fontWeight: typography.fontWeightMedium,
       },
       type: {
-        color: Typography.textLightBlack,
+        color: typography.textLightBlack,
         paddingRight: desktopGutter,
       },
       header: {
@@ -65,8 +65,8 @@ const ComponentInfo = React.createClass({
         paddingTop: 19,
         marginBottom: 13,
         letterSpacing: '0',
-        fontWeight: Typography.fontWeightMedium,
-        color: Typography.textDarkBlack,
+        fontWeight: typography.fontWeightMedium,
+        color: typography.textDarkBlack,
       },
       nameWhenMedium: {
         position: 'inherit',

docs/src/app/components/FullWidthSection.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {ClearFix, Mixins, Styles} from 'material-ui';
-const {StyleResizable} = Mixins;
-const desktopGutter = Styles.Spacing.desktopGutter;
+import ClearFix from 'material-ui/internal/ClearFix';
+import spacing from 'material-ui/styles/spacing';
+import styleResizable from 'material-ui/utils/styleResizable';
+const desktopGutter = spacing.desktopGutter;
 
 const FullWidthSection = React.createClass({
 
@@ -14,7 +15,7 @@ const FullWidthSection = React.createClass({
   },
 
   mixins: [
-    StyleResizable,
+    styleResizable,
   ],
 
   getDefaultProps() {
@@ -74,8 +75,8 @@ const FullWidthSection = React.createClass({
         style={Object.assign(
           styles.root,
           style,
-          this.isDeviceSize(StyleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,
-          this.isDeviceSize(StyleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}
+          this.isDeviceSize(styleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,
+          this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && styles.rootWhenLarge)}
       >
         {content}
       </ClearFix>

docs/src/app/components/master.jsx → docs/src/app/components/Master.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import Title from 'react-title-component';
-
-import AppBar from 'material-ui/lib/app-bar';
-import IconButton from 'material-ui/lib/icon-button';
-import {Spacing} from 'material-ui/lib/styles';
-import {StyleResizable} from 'material-ui/lib/mixins';
-
-import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
-import {darkWhite, lightWhite, grey900} from 'material-ui/lib/styles/colors';
-
+import AppBar from 'material-ui/AppBar';
+import IconButton from 'material-ui/IconButton';
+import spacing from 'material-ui/styles/spacing';
+import styleResizable from 'material-ui/utils/styleResizable';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import {darkWhite, lightWhite, grey900} from 'material-ui/styles/colors';
 import AppLeftNav from './AppLeftNav';
 import FullWidthSection from './FullWidthSection';
 
@@ -36,7 +33,7 @@ const Master = React.createClass({
   },
 
   mixins: [
-    StyleResizable,
+    styleResizable,
   ],
 
   getInitialState() {
@@ -74,14 +71,14 @@ const Master = React.createClass({
         top: 0,
       },
       root: {
-        paddingTop: Spacing.desktopKeylineIncrement,
+        paddingTop: spacing.desktopKeylineIncrement,
         minHeight: 400,
       },
       content: {
-        margin: Spacing.desktopGutter,
+        margin: spacing.desktopGutter,
       },
       contentWhenMedium: {
-        margin: `${Spacing.desktopGutter * 2}px ${Spacing.desktopGutter * 3}px`,
+        margin: `${spacing.desktopGutter * 2}px ${spacing.desktopGutter * 3}px`,
       },
       footer: {
         backgroundColor: grey900,
@@ -101,8 +98,8 @@ const Master = React.createClass({
       },
     };
 
-    if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM) ||
-        this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) {
+    if (this.isDeviceSize(styleResizable.statics.Sizes.MEDIUM) ||
+        this.isDeviceSize(styleResizable.statics.Sizes.LARGE)) {
       styles.content = Object.assign(styles.content, styles.contentWhenMedium);
     }
 
@@ -159,7 +156,7 @@ const Master = React.createClass({
     let docked = false;
     let showMenuIconButton = true;
 
-    if (this.isDeviceSize(StyleResizable.statics.Sizes.LARGE) && title !== '') {
+    if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && title !== '') {
       docked = true;
       leftNavOpen = true;
       showMenuIconButton = false;