Merge pull request mui#2657 from oliviertassinari/examples-update

[Examples] Update for the 0.14 release

examples/browserify-gulp-example/README.md

@@ -3,27 +3,31 @@
 This is an example project that uses [Material-UI](http://callemall.github.io/material-ui/).
 
 ## Installation
+
 After cloning the repository, install dependencies:
-```
+```sh
 cd <project folder>/material-ui/examples/browserify-gulp-example
 npm install
 ```
 
 Now you can run your local server:
-```
+```sh
 npm start
 ```
-#Description of [Gulp](https://github.com/gulpjs/gulp) Plugins
+## Description of [Gulp](https://github.com/gulpjs/gulp) Plugins
 
+### [browserify](https://github.com/substack/node-browserify)
 
-##[browserify](https://github.com/substack/node-browserify)
 Browsers do not allow us to use the require method from Node.js. With browserify, we can implement dependency management on the browser. It also will bundle the code into one file in an efficient way to not repeat dependiencies that are used more than once.
 
-##[browserSync](http://www.browsersync.io/)
+### [browserSync](http://www.browsersync.io/)
+
 When developing and testing the website, browserSync is a powerful tool that will rebuild and refresh the webpage so you can see the changes you make as you are working.
 
-##markup
+### markup
+
 Copies all of the files from /src/www to the build folder.
 
-##[gulp_starter](https://github.com/greypants/gulp-starter)
+### [gulp_starter](https://github.com/greypants/gulp-starter)
+
 A useful repository that explains how many of gulp's features work and contains an example project to get familiar with it. We use this example to construct our own project.

examples/browserify-gulp-example/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "material-ui-example",
-  "version": "0.13.2",
+  "name": "material-ui-example-browserify",
+  "version": "0.14.0",
   "description": "Sample project that uses material-ui",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "watchify": "^2.2.1"
   },
   "dependencies": {
-    "material-ui": "^0.13.0",
+    "material-ui": "^0.14.0",
     "react": "^0.14.0",
     "react-dom":"^0.14.0",
     "react-tap-event-plugin": "^0.2.1"

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

@@ -6,18 +6,13 @@ import Dialog from 'material-ui/lib/dialog';
 import ThemeManager from 'material-ui/lib/styles/theme-manager';
 import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
 import Colors from 'material-ui/lib/styles/colors';
+import FlatButton from 'material-ui/lib/flat-button';
 
 const containerStyle = {
   textAlign: 'center',
   paddingTop: 200,
 };
 
-const standardActions = [
-  {
-    text: 'Okay',
-  },
-];
-
 const Main = React.createClass({
 
   childContextTypes: {
@@ -27,6 +22,7 @@ const Main = React.createClass({
   getInitialState() {
     return {
       muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
+      open: false,
     };
   },
 
@@ -57,6 +53,14 @@ const Main = React.createClass({
   },
 
   render() {
+    const standardActions = (
+      <FlatButton
+        label="Okey"
+        secondary={true}
+        onTouchTap={this._handleRequestClose}
+      />
+    );
+
     return (
       <div style={containerStyle}>
         <Dialog

examples/webpack-example/README.md

@@ -3,29 +3,42 @@
 This is an example project that uses [Material-UI](http://callemall.github.io/material-ui/).
 
 ## Installation
+
 After cloning the repository, install dependencies:
-```
+```sh
 cd <project folder>/material-ui/examples/webpack-example
 npm install
 ```
 
 Now you can run your local server:
-```
+```sh
 npm start
 ```
 Server is located at http://localhost:3000
 
-#Description of [Webpack](http://webpack.github.io/docs/)
+## Description of [Webpack](http://webpack.github.io/docs/)
+
 Webpack is a module bundler that we are using to run our documentation site. This is a quick overview of how the configuration file works.
-##Webpack Configuration:
-###Entry:
+
+### Webpack Configuration:
+
+#### Entry
+
 Webpack creates entry points for the application to know where it starts.
-###Resolve:
+
+#### Resolve
+
 Webpack uses this configuration options to determine how it will deal with requiring files. For example, when the extension is omitted in a require, Webpack will look at the extensions option and try applying one of those.
-###Output:
+
+#### Output
+
 This is where the bundled project will go to and any other files necessary for it to run.
-###Plugins:
+
+#### Plugins
+
 These are plugins Webpack uses for more functionality. The HTML Webpack Plugin, for example, will add the index.html to your build folder.
-###Modules:
+
+#### Modules
+
 Modules and other things that are required will usually need to be loaded and interpreted by Webpack when bundling, and this is where Webpack looks for the different loaders.
 *Loading .js files in es6 and es7 will require a loader like babel-loader to interpret the files into es5.

examples/webpack-example/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "material-ui-example",
-  "version": "0.13.2",
+  "name": "material-ui-example-webpack",
+  "version": "0.14.0",
   "description": "Sample project that uses material-ui",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "webpack-dev-server": "^1.10.1"
   },
   "dependencies": {
-    "material-ui": "^0.13.0",
+    "material-ui": "^0.14.0",
     "react": "^0.14.0",
     "react-dom":"^0.14.0",
     "react-tap-event-plugin": "^0.2.1"

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

@@ -6,18 +6,13 @@ import Dialog from 'material-ui/lib/dialog';
 import ThemeManager from 'material-ui/lib/styles/theme-manager';
 import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
 import Colors from 'material-ui/lib/styles/colors';
+import FlatButton from 'material-ui/lib/flat-button';
 
 const containerStyle = {
   textAlign: 'center',
   paddingTop: 200,
 };
 
-const standardActions = [
-  {
-    text: 'Okay',
-  },
-];
-
 const Main = React.createClass({
 
   childContextTypes: {
@@ -27,6 +22,7 @@ const Main = React.createClass({
   getInitialState() {
     return {
       muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
+      open: false,
     };
   },
 
@@ -57,6 +53,14 @@ const Main = React.createClass({
   },
 
   render() {
+    const standardActions = (
+      <FlatButton
+        label="Okey"
+        secondary={true}
+        onTouchTap={this._handleRequestClose}
+      />
+    );
+
     return (
       <div style={containerStyle}>
         <Dialog