merge base branch

androidApp/build.gradle.kts

@@ -85,6 +85,7 @@ dependencies {
     implementation(libs.androidx.activity.compose)
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.accompanist.systemuicontroller)
+    implementation(libs.accompanist.placeholder.material)
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.tooling)
     implementation(libs.androidx.compose.material)

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/resources/AndroidImageProvider.kt

@@ -1,9 +1,18 @@
 package com.mirego.kmp.boilerplate.app.resources
 
 import android.content.Context
+import com.mirego.kmp.boilerplate.R
+import com.mirego.kmp.boilerplate.viewmodel.common.SharedImageResource
 import com.mirego.trikot.viewmodels.declarative.configuration.VMDImageProvider
 import com.mirego.trikot.viewmodels.declarative.properties.VMDImageResource
 
 class AndroidImageProvider : VMDImageProvider {
-    override fun resourceIdForResource(resource: VMDImageResource, context: Context) = null
+    override fun resourceIdForResource(resource: VMDImageResource, context: Context) = when(resource) {
+        is SharedImageResource -> when(resource) {
+            SharedImageResource.emptyPageIcon -> R.drawable.baseline_question_mark_24
+            SharedImageResource.errorPageIcon -> R.drawable.baseline_warning_24
+            SharedImageResource.imagePlaceholder -> R.drawable.baseline_image_24
+        }
+        else -> null
+    }
 }

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/common/EmptyContentView.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
@@ -25,10 +26,11 @@ import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.VMDImage
 import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.VMDText
 
 @Composable
