Added with-unstated example (#4628)

Small example app using [unstated](https://github.com/jamiebuilds/unstated) library. Example uses components and logic from [with-redux](https://github.com/zeit/next.js/tree/canary/examples/with-redux) example.

examples/with-unstated/README.md

@@ -0,0 +1,44 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/canary/examples/with-unstated)
+
+# Unstated example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-unstated with-unstated-app
+# or
+yarn create next-app --example with-unstated with-unstated-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-unstated
+cd with-unstated
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn 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 shows how to integrate Unstated in Next.js. For more info about Unstated you can visit [here](https://github.com/jamiebuilds/unstated). The example is basically same as [redux example](https://github.com/zeit/next.js/tree/canary/examples/with-redux)

examples/with-unstated/components/Clock.js

@@ -0,0 +1,23 @@
+export default ({ clock: { state: { lastUpdate, light } } }) => {
+  return (
+    <div className={light ? 'light' : ''}>
+      {format(new Date(lastUpdate))}
+      <style jsx>{`
+        div {
+          padding: 15px;
+          display: inline-block;
+          color: #82FA58;
+          font: 50px menlo, monaco, monospace;
+          background-color: #000;
+        }
+        .light {
+          background-color: #999;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const format = t => `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
+
+const pad = n => n < 10 ? `0${n}` : n

examples/with-unstated/components/Counter.js

@@ -0,0 +1,8 @@
+export default ({ counter }) => (
+  <div>
+    <h1>Count: <span>{counter.state.count}</span></h1>
+    <button onClick={() => counter.decrement()}>-1</button>
+    <button onClick={() => counter.increment()}>+1</button>
+    <button onClick={() => counter.reset()}>Reset</button>
+  </div>
+)

examples/with-unstated/components/index.js

@@ -0,0 +1,4 @@
+import Clock from './Clock'
+import Counter from './Counter'
+
+export { Clock, Counter }

examples/with-unstated/containers/ClockContainer.js

@@ -0,0 +1,14 @@
+import { Container } from 'unstated'
+
+export default class ClockContainer extends Container {
+  state = {
+    lastUpdate: 0,
+    light: false
+  }
+  constructor () {
+    super()
+    this.interval = setInterval(() => {
+      this.setState((state) => ({ light: !state.light, lastUpdate: Date.now() }))
+    }, 1000)
+  }
+}

examples/with-unstated/containers/CounterContainer.js

@@ -0,0 +1,19 @@
+import { Container } from 'unstated'
+
+export default class CounterContainer extends Container {
+  state = {
+    count: 0
+  }
+
+  increment = () => {
+    this.setState((state) => ({ count: state.count + 1 }))
+  }
+
+  decrement = () => {
+    this.setState((state) => ({ count: state.count - 1 }))
+  }
+
+  reset = () => {
+    this.setState({ count: 0 })
+  }
+}

examples/with-unstated/containers/index.js

@@ -0,0 +1,4 @@
+import CounterContainer from './CounterContainer'
+import ClockContainer from './ClockContainer'
+
+export { CounterContainer, ClockContainer }

examples/with-unstated/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-unstated",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "unstated": "^2.1.1"
+  }
+}

examples/with-unstated/pages/_app.js

@@ -0,0 +1,18 @@
+import App, {Container} from 'next/app'
+import React from 'react'
+import { Provider } from 'unstated'
+
+class MyApp extends App {
+  render () {
+    const {Component, pageProps} = this.props
+    return (
+      <Container>
+        <Provider>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp

examples/with-unstated/pages/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Subscribe } from 'unstated'
+import { ClockContainer, CounterContainer } from '../containers'
+import { Clock, Counter } from '../components'
+
+class Index extends React.Component {
+  componentWillUnmount () {
+    clearInterval(this.timer)
+  }
+  render () {
+    return (
+      <Subscribe to={[ClockContainer, CounterContainer]}>
+        {
+          (clock, counter) => {
+            this.timer = clock.interval
+            return (
+              <div>
+                <Clock clock={clock} />
+                <Counter counter={counter} />
+              </div>
+            )
+          }
+        }
+      </Subscribe>
+    )
+  }
+}
+
+export default Index