fix(deps): update react monorepo to v16.14.0 (#309)

* fix(deps): update react monorepo to v16.14.0

* refactor: use the new JSX transform

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Rui Saraiva <ruisaraiva19@gmail.com>

.eslintrc.json

@@ -17,6 +17,8 @@
 		"prettier/prettier": "error",
 		"react/prop-types": "off",
 		"no-param-reassign": "off",
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off",
 		"react/jsx-filename-extension": [
 			1,
 			{

components/base-layout/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import { Header } from 'components/header'
 

components/button/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'
 import { Button } from '.'
 import useDarkMode from 'use-dark-mode'

components/button/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 

components/checkbox/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Checkbox } from '.'
 import useDarkMode from 'use-dark-mode'
 import { Typography } from 'components/typography'

components/dark-mode-toggle/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { DarkModeToggle } from '.'
 import useDarkMode from 'use-dark-mode'
 import { Typography } from 'components/typography'

components/dark-mode-toggle/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import useDarkMode from 'use-dark-mode'
 import { SvgSun } from 'components/svgs/svg-sun'
 import { SvgMoon } from 'components/svgs/svg-moon'

components/drag-and-drop/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import useDarkMode from 'use-dark-mode'
 import { DragAndDrop } from '.'
 import { Button } from 'components/button'

components/header/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 import { DarkModeToggle } from 'components/dark-mode-toggle'
 import { SvgFavycon } from 'components/svgs/svg-favycon'

components/index.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default {
 	title: 'Welcome',
 }

components/seo/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Head from 'next/head'
 
 type SEOProps = {

components/sticky/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './index.module.scss'

components/svgs/svg-check.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 type SvgCheckProps = {

components/svgs/svg-checkbox.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 import styles from './svg-checkbox.module.scss'

components/svgs/svg-drop-zone.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './svg-drop-zone.module.scss'
 
 const SvgDropZone: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {

components/svgs/svg-error.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 type SvgErrorProps = {

components/svgs/svg-favycon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './svg-favycon.module.scss'
 
 const SvgFavycon: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {

components/svgs/svg-github.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const SvgGithub: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => (
 	<svg height={18} viewBox="0 0 16 16" width={18} {...props}>
 		<path

components/svgs/svg-image-upload.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import classnames from 'classnames'
 
 import styles from './svg-image-upload.module.scss'

components/svgs/svg-info.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './svg-info.module.scss'
 
 const SvgInfo: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {

components/svgs/svg-moon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const SvgMoon: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {
 	const idPrefix = 'svg-moon-'
 	return (

components/svgs/svg-sun.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const SvgSun: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => {
 	const idPrefix = 'svg-sun-'
 	return (

components/svgs/svg-twitter.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const SvgTwitter: React.FC<JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>> = (props) => (
 	<svg width={18} height={18} viewBox="0 0 18 18" fill="none" {...props}>
 		<path

components/tool-title/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { withKnobs } from '@storybook/addon-knobs'
 import useDarkMode from 'use-dark-mode'
 import { Button } from 'components/button'

components/tool-title/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Typography } from 'components/typography'
 import { SvgFavycon } from 'components/svgs/svg-favycon'
 

components/typography/index.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { withKnobs, text, select } from '@storybook/addon-knobs'
 import useDarkMode from 'use-dark-mode'
 import { Button } from 'components/button'

hooks/use-toggle.ts

@@ -1,9 +1,9 @@
-import React from 'react'
+import { useState, useCallback } from 'react'
 
 export const useToggle = (initialValue = false): [boolean, () => void] => {
-	const [value, setValue] = React.useState(initialValue)
+	const [value, setValue] = useState(initialValue)
 
-	const toggle = React.useCallback(() => {
+	const toggle = useCallback(() => {
 		setValue((v) => !v)
 	}, [])
 

package.json

@@ -55,9 +55,9 @@
 		"preact-ssr-prepass": "1.1.2",
 		"prismjs": "1.22.0",
 		"prop-types": "15.7.2",
-		"react": "16.13.1",
+		"react": "16.14.0",
 		"react-clipboard.js": "2.0.16",
-		"react-dom": "16.13.1",
+		"react-dom": "16.14.0",
 		"react-dropzone": "11.2.0",
 		"react-lazy-images": "1.1.0",
 		"react-modal": "3.11.2",

pages/_app.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AppProps } from 'next/app'
 import { MediaQueryProvider } from 'components/media-query-provider'
 

pages/_document.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 const isProd = process.env.NODE_ENV === 'production'

yarn.lock

@@ -13877,7 +13877,17 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@16.13.1, react-dom@^16.8.3:
+react-dom@16.14.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-dom@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
   integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
@@ -14080,7 +14090,16 @@ react-use-gesture@7.0.16:
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-7.0.16.tgz#501985261ef9c815a377b6ff9be6df5a85fbb54f"
   integrity sha512-gwgX+E+WQG0T1uFVl3z8j3ZwH3QQGIgVl7VtQEC2m0IscSs668sSps4Ss3CFp3Vns8xx0j9TVK4aBXH6+YrpEg==
 
-react@16.13.1, react@^16.8.3:
+react@16.14.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+react@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==