Fix React type errors

site/source/components/RuleLink.tsx

@@ -31,7 +31,8 @@ export default function RuleLink(
 	return (
 		<EngineRuleLink
 			{...props}
-			linkComponent={Link as React.ComponentType<{ to: string }>}
+			// @ts-ignore
+			linkComponent={Link}
 			engine={engine}
 			documentationPath={
 				props.documentationPath ?? absoluteSitePaths.documentation.index

site/source/components/conversation/AnswerList.tsx

@@ -1,5 +1,5 @@
 import { DottedName } from 'modele-social'
-import { RuleNode, utils } from 'publicodes'
+import { PublicodesExpression, RuleNode, utils } from 'publicodes'
 import { useCallback, useContext, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -224,7 +224,7 @@ function AnswerElement(rule: RuleNode) {
 		: undefined
 
 	const handleChange = useCallback(
-		(value) => {
+		(value: PublicodesExpression | undefined) => {
 			questionDottedName && dispatch(answerQuestion(questionDottedName, value))
 		},
 		[dispatch, questionDottedName]

site/source/components/layout/Footer/Privacy.tsx

@@ -15,7 +15,7 @@ export default function Privacy({ label }: { label?: string }) {
 	const { t } = useTranslation()
 
 	const handleChange = useCallback(
-		(checked) => {
+		(checked: boolean) => {
 			if (checked) {
 				tracker.privacy.setVisitorOptout()
 				safeLocalStorage.setItem('tracking:do_not_track', '1')

site/source/contexts/DarkModeContext.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { ReactNode, createContext, useEffect, useState } from 'react'
 
 import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { getItem, setItem } from '@/storage/safeLocalStorage'
@@ -17,7 +17,7 @@ const getDefaultDarkMode = () => {
 	return getItem('darkMode') ? getItem('darkMode') === 'true' : false
 }
 
-export const DarkModeContext = React.createContext<DarkModeContextType>([
+export const DarkModeContext = createContext<DarkModeContextType>([
 	false,
 	() => {
 		// eslint-disable-next-line no-console
@@ -25,8 +25,8 @@ export const DarkModeContext = React.createContext<DarkModeContextType>([
 	},
 ])
 
-export const DarkModeProvider: React.FC = ({ children }) => {
-	const [darkMode, _setDarkMode] = React.useState<boolean>(getDefaultDarkMode())
+export const DarkModeProvider = ({ children }: { children: ReactNode }) => {
+	const [darkMode, _setDarkMode] = useState<boolean>(getDefaultDarkMode())
 
 	const setDarkMode = (darkMode: boolean) => {
 		_setDarkMode(darkMode)

site/source/design-system/accordion/index.tsx

@@ -63,10 +63,8 @@ function AccordionItem<T>(props: AccordionItemProps<T>) {
 					<ChevronRightMedium aria-hidden $isOpen={isOpen} alt="" />
 				</StyledButton>
 			</StyledTitle>
-			<StyledContent
-				{...(regionProps as Omit<typeof regionProps, 'css'>)}
-				style={animatedStyle}
-			>
+			{/* @ts-ignore: https://github.com/pmndrs/react-spring/issues/1515 */}
+			<StyledContent {...regionProps} style={animatedStyle}>
 				<div ref={regionRef}>{item.props.children}</div>
 			</StyledContent>
 		</StyledAccordionItem>

site/source/design-system/card/Card.tsx

@@ -49,6 +49,7 @@ export function Card({
 	const linkProps = useExternalLinkProps(ariaButtonProps)
 
 	const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, ref)
+	// @ts-ignore
 	delete buttonOrLinkProps.title
 
 	return (

site/source/design-system/field/NumberField.tsx

@@ -4,8 +4,10 @@ import { useNumberField } from '@react-aria/numberfield'
 import { NumberFieldState } from '@react-stately/numberfield'
 import { AriaNumberFieldProps } from '@react-types/numberfield'
 import {
+	ChangeEvent,
 	HTMLAttributes,
 	InputHTMLAttributes,
+	KeyboardEvent,
 	RefObject,
 	useCallback,
 	useEffect,
@@ -168,31 +170,37 @@ function useKeepCursorPositionOnUpdate(
 	const [rerenderSwitch, toggle] = useState(false)
 	const { onChange: inputOnChange, onKeyDown: inputOnKeyDown } = inputProps
 	const onChange = useCallback(
-		(e) => {
+		(e: ChangeEvent<HTMLInputElement>) => {
 			const input = e.target
 			setValue(input.value)
-			setSelection(Math.max(0, input.selectionStart, input.selectionEnd))
+			setSelection(
+				Math.max(0, input.selectionStart ?? 0, input.selectionEnd ?? 0)
+			)
 			toggle(!rerenderSwitch)
 			inputOnChange?.(e)
 		},
 		[inputOnChange, rerenderSwitch]
 	)
 	const onKeyDown = useCallback(
-		(e) => {
+		(e: KeyboardEvent<HTMLInputElement>) => {
 			inputOnKeyDown?.(e)
-			const input = e.target
+			const input = e.target as HTMLInputElement | undefined
 			if (
 				!(
 					e.key === 'Backspace' &&
-					input.value
-						?.slice(input.selectionStart - 1, input.selectionStart)
+					input?.value
+						?.slice((input.selectionStart ?? 0) - 1, input.selectionStart ?? 0)
 						.match(/[\s]/)
 				)
 			) {
 				return
 			}
 			setSelection(
-				Math.max(0, e.target.selectionStart - 2, e.target.selectionEnd - 2)
+				Math.max(
+					0,
+					(input.selectionStart ?? 0) - 2,
+					(input.selectionEnd ?? 0) - 2
+				)
 			)
 			toggle(!rerenderSwitch)
 		},

site/source/design-system/field/TextAreaField.tsx

@@ -31,7 +31,10 @@ export default function TextAreaField(props: TextAreaFieldProps) {
 					{...(props as HTMLAttributes<HTMLTextAreaElement>)}
 					{...(inputProps as HTMLAttributes<HTMLTextAreaElement>)}
 					required={props?.isRequired || false}
-					placeholder={inputProps.placeholder ?? ''}
+					placeholder={
+						(inputProps as HTMLAttributes<HTMLTextAreaElement>).placeholder ??
+						''
+					}
 					ref={props.inputRef || ref}
 				/>
 				{props.label && (

site/source/design-system/field/TextField.tsx

@@ -27,7 +27,10 @@ export default function TextField(props: TextFieldProps) {
 				<StyledInput
 					{...(omit(props, 'label') as HTMLAttributes<HTMLInputElement>)}
 					{...(inputProps as HTMLAttributes<HTMLInputElement>)}
-					placeholder={inputProps.placeholder ?? undefined}
+					placeholder={
+						(inputProps as HTMLAttributes<HTMLInputElement>).placeholder ??
+						undefined
+					}
 					ref={props.inputRef || ref}
 				/>
 				{props.label && (

site/source/design-system/popover/Popover.tsx

@@ -39,6 +39,9 @@ export default function Popover(
 			title?: string
 			small?: boolean
 			contentRef?: RefObject<HTMLDivElement>
+			onClose?: () => void
+			isDismissable?: boolean
+			isOpen?: boolean
 		}
 ) {
 	const { title, children, small, contentRef } = props

site/source/design-system/root.tsx

@@ -1,5 +1,5 @@
 import isbot from 'isbot'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import styled, {
 	StyleSheetManager,
 	ThemeProvider,
@@ -28,7 +28,7 @@ const SystemRoot = ({ children }: SystemRootProps) => {
 	)
 }
 
-const Background: React.FC = ({ children }) => {
+const Background = ({ children }: { children: ReactNode }) => {
 	const [darkMode] = useDarkMode()
 
 	return <BackgroundStyle $darkMode={darkMode}>{children}</BackgroundStyle>

site/source/pages/Creer/GuideStatut/PreviousAnswers.tsx

@@ -85,9 +85,9 @@ export default function PreviousAnswers() {
 		<PreviousAnswersList>
 			{Object.entries(legalStatus).map(([key, value]) => {
 				const textObject = requirementToText(
-					key as any,
-					value as any
-				) as RequirementToTextType
+					key as keyof LegalStatusRequirements,
+					value as string
+				)
 
 				return (
 					value !== undefined && (
@@ -99,7 +99,9 @@ export default function PreviousAnswers() {
 									]
 								}
 								aria-label={t("Revenir à l'étape {{step}}", {
-									step: textObject?.props?.children || '',
+									step:
+										(textObject as RequirementToTextType)?.props?.children ||
+										'',
 								})}
 							>
 								{textObject}

site/source/pages/Simulateurs/ExonerationCovid/FormulaireS1S1Bis.tsx

@@ -1,9 +1,5 @@
 import { DottedName as ExoCovidDottedNames } from 'exoneration-covid'
-import Engine, {
-	EvaluatedNode,
-	Evaluation,
-	PublicodesExpression,
-} from 'publicodes'
+import Engine, { EvaluatedNode, PublicodesExpression } from 'publicodes'
 import { Key, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -298,18 +294,20 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 							<Trans>
 								Secteur d'activité dont relève l'activité principale :{' '}
 							</Trans>
-							<Bold as="span">{engine.evaluate('secteur').nodeValue}</Bold>
+							<Bold as="span">
+								{engine.evaluate('secteur').nodeValue as string}
+							</Bold>
 						</Li>
 						<Li>
 							<Trans>Activité exercée en </Trans>
 							<Bold as="span">
-								{engine.evaluate("lieu d'exercice").nodeValue}
+								{engine.evaluate("lieu d'exercice").nodeValue as string}
 							</Bold>
 						</Li>
 						<Li>
 							<Trans>Début d'activité : </Trans>
 							<Bold as="span">
-								{engine.evaluate("début d'activité").nodeValue}
+								{engine.evaluate("début d'activité").nodeValue as string}
 							</Bold>
 						</Li>
 						<Li>
@@ -359,9 +357,12 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 							<Trans>
 								Secteur d'activité dont relève l'activité principale :{' '}
 							</Trans>
-							<Bold as="span">{engine.evaluate('secteur').nodeValue}</Bold> (
 							<Bold as="span">
-								{engine.evaluate('code . secteur').nodeValue}
+								{engine.evaluate('secteur').nodeValue as string}
+							</Bold>
+							(
+							<Bold as="span">
+								{engine.evaluate('code . secteur').nodeValue as string}
 							</Bold>
 							)
 						</Li>
@@ -369,11 +370,11 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						<Li>
 							<Trans>Activité exercée en </Trans>
 							<Bold as="span">
-								{engine.evaluate("lieu d'exercice").nodeValue}
-							</Bold>{' '}
+								{engine.evaluate("lieu d'exercice").nodeValue as string}
+							</Bold>
 							(
 							<Bold as="span">
-								{engine.evaluate("code . lieu d'exercice").nodeValue}
+								{engine.evaluate("code . lieu d'exercice").nodeValue as string}
 							</Bold>
 							)
 						</Li>
@@ -381,11 +382,11 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 						<Li>
 							<Trans>Début d'activité : </Trans>
 							<Bold as="span">
-								{engine.evaluate("début d'activité").nodeValue}
-							</Bold>{' '}
+								{engine.evaluate("début d'activité").nodeValue as string}
+							</Bold>
 							(
 							<Bold as="span">
-								{engine.evaluate("code . début d'activité").nodeValue}
+								{engine.evaluate("code . début d'activité").nodeValue as string}
 							</Bold>
 							)
 						</Li>
@@ -394,7 +395,7 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 							<Trans>Eligibilité LFSS : </Trans>
 							<Bold as="span">
 								{formatYesNo(
-									engine.evaluate('code . LFSS').nodeValue as Evaluation<string>
+									engine.evaluate('code . LFSS').nodeValue as string
 								)}
 							</Bold>{' '}
 							(
@@ -413,16 +414,15 @@ export const FormulaireS1S1Bis = ({ onChange }: Props) => {
 							<Trans>Eligibilité LFR : </Trans>
 							<Bold as="span">
 								{formatYesNo(
-									engine.evaluate('code . LFR1').nodeValue as Evaluation<string>
+									engine.evaluate('code . LFR1').nodeValue as string
 								)}
 							</Bold>{' '}
 							(
 							<Bold as="span">
 								{
-									(
-										engine.evaluate('code . LFR1')
-											.nodeValue as Evaluation<string>
-									)?.split(';')[0]
+									(engine.evaluate('code . LFR1').nodeValue as string)?.split(
+										';'
+									)[0]
 								}
 							</Bold>
 							)

site/source/pages/Simulateurs/ExonerationCovid/FormulaireS2.tsx

@@ -204,18 +204,20 @@ export const FormulaireS2 = ({
 							<Trans>
 								Secteur d'activité dont relève l'activité principale :{' '}
 							</Trans>
-							<Bold as="span">{engine.evaluate('secteur').nodeValue}</Bold>
+							<Bold as="span">
+								{engine.evaluate('secteur').nodeValue as string}
+							</Bold>
 						</Li>
 						<Li>
 							<Trans>Activité exercée en </Trans>
 							<Bold as="span">
-								{engine.evaluate("lieu d'exercice").nodeValue}
+								{engine.evaluate("lieu d'exercice").nodeValue as string}
 							</Bold>
 						</Li>
 						<Li>
 							<Trans>Début d'activité : </Trans>
 							<Bold as="span">
-								{engine.evaluate("début d'activité").nodeValue}
+								{engine.evaluate("début d'activité").nodeValue as string}
 							</Bold>
 						</Li>
 						<Li>
@@ -244,26 +246,26 @@ export const FormulaireS2 = ({
 						</Body>
 					</Trans>
 
+					{engine.evaluate('code . secteur').nodeValue as string}
 					<RecapExpert>
 						<Li>
 							<Trans>
 								Secteur d'activité dont relève l'activité principale :{' '}
 							</Trans>
-							<Bold as="span">{engine.evaluate('secteur').nodeValue}</Bold> (
 							<Bold as="span">
-								{engine.evaluate('code . secteur').nodeValue}
-							</Bold>
-							)
+								{engine.evaluate('secteur').nodeValue as string}
+							</Bold>{' '}
+							(<Bold as="span"></Bold>)
 						</Li>
 
 						<Li>
 							<Trans>Activité exercée en </Trans>
 							<Bold as="span">
-								{engine.evaluate("lieu d'exercice").nodeValue}
+								{engine.evaluate("lieu d'exercice").nodeValue as string}
 							</Bold>{' '}
 							(
 							<Bold as="span">
-								{engine.evaluate("code . lieu d'exercice").nodeValue}
+								{engine.evaluate("code . lieu d'exercice").nodeValue as string}
 							</Bold>
 							)
 						</Li>
@@ -271,11 +273,11 @@ export const FormulaireS2 = ({
 						<Li>
 							<Trans>Début d'activité : </Trans>
 							<Bold as="span">
-								{engine.evaluate("début d'activité").nodeValue}
+								{engine.evaluate("début d'activité").nodeValue as string}
 							</Bold>{' '}
 							(
 							<Bold as="span">
-								{engine.evaluate("code . début d'activité").nodeValue}
+								{engine.evaluate("code . début d'activité").nodeValue as string}
 							</Bold>
 							)
 						</Li>
@@ -306,7 +308,10 @@ export const FormulaireS2 = ({
 									engine.evaluate('code . LFR1').nodeValue?.toString()
 								)}
 							</Bold>{' '}
-							(<Bold as="span">{engine.evaluate('code . LFR1').nodeValue}</Bold>
+							(
+							<Bold as="span">
+								{engine.evaluate('code . LFR1').nodeValue as string}
+							</Bold>
 							)
 						</Li>
 

site/source/pages/gerer/_components/Fields.tsx

@@ -1,6 +1,6 @@
 import { useSSRSafeId } from '@react-aria/ssr'
 import { DottedName } from 'modele-social'
-import { RuleNode } from 'publicodes'
+import { PublicodesExpression, RuleNode } from 'publicodes'
 import { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -88,7 +88,7 @@ export function SimpleField({
 	const rule = engine.getRule(dottedName)
 	const meta = getMeta<{ requis?: 'oui' | 'non' }>(rule.rawNode, {})
 	const dispatchValue = useCallback(
-		(value, dottedName: DottedName) => {
+		(value: PublicodesExpression | undefined, dottedName: DottedName) => {
 			dispatch(updateSituation(dottedName, value))
 		},
 		[dispatch]

site/source/pages/gerer/declaration-charges-sociales-independant/index.tsx

@@ -1,3 +1,5 @@
+import { DottedName } from 'modele-social'
+import { PublicodesExpression } from 'publicodes'
 import { useCallback } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -197,7 +199,7 @@ function ImpositionSection() {
 	const { t } = useTranslation()
 
 	const setSituation = useCallback(
-		(value, dottedName) => {
+		(value: PublicodesExpression | undefined, dottedName: DottedName) => {
 			dispatch(updateSituation(dottedName, value))
 		},
 		[dispatch]

site/source/pages/gerer/declaration-revenu-independants/_components/DéclarationRevenu.tsx

@@ -1,5 +1,5 @@
 import { DottedName } from 'modele-social'
-import { Rule, RuleNode } from 'publicodes'
+import { PublicodesExpression, Rule, RuleNode } from 'publicodes'
 import { Fragment, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
@@ -39,7 +39,7 @@ const RuleInputWithTitle = ({
 	const { t } = useTranslation()
 
 	const dispatchValue = useCallback(
-		(value, dottedName: DottedName) => {
+		(value: PublicodesExpression | undefined, dottedName: DottedName) => {
 			dispatch(updateSituation(dottedName, value))
 		},
 		[dispatch]

site/source/pages/gerer/declaration-revenu-independants/imposition.tsx

@@ -294,7 +294,7 @@ function ResultSection() {
 	const dispatch = useDispatch()
 
 	const dispatchValue = useCallback(
-		(value, dottedName: DottedName) => {
+		(value: string, dottedName: DottedName) => {
 			dispatch(updateSituation(dottedName, value))
 		},
 		[dispatch]

site/source/pages/gerer/demande-mobilité/index.tsx

@@ -89,13 +89,19 @@ function FormulairePublicodes() {
 	const { t } = useTranslation()
 
 	const onChange = useCallback(
-		(dottedName, value) => {
+		(dottedName: string, value?: PublicodesExpression) => {
 			if (value === undefined) {
 				setSituation((situation) => omit(situation, dottedName))
 			} else if (engine.getRule(dottedName).rawNode.API === 'commune') {
+				type Value = {
+					batchUpdate: {
+						nom: PublicodesExpression
+						'code postal': PublicodesExpression
+					}
+				}
 				const commune = {
-					nom: value.batchUpdate.nom,
-					'code postal': value.batchUpdate['code postal'],
+					nom: (value as Value).batchUpdate.nom,
+					'code postal': (value as Value).batchUpdate['code postal'],
 				}
 				setSituation((situation) => ({
 					...buildSituationFromObject(dottedName, commune),

site/tsconfig.json

@@ -14,7 +14,7 @@
 		"paths": {
 			"@/*": ["*"]
 		},
-		"types": ["vite/client"],
+		"types": ["vite/client", "vite-plugin-pwa/client"],
 		"typeRoots": ["./node_modules/@types", "./types/"],
 		"noEmit": true,
 		"strict": true