Merge pull request #615 from baaahs/kotlin-2.0-bump-wrappers-774

Bump kotlin-wrappers to 1.0.0-pre.804

build.gradle.kts

@@ -168,7 +168,7 @@ kotlin {
                 implementation(project.dependencies.enforcedPlatform(kotlinw("wrappers-bom:${Versions.kotlinWrappers}")))
                 implementation(kotlinw("react"))
                 implementation(kotlinw("react-dom"))
-                implementation(kotlinw("styled"))
+                implementation(kotlinw("styled-next"))
                 implementation(kotlinw("mui-material"))
                 implementation(kotlinw("mui-icons-material"))
                 implementation(kotlinw("emotion"))

buildSrc/src/main/kotlin/Versions.kt

@@ -17,7 +17,7 @@ object Versions {
 
     // JS:
     const val kotlinxHtml = "0.9.1"
-    const val kotlinWrappers = "1.0.0-pre.696"
+    const val kotlinWrappers = "1.0.0-pre.804"
 
     // Test:
     const val junit = "5.8.1"

src/jsMain/kotlin/baaahs/app/ui/AllStyles.kt

@@ -16,31 +16,35 @@ import baaahs.mapper.MapperStyles
 import baaahs.ui.components.UiComponentStyles
 import baaahs.ui.diagnostics.DiagnosticsStyles
 import mui.material.styles.Theme
+import styled.StyleSheet
 import styled.injectGlobal
 
 class AllStyles(val theme: Theme) {
-    val appUi by lazy { ThemeStyles(theme) }
-    val controls by lazy { baaahs.app.ui.controls.ThemeStyles(theme) }
-    val gadgetsSlider by lazy { ThemedStyles(theme) }
-    val editableManager by lazy { ThemedEditableStyles(theme) }
-    val layout by lazy { LayoutStyles(theme) }
-    val layoutEditor by lazy { LayoutEditorStyles(theme) }
-    val controllerEditor by lazy { ControllerEditorStyles(theme) }
-    val modelEditor by lazy { ModelEditorStyles(theme) }
-    val mapper by lazy { MapperStyles(theme) }
-    val shaderEditor by lazy { ShaderEditorStyles(theme) }
-    val shaderLibrary by lazy { ShaderLibraryStyles(theme) }
-    val shaderHelp by lazy { ShaderHelpStyles(theme) }
-    val uiComponents by lazy { UiComponentStyles(theme) }
-    val fileUploadStyles by lazy { FileUploadStyles(theme) }
-    val diagnosticsStyles by lazy { DiagnosticsStyles(theme) }
-    val patchModStyles by lazy { PatchModStyles(theme) }
+    val appUi by lazy { inject(ThemeStyles(theme)) }
+    val controls by lazy { inject(baaahs.app.ui.controls.ThemeStyles(theme)) }
+    val gadgetsSlider by lazy { inject(ThemedStyles(theme)) }
+    val editableManager by lazy { inject(ThemedEditableStyles(theme)) }
+    val layout by lazy { inject(LayoutStyles(theme)) }
+    val layoutEditor by lazy { inject(LayoutEditorStyles(theme)) }
+    val controllerEditor by lazy { inject(ControllerEditorStyles(theme)) }
+    val modelEditor by lazy { inject(ModelEditorStyles(theme)) }
+    val mapper by lazy { inject(MapperStyles(theme)) }
+    val shaderEditor by lazy { inject(ShaderEditorStyles(theme)) }
+    val shaderLibrary by lazy { inject(ShaderLibraryStyles(theme)) }
+    val shaderHelp by lazy { inject(ShaderHelpStyles(theme)) }
+    val uiComponents by lazy { inject(UiComponentStyles(theme)) }
+    val fileUploadStyles by lazy { inject(FileUploadStyles(theme)) }
+    val diagnosticsStyles by lazy { inject(DiagnosticsStyles(theme)) }
+    val patchModStyles by lazy { inject(PatchModStyles(theme)) }
 
     fun injectGlobals() {
         injectGlobal(Styles.global)
         injectGlobal(appUi.global)
         injectGlobal(baaahs.app.ui.controls.Styles.global)
         injectGlobal(ColorWheelStyles.global)
         injectGlobal(layout.global)
+//        baaahs.app.ui.controls.Styles.inject()
     }
+
+    private fun <T: StyleSheet> inject(styleSheet: T) = styleSheet.also { it.inject() }
 }

src/jsMain/kotlin/baaahs/app/ui/AppDrawerView.kt

@@ -3,7 +3,6 @@ package baaahs.app.ui
 import baaahs.app.ui.document.documentMenu
 import baaahs.client.document.DocumentManager
 import baaahs.ui.*
-import js.objects.jso
 import materialui.icon
 import mui.material.*
 import mui.material.styles.Theme
@@ -18,8 +17,8 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
     val theme = useTheme<Theme>()
     val themeStyles = appContext.allStyles.appUi
 
-    val handleAppModeChange by handler(props.onAppModeChange) { _: SyntheticEvent<*, *>, value: String ->
-        props.onAppModeChange(AppMode.valueOf(value))
+    val handleAppModeChange by handler(props.onAppModeChange) { _: SyntheticEvent<*, *>, value: Any ->
+        props.onAppModeChange(AppMode.valueOf(value.toString()))
     }
 
     val editMode = observe(props.documentManager.editMode)
@@ -41,8 +40,8 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
 
 
     Drawer {
-        attrs.classes = jso {
-            root = -themeStyles.appDrawer
+        attrs.className = -themeStyles.appDrawer
+        attrs.classes = muiClasses {
             paperAnchorLeft = -themeStyles.appDrawerPaper
         }
         attrs.variant = DrawerVariant.persistent
@@ -57,7 +56,7 @@ private val AppDrawerView = xComponent<AppDrawerProps>("AppDrawer", isPure = tru
 
                 for (aMode in AppMode.values()) {
                     Tab {
-                        attrs.classes = jso { root = -themeStyles.appModeTab }
+                        attrs.className = -themeStyles.appModeTab
                         attrs.value = aMode.name
                         attrs.label = ReactNode(aMode.name)
                     }

src/jsMain/kotlin/baaahs/app/ui/AppIndex.kt

@@ -205,7 +205,7 @@ val AppIndex = xComponent<AppIndexProps>("AppIndex") { props ->
                     CssBaseline {}
 
                     Paper {
-                        attrs.classes = jso { this.root = -themeStyles.appRoot and appDrawerStateStyle and editModeStyle }
+                        attrs.className = -themeStyles.appRoot and appDrawerStateStyle and editModeStyle
 
                         appDrawer {
                             attrs.open = renderAppDrawerOpen
@@ -233,7 +233,7 @@ val AppIndex = xComponent<AppIndexProps>("AppIndex") { props ->
 
                                 if (appState is AppState.FullScreenMessage) {
                                     Paper {
-                                        attrs.classes = jso { root = -themeStyles.fullScreenMessagePaper }
+                                        attrs.className = -themeStyles.fullScreenMessagePaper
                                         if (appState.isInProgress)
                                             mui.material.CircularProgress {}
                                         icon(mui.icons.material.NotificationImportant)

src/jsMain/kotlin/baaahs/app/ui/AppToolbarTabView.kt

@@ -5,7 +5,6 @@ import baaahs.client.document.DocumentManager
 import baaahs.client.document.OpenDocument
 import baaahs.show.live.OpenPatchHolder
 import baaahs.ui.*
-import js.objects.jso
 import kotlinx.html.unsafe
 import materialui.icon
 import mui.icons.material.Article
@@ -21,7 +20,7 @@ private val AppToolbarTabView = xComponent<AppToolbarTabProps>("AppToolbarTab")
     val themeStyles = appContext.allStyles.appUi
 
     typographyH6 {
-        attrs.classes = jso { this.root = -themeStyles.title }
+        attrs.className = -themeStyles.title
         div(+themeStyles.titleHeader) { +"${props.value.name}:" }
 
         val document = props.document

src/jsMain/kotlin/baaahs/app/ui/AppToolbarView.kt

@@ -20,7 +20,6 @@ import mui.icons.material.Menu
 import mui.material.*
 import mui.material.Link
 import mui.material.Tab
-import org.w3c.dom.events.Event
 import react.*
 import react.dom.div
 import react.dom.h4
@@ -73,13 +72,13 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
 
     var showProblemsDialogIsOpen by state { false }
     val toggleProblems = callback { showProblemsDialogIsOpen = !showProblemsDialogIsOpen }
-    val closeProblems = callback { _: Event, _: String -> showProblemsDialogIsOpen = false }
+    val closeProblems = callback { _: Any, _: String -> showProblemsDialogIsOpen = false }
 
     val editMode = observe(props.documentManager.editMode)
     val handleEditModeChange by handler(editMode) { editMode.toggle() }
 
     AppBar {
-        attrs.classes = jso { this.root = -themeStyles.appToolbar }
+        attrs.className = -themeStyles.appToolbar
         attrs.component = ReactHTML.div
         attrs.position = AppBarPosition.relative
 
@@ -92,13 +91,14 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
             }
 
             Tabs {
-                attrs.classes = jso { this.root = -themeStyles.appToolbarTabs }
+                attrs.className = -themeStyles.appToolbarTabs
+                attrs.classes = muiClasses { indicator = -themeStyles.appToolbarTabIndicator }
                 attrs.value = props.appMode
                 attrs.onChange = handleAppModeTabClick
 
-                val tabClasses = jso<TabClasses> {
-                    this.root = -themeStyles.appToolbarTab
-                    this.selected = -themeStyles.appToolbarTabSelected
+                val tabClasses = muiClasses<TabClasses> {
+                    root = -themeStyles.appToolbarTab
+                    selected = -themeStyles.appToolbarTabSelected
                 }
                 Tab {
                     attrs.classes = tabClasses
@@ -196,9 +196,9 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
                 }
 
                 ToggleButton {
-                    attrs.classes = jso {
-                        this.root = -themeStyles.editModeButton
-                        this.selected = -themeStyles.editModeButtonSelected
+                    attrs.className = -themeStyles.editModeButton
+                    attrs.classes = muiClasses {
+                        selected = -themeStyles.editModeButtonSelected
                     }
 //                        attrs.variant = ButtonVariant.contained
                     attrs.color = ToggleButtonColor.error
@@ -215,16 +215,16 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
                 }
 
                 ButtonGroup {
-                    attrs.classes = jso { this.root = -themeStyles.appToolbarButtonGroup }
+                    attrs.className = -themeStyles.appToolbarButtonGroup
 
                     if (showProblemsSeverity != null) {
                         Tooltip {
                             attrs.title = "Show Problems".asTextNode()
 
                             IconButton {
-                                attrs.classes = jso { this.root = -themeStyles.appToolbarProblemsIcon }
+                                attrs.className = -themeStyles.appToolbarProblemsIcon
                                 Link {
-                                    attrs.classes = jso { this.root = ClassName(showProblemsSeverity.cssClass) }
+                                    attrs.className = ClassName(showProblemsSeverity.cssClass)
                                     attrs.onClick = toggleProblems.withMouseEvent()
                                     icon(showProblemsSeverity.icon)
                                 }
@@ -261,7 +261,7 @@ private val AppToolbarView = xComponent<AppToolbarProps>("AppToolbar") { props -
 
                 DialogTitle { +"Show Problems" }
                 DialogContent {
-                    attrs.classes = jso { root = -themeStyles.showProblemsDialogContent }
+                    attrs.className = -themeStyles.showProblemsDialogContent
                     showManager.showProblems.sortedByDescending { it.severity }.forEach { problem ->
                         val iconClass = "${themeStyles.showProblem.name} ${problem.severity.cssClass}"
                         div(iconClass) { icon(problem.severity.icon) }

src/jsMain/kotlin/baaahs/app/ui/ControlsPaletteView.kt

@@ -16,7 +16,6 @@ import external.react_draggable.Draggable
 import external.react_resizable.Resizable
 import external.react_resizable.ResizeCallbackData
 import external.react_resizable.buildResizeHandle
-import js.objects.jso
 import materialui.icon
 import mui.material.Paper
 import org.w3c.dom.events.MouseEvent
@@ -65,7 +64,7 @@ private val ControlsPaletteView = xComponent<ControlsPaletteProps>("ControlsPale
                 }
 
                 Paper {
-                    attrs.classes = jso { root = -Styles.unplacedControlsPaper }
+                    attrs.className = -Styles.unplacedControlsPaper
                     attrs.elevation = 3
 
                     header { +"Unplaced Controls" }

src/jsMain/kotlin/baaahs/app/ui/NotifierView.kt

@@ -1,11 +1,7 @@
 package baaahs.app.ui
 
 import baaahs.client.Notifier
-import baaahs.ui.markdown
-import baaahs.ui.unaryMinus
-import baaahs.ui.unaryPlus
-import baaahs.ui.xComponent
-import js.objects.jso
+import baaahs.ui.*
 import mui.material.Alert
 import mui.material.AlertColor
 import mui.material.AlertTitle
@@ -24,13 +20,13 @@ private val NotifierView = xComponent<NotifierProps>("Notifier") { props ->
     notifier.serverNotices.let { serverNotices ->
         if (serverNotices.isNotEmpty()) {
             Backdrop {
-                attrs.classes = jso { this.root = -Styles.serverNoticeBackdrop }
+                attrs.className = -Styles.serverNoticeBackdrop
                 attrs { open = true }
 
                 div {
                     serverNotices.forEach { serverNotice ->
                         Alert {
-                            attrs.classes = jso { this.message = -Styles.serverNoticeAlertMessage }
+                            attrs.classes = muiClasses { message = -Styles.serverNoticeAlertMessage }
 
                             attrs.severity = AlertColor.error.unsafeCast<Union>()
                             attrs.onClose = { notifier.confirmServerNotice(serverNotice.id) }

src/jsMain/kotlin/baaahs/app/ui/ShaderCardView.kt

@@ -7,7 +7,6 @@ import baaahs.gl.preview.GadgetAdjuster
 import baaahs.show.mutable.MutablePatch
 import baaahs.ui.unaryMinus
 import baaahs.ui.xComponent
-import js.objects.jso
 import kotlinx.css.LinearDimension
 import materialui.icon
 import mui.material.*
@@ -40,7 +39,7 @@ private val ShaderCardView = xComponent<ShaderCardProps>("ShaderCard") { props -
 
     Card {
         key = mutablePatch.id
-        attrs.classes = jso { this.root = -styles.shaderCard }
+        attrs.className = -styles.shaderCard
         attrs.sx {
             maxWidth = important("initial".unsafeCast<MaxWidth>())
         }
@@ -65,9 +64,9 @@ private val ShaderCardView = xComponent<ShaderCardProps>("ShaderCard") { props -
             }
 
             CardActions {
-                attrs.classes = jso { this.root = -styles.shaderCardActions }
+                attrs.className = -styles.shaderCardActions
                 Typography {
-                    attrs.classes = jso { this.root = -styles.shaderCardContent }
+                    attrs.className = -styles.shaderCardContent
                     attrs.variant = TypographyVariant.body2
                     attrs.sx {
                         display = Display.block

src/jsMain/kotlin/baaahs/app/ui/ShaderDiagnosticsView.kt

@@ -1,10 +1,10 @@
 package baaahs.app.ui
 
 import baaahs.gl.preview.ShaderBuilder
+import baaahs.ui.muiClasses
 import baaahs.ui.unaryMinus
 import baaahs.ui.unaryPlus
 import baaahs.ui.xComponent
-import js.objects.jso
 import mui.material.Divider
 import mui.material.Popover
 import react.Props
@@ -15,19 +15,20 @@ import react.dom.div
 import react.dom.header
 import react.dom.pre
 import web.dom.Element
+import web.events.Event
 
 private val ShaderDiagnostics = xComponent<ShaderDiagnosticsProps>("ShaderDiagnostics") { props ->
 
     val glslErrors = props.builder.glslErrors
     val linkedPatch = props.builder.linkedProgram
 
     Popover {
-        attrs.classes = jso { this.paper = -ShaderPreviewStyles.errorPopup }
+        attrs.classes = muiClasses { paper = -ShaderPreviewStyles.errorPopup }
         attrs.open = props.anchor != null
         props.anchor?.let { anchor -> attrs.anchorEl = anchor }
         attrs.onClose = { event, _ ->
             props.onClose()
-            event.stopPropagation()
+            (event as Event).stopPropagation()
         }
 
         header { +"Errors:" }

src/jsMain/kotlin/baaahs/app/ui/ShowLayoutView.kt

@@ -93,7 +93,7 @@ private val ShowLayoutView = xComponent<ShowLayoutProps>("ShowLayout") { props -
 
     if (tabs.size > 1) {
         Tabs {
-            attrs.classes = jso { this.root = -styles.showTabs }
+            attrs.className = -styles.showTabs
             attrs.value = layout.currentTabIndex
             attrs.onChange = handleChangeTab
             tabs.forEachIndexed { index, tab ->

src/jsMain/kotlin/baaahs/app/ui/Styles.kt

@@ -135,6 +135,10 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         important(::color, Color.inherit)
     }
 
+    val appToolbarTabIndicator by css {
+        display = Display.none
+    }
+
     val appToolbarActions by css {
         display = Display.flex
     }
@@ -147,6 +151,7 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
     val title by css {
         display = Display.flex
         userSelect = UserSelect.none
+        color = theme.palette.text.primary.asColor().important
     }
 
     val unsaved by css {
@@ -168,6 +173,7 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         bottom = 4.px
         fontSize = .6.em
         opacity = .6
+        textWrap = TextWrap.nowrap
 
         child("svg") {
             fontSize = 1.em
@@ -186,8 +192,8 @@ class ThemeStyles(val theme: Theme) : StyleSheet("app-ui-theme", isStatic = true
         padding = Padding(5.px, 1.em)
         marginLeft = 1.em
         marginRight = 1.em
-        color = theme.palette.primary.contrastText.asColor()
-        important(::backgroundColor, theme.palette.primary.main.asColor())
+        color = theme.palette.primary.contrastText.asColor().important
+        backgroundColor = theme.palette.primary.main.asColor().important
         borderColor = theme.palette.primary.contrastText.asColor()
 
         svg {