@momo-kits/native-kits 0.156.6-beta.2-debug → 0.156.6-beta.20-debug

package/compose/build.gradle.kts

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

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.156.1-beta.2'
+    spec.version                  = '0.156.6-beta.16'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -10,11 +10,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp

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

@@ -78,6 +78,14 @@ data class MiniAppContext(
     }
 }
 
+@Immutable
+data class ComponentInformation(
+    val componentName: String? = null,
+    val componentId: String? = null,
+    val params: Map<String,Any?>? = null,
+    val action: String? = null
+)
+
 var IsShowBaseLineDebug = false
 
 val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
@@ -92,4 +100,8 @@ val AppLanguage = staticCompositionLocalOf<String?> {
     null
 }
 
+val LocalComponentInformation = staticCompositionLocalOf<ComponentInformation?> {
+    null
+}
+
 internal val ScaleSizeMaxRate  = staticCompositionLocalOf<Float?> { null }

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/Button.kt

@@ -11,17 +11,14 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.defaultMinSize
 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.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -127,13 +124,12 @@ fun getTextColor(loading: Boolean, type: ButtonType): Color {
 }
 
 @Composable
-fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
+fun RenderTitle(size: Size, title: String = "", textColor: Color) {
     val style = remember(size) { getStyle(size) }
-    val color = TextColor.current
     Text(
         style = style,
         text = title,
-        color = color,
+        color = textColor,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1
     )
@@ -145,21 +141,20 @@ fun RenderIcon(
     isIconLeft: Boolean,
     useTintColor: Boolean = true,
     icon: String = "",
-    forceLoading: Boolean = false
+    forceLoading: Boolean = false,
+    bgColor: Color? = null,
+    textColor: Color? = null,
 ) {
-    val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
     val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) TextColor.current else Color.Unspecified
-
-    val showLoading = forceLoading
+    val color = if (useTintColor) textColor else Color.Unspecified
 
     val modifier = Modifier.padding(
         start = if (isIconLeft) 0.dp else margin,
         end = if (isIconLeft) margin else 0.dp
     )
 
-    if (showLoading) {
+    if (forceLoading) {
         Box(modifier) {
             LottieAnimation(
                 modifier = Modifier.size(iconSize),
@@ -195,9 +190,9 @@ fun getTypeStyle(
     type: ButtonType,
     color: Color? = AppTheme.current.colors.primary,
     size: Size,
+    bgColor: Color,
 ): Modifier {
     val theme = AppTheme.current
-    val bgColor = BackgroundColor.current
     val radius = remember(size) { size.value.radius }
     val modifier = Modifier.background(bgColor)
 
@@ -304,45 +299,41 @@ fun Button(
                 .clip(RoundedCornerShape(radius))
         }
 
-    CompositionLocalProvider(
-        IsLoading provides loading,
-        BackgroundColor provides getButtonBackgroundColor(loading, type),
-        TextColor provides getTextColor(loading, type)
+    val bgColor = getButtonBackgroundColor(loading, type)
+    val textColor = getTextColor(loading, type)
+
+    Row(
+        modifier = clickableModifier
+            .padding(horizontal = animatedPadding)
+            .clip(RoundedCornerShape(radius))
+            .then(getTypeStyle(type, size = size, bgColor = bgColor))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = sizeSpecs.padding)
+            .height(sizeSpecs.height),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        Row(
-            modifier = clickableModifier
-                .padding(horizontal = animatedPadding)
-                .clip(RoundedCornerShape(radius))
-                .then(getTypeStyle(type, size = size))
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(horizontal = sizeSpecs.padding)
-                .height(sizeSpecs.height),
-            horizontalArrangement = Arrangement.Center,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            RenderIcon(
-                size = size,
-                isIconLeft = true,
-                useTintColor = useTintColor,
-                icon = iconLeft,
-                forceLoading = loading && loadingOnLeft
-            )
-            RenderTitle(size, title, type = type)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft
-            )
-        }
+        RenderIcon(
+            size = size,
+            isIconLeft = true,
+            useTintColor = useTintColor,
+            icon = iconLeft,
+            forceLoading = loading && loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
+        RenderTitle(size, title, textColor = textColor)
+        RenderIcon(
+            size = size,
+            isIconLeft = false,
+            useTintColor = useTintColor,
+            icon = iconRight,
+            forceLoading = loading && !loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
     }
 }
 
-
-private val IsLoading = staticCompositionLocalOf<Boolean> { false }
-private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
-private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
-

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

@@ -43,11 +43,11 @@ import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
 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.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFont
 import vn.momo.kits.const.scaleSize
@@ -141,7 +141,7 @@ fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color
 }
 
 @Composable
-fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit) {
+fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit, modifier: Modifier = Modifier) {
     if (loading) {
         Box {
             CircularProgressIndicator(
@@ -157,7 +157,7 @@ fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () ->
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.clickable(
+            modifier = modifier.clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -224,6 +224,7 @@ fun Input(
     fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -253,10 +254,6 @@ fun Input(
         if (disabled) theme.colors.text.disable else floatingIconColor
     }
 
-    val testId = remember(disabled, floatingValue) {
-        if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
-    }
-
     val fontSize = 14.sp
     val lineHeight = 24.sp
     val scaleFontSize = scaleSize(fontSize)
@@ -298,8 +295,7 @@ fun Input(
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             enabled = !disabled,
             readOnly = readOnly,
@@ -308,7 +304,7 @@ fun Input(
             textStyle = textStyle,
             visualTransformation = visualTransformation,
             keyboardOptions = keyboardOptionsConfig,
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -417,7 +413,7 @@ fun Input(
                                         },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
-                                    )
+                                    ).setAutomationId("ic_clear")
                                 )
                             }
                         }
@@ -430,7 +426,12 @@ fun Input(
                                     onRightIconPressed()
                                     inputState = inputState.copy(passHidden = !inputState.passHidden)
                                 }
-                                RenderRightIcon(loading, iconName, iconTintColor, togglePassword)
+                                RenderRightIcon(
+                                    loading = loading,
+                                    icon = iconName,
+                                    color = iconTintColor,
+                                    onClick = togglePassword,
+                                    modifier = Modifier.setAutomationId("ic_show_hide"))
                             }
                             else -> {
                                 RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)

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

@@ -31,11 +31,11 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
 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.Radius
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
@@ -98,6 +98,7 @@ fun InputPhoneNumber(
     onBlur: () -> Unit = {},
     loading: Boolean = false,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -113,23 +114,20 @@ fun InputPhoneNumber(
     }
 
     val (textColor, placeholderColor, iconTintColor) = colors
-
-    val testId = "input_phone_number"
-
     val textStyle = scaleSize(size.values.textStyle.copy(color = textColor))
 
+
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             singleLine = true,
             value = text.value,
             textStyle = textStyle,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
             cursorBrush = SolidColor(AppTheme.current.colors.primary),
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -218,6 +216,7 @@ fun InputPhoneNumber(
                                         indication = null
                                     )
                                         .padding(horizontal = Spacing.S)
+                                        .setAutomationId("ic_clear")
                                 )
                             }
                         }

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

@@ -180,10 +180,6 @@ val darkTheme = Theme(
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
-val AppThemeController = staticCompositionLocalOf<(Theme) -> Unit> {
-    error("No AppTheme controller provided")
-}
-
 val AppStatusBar = staticCompositionLocalOf { 0.dp }
 
 val AppNavigationBar = staticCompositionLocalOf { 0.dp }

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

@@ -30,7 +30,6 @@ import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.AppThemeController
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
@@ -80,7 +79,6 @@ fun NavigationContainer(
         LocalNavigator provides navigator,
         LocalMaxApi provides maxApi,
         AppTheme provides theme.value,
-        AppThemeController provides { theme.value = it },
         AppStatusBar provides statusBarHeight,
         AppNavigationBar provides navigationBarHeight,
         ApplicationContext provides mergedContext,

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

@@ -35,6 +35,7 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.LocalHeaderRightWidthPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
@@ -119,14 +120,15 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
 }
 
 @Composable
-fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
+private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
     Box(
         modifier = Modifier
             .size(28.dp)
             .background(backgroundButton, RoundedCornerShape(100))
             .border(width = 0.2.dp, color = borderColor, shape = RoundedCornerShape(100))
             .activeOpacityClickable(onClick = onBackHandler)
-            .padding(Spacing.XS),
+            .padding(Spacing.XS)
+            .setAutomationId("btn_navigation_back"),
         contentAlignment = Alignment.Center
     ) {
         Icon(

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

@@ -10,6 +10,7 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.setAutomationId
 
 @Composable
 fun HeaderTitle(
@@ -17,7 +18,7 @@ fun HeaderTitle(
     color: Color? = null,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f),
+        modifier = Modifier.fillMaxWidth().zIndex(1f).setAutomationId("title_navigation_header"),
         text = title,
         textAlign = TextAlign.Start,
         style = Typography.actionSBold.copy(

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Tracking.kt

@@ -0,0 +1,15 @@
+package vn.momo.kits.utils
+
+import androidx.compose.runtime.Composable
+import vn.momo.kits.application.LocalComponentInformation
+
+@Composable
+fun getComponentId(
+    componentName: String? = null,
+    accessibilityLabel: String? = null,
+): String {
+    val componentInformation = LocalComponentInformation.current
+    if (accessibilityLabel != null) return accessibilityLabel
+    if (componentInformation?.componentId != null) return componentInformation.componentId
+    return ""
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -12,11 +12,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.interop.UIKitView
 import androidx.compose.ui.unit.Dp

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.156.1-test.6
+version=0.156.6-beta.16
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Input/Input.swift

@@ -174,7 +174,7 @@ public struct Input: View {
                             onChangeText?("")
                         }) {
                             Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
-                                .padding(.leading, Spacing.S)
+                                .padding(.leading, Spacing.S).accessibility("ic_clear")
                         }
                     }
                     
@@ -194,7 +194,7 @@ public struct Input: View {
                                     size: 24,
                                     color: rightIconColor
                                 )
-                                .padding(.leading, Spacing.S)
+                                .padding(.leading, Spacing.S).accessibility("ic_show_hide")
                             }
                         }
                     } else if !rightIcon.isEmpty {

package/ios/Input/InputPhoneNumber.swift

@@ -21,6 +21,7 @@ public struct InputPhoneNumber: View {
     public var onFocus: (() -> Void)?
     public var onBlur: (() -> Void)?
     public var onRightIconPressed: (() -> Void)?
+    public var accessibilityLabel: String?
     
     @State private var isFocused: Bool = false
     
@@ -38,7 +39,8 @@ public struct InputPhoneNumber: View {
         onChangeText: ((String) -> Void)? = nil,
         onFocus: (() -> Void)? = nil,
         onBlur: (() -> Void)? = nil,
-        onRightIconPressed: (() -> Void)? = nil
+        onRightIconPressed: (() -> Void)? = nil,
+        accessibilityLabel: String? = nil
     ) {
         self._text = text
         self.placeholder = placeholder
@@ -53,6 +55,7 @@ public struct InputPhoneNumber: View {
         self.onFocus = onFocus
         self.onBlur = onBlur
         self.onRightIconPressed = onRightIconPressed
+        self.accessibilityLabel = accessibilityLabel
     }
     
     // MARK: - Body
@@ -86,7 +89,7 @@ public struct InputPhoneNumber: View {
                         MomoText(placeholder, typography: size == .small ? .headerSSemibold : .headerMBold, color: Colors.black12)
                     }
                     
-                    TextField("", text: textBinding, onEditingChanged: { focused in
+                    TextField(placeholder, text: textBinding, onEditingChanged: { focused in
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
@@ -94,6 +97,7 @@ public struct InputPhoneNumber: View {
                     .foregroundColor(Colors.black17)
                     .applyPrimaryCursorColor()
                     .lineLimit(1)
+                    .accessibility(identifier: accessibilityLabel ?? "")
                 }
                 
                 // Clear button
@@ -103,7 +107,7 @@ public struct InputPhoneNumber: View {
                         onChangeText?("")
                     }) {
                         Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
-                            .padding(.leading, Spacing.S)
+                            .padding(.leading, Spacing.S).accessibility("ic_clear")
                     }
                 }
                 

package/ios/Popup/PopupDisplay.swift

@@ -113,7 +113,11 @@ public struct PopupDisplay: View {
                 }
                 
                 VStack(spacing: 0) {
-                    if(!url.isEmpty) {
+                    if(url.isEmpty) {
+                        Icon(source: "media_fail")
+                            .frame(width: .infinity, height: 184)
+                    }
+                    else {
                         WebImage(url: URL(string: url), isAnimating: .constant(true))
                             .resizable()
                             .placeholder {

package/package.json

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