Add nextjs example

cdonohue · Sep 1, 2019 · 4f103f3 · 4f103f3
1 parent 14120dc
commit 4f103f3
Show file tree

Hide file tree

Showing 7 changed files with 743 additions and 65 deletions.
diff --git a/.gitignore b/.gitignore
@@ -68,4 +68,5 @@ yarn-error.log
 .yarn-integrity
 
 dist
-build
+build
+.next
diff --git a/packages/examples/with-next/package.json b/packages/examples/with-next/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "with-next",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "benefit-react": "2.0.1",
+    "next": "9.0.5",
+    "react": "16.9.0",
+    "react-dom": "16.9.0"
+  }
+}
diff --git a/packages/examples/with-next/pages/_app.js b/packages/examples/with-next/pages/_app.js
@@ -0,0 +1,49 @@
+import App from "next/app"
+import Head from "next/head"
+import { ConfigProvider, StylesContainer } from "benefit-react"
+
+export default class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return {
+      pageProps: { ...pageProps },
+    }
+  }
+
+  render() {
+    const { Component, pageProps } = this.props
+
+    const colors = {
+      primary: "yellow",
+    }
+
+    return (
+      <ConfigProvider
+        config={(config) => ({
+          ...config,
+          theme: {
+            ...config.theme,
+            backgroundColor: {
+              ...config.theme.backgroundColor,
+              ...colors,
+            },
+            textColor: {
+              ...config.theme.textColor,
+              ...colors,
+            },
+          },
+        })}
+      >
+        <Head>
+          <StylesContainer />
+        </Head>
+        <Component {...pageProps} />
+      </ConfigProvider>
+    )
+  }
+}
diff --git a/packages/examples/with-next/pages/_document.js.old b/packages/examples/with-next/pages/_document.js.old
@@ -0,0 +1,21 @@
+import Document from "next/document"
+import { withStyles } from "benefit-react"
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const originalRenderPage = ctx.renderPage
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        // useful for wrapping the whole react tree
+        enhanceApp: (App) => withStyles(App),
+      })
+
+    // Run the parent `getInitialProps` using `ctx` that now includes our custom `renderPage`
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+}
+
+export default MyDocument
diff --git a/packages/examples/with-next/pages/about.js b/packages/examples/with-next/pages/about.js
@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx } from "benefit-react"
+
+function About() {
+  return (
+    <div className="font-bold text-primary text-5xl bg-gray-100 p-8">
+      Welcome to About{" "}
+      <a
+        className="cursor-pointer font-bold text-red-500 no-underline"
+        href="/"
+      >
+        Back Home
+      </a>{" "}
+    </div>
+  )
+}
+
+export default About
diff --git a/packages/examples/with-next/pages/index.js b/packages/examples/with-next/pages/index.js
@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import { css, jsx } from "benefit-react"
+
+function Home() {
+  return (
+    <div className="text-primary font-sans">
+      Welcome to Next.js! Click{" "}
+      <a
+        className="cursor-pointer font-bold text-red-500 no-underline"
+        href="/about"
+      >
+        here
+      </a>{" "}
+      to read more
+      <div className="bg-primary mb-8 p-4 text-white rounded">lorem ipsum</div>
+      <div
+        className="bg-yellow-500"
+        css={css`
+          text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.12);
+        `}
+      >
+        Hello
+      </div>
+      <div className="bg-blue-500">World</div>
+    </div>
+  )
+}
+
+export default Home
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,4 +68,5 @@ yarn-error.log @@
     .yarn-integrity
     dist
-    build
+    build
+    .next