Update dependencies and migrate to Material 3

This commit updates various dependencies, including Kotlin, AGP, Compose, and kotlinx libraries. It also migrates the UI from Material Design 2 to Material Design 3, replacing MaterialTheme with MaterialTheme3 and using corresponding components. Specific changes include: - Upgrading Kotlin to 1.9.20 - Upgrading AGP to 8.2.1 - Upgrading Compose to 1 .7.0-alpha01 - Upgrading kotlinx-serialization-json to 1.6.3 - Upgrading kotlinx-datetime to 0.6.0 - Upgrading kotlinx-coroutines-swing to 1.8.1 - Replacing MaterialTheme with MaterialTheme3 - Using Material 3 components like Card, CardDefaults, HorizontalDivider, etc. - Removing unused imports and annotations.
SEAbdulbasit · Jul 15, 2024 · 411b75d · 411b75d
1 parent ca5c029
commit 411b75d
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 153 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -11,7 +11,7 @@ kotlin.native.useEmbeddableCompilerJar=true
 kotlin.native.binary.memoryModel=experimental
 kotlin.version=1.9.20
 agp.version=8.2.1
-compose.version=1.6.1
+compose.version=1.7.0-alpha01
 ktor.version=3.0.0-wasm2
 kotlin.js.ir.output.granularity=whole-program
 org.jetbrains.compose.experimental.wasm.enabled=true

diff --git a/iosApp/iosApp.xcodeproj/project.pbxproj b/iosApp/iosApp.xcodeproj/project.pbxproj
@@ -106,7 +106,6 @@
 				7555FF77242A565900829871 /* Sources */,
 				7555FF79242A565900829871 /* Resources */,
 				9964867F0862B4D9FB6ABFC7 /* Frameworks */,
