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

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

@@ -0,0 +1,473 @@
+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.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.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+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
+
+
+data class StepItem(
+    val title: String,
+    val description: String? = null,
+    val error: Boolean = false,
+    val time: String? = null,
+)
+
+
+enum class StepsSize { SMALL, LARGE }
+
+enum class StepsAlign { LEFT, RIGHT, CENTER, STRETCH }
+
+
+private enum class StepStatus { INCOMPLETE, CURRENT, COMPLETED, ERROR, DISABLED }
+
+private fun resolveStatus(
+    activeIndex: Int,
+    currentIndex: Int,
+    error: Boolean,
+    disabled: Boolean,
+): StepStatus = when {
+    disabled -> StepStatus.DISABLED
+    error -> StepStatus.ERROR
+    activeIndex == currentIndex -> StepStatus.CURRENT
+    activeIndex > currentIndex -> StepStatus.COMPLETED
+    else -> StepStatus.INCOMPLETE
+}
+
+
+@Composable
+private fun resolveIconBgAndBorder(status: StepStatus): Pair<Color, Color> {
+    val theme = AppTheme.current
+    return when (status) {
+        StepStatus.CURRENT, StepStatus.COMPLETED ->
+            theme.colors.primary to theme.colors.background.tonal
+        StepStatus.ERROR ->
+            theme.colors.error.primary to theme.colors.error.container
+        StepStatus.DISABLED ->
+            Colors.pink_08 to Colors.pink_10
+        StepStatus.INCOMPLETE ->
+            Colors.black_06 to theme.colors.border.default
+    }
+}
+
+@Composable
+private fun resolveTitleColor(status: StepStatus): Color {
+    val theme = AppTheme.current
+    return when (status) {
+        StepStatus.CURRENT -> theme.colors.primary
+        StepStatus.ERROR -> theme.colors.error.primary
+        StepStatus.DISABLED -> theme.colors.text.disable
+        else -> theme.colors.text.default
+    }
+}
+
+@Composable
+private fun StepBubble(
+    index: Int,
+    isActive: Boolean,
+    error: Boolean,
+    size: StepsSize,
+    status: StepStatus,
+    useNumber: Boolean,
+    customIcon: String?,
+    modifier: Modifier = Modifier,
+) {
+    val bubbleSize: Dp = if (size == StepsSize.SMALL) 16.dp else 24.dp
+    val innerSize: Dp = if (size == StepsSize.SMALL) 12.dp else 16.dp
+    val dotSize: Dp = if (size == StepsSize.SMALL) 6.dp else 8.dp
+
+    val (bgColor, borderColor) = resolveIconBgAndBorder(status)
+
+    Box(
+        modifier = modifier
+            .size(bubbleSize)
+            .background(color = bgColor, shape = CircleShape)
+            .border(width = 2.dp, color = borderColor, shape = CircleShape)
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+        contentAlignment = Alignment.Center,
+    ) {
+        when {
+            useNumber -> {
+                Text(
+                    text = (index + 1).toString(),
+                    style = Typography.headerXsSemibold,
+                    color = Colors.black_01,
+                )
+            }
+            isActive -> {
+                if (!customIcon.isNullOrEmpty()) {
+                    Icon(
+                        source = customIcon,
+                        size = innerSize,
+                        color = Colors.black_01,
+                    )
+                } else {
+                    // current-step dot (white circle matching RN currIcon style)
+                    Box(
+                        modifier = Modifier
+                            .size(dotSize)
+                            .background(color = Colors.black_01, shape = CircleShape),
+                    )
+                }
+            }
+            else -> {
+                Icon(
+                    source = if (error) "navigation_close" else "notifications_check",
+                    size = innerSize,
+                    color = Colors.black_01,
+                )
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun StepsHorizontal(
+    steps: List<StepItem>,
+    activeIndex: Int,
+    size: StepsSize,
+    useNumber: Boolean,
+    align: StepsAlign,
+    customIcon: String?,
+    disabled: Boolean,
+    onPress: ((StepItem, Int) -> Unit)?,
+) {
+    val theme = AppTheme.current
+    // completed-line colour is primary at 20 % opacity (mirrors RN primary + '33')
+    val completedLine = remember(theme.colors.primary) { theme.colors.primary.copy(alpha = 0.2f) }
+    val defaultLine = theme.colors.background.default
+
+    Row(modifier = Modifier.fillMaxWidth()) {
+        steps.forEachIndexed { index, item ->
+            val status = resolveStatus(activeIndex, index, item.error, disabled)
+            val isActiveOrError = status == StepStatus.CURRENT || status == StepStatus.ERROR
+
+            // Horizontal always uses the xs/description typography scale (checkSizeAndStepType=true)
+            val currentTitleStyle = if (isActiveOrError)
+                Typography.headerXsSemibold else Typography.descriptionDefaultRegular
+            val currentDescStyle = if (size == StepsSize.SMALL)
+                Typography.descriptionXsRegular else Typography.descriptionDefaultRegular
+
+            val titleColor = resolveTitleColor(status)
+            val subColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
+
+            val colAlign = when (align) {
+                StepsAlign.LEFT -> Alignment.Start
+                StepsAlign.RIGHT -> Alignment.End
+                StepsAlign.STRETCH -> when (index) {
+                    0 -> Alignment.Start
+                    steps.size - 1 -> Alignment.End
+                    else -> Alignment.CenterHorizontally
+                }
+                StepsAlign.CENTER -> Alignment.CenterHorizontally
+            }
+            val textAlign = when (align) {
+                StepsAlign.LEFT -> TextAlign.Start
+                StepsAlign.RIGHT -> TextAlign.End
+                StepsAlign.STRETCH -> when (index) {
+                    0 -> TextAlign.Start
+                    steps.size - 1 -> TextAlign.End
+                    else -> TextAlign.Center
+                }
+                StepsAlign.CENTER -> TextAlign.Center
+            }
+
+            val hideLineLeft = align == StepsAlign.LEFT ||
+                    (align == StepsAlign.STRETCH && index == 0)
+            val hideLineRight = align == StepsAlign.RIGHT ||
+                    (align == StepsAlign.STRETCH && index == steps.size - 1)
+
+            val lineLeft = when {
+                index == 0 -> Color.Transparent
+                activeIndex >= index -> completedLine
+                else -> defaultLine
+            }
+            val lineRight = when {
+                index == steps.size - 1 -> Color.Transparent
+                activeIndex > index -> completedLine
+                else -> defaultLine
+            }
+
+            val clickable = status == StepStatus.COMPLETED && onPress != null && !disabled
+
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .then(
+                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
+                        else Modifier
+                    ),
+                horizontalAlignment = colAlign,
+            ) {
+                // time label shown above the icon row
+                if (!item.time.isNullOrEmpty()) {
+                    Text(
+                        text = item.time,
+                        style = Typography.descriptionXsRegular,
+                        color = subColor,
+                        textAlign = textAlign,
+                    )
+                } else {
+                    Spacer(modifier = Modifier.height(0.dp))
+                }
+
+                // icon row with horizontal connector lines
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.fillMaxWidth(),
+                ) {
+                    if (!hideLineLeft) {
+                        Box(
+                            modifier = Modifier
+                                .weight(1f)
+                                .height(2.dp)
+                                .background(
+                                    color = lineLeft,
+                                    shape = RoundedCornerShape(
+                                        topEnd = Radius.XS,
+                                        bottomEnd = Radius.XS,
+                                    ),
+                                ),
+                        )
+                    }
+                    StepBubble(
+                        index = index,
+                        isActive = activeIndex == index,
+                        error = item.error,
+                        size = size,
+                        status = status,
+                        useNumber = useNumber,
+                        customIcon = customIcon,
+                        modifier = Modifier.padding(
+                            start = if (!hideLineLeft) Spacing.XS else 0.dp,
+                            end = if (!hideLineRight) Spacing.XS else 0.dp,
+                            top = Spacing.XS,
+                            bottom = Spacing.XS,
+                        ),
+                    )
+                    if (!hideLineRight) {
+                        Box(
+                            modifier = Modifier
+                                .weight(1f)
+                                .height(2.dp)
+                                .background(
+                                    color = lineRight,
+                                    shape = RoundedCornerShape(
+                                        topStart = Radius.XS,
+                                        bottomStart = Radius.XS,
+                                    ),
+                                ),
+                        )
+                    }
+                }
+
+                if (item.title.isNotEmpty()) {
+                    Text(
+                        text = item.title,
+                        style = currentTitleStyle,
+                        color = titleColor,
+                        textAlign = textAlign,
+                        modifier = Modifier.padding(bottom = Spacing.XXS),
+                    )
+                }
+
+                if (!item.description.isNullOrEmpty()) {
+                    Text(
+                        text = item.description,
+                        style = currentDescStyle,
+                        color = subColor,
+                        textAlign = textAlign,
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun StepsVertical(
+    steps: List<StepItem>,
+    activeIndex: Int,
+    size: StepsSize,
+    useNumber: Boolean,
+    customIcon: String?,
+    disabled: Boolean,
+    onPress: ((StepItem, Int) -> Unit)?,
+) {
+    val theme = AppTheme.current
+    val completedLine = remember(theme.colors.primary) { theme.colors.primary.copy(alpha = 0.2f) }
+    val defaultLine = theme.colors.background.default
+    val useSmall = size == StepsSize.SMALL
+    // Fixed connector height; grows proportionally with content in practice
+    val connectorHeight: Dp = if (useSmall) 24.dp else 32.dp
+
+    Column(modifier = Modifier.fillMaxWidth()) {
+        steps.forEachIndexed { index, item ->
+            val status = resolveStatus(activeIndex, index, item.error, disabled)
+            val isActiveOrError = status == StepStatus.CURRENT || status == StepStatus.ERROR
+            val isLast = index == steps.size - 1
+
+            // Vertical large: header_s / body; vertical small: header_xs / description
+            val currentTitleStyle = if (isActiveOrError) {
+                if (useSmall) Typography.headerXsSemibold else Typography.headerSSemibold
+            } else {
+                if (useSmall) Typography.descriptionDefaultRegular else Typography.bodyDefaultRegular
+            }
+            val currentDescStyle = if (useSmall)
+                Typography.descriptionXsRegular else Typography.descriptionDefaultRegular
+
+            val titleColor = resolveTitleColor(status)
+            val subColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
+            val lineColor = if (activeIndex > index) completedLine else defaultLine
+
+            val clickable = status == StepStatus.COMPLETED && onPress != null && !disabled
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .then(
+                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
+                        else Modifier
+                    ),
+            ) {
+                // Left column: bubble + vertical connector line
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    modifier = Modifier.padding(end = Spacing.M),
+                ) {
+                    StepBubble(
+                        index = index,
+                        isActive = activeIndex == index,
+                        error = item.error,
+                        size = size,
+                        status = status,
+                        useNumber = useNumber,
+                        customIcon = customIcon,
+                    )
+                    if (!isLast) {
+                        Box(
+                            modifier = Modifier
+                                .width(2.dp)
+                                .height(connectorHeight)
+                                .padding(vertical = Spacing.XS)
+                                .background(color = lineColor),
+                        )
+                    }
+                }
+
+                // Right column: title + time on the same row, description below
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(bottom = if (isLast) 0.dp else Spacing.S),
+                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.Top,
+                    ) {
+                        Text(
+                            text = item.title,
+                            style = currentTitleStyle,
+                            color = titleColor,
+                            maxLines = 2,
+                            modifier = Modifier
+                                .weight(1f)
+                                .padding(end = Spacing.S),
+                        )
+                        if (!item.time.isNullOrEmpty()) {
+                            Text(
+                                text = item.time,
+                                style = Typography.descriptionXsRegular,
+                                color = subColor,
+                            )
+                        }
+                    }
+                    if (!item.description.isNullOrEmpty()) {
+                        Spacer(modifier = Modifier.height(Spacing.XXS))
+                        Text(
+                            text = item.description,
+                            style = currentDescStyle,
+                            color = subColor,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ─── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Steps — guided progress indicator through a sequence of procedural steps.
+ *
+ * Mirrors the React Native `Steps` component from `@momo-kits/step`.
+ *
+ * @param steps       Ordered list of [StepItem] values to display.
+ * @param activeIndex Zero-based index of the currently active step.
+ * @param modifier    Modifier applied to the outermost container.
+ * @param horizontal  `true` renders a horizontal layout; defaults to vertical.
+ * @param size        [StepsSize.SMALL] or [StepsSize.LARGE] — affects bubble and typography scale.
+ * @param useNumber   Shows the 1-based step number inside the bubble instead of a check/dot icon.
+ * @param align       Text and icon alignment in horizontal mode: LEFT, RIGHT, CENTER, or STRETCH.
+ * @param customIcon  Icon source name rendered inside the active-step bubble (replaces the dot).
+ * @param disabled    Dims all steps and suppresses all press callbacks.
+ * @param onPress     Invoked with the tapped [StepItem] and its index; only fires for completed steps.
+ */
+@Composable
+fun Steps(
+    steps: List<StepItem>,
+    activeIndex: Int,
+    modifier: Modifier = Modifier,
+    horizontal: Boolean = false,
+    size: StepsSize = StepsSize.LARGE,
+    useNumber: Boolean = false,
+    align: StepsAlign = StepsAlign.CENTER,
+    customIcon: String? = null,
+    disabled: Boolean = false,
+    onPress: ((StepItem, Int) -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        if (horizontal) {
+            StepsHorizontal(
+                steps = steps,
+                activeIndex = activeIndex,
+                size = size,
+                useNumber = useNumber,
+                align = align,
+                customIcon = customIcon,
+                disabled = disabled,
+                onPress = onPress,
+            )
+        } else {
+            StepsVertical(
+                steps = steps,
+                activeIndex = activeIndex,
+                size = size,
+                useNumber = useNumber,
+                customIcon = customIcon,
+                disabled = disabled,
+                onPress = onPress,
+            )
+        }
+    }
+}

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

@@ -0,0 +1,122 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+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.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withStyle
+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
+import vn.momo.kits.modifier.shadow
+
+@Composable
+fun SuggestAction(
+    message: String,
+    buttonTitle: String,
+    boldMessage: String = "",
+    image: String = "",
+    visible: Boolean = false,
+    onClose: () -> Unit = {},
+    onPressButton: () -> Unit = {},
+    modifier: Modifier = Modifier,
+) {
+    val theme = AppTheme.current
+
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(),
+        exit = fadeOut(),
+        modifier = modifier,
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .shadow(
+                    color = theme.colors.text.default.copy(alpha = 0.12f),
+                    borderRadius = Radius.S,
+                    blurRadius = 16f,
+                    offsetY = 4.dp,
+                )
+                .clip(RoundedCornerShape(Radius.S))
+                .background(
+                    color = theme.colors.background.surface,
+                    shape = RoundedCornerShape(Radius.S),
+                )
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(Spacing.M),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (image.isNotEmpty()) {
+                Image(
+                    source = image,
+                    modifier = Modifier
+                        .size(32.dp)
+                        .clip(RoundedCornerShape(Radius.XS)),
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+            }
+
+            val annotatedMessage = remember(message, boldMessage) {
+                if (boldMessage.isNotEmpty()) {
+                    val index = message.lowercase().indexOf(boldMessage.lowercase())
+                    if (index != -1) {
+                        buildAnnotatedString {
+                            append(message.substring(0, index))
+                            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
+                                append(message.substring(index, index + boldMessage.length))
+                            }
+                            append(message.substring(index + boldMessage.length))
+                        }
+                    } else {
+                        buildAnnotatedString { append(message) }
+                    }
+                } else {
+                    buildAnnotatedString { append(message) }
+                }
+            }
+
+            Text(
+                text = annotatedMessage,
+                style = Typography.bodyDefaultRegular,
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(end = Spacing.M),
+            )
+
+            Button(
+                title = buttonTitle,
+                type = ButtonType.TONAL,
+                size = Size.SMALL,
+                isFull = false,
+                onClick = {
+                    onPressButton()
+                },
+            )
+
+            Spacer(modifier = Modifier.width(Spacing.S))
+
+            Icon(
+                source = "navigation_close",
+                size = 24.dp,
+                color = theme.colors.text.default,
+                modifier = Modifier.activeOpacityClickable { onClose() },
+            )
+        }
+    }
+}