[Examples] Add webpack example

examples/webpack-example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

examples/webpack-example/.eslintrc

@@ -0,0 +1,35 @@
+{
+  "root": true, // Don't traverse ancestor directories looking for .eslintrc[.*] files to merge.
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "curly": 0,
+    "comma-dangle": [2, "always-multiline"],
+    "comma-spacing": 0,
+    "eqeqeq": [2, "allow-null"],
+    "key-spacing": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-expressions": 0,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 0,
+    "no-extend-native": 0,
+    "no-var": 2,
+    "new-cap": 0,
+    "quotes": 0,
+    "semi-spacing": 0,
+    "space-unary-ops": 0,
+    "space-infix-ops": 0,
+    "consistent-return": 0,
+    "strict": 0
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "ecmaFeatures": {
+    "jsx": true
+  }
+}

examples/webpack-example/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

examples/webpack-example/README.md

@@ -0,0 +1,56 @@
+# [Material-UI](http://callemall.github.io/material-ui/) - Example Webpack Project
+
+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
+
+Note: To allow external viewing of the demo, change the following value in `webpack-dev-server.config.js`
+
+```
+host: 'localhost'  //Change to '0.0.0.0' for external facing server
+```
+
+You can also lint your code with:
+
+```sh
+npm run lint
+```
+
+## 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 creates entry points for the application to know where it starts.
+
+#### 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
+
+This is where the bundled project will go to and any other files necessary for it to run.
+
+#### 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 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

@@ -0,0 +1,37 @@
+{
+  "name": "formsy-material-ui-example-webpack",
+  "version": "0.15.0-beta.1",
+  "description": "Sample project that uses formsy-material-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mbrookes/formsy-material-ui.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors",
+    "build": "webpack --config webpack-production.config.js --progress --colors",
+    "lint": "eslint src && echo \"eslint: no lint errors\""
+  },
+  "private": true,
+  "devDependencies": {
+    "babel-core": "^6.3.26",
+    "babel-eslint": "^6.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "eslint": "^2.5.1",
+    "eslint-plugin-react": "^4.0.0",
+    "html-webpack-plugin": "^2.7.2",
+    "react-hot-loader": "^1.3.0",
+    "transfer-webpack-plugin": "^0.1.4",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.14.0"
+  },
+  "dependencies": {
+    "formsy-react": "^0.17.0",
+    "formsy-material-ui": "0.3.9",
+    "material-ui": "^0.15.0-beta.1",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-tap-event-plugin": "^1.0.0"
+  }
+}