-				A7AC019F9425ED83D40D7A80 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -161,23 +160,6 @@
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
-		A7AC019F9425ED83D40D7A80 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-input-files.xcfilelist",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-output-files.xcfilelist",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		E8D673591E7196AEA2EA10E2 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
@@ -63,7 +63,7 @@ kotlin {
             dependencies {
                 implementation(compose.ui)
                 implementation(compose.foundation)
-                implementation(compose.material)
+                implementation(compose.material3)
                 implementation(compose.runtime)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
@@ -75,8 +75,8 @@ kotlin {
                 implementation("io.ktor:ktor-client-serialization:$ktorVersion")
                 implementation("io.ktor:ktor-serialization-kotlinx-json:$ktorVersion")
                 implementation("io.ktor:ktor-client-content-negotiation:$ktorVersion")
-                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
-                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0-RC")
+                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")
+                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0")
 
                 val coilVersion = "3.0.0-SNAPSHOT"
                 implementation("io.coil-kt.coil3:coil-compose:$coilVersion")
@@ -89,7 +89,7 @@ kotlin {
 
         androidMain {
             dependencies {
-                implementation("com.google.android.material:material:1.11.0")
+                implementation("com.google.android.material:material:1.12.0")
                 implementation("io.ktor:ktor-client-okhttp:$ktorVersion")
 //                implementation("io.ktor:ktor-client-android:$ktorVersion")
             }
@@ -105,7 +105,7 @@ kotlin {
             dependencies {
                 implementation(compose.desktop.common)
                 implementation("io.ktor:ktor-client-java:$ktorVersion")
-                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.7.3")
+                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing:1.8.1")
             }
         }
 

diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/MainView.kt
@@ -1,36 +1,23 @@
 package com.example.travelapp_kmp
 
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.graphics.Color
 import com.example.travelapp_kmp.details.DetailScreen
 import com.example.travelapp_kmp.details.DetailScreenWeb
 import com.example.travelapp_kmp.listing.ListScreenViewModel
 import com.example.travelapp_kmp.listing.MainScreen
 import com.example.travelapp_kmp.screennavigation.Screen
 import com.example.travelapp_kmp.screennavigation.ScreensState
-import com.example.travelapp_kmp.style.TravelAppColors
 
 
 @Composable
 internal fun CommonView(isLargeScreen: Boolean = false) {
     val viewMode = ListScreenViewModel()
     val screenNavigationState = remember { mutableStateOf(ScreensState()) }
 
-    MaterialTheme(
-        colors = MaterialTheme.colors.copy(
-            primary = TravelAppColors.Foreground,
-            secondary = TravelAppColors.LightGray,
-            background = TravelAppColors.DarkGray,
-            surface = TravelAppColors.Gray,
-            onPrimary = TravelAppColors.Foreground,
-            onSecondary = Color.Black,
-            onBackground = TravelAppColors.Foreground,
-            onSurface = TravelAppColors.Foreground
-        )
-    ) {
+    MaterialTheme {
         when (val state = screenNavigationState.value.screen) {
             is Screen.DetailScreen -> if (isLargeScreen) {
                 DetailScreenWeb(

diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreen.kt
@@ -17,19 +17,20 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Card
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Star
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel
+import androidx.compose.material3.carousel.rememberCarouselState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -57,12 +58,9 @@ import com.example.travelapp_kmp.screennavigation.Screen
 import com.example.travelapp_kmp.screennavigation.ScreensState
 import com.example.travelapp_kmp.style.TravelAppColors
 import org.jetbrains.compose.resources.DrawableResource
-import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.painterResource
-import kotlin.random.Random
 
 
-@OptIn(ExperimentalResourceApi::class)
 @Composable
 internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPlace: TouristPlace) {
     Box {
@@ -79,7 +77,6 @@ internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPl
                 )
             }),
         )
-        // Custom toolbar containing the back button and title.
         Row(
             modifier = Modifier.fillMaxWidth().defaultMinSize(minHeight = 56.dp),
         ) {
@@ -100,7 +97,7 @@ internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPl
             }
             Text(
                 text = touristPlace.name,
-                style = MaterialTheme.typography.h6.copy(
+                style = MaterialTheme.typography.headlineMedium.copy(
                     fontWeight = FontWeight.Medium, color = Color.White
                 ),
                 modifier = Modifier.padding(16.dp)
@@ -111,10 +108,9 @@ internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPl
                 .verticalScroll(rememberScrollState())
         ) {
             Card(
-                elevation = 16.dp,
+                elevation = CardDefaults.elevatedCardElevation(),
                 modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp)
                     .aspectRatio(ratio = 335f / 280f).clip(RoundedCornerShape(15.dp)),
-                contentColor = Transparent,
             ) {
                 Box {
                     Image(
@@ -129,13 +125,13 @@ internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPl
                 }
             }
             Text(
-                text = touristPlace.name, style = MaterialTheme.typography.h5.copy(
+                text = touristPlace.name, style = MaterialTheme.typography.bodyLarge.copy(
                     fontWeight = FontWeight.Medium, color = Color.White
                 ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp)
             )
             Text(
                 text = touristPlace.longDescription,
-                style = MaterialTheme.typography.subtitle2.copy(
+                style = MaterialTheme.typography.bodyMedium.copy(
                     color = Color.White,
                     fontWeight = FontWeight.Normal,
                     letterSpacing = TextUnit(0.1f, TextUnitType.Em),
@@ -144,7 +140,7 @@ internal fun DetailScreen(navigationState: MutableState<ScreensState>, touristPl
                 modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 10.dp)
             )
             Text(
-                text = "Photos", style = MaterialTheme.typography.subtitle1.copy(
+                text = "Photos", style = MaterialTheme.typography.bodySmall.copy(
                     fontWeight = FontWeight.Medium, color = Color.White
                 ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp)
             )
@@ -194,61 +190,54 @@ internal fun IconWithText() {
             text = "4.8",
             modifier = Modifier.weight(1f, false).padding(top = 5.dp)
                 .align(Alignment.CenterHorizontally),
-            style = MaterialTheme.typography.subtitle1.copy(Color.White),
+            style = MaterialTheme.typography.bodySmall.copy(Color.White),
             fontWeight = FontWeight.Medium,
         )
         Text(
             text = "2,500 rvs",
             modifier = Modifier.weight(1f, false).padding(top = 5.dp)
                 .align(Alignment.CenterHorizontally),
-            style = MaterialTheme.typography.caption.copy(color = Color.White),
+            style = MaterialTheme.typography.bodySmall.copy(color = Color.White),
         )
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class, ExperimentalResourceApi::class)
+@OptIn(
+    ExperimentalMaterial3Api::class
+)
 @Composable
 internal fun ImageGallery(
     imagesList: List<DrawableResource>,
     onDetailsClicked: (DrawableResource) -> Unit,
     onImageLongClick: (DrawableResource) -> Unit
 ) {
-    LazyRow(
-        modifier = Modifier.padding(top = 16.dp, bottom = 16.dp).fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+
+    HorizontalMultiBrowseCarousel(
+        state = rememberCarouselState { imagesList.size },
+        modifier = Modifier.fillMaxWidth().height(221.dp).padding(16.dp),
+        preferredItemWidth = 186.dp,
+        itemSpacing = 8.dp,
         contentPadding = PaddingValues(horizontal = 16.dp)
-    ) {
-        items(items = imagesList, key = { Random.nextInt() }) { imageUrl ->
-            Card(
-                elevation = 16.dp,
-                modifier = Modifier.height(210.dp).aspectRatio(ratio = (139.0 / 210.0).toFloat())
-                    .clip(RoundedCornerShape(16.dp)),
-                contentColor = Transparent,
-            ) {
-                Box {
-                    Image(
-                        painter = painterResource(imageUrl),
-                        contentDescription = null,
-                        modifier = Modifier.height(210.dp)
-                            .aspectRatio(ratio = (139.0 / 210.0).toFloat())
-                            .background(TravelAppColors.SemiWhite)
-                            .pointerInput(Unit) {
-                                detectTapGestures(
-                                    onLongPress = {
-                                        // Notify client regarding the long press event.
-                                        onImageLongClick(imageUrl)
-                                    },
-                                    onTap = {
-                                        // Notify client regarding the single click event.
-                                        onDetailsClicked(imageUrl)
-                                    }
-                                )
-                            },
-                        contentScale = ContentScale.Crop,
+    ) { i ->
+        val item = imagesList[i]
+        Image(
+            painter = painterResource(item),
+            contentDescription = null,
+            modifier = Modifier.height(210.dp).maskClip(MaterialTheme.shapes.extraLarge)
+                .pointerInput(Unit) {
+                    detectTapGestures(
+                        onLongPress = {
+                            // Notify client regarding the long press event.
+                            onImageLongClick(item)
+                        },
+                        onTap = {
+                            // Notify client regarding the single click event.
+                            onDetailsClicked(item)
+                        }
                     )
-                }
-            }
-        }
+                },
+            contentScale = ContentScale.Crop,
+        )
     }
 }
 
@@ -258,7 +247,6 @@ internal fun ImageGallery(
  * @param imageResId [DrawableResource] to be shown.
  * @param onDismiss Notify client about dismiss event.
  */
-@OptIn(ExperimentalMaterialApi::class, ExperimentalResourceApi::class)
 @Composable
 internal fun ShowImagePopup(
     imageResId: DrawableResource,

diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/details/DetailsScreenWeb.kt
@@ -12,11 +12,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Card
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
@@ -29,7 +30,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.ExperimentalUnitApi
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.TextUnitType
 import androidx.compose.ui.unit.dp
@@ -38,13 +38,8 @@ import com.example.travelapp_kmp.screennavigation.Screen
 import com.example.travelapp_kmp.screennavigation.ScreensState
 import com.example.travelapp_kmp.style.TravelAppColors
 import org.jetbrains.compose.resources.DrawableResource
-import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.painterResource
 
-//import org.jetbrains.compose.resources.resource
-
-
-@OptIn(ExperimentalUnitApi::class, ExperimentalResourceApi::class)
 @Composable
 internal fun DetailScreenWeb(
     navigationState: MutableState<ScreensState>,
@@ -77,10 +72,9 @@ internal fun DetailScreenWeb(
                     colorFilter = ColorFilter.tint(color = Color.White),
                 )
                 Card(
-                    elevation = 16.dp,
+                    elevation = CardDefaults.cardElevation(),
                     modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp)
                         .aspectRatio(ratio = 335f / 280f).clip(RoundedCornerShape(15.dp)),
-                    contentColor = Color.Transparent,
                 ) {
                     Box {
                         Image(
@@ -113,13 +107,13 @@ internal fun DetailScreenWeb(
                 modifier = Modifier.weight(1f).verticalScroll(rememberScrollState())
             ) {
                 Text(
-                    text = touristPlace.name, style = MaterialTheme.typography.h5.copy(
+                    text = touristPlace.name, style = MaterialTheme.typography.headlineMedium.copy(
                         fontWeight = FontWeight.Medium, color = Color.White
                     ), modifier = Modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp)
                 )
                 Text(
                     text = touristPlace.longDescription,
-                    style = MaterialTheme.typography.subtitle2.copy(
+                    style = MaterialTheme.typography.bodyMedium.copy(
                         color = Color.White,
                         fontWeight = FontWeight.Normal,
                         letterSpacing = TextUnit(0.1f, TextUnitType.Em),

diff --git a/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt b/shared/src/commonMain/kotlin/com/example/travelapp_kmp/listing/CountriesList.kt
@@ -1,15 +1,14 @@
 package com.example.travelapp_kmp.listing
 
 import org.jetbrains.compose.resources.DrawableResource
-import org.jetbrains.compose.resources.ExperimentalResourceApi
 
-data class Country @OptIn(ExperimentalResourceApi::class) constructor(
+data class Country(
     val name: String,
     val flagIcon: DrawableResource? = null,
     val touristPlaces: List<TouristPlace>
 )
 
-data class TouristPlace @OptIn(ExperimentalResourceApi::class) constructor(
+data class TouristPlace(
     val name: String,
     val shortDescription: String,
     val longDescription: String,