Skip to content

Commit c233155

Browse files
ShreckYeShreckYe
committed
Merge branch 'main' into release
v0.2.0 release
2 parents 92a9663 + 05289d3 commit c233155

File tree

30 files changed

+446
-426
lines changed

30 files changed

+446
-426
lines changed

‎README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,36 @@
33
[![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-web-material)](https://search.maven.org/artifact/com.huanshankeji/compose-web-material)
44
[![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)
55

6-
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)
6+
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)
77

8-
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.
8+
~~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.~~
9+
10+
**This project is not currently under active development. Here is a list of reasons and alternatives:**
11+
12+
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.
13+
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.
14+
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.
915

1016
## Instructions on how to use
17+
1118
Some configurations are needed to use this library due to the immaturities of this project and Kotlin/JS.
1219

1320
### Add the dependency
21+
1422
```kotlin
1523
implementation("com.huanshankeji:compose-web-material:$version")
1624
```
1725

1826
### In code
27+
1928
Call `mwcRequires()` in your `main` function before calling any component Composable functions.
2029

2130
### Kotlin/JS Webpack configuration
31+
2232
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.
2333

2434
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:
35+
2536
```kotlin
2637
plugins {
2738
id("com.huanshankeji.compose-web-material-conventions") version someVersion

‎buildSrc/build.gradle.kts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
plugins {
22
`kotlin-dsl`
33
}
4-
54
repositories {
5+
//mavenLocal()
66
gradlePluginPortal()
7+
//maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
8+
}
9+
10+
dependencies {
11+
implementation(kotlin("gradle-plugin", "1.7.20"))
12+
implementation("org.jetbrains.compose:compose-gradle-plugin:1.2.1")
13+
implementation("com.huanshankeji:kotlin-common-gradle-plugins:0.3.2")
14+
implementation("com.huanshankeji.team:gradle-plugins:0.3.2")
715
}

‎buildSrc/src/main/kotlin/Versions.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const val projectVersion = "0.1.0-compose-1.2.0-alpha01-dev750"
1+
const val projectVersion = "0.2.0"
22

33
object DependencyVersions {
44
val webcomponents = "2.6.0"

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import com.huanshankeji.team.`Shreck Ye`
2+
import com.huanshankeji.team.pomForTeamDefaultOpenSource
3+
import org.gradle.api.publish.maven.MavenPublication
4+
import org.gradle.api.tasks.bundling.Jar
5+
import org.gradle.kotlin.dsl.*
6+
7+
plugins {
8+
id("com.huanshankeji.kotlin-multiplatform-js-browser-conventions")
9+
id("org.jetbrains.compose")
10+
id("com.huanshankeji.sonatype-ossrh-publish")
11+
}
12+
13+
repositories {
14+
maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
15+
}
16+
17+
group = "com.huanshankeji"
18+
version = projectVersion
19+
20+
val javadocJar by tasks.registering(Jar::class) {
21+
archiveClassifier.set("javadoc")
22+
}
23+
24+
publishing.publications.withType<MavenPublication> {
25+
artifact(javadocJar)
26+
}

‎compose-web-common/build.gradle.kts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import com.huanshankeji.team.`Shreck Ye`
2+
import com.huanshankeji.team.pomForTeamDefaultOpenSource
3+
4+
plugins {
5+
`lib-conventions`
6+
}
7+
8+
kotlin {
9+
sourceSets {
10+
val jsMain by getting {
11+
dependencies {
12+
implementation(compose.web.core)
13+
implementation(compose.runtime)
14+
}
15+
}
16+
}
17+
}
18+
19+
publishing.publications.withType<MavenPublication> {
20+
pomForTeamDefaultOpenSource(project, "Huanshankeji Compose for Web common", "Huanshankeji's common code for Compose for Web") {
21+
`Shreck Ye`()
22+
}
23+
}

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
package com.huanshankeji.compose.web
2+
3+
import androidx.compose.runtime.Composable
4+
import com.huanshankeji.compose.web.attributes.attrs
5+
import com.huanshankeji.compose.web.attributes.plus
6+
import com.huanshankeji.compose.web.css.FIT_CONTENT
7+
import com.huanshankeji.compose.web.css.Styles
8+
import com.huanshankeji.compose.web.css.width
9+
import com.huanshankeji.compose.web.css.wrapInAttrs
10+
import org.jetbrains.compose.web.css.*
11+
import org.jetbrains.compose.web.dom.AttrBuilderContext
12+
import org.jetbrains.compose.web.dom.ContentBuilder
13+
import org.jetbrains.compose.web.dom.Div
14+
import org.w3c.dom.HTMLDivElement
15+
16+
// try to follow names in Android Jetpack Compose
17+
18+
@Composable
19+
fun Flexbox(
20+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
21+
content: ContentBuilder<HTMLDivElement>
22+
) =
23+
Div(attrs<HTMLDivElement> {
24+
style {
25+
display(DisplayStyle.Flex)
26+
}
27+
} + attrs, content)
28+
29+
@Composable
30+
fun Flexbox(styles: Styles? = null, content: ContentBuilder<HTMLDivElement>) =
31+
Flexbox(styles.wrapInAttrs(), content)
32+
33+
@Composable
34+
fun Column(
35+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
36+
fitContent: Boolean = true,
37+
content: ContentBuilder<HTMLDivElement>
38+
) =
39+
Flexbox(attrs<HTMLDivElement> {
40+
style {
41+
flexDirection(FlexDirection.Column)
42+
if (fitContent) width(FIT_CONTENT)
43+
}
44+
} + attrs, content)
45+
46+
@Composable
47+
fun Column(styles: Styles? = null, fitContent: Boolean = true, content: ContentBuilder<HTMLDivElement>) =
48+
Column(styles.wrapInAttrs(), fitContent, content)
49+
50+
@Composable
51+
fun ColumnWithSpaceBetween(
52+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
53+
fitContent: Boolean = true,
54+
content: ContentBuilder<HTMLDivElement>
55+
) =
56+
Column(attrs<HTMLDivElement> {
57+
style {
58+
justifyContent(JustifyContent.SpaceBetween)
59+
}
60+
} + attrs, fitContent, content)
61+
62+
63+
@Composable
64+
fun Row(
65+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
66+
content: ContentBuilder<HTMLDivElement>
67+
) =
68+
Flexbox(attrs<HTMLDivElement> {
69+
style {
70+
flexDirection(FlexDirection.Row)
71+
}
72+
} + attrs, content)
73+
74+
@Composable
75+
fun Row(
76+
styles: Styles? = null,
77+
content: ContentBuilder<HTMLDivElement>
78+
) =
79+
Row(styles.wrapInAttrs(), content)
80+
81+
@Composable
82+
fun RowWithSpaceBetween(
83+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
84+
content: ContentBuilder<HTMLDivElement>
85+
) =
86+
Row(attrs<HTMLDivElement> {
87+
style {
88+
justifyContent(JustifyContent.SpaceBetween)
89+
}
90+
} + attrs, content)
91+
92+
@Composable
93+
fun ColumnWithGaps(
94+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
95+
gap: CSSNumeric,
96+
fitContent: Boolean = true,
97+
content: ContentBuilder<HTMLDivElement>
98+
) =
99+
Column(attrs<HTMLDivElement> {
100+
style {
101+
gap(gap)
102+
}
103+
} + attrs, fitContent, content)
104+
105+
@Composable
106+
fun RowWithGaps(
107+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
108+
gap: CSSNumeric,
109+
content: ContentBuilder<HTMLDivElement>
110+
) =
111+
Row(attrs<HTMLDivElement> {
112+
style {
113+
gap(gap)
114+
}
115+
} + attrs, content)
116+
117+
@Composable
118+
fun Centered(
119+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
120+
content: ContentBuilder<HTMLDivElement>
121+
) =
122+
Flexbox(attrs<HTMLDivElement> {
123+
style {
124+
alignItems(AlignItems.Center)
125+
justifyContent(JustifyContent.Center)
126+
}
127+
} + attrs, content)
128+
129+
@Composable
130+
fun CenteredInViewport(
131+
attrs: AttrBuilderContext<HTMLDivElement>? = null,
132+
content: ContentBuilder<HTMLDivElement>
133+
) =
134+
Centered(attrs<HTMLDivElement> {
135+
style {
136+
minHeight(100.vh)
137+
}
138+
} + attrs, content)
139+
140+
@Composable
141+
fun FrGrid(
142+
numColumns: Int,
143+
gap: CSSNumeric,
144+
content: HTMLElementContent
145+
) =
146+
Div({
147+
style {
148+
display(DisplayStyle.Grid)
149+
gridTemplateColumns("repeat($numColumns, 1fr)")
150+
gap(gap)
151+
}
152+
}, content)
153+
154+
@Composable
155+
fun Spacer(numPxs: Int) =
156+
TODO() as Unit

‎lib/src/jsMain/kotlin/com/huanshankeji/compose/web/LoadingState.kt‎ renamed to ‎compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/LoadingState.kt‎

File renamed without changes.

‎lib/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt‎ renamed to ‎compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
package com.huanshankeji.compose.web
22

33
import androidx.compose.runtime.Composable
4-
import org.jetbrains.compose.web.css.StyleScope
54
import org.jetbrains.compose.web.dom.AttrBuilderContext
65
import org.jetbrains.compose.web.dom.ContentBuilder
76
import org.jetbrains.compose.web.dom.Div
@@ -19,6 +18,4 @@ typealias DivElementComposable = ElementComposable<HTMLDivElement>
1918
// `::Div` cannot be used directly because "Function References of @Composable functions are not currently supported"
2019
val DivComposable: ElementComposable<HTMLDivElement> = { attrs, content -> Div(attrs, content) }
2120

22-
typealias Styles = StyleScope.() -> Unit
23-
2421
typealias HTMLElementContent = (@Composable ElementScope<HTMLElement>.() -> Unit)?

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
package com.huanshankeji.compose.web.attributes
2+
3+
import org.jetbrains.compose.web.dom.AttrBuilderContext
4+
import org.w3c.dom.Element
5+
6+
operator fun <TElement : Element> AttrBuilderContext<TElement>.plus(other: AttrBuilderContext<TElement>?): AttrBuilderContext<TElement> =
7+
if (other === null) this
8+
else {
9+
{
10+
this@plus()
11+
other()
12+
}
13+
}
14+
15+
/** A helper function to create [AttrBuilderContext]s where type inference doesn't work */
16+
@Suppress("NOTHING_TO_INLINE")
17+
inline fun <TElement : Element> attrs(noinline attrs: AttrBuilderContext<TElement>) =
18+
attrs

‎lib/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/AttrsScope.kt‎ renamed to ‎compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/attributes/AttrsScope.kt‎

File renamed without changes.

0 commit comments

Comments
 (0)