examples/webpack-example/src/app/Main.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import Formsy from 'formsy-react';
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import MenuItem from 'material-ui/MenuItem';
+import FormsyCheckbox from 'formsy-material-ui/lib/FormsyCheckbox';
+import FormsyDate from 'formsy-material-ui/lib/FormsyDate';
+import FormsyRadio from 'formsy-material-ui/lib/FormsyRadio';
+import FormsyRadioGroup from 'formsy-material-ui/lib/FormsyRadioGroup';
+import FormsySelect from 'formsy-material-ui/lib/FormsySelect';
+import FormsyText from 'formsy-material-ui/lib/FormsyText';
+import FormsyTime from 'formsy-material-ui/lib/FormsyTime';
+import FormsyToggle from 'formsy-material-ui/lib/FormsyToggle';
+
+const muiTheme = getMuiTheme();
+
+const Main = React.createClass({
+
+  // childContextTypes: {
+  //   muiTheme: React.PropTypes.object,
+  // },
+  //
+  // getChildContext(){
+  //   return {
+  //     muiTheme: getMuiTheme(),
+  //   }
+  // },
+
+  getInitialState() {
+    return {
+      canSubmit: false,
+    };
+  },
+
+  errorMessages: {
+    wordsError: "Please only use letters",
+    numericError: "Please provide a number",
+    urlError: "Please provide a valid URL",
+  },
+
+  styles: {
+    paperStyle: {
+      width: 300,
+      margin: 'auto',
+      padding: 20,
+    },
+    switchStyle: {
+      marginBottom:16,
+    },
+    submitStyle: {
+      marginTop: 32,
+    },
+  },
+
+  enableButton() {
+    this.setState({
+      canSubmit: true,
+    });
+  },
+
+  disableButton() {
+    this.setState({
+      canSubmit: false,
+    });
+  },
+
+  submitForm(data) {
+    alert(JSON.stringify(data, null, 4));
+  },
+
+  notifyFormError(data) {
+    console.error('Form error:', data);
+  },
+
+  render() {
+    let {paperStyle, switchStyle, submitStyle } = this.styles;
+    let { wordsError, numericError, urlError } = this.errorMessages;
+
+    return (
+      <MuiThemeProvider muiTheme={muiTheme}>
+        <Paper style={paperStyle}>
+          <Formsy.Form
+            onValid={this.enableButton}
+            onInvalid={this.disableButton}
+            onValidSubmit={this.submitForm}
+            onInvalidSubmit={this.notifyFormError}
+          >
+            <FormsyText
+              name="name"
+              validations="isWords"
+              validationError={wordsError}
+              required
+              hintText="What is your name?"
+              floatingLabelText="Name"
+            />
+            <FormsyText
+              name="age"
+              validations="isNumeric"
+              validationError={numericError}
+              hintText="Are you a wrinkly?"
+              floatingLabelText="Age (optional)"
+            />
+            <FormsyText
+              name="url"
+              validations="isUrl"
+              validationError={urlError}
+              required
+              defaultValue="http://"
+              hintText="http://www.example.com"
+              floatingLabelText="URL"
+            />
+            <FormsySelect
+              name="frequency"
+              required
+              floatingLabelText="How often do you?"
+              menuItems={this.selectFieldItems}
+            >
+              <MenuItem value={'never'} primaryText="Never" />
+              <MenuItem value={'nightly'} primaryText="Every Night" />
+              <MenuItem value={'weeknights'} primaryText="Weeknights" />
+            </FormsySelect>
+            <FormsyDate
+              name="date"
+              required
+              floatingLabelText="Date"
+            />
+            <FormsyTime
+              name="time"
+              required
+              floatingLabelText="Time"
+            />
+            <FormsyCheckbox
+              name="agree"
+              label="Do you agree to disagree?"
+              style={switchStyle}
+            />
+            <FormsyToggle
+              name="toggle"
+              label="Toggle"
+              style={switchStyle}
+            />
+            <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light">
+              <FormsyRadio
+                value="light"
+                label="prepare for light speed"
+                style={switchStyle}
+              />
+              <FormsyRadio
+                value="not_light"
+                label="light speed too slow"
+                style={switchStyle}
+              />
+              <FormsyRadio
+                value="ludicrous"
+                label="go to ludicrous speed"
+                style={switchStyle}
+                disabled={true}
+              />
+            </FormsyRadioGroup>
+            <RaisedButton
+              style={submitStyle}
+              type="submit"
+              label="Submit"
+              disabled={!this.state.canSubmit}
+            />
+          </Formsy.Form>
+        </Paper>
+      </MuiThemeProvider>
+    );
+  },
+});
+
+export default Main;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import Main from './Main'; // Our custom react component
+
+//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 react component into the app div.
+// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
+ReactDOM.render(<Main />, document.getElementById('app'));

examples/webpack-example/src/www/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Material-UI Example</title>
+  <meta name="description" content="Google's material design UI components built with React.">
+
+  <!-- Use minimum-scale=1 to enable GPU rasterization -->
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
+  >
+  <link rel="stylesheet" type="text/css" href="main.css">
+</head>
+
+<body>
+  <div id="app"></div>
+
+  <!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
+  <script>
+    var WebFontConfig = {
+      google: { families: [ 'Roboto:400,300,500:latin' ] }
+    };
+    (function() {
+      var wf = document.createElement('script');
+      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+      wf.type = 'text/javascript';
+      wf.async = 'true';
+      var s = document.getElementsByTagName('script')[0];
+      s.parentNode.insertBefore(wf, s);
+    })();
+  </script>
+  <script src="app.js"></script>
+</body>
+
+</html>

examples/webpack-example/src/www/main.css

@@ -0,0 +1,8 @@
+html {
+  font-family: 'Roboto', sans-serif;
+}
+
+body {
+  font-size: 13px;
+  line-height: 20px;
+}