@momo-kits/native-kits 0.157.5-debug → 0.157.6-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.157.5-debug"
+        version = "0.157.6-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

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

@@ -14,6 +14,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.airbnb.lottie.LottieProperty
@@ -108,3 +110,8 @@ actual fun NativePaint.setColor(color: Color){
     this.color = color.toArgb()
 }
 
+actual fun Modifier.semantics(accessibilityId: String): Modifier {
+    return semantics {
+        contentDescription = accessibilityId
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Avatar.kt

@@ -0,0 +1,157 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+private const val LOGO_MOMO_URL =
+    "https://static.momocdn.net/app/img/kits/logo_momo_circle.png"
+private const val ICON_SUPPORT_DEFAULT_URL =
+    "https://static.momocdn.net/app/img/kits/_indicator.png"
+
+enum class AvatarSize(val sizeDp: Int, val iconSizeDp: Int) {
+    SIZE_24(24, 16),
+    SIZE_32(32, 16),
+    SIZE_40(40, 24),
+    SIZE_48(48, 32),
+    SIZE_56(56, 32),
+    SIZE_72(72, 40),
+}
+
+@Composable
+fun Avatar(
+    modifier: Modifier = Modifier,
+    size: AvatarSize = AvatarSize.SIZE_32,
+    rounded: Boolean = true,
+    name: String? = null,
+    image: String? = null,
+    showIconMomo: Boolean = false,
+    showIconSupport: Boolean = false,
+    iconSupport: String = ICON_SUPPORT_DEFAULT_URL,
+    accessibilityLabel: String? = null,
+) {
+    val theme = AppTheme.current
+
+    val cornerRadius = remember(rounded, size) {
+        if (rounded) (size.sizeDp / 2).dp else Spacing.XS
+    }
+    val shape = remember(cornerRadius) { RoundedCornerShape(cornerRadius) }
+
+    val badgeSizeDp = remember(size) { (size.iconSizeDp / 2).dp }
+    val badgeShape = remember(size) {
+        RoundedCornerShape((size.iconSizeDp / 4).dp)
+    }
+
+    val shouldShowIconTop = showIconMomo && rounded
+    val shouldShowIconBottom = showIconSupport && rounded
+
+    val initials = remember(name) {
+        name?.let { avatarInitials(it) }
+    }
+
+    val automationId = remember(accessibilityLabel, name) {
+        accessibilityLabel ?: "Avatar${if (name != null) "/$name" else ""}"
+    }
+
+    Box(
+        modifier = modifier
+            .size(size.sizeDp.dp)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
+            .setAutomationId(automationId)
+            .semantics { contentDescription = automationId },
+    ) {
+        // Inner box with clip — holds avatar content
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .clip(shape)
+                .background(color = Colors.pink_09)
+                .border(width = 1.dp, color = theme.colors.border.default, shape = shape),
+            contentAlignment = Alignment.Center,
+        ) {
+            when {
+                image != null -> {
+                    Image(
+                        source = image,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .clip(shape)
+                            .semantics { contentDescription = "$automationId|img" },
+                    )
+                }
+
+                name != null -> {
+                    Text(
+                        text = initials ?: "",
+                        style = Typography.descriptionXsRegular,
+                        color = Colors.pink_03,
+                        modifier = Modifier
+                            .semantics { contentDescription = "$automationId|text" },
+                    )
+                }
+
+                else -> {
+                    Icon(
+                        source = "basic_person",
+                        size = size.iconSizeDp.dp,
+                        color = Colors.pink_03,
+                        modifier = Modifier
+                            .semantics { contentDescription = "$automationId|icon" },
+                    )
+                }
+            }
+        }
+
+        // Badge icons — outside clip so they are not cut by border
+        if (shouldShowIconTop) {
+            Image(
+                source = LOGO_MOMO_URL,
+                modifier = Modifier
+                    .zIndex(1f)
+                    .align(Alignment.TopEnd)
+                    .offset(x = 1.dp, y = (-1).dp)
+                    .size(badgeSizeDp)
+                    .clip(badgeShape)
+                    .semantics { contentDescription = "$automationId|top-icon" },
+            )
+        }
+
+        if (shouldShowIconBottom) {
+            Image(
+                source = iconSupport,
+                modifier = Modifier
+                    .zIndex(1f)
+                    .align(Alignment.BottomEnd)
+                    .offset(x = 1.dp, y = 1.dp)
+                    .size(badgeSizeDp)
+                    .clip(badgeShape)
+                    .semantics { contentDescription = "$automationId|bottom-icon" },
+            )
+        }
+    }
+}
+
+private fun avatarInitials(name: String): String {
+    val words = name.trim().split(" ").filter { it.isNotEmpty() }
+    return words.takeLast(2).joinToString("") { it.first().uppercaseChar().toString() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Carousel.kt

@@ -0,0 +1,123 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+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.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import kotlin.math.absoluteValue
+
+@Composable
+fun Carousel(
+    itemCount: Int,
+    modifier: Modifier = Modifier,
+    loop: Boolean = false,
+    autoplay: Boolean = false,
+    autoplayInterval: Long = 3000L,
+    enableSnap: Boolean = true,
+    scrollEnabled: Boolean = true,
+    inactiveSlideOpacity: Float = 1f,
+    inactiveSlideScale: Float = 1f,
+    contentPadding: PaddingValues = PaddingValues(0.dp),
+    onSnapToItem: (Int) -> Unit = {},
+    onScrollIndexChanged: (Int) -> Unit = {},
+    content: @Composable (index: Int) -> Unit,
+) {
+    if (itemCount <= 0) return
+
+    val virtualPageCount = if (loop) itemCount * 1000 else itemCount
+    val startPage = if (loop) (virtualPageCount / 2) - ((virtualPageCount / 2) % itemCount) else 0
+
+    val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
+
+    // Map virtual page to real index
+    val realIndex: (Int) -> Int = { page -> page % itemCount }
+
+    // Track user interaction for autoplay pause
+    var isUserScrolling by remember { mutableStateOf(false) }
+
+    // Autoplay
+    if (autoplay && itemCount > 1) {
+        LaunchedEffect(autoplayInterval, isUserScrolling) {
+            if (isUserScrolling) return@LaunchedEffect
+            while (isActive) {
+                delay(autoplayInterval)
+                if (!isUserScrolling) {
+                    val nextPage = pagerState.currentPage + 1
+                    if (nextPage < virtualPageCount) {
+                        pagerState.animateScrollToPage(nextPage)
+                    }
+                }
+            }
+        }
+    }
+
+    // Track scroll state for callbacks
+    LaunchedEffect(pagerState) {
+        snapshotFlow { pagerState.isScrollInProgress }.collect { scrolling ->
+            isUserScrolling = scrolling
+        }
+    }
+
+    LaunchedEffect(pagerState) {
+        snapshotFlow { pagerState.currentPage }.collect { page ->
+            val real = realIndex(page)
+            onSnapToItem(real)
+            onScrollIndexChanged(real)
+        }
+    }
+
+    HorizontalPager(
+        state = pagerState,
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        contentPadding = contentPadding,
+        userScrollEnabled = scrollEnabled,
+        beyondViewportPageCount = if (loop) 1 else 0,
+    ) { page ->
+        val real = realIndex(page)
+
+        val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
+
+        val scale by animateFloatAsState(
+            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideScale,
+            animationSpec = tween(150),
+            label = "carouselScale"
+        )
+        val alpha by animateFloatAsState(
+            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideOpacity,
+            animationSpec = tween(150),
+            label = "carouselAlpha"
+        )
+
+        Box(
+            modifier = Modifier
+                .graphicsLayer {
+                    scaleX = scale
+                    scaleY = scale
+                    this.alpha = alpha
+                }
+        ) {
+            content(real)
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Collapse.kt

@@ -0,0 +1,224 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+
+enum class CollapseTitleSize {
+    Small, Medium, Large
+}
+
+@Composable
+fun Collapse(
+    title: String,
+    modifier: Modifier = Modifier,
+    description: String? = null,
+    image: String? = null,
+    imageSize: Int = 24,
+    subTitle: String? = null,
+    tagLabel: String? = null,
+    tagColor: TagColor = TagColor.Default,
+    showBorder: Boolean = false,
+    expandDefault: Boolean = false,
+    titleSize: CollapseTitleSize = CollapseTitleSize.Medium,
+    useBackgroundCollapseButton: Boolean = false,
+    backgroundColor: Color? = null,
+    titleColor: Color? = null,
+    onPress: ((isExpanded: Boolean) -> Unit)? = null,
+    accessibilityId: String? = null,
+    content: (@Composable () -> Unit)? = null,
+) {
+    val theme = AppTheme.current
+
+    var expanded by remember { mutableStateOf(expandDefault) }
+
+    val chevronRotation by animateFloatAsState(
+        targetValue = if (expanded) 180f else 0f,
+        animationSpec = tween(durationMillis = 300),
+        label = "chevronRotation"
+    )
+
+    val resolvedBackgroundColor = remember(backgroundColor, theme) {
+        backgroundColor ?: theme.colors.background.surface
+    }
+
+    val resolvedTitleStyle: TextStyle = remember(titleSize) {
+        when (titleSize) {
+            CollapseTitleSize.Small -> Typography.headerSSemibold
+            CollapseTitleSize.Medium -> Typography.headerDefaultBold
+            CollapseTitleSize.Large -> Typography.headerMBold
+        }
+    }
+
+    val borderShape = remember { RoundedCornerShape(Radius.S) }
+
+    val automationId = remember(accessibilityId, title) {
+        accessibilityId ?: "Collapse/$title"
+    }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(borderShape)
+            .background(resolvedBackgroundColor, shape = borderShape)
+            .conditional(showBorder) {
+                border(
+                    width = 1.dp,
+                    color = theme.colors.border.default,
+                    shape = borderShape
+                )
+            }
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .setAutomationId(automationId)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .activeOpacityClickable {
+                    onPress?.invoke(expanded)
+                    expanded = !expanded
+                }
+                .padding(horizontal = Spacing.M, vertical = Spacing.S)
+                .setAutomationId("$automationId|touch"),
+            verticalAlignment = Alignment.Top
+        ) {
+            if (image != null) {
+                Image(
+                    source = image,
+                    modifier = Modifier
+                        .size(imageSize.dp)
+                        .clip(RoundedCornerShape(Radius.XS))
+                        .setAutomationId("$automationId|img")
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+            }
+
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = title,
+                    style = resolvedTitleStyle,
+                    color = titleColor ?: theme.colors.text.default,
+                    accessibilityId = "$automationId|text"
+                )
+                if (description != null) {
+                    Text(
+                        text = description,
+                        style = Typography.bodyDefaultRegular,
+                        color = theme.colors.text.secondary,
+                        maxLines = 2,
+                        accessibilityId = "$automationId|description-text"
+                    )
+                }
+            }
+
+            val hasInfo = subTitle != null || tagLabel != null
+            if (hasInfo) {
+                Spacer(modifier = Modifier.width(Spacing.S))
+                Box(contentAlignment = Alignment.CenterEnd) {
+                    if (subTitle != null) {
+                        Text(
+                            text = subTitle,
+                            style = Typography.bodyDefaultRegular,
+                            color = theme.colors.text.secondary,
+                            maxLines = 1,
+                            accessibilityId = "$automationId|sub-title-text"
+                        )
+                    } else if (tagLabel != null) {
+                        Tag(
+                            label = tagLabel,
+                            color = tagColor
+                        )
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.width(Spacing.S))
+            if (useBackgroundCollapseButton) {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .background(
+                            color = theme.colors.background.tonal,
+                            shape = RoundedCornerShape(Radius.M)
+                        ),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "arrow_chevron_down_small",
+                        size = 16.dp,
+                        color = theme.colors.primary,
+                        modifier = Modifier
+                            .rotate(chevronRotation)
+                            .setAutomationId("$automationId|icon")
+                    )
+                }
+            } else {
+                Icon(
+                    source = "arrow_chevron_down_small",
+                    size = 24.dp,
+                    color = theme.colors.text.default,
+                    modifier = Modifier
+                        .rotate(chevronRotation)
+                        .setAutomationId("$automationId|icon")
+                )
+            }
+        }
+
+        if (content != null) {
+            AnimatedVisibility(
+                visible = expanded,
+                enter = expandVertically(animationSpec = tween(durationMillis = 300)),
+                exit = shrinkVertically(animationSpec = tween(durationMillis = 300))
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .conditional(showBorder) {
+                            border(
+                                width = 1.dp,
+                                color = theme.colors.border.default
+                            )
+                        }
+                ) {
+                    content()
+                }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Loader.kt

@@ -0,0 +1,108 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.LottieAnimation
+
+enum class LoaderType {
+    DOT, SPINNER
+}
+
+@Composable
+fun Loader(
+    type: LoaderType = LoaderType.DOT,
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    when (type) {
+        LoaderType.DOT -> DotLoader(tintColor = tintColor, modifier = modifier)
+        LoaderType.SPINNER -> SpinnerLoader(tintColor = tintColor, modifier = modifier)
+    }
+}
+
+@Composable
+fun DotLoader(
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    LottieAnimation(
+        path = "files/dot_loading",
+        tintColor = tintColor,
+        modifier = modifier
+            .size(width = 52.dp, height = 18.dp)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    )
+}
+
+@Composable
+fun SpinnerLoader(
+    tintColor: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    LottieAnimation(
+        path = "files/lottie_circle_loader",
+        tintColor = tintColor,
+        modifier = modifier
+            .size(24.dp)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    )
+}
+
+@Composable
+fun ProgressBar(
+    percent: Float = 0f,
+    color: Color? = null,
+    modifier: Modifier = Modifier
+) {
+    val clampedPercent = percent.coerceIn(0f, 100f)
+    val animatedProgress by animateFloatAsState(
+        targetValue = clampedPercent / 100f,
+        animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
+        label = "progressAnimation"
+    )
+
+    val trackColor = AppTheme.current.colors.background.default
+    val fillColor = color ?: AppTheme.current.colors.primary
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(4.dp)
+            .clip(RoundedCornerShape(Radius.XXS))
+            .background(trackColor)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth(animatedProgress)
+                .height(4.dp)
+                .clip(RoundedCornerShape(Radius.XXS))
+                .background(fillColor)
+        )
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/components/PopupPromotion.kt

@@ -44,13 +44,13 @@ fun PopupPromotion(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
-                    .aspectRatio(0.5625f)
+                    .aspectRatio(0.72f)
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,
                         onClick = onPress
                     ),
-                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Fit)
+                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.FillBounds)
             ), null
         )
         Box(