@momo-kits/native-kits 0.120.0-rc.8 → 0.120.0-test.20

package/compose/build.gradle.kts

@@ -15,10 +15,11 @@ kotlin {
         publishLibraryVariants("release")
     }
 
-    val isDebug = (project.findProperty("kotlin.native.cocoapods.platform") as? String)?.contains("iphoneos", ignoreCase = true) == false
-    val targets = if(isDebug) listOf(iosX64(),iosSimulatorArm64()) else listOf(iosArm64())
-
-    targets.forEach { iosTarget ->
+    listOf(
+        iosX64(),
+        iosArm64(),
+        iosSimulatorArm64(),
+    ).forEach { iosTarget ->
         iosTarget.binaries.framework {
             baseName = "lib"
             isStatic = true
@@ -49,13 +50,10 @@ kotlin {
                 implementation(libs.jetbrains.coroutines.android)
             }
         }
-        if(isDebug) {
-            val iosX64Main by getting
-            val iosSimulatorArm64Main by getting
-        } else {
-            val iosArm64Main by getting    
-        }
-    
+        val iosX64Main by getting
+        val iosArm64Main by getting
+        val iosSimulatorArm64Main by getting
+
         iosMain.dependencies {
             implementation(libs.ktor.client.darwin)
         }

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

@@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -168,11 +167,9 @@ fun Header(
                         HeaderTitle(
                             title = title,
                             color = tintIconColor,
-                            modifier = Modifier
-                                .setAutomationId("title_navigation_header")
-                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
-                            ,
-                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
+                            modifier = Modifier.semantics {
+                                testTag = "title_navigation_header"
+                            }
                         )
                     }
                 }

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

@@ -17,6 +17,7 @@ enum class TitlePosition {
 }
 
 data class AnimatedHeader(
+    val type: HeaderType = HeaderType.DEFAULT,
     val composable: @Composable (scrollState: Int) -> Unit = {}
 )
 

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

@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
@@ -26,7 +25,6 @@ fun HeaderTitle(
             lineHeight = 22.sp,
         ),
         color = color,
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
+        maxLines = 1
     )
 }

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

