chore: upgrade to emotion v11 (#1587)

Co-authored-by: Pedro Nauck <pedronauck@gmail.com>

core/docz/package.json

@@ -23,7 +23,7 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.16",
+    "@emotion/react": "^11.1.1",
     "@mdx-js/react": "^1.0.27",
     "array-sort": "^1.0.0",
     "capitalize": "^2.0.0",

core/gatsby-theme-docz/README.md

@@ -77,7 +77,7 @@ One of the coolest thing of Docz is that you can create your own theme if you wa
 ```js
 import React from 'react'
 import { theme, useConfig, ComponentsProvider } from 'docz'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/react'
 import baseComponents from 'gatsby-theme-docz/src/components'
 
 import { Menu } from './MyBeautifulMenu'

core/gatsby-theme-docz/package.json

@@ -16,15 +16,14 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
     "@loadable/component": "^5.10.2",
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
     "@theme-ui/typography": "^0.2.5",
     "babel-plugin-export-metadata": "^2.3.0",
     "copy-text-to-clipboard": "^2.1.0",
-    "emotion-theming": "^10.0.14",
     "fs-extra": "^8.1.0",
     "gatsby": "^2.13.27",
     "gatsby-plugin-alias-imports": "^1.0.5",

core/gatsby-theme-docz/src/components/Layout/index.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useRef, useState } from 'react'
 import { jsx, Layout as BaseLayout, Main } from 'theme-ui'
-import { Global } from '@emotion/core'
+import { Global } from '@emotion/react'
 
 import global from '~theme/global'
 import { Header } from '../Header'

core/gatsby-theme-docz/src/components/Sidebar/index.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
-import { Global } from '@emotion/core'
+/** @jsxFrag React.Fragment */
+import React, { forwardRef, useState, useRef, useEffect } from 'react'
+import { Global } from '@emotion/react'
 import { jsx, Box } from 'theme-ui'
 import { useMenus, useCurrentDoc } from 'docz'
 

examples/flow/package.json

@@ -14,8 +14,8 @@
     "build": "docz build"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
     "docz": "latest",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

examples/images/package.json

@@ -13,8 +13,8 @@
     "build": "docz build"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
     "docz": "latest",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

examples/logo-in-sidebar/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { Fragment, forwardRef, useState, useRef, useEffect } from 'react'
-import { Global } from '@emotion/core'
-import { jsx, Box } from 'theme-ui'
-import { useMenus, useCurrentDoc } from 'docz'
+import { Global } from "@emotion/react";
+import { jsx, Box } from "theme-ui";
+import { useMenus, useCurrentDoc } from "docz";
 
 import * as styles from 'gatsby-theme-docz/src/components/Sidebar/styles'
 import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch'

examples/now/package.json

@@ -16,8 +16,8 @@
     "deploy": "npm run build && now"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
     "docz": "latest",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

examples/typescript/package.json

@@ -14,8 +14,8 @@
     "build": "docz build"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
     "docz": "latest",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

examples/with-algolia-search/src/docs/customizing/powered-by-gatsby.mdx

@@ -23,7 +23,7 @@ Using Gatsby as bundler behind the scenes gives you a lot of benefits like :
 
 ## Gatsby API and Hooks
 
-Gatsby has an extensive [API for developers](https://www.gatsbyjs.org/docs/api-reference/) and a lot of hooks and lifecycle methods that you can use in order to customize your build process. 
+Gatsby has an extensive [API for developers](https://www.gatsbyjs.org/docs/api-reference/) and a lot of hooks and lifecycle methods that you can use in order to customize your build process.
 
 You can hook into it in a lot of ways and all of these hooks and properties are available when you use docz.
 
@@ -35,7 +35,7 @@ create it in the root and docz will do the rest.
 If you want to make some changes to your webpack configuration, you can use
 the `onCreateWebpackConfig` hook by exporting a function from the `gatsby-node.js` file.
 
-For example to create aliases or change how your modules are resolved, you can do something like the below example :  
+For example to create aliases or change how your modules are resolved, you can do something like the below example :
 
 ```js
 // gatsby-node.js
@@ -61,7 +61,7 @@ Or if you want to change your Babel configuration you can use the `onCreateBabel
 // gatsby-node.js
 exports.onCreateBabelConfig = ({ actions }) => {
   actions.setBabelPlugin({
-    name:  `babel-plugin-emotion`,
+    name:  `@emotion/babel-plugin`,
     options: {
       sourceMap: true,
     },

examples/with-algolia-search/src/docs/references/creating-plugins.mdx

@@ -64,7 +64,7 @@ A set of preconfigured webpack config plugins
 
 `actions {object}`
 
-#### Example 
+#### Example
 
 ```js
 exports.onCreateWebpackConfig = ({
@@ -115,7 +115,7 @@ exports.onCreateBabelConfig = ({
  stage, getConfig, rules, loaders, actions
 }) => {
   actions.setBabelPlugin({
-    name:  `babel-plugin-emotion`,
+    name:  `@emotion/babel-plugin`,
     options: {
       sourceMap: true,
     },