huanshankeji/compose-multiplatform-material

Unified Compose Multiplatform Material Design components for `androidx.compose.material` and Compose HTML

Compose Multiplatform common extensions and Material wrappers for androidx.compose.material and Compose HTML

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 and KMDC)

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.

Visual consistency across different platforms is not guaranteed.

This project is prototype and there is no documentation yet. Check out the demo project on how to use the components.

Supported features

Components

Common (Foundation) components

• BasicText

ext components

• InlineBasicText

Layouts

• Box
• Column (via flexbox on web)
• Row (via flexbox on web)

Material components

• Button
• Card
• Icon
• IconButton
• LazyColumn/ScrollableList (visually inconsistent for now)
• Text/MaterialText
• TextField
• Checkbox
• Divider (visually inconsistent for now)

ext components

• Button
• IconButton
• TopAppBarScaffold
• InlineText
• RadioRow
• RadioGroupRow

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.

Styles (obsolete in the legacy module, for removal)

The ModifierOrAttrsScope.styles function and the StyleScope class provide a universal interface for Modifiers and CSS styles.

The functions in StyleScope:

• height
• margin
• width
• backgroundColor
• platformBorder
• outerBorder

Modifiers

• size modifiers
  • size, sizeIn, fillMaxSize
  • width, widthIn, fillMaxWidth
  • height, heightIn, fillMaxHeight
• padding
• background
• border (visually inconsistent)

ext modifiers

• outerBorder
• roundedCornerBackgroundAndOuterBorder

Add the libraries to your dependency

Maven coordinate:

"com.huanshankeji:compose-multiplatform-$module:$version"

View all the artifacts on Maven Central.

This project depends on Kobweb which is not published to Maven Central yet, so you have to add the following Maven repository:

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

About Kobweb Silk

The Kotlin/JS (Compose HTML) portion of this project depends on Kobweb Compose of Kobweb 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
   1. Modifier
      1. attrsModifier and styleModifier
2. General purpose improvements on top of Compose HTML and Kotlin/JS
3. What about Compose Multiplatform for Web?

compose-multiplatform-material's Issues

Add checkboxes and switches

Design docs:

1. https://m2.material.io/components/checkboxes
2. https://m2.material.io/components/switches

Interactive demos:

1. https://kmdc.petuska.dev/#/MDCSwitch
2. https://kmdc.petuska.dev/#/MDCCheckbox

Consider using `Modifier`s and layouts from Kobweb Silk

Kobweb Silk already provides a set of Modifier and layout implementations that look quite comprehensive. Use their implementation directly instead implementing them by ourselves if possible.

See code in https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui and https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose/src/jsMain/kotlin/com/varabyte/kobweb/compose/ui/modifiers.

Add radio buttons and menus

Design docs:

1. https://m2.material.io/components/radio-buttons
2. https://m2.material.io/components/menus

Interactive KMDC demos:

1. https://kmdc.petuska.dev/#/MDCRadio
2. https://kmdc.petuska.dev/#/MDCMenu

A common interface for `Modifier` and CSS styles instead of HTML attributes

After working on this project for a while it seems to me that a Compose Modifier is more similar to the CSS styles in the style attribute instead of all the attributes of an HTML element, while HTML attributes are more similar to a Composable's arguments. If this is investigated to be true in most cases, modify the existing ModifierOrAttrs interface into a common interface for Modifier and CSS styles instead of HTML attributes.

Support scrolling

See:

1. https://developer.android.com/develop/ui/compose/touch-input/pointer-input/scroll
2. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

This seems not that related: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior.

Support the text area component

Search for the keyword "area" in these references:

1. https://m2.material.io/components/text-fields
2. https://developer.android.com/jetpack/compose/text
3. https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield

Support all the common color literals

Add a Gradle plugin to configure Webpack (mainly SASS and CSS) automatically

Consider renaming the `androidxCommon` sourcesets to `skiko`

This seems to be how it's done in the official libraries.

See: https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/foundation/foundation/build.gradle

However, it seems androidMain doesn't depend on skikoMain.

Add `hashCode` and `equals` methods for wrapper classes

This may be needed for Compose's diff algorithm.

Put components in different modules if this helps reduce the JS production bundle size

Support all the common material icons

Should the `name` and `form` attribute parameters be removed?

The name and form attributes do have meaning for HTML forms, but the component docs (for example Text field) show them as properties without attributes.

Support different text field and text area types

Support Material 3

Test and add targets for Kotlin/Native macOS

The upstreaming official libraries seem to support macOS targets.

Support `MaterialTheme`