MAJ React + Typescript

.eslintrc.js

@@ -16,8 +16,8 @@ module.exports = {
   },
   plugins: [
     "react",
-		"react-hooks",
-		"mocha"
+    "react-hooks",
+    "mocha"
   ],
   rules: {
     "quotes": [
@@ -39,9 +39,11 @@ module.exports = {
     "react/no-unescaped-entities": 0,
     "react/display-name": 1,
     "react-hooks/rules-of-hooks": "error",
-		"react-hooks/exhaustive-deps": "warn",
-		"mocha/no-skipped-tests": "warn",
-		"mocha/no-exclusive-tests": "error"
+    "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "mocha/no-skipped-tests": "warn",
+    "mocha/no-exclusive-tests": "error"
   },
   settings: {
     "react": {
@@ -71,29 +73,29 @@ module.exports = {
         "@typescript-eslint/explicit-function-return-type": 0,
         '@typescript-eslint/prefer-string-starts-ends-with': 1,
         '@typescript-eslint/no-unnecessary-type-assertion': 1,  // has false positives (Object.values result) v 2.29.0
-				'@typescript-eslint/no-inferrable-types': 1,  // causes problems with unknown values v 2.29.0 typescript v 3.8.3
-				'@typescript-eslint/no-var-requires': 'off',
-				// TODO - enable these new recommended rules, a first step would be to switch from "off" to "warn"
-				'@typescript-eslint/explicit-module-boundary-types': 'off',
-				'@typescript-eslint/no-floating-promises': 'off',
-				'@typescript-eslint/no-extra-semi': 'off',
-				'@typescript-eslint/no-unsafe-assignment': 'off',
-				'@typescript-eslint/no-unsafe-call': 'off',
-				'@typescript-eslint/no-unsafe-member-access': 'off',
-				'@typescript-eslint/no-unsafe-return': 'off',
-				'@typescript-eslint/restrict-plus-operands': 'off',
-				'@typescript-eslint/restrict-template-expressions': 'off',
-				'@typescript-eslint/naming-convention': 'off',
-				'@typescript-eslint/prefer-regexp-exec': 'off',
-				'@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-inferrable-types': 1,  // causes problems with unknown values v 2.29.0 typescript v 3.8.3
+        '@typescript-eslint/no-var-requires': 'off',
+        // TODO - enable these new recommended rules, a first step would be to switch from "off" to "warn"
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-extra-semi': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+        '@typescript-eslint/restrict-plus-operands': 'off',
+        '@typescript-eslint/restrict-template-expressions': 'off',
+        '@typescript-eslint/naming-convention': 'off',
+        '@typescript-eslint/prefer-regexp-exec': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
       },
       extends: [
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking"
       ]
     },
     {
-			files: ["**/*.test.js"],
+      files: ["**/*.test.js"],
       env: {
         mocha: true
       }

babel.config.json

@@ -8,7 +8,12 @@
 				}
 			}
 		],
-		"@babel/preset-react",
+		[
+			"@babel/preset-react",
+			{
+				"runtime": "automatic"
+			}
+		],
 		"@babel/preset-typescript"
 	],
 	"plugins": [

mon-entreprise/cypress/integration/mon-entreprise/simulateurs.js

@@ -98,7 +98,8 @@ describe('Simulateurs', function() {
 					cy.contains('€/mois').click()
 					cy.get(inputSelector)
 						.first()
-						.type('{selectall}5000')
+						.clear()
+						.type('5000')
 					cy.wait(800)
 					cy.get(inputSelector).each($input => {
 						const val = +$input.val().replace(/[\s,.]/g, '')

mon-entreprise/package.json

@@ -37,11 +37,11 @@
 		"@types/webpack": "^4.41.10",
 		"@typescript-eslint/eslint-plugin": "^4.0.1",
 		"@typescript-eslint/parser": "^4.0.1",
+		"@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
 		"autoprefixer": "^9.7.6",
 		"babel-plugin-styled-components": "^1.10.7",
 		"copy-webpack-plugin": "^4.5.2",
 		"cypress-plugin-tab": "^1.0.5",
-		"enzyme-adapter-react-16": "^1.1.1",
 		"eslint-plugin-react": "^7.12.4",
 		"html-webpack-plugin": "^3.2.0",
 		"i18next-parser": "^1.0.6",
@@ -72,7 +72,7 @@
 		"nearley": "^2.19.0",
 		"publicodes": "^1.0.0-beta.4",
 		"ramda": "^0.27.0",
-		"react": "^16.13.1",
+		"react": "^17.0.0",
 		"react-color": "^2.14.0",
 		"react-dom": "npm:@hot-loader/react-dom",
 		"react-easy-emoji": "^1.2.0",

mon-entreprise/source/components/CompanyDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Skeleton from 'Components/ui/Skeleton'
 import { Etablissement, fetchCompanyDetails } from '../api/sirene'

mon-entreprise/source/components/CurrencyInput/CurrencyInput.test.js

@@ -1,6 +1,5 @@
 import { expect } from 'chai'
 import { mount, shallow } from 'enzyme'
-import React from 'react'
 import { match, spy, useFakeTimers } from 'sinon'
 import CurrencyInput from './CurrencyInput'
 

mon-entreprise/source/components/Distribution.tsx

@@ -1,6 +1,6 @@
 import { EngineContext } from 'Components/utils/EngineContext'
 import { max } from 'ramda'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { DottedName } from 'Rules'
 import { targetUnitSelector } from 'Selectors/simulationSelectors'

mon-entreprise/source/components/Feedback/LinkToForm.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 // Envie de donner un coup de pouce ? Répondez à notre sondage sur le simulateur.
 export default function LinkToForm() {
 	const hostname = new URL(

mon-entreprise/source/components/FindCompany.tsx

@@ -1,6 +1,6 @@
 import { setEntreprise } from 'Actions/existingCompanyActions'
 import CompanyDetails from 'Components/CompanyDetails'
-import React, { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import { Etablissement, searchDenominationOrSiren } from '../api/sirene'

mon-entreprise/source/components/LangSwitcher.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import emoji from 'react-easy-emoji'
 import { useTranslation } from 'react-i18next'
 

mon-entreprise/source/components/LegalNotice.tsx

@@ -1,5 +1,5 @@
 import Overlay from 'Components/Overlay'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Trans } from 'react-i18next'
 
 export const LegalNoticeContent = () => (

mon-entreprise/source/components/MoreInfosOnUs.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router-dom'

mon-entreprise/source/components/NewsletterRegister.tsx

@@ -1,6 +1,6 @@
 import { usePersistingState } from 'Components/utils/persistState'
 import { TrackerContext } from 'Components/utils/withTracker'
-import React, { useContext, useRef, useState } from 'react'
+import { useContext, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import emoji from 'react-easy-emoji'
 import * as animate from 'Components/ui/animate'

mon-entreprise/source/components/Notifications.tsx

@@ -1,7 +1,7 @@
 import { hideNotification } from 'Actions/actions'
 import animate from 'Components/ui/animate'
 import { useInversionFail, EngineContext } from 'Components/utils/EngineContext'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

mon-entreprise/source/components/PaySlip.tsx

@@ -2,7 +2,7 @@ import Value from 'Components/EngineValue'
 import RuleLink from 'Components/RuleLink'
 import { EngineContext, useEvaluation } from 'Components/utils/EngineContext'
 import { formatValue, ParsedRule, ParsedRules } from 'publicodes'
-import React, { Fragment, useContext } from 'react'
+import { Fragment, useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { DottedName } from 'Rules'
 import './PaySlip.css'

mon-entreprise/source/components/PaySlipSections.tsx

@@ -1,7 +1,5 @@
 import Value, { Condition, ValueProps } from 'Components/EngineValue'
 import RuleLink from 'Components/RuleLink'
-import { EngineContext } from 'Components/utils/EngineContext'
-import React, { useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { DottedName } from 'Rules'
 

mon-entreprise/source/components/PercentageField.tsx

@@ -1,5 +1,5 @@
 import { formatValue } from 'publicodes'
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce as debounceFn } from '../utils'
 import './PercentageField.css'

mon-entreprise/source/components/PeriodSwitch.tsx

@@ -1,5 +1,4 @@
 import { updateUnit } from 'Actions/actions'
-import React from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { targetUnitSelector } from 'Selectors/simulationSelectors'

mon-entreprise/source/components/PreviousSimulationBanner.tsx

@@ -1,5 +1,4 @@
 import { loadPreviousSimulation } from 'Actions/actions'
-import React from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'

mon-entreprise/source/components/QuickLinks.tsx

@@ -1,6 +1,5 @@
 import { goToQuestion } from 'Actions/actions'
 import { contains, filter, pipe, reject, toPairs } from 'ramda'
-import React from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'

mon-entreprise/source/components/Route404.tsx

@@ -1,5 +1,4 @@
 import image from 'Images/map-directions.png'
-import React from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import { Link } from 'react-router-dom'

mon-entreprise/source/components/RulesList.tsx

@@ -1,5 +1,4 @@
 import SearchBar from 'Components/SearchBar'
-import React from 'react'
 import { Trans } from 'react-i18next'
 import './RulesList.css'
 

mon-entreprise/source/components/SearchButton.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import Overlay from './Overlay'

mon-entreprise/source/components/SimulateurWarning.tsx

@@ -1,5 +1,4 @@
 import Warning from 'Components/ui/WarningBlock'
-import React from 'react'
 import { Trans } from 'react-i18next'
 import { SitePaths } from './utils/SitePathsContext'
 

mon-entreprise/source/components/SyntaxHighlighter.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { PrismLight } from 'react-syntax-highlighter'
 import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
 import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'

mon-entreprise/source/components/TargetSelection.tsx

@@ -13,7 +13,7 @@ import {
 import { SitePathsContext } from 'Components/utils/SitePathsContext'
 import { EvaluatedRule, formatValue } from 'publicodes'
 import { isNil } from 'ramda'
-import React, { useCallback, useContext } from 'react'
+import { Fragment, useCallback, useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -42,7 +42,7 @@ export default function TargetSelection({ showPeriodSwitch = true }) {
 				nom?: string
 				objectifs: Array<DottedName>
 			}>).map(({ icône, objectifs: targets, nom }, index: number) => (
-				<React.Fragment key={nom || '0'}>
+				<Fragment key={nom || '0'}>
 					<div style={{ display: 'flex', alignItems: 'end' }}>
 						<div style={{ flex: 1 }}>
 							{nom && (
@@ -72,7 +72,7 @@ export default function TargetSelection({ showPeriodSwitch = true }) {
 							))}
 						</ul>
 					</section>
-				</React.Fragment>
+				</Fragment>
 			))}
 		</div>
 	)

mon-entreprise/source/components/TypeFormEmbed.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Helmet } from 'react-helmet'
 
 let createQueryParams = params =>

mon-entreprise/source/components/conversation/Aide.tsx

@@ -1,7 +1,7 @@
 import { explainVariable } from 'Actions/actions'
 import Overlay from 'Components/Overlay'
 import { Markdown } from 'Components/utils/markdown'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from 'Reducers/rootReducer'
 import './Aide.css'

mon-entreprise/source/components/conversation/AnswerList.tsx

@@ -3,7 +3,6 @@ import Overlay from 'Components/Overlay'
 import { useEvaluation } from 'Components/utils/EngineContext'
 import { useNextQuestions } from 'Components/utils/useNextQuestion'
 import { formatValue } from 'publicodes'
-import React from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

mon-entreprise/source/components/conversation/DateInput.tsx

@@ -1,6 +1,6 @@
 import { RuleInputProps } from 'Components/conversation/RuleInput'
 import { Rule } from 'publicodes'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import InputSuggestions from './InputSuggestions'
 

mon-entreprise/source/components/conversation/Input.tsx

@@ -1,5 +1,5 @@
 import { formatValue } from 'publicodes'
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import NumberFormat from 'react-number-format'
 import { currencyFormat, debounce } from '../../utils'

mon-entreprise/source/components/conversation/InputSuggestions.tsx

@@ -1,6 +1,6 @@
 import { serializeValue } from 'publicodes'
 import { toPairs } from 'ramda'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Unit } from 'publicodes'
 

mon-entreprise/source/components/conversation/ParagrapheInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { debounce } from '../../utils'
 
 export default function ParagrapheInput({

mon-entreprise/source/components/conversation/Question.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import { Markdown } from 'Components/utils/markdown'
 import { is } from 'ramda'
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans } from 'react-i18next'
 import { Explicable } from './Explicable'

mon-entreprise/source/components/conversation/SeeAnswersButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Trans } from 'react-i18next'
 import Answers from './AnswerList'
 import './conversation.css'

mon-entreprise/source/components/conversation/TextInput.tsx

@@ -1,5 +1,5 @@
 import { ThemeColorsContext } from 'Components/utils/colors'
-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
 import { debounce } from '../../utils'
 
 export default function TextInput({

mon-entreprise/source/components/conversation/select/SelectEuropeCountry.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 const STATES = [
 	'Allemagne',
 	'Autriche',

mon-entreprise/source/components/conversation/select/SelectTauxRisque.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import Worker from 'worker-loader!./SelectTauxRisque.worker.js'
 const worker = new Worker()

mon-entreprise/source/components/simulationExplanation/IndépendantExplanation.tsx

@@ -8,7 +8,7 @@ import assuranceMaladieSrc from 'Images/assurance-maladie.svg'
 import * as logosSrc from 'Images/logos-cnavpl'
 import urssafSrc from 'Images/urssaf.svg'
 import { max } from 'ramda'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { DottedName } from 'Rules'

mon-entreprise/source/components/simulationExplanation/SalaryExplanation.tsx

@@ -3,7 +3,7 @@ import PaySlip from 'Components/PaySlip'
 import StackedBarChart from 'Components/StackedBarChart'
 import { ThemeColorsContext } from 'Components/utils/colors'
 import { useEvaluation, useInversionFail } from 'Components/utils/EngineContext'
-import React, { useContext, useRef } from 'react'
+import { useContext, useRef } from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'

mon-entreprise/source/components/ui/Skeleton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { keyframes } from 'styled-components'
 
 type SkeletonProps = {