@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

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

@@ -0,0 +1,188 @@
+package vn.momo.kits.components.datetimepicker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.gestures.animateScrollBy
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collect
+import kotlinx.coroutines.flow.debounce
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.onEach
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Typography
+import kotlin.math.abs
+import kotlin.time.Duration.Companion.milliseconds
+
+private val wheelItemHeight = 42.dp
+private val wheelPickerBorderWidth = 1.dp
+
+@OptIn(FlowPreview::class)
+@Composable
+internal fun WheelPicker(
+    name: String,
+    data: List<String>,
+    selectedData: String,
+    onChange: (String, String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val listState = rememberLazyListState()
+    val itemHeightPx = with(LocalDensity.current) { wheelItemHeight.toPx() }
+
+    val paddedData = remember(data) {
+        listOf("", "") + data + listOf("", "")
+    }
+
+    val initialIndex = remember(selectedData, paddedData) {
+        paddedData.indexOf(selectedData).coerceAtLeast(2)
+    }
+
+    LaunchedEffect(initialIndex) {
+        listState.scrollToItem(initialIndex - 2)
+    }
+
+    var selectedIndex by remember { mutableStateOf(0) }
+
+    LaunchedEffect(paddedData) {
+        snapshotFlow { selectedIndex }
+            .distinctUntilChanged()
+            .debounce(50.milliseconds)
+            .onEach {
+                val value = paddedData.getOrNull(it)
+                if (!value.isNullOrEmpty()) {
+                    onChange(name, value)
+                }
+            }
+            .collect()
+    }
+
+    LaunchedEffect(paddedData) {
+        snapshotFlow { listState.isScrollInProgress }
+            .onEach {
+                if (it) return@onEach
+                val firstItem = listState.layoutInfo.visibleItemsInfo.firstOrNull() ?: return@onEach
+                val firstItemIdx = firstItem.index
+                val firstItemOffset = firstItem.offset
+                if (firstItemOffset == 0) {
+                    selectedIndex = firstItemIdx + 2
+                    return@onEach
+                }
+                val isScrollUp = abs(firstItemOffset) > itemHeightPx / 2
+                val offset = if (isScrollUp) {
+                    itemHeightPx - abs(firstItemOffset)
+                } else {
+                    -abs(firstItemOffset)
+                }
+                delay(50.milliseconds)
+                listState.animateScrollBy(offset.toFloat())
+                val centeredIndex = firstItemIdx + (if (isScrollUp) 1 else 0) + 2
+                if (centeredIndex in 2 until paddedData.size - 2) {
+                    selectedIndex = centeredIndex
+                }
+            }
+            .collect()
+    }
+
+    Box(
+        modifier = modifier
+            .border(
+                width = wheelPickerBorderWidth,
+                color = AppTheme.current.colors.border.default,
+                shape = RoundedCornerShape(Radius.S)
+            )
+            .background(
+                color = AppTheme.current.colors.background.surface,
+            )
+    ) {
+        LazyColumn(
+            state = listState,
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            items(paddedData.size) { index ->
+                WheelPickerItem(
+                    text = paddedData[index],
+                    isSelected = index == selectedIndex,
+                    index = index,
+                    listState = listState,
+                    itemHeight = wheelItemHeight
+                )
+            }
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(wheelItemHeight)
+                .background(Colors.blue_10)
+                .align(Alignment.Center)
+                .alpha(0.2f)
+                .zIndex(-2f)
+        )
+    }
+}
+
+@Composable
+internal fun WheelPickerItem(
+    text: String,
+    isSelected: Boolean,
+    index: Int,
+    listState: LazyListState,
+    itemHeight: Dp
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(itemHeight)
+            .graphicsLayer {
+                val firstVisibleIndex = listState.firstVisibleItemIndex
+                val visibleItemOffset = listState.firstVisibleItemScrollOffset
+
+                val viewportHeight = 5 * itemHeight.value
+                val itemHeightValue = itemHeight.value
+
+                val absoluteOffset =
+                    (index - firstVisibleIndex) * itemHeightValue - (visibleItemOffset / itemHeightValue)
+                val relativePosition = absoluteOffset / viewportHeight
+
+                val distance = abs(2 - relativePosition)
+
+                alpha = when {
+                    distance <= 1 -> 1f
+                    distance <= 2 -> 0.8f
+                    distance <= 3 -> 0.4f
+                    else -> 0.4f
+                }
+            },
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = text,
+            style = Typography.actionSBold,
+            modifier = Modifier.graphicsLayer {
+                val scale = if (isSelected) 1f else 0.87f
+                scaleX = scale
+                scaleY = scale
+            }
+        )
+    }
+} 

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

