chore: upgraded to react19

eslint.config.js

@@ -101,6 +101,9 @@ module.exports = [
       react: require('eslint-plugin-react'),
       'react-hooks': require('eslint-plugin-react-hooks'),
     },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+    },
   },
 
   //backend and components package rule override

package.json

@@ -40,7 +40,7 @@
   },
   "resolutions": {
     "**/@types/node": "^22.9.0",
-    "@types/react": "^17.0.4",
+    "@types/react": "^19.1.1",
     "body-parser": "2.2.0",
     "minimatch": "^3.0.8"
   },

packages/alexa/tsconfig.json

@@ -2,13 +2,14 @@
   "extends": "../../tsconfig.settings.json",
   "compilerOptions": {
     "keyofStringsOnly": false,
-    "baseUrl": ".",
+    "baseUrl": "./",
     "outDir": "lib",
     "rootDir": "src",
     "strictNullChecks": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "resolveJsonModule": true,
     "sourceMap": false,
     "inlineSources": false

packages/api/tsconfig.json

@@ -1,16 +1,16 @@
 {
   "extends": "../../tsconfig.settings.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "outDir": "lib",
     "rootDir": "src",
     "strict": true,
     "strictNullChecks": true,
     "target": "ESNext",
     "lib": ["ESNEXT", "DOM"],
     "esModuleInterop": true,
-    "moduleResolution": "Node",
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "keyofStringsOnly": false
   },
   "include": ["src/**/*"]

packages/authorizer/tsconfig.json

@@ -8,11 +8,12 @@
     "strictNullChecks": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "resolveJsonModule": true,
     "sourceMap": false,
     "inlineSources": false,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*"]
 }

packages/backend/package.json

@@ -14,7 +14,6 @@
   "dependencies": {
     "@graphql-tools/schema": "^10.0.25",
     "@lara/api": "^1.0.0",
-    "@types/jest": "^30.0.0",
     "apollo-server-lambda": "^3.13.0",
     "aws-sdk": "^2.950.0",
     "casual": "^1.6.2",
@@ -34,11 +33,11 @@
   "devDependencies": {
     "@types/aws-lambda": "^8.10.76",
     "@types/i18n": "^0.13.0",
-    "@types/jest": "^29.1.2",
+    "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/object-hash": "^3.0.6",
     "@types/uuid": "^8.3.0",
     "jest": "^30.0.5",
-    "ts-jest": "^29.0.3"
+    "ts-jest": "^29.4.1"
   }
 }

packages/backend/tsconfig.json

@@ -8,11 +8,12 @@
     "strictNullChecks": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "resolveJsonModule": true,
     "sourceMap": false,
     "inlineSources": false,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "references": [{ "path": "../api" }],
   "include": ["src/**/*"],

packages/cleanup/tsconfig.json

@@ -8,7 +8,8 @@
     "strictNullChecks": true,
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "resolveJsonModule": true,
     "sourceMap": false,
     "inlineSources": false

packages/components/package.json

@@ -11,14 +11,13 @@
   },
   "dependencies": {
     "@rebass/grid": "^6.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "styled-components": "^6.1.19",
     "styled-modern-normalize": "^0.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.9",
+    "@types/react": "^19.1.10",
     "@types/rebass__grid": "^6.0.6",
     "@types/styled-components": "^5.1.3"
   }

