pushing updated emotion example (vercel#3344)

* pushing updated emotion example * Fix linting
i8ramin · Dec 6, 2017 · 278f58b · 278f58b
1 parent 732696e
commit 278f58b
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 0 deletions.
diff --git a/examples/with-emotion-fiber/features/home.component.js b/examples/with-emotion-fiber/features/home.component.js
@@ -0,0 +1,12 @@
+import {Basic, Combined, Animated, bounce} from '../shared/styles'
+const Home = () => (
+  <div>
+    <Basic>Cool Styles</Basic>
+    <Combined>
+      With <code>:hover</code>.
+    </Combined>
+    <Animated animation={bounce}>Let's bounce.</Animated>
+  </div>
+)
+
+export default Home
diff --git a/examples/with-emotion-fiber/hoc/withEmotion.component.js b/examples/with-emotion-fiber/hoc/withEmotion.component.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { hydrate } from 'react-emotion'
+import { injectGlobalStyles } from '../shared/styles'
+
+const withEmotion = ComposedComponent => {
+  class HOC extends Component {
+    componentWillMount () {
+      if (typeof window !== 'undefined') {
+        hydrate(window.__NEXT_DATA__.ids)
+      }
+      injectGlobalStyles()
+    }
+
+    render () {
+      return <ComposedComponent />
+    }
+  };
+
+  return HOC
+}
+
+export default withEmotion
diff --git a/examples/with-emotion-fiber/package.json b/examples/with-emotion-fiber/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "with-emotion-fiber",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next"
+  },
+  "keywords": [],
+  "author": "Thomas Greco",
+  "license": "ISC",
+  "dependencies": {
+    "emotion": "^8.0.11",
+    "emotion-server": "^8.0.11",
+    "next": "^4.1.4",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-emotion": "^8.0.11"
+  }
+}
diff --git a/examples/with-emotion-fiber/pages/_document.js b/examples/with-emotion-fiber/pages/_document.js
@@ -0,0 +1,33 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { extractCritical } from 'emotion-server'
+
+export default class MyDocument extends Document {
+  static getInitialProps ({ renderPage }) {
+    const page = renderPage()
+    const styles = extractCritical(page.html)
+    return { ...page, ...styles }
+  }
+
+  constructor (props) {
+    super(props)
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = ids
+    }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          <title>With Emotion</title>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-emotion-fiber/pages/index.js b/examples/with-emotion-fiber/pages/index.js
@@ -0,0 +1,4 @@
+import withEmotion from '../hoc/withEmotion.component'
+import home from '../features/home.component'
+
+export default withEmotion(home)
diff --git a/examples/with-emotion-fiber/shared/styles.js b/examples/with-emotion-fiber/shared/styles.js
@@ -0,0 +1,61 @@
+import styled, { keyframes, css, injectGlobal } from 'react-emotion'
+
+export const injectGlobalStyles = () => injectGlobal`
+html, body {
+  padding: 3rem 1rem;
+  margin: 0;
+  background: papayawhip;
+  min-height: 100%;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 24px;
+}
+`
+
+export const basicStyles = css`
+background-color: white;
+color: cornflowerblue;
+border: 1px solid lightgreen;
+border-right: none;
+border-bottom: none;
+box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+transition: all 0.1s linear;
+margin: 3rem 0;
+padding: 1rem 0.5rem;
+`
+
+export const hoverStyles = css`
+&:hover {
+color: white;
+background-color: lightgray;
+border-color: aqua;
+box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+}
+`
+export const bounce = keyframes`
+from {
+transform: scale(1.01);
+}
+to {
+transform: scale(0.99);
+}
+`
+
+export const Basic = styled('div')`
+${basicStyles};
+`
+
+export const Combined = styled('div')`
+${basicStyles};
+${hoverStyles};
+& code {
+  background-color: linen;
+}
+`
+export const Animated = styled('div')`
+${basicStyles};
+${hoverStyles};
+& code {
+  background-color: linen;
+}
+animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
+`