-fun EmptyContentView(emptyViewModel: EmptyViewModel) {
+fun EmptyContentView(emptyViewModel: EmptyViewModel, modifier: Modifier = Modifier) {
     val viewModel: EmptyViewModel by emptyViewModel.observeAsState()
     Column(
-        modifier = Modifier.fillMaxSize()
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
         VMDImage(
             modifier = Modifier.size(55.dp),
@@ -39,13 +41,15 @@ fun EmptyContentView(emptyViewModel: EmptyViewModel) {
         VMDText(
             modifier = Modifier.padding(top = padding * 2),
             viewModel = viewModel.title,
+            color = Color.White,
             style = style(TextSize.LARGE_TITLE, TextWeight.REGULAR),
             maxLines = 1
         )
 
         VMDText(
             modifier = Modifier.padding(top = padding),
-            viewModel = viewModel.title,
+            viewModel = viewModel.message,
+            color = Color.White,
             style = style(TextSize.BODY, TextWeight.REGULAR),
             textAlign = TextAlign.Center
         )

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/common/ErrorView.kt

@@ -1,7 +1,9 @@
 package com.mirego.kmp.boilerplate.app.ui.common
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 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.size
@@ -34,12 +36,14 @@ import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.VMDText
 
 @Composable
 fun ErrorView(errorViewModel: ErrorViewModel) {
+    val iconPadding = 4.dp
     val viewModel: ErrorViewModel by errorViewModel.observeAsState()
     Column(
         modifier = Modifier
             .statusBarsPadding()
-            .fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
     ) {
         VMDImage(
             modifier = Modifier.size(55.dp),
@@ -48,7 +52,7 @@ fun ErrorView(errorViewModel: ErrorViewModel) {
         )
 
         VMDText(
-            modifier = Modifier.padding(top = padding * 2),
+            modifier = Modifier.padding(top = padding * 2 - iconPadding),
             viewModel = viewModel.title,
             style = style(TextSize.LARGE_TITLE, TextWeight.REGULAR),
             color = Color.White,
@@ -66,12 +70,12 @@ fun ErrorView(errorViewModel: ErrorViewModel) {
         VMDButton(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = padding)
                 .widthIn(max = 320.dp)
-                .padding(vertical = 12.dp)
-                .clip(RoundedCornerShape(16.dp))
+                .padding(top = padding * 2)
+                .padding(horizontal = padding * 2)
+                .clip(RoundedCornerShape(percent = 50))
                 .background(Color.Red)
-                .padding(top = padding * 2),
+                .padding(vertical = 12.dp),
             viewModel = viewModel.retryButton,
         ) { content ->
             Text(

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/common/Utils.kt

@@ -0,0 +1,17 @@
+package com.mirego.kmp.boilerplate.app.ui.common
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import com.google.accompanist.placeholder.PlaceholderHighlight
+import com.google.accompanist.placeholder.placeholder
+import com.google.accompanist.placeholder.shimmer
+import com.mirego.kmp.boilerplate.app.ui.theme.ShimmerBackground
+import com.mirego.kmp.boilerplate.app.ui.theme.ShimmerHighlight
+
+fun Modifier.loading(isLoading: Boolean) = this.then(
+    placeholder(
+        visible = isLoading,
+        highlight = PlaceholderHighlight.shimmer(highlightColor = Color.ShimmerHighlight),
+        color = Color.ShimmerBackground
+    )
+)

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/projects/ProjectsContentView.kt

@@ -1,15 +1,18 @@
 package com.mirego.kmp.boilerplate.app.ui.projects
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -18,12 +21,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.mirego.kmp.boilerplate.app.ui.common.Const.padding
 import com.mirego.kmp.boilerplate.app.ui.common.EmptyContentView
+import com.mirego.kmp.boilerplate.app.ui.common.loading
 import com.mirego.kmp.boilerplate.app.ui.preview.PreviewProvider
 import com.mirego.kmp.boilerplate.app.ui.theme.AccentOrange
 import com.mirego.kmp.boilerplate.app.ui.theme.TextSize
@@ -33,8 +38,11 @@ import com.mirego.kmp.boilerplate.viewmodel.projects.ProjectItem
 import com.mirego.kmp.boilerplate.viewmodel.projects.ProjectsContentSection
 import com.mirego.trikot.viewmodels.declarative.components.VMDListViewModel
 import com.mirego.trikot.viewmodels.declarative.compose.extensions.observeAsState
+import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.LocalImage
+import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.PlaceholderState
 import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.VMDImage
 import com.mirego.trikot.viewmodels.declarative.compose.viewmodel.VMDLazyColumn
+import com.mirego.trikot.viewmodels.declarative.properties.VMDImageResource
 
 @Composable
 fun ProjectsContentView(listViewModel: VMDListViewModel<ProjectsContentSection>) {
@@ -48,7 +56,10 @@ fun ProjectsContentView(listViewModel: VMDListViewModel<ProjectsContentSection>)
     ) { section ->
         when (section) {
             is ProjectsContentSection.Header -> HeaderView(header = section)
-            is ProjectsContentSection.NoProjects -> EmptyContentView(emptyViewModel = section.emptyViewModel)
+            is ProjectsContentSection.NoProjects -> EmptyContentView(
+                emptyViewModel = section.emptyViewModel,
+                modifier = Modifier.padding(top = 100.dp)
+            )
             is ProjectsContentSection.ProjectsList -> ProjectsListView(viewModel = section.viewModel)
         }
     }
@@ -80,9 +91,8 @@ private fun HeaderView(header: ProjectsContentSection.Header) {
 @Composable
 private fun ProjectsListView(viewModel: VMDListViewModel<ProjectItem>) {
     Column(
-        modifier = Modifier
-            .fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(padding)
+        modifier = Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(padding * 2)
     ) {
         viewModel.elements.forEach { item ->
             ItemView(item)
@@ -96,42 +106,71 @@ private fun ItemView(item: ProjectItem) {
         verticalArrangement = Arrangement.spacedBy(padding)
     ) {
         VMDImage(
-            modifier = Modifier.clip(RoundedCornerShape(16.dp)),
+            modifier = Modifier
+                .fillMaxWidth()
+                .aspectRatio(1f)
+                .clip(RoundedCornerShape(16.dp))
+                .loading(item.isLoading),
             viewModel = item.image,
-            contentScale = ContentScale.FillWidth
+            contentScale = ContentScale.FillWidth,
+            placeholder = { placeholderImageResource: VMDImageResource, state: PlaceholderState ->
+                ImagePlaceholder(placeholderImageResource = placeholderImageResource, state = state)
+            }
         )
 
         Column(
             modifier = Modifier
                 .padding(horizontal = padding)
-                .padding(top = padding)
         ) {
             Text(
+                modifier = Modifier.loading(item.isLoading),
                 text = item.title,
                 style = style(TextSize.SUB_HEADLINE, TextWeight.REGULAR),
                 color = Color.White,
                 maxLines = 1
             )
 
             Text(
-                modifier = Modifier.padding(top = 4.dp),
+                modifier = Modifier
+                    .loading(item.isLoading),
                 text = item.subtitle,
-                style = style(TextSize.SUB_HEADLINE, TextWeight.REGULAR),
+                style = style(TextSize.TITLE1, TextWeight.REGULAR),
                 color = Color.White,
                 maxLines = 2
             )
 
             Text(
-                modifier = Modifier.padding(top = padding),
+                modifier = Modifier
+                    .loading(item.isLoading)
+                    .padding(top = 12.dp),
                 text = item.description,
-                style = style(TextSize.SUB_HEADLINE, TextWeight.REGULAR),
+                style = style(TextSize.CAPTION1, TextWeight.REGULAR),
                 color = Color.AccentOrange,
                 maxLines = 2
             )
         }
     }
 }
 
+@Composable
+private fun ImagePlaceholder(placeholderImageResource: VMDImageResource, state: PlaceholderState) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = 0.2f))
+            .clip(RoundedCornerShape(16.dp))
+            .loading(state == PlaceholderState.LOADING),
+        contentAlignment = Alignment.Center
+    ) {
+        LocalImage(
+            modifier = Modifier.size(64.dp),
+            imageResource = placeholderImageResource,
+            contentScale = ContentScale.FillWidth,
+            colorFilter = ColorFilter.tint(Color.Gray)
+        )
+    }
+}
+
 @Preview
 @Composable
 fun PreviewProjectsContentView() {

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/projects/ProjectsView.kt

@@ -13,6 +13,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.mirego.kmp.boilerplate.app.ui.common.ErrorView
 import com.mirego.kmp.boilerplate.app.ui.preview.PreviewProvider
 import com.mirego.kmp.boilerplate.app.ui.theme.PrimaryBlack
+import com.mirego.kmp.boilerplate.usecase.preview.PreviewState
 import com.mirego.kmp.boilerplate.viewmodel.projects.ProjectsRoot
 import com.mirego.kmp.boilerplate.viewmodel.projects.ProjectsViewModel
 import com.mirego.trikot.viewmodels.declarative.compose.extensions.observeAsState
@@ -44,6 +45,30 @@ private fun ContentView(viewModel: ProjectsViewModel) {
 @Composable
 fun PreviewProjectsView() {
     PreviewProvider {
-        ProjectsView(projectsViewModel = it.createProjects())
+        ProjectsView(projectsViewModel = it.createProjects(previewState = PreviewState.Data.Content))
     }
 }
+
+@Preview
+@Composable
+fun PreviewProjectsEmptyView() {
+    PreviewProvider {
+        ProjectsView(projectsViewModel = it.createProjects(previewState = PreviewState.Data.Empty))
+    }
+}
+
+@Preview
+@Composable
+fun PreviewProjectsLoadingView() {
+    PreviewProvider {
+        ProjectsView(projectsViewModel = it.createProjects(previewState = PreviewState.Loading))
+    }
+}
+
+@Preview
+@Composable
+fun PreviewProjectsErrorView() {
+    PreviewProvider {
+        ProjectsView(projectsViewModel = it.createProjects(previewState = PreviewState.Error))
+    }
+}

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/root/RootView.kt

@@ -11,15 +11,16 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.mirego.kmp.boilerplate.app.ui.preview.PreviewProvider
 import com.mirego.kmp.boilerplate.app.ui.projects.ProjectsView
+import com.mirego.kmp.boilerplate.app.ui.theme.PrimaryBlack
 import com.mirego.kmp.boilerplate.viewmodel.root.RootViewModel
 import com.mirego.trikot.viewmodels.declarative.compose.extensions.observeAsState
 
 @Composable
 fun RootView(rootViewModel: RootViewModel) {
     val viewModel: RootViewModel by rootViewModel.observeAsState()
     val systemUiController = rememberSystemUiController()
-    systemUiController.setNavigationBarColor(color = Color.Transparent, darkIcons = false)
-    systemUiController.setStatusBarColor(Color.Transparent, darkIcons = false)
+    systemUiController.setNavigationBarColor(color = Color.PrimaryBlack, darkIcons = false)
+    systemUiController.setStatusBarColor(color = Color.Transparent, darkIcons = false)
 
     Box(
         modifier = Modifier

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/theme/Colors.kt

@@ -4,3 +4,5 @@ import androidx.compose.ui.graphics.Color
 
 val Color.Companion.PrimaryBlack: Color get() = Color(0xFF211E25)
 val Color.Companion.AccentOrange: Color get() = Color(0xFFFF3829)
+val Color.Companion.ShimmerBackground: Color get() = Color(0xFF4C474f)
+val Color.Companion.ShimmerHighlight: Color get() = Color(0xFF938C96)

androidApp/src/main/java/com/mirego/kmp/boilerplate/app/ui/theme/Theme.kt

@@ -3,7 +3,11 @@ package com.mirego.kmp.boilerplate.app.ui.theme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import com.google.accompanist.placeholder.PlaceholderHighlight
+import com.google.accompanist.placeholder.placeholder
+import com.google.accompanist.placeholder.shimmer
 
 @Composable
 fun Theme(
@@ -17,4 +21,4 @@ fun Theme(
         colorScheme = colors,
         content = content
     )
-}
+}

androidApp/src/main/res/drawable/baseline_image_24.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z"/>
+</vector>

androidApp/src/main/res/drawable/baseline_question_mark_24.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M11.07,12.85c0.77,-1.39 2.25,-2.21 3.11,-3.44c0.91,-1.29 0.4,-3.7 -2.18,-3.7c-1.69,0 -2.52,1.28 -2.87,2.34L6.54,6.96C7.25,4.83 9.18,3 11.99,3c2.35,0 3.96,1.07 4.78,2.41c0.7,1.15 1.11,3.3 0.03,4.9c-1.2,1.77 -2.35,2.31 -2.97,3.45c-0.25,0.46 -0.35,0.76 -0.35,2.24h-2.89C10.58,15.22 10.46,13.95 11.07,12.85zM14,20c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2c0,-1.1 0.9,-2 2,-2S14,18.9 14,20z"/>
+</vector>

androidApp/src/main/res/drawable/baseline_warning_24.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M1,21h22L12,2 1,21zM13,18h-2v-2h2v2zM13,14h-2v-4h2v4z"/>
+</vector>

gradle/libs.versions.toml

@@ -28,6 +28,7 @@ skie = "0.4.20"
 trikot = "5.2.0"
 
 [libraries]
+accompanist-placeholder-material = { module = "com.google.accompanist:accompanist-placeholder-material", version.ref = "accompanist" }
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
 android-splash = { module = "androidx.core:core-splashscreen", version.ref = "android-splash" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidxActivityCompose" }