packages/components/src/admin-overview.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { Spacings } from './spacing'
@@ -10,6 +10,7 @@ const AdminOverviewGrid = styled.div`
 
 type AdminOverviewLayoutProps = {
   heading: JSX.Element
+  children: ReactNode
 }
 
 export const AdminOverviewLayout: React.FC<AdminOverviewLayoutProps> = ({ heading, children }) => {
@@ -29,6 +30,7 @@ const AdminCreateUserGrid = styled.div`
 type AdminCreateUserLayoutProps = {
   headline: JSX.Element
   description: JSX.Element
+  children: ReactNode
 }
 
 export const AdminCreateUserLayout: React.FC<AdminCreateUserLayoutProps> = ({ headline, description, children }) => {

packages/components/src/alexa-settings.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { StyledIcon } from './icons'

packages/components/src/application-settings-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 import { FontSizes } from './font-size'
 

packages/components/src/archive.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import styled from 'styled-components'
 
 import { Container } from './container'

packages/components/src/avatar-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { BorderRadii } from './border-radius'
@@ -32,6 +32,7 @@ const StyledLoadingIconWrapper = styled.div`
 
 interface AvatarLayoutProps {
   size: number
+  children: ReactNode
   loadingIcon: JSX.Element
   noImageIcon: JSX.Element
 }

packages/components/src/button-layout.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react'
+import React, { JSX, ButtonHTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { BorderRadii } from './border-radius'
 import { FontSizes } from './font-size'

packages/components/src/comment-bubble-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { BorderRadii } from './border-radius'

packages/components/src/day-input-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 import { FontSizes } from './font-size'
 import { Spacings } from './spacing'
@@ -47,6 +47,7 @@ interface DayInputLayoutInterface {
   statusLabel: JSX.Element
   total?: JSX.Element
   commentsection?: JSX.Element
+  children: ReactNode
 }
 
 export const DayInputLayout: React.FC<DayInputLayoutInterface> = ({

packages/components/src/dropdown-layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import styled, { css } from 'styled-components'
 
 import { BorderRadii } from './border-radius'

packages/components/src/edit-user-content.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { Spacings } from './spacing'

packages/components/src/edit-user.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { Container } from './container'

packages/components/src/entry-input-layout.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { JSX, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 
 import { Spacings } from './spacing'

packages/components/src/faq.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 import { BorderRadii } from './border-radius'
 import { FontSizes } from './font-size'
@@ -28,6 +28,7 @@ const StyledFAQHeader = styled.div`
 type FaqLayoutProps = {
   title: JSX.Element
   search: JSX.Element
+  children: ReactNode
 }
 
 export const FaqLayout: React.FC<FaqLayoutProps> = ({ title, search, children }) => {

packages/components/src/logo.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { JSX, useContext } from 'react'
 import { ThemeContext } from 'styled-components'
 
 export interface LogoProps {

packages/components/src/modal-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { Container } from './container'
@@ -16,6 +16,7 @@ export interface ModelStylingProps extends ModalOverlayProps, ModalContainerProp
 
 interface ModalLayoutProps extends ModelStylingProps {
   button: JSX.Element
+  children: ReactNode
 }
 
 const ModalOverlay = styled.div<ModalOverlayProps>`

packages/components/src/navigation-button-link.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Link, LinkProps } from 'react-router-dom'
+import React, { JSX } from 'react'
+import { Link, LinkProps } from 'react-router'
 import styled from 'styled-components'
 
 import { BorderRadii } from './border-radius'

packages/components/src/navigation.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Link, NavLink, NavLinkProps } from 'react-router-dom'
+import { Link, NavLink, NavLinkProps } from 'react-router'
 import styled, { css } from 'styled-components'
 
 import { Flex } from '@rebass/grid'

packages/components/src/support.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React, { JSX, ReactNode } from 'react'
+import { Link } from 'react-router'
 import styled from 'styled-components'
 
 import { Container } from './container'
@@ -71,6 +71,7 @@ export const StyledSupportTile: React.FC<StyledSupportTileProps> = ({ title, bod
 
 type StyledSupportLayoutProps = {
   illustration: JSX.Element
+  children: ReactNode
 }
 
 export const StyledSupportLayout: React.FC<StyledSupportLayoutProps> = ({ illustration, children }) => {

packages/components/src/text-time-input.tsx

@@ -1,5 +1,4 @@
 import { FlexProps } from '@rebass/grid'
-import React from 'react'
 import styled, { css } from 'styled-components'
 import { StyledEntryValueWrapper } from './entry-input-layout'
 import { FontSizes } from './font-size'

packages/components/src/trainee-overview-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import { Flex } from '@rebass/grid'
@@ -40,6 +40,7 @@ interface TraineeOverviewLayoutProps {
   readonly name: string
   readonly icon: JSX.Element
   readonly caption: string
+  readonly children: ReactNode
 }
 
 export const TraineeOverviewLayout: React.FC<TraineeOverviewLayoutProps> = ({

packages/components/src/trainee-row.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router'
 import { FontSizes } from './font-size'
 import { Spacings } from './spacing'
 import { StyledIcon } from './icons'

packages/components/src/unstyled-link.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import { Link, LinkProps } from 'react-router-dom'
+import { Link, LinkProps } from 'react-router'
 import styled from 'styled-components'
 
 interface UnstyledLinkProps extends LinkProps {

packages/components/src/user-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { Spacings } from './spacing'

packages/components/src/user-info.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import styled from 'styled-components'
 
 import { FontSizes } from './font-size'

packages/components/src/week-overview.ts

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import styled from 'styled-components'
 
 import { FontSizes } from './font-size'

packages/components/tsconfig.json

@@ -6,7 +6,8 @@
     "outDir": "lib",
     "rootDir": "src",
     "strictNullChecks": true,
-    "module": "CommonJS"
+    "moduleResolution": "bundler",
+    "module": "es2020"
   },
   "include": ["src/**/*"]
 }

packages/email/tsconfig.json

@@ -1,16 +1,16 @@
 {
   "extends": "../../tsconfig.settings.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "outDir": "lib",
     "rootDir": "src",
     "strict": true,
     "strictNullChecks": true,
     "target": "ESNext",
     "lib": ["ESNEXT", "DOM"],
     "esModuleInterop": true,
-    "moduleResolution": "Node",
-    "module": "CommonJS",
+    "moduleResolution": "node",
+    "module": "commonjs",
     "keyofStringsOnly": false
   },
   "references": [{ "path": "../api" }],