Skip to content

Commit 3b765ce

Browse files
nsh07nsh07
committed
feat: Migrate to Compose Multiplatform
1 parent c648aa2 commit 3b765ce

File tree

22 files changed

+3556
-59
lines changed

22 files changed

+3556
-59
lines changed

‎.gitignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
*.iml
2+
.kotlin
3+
.gradle
4+
.idea
5+
**/build/
6+
xcuserdata
7+
!src/**/build/
8+
local.properties
9+
.DS_Store
10+
captures
11+
.externalNativeBuild
12+
.cxx
13+
*.xcodeproj/*
14+
!*.xcodeproj/project.pbxproj
15+
!*.xcodeproj/xcshareddata/
16+
!*.xcodeproj/project.xcworkspace/
17+
!*.xcworkspace/contents.xcworkspacedata
18+
**/xcshareddata/WorkspaceSettings.xcsettings

‎build.gradle.kts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
plugins {
2+
// this is necessary to avoid the plugins to be loaded multiple times
3+
// in each subproject's classloader
4+
alias(libs.plugins.composeMultiplatform) apply false
5+
alias(libs.plugins.composeCompiler) apply false
6+
alias(libs.plugins.kotlinMultiplatform) apply false
7+
}

‎composeApp/build.gradle.kts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
3+
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
4+
5+
plugins {
6+
alias(libs.plugins.kotlinMultiplatform)
7+
alias(libs.plugins.composeMultiplatform)
8+
alias(libs.plugins.composeCompiler)
9+
}
10+
11+
kotlin {
12+
@OptIn(ExperimentalWasmDsl::class)
13+
wasmJs {
14+
outputModuleName.set("composeApp")
15+
browser {
16+
val rootDirPath = project.rootDir.path
17+
val projectDirPath = project.projectDir.path
18+
commonWebpackConfig {
19+
outputFileName = "composeApp.js"
20+
devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
21+
static = (static ?: mutableListOf()).apply {
22+
// Serve sources to debug inside browser
23+
add(rootDirPath)
24+
add(projectDirPath)
25+
}
26+
}
27+
}
28+
}
29+
binaries.executable()
30+
}
31+
32+
sourceSets {
33+
commonMain.dependencies {
34+
implementation(compose.runtime)
35+
implementation(compose.foundation)
36+
implementation(compose.material3)
37+
implementation(compose.ui)
38+
implementation(compose.components.resources)
39+
implementation(compose.components.uiToolingPreview)
40+
implementation(libs.androidx.lifecycle.viewmodelCompose)
41+
implementation(libs.androidx.lifecycle.runtimeCompose)
42+
}
43+
commonTest.dependencies {
44+
implementation(libs.kotlin.test)
45+
}
46+
}
47+
}
48+
49+

‎composeApp/src/wasmJsMain/composeResources/drawable/compose-multiplatform.xml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<vector
2+
xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:aapt="http://schemas.android.com/aapt"
4+
android:width="450dp"
5+
android:height="450dp"
6+
android:viewportWidth="64"
7+
android:viewportHeight="64">
8+
<path
9+
android:pathData="M56.25,18V46L32,60 7.75,46V18L32,4Z"
10+
android:fillColor="#6075f2"/>
11+
<path
12+
android:pathData="m41.5,26.5v11L32,43V60L56.25,46V18Z"
13+
android:fillColor="#6b57ff"/>
14+
<path
15+
android:pathData="m32,43 l-9.5,-5.5v-11L7.75,18V46L32,60Z">
16+
<aapt:attr name="android:fillColor">
17+
<gradient
18+
android:centerX="23.131"
19+
android:centerY="18.441"
20+
android:gradientRadius="42.132"
21+
android:type="radial">
22+
<item android:offset="0" android:color="#FF5383EC"/>
23+
<item android:offset="0.867" android:color="#FF7F52FF"/>
24+
</gradient>
25+
</aapt:attr>
26+
</path>
27+
<path
28+
android:pathData="M22.5,26.5 L32,21 41.5,26.5 56.25,18 32,4 7.75,18Z">
29+
<aapt:attr name="android:fillColor">
30+
<gradient
31+
android:startX="44.172"
32+
android:startY="4.377"
33+
android:endX="17.973"
34+
android:endY="34.035"
35+
android:type="linear">
36+
<item android:offset="0" android:color="#FF33C3FF"/>
37+
<item android:offset="0.878" android:color="#FF5383EC"/>
38+
</gradient>
39+
</aapt:attr>
40+
</path>
41+
<path
42+
android:pathData="m32,21 l9.526,5.5v11L32,43 22.474,37.5v-11z"
43+
android:fillColor="#000000"/>
44+
</vector>

