Merge pull request #2 from naveteam/feat/update-react-and-rhf

Feat/update react and ts

Author: italonolasco

.eslintrc.js

@@ -13,19 +13,16 @@ module.exports = {
     }
   },
   plugins: ['react-hooks'],
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended'
-  ],
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
   rules: {
     quotes: [2, 'single'],
     semi: [2, 'never'],
     'comma-dangle': [2, 'never'],
     'no-trailing-spaces': [2],
     'jsx-quotes': ['error', 'prefer-single'],
     'react/jsx-boolean-value': [0],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'prettier/prettier': 2,
     'space-before-function-paren': 0,

package.json

@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^5.7.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "4.0.3",
     "styled-components": "^5.1.0",
     "styled-system": "^5.1.5",
-    "typescript": "~3.7.2",
+    "typescript": "~4.3.3",
     "yup": "^0.28.5"
   },
   "scripts": {
@@ -48,23 +48,23 @@
     "@storybook/react": "^5.3.18",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.7",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",
     "@types/styled-system": "^5.1.9",
     "@types/yup": "^0.28.3",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
     "cz-conventional-changelog": "3.2.0",
-    "eslint": "^7.0.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.2",
     "husky": ">=4",
     "lint-staged": ">=10",
-    "prettier": "^2.0.5",
+    "prettier": "^2.3.1",
     "themeprovider-storybook": "^1.5.1"
   },
   "husky": {

src/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ThemeProvider, createGlobalStyle } from 'styled-components'
 import { BrowserRouter as Router, Switch } from 'react-router-dom'
 

src/AuthenticatedApp.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Route } from 'react-router-dom'
 
 import { Home } from 'screens'

src/UnauthenticatedApp.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Route } from 'react-router-dom'
 
 import { Login } from 'screens'

src/components/Button/Button.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled, { css } from 'styled-components'
 import {
   variant,

src/components/Column/Column.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
-
+import { FC } from 'react'
 import { Row } from 'components'
 import { RowProps } from 'components/Row'
 
 export type ColumnProps = RowProps
 
-const ColumnComponent: React.FC<ColumnProps> = props => <Row flexDirection='column' {...props} />
+const ColumnComponent: FC<ColumnProps> = props => <Row flexDirection='column' {...props} />
 
 export default ColumnComponent

src/components/Input/Input.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { FieldError } from 'react-hook-form'
 import styled, { css } from 'styled-components'
 

src/components/Row/Row.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC } from 'react'
 import styled from 'styled-components'
 import {
   space,
@@ -17,7 +17,7 @@ import {
 
 export interface RowProps extends SpaceProps, LayoutProps, ColorProps, BorderProps, PositionProps, FlexboxProps {}
 
-const RowComponent: React.FC<RowProps> = styled.div<RowProps>(
+const RowComponent: FC<RowProps> = styled.div<RowProps>(
   { display: 'flex' },
   space,
   layout,

src/components/Text/Text.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react'
 import styled from 'styled-components'
 import {
   space,
@@ -25,7 +26,7 @@ interface TextProps extends SpaceProps, LayoutProps, TypographyProps, ColorProps
   variant: keyof TextVariants
 }
 
-const TextComponent: React.FC<TextProps> = styled.p(
+const TextComponent: FC<TextProps> = styled.p(
   variant({
     variants: {
       big: {