[Core] reorg internal modules

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

@@ -6,12 +6,8 @@ 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 {SelectableContainerEnhance} from 'material-ui/lib/lists/selectable-enhance';
+import {spacing, typography, zIndex} from 'material-ui/lib/styles';
 import {cyan500} from 'material-ui/lib/styles/colors';
 
 const SelectableList = SelectableContainerEnhance(List);
@@ -98,15 +94,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/lib/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/index.jsx

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

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/lib/internal/ClearFix';
+import spacing from 'material-ui/lib/styles/spacing';
+import styleResizable from 'material-ui/lib/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

@@ -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 spacing from 'material-ui/lib/styles/spacing';
+import styleResizable from 'material-ui/lib/utils/styleResizable';
 import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
 import {darkWhite, lightWhite, grey900} from 'material-ui/lib/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;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import {Link} from 'react-router';
-import {Paper, Mixins, Styles} from 'material-ui';
+import styleResizable from 'material-ui/lib/utils/styleResizable';
+import spacing from 'material-ui/styles/spacing';
+import transitions from 'material-ui/styles/transitions';
+import typography from 'material-ui/styles/typography';
 import {grey200} from 'material-ui/lib/styles/colors';
-
-const {StyleResizable} = Mixins;
-const {Spacing, Transitions, Typography} = Styles;
+import Paper from 'material-ui/paper';
 
 const HomeFeature = React.createClass({
 
@@ -16,7 +17,7 @@ const HomeFeature = React.createClass({
     route: React.PropTypes.string,
   },
 
-  mixins: [StyleResizable],
+  mixins: [styleResizable],
 
   getDefaultProps() {
     return {
@@ -32,11 +33,11 @@ const HomeFeature = React.createClass({
   },
 
   getStyles() {
-    const desktopGutter = Spacing.desktopGutter;
-    const desktopKeylineIncrement = Spacing.desktopKeylineIncrement;
+    const desktopGutter = spacing.desktopGutter;
+    const desktopKeylineIncrement = spacing.desktopKeylineIncrement;
     const styles = {
       root: {
-        transition: Transitions.easeOut(),
+        transition: transitions.easeOut(),
         maxWidth: '300px',
         margin: `0 auto ${desktopGutter}px auto`,
       },
@@ -56,8 +57,8 @@ const HomeFeature = React.createClass({
         paddingTop: 19,
         marginBottom: 13,
         letterSpacing: 0,
-        fontWeight: Typography.fontWeightMedium,
-        color: Typography.textDarkBlack,
+        fontWeight: typography.fontWeightMedium,
+        color: typography.textDarkBlack,
         backgroundColor: grey200,
         textAlign: 'center',
         margin: 0,
@@ -76,8 +77,8 @@ const HomeFeature = 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.root = Object.assign(
         styles.root,
         styles.rootWhenMedium,

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

@@ -4,7 +4,7 @@ import List from 'material-ui/lib/lists/list';
 import ListItem from 'material-ui/lib/lists/list-item';
 import Avatar from 'material-ui/lib/avatar';
 import Subheader from 'material-ui/lib/Subheader';
-import {SelectableContainerEnhance} from 'material-ui/lib/hoc/selectable-enhance';
+import {SelectableContainerEnhance} from 'material-ui/lib/lists/selectable-enhance';
 let SelectableList = SelectableContainerEnhance(List);
 
 function wrapState(ComposedComponent) {

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

@@ -1,11 +1,8 @@
 import React from 'react';
 import Title from 'react-title-component';
-
-import {Checkbox, Styles} from 'material-ui';
+import Checkbox from 'material-ui/checkbox';
 import CodeExample from '../../CodeExample';
-
-const {Typography} = Styles;
-
+import typography from 'material-ui/styles/typography';
 
 class InlineStyles extends React.Component {
   getStyles() {
@@ -16,17 +13,17 @@ class InlineStyles extends React.Component {
         paddingTop: 16,
         marginBottom: 12,
         letterSpacing: '0',
-        fontWeight: Typography.fontWeightNormal,
-        color: Typography.textDarkBlack,
+        fontWeight: typography.fontWeightNormal,
+        color: typography.textDarkBlack,
       },
       title: {
         fontSize: 20,
         lineHeight: '28px',
         paddingTop: 19,
         marginBottom: 13,
         letterSpacing: '0',
-        fontWeight: Typography.fontWeightMedium,
-        color: Typography.textDarkBlack,
+        fontWeight: typography.fontWeightMedium,
+        color: typography.textDarkBlack,
       },
     };
   }