Add a demo project and extract common Gradle conventions, meanwhile improve TopAppBarScaffold and Material icons

Author: ShreckYe

buildSrc/build.gradle.kts

@@ -0,0 +1,17 @@
+plugins {
+    `kotlin-dsl`
+}
+
+repositories {
+    gradlePluginPortal()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+    google()
+}
+
+dependencies {
+    implementation(kotlin("gradle-plugin", "1.7.20"))
+    implementation("org.jetbrains.compose:compose-gradle-plugin:1.2.1")
+    implementation("com.huanshankeji.team:gradle-plugins:0.3.2") {
+        exclude("org.jetbrains.kotlin")
+    }
+}

buildSrc/src/main/kotlin/common-conventions.gradle.kts

@@ -0,0 +1,16 @@
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+repositories {
+    mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+    google()
+}
+
+kotlin {
+    jvm() // TODO: `jvm("desktop")`?
+    // TODO: `android()`?
+    js(IR)
+}

compose-multiplatform-material/build.gradle.kts

@@ -1,26 +1,13 @@
 plugins {
-    kotlin("multiplatform")
-    id("org.jetbrains.compose") version "1.2.1"
+    `common-conventions`
     // TODO: `id("com.android.library") version "7.2.2"`?
     id("com.huanshankeji.kotlin-multiplatform-jvm-and-js-browser-sonatype-ossrh-publish-conventions")
 }
 
 group = "com.huanshankeji"
 version = "0.1.0-SNAPSHOT"
 
