React 19 Migration

[Mephistic]

Problem

We're currently on version 18.2 of React, but 19.x has been stable for almost a year now. We should update our library version so we don't fall too out of date, either with core React features or the libraries that depend on it.

@mertbagt

Success Criteria

• Upgrade React to version 19.x (Preferably the latest)

Additional Considerations

• The React 18 -> 19 Migration guide recommends first upgrading from 18.2 to 18.3 - this will apparently add a bunch of warnings wherever we use features that would be impacted by the migration, so might be a good intermediate step.

[chiroptical]

You can see this recommendation on the react site https://react.dev/blog/2024/04/25/react-19-upgrade-guide

[chiroptical]

Note: I started working on this

[Mephistic]

Looks like this will require a Styled Components update - we need to move from v5 to v6, which has some support for React 19. Styled Component is also now in maintenance mode, so if that doesn't fix it, we'll need to consider bigger changes.

https://styled-components.com/releases
https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6

[chiroptical]

This was the first error I encountered. The TooltipButton has some props (I guess you call them props), but these types are pretty inscrutable and I'm not familiar with this library.

./components/EditProfilePage/PersonalInfoTab.tsx:146:17
Type error: No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<BaseObject, never>, void, void, {}, {}>): Element', gave the following error.
    Type '{ text: string; tooltip: string; variant: string; }' is not assignable to type 'IntrinsicAttributes & FastOmit<Substitute<FastOmit<BaseObject, never>, FastOmit<{}, never>>, keyof ExecutionProps> & FastOmit<...> & { ...; }'.
      Property 'text' does not exist on type 'IntrinsicAttributes & FastOmit<Substitute<FastOmit<BaseObject, never>, FastOmit<{}, never>>, keyof ExecutionProps> & FastOmit<...> & { ...; }'.
  Overload 2 of 2, '(props: FastOmit<BaseObject, never>): ReactNode', gave the following error.
    Type '{ text: string; tooltip: string; variant: string; }' is not assignable to type 'IntrinsicAttributes & FastOmit<BaseObject, never>'.
      Property 'text' does not exist on type 'IntrinsicAttributes & FastOmit<BaseObject, never>'.

  144 |             <Col>
  145 |               <TooltipButton
> 146 |                 text={t("forms.aboutYouTip")}
      |                 ^
  147 |                 tooltip={t("tooltipText")}
  148 |                 variant="link"
  149 |               />