Use emotion-next in the site, update to gatsby v2 and add Community p…

…age (#720)

<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:
Use emotion-next in the site, update to gatsby v2 and add Community page

<!-- Why are these changes necessary? -->
**Why**:
I wanted to see what the migration to emotion@10 will be like

<!-- How were these changes implemented? -->
**How**:

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation
- [ ] Tests
- [ ] Code complete

<!-- feel free to add additional comments -->

<!-- Please add a `Tag:` prefixed label from the labels so that this PR shows up in the changelog -->

This isn't ready yet, I just wanted to open the PR to get people's thoughts on the Community page

.flowconfig

@@ -1,9 +1,10 @@
 [version]
-0.61.0
+0.73.0
 
 [ignore]
 .*/node_modules/config-chain/.*
 .*/node_modules/styled-components/.*
+.*/node_modules/graphql/.*
 
 
 [include]
@@ -23,4 +24,3 @@ module.name_mapper='^\(emotion-theming\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(create-emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(jest-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
-unsafe.enable_getters_and_setters=true

package.json

@@ -24,8 +24,8 @@
     "flow": "flow check"
   },
   "resolutions": {
-    "**/react": "^16.2.0",
-    "**/react-dom": "^16.2.0"
+    "**/react": "^16.3.2",
+    "**/react-dom": "^16.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.40",
@@ -38,7 +38,7 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^8.2.3",
-    "babel-flow-types": "^1.2.2",
+    "babel-flow-types": "^1.2.3",
     "babel-jest": "^20.0.3",
     "babel-plugin-closure-elimination": "^1.3.0",
     "babel-plugin-codegen": "^1.2.0",
@@ -67,7 +67,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.3.0",
     "eslint-plugin-standard": "^3.0.1",
-    "flow-bin": "^0.61.0",
+    "flow-bin": "^0.73.0",
     "gatsby-react-router-scroll": "^1.0.7",
     "get-lerna-packages": "^0.1.0",
     "hoist-non-react-statics": "^2.3.1",
@@ -84,10 +84,10 @@
     "polished": "^1.2.1",
     "prettier": "1.10.2",
     "raf": "^3.4.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "react-router-dom": "^4.2.2",
-    "react-test-renderer": "^16.2.0",
+    "react-test-renderer": "^16.3.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.60.1",
     "rollup-plugin-alias": "^1.3.1",
@@ -132,7 +132,8 @@
       "react/no-unused-prop-types": 0,
       "standard/computed-property-even-spacing": 0,
       "no-template-curly-in-string": 0,
-      "camelcase": 0
+      "camelcase": 0,
+      "import/no-duplicates":0
     },
     "env": {
       "browser": true

packages/babel-plugin-emotion/src/babel-utils.js

@@ -6,7 +6,7 @@ import type { Types, Identifier } from 'babel-flow-types'
 
 export { getLabelFromPath as getIdentifierName } from '@emotion/babel-utils'
 
-function cloneNode(t, node) {
+function cloneNode(t: any, node) {
   return (typeof t.cloneNode === 'function' ? t.cloneNode : t.cloneDeep)(node)
 }
 

packages/babel-plugin-emotion/src/index.js

@@ -14,7 +14,6 @@ import {
 } from './babel-utils'
 import type {
   Node,
-  BabelPath as _BabelPath,
   Identifier,
   BabelPluginPass,
   Types,
@@ -28,9 +27,7 @@ import { addSourceMaps } from './source-map'
 import cssProps from './css-prop'
 import { getExpressionsFromTemplateLiteral } from '@emotion/babel-utils'
 
-export type BabelPath = _BabelPath & {
-  node: *
-}
+export type BabelPath = any
 
 export function hashArray(arr: Array<string>) {
   return hashString(arr.join(''))

packages/emotion-theming/src/theme-provider.js

@@ -2,15 +2,16 @@
 // adapted from styled-components' ThemeProvider
 // https://github.com/styled-components/styled-components/blob/4503cab5b86aa9ef8314c5baa360a2fbb4812485/src/models/ThemeProvider.js
 
-import { Component, Children } from 'react'
+import { Component, Children, type Node as ReactNode } from 'react'
 import createBroadcast from './create-broadcast'
 import { channel, contextTypes, type Theme } from './utils'
 
 const isPlainObject = test =>
   Object.prototype.toString.call(test) === '[object Object]'
 
 type Props = {
-  theme: Theme
+  theme: Theme,
+  children: ReactNode
 }
 
 class ThemeProvider extends Component<Props> {

packages/emotion/test/insertion.test.js

@@ -2,7 +2,7 @@
 import Stylis from '@emotion/stylis'
 import stylisRuleSheet from 'stylis-rule-sheet'
 
-const specs = [
+const specs: any = [
   {
     name: 'calc rules',
     sample: 'height:calc( 100vh - 1px );height:calc(100vh -1px);'

packages/jest-emotion/src/utils.js

@@ -1,6 +1,6 @@
 // @flow
 
-function getClassNames(selectors, classes) {
+function getClassNames(selectors: any, classes?: string) {
   return classes ? selectors.concat(classes.split(' ')) : selectors
 }
 

packages/site/gatsby-config.js

@@ -31,13 +31,15 @@ module.exports = {
         }
       },
       {
-        resolve: `gatsby-plugin-favicon`,
+        // todo: contribute to gatsby-plugin-manifest
+        // https://github.com/gatsbyjs/gatsby/issues/5887
+        resolve: `gatsby-plugin-favicon-fork`,
         options: {
           logo: `${__dirname}/../../emotion.png`,
           injectHTML: true,
           icons: {
             android: false,
-            appleIcon: false,
+            appleIcon: true,
             appleStartup: false,
             coast: false,
             favicons: true,
@@ -48,7 +50,20 @@ module.exports = {
           }
         }
       },
-      `gatsby-transformer-remark`,
+      'gatsby-plugin-emotion-next-compat',
+      {
+        resolve: `gatsby-transformer-remark`,
+        options: {
+          plugins: [
+            'gatsby-remark-remove-readme-titles',
+            'gatsby-remark-change-awesome',
+            'gatsby-remark-live-code',
+            'gatsby-remark-autolink-headers',
+            'gatsby-remark-prismjs',
+            'gatsby-remark-smartypants'
+          ]
+        }
+      },
       `gatsby-plugin-react-helmet`,
       'gatsby-plugin-sharp',
       'gatsby-transformer-sharp',