@momo-kits/native-kits 0.163.1-beta.11-debug → 0.163.1-beta.12-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.11-debug"
+        version = "0.163.1-beta.12-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.162.2-test.22'
+    spec.version                  = '0.163.1-beta.12-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -167,7 +167,8 @@ private fun ToolkitHeaderRight(
                 if (toolResponse != null) {
                     headerRight?.toolCallback?.invoke(toolResponse)
                 }
-            } catch (_: Exception) {
+            } catch (e: Exception) {
+                println("Error parsing response: $e")
             }
         }
     }

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

@@ -209,6 +209,7 @@ internal class CupertinoOverscrollEffect(
     private fun availableDelta(delta: Offset, source: CupertinoScrollSource): Offset {
         val (x, overscrollX) = availableDelta(delta.x, overscrollOffset.x, source)
         val (y, overscrollY) = availableDelta(delta.y, overscrollOffset.y, source)
+        println("availableDelta delta=${delta.y} consumed y=$y overscrollY=$overscrollY source=${source}")
         overscrollOffset = Offset(overscrollX, overscrollY)
 
         return Offset(x, y)

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

@@ -147,17 +147,6 @@ object Colors {
     val red_10 = Color(0xFFFEF4F4)
     val red_11 = Color(0xFFFEF8F8)
 
-    // Translucent overlays, ported from the React kit's Consts (the reference
-    // palette). React spells them `#RRGGBBAA`; Compose's Color takes `0xAARRGGBB`.
-    val opacity_black_20 = Color(0x33000000)
-    val opacity_black_40 = Color(0x66000000)
-    val opacity_black_60 = Color(0x99000000)
-    val opacity_black_80 = Color(0xCC000000)
-    val opacity_white_20 = Color(0x33FFFFFF)
-    val opacity_white_40 = Color(0x66FFFFFF)
-    val opacity_white_60 = Color(0x99FFFFFF)
-    val opacity_white_80 = Color(0xCCFFFFFF)
-
     val colorList: Map<String, Color> = mapOf(
         "black_01" to black_01,
         "black_02" to black_02,
@@ -313,13 +302,5 @@ object Colors {
         "red_09" to red_09,
         "red_10" to red_10,
         "red_11" to red_11,
-        "opacity_black_20" to opacity_black_20,
-        "opacity_black_40" to opacity_black_40,
-        "opacity_black_60" to opacity_black_60,
-        "opacity_black_80" to opacity_black_80,
-        "opacity_white_20" to opacity_white_20,
-        "opacity_white_40" to opacity_white_40,
-        "opacity_white_60" to opacity_white_60,
-        "opacity_white_80" to opacity_white_80,
     )
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -4,8 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -18,13 +18,18 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
 
+/**
+ * A white rounded surface card that lays its [Item]s on a 12-column grid
+ * (React kit foundations/Layout/Card). 8dp gutter, 12dp padding, 12dp
+ * horizontal margin, Radius.M corners, background = theme surface, optional
+ * shadow or [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
-internal fun Card(
+fun Card(
     useShadow: Boolean = false,
     backgroundImage: String? = null,
-    contentPadding: PaddingValues = PaddingValues(Spacing.M),
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
@@ -34,12 +39,20 @@ internal fun Card(
     var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
     if (useShadow) surface = surface.shadow(4.dp, shape)
     surface = surface.clip(shape)
+    // The React kit drops the surface colour when a backgroundImage is supplied
+    // (`!!backgroundImage && { backgroundColor: undefined }`).
     if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
     Box(modifier = surface) {
+        // React renders this as an absolutely-filled child BEHIND the content
+        // (styles.imageBackground: position absolute, inset 0) — matchParentSize
+        // fills the card without contributing to its measured size.
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
-        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge: it keeps a full 12-span Item ~1dp narrower than the content
+            // box so sub-pixel rounding can never overflow and wrap the FlowRow.
             val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
             CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
                 FlowRow(

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -9,18 +9,30 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-internal data class GridContext(
+/**
+ * Grid context supplied by [Section] / [Card]: the per-span cell size + gutter,
+ * so an [Item] can resolve its pixel width from a 1-12 `widthSpan`. Mirrors the
+ * React kit's GridContext (foundations/Layout/GridSystem).
+ */
+data class GridContext(
     val numberOfColumns: Int = 12,
     val gutter: Dp = 12.dp,
     val sizePerSpan: Dp = 0.dp,
 ) {
+    /** Width covering `span` columns + the (span-1) gutters between them. */
     fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
 }
 
-internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
+/** Provided by Section/Card; null when an Item is rendered outside a grid. */
+val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
+/**
+ * A grid cell. `widthSpan` (1-12) sets the width as a fraction of the parent
+ * Section/Card; the parent's flex-wrap flows the cells into rows. Rendered
+ * outside a grid it just wraps its content at its natural size.
+ */
 @Composable
-internal fun Item(
+fun Item(
     widthSpan: Int = 12,
     heightSpan: Int = 0,
     modifier: Modifier = Modifier,

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -3,6 +3,7 @@ package vn.momo.kits.layout
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -12,8 +13,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 
+/**
+ * A transparent 12-column grid row that wraps its [Item]s (React kit
+ * foundations/Layout/Section). 12dp gutter; 12dp horizontal margin when
+ * `useMargin`; optional [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
-internal fun Section(
+fun Section(
     useMargin: Boolean = true,
     backgroundImage: String? = null,
     modifier: Modifier = Modifier,
@@ -23,10 +30,15 @@ internal fun Section(
     val gutter = 12.dp
     val margin = if (useMargin) 12.dp else 0.dp
     Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        // React renders this as an absolutely-filled child behind the content
+        // (styles.imageBackground: position absolute, inset 0).
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge — keeps a full 12-span Item ~1dp inside the content box so
+            // sub-pixel rounding can never overflow and wrap the FlowRow.
             val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
             CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
                 FlowRow(

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

@@ -43,7 +43,6 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.Typography
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.modifier.conditional
@@ -59,6 +58,8 @@ internal fun BottomSheet(
     barrierDismissible: Boolean = true,
     onDismiss: (() -> Unit)?
 ) {
+    val navigator = LocalNavigator.current
+
     val screenHeightDp = getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
@@ -161,7 +162,7 @@ internal fun BottomSheet(
                 .noFeedbackClickable {  },
             contentAlignment = Alignment.BottomCenter
         ) {
-            Column(Modifier.padding(bottom = AppNavigationBar.current)) {
+            Column {
                 Box(
                     modifier = Modifier
                         .height(72.dp)

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

@@ -280,7 +280,7 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
                 bottom = when {
                     options.hasFooter() || isBottomTabRoot -> 0.dp
                     isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-                    !options.scrollData.scrollable && options.scrollData.scrollState == null -> 0.dp
+                    !options.scrollData.scrollable -> 0.dp
                     else -> navigationBar
                 }
             )

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

@@ -31,6 +31,7 @@ object ScreenTracker {
         val previousScreen = lastScreenName
         lastScreenName = screenName
 
+        println("Tracking screen navigated native kit: $screenName")
         maxApi?.track(
             eventName = "auto_screen_navigated",
             params = buildBaseParams(context, screenName).apply {

package/gradle.properties

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

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.162.2-sp.9'
+  s.version          = '0.163.1-beta.12'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.162.2-sp.9'
+  s.version          = '0.163.1-beta.12'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.163.1-beta.11-debug",
+  "version": "0.163.1-beta.12-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},