Merge pull request #1 from luongvo/feat/migrate-to-compose-multiplatform

[feat] Migrate Android and iOS apps to Compose Multiplatform

androidApp/build.gradle.kts

@@ -58,8 +58,5 @@ dependencies {
     implementation("androidx.compose.ui:ui-tooling-preview:1.4.3")
     implementation("androidx.compose.foundation:foundation:1.4.3")
     implementation("androidx.compose.material:material:1.4.3")
-    implementation("androidx.compose.material3:material3:1.3.1")
     implementation("androidx.activity:activity-compose:1.7.2")
-    implementation("androidx.navigation:navigation-compose:2.5.2")
-    implementation("io.coil-kt:coil-compose:2.2.2")
 }

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/MainActivity.kt

@@ -3,6 +3,8 @@ package vn.luongvo.kmp.ecommerce.android
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import vn.luongvo.kmp.ecommerce.presentation.AppViewModel
+import vn.luongvo.kmp.ecommerce.presentation.MainApp
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {

androidApp/src/androidMain/res/values/strings.xml

@@ -1,9 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="app_name">ecommerce-kmp</string>
-
-    <string name="bottom_nav_account">Account</string>
-    <string name="bottom_nav_home">Home</string>
-    <string name="bottom_nav_menu">Menu</string>
-    <string name="bottom_nav_orders">Orders</string>
 </resources>

desktop/src/jvmMain/kotlin/Main.kt

@@ -1,8 +1,11 @@
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
+import vn.luongvo.kmp.ecommerce.presentation.AppViewModel
+import vn.luongvo.kmp.ecommerce.presentation.MainApp
 
 fun main() = application {
+    val viewModel = AppViewModel()
     Window(title = "ecommerce-kmp", onCloseRequest = ::exitApplication) {
-        // TODO
+        MainApp(viewModel)
     }
 }

iosApp/iosApp.xcodeproj/project.pbxproj

@@ -11,6 +11,7 @@
 		058557D9273AAEEB004C7B11 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 058557D8273AAEEB004C7B11 /* Preview Assets.xcassets */; };
 		2152FB042600AC8F00CF470E /* iOSApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2152FB032600AC8F00CF470E /* iOSApp.swift */; };
 		7555FF83242A565900829871 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7555FF82242A565900829871 /* ContentView.swift */; };
+		78379A432A70E0A4008275B9 /* ComposeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 78379A422A70E0A4008275B9 /* ComposeView.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -33,6 +34,7 @@
 		7555FF7B242A565900829871 /* iosApp.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = iosApp.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		7555FF82242A565900829871 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
 		7555FF8C242A565B00829871 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		78379A422A70E0A4008275B9 /* ComposeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComposeView.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -79,6 +81,7 @@
 				7555FF8C242A565B00829871 /* Info.plist */,
 				2152FB032600AC8F00CF470E /* iOSApp.swift */,
 				058557D7273AAEEB004C7B11 /* Preview Content */,
+				78379A422A70E0A4008275B9 /* ComposeView.swift */,
 			);
 			path = iosApp;
 			sourceTree = "<group>";
@@ -182,6 +185,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				78379A432A70E0A4008275B9 /* ComposeView.swift in Sources */,
 				2152FB042600AC8F00CF470E /* iOSApp.swift in Sources */,
 				7555FF83242A565900829871 /* ContentView.swift in Sources */,
 			);

iosApp/iosApp/ComposeView.swift

@@ -0,0 +1,14 @@
+
+import Foundation
+import SwiftUI
+import shared
+
+struct ComposeView: UIViewControllerRepresentable {
+    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
+        // ignore
+    }
+
+    func makeUIViewController(context: Context) -> some UIViewController {
+        MainKt.MainViewController()
+    }
+}

iosApp/iosApp/ContentView.swift

@@ -1,13 +1,14 @@
 import SwiftUI
+import shared
 
 struct ContentView: View {
-    var body: some View {
-        Text("Home")
-    }
+   var body: some View {
+      ComposeView()
+   }
 }
 
 struct ContentView_Previews: PreviewProvider {
-    static var previews: some View {
-        ContentView()
-    }
+	static var previews: some View {
+		ContentView()
+	}
 }

settings.gradle.kts

