web: update web examples to 1.0.0-rc12 (#1517)

* web: move web-landing to 1.0.0-rc12

* web: move falling-balls-web to 1.0.0-rc12

* web: move web-compose-bird to 1.0.0-rc12

* web: move web-with-react example to 1.0.0-rc12

* web: update todoapp to 1.0.0-rc12

* web: use 1.0.0-rc12 in examples

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

examples/falling-balls-web/build.gradle.kts

@@ -4,7 +4,7 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
     kotlin("multiplatform") version "1.5.31"
-    id("org.jetbrains.compose") version "1.0.0-beta5"
+    id("org.jetbrains.compose") version "1.0.0-rc12"
 }
 
 version = "1.0-SNAPSHOT"

examples/todoapp/web/build.gradle.kts

@@ -38,5 +38,6 @@ kotlin {
 afterEvaluate {
     rootProject.extensions.configure<NodeJsRootExtension> {
         versions.webpackDevServer.version = "4.0.0"
+        versions.webpackCli.version = "4.9.0"
     }
 }

examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt

@@ -2,8 +2,8 @@ package example.todo.web
 
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.common.material.Text
+import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
 import org.jetbrains.compose.web.attributes.InputType
-import org.jetbrains.compose.web.attributes.checked
 import org.jetbrains.compose.web.css.AlignItems
 import org.jetbrains.compose.web.css.DisplayStyle
 import org.jetbrains.compose.web.css.JustifyContent
@@ -42,7 +42,7 @@ fun MaterialCheckbox(
                 type = InputType.Checkbox,
                 attrs = {
                     classes("filled-in")
-                    if (checked) checked()
+                    checked(checked)
                     onChange { onCheckedChange(it.value) }
                 }
             )
@@ -66,6 +66,7 @@ fun Card(attrs: AttrBuilderContext<*> = {}, content: @Composable () -> Unit) {
     }
 }
 
+@OptIn(ExperimentalComposeWebWidgetsApi::class)
 @Composable
 fun MaterialTextArea(
     id: String,

examples/web-compose-bird/build.gradle.kts

@@ -2,7 +2,7 @@ import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 
 plugins {
     kotlin("multiplatform") version "1.5.31"
-    id("org.jetbrains.compose") version "1.0.0-beta5"
+    id("org.jetbrains.compose") version "1.0.0-rc12"
 }
 group = "com.theapache64.composebird"
 version = "1.0.0-alpha01"

examples/web-landing/build.gradle.kts

@@ -2,7 +2,7 @@ import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 
 plugins {
     kotlin("multiplatform") version "1.5.31"
-    id("org.jetbrains.compose") version "1.0.0-beta5"
+    id("org.jetbrains.compose") version "1.0.0-rc12"
 }
 
 repositories {

examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@@ -4,9 +4,6 @@ import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.name
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.CSSSelector
-import org.jetbrains.compose.web.css.selectors.descendant
-import org.jetbrains.compose.web.css.selectors.selector
 import org.jetbrains.compose.web.dom.Form
 import org.jetbrains.compose.web.dom.Input
 import org.jetbrains.compose.web.dom.Label
@@ -28,7 +25,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
             }
         }
 
-        descendant(self, CSSSelector.Type("label")) style {
+        desc(self, type("label")) style {
             display(DisplayStyle.InlineBlock)
             width(SwitcherVariables.labelWidth.value(56.px))
             padding(SwitcherVariables.labelPadding.value(10.px))
@@ -53,11 +50,14 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
             borderRadius(22.px, 22.px, 22.px)
         }
 
-        descendant(self, selector("input[type=\"radio\"]")) style {
+        type("input") + attrEquals(name = "type", value = "radio") style {
             display(DisplayStyle.None)
         }
 
-        descendant(self, selector("input[type=\"radio\"]:checked + label")) style {
+        adjacent(
+            sibling = type("input") + attrEquals(name = "type", value = "radio") + checked,
+            selected = type("label")
+        ) style {
             border {
                 style(LineStyle.Solid)
                 width(3.px)

examples/web-landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@@ -58,7 +58,7 @@ object AppStylesheet : StyleSheet() {
             )
         }
 
-        CSSSelector.Universal style {
+        universal style {
             AppCSSVariables.wtColorGreyLight(Color("#f4f4f4"))
             AppCSSVariables.wtColorGreyDark(Color("#323236"))
             AppCSSVariables.wtOffsetTopUnit(24.px)
@@ -67,16 +67,15 @@ object AppStylesheet : StyleSheet() {
         }
 
         media(mediaMaxWidth(640.px)) {
-            CSSSelector.Universal style {
+            universal style {
                 AppCSSVariables.wtOffsetTopUnit(16.px)
                 AppCSSVariables.wtFlowUnit(16.px)
             }
         }
 
-        CSSSelector.Attribute(
+        attrContains(
             name = "class",
-            value = "wtCol",
-            operator = CSSSelector.Attribute.Operator.Contains
+            value = "wtCol"
         ) style {
             marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
             marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())

examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt

@@ -1,7 +1,6 @@
 package com.sample.style
 
 import org.jetbrains.compose.web.css.*
-import org.jetbrains.compose.web.css.selectors.hover
 
 object WtTexts : StyleSheet(AppStylesheet) {
 

examples/web-with-react/build.gradle.kts

@@ -1,7 +1,7 @@
 import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
 plugins {
 	kotlin("multiplatform") version "1.5.31"
-	id("org.jetbrains.compose") version "1.0.0-beta5"
+	id("org.jetbrains.compose") version "1.0.0-rc12"
 }
 
 repositories {