Styled component update : répare typescript

site/cypress/integration/mon-entreprise/demande-mobilité.ts

@@ -1,3 +1,4 @@
+/* eslint-disable cypress/unsafe-to-chain-command */
 import { checkA11Y, fr } from '../../support/utils'
 
 const writeFixtures = Cypress.env('record_http') !== undefined

site/cypress/integration/mon-entreprise/localisation-field.ts

@@ -1,6 +1,5 @@
-const fr = Cypress.env('language') === 'fr'
-
 describe('Champs localisation (simulateur salarié)', function () {
+	const fr = Cypress.env('language') === 'fr'
 	if (!fr) {
 		return
 	}
@@ -16,6 +15,7 @@ describe('Champs localisation (simulateur salarié)', function () {
 		cy.contains('SMIC').click()
 		cy.contains('button', 'Commune').click()
 		cy.contains('Commune ou code postal').click({ force: true })
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.focused().type('Steenvoorde')
 		cy.wait('@communes')
 		cy.contains('Steenvoorde (59114)').click({ force: true })

site/cypress/integration/mon-entreprise/recherche.ts

@@ -14,6 +14,7 @@ describe('Recherche globales', { testIsolation: false }, function () {
 
 		cy.contains('Fermer').focus()
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.focused().tab().should('have.attr', 'type', 'search')
 
 		cy.contains('Simulateurs')
@@ -22,6 +23,7 @@ describe('Recherche globales', { testIsolation: false }, function () {
 			.should('have.length', 6)
 		cy.contains('Règles de calculs').next().find('li').should('have.length', 20)
 
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.focused().type('avocat')
 
 		cy.contains('Simulateurs')

site/cypress/integration/mon-entreprise/simulateur-salarie.ts

@@ -40,6 +40,7 @@ describe('Simulateur salarié : part time contract', function () {
 			.next()
 			.find('button')
 			.click()
+		// eslint-disable-next-line cypress/unsafe-to-chain-command
 		cy.focused().type('25')
 		cy.contains('Fermer').click()
 

site/source/components/ATInternetTracking/smarttag.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 // We wrap the whole file into a condition, but it might be preferable to use a
 // conditionnal import to exclude this whole file from the SSR bundle
 // https://github.com/vitejs/vite/discussions/6377

site/source/components/Logo.tsx

@@ -19,6 +19,7 @@ export function Logo() {
 
 	return (
 		<StyledLogo
+			data-test-id="logo img"
 			alt={t('navbar.logo', 'logo Mon entreprise')}
 			src={
 				language === 'fr'
@@ -33,6 +34,6 @@ export function Logo() {
 	)
 }
 
-const StyledLogo = styled.img.attrs({ 'data-test-id': 'logo img' })`
+const StyledLogo = styled.img`
 	height: 100%;
 `

site/source/components/utils/colors.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { ThemeProvider } from 'styled-components'
+import { ThemeProvider, useTheme } from 'styled-components'
 
 import { useIsEmbedded } from '@/hooks/useIsEmbedded'
 import { hexToHSL } from '@/utils/hexToHSL'
@@ -62,19 +62,20 @@ export function ThemeColorsProvider({ children }: ProviderProps) {
 		)
 	}, [hue, saturation])
 	const isEmbeded = useIsEmbedded()
+	const defaultTheme = useTheme()
 	if (!themeColor && !isEmbeded) {
 		return <>{children}</>
 	}
 
 	return (
 		<ThemeProvider
-			theme={(theme) => ({
-				...theme,
+			theme={{
+				...defaultTheme,
 				colors: {
-					...theme.colors,
-					bases: { ...theme.colors.bases, primary: PALETTE },
+					...defaultTheme.colors,
+					bases: { ...defaultTheme.colors.bases, primary: PALETTE },
 				},
-			})}
+			}}
 		>
 			{/* This div is only used to set the CSS variables */}
 			<div

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

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from '@react-types/button'
 import React, { ComponentPropsWithRef, ReactHTML, useRef } from 'react'
 import { Link as BaseLink } from 'react-router-dom'
-import { css, styled } from 'styled-components'
+import { css, IStyledComponent, styled } from 'styled-components'
 
 import { StyledButton } from '@/design-system/buttons/Button'
 import { H3, H4, HeadingUnderline } from '@/design-system/typography/heading'
@@ -27,7 +27,7 @@ export type GenericCardProps = {
 } & GenericButtonOrLinkProps
 
 type CardProps = GenericCardProps & {
-	bodyAs?: React.ComponentProps<typeof Body>['as']
+	bodyAs?: keyof ReactHTML | IStyledComponent<'web'>
 	children: React.ReactNode
 	className?: string
 	compact?: boolean

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

@@ -377,6 +377,7 @@ function useSimpleNumberFieldState(
 		inputValue,
 		decrement,
 		increment,
+		setNumberValue,
 		minValue: props.minValue ?? -Infinity,
 		maxValue: props.maxValue ?? Infinity,
 		canIncrement: true,

site/source/design-system/layout/Grid.tsx

@@ -62,8 +62,8 @@ type GridProps =
  */
 export default function FluidGrid(props: GridProps) {
 	if (props.container === true) {
-		const { container, item, ...containerProps } = props // Omit props.container and props.item
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { container, item, ...containerProps } = props // Omit props.container and props.item
 
 		return <GridContainer {...containerProps} />
 	} else if (props.item === true) {

site/source/design-system/layout/index.ts

@@ -1,29 +0,0 @@
-import { styled } from 'styled-components'
-
-export { default as Container } from './Container'
-export { default as Grid } from './Grid'
-
-export const Spacing = styled.div<
-	| { xxl: true }
-	| { xl: true }
-	| { lg: true }
-	| { md: true }
-	| { sm: true }
-	| { xs: true }
-	| { xxs: true }
->`
-	min-height: ${({ theme, ...props }) =>
-		'xxl' in props
-			? theme.spacings.xxl
-			: 'xl' in props
-			? theme.spacings.xl
-			: 'lg' in props
-			? theme.spacings.lg
-			: 'md' in props
-			? theme.spacings.md
-			: 'sm' in props
-			? theme.spacings.sm
-			: 'xs' in props
-			? theme.spacings.xs
-			: theme.spacings.xxs};
-`

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

@@ -4,7 +4,8 @@ import { Theme } from '@/types/styled'
 
 export { default as Container } from './Container'
 export { default as Grid } from './Grid'
-type SpacingProps =
+
+type SpacingProps = (
 	| { xxl: true }
 	| { xl: true }
 	| { lg: true }
@@ -12,6 +13,9 @@ type SpacingProps =
 	| { sm: true }
 	| { xs: true }
 	| { xxs: true }
+) & {
+	className?: string
+}
 
 export function Spacing(props: SpacingProps) {
 	return (
@@ -21,6 +25,7 @@ export function Spacing(props: SpacingProps) {
 					(key) => key in props
 				) ?? 'md'
 			}
+			className={props.className}
 		/>
 	)
 }

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

@@ -72,7 +72,7 @@ export default function Popover(
 			aria-label={t('Fond de la boite de dialogue')}
 		>
 			<Underlay {...underlayProps} $offsetTop={offsetTop}>
-				<Container>
+				<Container backgroundColor={() => 'transparent'}>
 					<Grid
 						container
 						css={`

site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx

@@ -130,6 +130,15 @@ export default function SearchCodeAPE({
 			cache?: UFuzzy.HaystackIdxs
 		) => {
 			const idxs = fuzzy.filter(list, value, cache)
+			if (!idxs) {
+				return {
+					idxs: [],
+					info: {
+						idx: [],
+					},
+					order: [],
+				}
+			}
 			const info = fuzzy.info(idxs, list, value)
 			const order = fuzzy.sort(info, list, value)
 

site/source/pages/nouveautés/index.tsx

@@ -90,7 +90,7 @@ export default function Nouveautés() {
 				</Body>
 
 				<Grid container spacing={2}>
-					<MobileGridItem>
+					<MobileGridItem item xs={12}>
 						<Select
 							label="Date de la newsletter"
 							value={selectedRelease}
@@ -106,7 +106,7 @@ export default function Nouveautés() {
 							)}
 						</Select>
 					</MobileGridItem>
-					<DesktopGridItem>
+					<DesktopGridItem item lg={3}>
 						<Sidebar>
 							<StyledUl>
 								{data.map(({ name }, index) => (
@@ -146,7 +146,7 @@ export default function Nouveautés() {
 	)
 }
 
-const MobileGridItem = styled(Grid).attrs({ item: true, xs: 12 })`
+const MobileGridItem = styled(Grid)`
 	display: block;
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {
@@ -154,7 +154,7 @@ const MobileGridItem = styled(Grid).attrs({ item: true, xs: 12 })`
 	}
 `
 
-const DesktopGridItem = styled(Grid).attrs({ item: true, lg: 3 })`
+const DesktopGridItem = styled(Grid)`
 	display: none;
 
 	@media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) {

site/source/pages/simulateurs/artiste-auteur/ArtisteAuteur.tsx

@@ -25,7 +25,6 @@ export default function ArtisteAuteur() {
 				<SimulateurWarning simulateur="artiste-auteur" />
 				<SimulationGoals
 					legend="Vos revenus d'artiste auteur"
-					publique="artisteAuteur"
 					toggles={<PeriodSwitch />}
 				>
 					<SimulationGoal dottedName="artiste-auteur . revenus . traitements et salaires" />