Add Material-UI example (vercel#1771)

palafoxernesto · timneutkens · commit ce0a2f7b13d4 · 2017-04-22T14:52:49.000+02:00
* Add Material-UI example

* Fix linting on material-ui example
diff --git a/examples/with-material-ui/README.md b/examples/with-material-ui/README.md
@@ -0,0 +1,27 @@
+# Material-UI example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-material-ui
+cd with-material-ui
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+
+## The idea behind the example
+
+This example features how you use [material-ui](https://github.com/callemall/material-ui) (Material components that implement Google's Material Design) with Next.js.
+
diff --git a/examples/with-material-ui/package.json b/examples/with-material-ui/package.json
@@ -0,0 +1,14 @@
+{
+  "dependencies": {
+    "material-ui": "^0.17.4",
+    "next": "latest",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-tap-event-plugin": "^2.0.1"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  }
+}
diff --git a/examples/with-material-ui/pages/index.js b/examples/with-material-ui/pages/index.js
@@ -0,0 +1,97 @@
+import React, {Component} from 'react'
+import RaisedButton from 'material-ui/RaisedButton'
+import Dialog from 'material-ui/Dialog'
+import {deepOrange500} from 'material-ui/styles/colors'
+import FlatButton from 'material-ui/FlatButton'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import injectTapEventPlugin from 'react-tap-event-plugin'
+
+// Needed for onTouchTap
+// http://stackoverflow.com/a/34015469/988941
+try {
+  if (typeof window !== 'undefined') {
+    injectTapEventPlugin()
+  }
+} catch (e) {
+  // do nothing
+}
+
+const styles = {
+  container: {
+    textAlign: 'center',
+    paddingTop: 200
+  }
+}
+
+const _muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: deepOrange500
+  }
+})
+
+class Main extends Component {
+  static getInitialProps ({ req }) {
+    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
+    const isServer = !!req
+    return {isServer, userAgent}
+  }
+
+  constructor (props, context) {
+    super(props, context)
+
+    this.state = {
+      open: false
+    }
+  }
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false
+    })
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true
+    })
+  }
+
+  render () {
+    const standardActions = (
+      <FlatButton
+        label='Ok'
+        primary={Boolean(true)}
+        onTouchTap={this.handleRequestClose}
+      />
+    )
+
+    const { userAgent } = this.props
+    /* https://github.com/callemall/material-ui/issues/3336 */
+    const muiTheme = getMuiTheme(getMuiTheme({userAgent: userAgent}), _muiTheme)
+
+    return (
+      <MuiThemeProvider muiTheme={muiTheme}>
+        <div style={styles.container}>
+          <Dialog
+            open={this.state.open}
+            title='Super Secret Password'
+            actions={standardActions}
+            onRequestClose={this.handleRequestClose}
+          >
+            1-2-3-4-5
+          </Dialog>
+          <h1>Material-UI</h1>
+          <h2>example project</h2>
+          <RaisedButton
+            label='Super Secret Password'
+            secondary={Boolean(true)}
+            onTouchTap={this.handleTouchTap}
+          />
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}
+
+export default Main
