chore: update dependencies

Update emotion to version 10
Update babel to version 7
Update storybook to version 5

Author: lesha1201

.babelrc

@@ -1,7 +1,12 @@
 {
   "presets": [
     "react-app",
-    "flow"
+    "@babel/preset-flow",
+    "@emotion/babel-preset-css-prop"
   ],
-  "plugins": ["inline-react-svg", "jsx-control-statements", "emotion", "babel-plugin-react-css-modules", "lodash"]
+  "plugins": [
+    "inline-react-svg",
+    "jsx-control-statements",
+    "lodash"
+  ]
 }

.eslintrc.yml

@@ -11,10 +11,11 @@ globals:
   BoostProvider: true
 
 plugins: [
-  react-hooks
+  react-hooks,
+  emotion
 ]
 
-rules:  
+rules:
   #styles
   block-spacing: ['error']
   array-bracket-spacing: ['warn', 'never']
@@ -115,3 +116,8 @@ rules:
   react-hooks/exhaustive-deps: "warn"
 
   jsx-a11y/aria-role: 'off'
+
+  #emotion
+  emotion/no-vanilla: "error"
+  emotion/import-from-emotion: "error"
+  emotion/styled-import: "error"

e2e/__tests__/__image_snapshots__/avatar-test-js-components-avatar-common-1-snap.png

@@ -2,7 +2,7 @@ import { baisy } from '../setup/TestSuiter';
 
 
 const SUITES = [
-  baisy.suite('Components/Card', 'common'),
+  baisy.suite('Components/Card', 'default'),
   baisy.suite('Components/Card', 'with custom paddings'),
   baisy.suite('Components/Card', 'with multiple sections'),
 ];
