added example with flow (#814)

jagreehal · rauchg · commit 1e7756865763 · 2017-01-19T01:48:55.000-08:00
* added  example with flow

* Fixed linting errors
diff --git a/examples/with-flow/.babelrc b/examples/with-flow/.babelrc
@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        "transform-flow-strip-types"
+    ]
+}
diff --git a/examples/with-flow/.flowconfig b/examples/with-flow/.flowconfig
@@ -0,0 +1,7 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]
diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md
@@ -0,0 +1,29 @@
+# Example app with [Flow](https://flowtype.org/)
+
+## 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-styled-components
+cd with-flow
+```
+
+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 shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
+
+![with-flow](with-flow.gif)
diff --git a/examples/with-flow/components/layout.js b/examples/with-flow/components/layout.js
@@ -0,0 +1,31 @@
+// @flow
+
+import type {Element} from 'React'
+import Link from 'next/link'
+import Head from 'next/head'
+
+type Props = {
+  children?: Element<any>,
+  title?: string
+}
+
+export default ({children, title = 'This is the default title'}: Props) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+      <meta charSet='utf-8' />
+      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+    </Head>
+    <header>
+      <nav>
+        <Link href='/'><a>Home</a></Link>|
+        <Link href='/about'><a>About</a></Link>|
+        <Link href='/contact'><a>Contact</a></Link>
+      </nav>
+    </header>
+    {children}
+    <footer>
+      I`m here to stay
+    </footer>
+  </div>
+)
diff --git a/examples/with-flow/package.json b/examples/with-flow/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "with-flow",
+  "version": "1.0.0",    
+  "license": "MIT",
+  "author": "Jag Reehal",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "flow": "flow; test $? -eq 0 -o $? -eq 2",    
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta"
+  },
+  "devDependencies": {
+    "babel-eslint": "^7.1.1",
+    "babel-plugin-transform-flow-strip-types": "^6.21.0",    
+    "flow-bin": "^0.37.4"
+  }
+}
diff --git a/examples/with-flow/pages/about.js b/examples/with-flow/pages/about.js
@@ -0,0 +1,9 @@
+// @flow
+
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout title='About us'>
+    <div>About us</div>
+  </Layout>
+)
diff --git a/examples/with-flow/pages/contact.js b/examples/with-flow/pages/contact.js
@@ -0,0 +1,9 @@
+// @flow
+
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout title='Contact us'>
+    <div>Contact</div>
+  </Layout>
+)
diff --git a/examples/with-flow/pages/index.js b/examples/with-flow/pages/index.js
@@ -0,0 +1,9 @@
+// @flow
+
+import Layout from '../components/layout'
+
+export default () => (
+  <Layout>
+    <div>Hello World.</div>
+  </Layout>
+)
diff --git a/examples/with-flow/with-flow.gif b/examples/with-flow/with-flow.gif
