Adds example for Office UI Fabric React. (vercel#6705)

* Adds example for Office UI Fabric React.

* Fixes code style errors.

Author: juliomenendez

examples/with-office-ui-fabric-react/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/master/examples/with-office-ui-fabric-react)
+
+# Office UI Fabric React 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-office-ui-fabric-react with-office-ui-fabric-react-app
+# or
+yarn create next-app --example with-office-ui-fabric-react with-office-ui-fabric-react-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-office-ui-fabric-react
+cd with-office-ui-fabric-react
+```
+
+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 use Office UI Fabric React in Next.js.

examples/with-office-ui-fabric-react/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-office-ui-fabric-react",
+  "version": "1.0.0",
+  "dependencies": {
+    "next": "^8.03",
+    "office-ui-fabric-react": "^6.154.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "devDependencies": {},
+  "license": "ISC",
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  }
+}

examples/with-office-ui-fabric-react/pages/index.js

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import { Fabric } from 'office-ui-fabric-react/lib-commonjs/Fabric'
+import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib-commonjs/Button'
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib-commonjs/Dialog'
+
+export default () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const openDialog = () => setIsOpen(true)
+  const closeDialog = () => setIsOpen(false)
+  return (
+    <Fabric>
+      <p>Welcome to next.js!</p>
+      <DefaultButton primary onClick={openDialog}>Open Dialog</DefaultButton>
+      <Dialog
+        hidden={!isOpen}
+        onDismiss={closeDialog}
+        dialogContentProps={{
+          type: DialogType.normal,
+          title: 'Test Dialog'
+        }}
+        modalProps={{
+          isBlocking: true
+        }}
+      >
+        <p>This is a test dialog.</p>
+        <DialogFooter>
+          <PrimaryButton onClick={closeDialog} text='OK' />
+          <DefaultButton onClick={closeDialog} text='Cancel' />
+        </DialogFooter>
+      </Dialog>
+    </Fabric>
+  )
+}

examples/with-office-ui-fabric-react/server.js

@@ -0,0 +1,30 @@
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const library = require('office-ui-fabric-react/lib-commonjs/Utilities')
+const responsiveLib = require('office-ui-fabric-react/lib-commonjs/utilities/decorators/withResponsiveMode')
+
+library.setSSR(true)
+library.setRTL(false)
+// Assume a large screen.
+responsiveLib.setResponsiveMode(responsiveLib.ResponsiveMode.large)
+
+// Hack to prevent issues with office-ui-fabric-react SSR support.
+process.__currentId__ = 0
+// --
+
+const port = parseInt(process.env.PORT, 10) || 3000
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare().then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    handle(req, res, parsedUrl)
+  }).listen(port, err => {
+    if (err) throw err
+    console.log(`> Ready on http://localhost:${port}`)
+  })
+})