@@ -11,4 +11,3 @@ const SUITES = [
 SUITES.map(suite => {
   it(suite.getTestName(), suite.testStory, 20000);
 });
-

e2e/__tests__/__image_snapshots__/avatars-test-js-components-avatars-common-1-snap.png

@@ -1,4 +1,6 @@
 // @flow
+import { toId } from '@storybook/router';
+
 const { E2E_URL } = (process.env: any);
 
 
@@ -17,13 +19,12 @@ class TestSuiter {
     this.stateName = stateName;
   }
 
-
   _init = async () => {
     // $FlowIgnore
     this.page = await __BROWSER_CONTEXT__.newPage();
 
     await this.page.goto(
-      `${E2E_URL}/?selectedKind=${encodeURIComponent(this.kind)}&selectedStory=${encodeURIComponent(this.story)}`, { waitUntil: 'networkidle2' },
+      `${E2E_URL}/?path=/story/${toId(this.kind, this.story)}`, { waitUntil: 'networkidle2' },
     );
 
     // eslint-disable-next-line

e2e/__tests__/__image_snapshots__/breadcrumbs-test-js-components-breadcrumbs-common-1-snap.png

@@ -1,5 +1,4 @@
-import * as emotion from 'emotion';
-import { createSerializer } from 'jest-emotion';
+import serializer from 'jest-emotion';
 import { configure, shallow, render, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import enzymeToJson from 'enzyme-to-json';
@@ -14,4 +13,4 @@ global.mount = mount;
 global.enzymeToJson = enzymeToJson;
 global.BoostProvider = BoostProvider;
 
-expect.addSnapshotSerializer(createSerializer(emotion));
+expect.addSnapshotSerializer(serializer);

e2e/__tests__/__image_snapshots__/button-group-test-js-components-button-group-common-1-snap.png

@@ -28,28 +28,31 @@
     "commit": "git-cz"
   },
   "peerDependencies": {
+    "@emotion/core": "^10",
+    "@emotion/styled": "^10",
     "react": "^16.8",
-    "react-dom": "^16.8",
-    "react-emotion": "^9.1"
+    "react-dom": "^16.8"
   },
   "devDependencies": {
-    "@storybook/addon-info": "^3.4.4",
-    "@storybook/addons": "3.4.1",
-    "@storybook/react": "^3.4.1",
-    "@storybook/storybook-deployer": "^2.3.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "7.2.3",
-    "babel-plugin-emotion": "^9.2.11",
-    "babel-plugin-external-helpers": "^6.22.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/runtime-corejs2": "^7.0.0",
+    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addons": "5.1.11",
+    "@storybook/react": "^5.1.11",
+    "@storybook/storybook-deployer": "^2.8.1",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.0.6",
     "babel-plugin-flow-react-proptypes": "^23.0.0",
     "babel-plugin-inline-react-svg": "^0.5.2",
     "babel-plugin-jsx-control-statements": "^3.2.8",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-css-modules": "3.4.0",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "^6.26.0",
+    "babel-preset-react-app": "^9.0.1",
     "commitizen": "^3.0.7",
     "conventional-changelog-cli": "^1.3.22",
     "cz-conventional-changelog": "^2.1.0",
@@ -59,6 +62,7 @@
     "enzyme-to-json": "^3.3.5",
     "eslint": "4.1.1",
     "eslint-config-react-app": "2.1.0",
+    "eslint-plugin-emotion": "^10.0.14",
     "eslint-plugin-flowtype": "2.34.1",
     "eslint-plugin-import": "2.10.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
@@ -67,21 +71,21 @@
     "flow-bin": "^0.93.0",
     "flow-copy-source": "^2.0.2",
     "jest": "^23.6.0",
-    "jest-emotion": "^9.0.0",
+    "jest-emotion": "^10.0.14",
     "jest-environment-node": "^23.4.0",
     "jest-image-snapshot": "^2.7.0",
     "prettier": "^1.15.3",
     "puppeteer": "^1.11.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-emotion": "^9.1.3",
     "react-test-renderer": "^16.8.1"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.16",
+    "@emotion/styled": "^10.0.15",
     "color": "^3.0.0",
     "deepmerge": "^3.0.0",
-    "emotion": "^9.1.1",
-    "emotion-theming": "^9.1.2",
+    "emotion-theming": "^10.0.14",
     "lodash": "^4.17.15",
     "luxon": "1.7.1",
     "react-datepicker": "^2.3.0",

e2e/__tests__/__image_snapshots__/button-test-js-components-button-common-1-snap.png

@@ -1,11 +1,10 @@
 // @flow
 
 import React from 'react';
-import { injectGlobal } from 'emotion';
 import { ThemeProvider } from 'emotion-theming';
 import { IconsProvider } from './components/Icon/IconsProvider';
 import { ModalProvider } from './components/Modal/ModalProvider';
-import { createTheme, resetGlobal, type Theme } from './theme';
+import { createTheme, type Theme, Globals } from './theme';
 
 type BoostProviderProps = {
   theme?: Theme,
@@ -22,25 +21,13 @@ class BoostProvider extends React.Component<BoostProviderProps> {
     this.theme = props.theme || createTheme();
   }
 
-  componentDidMount() {
-    resetGlobal(this.theme);
-
-    Object.keys(this.theme.components).forEach((name) => {
-      const { globals } = this.theme.components[name];
-
-      if (globals) {
-        typeof globals === 'function'
-          ? injectGlobal(globals(this.theme))
-          : injectGlobal(globals);
-      }
-    });
-  }
-
   render() {
     const { children, icons } = this.props;
 
     return (
       <ThemeProvider theme={ this.theme }>
+        <Globals components={ this.theme.components } />
+
         <ModalProvider>
           <IconsProvider icons={ icons }>
             { children }

e2e/__tests__/__image_snapshots__/card-test-js-components-card-common-1-snap.png

@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-key */
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 import { theme, AvatarsTag, AvatarsHandleTag, AvatarsCounterTag } from './Avatars.theme';
 
 import { Tooltip } from '../Tooltip';
@@ -33,26 +33,23 @@ const avatarClassName = css`
 const Avatars = ({ users, size, onClick, ...rest }: AvatarsProps) => {
   return (
     <AvatarsTag { ...rest } tagName="div" onClick={ onClick }>
-      {
-        React.Children.toArray(
-          users.slice(0, 4).map(({ firstName, lastName, avatarUrl }, index) => (
-            <Tooltip className={ tooltipClassName } message={ `${firstName} ${lastName}` }>
-              <Avatar
-                className={ avatarClassName }
-                style={{ zIndex: Math.abs(index - 7) }}
-                firstName={ firstName }
-                lastName={ lastName }
-                src={ avatarUrl }
-                size={ size }
-              />
-            </Tooltip>
-          ),
-          ))
-      }
+      { React.Children.toArray(
+        users.slice(0, 4).map(({ firstName, lastName, avatarUrl }, index) => (
+          <Tooltip css={ css(tooltipClassName) } message={ `${firstName} ${lastName}` }>
+            <Avatar
+              css={ css(avatarClassName) }
+              style={{ zIndex: Math.abs(index - 7) }}
+              firstName={ firstName }
+              lastName={ lastName }
+              src={ avatarUrl }
+              size={ size }
+            />
+          </Tooltip>
+        )),
+      ) }
+
       <If condition={ users.length > 4 }>
-        <AvatarsCounterTag size={ size }>
-          + { users.length - 4 }
-        </AvatarsCounterTag>
+        <AvatarsCounterTag size={ size }>+ { users.length - 4 }</AvatarsCounterTag>
       </If>
       <AvatarsHandleTag size={ size }>
         <Icon name="Plus" size="xs" color="PRIMARY" />
@@ -61,7 +58,6 @@ const Avatars = ({ users, size, onClick, ...rest }: AvatarsProps) => {
   );
 };
 
-
 Avatars.defaultProps = {
   size: 'lg',
 };

e2e/__tests__/__image_snapshots__/card-test-js-components-card-default-1-snap.png

@@ -1,6 +1,6 @@
 // @flow
 
-import { keyframes } from 'react-emotion';
+import { keyframes } from '@emotion/core';
 import { createThemeTag } from '../../theme/createThemeTag';
 
 
@@ -174,4 +174,3 @@ const [ButtonTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
 }));
 
 export { ButtonTag, theme };
-

e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-custom-paddings-1-snap.png

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const ShortDiv = styled('div')({
   height: '300px',

e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-multiple-sections-1-snap.png

@@ -15,12 +15,12 @@ exports[`<Card /> should render Card components 1`] = `
     >
       <Tag
         borderRadius="all"
-        className="emotion-0 emotion-1"
+        className="css-rkvmzw-StyledTag emotion-0"
         padding="none"
         tagName="div"
       >
         <div
-          className="emotion-0 emotion-1"
+          className="css-rkvmzw-StyledTag emotion-0"
         >
           <CardHeader
             padding="md"
@@ -30,12 +30,12 @@ exports[`<Card /> should render Card components 1`] = `
               tagName="div"
             >
               <Tag
-                className="emotion-0 emotion-1"
+                className="css-rkvmzw-StyledTag emotion-0"
                 padding="md"
                 tagName="div"
               >
                 <div
-                  className="emotion-0 emotion-1"
+                  className="css-rkvmzw-StyledTag emotion-0"
                 >
                   Header
                 </div>
@@ -52,13 +52,13 @@ exports[`<Card /> should render Card components 1`] = `
               tagName="div"
             >
               <Tag
-                className="emotion-0 emotion-1"
+                className="css-rkvmzw-StyledTag emotion-0"
                 padding="lg"
                 scrollable={true}
                 tagName="div"
               >
                 <div
-                  className="emotion-0 emotion-1"
+                  className="css-rkvmzw-StyledTag emotion-0"
                 >
                   <CardSection
                     padding="md"
@@ -68,12 +68,12 @@ exports[`<Card /> should render Card components 1`] = `
                       tagName="div"
                     >
                       <Tag
-                        className="emotion-0 emotion-1"
+                        className="css-rkvmzw-StyledTag emotion-0"
                         padding="md"
                         tagName="div"
                       >
                         <div
-                          className="emotion-0 emotion-1"
+                          className="css-rkvmzw-StyledTag emotion-0"
                         >
                           Body
                         </div>
@@ -92,12 +92,12 @@ exports[`<Card /> should render Card components 1`] = `
               tagName="div"
             >
               <Tag
-                className="emotion-0 emotion-1"
+                className="css-rkvmzw-StyledTag emotion-0"
                 padding="xl"
                 tagName="div"
               >
                 <div
-                  className="emotion-0 emotion-1"
+                  className="css-rkvmzw-StyledTag emotion-0"
                 >
                   Footer
                 </div>

e2e/__tests__/__image_snapshots__/checkbox-test-js-components-checkbox-common-1-snap.png

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const Container = styled('div')`
   max-width: 100px;
@@ -66,7 +66,7 @@ class CheckboxInderteminateState extends Component<*, Object> {
 export default (asStory: *) => {
   asStory('Components/Checkbox', module, (story, { Checkbox, Column }) => {
     story
-      .add('commmon', () => (
+      .add('common', () => (
         <Column>
           <Checkbox checked />
           <Checkbox label="Without Check" />