@momo-kits/native-kits 0.157.1-beta.9-debug → 0.157.1-com.1-debug

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

@@ -0,0 +1,350 @@
+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.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.width
+import androidx.compose.foundation.shape.CircleShape
+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.text.style.TextAlign
+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.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
+import vn.momo.kits.modifier.conditional
+
+// ─── Data model ───────────────────────────────────────────────────────────────
+
+data class ProgressInfoItem(
+    val title: String,
+    val description: String? = null,
+)
+
+enum class ProgressInfoSize { Small, Large }
+
+enum class ProgressInfoAlign { Left, Right, Center, Stretch }
+
+// ─── Public entry-point ───────────────────────────────────────────────────────
+
+/**
+ * Display-only step progress indicator migrated from the React Native ProgressInfo component.
+ *
+ * @param steps           Ordered list of steps; each has a [ProgressInfoItem.title] and an
+ *                        optional [ProgressInfoItem.description].
+ * @param horizontal      When `true` renders steps in a horizontal row with connector lines;
+ *                        when `false` (default) renders a vertical column.
+ * @param size            Icon diameter: [ProgressInfoSize.Small] = 16 dp,
+ *                        [ProgressInfoSize.Large] = 24 dp (default).
+ * @param useNumber       Show the 1-based step index inside the icon instead of the default dot.
+ * @param align           Alignment of icon + text for the horizontal variant.
+ * @param showTitle       Whether step titles are rendered (default `true`).
+ * @param showDescription Whether step descriptions are rendered (default `true`).
+ * @param customIcon      Icon source key rendered inside each step circle (overrides the dot;
+ *                        itself overridden by [useNumber]).
+ * @param modifier        Modifier applied to the root layout.
+ */
+@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,
+        )
+    }
+}
+
+// ─── Horizontal variant ───────────────────────────────────────────────────────
+
+@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
+            }
+
+            // In RN: non-center/stretch steps that are not last get a right margin
+            val endPadding = if (!isLast &&
+                align != ProgressInfoAlign.Center &&
+                align != ProgressInfoAlign.Stretch
+            ) Spacing.XS else 0.dp
+
+            // Left connector hidden when align=left or first item of stretch
+            val hideLineLeft = align == ProgressInfoAlign.Left ||
+                    (align == ProgressInfoAlign.Stretch && isFirst)
+            // Right connector hidden when align=right or last item of stretch
+            val hideLineRight = align == ProgressInfoAlign.Right ||
+                    (align == ProgressInfoAlign.Stretch && isLast)
+
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(end = endPadding),
+                horizontalAlignment = columnAlign,
+            ) {
+                // Icon row with connector lines
+                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(),
+                    )
+                }
+            }
+        }
+    }
+}
+
+// ─── Vertical variant ─────────────────────────────────────────────────────────
+
+@Composable
+private fun ProgressInfoVertical(
+    steps: List<ProgressInfoItem>,
+    size: ProgressInfoSize,
+    useNumber: Boolean,
+    showTitle: Boolean,
+    showDescription: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+    // Mirrors RN: theme.colors.primary + "33" = 20 % alpha
+    val lineColor = remember(theme) { theme.colors.primary.copy(alpha = 0.2f) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        steps.forEachIndexed { index, item ->
+            val isLast = index == steps.lastIndex
+
+            Row(modifier = Modifier.fillMaxWidth()) {
+                // Left column: icon + vertical connector
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    modifier = Modifier.padding(end = Spacing.M),
+                ) {
+                    ProgressInfoStepIcon(
+                        index = index,
+                        size = size,
+                        useNumber = useNumber,
+                        customIcon = customIcon,
+                    )
+                    if (!isLast) {
+                        // width=2, weight fills the remaining row height (flex=1 in RN)
+                        Spacer(
+                            modifier = Modifier
+                                .width(2.dp)
+                                .weight(1f)
+                                .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,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ─── Step icon ────────────────────────────────────────────────────────────────
+
+@Composable
+private fun ProgressInfoStepIcon(
+    index: Int,
+    size: ProgressInfoSize,
+    useNumber: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    // Large = 24 dp (RN default), Small = 16 dp (RN scaled via useScaleSize(16))
+    val containerSize = scaleSize(if (size == ProgressInfoSize.Small) 16f else 24f).dp
+    // Inner content sizes mirror RN: dot 8/6 dp, icon 16/12 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 -> {
+                // Default: small filled dot in brand pink (mirrors RN styles.currIcon)
+                Box(
+                    modifier = Modifier
+                        .size(dotSize)
+                        .clip(CircleShape)
+                        .background(Colors.pink_MoMo_Branding),
+                )
+            }
+        }
+    }
+}
+
+// ─── Horizontal connector line ────────────────────────────────────────────────
+
+@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/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)
+}