From 2132dac284bf6acf13a9e969f00248d61cdcd665 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Tue, 1 Jun 2021 17:09:43 +0200 Subject: [PATCH] Prepare examples for the publicaiton of 0.0.0-web-dev-14 --- .../src/jsMain/kotlin/Main.kt | 6 +- .../src/jsMain/kotlin/ReactInComposeApp.kt | 22 ++-- .../kotlin/com/sample/components/Card.kt | 22 ++-- .../kotlin/com/sample/components/Layout.kt | 22 ++-- .../content/AboutComposeWebLibsSection.kt | 6 +- .../kotlin/com/sample/content/CodeSnippets.kt | 45 +++---- .../kotlin/com/sample/content/Footer.kt | 51 ++++---- .../com/sample/content/GetStartedSection.kt | 5 +- .../kotlin/com/sample/content/Header.kt | 13 +- .../kotlin/com/sample/content/IntroSection.kt | 114 ++++++++++-------- web/gradle.properties | 2 +- web/settings.gradle.kts | 1 + 12 files changed, 161 insertions(+), 148 deletions(-) diff --git a/examples/web-getting-started/src/jsMain/kotlin/Main.kt b/examples/web-getting-started/src/jsMain/kotlin/Main.kt index bfe45f90cd..074f91e8cd 100644 --- a/examples/web-getting-started/src/jsMain/kotlin/Main.kt +++ b/examples/web-getting-started/src/jsMain/kotlin/Main.kt @@ -13,18 +13,18 @@ fun main() { var count: Int by mutableStateOf(0) renderComposable(rootElementId = "root") { - Div(style = { padding(25.px) }) { + Div({ style { padding(25.px) } }) { Button(attrs = { onClick { count -= 1 } }) { Text("-") } - Span(style = { padding(15.px) }) { + Span({style { padding(15.px) }}) { Text("$count") } - Button(attrs = { + Button({ onClick { count += 1 } }) { Text("+") diff --git a/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt b/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt index 727e3e1f6c..44858349bd 100644 --- a/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt +++ b/examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt @@ -39,11 +39,11 @@ private fun ElementScope.UseReactEffect( @Composable fun YoutubeReactPlayerWrapper(videoUrl: String) { if (videoUrl.isEmpty()) return - Div( - style = { + Div({ + style { width(50.percent) } - ) { + }) { UseReactEffect(key = videoUrl) { reactPlayer { attrs.url = videoUrl @@ -70,20 +70,22 @@ fun reactInComposeAppExample() { Button( attrs = { onClick { videoUrl = url } - }, - style = { - margin(10.px) + style { + margin(10.px) + } } ) { Text("Video ${ix + 1}") } } Button( attrs = { - onClick { videoUrl = "" } + onClick { + videoUrl = "" + style { + margin(10.px) + } + } }, - style = { - margin(10.px) - } ) { Text("Reset") } YoutubeReactPlayerWrapper(videoUrl) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt index dbd07dea87..8282ff404b 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt @@ -12,10 +12,10 @@ data class LinkOnCard(val linkText: String, val linkUrl: String) @Composable private fun CardTitle(title: String, darkTheme: Boolean = false) { - H3(attrs = { - classes { - +WtTexts.wtH3 - if (darkTheme) +WtTexts.wtH3ThemeDark + H3({ + classes(WtTexts.wtH3) + if (darkTheme) { + classes(WtTexts.wtH3ThemeDark) } }) { Text(title) @@ -43,19 +43,15 @@ fun Card( wtExtraStyleClasses: List = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12), content: @Composable () -> Unit ) { - Div(attrs = { - classes { - +WtCards.wtCard - +WtOffsets.wtTopOffset24 - wtExtraStyleClasses.forEach { +it } - +if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight - } + Div({ + classes(WtCards.wtCard, WtOffsets.wtTopOffset24, *wtExtraStyleClasses.toTypedArray()) + classes(if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight) }) { - Div(attrs = { + Div({ classes(WtCards.wtCardSection, WtCards.wtVerticalFlex) }) { - Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) { + Div({ classes(WtCards.wtVerticalFlexGrow) }) { CardTitle(title = title, darkTheme = darkTheme) content() } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt index 6060d5f909..7f94261cf4 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt @@ -11,45 +11,43 @@ import com.sample.style.WtSections @Composable fun Layout(content: @Composable () -> Unit) { - Div( - style = { + Div({ + style { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) height(100.percent) margin(0.px) property("box-sizing", StylePropertyValue("border-box")) } - ) { + }) { content() } } @Composable fun MainContentLayout(content: @Composable () -> Unit) { - Main( - style = { + Main({ + style { property("flex", value("1 0 auto")) property("box-sizing", value("border-box")) } - ) { + }) { content() } } @Composable fun ContainerInSection(sectionThemeStyleClass: String? = null, content: @Composable () -> Unit) { - Section(attrs = { + Section({ if (sectionThemeStyleClass != null) { classes(WtSections.wtSection, sectionThemeStyleClass) } else { classes(WtSections.wtSection) } }) { - Div( - attrs = { - classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96) - } - ) { + Div({ + classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96) + }) { content() } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index b28a09f5e1..ad4f212d7f 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -85,8 +85,10 @@ private fun CardWithList(card: CardWithListPresentation) { classes(WtTexts.wtText2) }) { card.list.forEachIndexed { ix, it -> - Li(style = { - property("padding-top", value(24.px)) + Li({ + style { + property("padding-top", value(24.px)) + } }) { Text(it) } } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 76ee820577..d9d3539448 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -28,7 +28,7 @@ private val SimpleCounterSnippet = CodeSnippetData( }) { Text("-") } - Span(style = { padding(15.px) }) { /* we use inline style here */ + Span(attrs = { style { padding(15.px) }}) { /* we use inline style here */ Text("${"$"}{count.value}") } Button(attrs = { @@ -198,18 +198,21 @@ private var selectedSnippetIx: Int by mutableStateOf(0) @Composable fun CodeSamples() { ContainerInSection { - Div(attrs = { classes(WtRows.wtRow) }, style = { - justifyContent(JustifyContent.SpaceBetween) + Div({ + classes(WtRows.wtRow) + style { + justifyContent(JustifyContent.SpaceBetween) + } }) { - Div(attrs = { classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) { - H1(attrs = { + Div({ classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) { + H1({ classes(WtTexts.wtH2) }) { Text("Code samples") } } - Div(attrs = { classes(WtOffsets.wtTopOffsetSm24) }) { + Div({ classes(WtOffsets.wtTopOffsetSm24) }) { CodeSampleSwitcher(count = allSnippets.size, current = selectedSnippetIx) { selectedSnippetIx = it currentCodeSnippet = allSnippets[it] @@ -223,42 +226,42 @@ fun CodeSamples() { @Composable private fun TitledCodeSample(title: String, code: String) { - H3(attrs = { + H3({ classes(WtTexts.wtH3, WtOffsets.wtTopOffset48) }) { Text(title) } - Div( - attrs = { classes(WtOffsets.wtTopOffset24) }, - style = { + Div({ + classes(WtOffsets.wtTopOffset24) + style { backgroundColor(Color.RGBA(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) property("padding", value("12px 16px")) } - ) { + }) { FormattedCodeSnippet(code = code) } } @Composable fun FormattedCodeSnippet(code: String, language: String = "kotlin") { - Pre(style = { - property("max-height", value(25.em)) - property("overflow", value("auto")) - height(auto) + Pre({ + style { + property("max-height", value(25.em)) + property("overflow", value("auto")) + height(auto) + } }) { - Code( - attrs = { - classes("language-$language", "hljs") - }, - style = { + Code({ + classes("language-$language", "hljs") + style { property("font-family", value("'JetBrains Mono', monospace")) property("tab-size", value(4)) fontSize(10.pt) backgroundColor(Color("transparent")) } - ) { + }) { DomSideEffect(code) { it.setHighlightedCode(code) } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt index 6785bb8c75..68d1114c69 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt @@ -10,34 +10,38 @@ import com.sample.style.* @Composable fun PageFooter() { - Footer(style = { - flexShrink(0) - property("box-sizing", value("border-box")) + Footer({ + style { + flexShrink(0) + property("box-sizing", value("border-box")) + } }) { - Section(attrs = { + Section({ classes(WtSections.wtSectionBgGrayDark) - }, style = { - property("padding", value("24px 0")) + style { + property("padding", value("24px 0")) + } }) { - Div(attrs = { classes(WtContainer.wtContainer) }) { - Div(attrs = { + Div({ classes(WtContainer.wtContainer) }) { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter) - }, style = { - justifyContent(JustifyContent.Center) - flexWrap(FlexWrap.Wrap) + style { + justifyContent(JustifyContent.Center) + flexWrap(FlexWrap.Wrap) + } }) { - Div(attrs = { + Div({ classes(WtCols.wtColInline) }) { - P(attrs = { + P({ classes(WtTexts.wtText1, WtTexts.wtText1ThemeDark) }) { Text("Follow us") } } - Div(attrs = { + Div({ classes(WtCols.wtColInline) }) { getSocialLinks().forEach { SocialIconLink(it) } @@ -52,20 +56,21 @@ fun PageFooter() { @Composable private fun CopyrightInFooter() { - Div(attrs = { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter, WtOffsets.wtTopOffset48) - }, style = { - justifyContent(JustifyContent.SpaceEvenly) - flexWrap(FlexWrap.Wrap) - property("padding", value("0px 12px")) + style { + justifyContent(JustifyContent.SpaceEvenly) + flexWrap(FlexWrap.Wrap) + property("padding", value("0px 12px")) + } }) { - Span(attrs = { + Span({ classes(WtTexts.wtText3, WtTexts.wtTextPale) }) { Text("Copyright © 2000-2021 JetBrains s.r.o.") } - Span(attrs = { + Span({ classes(WtTexts.wtText3, WtTexts.wtTextPale) }) { Text("Developed with drive and IntelliJ IDEA") @@ -78,9 +83,7 @@ private fun SocialIconLink(link: SocialLink) { A(attrs = { classes(WtTexts.wtSocialButtonItem) target(ATarget.Blank) - }, href = link.url, style = { - - }) { + }, href = link.url) { Img(src = link.iconSvg) {} } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt index 94595de1b6..dafdb68118 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt @@ -79,8 +79,9 @@ fun GetStarted() { }) { P(attrs = { classes(WtTexts.wtText1) - }, style = { - color(Color("#fff")) + style { + color(Color("#fff")) + } }) { Text("Ready for your next adventure? Learn how to build reactive user interfaces with Compose for Web.") } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt index a1f80e1713..d74e9acdf1 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt @@ -13,12 +13,9 @@ fun Header() { Section(attrs = { classes(WtSections.wtSectionBgGrayDark) }) { - Div(attrs = { classes(WtContainer.wtContainer) }) { - Div(attrs = { + Div({ classes(WtContainer.wtContainer) }) { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeM) - }, style = { - alignItems(AlignItems.Center) - justifyContent(JustifyContent.SpaceBetween) }) { Logo() // TODO: support i18n @@ -51,13 +48,11 @@ private fun LanguageButton() { Button(attrs = { classes(WtTexts.wtButton, WtTexts.wtLangButton) onClick { window.alert("Oops! This feature is yet to be implemented") } - }, style = { - property("cursor", value("pointer")) }) { - Img(src = "ic_lang.svg", style = { + Img(src = "ic_lang.svg", attrs = { style { property("padding-left", value(8.px)) property("padding-right", value(8.px)) - }) {} + }}) {} Text("English") } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index 3b17eb0841..9a0c2006c4 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -14,19 +14,20 @@ import org.w3c.dom.HTMLElement @Composable fun Intro() { ContainerInSection { - Div(attrs = { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter) }) { - Div(attrs = { + Div({ classes(WtCols.wtCol2, WtCols.wtColMd3) - }, style = { - alignSelf(AlignSelf.Start) + style { + alignSelf(AlignSelf.Start) + } }) { Img(src = "i1.svg", attrs = { classes(AppStylesheet.composeLogo) }) {} } - Div(attrs = { + Div({ classes( WtCols.wtCol10, WtCols.wtColMd8, @@ -36,10 +37,13 @@ fun Intro() { }) { H1(attrs = { classes(WtTexts.wtHero) }) { Text("Compose for ") - Span(style = { - display(DisplayStyle.InlineBlock) - property("white-space", value("nowrap")) - }, attrs = { classes(WtTexts.wtHero) }) { + Span({ + classes(WtTexts.wtHero) + style { + display(DisplayStyle.InlineBlock) + property("white-space", value("nowrap")) + } + }) { Text("Web") Span(attrs = { classes(AppStylesheet.composeTitleTag) }) { @@ -47,7 +51,7 @@ fun Intro() { } } } - Div(attrs = { + Div({ classes(WtDisplay.wtDisplayMdNone) }) { IntroAboutComposeWeb() @@ -66,14 +70,14 @@ fun Intro() { @Composable private fun IntroAboutComposeWeb() { - Div(attrs = { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeM) }) { - Div(attrs = { + Div({ classes(WtCols.wtCol9, WtCols.wtColMd9, WtCols.wtColSm12) }) { - P(attrs = { classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) { + P({ classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) { Text("Reactive web UIs for Kotlin, based on Google's ") A(href = "https://developer.android.com/jetpack/compose", attrs = { @@ -86,15 +90,15 @@ private fun IntroAboutComposeWeb() { Text(" and brought to you by JetBrains") } - P(attrs = { + P({ classes(WtTexts.wtText1, WtOffsets.wtTopOffset24) }) { - Text( - "Compose for Web simplifies and accelerates UI development for web applications, " + - "and aims to enable UI code sharing between web, desktop, and Android applications " + - "in the future. Currently in technology preview." - ) - } + Text( + "Compose for Web simplifies and accelerates UI development for web applications, " + + "and aims to enable UI code sharing between web, desktop, and Android applications " + + "in the future. Currently in technology preview." + ) + } ComposeWebStatusMessage() @@ -115,14 +119,18 @@ private fun IntroAboutComposeWeb() { @Composable private fun IntroCodeSample() { - Div(style = { - marginTop(24.px) - backgroundColor(Color.RGBA(39, 40, 44, 0.05)) - borderRadius(8.px) - property("font-family", value("'JetBrains Mono', monospace")) + Div({ + style { + marginTop(24.px) + backgroundColor(Color.RGBA(39, 40, 44, 0.05)) + borderRadius(8.px) + property("font-family", value("'JetBrains Mono', monospace")) + } }) { - Div(style = { - property("padding", value("12px 16px")) + Div({ + style { + property("padding", value("12px 16px")) + } }) { FormattedCodeSnippet( code = """ @@ -138,10 +146,12 @@ private fun IntroCodeSample() { ) } - Hr(style = { - height(1.px) - border(width = 0.px) - backgroundColor(Color.RGBA(39, 40, 44, 0.15)) + Hr({ + style { + height(1.px) + border(width = 0.px) + backgroundColor(Color.RGBA(39, 40, 44, 0.15)) + } }) IntroCodeSampleResult() @@ -150,24 +160,26 @@ private fun IntroCodeSample() { @Composable private fun IntroCodeSampleResult() { - Div(style = { - property("padding", value("12px 16px")) - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Row) - alignItems(AlignItems.Center) + Div({ + style { + property("padding", value("12px 16px")) + display(DisplayStyle.Flex) + flexDirection(FlexDirection.Row) + alignItems(AlignItems.Center) + } }) { - Span( - attrs = { classes(WtTexts.wtText2) }, - style = { + Span({ + classes(WtTexts.wtText2) + style { property("margin-right", value(8.px)) } - ) { + }) { Text("Result:") } fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random() - Div(attrs = { + Div({ id("greetingContainer") }) { var greeting by remember { mutableStateOf(greet()) } @@ -180,22 +192,24 @@ private fun IntroCodeSampleResult() { @Composable private fun ComposeWebStatusMessage() { - Div(attrs = { + Div({ classes(WtRows.wtRow, WtRows.wtRowSizeXs, WtOffsets.wtTopOffset24) }) { - Div(attrs = { + Div({ classes(WtCols.wtColInline) }) { - Img(src = "ic_info.svg", style = { - width(24.px) - height(24.px) + Img(src = "ic_info.svg", attrs = { + style { + width(24.px) + height(24.px) + } }) {} } - Div(attrs = { + Div({ classes(WtCols.wtColAutoFill) }) { - P(attrs = { + P({ classes(WtTexts.wtText3) }) { Text( @@ -211,13 +225,11 @@ private fun ComposeWebStatusMessage() { @Composable inline fun Hr( - crossinline attrs: (AttrsBuilder.() -> Unit) = {}, - crossinline style: (StyleBuilder.() -> Unit) = {}, + crossinline attrs: (AttrsBuilder.() -> Unit) = {} ) { TagElement( tagName = "hr", applyAttrs = attrs, - applyStyle = style, content = { } ) } \ No newline at end of file diff --git a/web/gradle.properties b/web/gradle.properties index 159e3b6529..4de4056726 100644 --- a/web/gradle.properties +++ b/web/gradle.properties @@ -1,3 +1,3 @@ COMPOSE_CORE_VERSION=0.0.12-SNAPSHOT COMPOSE_WEB_VERSION=0.0.12-SNAPSHOT -COMPOSE_BUILD_WITH_EXAMPLES=false +COMPOSE_WEB_BUILD_WITH_EXAMPLES=false diff --git a/web/settings.gradle.kts b/web/settings.gradle.kts index a3e62c0bf1..72508b20c8 100644 --- a/web/settings.gradle.kts +++ b/web/settings.gradle.kts @@ -37,4 +37,5 @@ if (extra["COMPOSE_WEB_BUILD_WITH_EXAMPLES"]!!.toString().toBoolean() == true) { module(":examples:falling_balls_with_web", "../examples/falling_balls_with_web") module(":examples:web_landing", "../examples/web_landing") module(":examples:web-with-react", "../examples/web-with-react") + module(":examples:web-getting-started", "../examples/web-getting-started") }