Skip to content

Commit

Permalink
Merge branch 'main' into release
Browse files Browse the repository at this point in the history
v0.3.0 release
  • Loading branch information
ShreckYe committed May 10, 2024
2 parents 40df983 + 3487e71 commit 8e7d834
Show file tree
Hide file tree
Showing 189 changed files with 5,587 additions and 545 deletions.
18 changes: 18 additions & 0 deletions LEGACY_README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Legacy README

This file contains information on legacy code which is not removed yet.

## Supported features

### Styles

The `ModifierOrAttrsScope.styles` function and the `StyleScope` class provide a universal interface for `Modifier`s and CSS styles.

The functions in `StyleScope`:

- `height`
- `margin`
- `width`
- `backgroundColor`
- `platformBorder`
- `outerBorder`
118 changes: 85 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
# Compose Multiplatform Material wrappers for `androidx.compose.material` and Compose HTML
# Compose Multiplatform Material: unified Compose Multiplatform common extensions and Material wrappers for `androidx.compose` and Compose HTML

[![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)
[![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-material3)](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-material3)

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))
Unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose` (officially supported on Android, desktop (JVM), iOS, and 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` -->
We try to provide a set of common extensions and composable component APIs akin to those in `androidx.compose` (`androidx.compose.foundation`, `androidx.compose.material`, and `androidx.compose.material3`), meanwhile making them compatible with the Compose HTML APIs. However, only subsets of the composables and composable parameters are supported due to the API differences, limitations of the JS (web) platform and the Compose HTML composables this project depends on, and our limited effort.

We try to make the function types of the composable components follow those in `androidx.compose.foundation` and `androidx.compose.material`, meanwhile being compatible with the Compose HTML APIs. However, only subsets of the composables and composable arguments are supported due to the API differences, limitations of the Compose HTML composables this project depends on, and our limited effort.
Complete visual consistency across different platforms is not guaranteed.

Visual consistency across different platforms is not guaranteed.

This project is prototype and there is no documentation yet. Check out [the demo project](demo) on how to use the components.
This project is still in development and has not reached the stable state yet. Some APIs are likely to be changed and there is no detailed documentation yet. Check out [the demo project](demo) on how to use the components in addition to the information below.

## Supported features

### Components

#### Common (Foundation) components
#### Foundation components

- `BasicText`

Expand All @@ -28,46 +26,80 @@ This project is prototype and there is no documentation yet. Check out [the demo
##### Layouts

- `Box`
- `Column` (via flexbox on web)
- `Row` (via flexbox on web)
- `Column` (via flexbox on JS)
- `Row` (via flexbox on JS)
- `Spacer`

##### Lazy

- `LazyColumn`
- `LazyRow`

#### Material components
#### Material 2 components

- `Button`
- `Card`
- `Checkbox`
- `Divider` (not working properly on JS yet)
- `Icon`
- `IconButton`
- `ScrollableList`/`LazyColumn` (visually inconsistent for now)
- `Text`/`MaterialText`
- `TextField`
- `Switch`
- `Text`

##### `ext` components

- `Button`
- `IconButton`
- `RadioRow`, `RadioGroupRow`
- `SwitchWithLabel`
- `MaterialText`, `InlineText`
- `TextField`, `OutlinedTextField`
- `TopAppBarScaffold`

#### Components in the `ext` packages
##### `lazy.ext` components

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.
- `List`/`LazyColumnList` (visually inconsistent for now)

### Styles (obsolete in the legacy module, for removal)
#### Material 3 components

The `ModifierOrAttrsScope.styles` function and the `StyleScope` class provide a universal interface for `Modifier`s and CSS styles.
- `Button` (`FilledButton`), `ElevatedButton`, `FilledTonalButton`, `OutlinedButton`, `TextButton`
- `Card` (`FilledCard`), `ElevatedCard`, `OutlinedCard`
- `Checkbox`
- `FloatingActionButton`, `SmallFloatingActionButton`, `LargeFloatingActionButton`, `ExtendedFloatingActionButton`
- `Icon`
- `IconButton`, `IconToggleButton`, `FilledIconButton`, `FilledIconToggleButton`, `FilledTonalIconButton`, `FilledTonalIconToggleButton`, `OutlinedIconButton`, `OutlinedIconToggleButton`
- `Switch`
- `Text`

The functions in `StyleScope`:
##### `ext` components

- `height`
- `margin`
- `width`
- `backgroundColor`
- `platformBorder`
- `outerBorder`
- `Button` (`FilledButton`), `ElevatedButton`, `FilledTonalButton`, `OutlinedButton`, `TextButton`
- `Card` (`FilledCard`), `ElevatedCard`, `OutlinedCard`
- `FloatingActionButton`, `SmallFloatingActionButton`, `LargeFloatingActionButton`, `ExtendedFloatingActionButton`
- `IconButton`, `IconToggleButton`, `FilledIconButton`, `FilledIconToggleButton`, `FilledTonalIconButton`, `FilledTonalIconToggleButton`, `OutlinedIconButton`, `OutlinedIconToggleButton`
- `NavigationBar`, `NavigationBarItem`
- `MaterialText`, `InlineText`
- `TextField`, `OutlinedTextField`

##### `lazy.ext` components

- `List`/`LazyColumnList` (slightly visually inconsistent)

#### About `ext` components (components in the `ext` packages)

The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are more idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs.

### Modifiers

- size modifiers
- `size`, `sizeIn`, `fillMaxSize`
- `width`, `widthIn`, `fillMaxWidth`
- `height`, `heightIn`, `fillMaxHeight`
- `size`, `sizeIn`, `fillMaxSize`
- `width`, `widthIn`, `fillMaxWidth`
- `height`, `heightIn`, `fillMaxHeight`
- `padding`
- `background`
- `border` (visually inconsistent)
- `onClick`
- `verticalScroll`, `horizontalScroll` (`ScrollState` not supported on JS yet)

#### `ext` modifiers

Expand All @@ -82,22 +114,42 @@ Maven coordinate:
"com.huanshankeji:compose-multiplatform-$module:$version"
```

For example, depend on the Material 3 module with Gradle:

```kotlin
kotlin {
sourceSets {
commonMain {
dependencies {
// ...
implementation("com.huanshankeji:compose-multiplatform-material3:$version")
}
}
}
}
```

View [all the artifacts on Maven Central](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*).

This project depends on [Kobweb](https://github.com/varabyte/kobweb) which is not published to Maven Central yet, so you have to add the following Maven repository:

```kotlin
repositories {
mavenCentral()
maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
}
```

### Material Symbols & Icons on JS

See [the corresponding section in Compose HTML Material](https://github.com/huanshankeji/compose-html-material?tab=readme-ov-file#material-symbols--icons) for configuring 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` APIs (type-safe CSS API wrappers) and layouts. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML:
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):