-repositories {
-    mavenCentral()
-    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
-    google()
-}
-
 kotlin {
-    jvm() // TODO: `jvm("desktop")`?
-    // TODO: `android()`?
-    js(IR) {
-        browser()
-    }
-
     sourceSets {
         val commonMain by getting {
             dependencies {

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/Components.kt

@@ -0,0 +1,6 @@
+package com.huanshankeji.compose
+
+import androidx.compose.runtime.Composable
+
+@Composable
+expect fun Text(text: String)

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/Components.kt

@@ -1,6 +1,7 @@
 package com.huanshankeji.compose.material
 
 import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.material.icon.MaterialIcon
 
 expect /*value*/ class ButtonScope {
     @Composable
@@ -11,11 +12,34 @@ expect /*value*/ class ButtonScope {
 expect fun Button(onClick: () -> Unit, content: @Composable ButtonScope.() -> Unit)
 
 
-//expect class TopAppBarActionsScope
+@Composable
+expect fun Icon(materialIcon: MaterialIcon)
+
+
+@Composable
+expect fun IconButton(onClick: () -> Unit, content: @Composable () -> Unit)
+
+
+expect class NavigationIconScope {
+    @Composable
+    fun NavButton(onClick: () -> Unit, content: @Composable () -> Unit)
+
+    @Composable
+    fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon)
+}
+
+expect class TopAppBarActionsScope {
+    @Composable
+    fun ActionButton(onClick: () -> Unit, content: @Composable () -> Unit)
+
+    @Composable
+    fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon)
+}
+
 @Composable
 expect fun TopAppBarScaffold(
     title: @Composable () -> Unit,
-    navigationIcon: @Composable (() -> Unit)? = null,
-    actions: @Composable /*TopAppBarActionsScope.*/() -> Unit = {},
+    navigationIcon: @Composable (NavigationIconScope.() -> Unit)? = null,
+    actions: @Composable TopAppBarActionsScope.() -> Unit = {},
     content: @Composable () -> Unit
 )

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/icon/MaterialIcons.kt

@@ -0,0 +1,8 @@
+package com.huanshankeji.compose.material.icon
+
+expect class MaterialIcon
+
+expect object MaterialIcons {
+    val Menu : MaterialIcon
+    val Search : MaterialIcon
+}

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/icons/Icons.kt

@@ -0,0 +1,7 @@
+package com.huanshankeji.compose
+
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun Text(text: String) =
+    org.jetbrains.compose.web.dom.Text(text)

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/Text.kt

@@ -1,10 +1,15 @@
 package com.huanshankeji.compose.material
 
 import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.material.icon.MaterialIcon
 import dev.petuska.kmdc.button.Label
 import dev.petuska.kmdc.button.MDCButton
 import dev.petuska.kmdc.button.MDCButtonScope
+import dev.petuska.kmdc.icon.button.MDCIconButton
 import dev.petuska.kmdc.top.app.bar.*
+import dev.petuska.kmdcx.icons.MDCIconSpan
+import dev.petuska.kmdcx.icons.mdcIcon
+import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.HTMLButtonElement
 
 actual class ButtonScope(val mdcButtonScope: MDCButtonScope<HTMLButtonElement>) {
@@ -18,18 +23,56 @@ actual fun Button(onClick: () -> Unit, content: @Composable ButtonScope.() -> Un
     MDCButton(attrs = { onClick { onClick() } }) { ButtonScope(this).content() }
 
 
+/**
+ * There is often a better alternative of adding the CSS rule to the parent element to using this composable directly.
+ */
+@Composable
+actual fun Icon(materialIcon: MaterialIcon) =
+    MDCIconSpan(materialIcon.mdcIcon)
+
+
+@Composable
+actual fun IconButton(onClick: () -> Unit, content: @Composable () -> Unit) =
+    MDCIconButton(attrs = {
+        onClick { onClick() }
+    }) { content() }
+
+
+actual class NavigationIconScope(val mdcTopAppBarSectionScope: MDCTopAppBarSectionScope) {
+    @Composable
+    actual fun NavButton(onClick: () -> Unit, content: @Composable () -> Unit) =
+        mdcTopAppBarSectionScope.NavButton(attrs = { onClick { onClick() } }) { content() }
+
+    @Composable
+    actual fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon) =
+        mdcTopAppBarSectionScope.NavButton(attrs = { mdcIcon() }) { Text(materialIcon.mdcIcon.type) }
+}
+
+actual class TopAppBarActionsScope(val mdcTopAppBarSectionScope: MDCTopAppBarSectionScope) {
+    @Composable
+    actual fun ActionButton(onClick: () -> Unit, content: @Composable () -> Unit) =
+        mdcTopAppBarSectionScope.ActionButton(attrs = { onClick { onClick() } }) { content() }
+
+    @Composable
+    actual fun MaterialIconActionButton(
+        onClick: () -> Unit,
+        materialIcon: MaterialIcon
+    ) =
+        mdcTopAppBarSectionScope.ActionButton(attrs = { mdcIcon() }) { Text(materialIcon.mdcIcon.type) }
+}
+
 @Composable
 actual fun TopAppBarScaffold(
     title: @Composable () -> Unit,
-    navigationIcon: @Composable (() -> Unit)?,
-    actions: @Composable () -> Unit,
+    navigationIcon: @Composable (NavigationIconScope.() -> Unit)?,
+    actions: @Composable TopAppBarActionsScope.() -> Unit,
     content: @Composable () -> Unit
 ) =
     MDCTopAppBar {
         TopAppBar {
             Row {
                 Section(align = MDCTopAppBarSectionAlign.Start) {
-                    navigationIcon?.let { NavButton { it() } }
+                    navigationIcon?.let { NavButton { NavigationIconScope(this@Section).it() } }
                     Title { title() }
                 }
                 Section(
@@ -38,7 +81,7 @@ actual fun TopAppBarScaffold(
                         attr("role", "toolbar")
                     }
                 ) {
-                    actions()
+                    TopAppBarActionsScope(this).actions()
                 }
             }
         }

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/Components.kt

@@ -0,0 +1,10 @@
+package com.huanshankeji.compose.material.icon
+
+import dev.petuska.kmdcx.icons.MDCIcon
+
+actual class MaterialIcon(val mdcIcon: MDCIcon)
+
+actual object MaterialIcons {
+    actual val Menu = MaterialIcon(MDCIcon.Menu)
+    actual val Search = MaterialIcon(MDCIcon.Search)
+}