‎composeApp/src/wasmJsMain/composeResources/drawable/hourglass.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:tint="#000000"
5+
android:viewportWidth="960"
6+
android:viewportHeight="960">
7+
<path
8+
android:fillColor="#FFFFFF"
9+
android:pathData="M320,800h320v-120q0,-66 -47,-113t-113,-47q-66,0 -113,47t-47,113v120ZM480,440q66,0 113,-47t47,-113v-120L320,160v120q0,66 47,113t113,47ZM200,880q-17,0 -28.5,-11.5T160,840q0,-17 11.5,-28.5T200,800h40v-120q0,-61 28.5,-114.5T348,480q-51,-32 -79.5,-85.5T240,280v-120h-40q-17,0 -28.5,-11.5T160,120q0,-17 11.5,-28.5T200,80h560q17,0 28.5,11.5T800,120q0,17 -11.5,28.5T760,160h-40v120q0,61 -28.5,114.5T612,480q51,32 79.5,85.5T720,680v120h40q17,0 28.5,11.5T800,840q0,17 -11.5,28.5T760,880L200,880ZM480,800ZM480,160Z" />
10+
</vector>

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/App.kt‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
package org.nsh07.nsh07
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.material3.CircularWavyProgressIndicator
8+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
9+
import androidx.compose.material3.Scaffold
10+
import androidx.compose.material3.Text
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.text.style.TextAlign
15+
import androidx.compose.ui.unit.dp
16+
import androidx.compose.ui.unit.sp
17+
import org.nsh07.nsh07.ui.theme.Nsh07Theme
18+
19+
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
20+
@Composable
21+
fun App() {
22+
Nsh07Theme {
23+
Scaffold {
24+
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
25+
Column(
26+
horizontalAlignment = Alignment.CenterHorizontally,
27+
verticalArrangement = Arrangement.spacedBy(16.dp)
28+
) {
29+
CircularWavyProgressIndicator()
30+
Text("Coming Soon...", fontSize = 64.sp, textAlign = TextAlign.Center, lineHeight = 68.sp)
31+
}
32+
}
33+
}
34+
}
35+
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/main.kt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
package org.nsh07.nsh07
2+
3+
import androidx.compose.ui.ExperimentalComposeUiApi
4+
import androidx.compose.ui.window.ComposeViewport
5+
import kotlinx.browser.document
6+
7+
@OptIn(ExperimentalComposeUiApi::class)
8+
fun main() {
9+
ComposeViewport(document.body!!) {
10+
App()
11+
}
12+
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/theme/Color.kt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
package org.nsh07.nsh07.ui.theme
2+
3+
import androidx.compose.ui.graphics.Color
4+
5+
val Purple80 = Color(0xFFD0BCFF)
6+
val PurpleGrey80 = Color(0xFFCCC2DC)
7+
val Pink80 = Color(0xFFEFB8C8)
8+
9+
val Purple40 = Color(0xFF6650a4)
10+
val PurpleGrey40 = Color(0xFF625b71)
11+
val Pink40 = Color(0xFF7D5260)

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/theme/Theme.kt‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
package org.nsh07.nsh07.ui.theme
2+
3+
import androidx.compose.foundation.isSystemInDarkTheme
4+
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
5+
import androidx.compose.material3.MaterialExpressiveTheme
6+
import androidx.compose.material3.MaterialTheme.typography
7+
import androidx.compose.material3.darkColorScheme
8+
import androidx.compose.material3.lightColorScheme
9+
import androidx.compose.runtime.Composable
10+
11+
private val DarkColorScheme = darkColorScheme(
12+
primary = Purple80,
13+
secondary = PurpleGrey80,
14+
tertiary = Pink80
15+
)
16+
17+
private val LightColorScheme = lightColorScheme(
18+
primary = Purple40,
19+
secondary = PurpleGrey40,
20+
tertiary = Pink40
21+
22+
/* Other default colors to override
23+
background = Color(0xFFFFFBFE),
24+
surface = Color(0xFFFFFBFE),
25+
onPrimary = Color.White,
26+
onSecondary = Color.White,
27+
onTertiary = Color.White,
28+
onBackground = Color(0xFF1C1B1F),
29+
onSurface = Color(0xFF1C1B1F),
30+
*/
31+
)
32+
33+
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
34+
@Composable
35+
fun Nsh07Theme(
36+
darkTheme: Boolean = isSystemInDarkTheme(),
37+
// Dynamic color is available on Android 12+
38+
content: @Composable () -> Unit
39+
) {
40+
val colorScheme = when (darkTheme) {
41+
true -> DarkColorScheme
42+
else -> LightColorScheme
43+
}
44+
45+
MaterialExpressiveTheme(
46+
colorScheme = colorScheme,
47+
typography = typography,
48+
content = content
49+
)
50+
}

‎composeApp/src/wasmJsMain/resources/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>nsh07</title>
7+
<link type="text/css" rel="stylesheet" href="styles.css">
8+
<script type="application/javascript" src="composeApp.js"></script>
9+
</head>
10+
<body>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)