Upgrade to React 19
Summary
After https://github.com/mi6/ic-ui-kit/issues/2891 Storybook was upgraded so that we could upgrade to React 19, however there were more packages that needed updating in order for React 19 to work. Some of them hadn't been updated to work with React 19 yet so all other upgrades have been left for this ticket.
💬 Description
What needs updating:
- Latest version of mdx-js/react
- Cypress v14
- Storybook addon performance (anything greater than 0.17.3) - this is the package that hasn't been updated to React 19 yet, it hasn't had a new version in the last year. It might be that we need to look at an alternative instead.
- React v19
💰 Use value
Allows users to use React 19 with ICDS.
Putting this back to ready for dev, as I've hit a bit of a wall with upgrading the ukic/react package. After updating the relevant packages mentioned above, I was able to install React 19, but this caused type errors in the auto-generated wrappers for our react components. This appears to be a known issue in the stencil/react-output-targets package. I tried updating that, typescript and even the stencil/core packages to their latest versions, but the errors persisted, which are breaking the build process.
@ukic/react: src/react-component-lib/createOverlayComponent.tsx(140,13): error TS2322: Type 'PropsWithoutRef<Props> & { forwardedRef: ForwardedRef<OverlayType>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Overlay> & Readonly<Props>'.
@ukic/react: Type 'PropsWithoutRef<Props> & { forwardedRef: ForwardedRef<OverlayType>; }' is not assignable to type 'Readonly<Props>'.
@ukic/react: src/react-component-lib/utils/index.tsx(40,27): error TS2345: Argument of type '{ (props: StencilReactExternalProps<PropType, ElementType>, ref: StencilReactForwardedRef<ElementType>): React.JSX.Element; displayName: string; }' is not assignable to parameter of type 'ForwardRefRenderFunction<ElementType, PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>>'.
@ukic/react: Types of parameters 'props' and 'props' are incompatible.
@ukic/react: Type 'PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
@ukic/react: Type 'StencilReactExternalProps<PropType, ElementType> | ("ref" extends "id" | "color" | "content" | "translate" | ... 275 more ... | keyof StyleReactProps ? Omit<...> : StencilReactExternalProps<...>)' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
@ukic/react: Type '"ref" extends "id" | "color" | "content" | "translate" | "hidden" | "slot" | "title" | "dir" | "accessKey" | "draggable" | "inert" | "lang" | "part" | "prefix" | "role" | ... 264 more ... | keyof StyleReactProps ? Omit<...> : StencilReactExternalProps<...>' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
@ukic/react: Type 'StencilReactExternalProps<PropType, ElementType> | Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
@ukic/react: Type 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'StencilReactExternalProps<PropType, ElementType>'.
@ukic/react: Type 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">' is not assignable to type 'PropType'.
@ukic/react: 'PropType' could be instantiated with an arbitrary type which could be unrelated to 'Omit<StencilReactExternalProps<PropType, ElementType>, keyof PropType & "ref">'.
Perhaps someone else can find a way around it.
On hold due to StencilJS issue when upgrading. May potentially come back into dev when working on https://github.com/mi6/ic-ui-kit/issues/3669