@momo-kits/native-kits 0.163.1-beta.3 → 0.163.1-beta.5-debug

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

@@ -0,0 +1,310 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableFloatStateOf
+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.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.conditional
+
+data class ProgressInfoItem(
+    val title: String,
+    val description: String? = null,
+)
+
+enum class ProgressInfoSize { Small, Large }
+
+enum class ProgressInfoAlign { Left, Right, Center, Stretch }
+
+@Composable
+fun ProgressInfo(
+    steps: List<ProgressInfoItem>,
+    horizontal: Boolean = false,
+    size: ProgressInfoSize = ProgressInfoSize.Large,
+    useNumber: Boolean = false,
+    align: ProgressInfoAlign = ProgressInfoAlign.Center,
+    showTitle: Boolean = true,
+    showDescription: Boolean = true,
+    customIcon: String? = null,
+    modifier: Modifier = Modifier,
+) {
+    if (horizontal) {
+        ProgressInfoHorizontal(
+            steps = steps,
+            size = size,
+            useNumber = useNumber,
+            align = align,
+            showTitle = showTitle,
+            showDescription = showDescription,
+            customIcon = customIcon,
+            modifier = modifier,
+        )
+    } else {
+        ProgressInfoVertical(
+            steps = steps,
+            size = size,
+            useNumber = useNumber,
+            showTitle = showTitle,
+            showDescription = showDescription,
+            customIcon = customIcon,
+            modifier = modifier,
+        )
+    }
+}
+
+@Composable
+private fun ProgressInfoHorizontal(
+    steps: List<ProgressInfoItem>,
+    size: ProgressInfoSize,
+    useNumber: Boolean,
+    align: ProgressInfoAlign,
+    showTitle: Boolean,
+    showDescription: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        verticalAlignment = Alignment.Top,
+    ) {
+        steps.forEachIndexed { index, item ->
+            val isFirst = index == 0
+            val isLast = index == steps.lastIndex
+
+            val columnAlign: Alignment.Horizontal = when (align) {
+                ProgressInfoAlign.Left -> Alignment.Start
+                ProgressInfoAlign.Right -> Alignment.End
+                ProgressInfoAlign.Stretch -> when {
+                    isFirst -> Alignment.Start
+                    isLast -> Alignment.End
+                    else -> Alignment.CenterHorizontally
+                }
+                ProgressInfoAlign.Center -> Alignment.CenterHorizontally
+            }
+
+            val textAlign: TextAlign = when (align) {
+                ProgressInfoAlign.Left -> TextAlign.Left
+                ProgressInfoAlign.Right -> TextAlign.Right
+                ProgressInfoAlign.Stretch -> when {
+                    isFirst -> TextAlign.Left
+                    isLast -> TextAlign.Right
+                    else -> TextAlign.Center
+                }
+                ProgressInfoAlign.Center -> TextAlign.Center
+            }
+
+            val endPadding = if (!isLast &&
+                align != ProgressInfoAlign.Center &&
+                align != ProgressInfoAlign.Stretch
+            ) Spacing.XS else 0.dp
+
+            val hideLineLeft = align == ProgressInfoAlign.Left ||
+                    (align == ProgressInfoAlign.Stretch && isFirst)
+            val hideLineRight = align == ProgressInfoAlign.Right ||
+                    (align == ProgressInfoAlign.Stretch && isLast)
+
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(end = endPadding),
+                horizontalAlignment = columnAlign,
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (!hideLineLeft) {
+                        ProgressInfoHorizontalLine(modifier = Modifier.weight(1f))
+                    }
+                    ProgressInfoStepIcon(
+                        index = index,
+                        size = size,
+                        useNumber = useNumber,
+                        customIcon = customIcon,
+                        modifier = Modifier.padding(vertical = Spacing.XS),
+                    )
+                    if (!hideLineRight) {
+                        ProgressInfoHorizontalLine(modifier = Modifier.weight(1f))
+                    }
+                }
+
+                if (showTitle && item.title.isNotEmpty()) {
+                    Text(
+                        text = item.title,
+                        style = Typography.headerXsSemibold,
+                        textAlign = textAlign,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = Spacing.XS),
+                    )
+                }
+
+                val desc = item.description
+                if (showDescription && !desc.isNullOrEmpty()) {
+                    Text(
+                        text = desc,
+                        style = Typography.descriptionDefaultRegular,
+                        color = Colors.black_12,
+                        textAlign = textAlign,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun ProgressInfoVertical(
+    steps: List<ProgressInfoItem>,
+    size: ProgressInfoSize,
+    useNumber: Boolean,
+    showTitle: Boolean,
+    showDescription: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+    val lineColor = remember(theme) { theme.colors.primary.copy(alpha = 0.2f) }
+    val density = LocalDensity.current
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        steps.forEachIndexed { index, item ->
+            val isLast = index == steps.lastIndex
+            val rowHeightPx = remember { mutableFloatStateOf(0f) }
+            val rowHeightDp = with(density) { rowHeightPx.value.toDp() }
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .onGloballyPositioned { coords -> rowHeightPx.value = coords.size.height.toFloat() },
+            ) {
+                Column(
+                    modifier = Modifier.heightIn(min = if (isLast) 40.dp else 48.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                ) {
+                    ProgressInfoStepIcon(
+                        index = index,
+                        size = size,
+                        useNumber = useNumber,
+                        customIcon = customIcon,
+                    )
+                    if (!isLast) {
+                        Spacer(
+                            modifier = Modifier
+                                .width(2.dp)
+                                .height(rowHeightDp-if(size == ProgressInfoSize.Large) scaleSize(24f).dp else scaleSize(16f).dp)
+                                .background(lineColor),
+                        )
+                    }
+                }
+
+                // Right column: title + description
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(
+                            end = Spacing.S,
+                            bottom = if (isLast) 0.dp else Spacing.S,
+                        ),
+                ) {
+                    if (showTitle && item.title.isNotEmpty()) {
+                        Text(
+                            text = item.title,
+                            style = Typography.headerXsSemibold,
+                            maxLines = 2,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(end = Spacing.S),
+                        )
+                    }
+
+                    val desc = item.description
+                    if (showDescription && !desc.isNullOrEmpty()) {
+                        Text(
+                            text = desc,
+                            style = Typography.descriptionDefaultRegular,
+                            color = Colors.black_12,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ProgressInfoStepIcon(
+    index: Int,
+    size: ProgressInfoSize,
+    useNumber: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    val containerSize = scaleSize(if (size == ProgressInfoSize.Small) 16f else 24f).dp
+    val dotSize = scaleSize(if (size == ProgressInfoSize.Small) 6f else 8f).dp
+    val iconSize = scaleSize(if (size == ProgressInfoSize.Small) 12f else 16f).dp
+
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = modifier
+            .size(containerSize)
+            .clip(CircleShape)
+            .background(Colors.pink_08)
+            .border(width = 2.dp, color = Colors.pink_08, shape = CircleShape)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        when {
+            useNumber -> {
+                Text(
+                    text = (index + 1).toString(),
+                    style = Typography.headerXsSemibold,
+                    color = Colors.pink_MoMo_Branding,
+                    textAlign = TextAlign.Center,
+                )
+            }
+            !customIcon.isNullOrEmpty() -> {
+                Icon(
+                    source = customIcon,
+                    size = iconSize,
+                    color = Colors.pink_MoMo_Branding,
+                )
+            }
+            else -> {
+                Box(
+                    modifier = Modifier
+                        .size(dotSize)
+                        .clip(CircleShape)
+                        .background(Colors.pink_MoMo_Branding),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ProgressInfoHorizontalLine(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .height(2.dp)
+            .background(Colors.pink_08),
+    )
+}

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

@@ -0,0 +1,59 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun Radio(
+    value: Any,
+    groupValue: Any,
+    disabled: Boolean = false,
+    onChange: () -> Unit = {},
+    label: String = "",
+    modifier: Modifier = Modifier,
+) {
+    val selected = value == groupValue
+    val borderColor = when {
+        disabled && selected -> AppTheme.current.colors.background.tonal
+        disabled -> AppTheme.current.colors.text.disable
+        selected -> AppTheme.current.colors.primary
+        else -> AppTheme.current.colors.text.default
+    }
+    val borderWidth = if (selected) 6.dp else 2.dp
+
+    Row(
+        modifier = modifier.activeOpacityClickable(
+            onClick = onChange,
+            enabled = !disabled,
+        ),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = modifier
+                .padding(end = if (label.isEmpty()) 0.dp else Spacing.XS)
+                .border(borderWidth, borderColor, RoundedCornerShape(Radius.M))
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .clip(RoundedCornerShape(Radius.M))
+                .size(20.dp)
+        )
+        if (label.isNotEmpty()) {
+            Text(
+                style = Typography.descriptionDefaultRegular,
+                text = label,
+            )
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun Rating(
+    modifier: Modifier = Modifier,
+    numOfStars: Int,
+    rating: Float,
+    onRatingChange: ((Int) -> Unit)? = null,
+    size: RatingSize = RatingSize.LARGE,
+) {
+    val iconSize = remember(size) {
+        when (size) {
+            RatingSize.SMALL -> RatingDefaults.Small.iconSize
+            RatingSize.MEDIUM -> RatingDefaults.Medium.iconSize
+            RatingSize.LARGE -> RatingDefaults.Large.iconSize
+        }
+    }
+
+    Row(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(2.dp)
+    ) {
+        for (index in 0 until numOfStars) {
+            val starIcon = remember(rating, index) {
+                when {
+                    index < rating.toInt() -> "reaction_star_full"
+                    index == rating.toInt() && rating % 1 != 0f -> "reaction_star_half"
+                    else -> "reaction_star_non"
+                }
+            }
+            val starColor = remember(rating, index) {
+                when {
+                    index < rating.toInt() -> Colors.yellow_03
+                    index == rating.toInt() && rating % 1 != 0f -> Colors.yellow_03
+                    else -> Colors.black_07
+                }
+            }
+
+            val starModifier = if (onRatingChange != null) {
+                Modifier.activeOpacityClickable {
+                    onRatingChange(index + 1)
+                }
+            } else {
+                Modifier
+            }
+
+            Icon(
+                source = starIcon,
+                size = scaleSize(iconSize).dp,
+                color = starColor,
+                modifier = starModifier,
+            )
+        }
+    }
+}
+
+enum class RatingSize { SMALL, MEDIUM, LARGE }
+
+object RatingDefaults {
+    @Immutable
+    data class Dimensions(
+        val iconSize: Float,
+    )
+
+    val Small = Dimensions(iconSize = 16f)
+    val Medium = Dimensions(iconSize = 20f)
+    val Large = Dimensions(iconSize = 24f)
+}

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

@@ -0,0 +1,21 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import vn.momo.kits.application.ScaleSizeMaxRate
+
+@Deprecated(
+    "Max font scale is fixed at MAX_FONT_SCALE (1.5); this override is no longer applied. Remove the wrapper.",
+    ReplaceWith("content()"),
+)
+@Composable
+fun ScaleSizeScope(
+    scaleSizeMaxRate: Float? = null,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        ScaleSizeMaxRate provides scaleSizeMaxRate,
+    ) {
+        content()
+    }
+}

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

@@ -0,0 +1,90 @@
+package vn.momo.kits.components
+
+import vn.momo.kits.modifier.InternalApi
+
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+
+private val shimmerColors = listOf(
+    Colors.black_05,
+    Colors.black_03,
+    Colors.black_05,
+)
+private const val SHADOW_BRUSH_PERCENTAGE = 0.6f
+private const val DEFAULT_DURATION_MILLIS = 1000
+
+@Composable
+fun Skeleton() {
+    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Colors.black_05)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .shimmerLoadingAnimation(maxWidth = maxWidthValue)
+        )
+    }
+}
+
+@Composable
+@InternalApi
+fun Modifier.shimmerLoadingAnimation(
+    maxWidth: Int,
+    angleOfAxisY: Float = 0f,
+    durationMillis: Int = DEFAULT_DURATION_MILLIS,
+): Modifier {
+    // Memoize calculations to avoid repeated computations
+    val widthOfShadowBrush = remember(maxWidth) {
+        (maxWidth * SHADOW_BRUSH_PERCENTAGE).toInt()
+    }
+
+    val animationTarget = remember(durationMillis, widthOfShadowBrush) {
+        (durationMillis + widthOfShadowBrush).toFloat()
+    }
+
+    val transition = rememberInfiniteTransition(label = "shimmer")
+    val translateAnimation = transition.animateFloat(
+        initialValue = 0f,
+        targetValue = animationTarget,
+        animationSpec = infiniteRepeatable(
+            animation = tween(
+                durationMillis = durationMillis,
+                easing = LinearEasing,
+            ),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "shimmerTranslate"
+    )
+
+    return drawBehind {
+        // Memoize brush creation by using remember in the calling composable
+        val startX = translateAnimation.value - widthOfShadowBrush
+        val endX = translateAnimation.value
+
+        drawRect(
+            brush = Brush.linearGradient(
+                colors = shimmerColors,
+                start = Offset(x = startX, y = 0f),
+                end = Offset(x = endX, y = angleOfAxisY)
+            )
+        )
+    }
+}