@momo-kits/native-kits 0.156.6-dialog.1-debug → 0.156.6-newcompose.1-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.156.6-dialog.1-debug"
+        version = "0.156.6-newcompose.1-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -54,9 +54,6 @@ kotlin {
             moduleName = "Lottie"
             version = "4.4.3"
             extraOpts += listOf("-compiler-option", "-fmodules")
-        }
-		pod("SDWebImage") {
-            version = ">= 5.19.1"
         }
     }
 

package/compose/build.gradle.kts.backup

@@ -54,9 +54,6 @@ kotlin {
             moduleName = "Lottie"
             version = "4.4.3"
             extraOpts += listOf("-compiler-option", "-fmodules")
-        }
-		pod("SDWebImage") {
-            version = ">= 5.19.1"
         }
     }
 

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.156.1-test.6'
+    spec.version                  = '0.156.6-beta.16'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''
@@ -9,22 +9,28 @@ Pod::Spec.new do |spec|
     spec.vendored_frameworks      = 'build/cocoapods/framework/kits.framework'
     spec.libraries                = 'c++'
     spec.ios.deployment_target    = '15.0'
-    spec.dependency 'SDWebImage', '>= 5.19.1'
     spec.dependency 'lottie-ios', '4.4.3'
+                
     if !Dir.exist?('build/cocoapods/framework/kits.framework') || Dir.empty?('build/cocoapods/framework/kits.framework')
         raise "
+
         Kotlin framework 'kits' doesn't exist yet, so a proper Xcode project can't be generated.
         'pod install' should be executed after running ':generateDummyFramework' Gradle task:
+
             ./gradlew :compose:generateDummyFramework
+
         Alternatively, proper pod installation is performed during Gradle sync in the IDE (if Podfile location is set)"
     end
+                
     spec.xcconfig = {
         'ENABLE_USER_SCRIPT_SANDBOXING' => 'NO',
     }
+                
     spec.pod_target_xcconfig = {
         'KOTLIN_PROJECT_PATH' => ':compose',
         'PRODUCT_MODULE_NAME' => 'kits',
     }
+                
     spec.script_phases = [
         {
             :name => 'Build compose',
@@ -32,8 +38,8 @@ Pod::Spec.new do |spec|
             :shell_path => '/bin/sh',
             :script => <<-SCRIPT
                 if [ "YES" = "$OVERRIDE_KOTLIN_BUILD_IDE_SUPPORTED" ]; then
-                    echo "Skipping Gradle build task invocation due to OVERRIDE_KOTLIN_BUILD_IDE_SUPPORTED environment variable set to \"YES\""
-                    exit 0
+                  echo "Skipping Gradle build task invocation due to OVERRIDE_KOTLIN_BUILD_IDE_SUPPORTED environment variable set to \"YES\""
+                  exit 0
                 fi
                 set -ev
                 REPO_ROOT="$PODS_TARGET_SRCROOT"
@@ -45,4 +51,4 @@ Pod::Spec.new do |spec|
         }
     ]
     spec.resources = ['build/compose/cocoapods/compose-resources']
-end
+end

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

@@ -9,7 +9,6 @@ import android.os.Build
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
@@ -24,23 +23,6 @@ import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
-import android.graphics.Matrix
-import android.widget.ImageView
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.viewinterop.AndroidView
-import androidx.core.view.doOnLayout
-import coil3.load
-import coil3.request.crossfade
-import coil3.size.ViewSizeResolver
-import android.view.ViewGroup
-import android.view.WindowManager
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.platform.LocalView
-import androidx.compose.ui.window.DialogWindowProvider
-import androidx.core.view.WindowCompat
-import vn.momo.kits.components.Options
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.utils.readJson
@@ -81,6 +63,8 @@ actual fun getScreenHeight(): Dp {
     return getScreenDimensions().height.dp + if (getAndroidBuildVersion() >= 35) 0.dp else AppStatusBar.current + AppNavigationBar.current
 }
 
+actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
+
 @Composable
 actual fun LottieAnimation(
     path: String,
@@ -124,147 +108,3 @@ actual fun NativePaint.setColor(color: Color){
     this.color = color.toArgb()
 }
 
-actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
-
-@Composable
-actual fun NativeImage(
-    source: Any,
-    options: Options,
-    loading: Boolean,
-    onLoading: () -> Unit,
-    onSuccess: () -> Unit,
-    onError: () -> Unit,
-) {
-    val currentOptions by rememberUpdatedState(options)
-
-    AndroidView(
-        modifier = Modifier.fillMaxSize(),
-        factory = { ctx ->
-            ImageView(ctx).apply {
-                adjustViewBounds = false
-
-                addOnLayoutChangeListener { v, _, _, _, _, _, _, _, _ ->
-                    (v as ImageView).apply {
-                        applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
-                        colorFilter = currentOptions.tintColor?.let {
-                            PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
-                        }
-                    }
-                }
-            }
-        },
-        update = { imageView ->
-            imageView.alpha = currentOptions.alpha.coerceIn(0f, 1f)
-            imageView.applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
-            imageView.colorFilter = currentOptions.tintColor?.let {
-                PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
-            }
-
-            imageView.load(source) {
-                crossfade(loading)
-                size(ViewSizeResolver(imageView))
-                listener(
-                    onStart = { onLoading() },
-                    onSuccess = { _, _ ->
-                        imageView.applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
-                        imageView.colorFilter = currentOptions.tintColor?.let {
-                            PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
-                        }
-                        onSuccess()
-                    },
-                    onError = { _, _ -> onError() }
-                )
-            }
-        }
-    )
-}
-private fun ImageView.applyMatrixInternal(
-    contentScale: ContentScale,
-    alignment: Alignment
-): Boolean {
-    val d = drawable ?: return false
-
-    val vw = width - paddingLeft - paddingRight
-    val vh = height - paddingTop - paddingBottom
-    if (vw <= 0 || vh <= 0) return false
-
-    val dw = (d.intrinsicWidth).takeIf { it > 0 } ?: return false
-    val dh = (d.intrinsicHeight).takeIf { it > 0 } ?: return false
-
-    val sxFit = vw.toFloat() / dw.toFloat()
-    val syFit = vh.toFloat() / dh.toFloat()
-
-    val (sx, sy) = when (contentScale) {
-        ContentScale.Crop       -> maxOf(sxFit, syFit).let { it to it }
-        ContentScale.Fit        -> minOf(sxFit, syFit).let { it to it }
-        ContentScale.FillWidth  -> sxFit to sxFit
-        ContentScale.FillHeight -> syFit to syFit
-        ContentScale.FillBounds -> sxFit to syFit
-        ContentScale.Inside     -> minOf(1f, minOf(sxFit, syFit)).let { it to it }
-        ContentScale.None       -> 1f to 1f
-        else                    -> maxOf(sxFit, syFit).let { it to it }
-    }
-
-    val (bx, by) = when (alignment) {
-        Alignment.TopStart     -> -1f to -1f
-        Alignment.TopCenter    ->  0f to -1f
-        Alignment.TopEnd       ->  1f to -1f
-        Alignment.CenterStart  -> -1f to  0f
-        Alignment.Center       ->  0f to  0f
-        Alignment.CenterEnd    ->  1f to  0f
-        Alignment.BottomStart  -> -1f to  1f
-        Alignment.BottomCenter ->  0f to  1f
-        Alignment.BottomEnd    ->  1f to  1f
-        else                   ->  0f to  0f
-    }
-
-    val scaledW = dw * sx
-    val scaledH = dh * sy
-
-    val tx = (vw - scaledW) * (bx + 1f) / 2f
-    val ty = (vh - scaledH) * (by + 1f) / 2f
-
-    if (scaleType != ImageView.ScaleType.MATRIX) {
-        scaleType = ImageView.ScaleType.MATRIX
-    }
-
-    val m = imageMatrix ?: Matrix()
-    m.reset()
-    m.setScale(sx, sy)
-    m.postTranslate(tx, ty)
-    imageMatrix = m
-    return true
-}
-
-private fun ImageView.applyOrDefer(contentScale: ContentScale, alignment: Alignment) {
-    if (!applyMatrixInternal(contentScale, alignment)) {
-        doOnLayout { if (!applyMatrixInternal(contentScale, alignment)) post { applyMatrixInternal(contentScale, alignment) } }
-    }
-}
-
-@Composable
-actual fun ConfigureDialogWindow(decorFitsSystemWindows: Boolean) {
-    val view = LocalView.current
-    if (!view.isInEditMode) {
-        SideEffect {
-            // In Compose, LocalView.current inside a Dialog is the DialogLayout
-            // which itself implements DialogWindowProvider.
-            val window = (view as? DialogWindowProvider)?.window
-                ?: (view.parent as? DialogWindowProvider)?.window
-                ?: return@SideEffect
-
-            WindowCompat.setDecorFitsSystemWindows(window, decorFitsSystemWindows)
-
-            if (!decorFitsSystemWindows) {
-                // Extend layout behind the status bar and navigation bar so the
-                // dialog scrim covers the full screen uniformly.
-                window.setLayout(
-                    ViewGroup.LayoutParams.MATCH_PARENT,
-                    ViewGroup.LayoutParams.MATCH_PARENT
-                )
-                window.statusBarColor = android.graphics.Color.TRANSPARENT
-                window.navigationBarColor = android.graphics.Color.TRANSPARENT
-            }
-        }
-    }
-}

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/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,
+        )
+    }
+}