@momo-kits/native-kits 0.89.18 → 0.89.20

package/compose/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     id("com.android.library")
     id("org.jetbrains.compose")
     id("maven-publish")
+    alias(libs.plugins.kotlinx.serialization)
 }
 
 val libGroup = "vn.momo.kits"
@@ -35,32 +36,29 @@ kotlin {
                 implementation(libs.ktor.client.core)
                 implementation(libs.jetbrains.coroutines.core)
                 implementation(libs.ktor.client.core)
-                implementation("com.github.skydoves:landscapist-coil3:2.3.2")
                 implementation(compose.components.resources)
-                implementation("org.jetbrains.androidx.navigation:navigation-compose:2.7.0-alpha07")
-
-                implementation("cafe.adriel.voyager:voyager-navigator:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-screenmodel:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-bottom-sheet-navigator:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-tab-navigator:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-transitions:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-koin:$voyagerVersion")
+                implementation(libs.navigation.compose)
+                implementation(libs.kotlinx.serialization.json)
+                implementation(libs.navigation.compose)
+                implementation(libs.coil.compose)
+                implementation(libs.coil.compose.core)
+                implementation(libs.coil.network.ktor)
+                implementation(libs.coil.mp)
             }
         }
         val androidMain by getting {
             dependencies {
-                val voyagerVersion = "1.1.0-alpha03"
                 implementation(libs.ktor.client.okhttp)
                 implementation(libs.jetbrains.coroutines.android)
-                implementation("cafe.adriel.voyager:voyager-hilt:$voyagerVersion")
-                implementation("cafe.adriel.voyager:voyager-livedata:$voyagerVersion")
-                // RxJava integration
-                implementation("cafe.adriel.voyager:voyager-rxjava:$voyagerVersion")
             }
         }
         val iosX64Main by getting
         val iosArm64Main by getting
         val iosSimulatorArm64Main by getting
+
+        iosMain.dependencies {
+            implementation(libs.ktor.client.darwin)
+        }
     }
 
     task("testClasses")
@@ -104,3 +102,9 @@ android {
         jvmToolchain(17)
     }
 }
+
+dependencies {
+    implementation(libs.androidx.animation.android)
+    implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.activity.ktx)
+}

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -0,0 +1,22 @@
+package vn.momo.kits.platform
+
+import android.graphics.BlurMaskFilter
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.NativePaint
+import androidx.compose.ui.platform.LocalConfiguration
+
+actual fun getPlatformName(): String = "Android"
+
+actual fun disableOverscroll() {}
+
+@Composable
+actual fun getScreenDimensions(): ScreenDimension {
+    val config = LocalConfiguration.current
+    return ScreenDimension(
+        config.screenWidthDp, config.screenHeightDp
+    )
+}
+
+actual fun NativePaint.setMaskFilter(blurRadius: Float) {
+    this.maskFilter = BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.NORMAL)
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Components.kt

@@ -1,5 +1,6 @@
 package vn.momo.kits.application
 
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -9,25 +10,33 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Image
 import vn.momo.kits.components.Options
@@ -38,26 +47,25 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.utils.bottomBorder
-import vn.momo.kits.utils.getPlatformName
 
 enum class TitlePosition {
     LEFT, CENTER,
 }
 
