Add Patternfly example (#9251)

* Add Patternfly example

* Fix lint

* Add missing space

* Remove trailing comma

examples/with-patternfly/README.md

+# Patternfly example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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-patternfly with-patternfly-app
+# or
+yarn create next-app --example with-patternfly with-patternfly-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-patternfly
+cd with-patternfly
+```
+
+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 Next.js along with [Patterfly](https://www.patternfly.org/v4/) including handling of external styles and assets. This is intended to show the integration of this design system with the Framework.

examples/with-patternfly/next.config.js

+const path = require('path')
+const withCSS = require('@zeit/next-css')
+const withTM = require('next-transpile-modules')
+
+const BG_IMAGES_DIRNAME = 'bgimages'
+
+module.exports = withCSS(
+  withTM({
+    transpileModules: ['@patternfly'],
+    // Webpack config from https://github.com/patternfly/patternfly-react-seed/blob/master/webpack.common.js
+    webpack (config) {
+      config.module.rules.push({
+        test: /\.(svg|ttf|eot|woff|woff2)$/,
+        // only process modules with this loader
+        // if they live under a 'fonts' or 'pficon' directory
+        include: [
+          path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
+          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+          path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
+          path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon')
+        ],
+        use: {
+          loader: 'file-loader',
+          options: {
+            // Limit at 50k. larger files emited into separate files
+            limit: 5000,
+            publicPath: '/_next/static/fonts/',
+            outputPath: 'static/fonts/',
+            name: '[name].[ext]'
+          }
+        }
+      })
+
+      config.module.rules.push({
+        test: /\.svg$/,
+        include: input => input.indexOf('background-filter.svg') > 1,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 5000,
+              publicPath: '/_next/static/svgs/',
+              outputPath: 'static/svgs/',
+              name: '[name].[ext]'
+            }
+          }
+        ]
+      })
+
+      config.module.rules.push({
+        test: /\.svg$/,
+        // only process SVG modules with this loader if they live under a 'bgimages' directory
+        // this is primarily useful when applying a CSS background using an SVG
+        include: input => input.indexOf(BG_IMAGES_DIRNAME) > -1,
+        use: {
+          loader: 'svg-url-loader',
+          options: {}
+        }
+      })
+
+      config.module.rules.push({
+        test: /\.svg$/,
+        // only process SVG modules with this loader when they don't live under a 'bgimages',
+        // 'fonts', or 'pficon' directory, those are handled with other loaders
+        include: input =>
+          input.indexOf(BG_IMAGES_DIRNAME) === -1 &&
+          input.indexOf('fonts') === -1 &&
+          input.indexOf('background-filter') === -1 &&
+          input.indexOf('pficon') === -1,
+        use: {
+          loader: 'raw-loader',
+          options: {}
+        }
+      })
+
+      config.module.rules.push({
+        test: /\.(jpg|jpeg|png|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 5000,
+              publicPath: '/_next/static/images/',
+              outputPath: 'static/images/',
+              name: '[name].[ext]'
+            }
+          }
+        ]
+      })
+
+      return config
+    }
+  })
+)

examples/with-patternfly/package.json

+{
+  "name": "with-patternfly",
+  "author": "Daniel Reinoso <danielreinoso1807@gmail.com>",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^3.112.3",
+    "next": "latest",
+    "next-transpile-modules": "^2.3.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "devDependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "file-loader": "^3.0.1",
+    "svg-url-loader": "^3.0.2",
+    "url-loader": "^1.1.2"
+  },
+  "license": "ISC"
+}

examples/with-patternfly/pages/_app.js

+import App from 'next/app'
+import '@patternfly/react-core/dist/styles/base.css'
+
+export default App

examples/with-patternfly/pages/index.js

+import { useState } from 'react'
+import { Button, Wizard } from '@patternfly/react-core'
+
+const steps = [
+  { name: 'Step 1', component: <p>Step 1</p> },
+  { name: 'Step 2', component: <p>Step 2</p> },
+  { name: 'Step 3', component: <p>Step 3</p> },
+  { name: 'Step 4', component: <p>Step 4</p> },
+  { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+]
+
+export default () => {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <>
+      <Button
+        variant='primary'
+        onClick={() => setIsOpen(true)}
+        style={{ margin: 20 }}
+      >
+        Show Wizard
+      </Button>
+      {isOpen && (
+        <Wizard
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title='Simple Wizard'
+          description='Simple Wizard Description'
+          steps={steps}
+        />
+      )}
+    </>
+  )
+}