Upgrade to react 18 with kotlin-wrappers BOM

8 files changed, 54 insertions, 41 deletions

diff --git a/sw-ui/build.gradle.kts b/sw-ui/build.gradle.kts
index fbe51d3e..f0f9d08c 100644
--- a/sw-ui/build.gradle.kts
+++ b/sw-ui/build.gradle.kts
@@ -14,6 +14,7 @@ kotlin {
             dependencies {
                 implementation(projects.swClient)
 
+                implementation(project.dependencies.enforcedPlatform(libs.kotlin.wrappers.bom))
                 implementation(libs.kotlin.wrappers.react.base)
                 implementation(libs.kotlin.wrappers.react.dom)
                 implementation(libs.kotlin.wrappers.react.redux)
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
index d6cd1c62..152ff1d5 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
@@ -31,6 +31,10 @@ fun main() {
 private fun initializeAndRender(rootElement: Element) {
     val store = initRedux()
 
+    // With the new API this might look something like:
+    // createRoot(rootElement).render(FC<Props> { .. }.create())
+    // See: https://github.com/karakum-team/kotlin-mui-showcase/blob/main/src/main/kotlin/team/karakum/App.kt
+    @Suppress("DEPRECATION")
     render(rootElement) {
         provider(store) {
             application()
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
index fcc9e863..51e7e78f 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/Application.kt
@@ -6,29 +6,35 @@ import org.luxons.sevenwonders.ui.components.gameBrowser.gameBrowser
 import org.luxons.sevenwonders.ui.components.home.home
 import org.luxons.sevenwonders.ui.components.lobby.lobby
 import org.luxons.sevenwonders.ui.router.SwRoute
+import react.Props
 import react.RBuilder
+import react.RElementBuilder
+import react.createElement
+import react.router.Navigate
+import react.router.Route
+import react.router.Routes
+import react.router.RoutesProps
 import react.router.dom.*
 
 fun RBuilder.application() = HashRouter {
     errorDialog()
-    Switch {
+    Routes {
         route(SwRoute.GAME_BROWSER.path) { gameBrowser() }
         route(SwRoute.GAME.path) { gameScene() }
         route(SwRoute.LOBBY.path) { lobby() }
         route(SwRoute.HOME.path) { home() }
-        Redirect {
-            attrs {
-                from = "*"
-                to = "/"
+        route("*") {
+            Navigate {
+                attrs.to = "/"
+                attrs.replace = true
             }
         }
     }
 }
 
-private fun RBuilder.route(path: String, exact: Boolean = false, render: RBuilder.() -> Unit) {
+private fun RElementBuilder<RoutesProps>.route(path: String, render: RBuilder.() -> Unit) {
     Route {
-        attrs.path = arrayOf(path)
-        attrs.exact = exact
-        render()
+        attrs.path = path
+        attrs.element = createElement<Props>(render)
     }
 }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
index 57614922..ec7ea464 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt
@@ -4,13 +4,11 @@ import blueprintjs.core.PopoverPosition
 import blueprintjs.core.bpDivider
 import blueprintjs.core.bpPopover
 import kotlinx.css.*
-import kotlinx.html.DIV
+import kotlinx.html.*
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.boards.Board
 import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo
-import react.RBuilder
-import react.ReactElement
-import react.buildElement
+import react.*
 import styled.*
 
 enum class BoardSummarySide(
@@ -45,7 +43,7 @@ fun RBuilder.boardSummaryWithPopover(
     }
 }
 
-private fun createFullBoardPreview(board: Board): ReactElement = buildElement {
+private fun createFullBoardPreview(board: Board): ReactElement<*> = buildElement {
     boardComponent(board = board) {
         css {
             +GameStyles.fullBoardPreview
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
index 9313cd67..e9fb467f 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
@@ -1,19 +1,14 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
-import blueprintjs.core.Intent
-import blueprintjs.core.bpButton
-import blueprintjs.core.bpInputGroup
-import blueprintjs.icons.IconNames
+import blueprintjs.core.*
+import blueprintjs.icons.*
 import kotlinx.css.*
-import kotlinx.html.js.onSubmitFunction
-import org.luxons.sevenwonders.ui.redux.RequestCreateGame
-import org.luxons.sevenwonders.ui.redux.connectDispatch
-import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.events.Event
+import kotlinx.html.js.*
+import org.luxons.sevenwonders.ui.redux.*
+import org.w3c.dom.*
 import react.*
 import react.dom.*
-import styled.css
-import styled.styledDiv
+import styled.*
 
 private interface CreateGameFormProps : PropsWithChildren {
     var createGame: (String) -> Unit
@@ -36,7 +31,10 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame
             }
             form {
                 attrs {
-                    onSubmitFunction = { e -> createGame(e) }
+                    onSubmitFunction = { e ->
+                        e.preventDefault()
+                        createGame()
+                    }
                 }
 
                 bpInputGroup(
@@ -53,11 +51,13 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame
     }
 
     private fun createGameButton() = buildElement {
-        bpButton(minimal = true, intent = Intent.PRIMARY, icon = IconNames.ADD, onClick = { e -> createGame(e) })
+        bpButton(minimal = true, intent = Intent.PRIMARY, icon = IconNames.ADD, onClick = { e ->
+            e.preventDefault() // prevents refreshing the page when pressing Enter
+            createGame()
+        })
     }
 
-    private fun createGame(e: Event) {
-        e.preventDefault() // prevents refreshing the page when pressing Enter
+    private fun createGame() {
         props.createGame(state.gameName)
     }
 }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
index 055b5d71..6a4f1059 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
@@ -9,7 +9,6 @@ import kotlinx.html.js.onSubmitFunction
 import org.luxons.sevenwonders.ui.redux.RequestChooseName
 import org.luxons.sevenwonders.ui.redux.connectDispatch
 import org.w3c.dom.HTMLInputElement
-import org.w3c.dom.events.Event
 import react.*
 import styled.css
 import styled.styledDiv
@@ -35,7 +34,10 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName
                 display = Display.flex
                 flexDirection = FlexDirection.row
             }
-            attrs.onSubmitFunction = { e -> chooseUsername(e) }
+            attrs.onSubmitFunction = { e ->
+                e.preventDefault()
+                chooseUsername()
+            }
             randomNameButton()
             spacer()
             bpInputGroup(
@@ -53,12 +55,15 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName
         }
     }
 
-    private fun submitButton(): ReactElement = buildElement {
+    private fun submitButton(): ReactElement<*> = buildElement {
         bpButton(
             minimal = true,
             icon = IconNames.ARROW_RIGHT,
             intent = Intent.PRIMARY,
-            onClick = { e -> chooseUsername(e) },
+            onClick = { e ->
+                e.preventDefault()
+                chooseUsername()
+            },
         )
     }
 
@@ -76,8 +81,7 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName
         setState { username = randomGreekName() }
     }
 
-    private fun chooseUsername(e: Event) {
-        e.preventDefault()
+    private fun chooseUsername() {
         props.chooseUsername(state.username)
     }
 
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
index 39ac8e8b..8e99c23d 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
@@ -15,8 +15,8 @@ import styled.styledUl
 
 fun <T> RBuilder.radialList(
     items: List<T>,
-    centerElement: ReactElement,
-    renderItem: (T) -> ReactElement,
+    centerElement: ReactElement<*>,
+    renderItem: (T) -> ReactElement<*>,
     getKey: (T) -> String,
     itemWidth: Int,
     itemHeight: Int,
@@ -41,7 +41,7 @@ fun <T> RBuilder.radialList(
 
 private fun <T> RBuilder.radialListItems(
     items: List<T>,
-    renderItem: (T) -> ReactElement,
+    renderItem: (T) -> ReactElement<*>,
     getKey: (T) -> String,
     radialConfig: RadialConfig,
 ) {
@@ -67,7 +67,7 @@ private fun <T> RBuilder.radialListItems(
     }
 }
 
-private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: CartesianCoords) {
+private fun RBuilder.radialListItem(item: ReactElement<*>, key: String, offset: CartesianCoords) {
     styledLi {
         css {
             display = Display.block
@@ -90,7 +90,7 @@ private fun RBuilder.radialListItem(item: ReactElement, key: String, offset: Car
     }
 }
 
-private fun RBuilder.radialListCenter(centerElement: ReactElement?) {
+private fun RBuilder.radialListCenter(centerElement: ReactElement<*>?) {
     if (centerElement == null) {
         return
     }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
index 16cc9fd7..22fcd3ad 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
@@ -55,7 +55,7 @@ private sealed class PlayerItem {
     abstract val key: String
     abstract val playerText: String
     abstract val opacity: Double
-    abstract val icon: ReactElement
+    abstract val icon: ReactElement<*>
 
     data class Player(val player: PlayerDTO) : PlayerItem() {
         override val key = player.username