+
+data class AnimatedHeader(
+    val type: HeaderType = HeaderType.DEFAULT,
+    val composable: @Composable (scrollState: Int) -> Unit = {}
+)
+
 @Composable
 fun HeaderImage(
     headerType: HeaderType = HeaderType.DEFAULT,
     headerBackground: String?,
 ) {
-    val statusBarHeight = if (getPlatformName() == "iOS") {
-        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-    } else {
-        AppStatusBar.current
-    }
-
     when (headerType) {
         HeaderType.DEFAULT -> {
-            val height = statusBarHeight + 52.dp
+            val height = AppStatusBar.current + 52.dp
             Image(
                 source = headerBackground ?: "",
                 modifier = Modifier.fillMaxWidth().height(height),
@@ -77,6 +85,18 @@ fun HeaderImage(
             )
         }
 
+        HeaderType.SURFACE -> {
+            val height = AppStatusBar.current + 52.dp
+            Box(
+                modifier = Modifier.fillMaxWidth().height(height)
+                    .background(AppTheme.current.colors.background.surface)
+                    .bottomBorder(
+                        strokeWidth = 2.dp,
+                        color = AppTheme.current.colors.border.default
+                    )
+            )
+        }
+
         else -> {
             Box(modifier = Modifier.fillMaxWidth())
         }
@@ -91,6 +111,9 @@ fun Header(
     isBack: Boolean,
     headerRight: @Composable (() -> Unit)? = null,
     goBack: (() -> Unit) = { },
+    opacity: Float? = null,
+    animatedHeader: AnimatedHeader? = null,
+    scrollState: Int = 0
 ) {
     var tintIconColor = Colors.black_01
     var backgroundButton = Colors.black_20.copy(alpha = 0.4f)
@@ -98,20 +121,31 @@ fun Header(
         tintIconColor = AppTheme.current.colors.text.default
         backgroundButton = Color.Transparent
     }
-    val statusBarHeight = if (getPlatformName() == "iOS") {
-        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-    } else {
-        AppStatusBar.current
+
+    var colorFraction by remember { mutableStateOf(0f) }
+
+    LaunchedEffect(scrollState) {
+        if (headerType == HeaderType.SURFACE) {
+            snapshotFlow { scrollState }
+                .map { (it / 50f).coerceIn(0f, 1f) }
+                .distinctUntilChanged()
+                .collect { fraction -> colorFraction = fraction }
+        }
     }
 
+    val tintIconColorAnim by animateColorAsState(
+        targetValue = animateColor(
+            Colors.black_01,
+            AppTheme.current.colors.text.default,
+            colorFraction
+        )
+    )
+
     if (headerType != HeaderType.NONE) {
         BoxWithConstraints(
-            Modifier.height(statusBarHeight + 52.dp)
+            Modifier.height(AppStatusBar.current + 52.dp)
                 .fillMaxWidth()
-                .bottomBorder(
-                    strokeWidth = if (headerType == HeaderType.SURFACE) 2.dp else 0.dp,
-                    color = AppTheme.current.colors.border.default
-                ),
+                .zIndex(10f),
             contentAlignment = Alignment.BottomCenter
         ) {
             Row(
@@ -145,20 +179,25 @@ fun Header(
                                 indication = rememberRipple(),
                                 onClick = goBack
                             )
-                            .padding(Spacing.XS),
+                            .padding(Spacing.XS)
+                            .semantics { contentDescription = "btn_navigation_back"; testTag = "btn_navigation_back" },
                         contentAlignment = Alignment.Center
                     ) {
                         Icon(
                             source = "ic_back_ios",
-                            color = tintIconColor,
+                            color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
                             size = 20.dp,
                         )
                     }
                 }
-                Box {}
-                headerRight?.invoke()
+                Box(Modifier.graphicsLayer {
+                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                }) {
+                    headerRight?.invoke()
+                }
             }
 
+            // Title
             Row(
                 modifier = Modifier.height(52.dp)
                     .fillMaxWidth()
@@ -169,12 +208,18 @@ fun Header(
                     Spacer(Modifier.width(40.dp))
                 }
                 Box(
-                    Modifier.weight(1f),
+                    Modifier.weight(1f).graphicsLayer {
+                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                    },
                     contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
                 ) {
                     HeaderTitle(
                         title = title,
-                        color = tintIconColor,
+                        color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                        modifier = Modifier.semantics {
+                            contentDescription = "title_navigation_header"
+                            testTag = "title_navigation_header"
+                        }
                     )
                 }
                 if (isBack) {
@@ -200,5 +245,13 @@ fun HeaderTitle(
         color = color,
         maxLines = 1
     )
+}
 
+fun animateColor(start: Color, stop: Color, fraction: Float): Color {
+    return Color(
+        red = start.red + fraction * (stop.red - start.red),
+        green = start.green + fraction * (stop.green - start.green),
+        blue = start.blue + fraction * (stop.blue - start.blue),
+        alpha = start.alpha + fraction * (stop.alpha - start.alpha)
+    )
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/application/FloatingButton.kt

@@ -0,0 +1,200 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.AlertDialogDefaults.shape
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+
+enum class FABSize {
+    SMALL,
+    DEFAULT,
+}
+
+enum class FABPosition {
+    END,
+    CENTER,
+}
+
+data class FabProps(
+    val icon: String,
+    val iconColor: Color? = null,
+    val label: String? = null,
+    val onClick: () -> Unit,
+    val size: FABSize = FABSize.DEFAULT,
+    val bottom: Dp? = null,
+    val scrollState: ScrollState? = null,
+    val position: FABPosition? = FABPosition.END,
+)
+
+@Composable
+fun FloatingButton(
+    scrollPosition: Int,
+    bottom: Dp,
+    onClick: () -> Unit,
+    containerColor: Color,
+    contentColor: Color = containerColor,
+    icon: String,
+    iconColor: Color? = null,
+    text: String? = null,
+    elevation: androidx.compose.material3.FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(
+        4.dp,
+        4.dp,
+        4.dp,
+        4.dp
+    ),
+    size: FABSize = FABSize.DEFAULT,
+    position: FABPosition = FABPosition.END,
+    keyboardSize: Dp = 0.dp,
+) {
+    val scrollPositionStateFlow = remember { MutableStateFlow(scrollPosition) }
+    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
+    val coroutineScope = rememberCoroutineScope()
+    var isExpanded by rememberSaveable { mutableStateOf(false) }
+
+    val startPadding = if (isExpanded) 12.dp else 0.dp
+    val endPadding = if (isExpanded) 12.dp else 0.dp
+    val widthIn = if ((size === FABSize.SMALL)) 36.dp else 48.dp
+
+
+    val width = animateDpAsState(
+        targetValue = if (isExpanded && text != null) 80.dp else widthIn,
+        animationSpec = tween(
+            durationMillis = 200,
+            easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f),
+        )
+    )
+
+    LaunchedEffect(text) {
+        if (text != null) {
+            coroutineScope.launch {
+                scrollPositionStateFlow
+                    .collectLatest { debouncedScrollPosition ->
+                        isExpanded = debouncedScrollPosition > lastScrollPosition
+                        delay(300)
+                        lastScrollPosition = debouncedScrollPosition
+
+                    }
+            }
+        }
+    }
+
+    LaunchedEffect(scrollPosition) {
+        scrollPositionStateFlow.value = scrollPosition
+    }
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .padding(end = 12.dp, bottom = bottom)
+            .offset(y = -keyboardSize)
+            .background(Color.Transparent)
+            .zIndex(10f),
+        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
+    ) {
+        FloatingActionButton(
+            onClick = onClick,
+            shape = shape,
+            containerColor = containerColor,
+            contentColor = contentColor,
+            elevation = elevation,
+            interactionSource = remember { MutableInteractionSource() },
+            modifier = Modifier
+                .sizeIn(minWidth = width.value)
+                .height(widthIn)
+        ) {
+            Row(
+                modifier = Modifier.padding(start = startPadding, end = endPadding),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
+            ) {
+                Icon(
+                    icon,
+                    size = if (size === FABSize.SMALL) 12.dp else 24.dp,
+                    color = iconColor ?: Color.White
+                )
+                AnimatedVisibility(
+                    visible = isExpanded,
+                    enter = ExtendedFabExpandAnimation,
+                    exit = ExtendedFabCollapseAnimation,
+                ) {
+                    Row {
+                        Spacer(Modifier.width(12.dp))
+                        Text(
+                            text ?: "",
+                            color = Color.White,
+                            style = Typography.actionDefault
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+private val ExtendedFabCollapseAnimation = fadeOut(
+    animationSpec = tween(
+        durationMillis = 800,
+        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
+    )
+) + shrinkHorizontally(
+    animationSpec = tween(
+        durationMillis = 500,
+        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
+    ),
+    shrinkTowards = Alignment.Start,
+)
+
+private val ExtendedFabExpandAnimation = fadeIn(
+    animationSpec = tween(
+        durationMillis = 200,
+        delayMillis = 100,
+        easing = CubicBezierEasing(0.0f, 0.0f, 1.0f, 1.0f),
+    ),
+) + expandHorizontally(
+    animationSpec = tween(
+        durationMillis = 500,
+        easing = CubicBezierEasing(0.2f, 0.0f, 0.0f, 1.0f),
+    ),
+    expandFrom = Alignment.Start,
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderAnimated.kt

@@ -0,0 +1,47 @@
+package vn.momo.kits.application
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+@Composable
+fun HeaderAnimated(image: String, scrollState: Int = 0) {
+    // Scale animation
+    val scale by animateFloatAsState(
+        targetValue = when {
+            scrollState < 0 -> (-(scrollState / 300f)).coerceIn(1f, 4f)
+            scrollState.toFloat() in 0f..300f -> 1f
+            else -> 1f
+        }
+    )
+
+    // Opacity animation
+    val opacity by animateFloatAsState(
+        targetValue = when {
+            scrollState.toFloat() in 0f..150f -> 1f - (scrollState / 300f)
+            scrollState.toFloat() in 150f..300f -> 0.5f - ((scrollState - 150f) / 300f)
+            else -> 1f
+        }
+    )
+
+    // Translation Y animation
+
+    Box(modifier = Modifier.fillMaxWidth().height(200.dp)
+        .graphicsLayer {
+            scaleX = scale
+            scaleY = scale
+        }) {
+        if (image.isEmpty()) return
+        Image(
+            source = image,
+            modifier = Modifier.fillMaxWidth().height(200.dp)
+        )
+    }
+}