@@ -96,7 +96,8 @@ val AppLanguage = staticCompositionLocalOf<String?> {
 data class KitConfig(
     val trustBanner: TrustBannerData? = null,
     val headerBar: String? = null,
-    val headerGradient: String? = null
+    val headerGradient: String? = null,
+    val isWhiteList: Boolean = false
 )
 
 @Composable

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

@@ -200,8 +200,9 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
     Box(
         Modifier
             .offset(y = -keyboardSize)
+            .padding(bottom = bottom)
             .shadow(
-                Colors.black_20.copy(alpha = 0.2f),
+                Colors.black_20.copy(alpha = 0.1f),
                 borderRadius = 0.dp,
                 10f,
                 offsetX = 0.dp,
@@ -211,9 +212,7 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
             .background(AppTheme.current.colors.background.surface)
     ) {
         Box(
-            Modifier.fillMaxWidth()
-                .padding(bottom = bottom)
-                .padding(vertical = Spacing.S, horizontal = Spacing.M)
+            Modifier.fillMaxWidth().padding(vertical = Spacing.S, horizontal = Spacing.M)
         ) {
             footer?.invoke()
         }

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

@@ -14,8 +14,6 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.layout.onSizeChanged
 import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
@@ -30,47 +28,6 @@ enum class ImageState {
     Loading, Success, Error
 }
 
-private val supportedDomains = setOf(
-    "static.momocdn.net",
-    "img.mservice.com.vn",
-    "cdn.mservice.com.vn",
-    "img.mservice.io",
-    "image.momocdn.net"
-)
-
-private val sizeChart = mapOf(
-    "XXS" to 64,
-    "XS" to 128,
-    "S" to 256,
-    "M" to 512,
-    "L" to 768,
-    "XL" to 1024,
-    "XXL" to 2048
-)
-
-private fun closestSizeForWidth(width: Float): String {
-    return sizeChart.minByOrNull { (_, value) ->
-        kotlin.math.abs(value - width)
-    }?.key ?: "M"
-}
-
-private fun getHostFromUrl(url: String): String? {
-    return try {
-        val noProtocol = url.substringAfter("//")
-        noProtocol.substringBefore("/").substringBefore(":")
-    } catch (_: Exception) {
-        null
-    }
-}
-
-private fun appendQueryParam(url: String, key: String, value: String): String {
-    val parts = url.split("#", limit = 2)
-    val base = parts[0]
-    val fragment = if (parts.size > 1) "#" + parts[1] else ""
-    val sep = if (base.contains("?")) "&" else "?"
-    return "$base$sep$key=$value$fragment"
-}
-
 @Composable
 fun Image(
     source: Any,
@@ -80,8 +37,6 @@ fun Image(
 ) {
     var imageOptions = Options()
     var imageState by remember { mutableStateOf(ImageState.Loading) }
-    var urlToLoad by remember(source) { mutableStateOf(source) }
-    val density = LocalDensity.current
 
     options?.let {
         imageOptions = Options(
@@ -92,29 +47,10 @@ fun Image(
         )
     }
 
-    Box(
-        modifier = modifier
-            .semantics { contentDescription = "img|$source" }
-            .onSizeChanged { size ->
-                if (source is String) {
-                    val host = getHostFromUrl(source)
-                    if (host != null && supportedDomains.contains(host)) {
-                        val widthPx = size.width.toFloat()
-                        val pixelRatio = density.density
-                        val pixelFitForWidth = widthPx * pixelRatio
-                        val sizeKey = closestSizeForWidth(pixelFitForWidth)
-                        urlToLoad = appendQueryParam(source, "size", sizeKey)
-                    } else {
-                        urlToLoad = source
-                    }
-                } else {
-                    urlToLoad = source
-                }
-            }
-    ) {
+    Box(modifier = modifier.semantics { contentDescription = "img|$source" }) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
+            model = source,
             contentDescription = null,
             contentScale = imageOptions.contentScale,
             alignment = imageOptions.alignment,

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

@@ -36,7 +36,6 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 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

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

@@ -57,7 +57,6 @@ fun PopupNotify(
     secondary: PopupAction? = null,
     buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
     onIconClose: () -> Unit,
-    isShowCloseIcon: Boolean = true,
 ) {
     var isScroll by remember { mutableStateOf(false) }
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
@@ -108,13 +107,13 @@ fun PopupNotify(
                     RoundedCornerShape(Radius.L)
                 )
         ) {
-            if(image.isNotEmpty()) {
+            image.ifNotNull(
                 Image(
                     source = image,
                     modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment = Alignment.Center)
-                )
-            }
+                    options = Options(alignment =  Alignment.Center)
+                ), null
+            )
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
                 Text(
@@ -126,7 +125,7 @@ fun PopupNotify(
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(
-                        text = "Mã lỗi: " + error,
+                        text = error,
                         style = Typography.descriptionXsRegular,
                         color = AppTheme.current.colors.text.hint,
                         maxLines = 1,
@@ -145,36 +144,34 @@ fun PopupNotify(
             }
         }
 
-        if(isShowCloseIcon) {
-            Box(
-                Modifier
-                    .width(22.dp)
-                    .height(22.dp)
-                    .offset(x = -(1).dp, y = (-11).dp)
-                    .background(
-                        color = AppTheme.current.colors.text.default,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .border(
-                        width = 2.dp,
-                        color = AppTheme.current.colors.background.surface,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .clip(RoundedCornerShape(100))
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = { onClose { onIconClose() } }
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Icon(
-                    source = "navigation_close",
+        Box(
+            Modifier
+                .width(22.dp)
+                .height(22.dp)
+                .offset(x = -(1).dp, y = (-11).dp)
+                .background(
+                    color = AppTheme.current.colors.text.default,
+                    shape = RoundedCornerShape(Radius.M)
+                )
+                .border(
+                    width = 2.dp,
                     color = AppTheme.current.colors.background.surface,
-                    size = 16.dp,
-                    modifier = Modifier.setAutomationId("ic_popup_close")
+                    shape = RoundedCornerShape(Radius.M)
                 )
-            }
+                .clip(RoundedCornerShape(100))
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                    onClick = { onClose { onIconClose() } }
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = "navigation_close",
+                color = AppTheme.current.colors.background.surface,
+                size = 16.dp,
+                modifier = Modifier.setAutomationId("ic_popup_close")
+            )
         }
     }
 }

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

@@ -22,11 +22,8 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
 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.modifier.setAutomationId
-import vn.momo.kits.utils.ifNotNull
 
 @Composable
 fun PopupPromotion(
@@ -35,7 +32,7 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
-        source.ifNotNull(
+        if (source.isNotEmpty()) {
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
@@ -46,20 +43,28 @@ fun PopupPromotion(
                         onClick = onPress
                     ),
                 options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Crop)
-            ), null
-        )
+            )
+        }
         Box(
             modifier = Modifier
                 .padding(top = Spacing.S)
-                .fillMaxWidth()
-                .width(40.dp)
-                .height(40.dp),
+                .fillMaxWidth(),
             contentAlignment = Alignment.Center
         ) {
             Box(
-                modifier = Modifier
-                    .width(40.dp)
-                    .height(40.dp)
+                Modifier
+                    .width(20.dp)
+                    .height(20.dp)
+                    .background(
+                        color = AppTheme.current.colors.text.default,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .border(
+                        width = 2.dp,
+                        color = AppTheme.current.colors.background.surface,
+                        shape = RoundedCornerShape(Radius.M)
+                    )
+                    .clip(RoundedCornerShape(100))
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,
@@ -67,32 +72,15 @@ fun PopupPromotion(
                     ),
                 contentAlignment = Alignment.Center
             ) {
-                Box(
-                    Modifier
-                        .width(22.dp)
-                        .height(22.dp)
-                        .background(
-                            color = AppTheme.current.colors.text.default,
-                            shape = RoundedCornerShape(Radius.M)
-                        )
-                        .border(
-                            width = 2.dp,
-                            color = AppTheme.current.colors.background.surface,
-                            shape = RoundedCornerShape(Radius.M)
-                        )
-                        .clip(RoundedCornerShape(100))
-                    ,
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        source = "navigation_close",
-                        color = AppTheme.current.colors.background.surface,
-                        size = 16.dp,
-                        modifier = Modifier.setAutomationId("ic_popup_close")
-                    )
-                }
+                Icon(
+                    source = "navigation_close",
+                    color = AppTheme.current.colors.background.surface,
+                    size = 14.dp,
+                    modifier = Modifier.semantics {
+                        testTag = "ic_popup_close"
+                    }
+                )
             }
-
         }
     }
 }

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

@@ -17,7 +17,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.utils.ifTrue
 
 @Composable
@@ -25,8 +24,6 @@ fun Switch(
     value: Boolean = false,
     onChange: (Boolean) -> Unit = {},
     disabled: Boolean = false,
-    title: String? = "",
-    accessibilityId: String? = ""
 ) {
     val circleBackgroundColor = value.ifTrue(Colors.black_01, Colors.black_03)
     var backgroundColor = value.ifTrue(Colors.green_03, Colors.black_07)
@@ -35,35 +32,27 @@ fun Switch(
     }
 
     Box(
-        modifier = Modifier.setAutomationId( accessibilityId ?: "toggle_${title ?: "unknown"}_${value}")
+        modifier = Modifier.then(
+            Modifier.width(38.dp).height(20.dp).border(
+                0.dp, Color.Unspecified,
+                RoundedCornerShape(20.dp)
+            ).background(backgroundColor, RoundedCornerShape(20.dp)).clip(RoundedCornerShape(20.dp))
+                .clickable(
+                    enabled = !disabled,
+                    onClick = { onChange(!value) }
+                )
+                .padding(horizontal = Spacing.XS)
+        ),
+        contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
     ) {
         Box(
-            modifier = Modifier.then(
-                Modifier.width(38.dp).height(20.dp).border(
-                    0.dp, Color.Unspecified,
-                    RoundedCornerShape(20.dp)
-                ).background(backgroundColor, RoundedCornerShape(20.dp))
-                    .clip(RoundedCornerShape(20.dp))
-                    .clickable(
-                        enabled = !disabled,
-                        onClick = { onChange(!value) }
-                    )
-                    .padding(horizontal = Spacing.XS)
-            ),
-            contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
-        ) {
-            Box(
-                modifier = Modifier.size(14.dp)
-                    .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
-                    .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
-                contentAlignment = Alignment.Center
-            )
-            {
-                Box(
-                    Modifier.size(6.dp)
-                        .background(backgroundColor, RoundedCornerShape(percent = 100))
-                )
-            }
+            modifier = Modifier.size(14.dp)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
+                .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
+            contentAlignment = Alignment.Center
+        )
+        {
+            Box(Modifier.size(6.dp).background(backgroundColor, RoundedCornerShape(percent = 100)))
         }
     }
 }

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

@@ -1,5 +1,7 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -8,9 +10,10 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.const.scaleSize
@@ -28,28 +31,25 @@ fun Text(
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
     fontFamily: String = "SFProText",
-    minLines: Int = 1,
-    letterSpacing: TextUnit = TextUnit.Unspecified,
-    softWrap: Boolean = true,
     accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
     val font = getFontFamily(fontFamily, style.fontWeight)
 
-    androidx.compose.material3.Text(
-        modifier = modifier.setAutomationId(accessibilityId ?: text, text),
-        text = text,
-        color = color ?: AppTheme.current.colors.text.default,
-        style = style.copy(fontWeight = null),
-        textAlign = textAlign,
-        fontSize = fontSize,
-        fontFamily = font,
-        maxLines = maxLines,
-        softWrap = softWrap,
-        letterSpacing = letterSpacing,
-        minLines = minLines,
-        textDecoration = textDecoration,
-        onTextLayout = onTextLayout,
-        overflow = overflow
-    )
-}
+    Box(modifier = Modifier.border(0.5.dp, Colors.green_06)) {
+        androidx.compose.material3.Text(
+            modifier = modifier.setAutomationId(accessibilityId ?: text, text),
+            text = text,
+            color = color ?: AppTheme.current.colors.text.default,
+            style = style.copy(fontWeight = null),
+            textAlign = textAlign,
+            fontSize = fontSize,
+            fontFamily = font,
+            maxLines = maxLines,
+            textDecoration = textDecoration,
+            onTextLayout = onTextLayout,
+            overflow = overflow
+        )
+    }
+
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -2,6 +2,7 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -11,18 +12,39 @@ import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
 import org.jetbrains.compose.resources.ResourceItem
+import vn.momo.kits.application.AppConfig
+import vn.momo.kits.application.KitConfig
 import vn.momo.kits.platform.getScreenDimensions
+import kotlin.math.max
+import kotlin.math.min
 
 const val DEFAULT_SCREEN_SIZE = 375f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
 
 @Composable
-fun scaleSize(size: Float): Float {
+fun scaleSize(size: Float, config: KitConfig? = AppConfig.current): Float {
+    val isWhiteList = config?.isWhiteList ?: false
     val deviceWidth = getScreenDimensions().width
-    val scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE
-    if (scaleRate > 1) {
-        return if ((scaleRate * size) > (size + 5)) size + 5 else scaleRate * size
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    val defaultFontSize = size / fontScale //To ignore OS scale
+    var fontSizeScaleDevice = defaultFontSize
+    var fontSizeScaleOS = defaultFontSize
+
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
     }
-    return size
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * MAX_FONT_SCALE)
+    }
+
+    return if (isWhiteList) max(fontSizeScaleDevice, fontSizeScaleOS) else fontSizeScaleDevice
 }
 
 @OptIn(InternalResourceApi::class)

package/ios/Application/Components.swift

@@ -214,8 +214,8 @@ public struct Header: View {
                                 }
                             } else {
                                 Text(title)
-                                    .font(Font.system(size: 17).weight(.bold))
-                                    .lineSpacing(22)
+                                    .font(Font.system(size: scaleSize(17)).weight(.bold))
+                                    .lineSpacing(scaleSize(22))
                                     .foregroundColor(tintColor)
                                     .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
                                     .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)

package/ios/Application/Screen.swift

@@ -88,8 +88,7 @@ public struct Screen<Content: View>: View {
             let screenHeight = height + topInset + bottomInset
 
             ZStack {
-                (backgroundColor ?? Color.white)
-                    .edgesIgnoringSafeArea(.top)
+                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
 
                 VStack(spacing: 0) {
                     ZStack(alignment: .top) {
@@ -185,8 +184,6 @@ struct Footer: View {
         VStack {
             footerView
         }
-        .padding(.vertical, Spacing.S)
-        .padding(.horizontal, Spacing.M)
         .padding(.bottom, keyboardSize)
         .background(Colors.black01)
     }