Web/update tutorials and examples (#942)

* web: Update tutorials (to use 0.5.0-build270)

* web: Update examples (to use 0.5.0-build270 and kotlin 1.5.21)

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

tutorials/Web/Building_UI/README.md

@@ -1,6 +1,6 @@
 # Building the UI with Compose Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 
@@ -62,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
 
 ``` kotlin
 Span(
-    attrs = { style { color("red") } } // inline style
+    attrs = { style { color(Color.red) } } // inline style
 ) {
     Text("Red text")
 }
@@ -202,7 +202,7 @@ fun main() {
         Text("Arbitrary text")
 
         Span({
-            style { color("red") } // inline style
+            style { color(Color.red) } // inline style
         }) {
             Text("Red text")
         }

tutorials/Web/Events_Handling/README.md

@@ -1,6 +1,6 @@
 # Events handling in Compose Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 You can add event listeners in the `attrs` block:
 
@@ -8,11 +8,11 @@ You can add event listeners in the `attrs` block:
 ``` kotlin
 Button(
     attrs = {
-        onClick { wrappedMouseEvent -> 
-            // wrappedMouseEvent is of `WrappedMouseEvent` type    
-            println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
+        onClick { event -> 
+            // event is of `SyntheticMouseEvent` type    
+            println("button clicked at ${event.movementX}, ${event.movementY}")
             
-            val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
+            val nativeEvent = event.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
         }
     }
 ) {
@@ -37,22 +37,19 @@ TextArea(
 
 #### Other event handlers
 
-For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
+For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `SyntheticEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event:
 
 ``` kotlin
 Form(attrs = {
     this.addEventListener("submit") {
         console.log("Hello, Submit!")
-        it.nativeEvent.preventDefault()
+        it.preventDefault()
     }
 })
 ```
 
-Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime -
-https://developer.mozilla.org/en-US/docs/Web/API/Event
 
-
-There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt).
+There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt).
 
 
 ### Runnable example
@@ -67,11 +64,8 @@ fun main() {
     renderComposable(rootElementId = "root") {
         Button(
             attrs = {
-                onClick { wrappedMouseEvent ->
-                    // wrappedMouseEvent is of `WrappedMouseEvent` type
-                    println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
-
-                    val nativeEvent = wrappedMouseEvent.nativeEvent
+                onClick { event ->
+                    println("button clicked at ${event.movementX}, ${event.movementY}")
                 }
             }
         ) {

tutorials/Web/Getting_Started/README.md

@@ -1,6 +1,6 @@
 # Getting Started With Compose for Web
 
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 
@@ -42,8 +42,8 @@ pluginManagement {
 ``` kotlin
 // Add compose gradle plugin
 plugins {
-    kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build228"
+    kotlin("multiplatform") version "1.5.21"
+    id("org.jetbrains.compose") version "0.5.0-build270"
 }
 
 // Add maven repositories

tutorials/Web/README.md

@@ -1,5 +1,5 @@
 # Compose for Web
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ### Content:
 

tutorials/Web/Style_Dsl/README.md

@@ -1,5 +1,5 @@
 # Style DSL in Compose Web
-**The API is experimental, and breaking changes can be expected**
+**The API is not finalized, and breaking changes can be expected**
 
 ## Introduction
 In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application.
@@ -101,11 +101,11 @@ object AppStylesheet : StyleSheet() {
     // A convenient way to create a class selector
     // AppStylesheet.container can be used as a class in component attrs
     val container by style {
-        color("red")
+        color(Color.red)
         
         // hover selector for a class
         self + hover() style { // self is a selector for `container`
-            color("green")
+            color(Color.green)
         }
     }
 }
@@ -135,9 +135,9 @@ object AppStylesheet : StyleSheet() {
 The style DSL also provides support for CSS variables.
 
 ``` kotlin
-object MyVariables : CSSVariables {
+object MyVariables {
     // declare a variable
-    val contentBackgroundColor by variable<Color>() 
+    val contentBackgroundColor by variable<CSSColorValue>()
 }
 
 object MyStyleSheet: StyleSheet() {
@@ -169,6 +169,30 @@ import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.renderComposable
 
+object MyVariables {
+    // declare a variable
+    val contentBackgroundColor by variable<CSSColorValue>()
+}
+
+object MyStyleSheet: StyleSheet() {
+
+    val container by style {
+        //set variable's value for the `container` scope
+        MyVariables.contentBackgroundColor(Color("blue"))
+    }
+
+    val content by style {
+        // get the value
+        backgroundColor(MyVariables.contentBackgroundColor.value())
+    }
+
+    val contentWithDefaultBgColor by style {
+        // default value can be provided as well
+        // default value is used when the value is not previously set
+        backgroundColor(MyVariables.contentBackgroundColor.value(Color("#333")))
+    }
+}
+
 object AppStylesheet : StyleSheet() {
     val container by style { // container is a class
         display(DisplayStyle.Flex)