Merge branch 'main' into release

v0.2.0 release

README.md

@@ -3,25 +3,36 @@
 [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-web-material)](https://search.maven.org/artifact/com.huanshankeji/compose-web-material)
 [![Gradle Plugin Portal](https://img.shields.io/gradle-plugin-portal/v/com.huanshankeji.compose-web-material-conventions)](https://plugins.gradle.org/plugin/com.huanshankeji.compose-web-material-conventions)
 
-Some Material components for Compose for Web, based on [Material Web (Web Components)](https://github.com/material-components/material-web) (preferred) and [Material Components for the web](https://github.com/material-components/material-components-web) (fallback)
+Some Material components for Compose for Web, based on [Material Web (with Web Components) (or material-web, or `mwc`)](https://github.com/material-components/material-web) (preferred) and [Material Components for the web (or material-components-web, or `mdc`)](https://github.com/material-components/material-components-web) (fallback)
 
-This project is in prototype and the components are not complete. More components will be added. It will probably go through huge refactors and API changes, too.
+~~This project is in prototype and the components are not complete. More components will be added. It will probably go through huge refactors and API changes, too.~~
+
+**This project is not currently under active development. Here is a list of reasons and alternatives:**
+
+1. The [material-web](https://github.com/material-components/material-web) team is working on Material You (Material Design 3) support and [the Material 2 branch (`mwc`)](https://github.com/material-components/material-web/tree/mwc) is no longer under active development. Existing Compose wrappers of their Material 2 components are still kept in [the `:compose-web-material` subproject](compose-web-material) but not updated.
+1. [KMDC](https://github.com/mpetuska/kmdc) wrapping around [material-components-web (`mdc`)](https://github.com/material-components/material-components-web) provides a much more complete set of Material Design components for Compose for Web.
+1. We are currently focusing more on [compose-multiplatform-material](https://github.com/huanshankeji/compose-multiplatform-material) to provide multiplatform Compose Material wrappers, whose web portion depends on KMDC and [the `:compose-web-common` subproject](compose-web-common), which may be occasionally updated for the dependent project.
 
 ## Instructions on how to use
+
 Some configurations are needed to use this library due to the immaturities of this project and Kotlin/JS.
 
 ### Add the dependency
+
 ```kotlin
 implementation("com.huanshankeji:compose-web-material:$version")
 ```
 
 ### In code
+
 Call `mwcRequires()` in your `main` function before calling any component Composable functions.
 
 ### Kotlin/JS Webpack configuration
+
 If you use this library in an app project with Webpack [which Kotlin/JS currently uses](https://kotlinlang.org/docs/js-project-setup.html), you might want to configure it as recommended by Material Web and Material Components for the web. Some instructions on how to do this simply are as below.
 
 This plugin helps add the dependency to this project (if you do this you can skip the "Add the dependency" step above) and the `devNpm` dependencies:
+
 ```kotlin
 plugins {
     id("com.huanshankeji.compose-web-material-conventions") version someVersion

buildSrc/build.gradle.kts

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

buildSrc/src/main/kotlin/Versions.kt

@@ -1,4 +1,4 @@
-const val projectVersion = "0.1.0-compose-1.2.0-alpha01-dev750"
+const val projectVersion = "0.2.0"
 
 object DependencyVersions {
     val webcomponents = "2.6.0"

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

@@ -0,0 +1,26 @@
+import com.huanshankeji.team.`Shreck Ye`
+import com.huanshankeji.team.pomForTeamDefaultOpenSource
+import org.gradle.api.publish.maven.MavenPublication
+import org.gradle.api.tasks.bundling.Jar
+import org.gradle.kotlin.dsl.*
+
+plugins {
+    id("com.huanshankeji.kotlin-multiplatform-js-browser-conventions")
+    id("org.jetbrains.compose")
+    id("com.huanshankeji.sonatype-ossrh-publish")
+}
+
+repositories {
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+}
+
+group = "com.huanshankeji"
+version = projectVersion
+
+val javadocJar by tasks.registering(Jar::class) {
+    archiveClassifier.set("javadoc")
+}
+
+publishing.publications.withType<MavenPublication> {
+    artifact(javadocJar)
+}

compose-web-common/build.gradle.kts

@@ -0,0 +1,23 @@
+import com.huanshankeji.team.`Shreck Ye`
+import com.huanshankeji.team.pomForTeamDefaultOpenSource
+
+plugins {
+    `lib-conventions`
+}
+
+kotlin {
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                implementation(compose.web.core)
+                implementation(compose.runtime)
+            }
+        }
+    }
+}
+
+publishing.publications.withType<MavenPublication> {
+    pomForTeamDefaultOpenSource(project, "Huanshankeji Compose for Web common", "Huanshankeji's common code for Compose for Web") {
+        `Shreck Ye`()
+    }
+}

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Layouts.kt

@@ -0,0 +1,156 @@
+package com.huanshankeji.compose.web
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.web.attributes.attrs
+import com.huanshankeji.compose.web.attributes.plus
+import com.huanshankeji.compose.web.css.FIT_CONTENT
+import com.huanshankeji.compose.web.css.Styles
+import com.huanshankeji.compose.web.css.width
+import com.huanshankeji.compose.web.css.wrapInAttrs
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+// try to follow names in Android Jetpack Compose
+
+@Composable
+fun Flexbox(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Div(attrs<HTMLDivElement> {
+        style {
+            display(DisplayStyle.Flex)
+        }
+    } + attrs, content)
+
+@Composable
+fun Flexbox(styles: Styles? = null, content: ContentBuilder<HTMLDivElement>) =
+    Flexbox(styles.wrapInAttrs(), content)
+
+@Composable
+fun Column(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    fitContent: Boolean = true,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            flexDirection(FlexDirection.Column)
+            if (fitContent) width(FIT_CONTENT)
+        }
+    } + attrs, content)
+
+@Composable
+fun Column(styles: Styles? = null, fitContent: Boolean = true, content: ContentBuilder<HTMLDivElement>) =
+    Column(styles.wrapInAttrs(), fitContent, content)
+
+@Composable
+fun ColumnWithSpaceBetween(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    fitContent: Boolean = true,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Column(attrs<HTMLDivElement> {
+        style {
+            justifyContent(JustifyContent.SpaceBetween)
+        }
+    } + attrs, fitContent, content)
+
+
+@Composable
+fun Row(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            flexDirection(FlexDirection.Row)
+        }
+    } + attrs, content)
+
+@Composable
+fun Row(
+    styles: Styles? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Row(styles.wrapInAttrs(), content)
+
+@Composable
+fun RowWithSpaceBetween(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Row(attrs<HTMLDivElement> {
+        style {
+            justifyContent(JustifyContent.SpaceBetween)
+        }
+    } + attrs, content)
+
+@Composable
+fun ColumnWithGaps(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    gap: CSSNumeric,
+    fitContent: Boolean = true,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Column(attrs<HTMLDivElement> {
+        style {
+            gap(gap)
+        }
+    } + attrs, fitContent, content)
+
+@Composable
+fun RowWithGaps(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    gap: CSSNumeric,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Row(attrs<HTMLDivElement> {
+        style {
+            gap(gap)
+        }
+    } + attrs, content)
+
+@Composable
+fun Centered(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            alignItems(AlignItems.Center)
+            justifyContent(JustifyContent.Center)
+        }
+    } + attrs, content)
+
+@Composable
+fun CenteredInViewport(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Centered(attrs<HTMLDivElement> {
+        style {
+            minHeight(100.vh)
+        }
+    } + attrs, content)
+
+@Composable
+fun FrGrid(
+    numColumns: Int,
+    gap: CSSNumeric,
+    content: HTMLElementContent
+) =
+    Div({
+        style {
+            display(DisplayStyle.Grid)
+            gridTemplateColumns("repeat($numColumns, 1fr)")
+            gap(gap)
+        }
+    }, content)
+
+@Composable
+fun Spacer(numPxs: Int) =
+    TODO() as Unit

lib/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt → compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt

@@ -1,7 +1,6 @@
 package com.huanshankeji.compose.web
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.StyleScope
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.jetbrains.compose.web.dom.Div
@@ -19,6 +18,4 @@ typealias DivElementComposable = ElementComposable<HTMLDivElement>
 // `::Div` cannot be used directly because "Function References of @Composable functions are not currently supported"
 val DivComposable: ElementComposable<HTMLDivElement> = { attrs, content -> Div(attrs, content) }
 
-typealias Styles = StyleScope.() -> Unit
-
 typealias HTMLElementContent = (@Composable ElementScope<HTMLElement>.() -> Unit)?

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/AttrBuilderContext.kt

@@ -0,0 +1,18 @@
+package com.huanshankeji.compose.web.attributes
+
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+operator fun <TElement : Element> AttrBuilderContext<TElement>.plus(other: AttrBuilderContext<TElement>?): AttrBuilderContext<TElement> =
+    if (other === null) this
+    else {
+        {
+            this@plus()
+            other()
+        }
+    }
+
+/** A helper function to create [AttrBuilderContext]s where type inference doesn't work */
+@Suppress("NOTHING_TO_INLINE")
+inline fun <TElement : Element> attrs(noinline attrs: AttrBuilderContext<TElement>) =
+    attrs

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/StyleScope.kt

@@ -0,0 +1,11 @@
+package com.huanshankeji.compose.web.css
+
+import org.jetbrains.compose.web.css.StyleScope
+
+fun StyleScope.width(value: String) =
+    property("width", value)
+
+fun StyleScope.height(value: String) =
+    property("height", value)
+
+const val FIT_CONTENT = "fit-content"

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/Styles.kt

@@ -0,0 +1,10 @@
+package com.huanshankeji.compose.web.css
+
+import org.jetbrains.compose.web.css.StyleScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+typealias Styles = StyleScope.() -> Unit
+
+fun <TElement : Element> Styles?.wrapInAttrs(): AttrBuilderContext<TElement>? =
+    this?.let { { style { it() } } }

compose-web-material/build.gradle.kts

@@ -0,0 +1,45 @@
+import com.huanshankeji.team.`Shreck Ye`
+import com.huanshankeji.team.pomForTeamDefaultOpenSource
+
+plugins {
+    `lib-conventions`
+}
+
+kotlin {
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                implementation(compose.web.core)
+                implementation(compose.runtime)
+                implementation(project(":compose-web-common"))
+
+                implementation(npm("@webcomponents/webcomponentsjs", DependencyVersions.webcomponents))
+
+                fun mwcImplementation(module: String) =
+                    implementation(npm("@material/mwc-$module", DependencyVersions.mwc))
+
+                fun mwcImplementations(vararg modules: String) {
+                    for (module in modules) mwcImplementation(module)
+                }
+
+                mwcImplementations(
+                    "button",
+                    "textfield",
+                    "select",
+                    "icon-button",
+                    "snackbar",
+                    "circular-progress",
+                    "circular-progress-four-color"
+                )
+
+                implementation(npm("@material/card", DependencyVersions.mdc))
+            }
+        }
+    }
+}
+
+publishing.publications.withType<MavenPublication> {
+    pomForTeamDefaultOpenSource(project, "Compose for Web Material", "Some Material components for Compose for Web") {
+        `Shreck Ye`()
+    }
+}

compose-web-material/src/jsMain/kotlin/com/huanshankeji/compose/web/material/Layouts.kt

@@ -0,0 +1,18 @@
+package com.huanshankeji.compose.web.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.web.CenteredInViewport
+import com.huanshankeji.compose.web.css.Styles
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun CenteredCardInViewport(
+    viewportDivStyles: Styles? = null,
+    cardAttrs: (AttrsScope<HTMLDivElement>.() -> Unit)? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    CenteredInViewport({ viewportDivStyles?.let { style { it() } } }) {
+        MdcCard(cardAttrs, content = content)
+    }