Merge pull request #89 from RajashekarRaju/shreyas/refactor-components

Design System Component Usage Test – Image, Card, Surface
RajashekarRaju · Feb 15, 2025 · a56738d · a56738d
2 parents ccccb94 + a802b7a
commit a56738d
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 258 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/app/src/main/java/com/developersbreach/composeactors/ui/components/NetworkImage.kt b/app/src/main/java/com/developersbreach/composeactors/ui/components/NetworkImage.kt
@@ -1,6 +1,5 @@
 package com.developersbreach.composeactors.ui.components
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -11,6 +10,7 @@ import androidx.compose.ui.layout.ContentScale
 import coil.compose.rememberImagePainter
 import com.developersbreach.composeactors.R
 import com.developersbreach.composeactors.ui.screens.actorDetails.ActorDetailsScreen
+import com.developersbreach.designsystem.components.CaImage
 
 /**
  * Reusable composable used in all screens to load image.
@@ -29,7 +29,7 @@ fun LoadNetworkImage(
     shape: Shape,
     showAnimProgress: Boolean = true
 ) {
-    Image(
+    CaImage(
         painter = rememberImagePainter(
             data = imageUrl,
             builder = {

diff --git a/app/src/main/java/com/developersbreach/composeactors/ui/screens/about/AboutScreen.kt b/app/src/main/java/com/developersbreach/composeactors/ui/screens/about/AboutScreen.kt
@@ -1,13 +1,11 @@
 package com.developersbreach.composeactors.ui.screens.about
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -25,58 +23,61 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.developersbreach.composeactors.R
 import com.developersbreach.composeactors.ui.theme.ComposeActorsTheme
+import com.developersbreach.designsystem.components.CaImage
 import com.developersbreach.designsystem.components.CaScaffold
+import com.developersbreach.designsystem.components.CaSurface
 
 @OptIn(ExperimentalTextApi::class)
 @Composable
 fun AboutScreen(
     navigateUp: () -> Unit
 ) {
-    Surface(
-        color = MaterialTheme.colors.background,
-    ) {
-        CaScaffold(
-            modifier = Modifier,
-            topBar = {
-                AboutTopAppBar(navigateUp = navigateUp)
-            },
-            content = { paddingValues ->
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(paddingValues = paddingValues)
-                ) {
-                    Image(
-                        painter = painterResource(id = R.drawable.ic_tmdb_logo),
-                        contentDescription = stringResource(id = R.string.cd_tmdb_api_attribution_logo),
-                        modifier = Modifier
-                            .padding(80.dp)
-                            .fillMaxWidth()
-                            .wrapContentHeight()
-                    )
 
-                    Text(
-                        text = stringResource(id = R.string.tmdb_api_attribution),
-                        modifier = Modifier.padding(horizontal = 40.dp),
-                        style = TextStyle(
-                            lineHeight = 24.sp,
-                            fontWeight = FontWeight.Normal,
-                            fontSize = 20.sp,
-                            textAlign = TextAlign.Center,
-                            brush = Brush.linearGradient(
-                                listOf(
-                                    Color(0xFF90CEA1),
-                                    Color(0xFF3CBEC9),
-                                    Color(0xFF00B3E5)
+    CaSurface(
+        color = MaterialTheme.colors.background,
+        content = {
+                CaScaffold(
+                    modifier = Modifier,
+                    topBar = {
+                        AboutTopAppBar(navigateUp = navigateUp)
+                    },
+                    content = { paddingValues ->
+                        Column(
+                            horizontalAlignment = Alignment.CenterHorizontally,
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .padding(paddingValues = paddingValues)
+                        ) {
+                            CaImage(
+                                painter = painterResource(id = R.drawable.ic_tmdb_logo),
+                                contentDescription = stringResource(id = R.string.cd_tmdb_api_attribution_logo),
+                                modifier = Modifier
+                                    .padding(80.dp)
+                                    .fillMaxWidth()
+                                    .wrapContentHeight()
+                            )
+                            Text(
+                                text = stringResource(id = R.string.tmdb_api_attribution),
+                                modifier = Modifier.padding(horizontal = 40.dp),
+                                style = TextStyle(
+                                    lineHeight = 24.sp,
+                                    fontWeight = FontWeight.Normal,
+                                    fontSize = 20.sp,
+                                    textAlign = TextAlign.Center,
+                                    brush = Brush.linearGradient(
+                                        listOf(
+                                            Color(0xFF90CEA1),
+                                            Color(0xFF3CBEC9),
+                                            Color(0xFF00B3E5)
+                                        )
+                                    )
                                 )
                             )
-                        )
-                    )
-                }
-            }
-        )
-    }
+                        }
+                    }
+                )
+        }
+    )
 }
 
 @Preview(showBackground = true)

diff --git a/.../com/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorBiography.kt b/.../com/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorBiography.kt
@@ -1,6 +1,5 @@
 package com.developersbreach.composeactors.ui.screens.actorDetails.composables
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -22,6 +21,7 @@ import androidx.compose.ui.unit.sp
 import com.developersbreach.composeactors.R
 import com.developersbreach.composeactors.ui.components.CategoryTitle
 import com.developersbreach.composeactors.ui.components.verticalGradientScrim
+import com.developersbreach.designsystem.components.CaImage
 
 /**
  * @param biography shows paragraph with gradient background drawn from image.
@@ -47,14 +47,13 @@ internal fun ActorBiography(
         Row(
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Image(
+            CaImage(
                 painter = painterResource(id = R.drawable.ic_biography),
                 contentDescription = stringResource(id = R.string.cd_biography_icon),
                 colorFilter = ColorFilter.tint(color = MaterialTheme.colors.onSurface),
                 alpha = 0.5f,
                 modifier = Modifier.size(36.dp),
             )
-
             CategoryTitle(
                 title = stringResource(R.string.cast_biography_title)
             )

diff --git a/...m/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorCastedMovies.kt b/...m/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorCastedMovies.kt
@@ -1,6 +1,5 @@
 package com.developersbreach.composeactors.ui.screens.actorDetails.composables
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
@@ -22,6 +21,7 @@ import com.developersbreach.composeactors.data.movie.model.Movie
 import com.developersbreach.composeactors.ui.components.CategoryTitle
 import com.developersbreach.composeactors.ui.components.LoadNetworkImage
 import com.developersbreach.composeactors.ui.screens.actorDetails.ActorDetailsData
+import com.developersbreach.designsystem.components.CaImage
 import kotlinx.coroutines.Job
 
 /**
@@ -38,7 +38,7 @@ internal fun ActorCastedMovies(
     Row(
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Image(
+        CaImage(
             painter = painterResource(id = R.drawable.ic_movies_cast),
             contentDescription = stringResource(R.string.cd_cast_icon),
             colorFilter = ColorFilter.tint(color = MaterialTheme.colors.onSurface),
@@ -47,7 +47,6 @@ internal fun ActorCastedMovies(
                 .padding(start = 12.dp)
                 .size(36.dp)
         )
-
         CategoryTitle(
             title = stringResource(R.string.cast_movie_title)
         )

diff --git a/...com/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorInfoHeader.kt b/...com/developersbreach/composeactors/ui/screens/actorDetails/composables/ActorInfoHeader.kt
@@ -1,6 +1,5 @@
 package com.developersbreach.composeactors.ui.screens.actorDetails.composables
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -25,6 +24,7 @@ import com.developersbreach.composeactors.ui.theme.ComposeActorsTheme
 import com.developersbreach.composeactors.utils.calculateAge
 import com.developersbreach.composeactors.utils.getPlaceOfBirth
 import com.developersbreach.composeactors.utils.getPopularity
+import com.developersbreach.designsystem.components.CaImage
 
 /**
  * Row with 3 elements which shows actor details just below actor image.
@@ -121,8 +121,8 @@ private fun CountryInfo(
         Box(
             modifier = Modifier.borderRevealAnimation()
         ) {
-            Image(
-                painterResource(id = R.drawable.ic_globe),
+            CaImage(
+                painter = painterResource(id = R.drawable.ic_globe),
                 contentDescription = stringResource(R.string.cd_place_of_birth_icon),
                 colorFilter = ColorFilter.tint(color = MaterialTheme.colors.onSurface),
                 modifier = Modifier