@@ -0,0 +1,325 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.graphics.Color
+
+object Colors {
+    val black_01 = Color(0xFFFFFFFF)
+    val black_02 = Color(0xFFF9F9F9)
+    val black_03 = Color(0xFFF0F0F0)
+    val black_04 = Color(0xFFE8E8E8)
+    val black_05 = Color(0xFFE5E5E5)
+    val black_06 = Color(0xFFD8D8D8)
+    val black_07 = Color(0xFFCCCCCC)
+    val black_08 = Color(0xFFC6C6C6)
+    val black_09 = Color(0xFFB9B9B9)
+    val black_10 = Color(0xFFA0A0A0)
+    val black_11 = Color(0xFF878787)
+    val black_12 = Color(0xFF727272)
+    val black_13 = Color(0xFF646464)
+    val black_14 = Color(0xFF565656)
+    val black_15 = Color(0xFF484848)
+    val black_16 = Color(0xFF404040)
+    val black_17 = Color(0xFF303233)
+    val black_18 = Color(0xFF242424)
+    val black_19 = Color(0xFF18191A)
+    val black_20 = Color(0xFF000000)
+    val pink_01 = Color(0xFFBC2678)
+    val pink_02 = Color(0xFFD42A87)
+    val pink_03 = Color(0xFFEB2F96)
+    val pink_04 = Color(0xFFED43A0)
+    val pink_05 = Color(0xFFEF59AB)
+    val pink_06 = Color(0xFFF382C0)
+    val pink_07 = Color(0xFFF7ACD5)
+    val pink_08 = Color(0xFFFBD5EA)
+    val pink_09 = Color(0xFFFDEAF4)
+    val pink_10 = Color(0xFFFEF4FA)
+    val pink_11 = Color(0xFFFEF8FC)
+    val pink_MoMo_Branding = Color(0xFFA50064)
+    val violet_01 = Color(0xFF7822C0)
+    val violet_02 = Color(0xFF8726D8)
+    val violet_03 = Color(0xFF962AF0)
+    val violet_04 = Color(0xFFA03FF1)
+    val violet_05 = Color(0xFFAB55F3)
+    val violet_06 = Color(0xFFC07FF6)
+    val violet_07 = Color(0xFFD5AAF9)
+    val violet_08 = Color(0xFFEAD4FC)
+    val violet_09 = Color(0xFFF4E9FD)
+    val violet_10 = Color(0xFFFAF4FE)
+    val violet_11 = Color(0xFFFCF8FE)
+    val violet_11_stroke = Color(0xFFDFE1E5)
+    val indigo_01 = Color(0xFF3E3CCC)
+    val indigo_02 = Color(0xFF4644E6)
+    val indigo_03 = Color(0xFF4E4BFF)
+    val indigo_04 = Color(0xFF5F5DFF)
+    val indigo_05 = Color(0xFF716FFF)
+    val indigo_06 = Color(0xFF9593FF)
+    val indigo_07 = Color(0xFFB8B7FF)
+    val indigo_08 = Color(0xFFDCDBFF)
+    val indigo_09 = Color(0xFFEDEDFF)
+    val indigo_10 = Color(0xFFF6F6FF)
+    val indigo_11 = Color(0xFFF9F9FF)
+    val blue_01 = Color(0xFF0062CC)
+    val blue_02 = Color(0xFF006EE6)
+    val blue_03 = Color(0xFF007AFF)
+    val blue_04 = Color(0xFF1987FF)
+    val blue_05 = Color(0xFF3395FF)
+    val blue_06 = Color(0xFF66AFFF)
+    val blue_07 = Color(0xFF99CAFF)
+    val blue_08 = Color(0xFFCCE4FF)
+    val blue_09 = Color(0xFFE5F1FF)
+    val blue_10 = Color(0xFFF2F8FF)
+    val blue_11 = Color(0xFFF7FBFF)
+    val mint_01 = Color(0xFF0F9B9B)
+    val mint_02 = Color(0xFF11AFAF)
+    val mint_03 = Color(0xFF13C2C2)
+    val mint_04 = Color(0xFF2AC8C8)
+    val mint_05 = Color(0xFF42CECE)
+    val mint_06 = Color(0xFF71DADA)
+    val mint_07 = Color(0xFFA1E7E7)
+    val mint_08 = Color(0xFFD0F3F3)
+    val mint_09 = Color(0xFFE7F8F8)
+    val mint_10 = Color(0xFFF3FCFC)
+    val mint_11 = Color(0xFFF8FDFD)
+    val green_01 = Color(0xFF2A9F47)
+    val green_02 = Color(0xFF2FB350)
+    val green_03 = Color(0xFF34C759)
+    val green_04 = Color(0xFF48CC69)
+    val green_05 = Color(0xFF5DD27A)
+    val green_06 = Color(0xFF85DD9B)
+    val green_07 = Color(0xFFAEE9BD)
+    val green_08 = Color(0xFFD6F4DE)
+    val green_09 = Color(0xFFEAF9EE)
+    val green_10 = Color(0xFFF5FCF6)
+    val green_11 = Color(0xFFF9FDFA)
+    val lime_01 = Color(0xFF80AE0E)
+    val lime_02 = Color(0xFF90C30F)
+    val lime_03 = Color(0xFFA0D911)
+    val lime_04 = Color(0xFFA9DC28)
+    val lime_05 = Color(0xFFB3E141)
+    val lime_06 = Color(0xFFC6E870)
+    val lime_07 = Color(0xFFD9F0A0)
+    val lime_08 = Color(0xFFECF7CF)
+    val lime_09 = Color(0xFFF5FBE7)
+    val lime_10 = Color(0xFFFAFDF3)
+    val lime_11 = Color(0xFFFCFEF8)
+    val yellow_01 = Color(0xFFCCA300)
+    val yellow_02 = Color(0xFFE6B800)
+    val yellow_03 = Color(0xFFFFCC00)
+    val yellow_04 = Color(0xFFFFD119)
+    val yellow_05 = Color(0xFFFFD633)
+    val yellow_06 = Color(0xFFFFE066)
+    val yellow_07 = Color(0xFFFFEB99)
+    val yellow_08 = Color(0xFFFFF5CC)
+    val yellow_09 = Color(0xFFFFF9E5)
+    val yellow_10 = Color(0xFFFFFCF2)
+    val yellow_11 = Color(0xFFFFFDF7)
+    val gold_01 = Color(0xFFC87012)
+    val gold_02 = Color(0xFFE17E14)
+    val gold_03 = Color(0xFFFA8C16)
+    val gold_04 = Color(0xFFFA972D)
+    val gold_05 = Color(0xFFFBA345)
+    val gold_06 = Color(0xFFFCBA73)
+    val gold_07 = Color(0xFFFDD1A2)
+    val gold_08 = Color(0xFFFEE8D0)
+    val gold_09 = Color(0xFFFEF3E7)
+    val gold_10 = Color(0xFFFFF9F3)
+    val gold_11 = Color(0xFFFEFBF8)
+    val orange_01 = Color(0xFFC84316)
+    val orange_02 = Color(0xFFE14C19)
+    val orange_03 = Color(0xFFFA541C)
+    val orange_04 = Color(0xFFFA6532)
+    val orange_05 = Color(0xFFFB7649)
+    val orange_06 = Color(0xFFFC9877)
+    val orange_07 = Color(0xFFFDBBA4)
+    val orange_08 = Color(0xFFFEDDD2)
+    val orange_09 = Color(0xFFFEEDe8)
+    val orange_10 = Color(0xFFFFF6F3)
+    val orange_11 = Color(0xFFFEFAF8)
+    val red_01 = Color(0xFFC41B24)
+    val red_02 = Color(0xFFDD1F29)
+    val red_03 = Color(0xFFF5222D)
+    val red_04 = Color(0xFFF63842)
+    val red_05 = Color(0xFFF74E57)
+    val red_06 = Color(0xFFF97A81)
+    val red_07 = Color(0xFFFBA7AB)
+    val red_08 = Color(0xFFFDD3D5)
+    val red_09 = Color(0xFFFEe8EA)
+    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,
+        "black_03" to black_03,
+        "black_04" to black_04,
+        "black_05" to black_05,
+        "black_06" to black_06,
+        "black_07" to black_07,
+        "black_08" to black_08,
+        "black_09" to black_09,
+        "black_10" to black_10,
+        "black_11" to black_11,
+        "black_12" to black_12,
+        "black_13" to black_13,
+        "black_14" to black_14,
+        "black_15" to black_15,
+        "black_16" to black_16,
+        "black_17" to black_17,
+        "black_18" to black_18,
+        "black_19" to black_19,
+        "black_20" to black_20,
+
+        "pink_01" to pink_01,
+        "pink_02" to pink_02,
+        "pink_03" to pink_03,
+        "pink_04" to pink_04,
+        "pink_05" to pink_05,
+        "pink_06" to pink_06,
+        "pink_07" to pink_07,
+        "pink_08" to pink_08,
+        "pink_09" to pink_09,
+        "pink_10" to pink_10,
+        "pink_11" to pink_11,
+        "pink_MoMo_Branding" to pink_MoMo_Branding,
+
+        "violet_01" to violet_01,
+        "violet_02" to violet_02,
+        "violet_03" to violet_03,
+        "violet_04" to violet_04,
+        "violet_05" to violet_05,
+        "violet_06" to violet_06,
+        "violet_07" to violet_07,
+        "violet_08" to violet_08,
+        "violet_09" to violet_09,
+        "violet_10" to violet_10,
+        "violet_11" to violet_11,
+        "violet_11_stroke" to violet_11_stroke,
+
+        "indigo_01" to indigo_01,
+        "indigo_02" to indigo_02,
+        "indigo_03" to indigo_03,
+        "indigo_04" to indigo_04,
+        "indigo_05" to indigo_05,
+        "indigo_06" to indigo_06,
+        "indigo_07" to indigo_07,
+        "indigo_08" to indigo_08,
+        "indigo_09" to indigo_09,
+        "indigo_10" to indigo_10,
+        "indigo_11" to indigo_11,
+
+        "blue_01" to blue_01,
+        "blue_02" to blue_02,
+        "blue_03" to blue_03,
+        "blue_04" to blue_04,
+        "blue_05" to blue_05,
+        "blue_06" to blue_06,
+        "blue_07" to blue_07,
+        "blue_08" to blue_08,
+        "blue_09" to blue_09,
+        "blue_10" to blue_10,
+        "blue_11" to blue_11,
+
+        "mint_01" to mint_01,
+        "mint_02" to mint_02,
+        "mint_03" to mint_03,
+        "mint_04" to mint_04,
+        "mint_05" to mint_05,
+        "mint_06" to mint_06,
+        "mint_07" to mint_07,
+        "mint_08" to mint_08,
+        "mint_09" to mint_09,
+        "mint_10" to mint_10,
+        "mint_11" to mint_11,
+
+        "green_01" to green_01,
+        "green_02" to green_02,
+        "green_03" to green_03,
+        "green_04" to green_04,
+        "green_05" to green_05,
+        "green_06" to green_06,
+        "green_07" to green_07,
+        "green_08" to green_08,
+        "green_09" to green_09,
+        "green_10" to green_10,
+        "green_11" to green_11,
+
+        "lime_01" to lime_01,
+        "lime_02" to lime_02,
+        "lime_03" to lime_03,
+        "lime_04" to lime_04,
+        "lime_05" to lime_05,
+        "lime_06" to lime_06,
+        "lime_07" to lime_07,
+        "lime_08" to lime_08,
+        "lime_09" to lime_09,
+        "lime_10" to lime_10,
+        "lime_11" to lime_11,
+
+        "yellow_01" to yellow_01,
+        "yellow_02" to yellow_02,
+        "yellow_03" to yellow_03,
+        "yellow_04" to yellow_04,
+        "yellow_05" to yellow_05,
+        "yellow_06" to yellow_06,
+        "yellow_07" to yellow_07,
+        "yellow_08" to yellow_08,
+        "yellow_09" to yellow_09,
+        "yellow_10" to yellow_10,
+        "yellow_11" to yellow_11,
+
+        "gold_01" to gold_01,
+        "gold_02" to gold_02,
+        "gold_03" to gold_03,
+        "gold_04" to gold_04,
+        "gold_05" to gold_05,
+        "gold_06" to gold_06,
+        "gold_07" to gold_07,
+        "gold_08" to gold_08,
+        "gold_09" to gold_09,
+        "gold_10" to gold_10,
+        "gold_11" to gold_11,
+
+        "orange_01" to orange_01,
+        "orange_02" to orange_02,
+        "orange_03" to orange_03,
+        "orange_04" to orange_04,
+        "orange_05" to orange_05,
+        "orange_06" to orange_06,
+        "orange_07" to orange_07,
+        "orange_08" to orange_08,
+        "orange_09" to orange_09,
+        "orange_10" to orange_10,
+        "orange_11" to orange_11,
+
+        "red_01" to red_01,
+        "red_02" to red_02,
+        "red_03" to red_03,
+        "red_04" to red_04,
+        "red_05" to red_05,
+        "red_06" to red_06,
+        "red_07" to red_07,
+        "red_08" to red_08,
+        "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/const/HostFont.kt

@@ -0,0 +1,16 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.text.font.FontFamily
+
+/**
+ * Nạp font từ tài nguyên native của app host thay vì đóng gói bản copy riêng trong SDK.
+ *
+ * App host (MoMo Platform) đã bundle sẵn toàn bộ font từ `font-source`:
+ *  - Android: `assets/fonts/<fileName>` (gradle task `syncMomoFonts`)
+ *  - iOS: file rời ở bundle root (pbxproj fileRef được `post_install.rb` trỏ về font-source)
+ *
+ * Trả về `null` nếu host không có font đó — caller tự fallback [FontFamily.Default].
+ */
+@Composable
+internal expect fun hostFontFamily(fileName: String): FontFamily?

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

@@ -0,0 +1,18 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// Design-system rollout holder, same shape as KitFontScale: the kit is sandboxed and can't read the
+// host config, so the host seeds this once at startup from DesignSystemConfig. getFontFamily() reads
+// it to decide whether the new default font applies, so every screen follows the flag with no prop
+// threading. Backed by snapshot state: writes recompose text automatically.
+object KitDesignSystem {
+    var isWhiteList by mutableStateOf(false)
+        private set
+
+    fun update(isWhiteList: Boolean) {
+        this.isWhiteList = isWhiteList
+    }
+}

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

@@ -0,0 +1,22 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// App-wide font-scale holder. The kit is sandboxed and can't read the host cache directly, so the
+// host (which sees both core and this kit) seeds this once at startup and pushes runtime updates into
+// it. scaleSize() reads it as the fallback, so every screen — including direct NavigationContainer
+// screens with no host-pushed MiniAppContext — scales with no per-render prop and no async flicker.
+// Backed by snapshot state: writes recompose text automatically.
+object KitFontScale {
+    var userScaleRate by mutableStateOf(1f)
+        private set
+    var useOSScaleRate by mutableStateOf(true)
+        private set
+
+    fun update(userScaleRate: Float, useOSScaleRate: Boolean) {
+        this.userScaleRate = userScaleRate
+        this.useOSScaleRate = useOSScaleRate
+    }
+}

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

@@ -0,0 +1,12 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.unit.dp
+
+object Radius {
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+}

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

@@ -0,0 +1,16 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.unit.dp
+
+object Spacing {
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+    val XXL = 32.dp
+    val Size3XL = 48.dp
+    val Size4XL = 56.dp
+    val Size5XL = 64.dp
+}