Merge pull request #16 from huanshankeji/material-3

Add some Material 3 composables, support some additional features, and revamp some existing ones

Author: ShreckYe

README.md

@@ -3,7 +3,7 @@
 [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-material)](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*)
 ![Kotlin version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=com.huanshankeji&name=compose-multiplatform-material)
 
-Some simple unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose.material` (officially supported on Android, desktop (JVM), iOS, web (Kotlin/Wasm)) and Compose HTML (mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) and [KMDC](https://github.com/mpetuska/kmdc))
+Some simple unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose.material` (officially supported on Android, desktop (JVM), iOS, web (Kotlin/Wasm)) and Compose HTML (mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) [Compose](https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose), [KMDC](https://github.com/mpetuska/kmdc), and [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) (which is then based on [Material Web](https://github.com/material-components/material-web)))
 
 <!-- a set of APIs for Compose HTML similar to those in `androidx.compose.material` -->
 
@@ -52,6 +52,10 @@ This project is prototype and there is no documentation yet. Check out [the demo
 - `RadioRow`
 - `RadioGroupRow`
 
+#### Material 3 components
+
+- `Button`
+
 #### Components in the `ext` packages
 
 The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs.
@@ -102,6 +106,10 @@ repositories {
 }
 ```
 
+### Material Symbols & Icons on JS
+
+See [the corresponding section in Compose HTML Material]() for Material Icons on JS.
+
 ## About Kobweb Silk
 
 The Kotlin/JS (Compose HTML) portion of this project depends on [Kobweb Compose](https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/README.md) of [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) which is a UI layer built upon Compose HTML that provides `Modifier` (type-safe CSS API wrappers) and layout APIs. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML, especially if you need to customize the components further on Kotlin/JS (Compose HTML):

buildSrc/src/main/kotlin/VersionsAndDependencies.kt

@@ -1,9 +1,11 @@
-val projectVersion = "0.2.0-SNAPSHOT"
+import org.jetbrains.compose.ComposeBuildConfig
+
+val projectVersion = "0.3.0-SNAPSHOT"
 
 object DependencyVersions {
-    val composeMultiplatform = "1.6.2" // manually specified for "ui-unit"
+    const val composeMultiplatform = ComposeBuildConfig.composeVersion // for "ui-unit"
     val kobweb = "0.17.3"
-    val huanshankejiComposeWeb = "0.2.2"
+    val huanshankejiComposeHtml = "0.3.0"
     val kmdc = "0.1.2"
 
     object Androidx {

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

@@ -1,3 +1,4 @@
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
@@ -35,4 +36,10 @@ kotlin {
     // for JS and HTML wrappers
 
     js()
+
+
+    @OptIn(ExperimentalKotlinGradlePluginApi::class)
+    compilerOptions {
+        freeCompilerArgs.add("-Xexpect-actual-classes")
+    }
 }

compose-multiplatform-common/build.gradle.kts

@@ -38,6 +38,7 @@ kotlin {
                 api(compose.html.core)
                 // see: https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/build.gradle.kts
                 api("com.varabyte.kobweb:kobweb-compose:${DependencyVersions.kobweb}")
+                implementation("com.huanshankeji:compose-html-common:${DependencyVersions.huanshankejiComposeHtml}")
             }
         }
     }

compose-multiplatform-common/legacy/build.gradle.kts

@@ -22,7 +22,7 @@ kotlin {
             dependencies {
                 implementation(compose.html.core)
 
-                api("com.huanshankeji:compose-web-common:${DependencyVersions.huanshankejiComposeWeb}")
+                api("com.huanshankeji:compose-html-common:${DependencyVersions.huanshankejiComposeHtml}")
             }
         }
     }
@@ -33,7 +33,7 @@ publishing.publications.withType<MavenPublication> {
         project,
         "Legacy Compose Multiplatform common wrappers",
         "Legacy common wrappers of components (including layouts) and styles for Compose Multiplatform on (desktop/Android and web)\n" +
-                "This legacy module depends on `com.huanshankeji:compose-web-common` instead of Kobweb Silk " +
+                "This legacy module depends on `com.huanshankeji:compose-html-common` instead of Kobweb Silk " +
                 "and its components use the `ModifierOrAttrsScope` class to configure styles."
     ) {
         `Shreck Ye`()

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/Content.androidxCommon.kt

@@ -0,0 +1,10 @@
+package com.huanshankeji.compose
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Modifier
+
+fun (@Composable (Modifier) -> Unit).toContentWithoutModifier(): @Composable () -> Unit =
+    { this(Modifier) }
+
+fun (@Composable (Modifier) -> Unit)?.toNullableContentWithoutModifier(): @Composable (() -> Unit)? =
+    this?.toContentWithoutModifier()

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.androidxCommon.kt

@@ -0,0 +1,19 @@
+package com.huanshankeji.compose.foundation
+
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Modifier
+
+@Composable
+actual fun rememberScrollState(initial: Int): ScrollState =
+    rememberScrollState(initial)
+
+actual typealias ScrollState = androidx.compose.foundation.ScrollState
+
+actual fun Modifier.verticalScroll(state: ScrollState): Modifier =
+    platformModify { verticalScroll(state) }
+
+actual fun Modifier.horizontalScroll(state: ScrollState): Modifier =
+    platformModify { horizontalScroll(state) }

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.androidxCommon.kt

@@ -1,11 +1,11 @@
 package com.huanshankeji.compose.foundation.layout
 
+import androidx.annotation.FloatRange
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import kotlin.jvm.JvmInline
-import androidx.compose.foundation.layout.ColumnScope as PlatformColumnScope
 
 @Composable
 actual fun Column(
@@ -18,14 +18,25 @@ actual fun Column(
         modifier.platformModifier,
         verticalArrangement.platformValue,
         horizontalAlignment.platformHorizontal,
-    ) { ColumnScope.Impl(this).content() }
+        content.toCommonColumnScopeContent()
+    )
+
+
+actual typealias PlatformColumnScope = androidx.compose.foundation.layout.ColumnScope
 
 //@LayoutScopeMarker
 actual interface ColumnScope {
-    val platformValue: PlatformColumnScope
+    actual val platformValue: PlatformColumnScope
 
     @JvmInline
-    value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
+    actual value class Impl(override val platformValue: PlatformColumnScope) : ColumnScope
+
+    @Stable
+    actual fun Modifier.weight(
+        @FloatRange(from = 0.0, fromInclusive = false)
+        weight: Float
+    ): Modifier =
+        with(platformValue) { platformModify { weight(weight) } }
 
     @Stable
     actual fun Modifier.align(alignment: Alignment.Horizontal): Modifier =

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.androidxCommon.kt

@@ -1,11 +1,11 @@
 package com.huanshankeji.compose.foundation.layout
 
+import androidx.annotation.FloatRange
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import com.huanshankeji.compose.ui.Alignment
 import com.huanshankeji.compose.ui.Modifier
 import kotlin.jvm.JvmInline
-import androidx.compose.foundation.layout.RowScope as PlatformRowScope
 
 @Composable
 actual fun Row(
@@ -18,14 +18,24 @@ actual fun Row(
         modifier.platformModifier,
         horizontalArrangement.platformValue,
         verticalAlignment.platformHorizontal,
-    ) { RowScope.Impl(this).content() }
+        content.toPlatformRowScopeContent(),
+    )
+
+
+actual typealias PlatformRowScope = androidx.compose.foundation.layout.RowScope
 
 //@LayoutScopeMarker
 actual interface RowScope {
-    val platformValue: PlatformRowScope
+    actual val platformValue: PlatformRowScope
 
     @JvmInline
-    value class Impl(override val platformValue: PlatformRowScope) : RowScope
+    actual value class Impl(override val platformValue: PlatformRowScope) : RowScope
+
+    actual fun Modifier.weight(
+        @FloatRange(from = 0.0, fromInclusive = false)
+        weight: Float
+    ): Modifier =
+        with(platformValue) { platformModify { weight(weight) } }
 
     @Stable
     actual fun Modifier.align(alignment: Alignment.Vertical): Modifier =

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.androidxCommon.kt

@@ -0,0 +1,57 @@
+package com.huanshankeji.compose.foundation.lazy
+
+import androidx.compose.foundation.lazy.LazyScopeMarker
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.foundation.layout.Arrangement
+import com.huanshankeji.compose.ui.Alignment
+import com.huanshankeji.compose.ui.Modifier
+
+@LazyScopeMarker
+//@JvmDefaultWithCompatibility
+actual class LazyListScope(val platformValue: androidx.compose.foundation.lazy.LazyListScope) {
+    actual fun item(
+        key: Any?,
+        contentType: Any?,
+        content: @Composable LazyItemScope.() -> Unit
+    ) =
+        platformValue.item(key, contentType) { LazyItemScope(this).content() }
+
+
+    actual fun items(
+        count: Int,
+        key: ((index: Int) -> Any)?,
+        contentType: (index: Int) -> Any?,
+        itemContent: @Composable LazyItemScope.(index: Int) -> Unit
+    ) =
+        platformValue.items(count, key, contentType) { index -> LazyItemScope(this).itemContent(index) }
+}
+
+@Composable
+actual fun LazyRow(
+    modifier: Modifier,
+    reverseLayout: Boolean,
+    horizontalArrangement: Arrangement.Horizontal,
+    verticalAlignment: Alignment.Vertical,
+    content: LazyListScope.() -> Unit
+) =
+    androidx.compose.foundation.lazy.LazyRow(
+        modifier.platformModifier,
+        reverseLayout = reverseLayout,
+        horizontalArrangement = horizontalArrangement.platformValue,
+        verticalAlignment = verticalAlignment.platformHorizontal
+    ) { LazyListScope(this).content() }
+
+@Composable
+actual fun LazyColumn(
+    modifier: Modifier,
+    reverseLayout: Boolean,
+    verticalArrangement: Arrangement.Vertical,
+    horizontalAlignment: Alignment.Horizontal,
+    content: LazyListScope.() -> Unit
+) =
+    androidx.compose.foundation.lazy.LazyColumn(
+        modifier.platformModifier,
+        reverseLayout = reverseLayout,
+        verticalArrangement = verticalArrangement.platformValue,
+        horizontalAlignment = horizontalAlignment.platformHorizontal
+    ) { LazyListScope(this).content() }