@@ -34,4 +34,5 @@ dependencyResolutionManagement {
 
 rootProject.name = "ecommerce-kmp"
 include(":androidApp")
+include(":desktop")
 include(":shared")

shared/build.gradle.kts

@@ -1,6 +1,8 @@
 plugins {
     kotlin("multiplatform")
+    kotlin("plugin.compose")
     id("com.android.library")
+    id("org.jetbrains.compose")
     kotlin("plugin.serialization")
 }
 
@@ -37,6 +39,14 @@ kotlin {
     sourceSets {
         val commonMain by getting {
             dependencies {
+                implementation(compose.runtime)
+                implementation(compose.foundation)
+                implementation(compose.material3)
+                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.components.resources)
+                implementation("org.jetbrains.androidx.navigation:navigation-compose:2.7.0-alpha07")
+                implementation("io.github.qdsfdhvh:image-loader:1.9.0")
+
                 // Ktor
                 val ktorVersion = extra["ktor.version"] as String
                 implementation("io.ktor:ktor-client-core:$ktorVersion")
@@ -65,6 +75,8 @@ kotlin {
         }
         val androidMain by getting {
             dependencies {
+                implementation(compose.uiTooling)
+
                 val ktorVersion = extra["ktor.version"] as String
                 implementation("io.ktor:ktor-client-okhttp:$ktorVersion")
             }

shared/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/screens/main/home/HomeScreenPreview.kt

@@ -0,0 +1,25 @@
+package vn.luongvo.kmp.ecommerce.presentation.screens.main.home
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import vn.luongvo.kmp.ecommerce.data.model.PostResponse
+import vn.luongvo.kmp.ecommerce.presentation.theme.ComposeTheme
+
+@Preview(showSystemUi = true)
+@Composable
+private fun HomeScreenPreview() {
+    ComposeTheme {
+        HomeScreenContent(
+            isLoading = false,
+            posts = listOf(
+                PostResponse(
+                    id = "1",
+                    userId = "1",
+                    title = "title",
+                    body = "body",
+                )
+            ),
+            error = null,
+        )
+    }
+}

shared/src/commonMain/composeResources/values/strings.xml

@@ -0,0 +1,6 @@
+<resources>
+    <string name="bottom_nav_account">Account</string>
+    <string name="bottom_nav_home">Home</string>
+    <string name="bottom_nav_menu">Menu</string>
+    <string name="bottom_nav_orders">Orders</string>
+</resources>

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/AppState.kt → shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/AppState.kt

@@ -1,4 +1,4 @@
-package vn.luongvo.kmp.ecommerce.android
+package vn.luongvo.kmp.ecommerce.presentation
 
 data class AppState(
     val isLoading: Boolean,

shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/AppViewModel.kt

@@ -0,0 +1,3 @@
+package vn.luongvo.kmp.ecommerce.presentation
+
+class AppViewModel

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/MainApp.kt → shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/MainApp.kt

@@ -1,12 +1,12 @@
-package vn.luongvo.kmp.ecommerce.android
+package vn.luongvo.kmp.ecommerce.presentation
 
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import vn.luongvo.kmp.ecommerce.android.main.MainScreen
-import vn.luongvo.kmp.ecommerce.android.theme.AppTheme
-import vn.luongvo.kmp.ecommerce.android.theme.ComposeTheme
+import vn.luongvo.kmp.ecommerce.presentation.screens.main.MainScreen
+import vn.luongvo.kmp.ecommerce.presentation.theme.AppTheme
+import vn.luongvo.kmp.ecommerce.presentation.theme.ComposeTheme
 
 @Composable
 fun MainApp(

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/base/BaseAppDestination.kt → shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/base/BaseAppDestination.kt

@@ -1,4 +1,4 @@
-package vn.luongvo.kmp.ecommerce.android.base
+package vn.luongvo.kmp.ecommerce.presentation.base
 
 abstract class BaseAppDestination(val route: String = "") {
 

shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/AccountAppDestination.kt

@@ -0,0 +1,8 @@
+package vn.luongvo.kmp.ecommerce.presentation.navigation
+
+import vn.luongvo.kmp.ecommerce.presentation.base.BaseAppDestination
+
+class AccountAppDestination : BaseAppDestination() {
+
+    object Account : BaseAppDestination("account")
+}

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/navigation/AppDestination.kt → shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/AppDestination.kt

@@ -1,6 +1,6 @@
-package vn.luongvo.kmp.ecommerce.android.navigation
+package vn.luongvo.kmp.ecommerce.presentation.navigation
 
-import vn.luongvo.kmp.ecommerce.android.base.BaseAppDestination
+import vn.luongvo.kmp.ecommerce.presentation.base.BaseAppDestination
 
 sealed class AppDestination : BaseAppDestination() {
 

shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/HomeAppDestination.kt

@@ -0,0 +1,8 @@
+package vn.luongvo.kmp.ecommerce.presentation.navigation
+
+import vn.luongvo.kmp.ecommerce.presentation.base.BaseAppDestination
+
+class HomeAppDestination : BaseAppDestination() {
+
+    object Home : BaseAppDestination("home")
+}

androidApp/src/androidMain/kotlin/vn/luongvo/kmp/ecommerce/android/navigation/MainBottomNavGraph.kt → shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/MainBottomNavGraph.kt

@@ -1,14 +1,14 @@
-package vn.luongvo.kmp.ecommerce.android.navigation
+package vn.luongvo.kmp.ecommerce.presentation.navigation
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
-import vn.luongvo.kmp.ecommerce.android.main.account.AccountScreen
-import vn.luongvo.kmp.ecommerce.android.main.home.HomeScreen
-import vn.luongvo.kmp.ecommerce.android.main.menu.MenuScreen
-import vn.luongvo.kmp.ecommerce.android.main.orders.OrdersScreen
+import vn.luongvo.kmp.ecommerce.presentation.screens.main.account.AccountScreen
+import vn.luongvo.kmp.ecommerce.presentation.screens.main.home.HomeScreen
+import vn.luongvo.kmp.ecommerce.presentation.screens.main.menu.MenuScreen
+import vn.luongvo.kmp.ecommerce.presentation.screens.main.orders.OrdersScreen
 
 @Composable
 fun MainBottomNavGraph(

shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/MenuAppDestination.kt

@@ -0,0 +1,8 @@
+package vn.luongvo.kmp.ecommerce.presentation.navigation
+
+import vn.luongvo.kmp.ecommerce.presentation.base.BaseAppDestination
+
+sealed class MenuAppDestination : BaseAppDestination() {
+
+    object Menu : BaseAppDestination("menu")
+}

shared/src/commonMain/kotlin/vn/luongvo/kmp/ecommerce/presentation/navigation/OrdersAppDestination.kt

@@ -0,0 +1,8 @@
+package vn.luongvo.kmp.ecommerce.presentation.navigation
+
+import vn.luongvo.kmp.ecommerce.presentation.base.BaseAppDestination
+
+class OrdersAppDestination : BaseAppDestination() {
+
+    object Orders : BaseAppDestination("orders")
+}