Merge pull request #178 from mverissimo/chore/bump-deps

feat(bump deps): trigger release

Author: mverissimo

package.json

@@ -56,51 +56,51 @@
     }
   },
   "devDependencies": {
-    "@babel/preset-env": "7.13.12",
+    "@babel/preset-env": "7.14.0",
     "@babel/preset-typescript": "7.13.0",
     "@commitlint/cli": "12.1.1",
     "@commitlint/config-conventional": "12.1.1",
-    "@emotion/babel-plugin": "^11.2.0",
+    "@emotion/babel-plugin": "^11.3.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/eslint-plugin": "^11.2.0",
-    "@emotion/jest": "^11.2.1",
-    "@preconstruct/cli": "2.0.6",
+    "@emotion/jest": "^11.3.0",
+    "@preconstruct/cli": "2.0.7",
     "@semantic-release/commit-analyzer": "8.0.1",
-    "@semantic-release/github": "7.2.0",
-    "@semantic-release/npm": "7.1.0",
+    "@semantic-release/github": "7.2.1",
+    "@semantic-release/npm": "7.1.1",
     "@semantic-release/release-notes-generator": "9.0.2",
-    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/jest-dom": "5.12.0",
     "@testing-library/react": "11.2.6",
-    "@types/jest": "26.0.22",
-    "@typescript-eslint/eslint-plugin": "4.20.0",
-    "@typescript-eslint/parser": "4.20.0",
+    "@types/jest": "26.0.23",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-plugin-lodash": "^3.3.4",
     "cz-conventional-changelog": "3.3.0",
     "docz": "2.3.1",
-    "eslint": "7.23.0",
+    "eslint": "7.25.0",
     "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "5.4.0",
+    "eslint-plugin-flowtype": "5.7.2",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-testing-library": "3.10.2",
+    "eslint-plugin-testing-library": "4.1.2",
     "husky": "^6.0.0",
     "jest": "26.6.3",
     "lint-staged": "10.5.4",
     "prettier": "2.2.1",
     "pretty-quick": "3.1.0",
     "semantic-release": "17.4.2",
-    "stylelint": "13.12.0",
-    "ts-jest": "26.5.4",
-    "typescript": "4.2.3"
+    "stylelint": "13.13.1",
+    "ts-jest": "26.5.5",
+    "typescript": "4.2.4"
   },
   "dependencies": {
     "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
+    "@emotion/styled": "^11.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

src/components/Col/Col.test.tsx

@@ -5,9 +5,11 @@ import { Breakpoints } from '../../types/emotion';
 
 describe('Col', () => {
   it('should render with default styles on media %s', () => {
-    const { container } = render(<Col>Col</Col>);
+    const {
+      container: { firstChild },
+    } = render(<Col>Col</Col>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it.each([
@@ -21,9 +23,11 @@ describe('Col', () => {
   ] as Record<Breakpoints, number>[])(
     'should render with width styles on media %s',
     (size) => {
-      const { container } = render(<Col {...size}>Col</Col>);
+      const {
+        container: { firstChild },
+      } = render(<Col {...size}>Col</Col>);
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(firstChild).toMatchSnapshot();
     }
   );
 
@@ -38,9 +42,11 @@ describe('Col', () => {
   ] as Record<Breakpoints, number>[])(
     'should render with offset styles on media %s',
     (size) => {
-      const { container } = render(<Col offset={size}>Col</Col>);
+      const {
+        container: { firstChild },
+      } = render(<Col offset={size}>Col</Col>);
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(firstChild).toMatchSnapshot();
     }
   );
 
@@ -55,13 +61,15 @@ describe('Col', () => {
   ] as Record<Breakpoints, number>[])(
     'should handle with offset styles on media %s',
     (offset) => {
-      const { container } = render(
+      const {
+        container: { firstChild },
+      } = render(
         <Col md={8} offset={offset}>
           Col
         </Col>
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(firstChild).toMatchSnapshot();
     }
   );
 });

src/components/Container/Container.test.tsx

@@ -6,26 +6,32 @@ import { Col } from '../Col';
 
 describe('Container', () => {
   it('should render with default styles for media %s', () => {
-    const { container } = render(<Container>Container</Container>);
+    const {
+      container: { firstChild },
+    } = render(<Container>Container</Container>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render with fluid styles when passed the fluid prop', () => {
-    const { container } = render(<Container fluid>Container fluid</Container>);
+    const {
+      container: { firstChild },
+    } = render(<Container fluid>Container fluid</Container>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render with debug styles when passed the debug prop', () => {
-    const { container } = render(
+    const {
+      container: { firstChild },
+    } = render(
       <Container debug>
         <Row>
           <Col>Col</Col>
         </Row>
       </Container>
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 });

src/components/Debugger/Debbuger.test.tsx

@@ -4,8 +4,10 @@ import { Debugger } from '.';
 
 describe('Debugger', () => {
   it('should render with current screen %s', () => {
-    const { container } = render(<Debugger />);
+    const {
+      container: { firstChild },
+    } = render(<Debugger />);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 });

src/components/Debugger/Debugger.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect } from 'react';
+import React from 'react';
 import { withTheme } from '@emotion/react';
 
 import { getBreakpoint } from '../../utils/get-breakpoint';
@@ -22,15 +22,15 @@ const generateKey = (pre: string | number): string => {
 };
 
 function Debugger({ theme }: StyleProps) {
-  const [visible, setVisible] = useState(false);
-  const [{ screen, columns }, setState] = useState({
+  const [visible, setVisible] = React.useState(false);
+  const [{ screen, columns }, setState] = React.useState({
     screen: getBreakpoint(theme),
     columns: config(theme).grid.columns[getBreakpoint(theme)],
   });
 
   const toggleVisible = () => setVisible(!visible);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const setScreen = () => {
       let lastScreen = screen;
       const currentScreen = getBreakpoint(theme);
@@ -60,7 +60,7 @@ function Debugger({ theme }: StyleProps) {
   }, [theme, screen]);
 
   return (
-    <Fragment>
+    <React.Fragment>
       <GridOverlay visible={visible}>
         <Container>
           <Row>
@@ -78,7 +78,7 @@ function Debugger({ theme }: StyleProps) {
       <Button onClick={toggleVisible} isActive={visible}>
         {screen}
       </Button>
-    </Fragment>
+    </React.Fragment>
   );
 }
 

src/components/Debugger/components/GridOverlay/GridOverlay.test.tsx

@@ -5,14 +5,18 @@ import { GridOverlay } from '.';
 
 describe('Grid Overlay', () => {
   it('should render with default styles', () => {
-    const { container } = render(<GridOverlay />);
+    const {
+      container: { firstChild },
+    } = render(<GridOverlay />);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render with visible styles when passed the visible prop', () => {
-    const { container } = render(<GridOverlay visible />);
+    const {
+      container: { firstChild },
+    } = render(<GridOverlay visible />);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 });

src/components/Row/Row.test.tsx

@@ -7,34 +7,38 @@ import { Breakpoints, Align, Justify } from '../../types/emotion';
 
 describe('Row', () => {
   it('should render with default styles', () => {
-    const { container } = render(<Row>Row</Row>);
+    const {
+      container: { firstChild },
+    } = render(<Row>Row</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render with reverse styles when passed the reverse prop', () => {
-    const { container } = render(<Row reverse>Row reverse</Row>);
+    const {
+      container: { firstChild },
+    } = render(<Row reverse>Row reverse</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it.each(['xs', 'sm', 'md', 'lg', 'xl'] as Breakpoints[])(
     'should render reverse styles on breakpoint %s',
     (breakpoint) => {
-      const { container } = render(
-        <Row reverse={[breakpoint]}>Row reverse {breakpoint}</Row>
-      );
+      const {
+        container: { firstChild },
+      } = render(<Row reverse={[breakpoint]}>Row reverse {breakpoint}</Row>);
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(firstChild).toMatchSnapshot();
     }
   );
 
   it('should render reverse styles with an array of breakpoints', () => {
-    const { container } = render(
-      <Row reverse={['xs', 'sm', 'md']}>Row reverse</Row>
-    );
+    const {
+      container: { firstChild },
+    } = render(<Row reverse={['xs', 'sm', 'md']}>Row reverse</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it.each([
@@ -44,17 +48,19 @@ describe('Row', () => {
     'flex-end',
     'stretch',
   ] as Align[])('should render align %s styles', (propertie) => {
-    const { container } = render(
-      <Row align={propertie}>Row align {propertie}</Row>
-    );
+    const {
+      container: { firstChild },
+    } = render(<Row align={propertie}>Row align {propertie}</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render align styles when passed the align prop as object', () => {
-    const { container } = render(<Row align={{ md: 'center' }}>Row align</Row>);
+    const {
+      container: { firstChild },
+    } = render(<Row align={{ md: 'center' }}>Row align</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it.each([
@@ -66,29 +72,31 @@ describe('Row', () => {
   ] as Justify[])(
     'should render justify styles when when passed the justify %s prop as string',
     (propertie) => {
-      const { container } = render(
-        <Row justify={propertie}>Row justify {propertie}</Row>
-      );
+      const {
+        container: { firstChild },
+      } = render(<Row justify={propertie}>Row justify {propertie}</Row>);
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(firstChild).toMatchSnapshot();
     }
   );
 
   it('should render justify styles when passed the align prop as object', () => {
-    const { container } = render(
-      <Row justify={{ md: 'center' }}>Row justify</Row>
-    );
+    const {
+      container: { firstChild },
+    } = render(<Row justify={{ md: 'center' }}>Row justify</Row>);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 
   it('should render with noGutters styles when passed the noGutters prop', () => {
-    const { container } = render(
+    const {
+      container: { firstChild },
+    } = render(
       <Row noGutters>
         <Col>Col</Col>
       </Row>
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 });

src/components/ScreenClass/ScreenClass.test.tsx

@@ -5,14 +5,16 @@ import { ScreenClass } from '.';
 
 describe('ScreenClass', () => {
   it('should render with current screen %s', () => {
-    const { container } = render(
+    const {
+      container: { firstChild },
+    } = render(
       <ScreenClass
         render={(screen) => {
           return <div>{screen}</div>;
         }}
       />
     );
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(firstChild).toMatchSnapshot();
   });
 });