@momo-kits/native-kits 0.89.33-rc.4 → 0.89.33-sp.1

package/compose/build.gradle.kts

@@ -3,6 +3,7 @@ plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
+    kotlin("plugin.serialization")
     id("maven-publish")
 }
 
@@ -39,6 +40,8 @@ kotlin {
                 implementation(libs.coil.multiplatform.compose)
                 implementation(libs.coil.multiplatform.core)
                 implementation(libs.coil.multiplatform.network.ktor)
+                implementation("com.google.code.gson:gson:2.10")
+                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.0")
             }
         }
         val androidMain by getting {

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

@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -66,6 +67,7 @@ data class AnimatedHeader(
 @Composable
 fun HeaderBackground(
     headerType: HeaderType = HeaderType.DEFAULT,
+    headerBanner: String? = null,
     scrollState: Int
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -73,11 +75,20 @@ fun HeaderBackground(
         targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
     )
 
+
+    val backgroundColor = if (scrollState == 0) {
+        Color.Transparent
+    } else {
+        AppTheme.current.colors.background.surface
+    }
+
+
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
             Box(
                 modifier = Modifier.fillMaxWidth().height(height)
+                    .background(backgroundColor)
                     .bottomBorder(
                         strokeWidth = 1.dp,
                         color = AppTheme.current.colors.border.default
@@ -101,7 +112,7 @@ fun HeaderBackground(
                 )
                 if (AppTheme.current.assets.headerBackground != null) {
                     Image(
-                        source = AppTheme.current.assets.headerBackground!!,
+                        source = headerBanner ?: AppTheme.current.assets.headerBackground!!,
                         modifier = Modifier.fillMaxWidth().height(height),
                         options = Options(
                             contentScale = ContentScale.FillWidth
@@ -113,28 +124,34 @@ fun HeaderBackground(
         }
 
         HeaderType.EXTENDED -> {
-            Box(
-                modifier = Modifier.fillMaxWidth().height(154.dp)
-                    .alpha(opacityAni)
-                    .background(
-                        Brush.linearGradient(
-                            colors = listOf(
-                                Color(0xFFFDCADE),
-                                Color(0x00FDCADE)
-                            ),
-                            start = Offset(0f, 0f),
-                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
-                        )
-                    )
-            ) {
-                if (AppTheme.current.assets.headerBackground != null) {
-                    Image(
-                        source = AppTheme.current.assets.headerBackground!!,
-                        modifier = Modifier.fillMaxWidth().height(154.dp),
-                        options = Options(
-                            contentScale = ContentScale.FillWidth
+
+                Box(
+                    modifier = Modifier.fillMaxWidth().height(154.dp)
+                        .alpha(opacityAni)
+                        .background(
+                            Brush.linearGradient(
+                                colors = listOf(
+                                    Color(0xFFFDCADE),
+                                    Color(0x00FDCADE)
+                                ),
+                                start = Offset(0f, 0f),
+                                end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                            )
                         )
-                    )
+                ) {
+                    if (AppTheme.current.assets.headerBackground != null) {
+                        Box(
+                            modifier = Modifier.fillMaxWidth()
+                                .background(backgroundColor)
+                        ) {
+                            Image(
+                                source =  headerBanner ?: AppTheme.current.assets.headerBackground!!,
+                                modifier = Modifier.fillMaxWidth().height(154.dp),
+                                options = Options(
+                                    contentScale = ContentScale.FillWidth
+                                )
+                            )
+                        }
                 }
             }
         }
@@ -278,7 +295,7 @@ fun HeaderTitle(
         modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
         textAlign = textAlign,
-        style = Typography.headerDefault,
+        style = Typography.actionS,
         color = color,
         maxLines = 1
     )

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

@@ -1,8 +1,5 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.staticCompositionLocalOf
@@ -17,6 +14,10 @@ val AppNavigator = staticCompositionLocalOf<Navigator> {
     error("no navigator provided!")
 }
 
+val PlatformApi = staticCompositionLocalOf<ComposeApi> {
+    error("no api provided!")
+}
+
 class Navigator {
     fun push(content: @Composable () -> Unit) {
     }
@@ -49,14 +50,23 @@ class Navigator {
     }
 }
 
+interface ComposeApi {
+    fun request(funcName: String, params: String?): String
+    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    fun removeCallback(id: String)
+}
+
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
+    composeApi: ComposeApi,
     content: @Composable () -> Unit,
 ) {
     disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides theme,
+        PlatformApi provides composeApi,
         AppNavigator provides Navigator(),
         AppStatusBar provides getStatusBarHeight(),
     ) {

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

@@ -32,6 +32,8 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.json.Json
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -47,6 +49,9 @@ enum class HeaderType {
     NONE
 }
 
+@Serializable
+data class ConfigData(val headerBanner: String? = null)
+
 @Composable
 fun Screen(
     backgroundColor: Color? = null,
@@ -79,6 +84,11 @@ fun Screen(
         else -> 0.dp
     }
 
+    val platformApi = PlatformApi.current
+    val rawData = platformApi.request("GetConfig", "DESIGN_SYSTEM")
+    val json = Json { ignoreUnknownKeys = true }
+    val headerBanner = json.decodeFromString<ConfigData>(rawData).headerBanner
+
     val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
     val bottomPadding = min(indicator, 21.dp)
 
@@ -95,10 +105,14 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderBackground(headerType = headerType, scrollState = scrollState.value)
+            HeaderBackground(
+                headerType = headerType,
+                scrollState = scrollState.value,
+                headerBanner = headerBanner
+            )
         } else {
             Box(
-                Modifier.zIndex(5f)
+                Modifier.zIndex(2f)
                     .background(Color.White.copy(alpha = opacity))
                     .graphicsLayer { alpha = opacity }
             ) {

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

@@ -1,13 +1,17 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -23,14 +27,14 @@ fun Icon(
     } else {
         Icons[source] ?: ""
     }
-    Image(
-        modifier = modifier.size(size),
-        source = icon,
-        loading = false,
-        options = Options(
+    Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = icon,
+            contentDescription = null,
             contentScale = ContentScale.Fit,
-            colorFilter = color?.let { ColorFilter.tint(it) }
-        ),
-    )
+            colorFilter = color?.let { ColorFilter.tint(it) },
+        )
+    }
 }
 

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

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
@@ -29,6 +30,7 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
@@ -44,6 +46,7 @@ fun RenderRightIconSearch(
     icon: String,
     color: Color,
     onClick: () -> Unit,
+    iconModifier: Modifier = Modifier
 ) {
     if (loading) {
         Box(Modifier.padding(horizontal = Spacing.S)) {
@@ -64,7 +67,7 @@ fun RenderRightIconSearch(
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.padding(start = Spacing.S, end = 0.dp).clickable(
+            modifier = iconModifier.padding(start = Spacing.S, end = 0.dp).clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -90,6 +93,11 @@ data class InputSearchProps(
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
     val backgroundColor: Color = Colors.black_01,
+    val clearCondition: (() -> Boolean)? = null,
+    val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    val keyboardActions: KeyboardActions = KeyboardActions.Default,
+    val modifier: Modifier = Modifier,
+    val iconModifier: Modifier = Modifier,
 )
 
 @Composable
@@ -98,7 +106,6 @@ fun InputSearch(
         text = remember { mutableStateOf("") },
         iconColor = AppTheme.current.colors.text.default
     ),
-
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
@@ -124,8 +131,9 @@ fun InputSearch(
                 lineHeight = 20.sp,
                 fontWeight = inputSearchProps.fontWeight.value
             ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = inputSearchProps.keyboardType),
-            modifier = Modifier.height(36.dp).onFocusChanged {
+            keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
+            keyboardActions = inputSearchProps.keyboardActions,
+            modifier = inputSearchProps.modifier.height(36.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
                     inputSearchProps.onFocus()
@@ -137,7 +145,12 @@ fun InputSearch(
             decorationBox = { innerTextField ->
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Row(
-                        modifier = Modifier.weight(inputSearchProps.showButtonText.ifTrue(8f, 1f))
+                        modifier = Modifier.weight(
+                            inputSearchProps.showButtonText.ifTrue(
+                                8f,
+                                1f
+                            )
+                        )
                             .background(
                                 inputSearchProps.backgroundColor,
                                 RoundedCornerShape(Radius.XL)
@@ -152,7 +165,6 @@ fun InputSearch(
                             ),
                             verticalAlignment = Alignment.CenterVertically
                         ) {
-                            //leading icon
                             Icon(
                                 source = "navigation_search",
                                 modifier = Modifier.padding(end = Spacing.XS),
@@ -168,12 +180,14 @@ fun InputSearch(
                                             lineHeight = 24.sp,
                                             fontWeight = inputSearchProps.fontWeight.value
                                         ),
-                                        color = placeholderColor
+                                        maxLines = 1,
+                                        color = placeholderColor,
+                                        overflow = TextOverflow.Ellipsis
                                     )
                                 }
                                 innerTextField()
                             }
-                            if (isFocused && inputSearchProps.text.value.isNotEmpty()) {
+                            if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.value.isNotEmpty())) {
                                 Row {
                                     Spacer(Modifier.width(Spacing.XS))
                                     Icon(
@@ -192,7 +206,8 @@ fun InputSearch(
                                 inputSearchProps.loading,
                                 inputSearchProps.icon,
                                 iconTintColor,
-                                inputSearchProps.onRightIconPressed
+                                inputSearchProps.onRightIconPressed,
+                                iconModifier = inputSearchProps.iconModifier
                             )
                         }
                     }

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

@@ -5,16 +5,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextLayoutResult
 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.sp
+import vn.momo.kits.application.PlatformApi
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.const.scaleSize
+import vn.momo.kits.platform.getPlatformName
 
 @Composable
 fun Text(
@@ -27,13 +30,15 @@ fun Text(
     overflow: TextOverflow = TextOverflow.Clip,
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
-    fontFamily: String = "SFProText"
+    fontFamily: String = "SFProText",
+    accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
     val font = getFontFamily(fontFamily, style.fontWeight)
 
     androidx.compose.material3.Text(
-        modifier = modifier.semantics { contentDescription = text },
+        modifier = modifier.semantics { testTag = accessibilityId ?: text
+            contentDescription = if (getPlatformName() == "Android" && accessibilityId != null) accessibilityId else text },
         text = text,
         color = color ?: AppTheme.current.colors.text.default,
         style = style,

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk
+#Tue Apr 23 16:40:15 ICT 2024
+sdk.dir=/Users/hung.dao1/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.89.33-rc.4",
+  "version": "0.89.33-sp.01",
   "private": false,
   "dependencies": {},
   "devDependencies": {},