diff --git a/experimental/examples/chat-mpp/.gitignore b/experimental/examples/chat-mpp/.gitignore new file mode 100644 index 0000000000..7921cd4d1c --- /dev/null +++ b/experimental/examples/chat-mpp/.gitignore @@ -0,0 +1,2 @@ +local.properties +.idea diff --git a/experimental/examples/chat-mpp/README.md b/experimental/examples/chat-mpp/README.md new file mode 100644 index 0000000000..5788efda1b --- /dev/null +++ b/experimental/examples/chat-mpp/README.md @@ -0,0 +1,23 @@ +# Chat example app + +## Run on Android: +- connect device or emulator +- `./gradlew installDebug` +- open app + +## Run on Desktop jvm + `./gradlew run` + +## Run native on MacOS + `./gradlew runDebugExecutableMacosX64` (Works on Intel processors) + +## Run web assembly in browser + `./gradlew jsBrowserDevelopmentRun` + +## Run on iOS simulator + `./gradlew iosDeployIPhone8Debug` + `./gradlew iosDeployIPadDebug` + +## Run on iOS device +- Read about iOS target in [falling-balls-mpp/README.md](../falling-balls-mpp/README.md) +- `./gradlew iosDeployDeviceRelease` diff --git a/experimental/examples/chat-mpp/build.gradle.kts b/experimental/examples/chat-mpp/build.gradle.kts new file mode 100644 index 0000000000..04d04a3f1c --- /dev/null +++ b/experimental/examples/chat-mpp/build.gradle.kts @@ -0,0 +1,215 @@ +import org.jetbrains.compose.compose +import org.jetbrains.compose.desktop.application.dsl.TargetFormat +import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget +import org.jetbrains.kotlin.gradle.tasks.KotlinCompile +import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension +import org.jetbrains.compose.experimental.dsl.IOSDevices + +plugins { + id("com.android.application") + kotlin("multiplatform") + id("org.jetbrains.compose") +} + +version = "1.0-SNAPSHOT" + +repositories { + google() + mavenCentral() + maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") +} + +kotlin { + android() + jvm("desktop") + js(IR) { + browser() + binaries.executable() + } + macosX64 { + binaries { + executable { + entryPoint = "main" + freeCompilerArgs += listOf( + "-linker-option", "-framework", "-linker-option", "Metal" + ) + } + } + } + macosArm64 { + binaries { + executable { + entryPoint = "main" + freeCompilerArgs += listOf( + "-linker-option", "-framework", "-linker-option", "Metal" + ) + } + } + } + iosX64("uikitX64") { + binaries { + executable() { + entryPoint = "main" + freeCompilerArgs += listOf( + "-linker-option", "-framework", "-linker-option", "Metal", + "-linker-option", "-framework", "-linker-option", "CoreText", + "-linker-option", "-framework", "-linker-option", "CoreGraphics" + ) + } + } + } + iosArm64("uikitArm64") { + binaries { + executable() { + entryPoint = "main" + freeCompilerArgs += listOf( + "-linker-option", "-framework", "-linker-option", "Metal", + "-linker-option", "-framework", "-linker-option", "CoreText", + "-linker-option", "-framework", "-linker-option", "CoreGraphics" + ) + } + } + } + + sourceSets { + val commonMain by getting { + dependencies { + implementation(compose.ui) + implementation(compose.foundation) + implementation(compose.material) + implementation(compose.runtime) + implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.3") + } + } + + val commonTest by getting { + dependencies { + implementation(kotlin("test-common")) + implementation(kotlin("test-annotations-common")) + } + } + + val androidMain by getting { + dependsOn(commonMain) + kotlin.srcDirs("src/jvmMain/kotlin") + dependencies { + api("androidx.appcompat:appcompat:1.4.1") + implementation("androidx.activity:activity-compose:1.4.0") + } + } + + val desktopMain by getting { + dependencies { + implementation(compose.desktop.currentOs) + } + } + + val jsMain by getting { + dependencies { + implementation(compose.web.core) + } + } + + val nativeMain by creating { + dependsOn(commonMain) + } + val macosMain by creating { + dependsOn(nativeMain) + } + val macosX64Main by getting { + dependsOn(macosMain) + } + val macosArm64Main by getting { + dependsOn(macosMain) + } + val uikitMain by creating { + dependsOn(nativeMain) + } + val uikitX64Main by getting { + dependsOn(uikitMain) + } + val uikitArm64Main by getting { + dependsOn(uikitMain) + } + } +} + +compose.desktop { + application { + mainClass = "Main_desktopKt" + } +} + +compose.experimental { + web.application {} + uikit.application { + bundleIdPrefix = "org.jetbrains" + projectName = "Chat" + deployConfigurations { + simulator("IPhone8") { + //Usage: ./gradlew iosDeployIPhone8Debug + device = IOSDevices.IPHONE_8 + } + simulator("IPad") { + //Usage: ./gradlew iosDeployIPadDebug + device = IOSDevices.IPAD_MINI_6th_Gen + } + connectedDevice("Device") { + //First need specify your teamId here, or in local.properties (compose.ios.teamId=***) + //teamId="***" + //Usage: ./gradlew iosDeployDeviceRelease + } + } + } +} + +tasks.withType { + kotlinOptions.jvmTarget = "11" +} + +compose.desktop.nativeApplication { + targets(kotlin.targets.getByName("macosX64")) + distributions { + targetFormats(TargetFormat.Dmg) + packageName = "Chat" + packageVersion = "1.0.0" + } +} + +// a temporary workaround for a bug in jsRun invocation - see https://youtrack.jetbrains.com/issue/KT-48273 +afterEvaluate { + rootProject.extensions.configure { + versions.webpackDevServer.version = "4.0.0" + versions.webpackCli.version = "4.9.0" + nodeVersion = "16.0.0" + } +} + +// TODO: remove when https://youtrack.jetbrains.com/issue/KT-50778 fixed +project.tasks.withType(org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile::class.java).configureEach { + kotlinOptions.freeCompilerArgs += listOf( + "-Xir-dce-runtime-diagnostic=log" + ) +} + +android { + compileSdk = 31 + + defaultConfig { + minSdk = 21 + targetSdk = 31 + } + + compileOptions { + sourceCompatibility = JavaVersion.VERSION_11 + targetCompatibility = JavaVersion.VERSION_11 + } + + sourceSets { + named("main") { + manifest.srcFile("src/androidMain/AndroidManifest.xml") + res.srcDirs("src/androidMain/res", "src/commonMain/resources") + } + } +} + diff --git a/experimental/examples/chat-mpp/gradle.properties b/experimental/examples/chat-mpp/gradle.properties new file mode 100644 index 0000000000..193eedd8cd --- /dev/null +++ b/experimental/examples/chat-mpp/gradle.properties @@ -0,0 +1,13 @@ +org.gradle.jvmargs=-Xmx3g +kotlin.code.style=official +kotlin.native.cacheKind=none +kotlin.native.useEmbeddableCompilerJar=true +kotlin.native.enableDependencyPropagation=false +kotlin.mpp.enableGranularSourceSetsMetadata=true +kotlin.native.binary.memoryModel=experimental +compose.desktop.verbose=true +android.useAndroidX=true +compose.version=1.2.0-alpha01-dev725 +kotlin.version=1.6.21 +agp.version=7.0.4 +kotlin.js.webpack.major.version=4 diff --git a/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.jar b/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000000..e708b1c023 Binary files /dev/null and b/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.jar differ diff --git a/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.properties b/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000000..aa991fceae --- /dev/null +++ b/experimental/examples/chat-mpp/gradle/wrapper/gradle-wrapper.properties @@ -0,0 +1,5 @@ +distributionBase=GRADLE_USER_HOME +distributionPath=wrapper/dists +distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-bin.zip +zipStoreBase=GRADLE_USER_HOME +zipStorePath=wrapper/dists diff --git a/experimental/examples/chat-mpp/gradlew b/experimental/examples/chat-mpp/gradlew new file mode 100755 index 0000000000..4f906e0c81 --- /dev/null +++ b/experimental/examples/chat-mpp/gradlew @@ -0,0 +1,185 @@ +#!/usr/bin/env sh + +# +# Copyright 2015 the original author or authors. +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# https://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# + +############################################################################## +## +## Gradle start up script for UN*X +## +############################################################################## + +# Attempt to set APP_HOME +# Resolve links: $0 may be a link +PRG="$0" +# Need this for relative symlinks. +while [ -h "$PRG" ] ; do + ls=`ls -ld "$PRG"` + link=`expr "$ls" : '.*-> \(.*\)$'` + if expr "$link" : '/.*' > /dev/null; then + PRG="$link" + else + PRG=`dirname "$PRG"`"/$link" + fi +done +SAVED="`pwd`" +cd "`dirname \"$PRG\"`/" >/dev/null +APP_HOME="`pwd -P`" +cd "$SAVED" >/dev/null + +APP_NAME="Gradle" +APP_BASE_NAME=`basename "$0"` + +# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. +DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' + +# Use the maximum available, or set MAX_FD != -1 to use that value. +MAX_FD="maximum" + +warn () { + echo "$*" +} + +die () { + echo + echo "$*" + echo + exit 1 +} + +# OS specific support (must be 'true' or 'false'). +cygwin=false +msys=false +darwin=false +nonstop=false +case "`uname`" in + CYGWIN* ) + cygwin=true + ;; + Darwin* ) + darwin=true + ;; + MINGW* ) + msys=true + ;; + NONSTOP* ) + nonstop=true + ;; +esac + +CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar + + +# Determine the Java command to use to start the JVM. +if [ -n "$JAVA_HOME" ] ; then + if [ -x "$JAVA_HOME/jre/sh/java" ] ; then + # IBM's JDK on AIX uses strange locations for the executables + JAVACMD="$JAVA_HOME/jre/sh/java" + else + JAVACMD="$JAVA_HOME/bin/java" + fi + if [ ! -x "$JAVACMD" ] ; then + die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." + fi +else + JAVACMD="java" + which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. + +Please set the JAVA_HOME variable in your environment to match the +location of your Java installation." +fi + +# Increase the maximum file descriptors if we can. +if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then + MAX_FD_LIMIT=`ulimit -H -n` + if [ $? -eq 0 ] ; then + if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then + MAX_FD="$MAX_FD_LIMIT" + fi + ulimit -n $MAX_FD + if [ $? -ne 0 ] ; then + warn "Could not set maximum file descriptor limit: $MAX_FD" + fi + else + warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" + fi +fi + +# For Darwin, add options to specify how the application appears in the dock +if $darwin; then + GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" +fi + +# For Cygwin or MSYS, switch paths to Windows format before running java +if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then + APP_HOME=`cygpath --path --mixed "$APP_HOME"` + CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` + + JAVACMD=`cygpath --unix "$JAVACMD"` + + # We build the pattern for arguments to be converted via cygpath + ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` + SEP="" + for dir in $ROOTDIRSRAW ; do + ROOTDIRS="$ROOTDIRS$SEP$dir" + SEP="|" + done + OURCYGPATTERN="(^($ROOTDIRS))" + # Add a user-defined pattern to the cygpath arguments + if [ "$GRADLE_CYGPATTERN" != "" ] ; then + OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" + fi + # Now convert the arguments - kludge to limit ourselves to /bin/sh + i=0 + for arg in "$@" ; do + CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` + CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option + + if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition + eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` + else + eval `echo args$i`="\"$arg\"" + fi + i=`expr $i + 1` + done + case $i in + 0) set -- ;; + 1) set -- "$args0" ;; + 2) set -- "$args0" "$args1" ;; + 3) set -- "$args0" "$args1" "$args2" ;; + 4) set -- "$args0" "$args1" "$args2" "$args3" ;; + 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; + 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; + 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; + 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; + 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; + esac +fi + +# Escape application args +save () { + for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done + echo " " +} +APP_ARGS=`save "$@"` + +# Collect all arguments for the java command, following the shell quoting and substitution rules +eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" + +exec "$JAVACMD" "$@" diff --git a/experimental/examples/chat-mpp/settings.gradle.kts b/experimental/examples/chat-mpp/settings.gradle.kts new file mode 100644 index 0000000000..807887b925 --- /dev/null +++ b/experimental/examples/chat-mpp/settings.gradle.kts @@ -0,0 +1,23 @@ +pluginManagement { + repositories { + gradlePluginPortal() + maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") + google() + } + + plugins { + val kotlinVersion = extra["kotlin.version"] as String + val agpVersion = extra["agp.version"] as String + val composeVersion = extra["compose.version"] as String + + kotlin("jvm").version(kotlinVersion) + kotlin("multiplatform").version(kotlinVersion) + kotlin("android").version(kotlinVersion) + id("com.android.base").version(agpVersion) + id("com.android.application").version(agpVersion) + id("com.android.library").version(agpVersion) + id("org.jetbrains.compose").version(composeVersion) + } +} + +rootProject.name = "chat-mpp" diff --git a/experimental/examples/chat-mpp/src/androidMain/AndroidManifest.xml b/experimental/examples/chat-mpp/src/androidMain/AndroidManifest.xml new file mode 100644 index 0000000000..732f6d15a7 --- /dev/null +++ b/experimental/examples/chat-mpp/src/androidMain/AndroidManifest.xml @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/experimental/examples/chat-mpp/src/androidMain/kotlin/MainActivity.kt b/experimental/examples/chat-mpp/src/androidMain/kotlin/MainActivity.kt new file mode 100644 index 0000000000..ba87a23dcf --- /dev/null +++ b/experimental/examples/chat-mpp/src/androidMain/kotlin/MainActivity.kt @@ -0,0 +1,17 @@ +package org.jetbrains.chat + +import android.os.Bundle +import androidx.activity.compose.setContent +import androidx.appcompat.app.AppCompatActivity +import java.io.File +import java.io.FileOutputStream +import ChatApp + +class MainActivity : AppCompatActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContent { + ChatApp() + } + } +} diff --git a/experimental/examples/chat-mpp/src/androidMain/kotlin/currentTime.android.kt b/experimental/examples/chat-mpp/src/androidMain/kotlin/currentTime.android.kt new file mode 100644 index 0000000000..12e4e07f7a --- /dev/null +++ b/experimental/examples/chat-mpp/src/androidMain/kotlin/currentTime.android.kt @@ -0,0 +1,3 @@ +actual fun timestampMs(): Long { + return System.currentTimeMillis() +} diff --git a/experimental/examples/chat-mpp/src/androidMain/res/res/values/strings.xml b/experimental/examples/chat-mpp/src/androidMain/res/res/values/strings.xml new file mode 100644 index 0000000000..88a8d2c765 --- /dev/null +++ b/experimental/examples/chat-mpp/src/androidMain/res/res/values/strings.xml @@ -0,0 +1,3 @@ + + Chat app + \ No newline at end of file diff --git a/experimental/examples/chat-mpp/src/androidMain/res/values/strings.xml b/experimental/examples/chat-mpp/src/androidMain/res/values/strings.xml new file mode 100644 index 0000000000..88a8d2c765 --- /dev/null +++ b/experimental/examples/chat-mpp/src/androidMain/res/values/strings.xml @@ -0,0 +1,3 @@ + + Chat app + \ No newline at end of file diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/ChatApp.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/ChatApp.kt new file mode 100644 index 0000000000..bc59e53674 --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/ChatApp.kt @@ -0,0 +1,62 @@ +import androidx.compose.foundation.layout.* +import androidx.compose.material.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.* +import androidx.compose.ui.Modifier +import kotlinx.coroutines.delay + +val myUser = User("Me") +val friends = listOf(User("Alex"), User("Lily"), User("Sam")) +val friendMessages = listOf( + "Hi, have a nice day!", + "Nice to see you!", + "Multiline\ntext\nmessage" +) + +@Composable +fun ChatApp() { + val coroutineScope = rememberCoroutineScope() + val store = remember { coroutineScope.createStore() } + val state by store.stateFlow.collectAsState() + + MaterialTheme { + Box(modifier = Modifier.fillMaxSize()) { + Scaffold( + topBar = { + TopAppBar( + title = { Text("Chat sample") } + ) + } + ) { + Column( + modifier = Modifier.fillMaxSize() + ) { + Box(Modifier.weight(1f)) { + Messages(state.messages) + } + SendMessage { text -> + store.send( + Action.SendMessage( + Message(myUser, timeMs = timestampMs(), text) + ) + ) + } + } + } + } + } + LaunchedEffect(Unit) { + while (true) { + store.send( + Action.SendMessage( + message = Message( + user = friends.random(), + timeMs = timestampMs(), + text = friendMessages.random() + ) + ) + ) + delay(5000) + } + } +} diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/Data.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/Data.kt new file mode 100644 index 0000000000..907d68f96c --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/Data.kt @@ -0,0 +1,29 @@ +import androidx.compose.ui.graphics.Color +import kotlin.random.Random + +data class Message private constructor( + val user: User, + val timeMs: Long, + val text: String, + val id: Long +) { + constructor( + user: User, + timeMs: Long, + text: String + ) : this( + user = user, + timeMs = timeMs, + text = text, + id = Random.nextLong() + ) +} + +data class User( + val name: String, + val pictureColor: Color = Color( + red = Random.nextInt(0xff), + green = Random.nextInt(0xff), + blue = Random.nextInt(0xff) + ), +) diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/Messages.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/Messages.kt new file mode 100644 index 0000000000..cc5408e739 --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/Messages.kt @@ -0,0 +1,125 @@ +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.* +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Favorite +import androidx.compose.material.icons.outlined.Favorite +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.unit.dp + +@Composable +internal inline fun Messages(messages: List) { + val listState = rememberLazyListState() + if (messages.isNotEmpty()) { + LaunchedEffect(messages.last()) { + listState.animateScrollToItem(messages.lastIndex, scrollOffset = 2) + } + } + LazyColumn( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.spacedBy(8.dp), + state = listState, + ) { + messages.forEach { message -> + item(key = message.id) { + ChatMessage(isMyMessage = message.user == myUser, message) + } + } +// items(messages, key = { it.id }) { message -> //TODO not working in JS +// ChatMessage(isMyMessage = message.user == myUser, message) +// } + } +} + +@Composable +private inline fun ChatMessage(isMyMessage: Boolean, message: Message) { + Box(modifier = Modifier.fillMaxWidth()) { + Surface( + modifier = Modifier.padding(4.dp) + .align(if (isMyMessage) Alignment.CenterStart else Alignment.CenterEnd), + shape = RoundedCornerShape(size = 20.dp), + elevation = 8.dp + ) { + Box( + Modifier.background(brush = Brush.horizontalGradient(listOf(Color(0xff8888ff), Color(0xffddddff)))) + .padding(10.dp), + ) { + Row(verticalAlignment = Alignment.Top) { + if (isMyMessage) { + UserPic(message.user) + Spacer(Modifier.size(8.dp)) + } + Column { + Row(verticalAlignment = Alignment.Bottom) { + Text( + text = message.user.name, + style = MaterialTheme.typography.h5 + ) + Spacer(Modifier.size(10.dp)) + Text( + text = timeToString(message.timeMs), + style = MaterialTheme.typography.h6 + ) + } + Text( + text = message.text + ) + } + if (!isMyMessage) { + Spacer(Modifier.size(8.dp)) + UserPic(message.user) + } + } + } + } + if (!isMyMessage) { + var liked by remember { mutableStateOf(false) } + Icon( + modifier = Modifier.align(Alignment.BottomEnd) + .clickable { + liked = !liked + } + .padding(4.dp), + imageVector = if (liked) Icons.Filled.Favorite else Icons.Outlined.Favorite, + contentDescription = "Like", + tint = if (liked) Color.Red else Color.Gray + ) + } + } +} + +@Composable +private fun UserPic(user: User) { + val imageSize = 64f + Image( + modifier = Modifier + .size(imageSize.dp) + .clip(CircleShape), + contentScale = ContentScale.Crop, + painter = object : Painter() { + override val intrinsicSize: Size = Size(imageSize, imageSize) + override fun DrawScope.onDraw() { + drawRect(user.pictureColor, size = Size(imageSize * 4, imageSize * 4)) + } + }, + contentDescription = "User picture" + ) +} diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/Reducer.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/Reducer.kt new file mode 100644 index 0000000000..401c5470da --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/Reducer.kt @@ -0,0 +1,16 @@ +sealed interface Action { + data class SendMessage(val message: Message) : Action +} + +data class State( + val messages: List = emptyList() +) + +fun chatReducer(state: State, action: Action): State = + when (action) { + is Action.SendMessage -> { + state.copy( + messages = (state.messages + action.message).takeLast(100) + ) + } + } diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/SendMessage.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/SendMessage.kt new file mode 100644 index 0000000000..d6329dd140 --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/SendMessage.kt @@ -0,0 +1,54 @@ +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.Icon +import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text +import androidx.compose.material.TextField +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Send +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp + +@Composable +internal fun SendMessage(sendMessage: (String) -> Unit) { + var inputText by remember { mutableStateOf("") } + TextField( + modifier = Modifier.fillMaxWidth() + .background(MaterialTheme.colors.background) + .padding(10.dp), + value = inputText, + placeholder = { + Text("type message here") + }, + onValueChange = { + inputText = it + }, + trailingIcon = { + if (inputText.isNotEmpty()) { + Row( + modifier = Modifier + .clickable { + sendMessage(inputText) + inputText = "" + } + .padding(10.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Icon( + imageVector = Icons.Default.Send, + contentDescription = "Send", + tint = MaterialTheme.colors.primary + ) + Text("Send") + } + } + } + ) +} \ No newline at end of file diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/Store.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/Store.kt new file mode 100644 index 0000000000..4c6c7c1299 --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/Store.kt @@ -0,0 +1,35 @@ +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.channels.Channel +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.flow.consumeAsFlow +import kotlinx.coroutines.launch + +interface Store { + fun send(action: Action) + val stateFlow: StateFlow + val state get() = stateFlow.value +} + +fun CoroutineScope.createStore(): Store { + val mutableStateFlow = MutableStateFlow(State()) + val channel: Channel = Channel(Channel.UNLIMITED) + + return object : Store { + init { + launch { + channel.consumeAsFlow().collect { action -> + mutableStateFlow.value = chatReducer(mutableStateFlow.value, action) + } + } + } + + override fun send(action: Action) { + launch { + channel.send(action) + } + } + + override val stateFlow: StateFlow = mutableStateFlow + } +} diff --git a/experimental/examples/chat-mpp/src/commonMain/kotlin/currentTime.common.kt b/experimental/examples/chat-mpp/src/commonMain/kotlin/currentTime.common.kt new file mode 100644 index 0000000000..63f6928951 --- /dev/null +++ b/experimental/examples/chat-mpp/src/commonMain/kotlin/currentTime.common.kt @@ -0,0 +1,22 @@ +fun timeToString(timestampMs: Long): String { + val seconds = timestampMs + val minutes = seconds / 1000 / 60 + val hours = minutes / 24 + + val m = minutes % 60 + val h = hours % 24 + + val mm = if (m < 10) { + "0$m" + } else { + m.toString() + } + val hh = if (h < 10) { + "0$h" + } else { + h.toString() + } + return "$hh:$mm" +} + +expect fun timestampMs(): Long diff --git a/experimental/examples/chat-mpp/src/desktopMain/kotlin/currentTime.desktop.kt b/experimental/examples/chat-mpp/src/desktopMain/kotlin/currentTime.desktop.kt new file mode 100644 index 0000000000..12e4e07f7a --- /dev/null +++ b/experimental/examples/chat-mpp/src/desktopMain/kotlin/currentTime.desktop.kt @@ -0,0 +1,3 @@ +actual fun timestampMs(): Long { + return System.currentTimeMillis() +} diff --git a/experimental/examples/chat-mpp/src/desktopMain/kotlin/main.desktop.kt b/experimental/examples/chat-mpp/src/desktopMain/kotlin/main.desktop.kt new file mode 100644 index 0000000000..db2b97a4cb --- /dev/null +++ b/experimental/examples/chat-mpp/src/desktopMain/kotlin/main.desktop.kt @@ -0,0 +1,20 @@ +import androidx.compose.desktop.ui.tooling.preview.Preview +import androidx.compose.runtime.Composable +import androidx.compose.ui.unit.DpSize +import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.WindowState +import androidx.compose.ui.window.singleWindowApplication + +fun main() = + singleWindowApplication( + title = "Chat", + state = WindowState(size = DpSize(500.dp, 800.dp)) + ) { + ChatApp() + } + +@Preview +@Composable +fun ChatPreview() { + ChatApp() +} diff --git a/experimental/examples/chat-mpp/src/jsMain/kotlin/currentTime.js.kt b/experimental/examples/chat-mpp/src/jsMain/kotlin/currentTime.js.kt new file mode 100644 index 0000000000..c242ad0bd6 --- /dev/null +++ b/experimental/examples/chat-mpp/src/jsMain/kotlin/currentTime.js.kt @@ -0,0 +1,5 @@ +import kotlin.js.Date + +actual fun timestampMs(): Long { + return Date.now().toLong() +} diff --git a/experimental/examples/chat-mpp/src/jsMain/kotlin/main.js.kt b/experimental/examples/chat-mpp/src/jsMain/kotlin/main.js.kt new file mode 100644 index 0000000000..1fa9d98d97 --- /dev/null +++ b/experimental/examples/chat-mpp/src/jsMain/kotlin/main.js.kt @@ -0,0 +1,16 @@ +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.ui.Modifier +import androidx.compose.ui.window.Window +import org.jetbrains.skiko.wasm.onWasmReady + +fun main() { + onWasmReady { + Window("Chat") { + Column(modifier = Modifier.fillMaxSize()) { + ChatApp() + } + } + } +} + diff --git a/experimental/examples/chat-mpp/src/jsMain/resources/index.html b/experimental/examples/chat-mpp/src/jsMain/resources/index.html new file mode 100644 index 0000000000..60a68afca1 --- /dev/null +++ b/experimental/examples/chat-mpp/src/jsMain/resources/index.html @@ -0,0 +1,15 @@ + + + + + compose multiplatform web demo + + + + +
+ +
+ + + diff --git a/experimental/examples/chat-mpp/src/jsMain/resources/styles.css b/experimental/examples/chat-mpp/src/jsMain/resources/styles.css new file mode 100644 index 0000000000..e5b3293a7a --- /dev/null +++ b/experimental/examples/chat-mpp/src/jsMain/resources/styles.css @@ -0,0 +1,8 @@ +#root { + width: 100%; + height: 100vh; +} + +#root > .compose-web-column > div { + position: relative; +} \ No newline at end of file diff --git a/experimental/examples/chat-mpp/src/macosMain/kotlin/currentTime.macos.kt b/experimental/examples/chat-mpp/src/macosMain/kotlin/currentTime.macos.kt new file mode 100644 index 0000000000..0493656647 --- /dev/null +++ b/experimental/examples/chat-mpp/src/macosMain/kotlin/currentTime.macos.kt @@ -0,0 +1,6 @@ +import platform.Foundation.NSDate +import platform.Foundation.timeIntervalSince1970 + +actual fun timestampMs(): Long { + return NSDate().timeIntervalSince1970().toLong() +} diff --git a/experimental/examples/chat-mpp/src/macosMain/kotlin/main.macos.kt b/experimental/examples/chat-mpp/src/macosMain/kotlin/main.macos.kt new file mode 100644 index 0000000000..37edafc707 --- /dev/null +++ b/experimental/examples/chat-mpp/src/macosMain/kotlin/main.macos.kt @@ -0,0 +1,11 @@ +import androidx.compose.ui.window.Window +import platform.AppKit.NSApp +import platform.AppKit.NSApplication + +fun main() { + NSApplication.sharedApplication() + Window("Chat App") { + ChatApp() + } + NSApp?.run() +} diff --git a/experimental/examples/chat-mpp/src/uikitMain/kotlin/currentTime.uikit.kt b/experimental/examples/chat-mpp/src/uikitMain/kotlin/currentTime.uikit.kt new file mode 100644 index 0000000000..defd831606 --- /dev/null +++ b/experimental/examples/chat-mpp/src/uikitMain/kotlin/currentTime.uikit.kt @@ -0,0 +1,6 @@ +import platform.Foundation.NSDate +import platform.Foundation.timeIntervalSince1970 + +actual fun timestampMs(): Long { + return (NSDate().timeIntervalSince1970() * 1000).toLong() +} diff --git a/experimental/examples/chat-mpp/src/uikitMain/kotlin/main.uikit.kt b/experimental/examples/chat-mpp/src/uikitMain/kotlin/main.uikit.kt new file mode 100644 index 0000000000..68a627cf68 --- /dev/null +++ b/experimental/examples/chat-mpp/src/uikitMain/kotlin/main.uikit.kt @@ -0,0 +1,37 @@ +import androidx.compose.ui.window.Application +import kotlinx.cinterop.* +import platform.UIKit.* +import platform.Foundation.* + +fun main() { + val args = emptyArray() + memScoped { + val argc = args.size + 1 + val argv = (arrayOf("skikoApp") + args).map { it.cstr.ptr }.toCValues() + autoreleasepool { + UIApplicationMain(argc, argv, null, NSStringFromClass(SkikoAppDelegate)) + } + } +} + +class SkikoAppDelegate : UIResponder, UIApplicationDelegateProtocol { + companion object : UIResponderMeta(), UIApplicationDelegateProtocolMeta + + @ObjCObjectBase.OverrideInit + constructor() : super() + + private var _window: UIWindow? = null + override fun window() = _window + override fun setWindow(window: UIWindow?) { + _window = window + } + + override fun application(application: UIApplication, didFinishLaunchingWithOptions: Map?): Boolean { + window = UIWindow(frame = UIScreen.mainScreen.bounds) + window!!.rootViewController = Application("Chat") { + ChatApp() + } + window!!.makeKeyAndVisible() + return true + } +} diff --git a/experimental/examples/falling-balls-mpp/src/uikitMain/kotlin/main.uikit.kt b/experimental/examples/falling-balls-mpp/src/uikitMain/kotlin/main.uikit.kt index f7bfe98f1f..3a3b2321a3 100644 --- a/experimental/examples/falling-balls-mpp/src/uikitMain/kotlin/main.uikit.kt +++ b/experimental/examples/falling-balls-mpp/src/uikitMain/kotlin/main.uikit.kt @@ -3,7 +3,6 @@ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. */ -// Use `xcodegen` first, then `open ./ComposeFallingBalls.xcodeproj` and then Run button in XCode. import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.height diff --git a/experimental/examples/minesweeper/src/uikitMain/kotlin/main.uikit.kt b/experimental/examples/minesweeper/src/uikitMain/kotlin/main.uikit.kt index e6c6a8f286..6e5af18372 100644 --- a/experimental/examples/minesweeper/src/uikitMain/kotlin/main.uikit.kt +++ b/experimental/examples/minesweeper/src/uikitMain/kotlin/main.uikit.kt @@ -3,7 +3,6 @@ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file. */ -// Use `xcodegen` first, then `open ./ComposeMinesweeper.xcodeproj` and then Run button in XCode. import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.height