1. [Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk)
1. [Modifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#modifier)
1. [attrsModifier and styleModifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#attrsmodifier-and-stylemodifier)
1. [Modifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#modifier)
1. [attrsModifier and styleModifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#attrsmodifier-and-stylemodifier)
1. [General purpose improvements on top of Compose HTML and Kotlin/JS](https://github.com/varabyte/kobweb?tab=readme-ov-file#general-purpose-improvements-on-top-of-compose-html-and-kotlinjs)
1. [What about Compose Multiplatform for Web?](https://github.com/varabyte/kobweb?tab=readme-ov-file#what-about-compose-multiplatform-for-web)
2 changes: 1 addition & 1 deletion buildSrc/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ repositories {

dependencies {
implementation(kotlin("gradle-plugin", "1.9.23"))
implementation("org.jetbrains.compose:compose-gradle-plugin:1.6.1")
implementation("org.jetbrains.compose:compose-gradle-plugin:1.6.2")
implementation("com.huanshankeji.team:gradle-plugins:0.5.1")
implementation("com.android.tools.build:gradle:8.2.2")
}
16 changes: 9 additions & 7 deletions buildSrc/src/main/kotlin/VersionsAndDependencies.kt
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
val projectVersion = "0.2.0"
import org.jetbrains.compose.ComposeBuildConfig

val projectVersion = "0.3.0"

object DependencyVersions {
val composeMultiplatform = "1.6.1" // manually specified for "ui-unit"
val kobweb = "0.17.1"
val huanshankejiComposeWeb = "0.2.2"
const val composeMultiplatform = ComposeBuildConfig.composeVersion // for "ui-unit"
val kobweb = "0.17.3"
val huanshankejiComposeHtml = "0.3.0"
val kmdc = "0.1.2"
val materialIcons = "1.13.12"
val materialSymbols = "0.17.4"

object Androidx {
val activityCompose = "1.8.2"
val compose = "1.6.4"
val activityCompose = "1.9.0"
val compose = "1.6.6"
}
}
7 changes: 7 additions & 0 deletions buildSrc/src/main/kotlin/common-conventions.gradle.kts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl

plugins {
Expand Down Expand Up @@ -35,4 +36,10 @@ kotlin {
// for JS and HTML wrappers

js()


@OptIn(ExperimentalKotlinGradlePluginApi::class)
compilerOptions {
freeCompilerArgs.add("-Xexpect-actual-classes")
}
}
1 change: 1 addition & 0 deletions compose-multiplatform-common/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -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}")
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions compose-multiplatform-common/legacy/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -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}")
}
}
}
Expand All @@ -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`()
Expand Down
Original file line number Diff line number Diff line change
@@ -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()
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
package com.huanshankeji.compose.foundation

import androidx.compose.foundation.onClick
import com.huanshankeji.compose.ui.Modifier

//@ExperimentalFoundationApi // `onClick` with a single parameter is likely to be always supported, so it does not require opt-in for now.
@OptIn(androidx.compose.foundation.ExperimentalFoundationApi::class)
actual fun Modifier.onClick(onClick: () -> Unit): Modifier =
platformModify { onClick(onClick = onClick) }
Original file line number Diff line number Diff line change
@@ -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) }
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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 =
Expand Down
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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 =
Expand Down
Loading

0 comments on commit 8e7d834

Please sign in to comment.