@momo-kits/native-kits 0.156.6-sp.1-debug → 0.156.6-sp.2-debug

package/compose/build.gradle.kts

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

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

@@ -370,9 +370,14 @@ private class LiteScreenHeaderPolicy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
                     .coerceAtLeast(minWidth)
             )
-        } else realConstraints.copy(
-            maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spacing12 * 2
-        )
+        } else {
+            var spaceConsumed = 0
+            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spacing12
+            if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spacing12
+            realConstraints.copy(
+                maxWidth = realConstraints.maxWidth - spaceConsumed
+            )
+        }
         val inputSearchPlaceable = measurables.find { it.layoutId == HeaderId.INPUT_SEARCH_ID }
             ?.measure(inputSearchConstraints)
         val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
@@ -516,7 +521,7 @@ private fun LiteInputSearch(
 
     val isShowBtnText by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
         derivedStateOf {
-            inputSearchProps.isShowBtnText && inputSearchProps.btnText.isNullOrEmpty()
+            inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
         }
     }
     val inputFieldStyle = remember(theme) {

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

@@ -23,7 +23,7 @@ import vn.momo.kits.modifier.conditional
 
 
 @Composable
-fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier? = null) {
     val primaryColors = listOf(
         Color(0xFFF0F0F0),
         Color(0xFFEB2F96),
@@ -63,21 +63,23 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null) {
     }
     val scaleSize = scaleSize(16f)
 
-    Box(
-        modifier = Modifier
-            .height(scaleSize.dp)
-            .widthIn(min = scaleSize.dp)
-            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
-            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = formatTitle(label),
-            color = Colors.black_01,
-            style = Typography.actionXxsBold
-        )
+    if (modifier != null) {
+        Box(
+            modifier = modifier
+                .height(scaleSize.dp)
+                .widthIn(min = scaleSize.dp)
+                .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+                .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = formatTitle(label),
+                color = Colors.black_01,
+                style = Typography.actionXxsBold
+            )
+        }
     }
 }

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

@@ -0,0 +1,198 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
+import io.ktor.util.Platform
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.getStatusBarHeight
+
+/**
+ * A debug overlay that draws danger/warning baseline guides on top of the screen.
+ *
+ * Highlights safe-area boundaries, header regions, and bottom navigation zones
+ * using colored solid or dotted lines and semi-transparent red zones.
+ *
+ * @param enabled When `false` the composable renders nothing. Pass `false` when
+ *                your QC automation flag is active to suppress the overlay.
+ */
+@Composable
+fun BaselineView(enabled: Boolean = true) {
+    if (!enabled) return
+
+    val bottomInsetHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+    val topInset = if (getPlatformName() == "Android") getStatusBarHeight() - 14.dp else getStatusBarHeight()
+    val bottomInset = if (getPlatformName() == "iOS") minOf(bottomInsetHeight, 21.dp) else bottomInsetHeight
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Danger zones
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(topInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.TopEnd)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.BottomCenter)
+        )
+
+        // Danger lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset)
+                .fillMaxWidth(),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 52.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 104.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 64.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(end = 12.dp)
+                .fillMaxHeight()
+                .align(Alignment.BottomEnd),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+
+        // Warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 26.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFFF7A00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 56.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 8.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+
+        // Header background warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 40.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 48.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+    }
+}
+
+enum class BaselineOrientation { Horizontal, Vertical }
+
+@Composable
+fun BaselineDottedLine(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Red,
+    orientation: BaselineOrientation = BaselineOrientation.Horizontal,
+    isDotted: Boolean = true
+) {
+    Canvas(modifier = modifier) {
+        val pathEffect = if (isDotted) PathEffect.dashPathEffect(floatArrayOf(8f, 8f)) else null
+        drawLine(
+            color = color,
+            start = if (orientation == BaselineOrientation.Horizontal) Offset(
+                0f,
+                size.height / 2
+            ) else Offset(size.width / 2, 0f),
+            end = if (orientation == BaselineOrientation.Horizontal) Offset(
+                size.width,
+                size.height / 2
+            ) else Offset(size.width / 2, size.height),
+            strokeWidth = 1.dp.toPx(),
+            pathEffect = pathEffect,
+            cap = StrokeCap.Round,
+        )
+    }
+}

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

@@ -49,9 +49,20 @@ import vn.momo.kits.utils.formatNumberToMoney
 
 class CustomConverter : VisualTransformation {
     override fun filter(text: AnnotatedString): TransformedText {
-        if (text.text.isEmpty() || text.text == "0") {
+        if (text.text.isEmpty()) {
+            return TransformedText(
+                AnnotatedString("0"),
+                object : OffsetMapping {
+                    override fun originalToTransformed(offset: Int): Int = 0
+                    override fun transformedToOriginal(offset: Int): Int = 0
+                }
+            )
+        }
+        
+        if (text.text == "0") {
             return TransformedText(AnnotatedString("0"), OffsetMapping.Identity)
         }
+        
         val formattedText = formatNumberToMoney(text.text.toLong())
 
         return TransformedText(

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTabBar.kt

@@ -40,13 +40,15 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 val floatingButtonWidth = 75.dp
-const val BOTTOM_TAB_BAR_HEIGHT = 56
+const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
 fun BottomTabBar(
@@ -142,6 +144,18 @@ fun RowScope.renderTabBarItem(
 
 @Composable
 fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+    fun formatLabel(label: String): String? {
+        if (isNumber(label) && label.toInt() == 0) {
+            return null
+        }
+        return label
+    }
+    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
+
     Box(modifier = Modifier
         .fillMaxSize()
         .padding(horizontal = Spacing.XXS)
@@ -156,31 +170,34 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.XXS)
+                .padding(horizontal = Spacing.S, vertical = Spacing.S)
                 .noFeedbackClickable {
                     onClick()
                 },
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Bottom
+            verticalArrangement = Arrangement.Center
         ) {
             Icon(
                 source = item.icon,
-                modifier = Modifier.weight(1f),
+                size = 28.dp,
+                modifier = Modifier.padding(Spacing.XS),
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                style = Typography.labelXsMedium,
+                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
         }
-        if(item.badgeLabel != null){
-            Box(modifier = Modifier
-                .offset(x = 44.dp, y = (-32).dp)
-            ){
-                Badge(item.badgeLabel)
-            }
+        if (badgeLabel != null) {
+            if (badgeLabel.isEmpty())
+                BadgeDot(
+                    size = DotSize.Small,
+                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+                )
+            else
+                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
         }
     }
 }
@@ -190,7 +207,7 @@ fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
             .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS)
+            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.156.6-sp.1-debug",
+  "version": "0.156.6-sp.2-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},