@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.3

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

@@ -1,363 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.BasicText
-import androidx.compose.foundation.text.TextAutoSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import vn.momo.kits.components.Image
-import vn.momo.kits.components.Options
-import vn.momo.kits.components.Skeleton
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.getFontFamily
-import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.navigation.component.HeaderTitle.User
-
-@Composable
-internal fun HeaderUser(
-    data: HeaderTitle
-) {
-    if (data !is User) return
-
-    if (data.isLoading) {
-        return TitleUserShimmer()
-    }
-
-    val maxWidth = headerTitleMaxWidth()
-
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = Spacing.XS)
-            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Row(
-            modifier = Modifier.widthIn(max = maxWidth),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Box(modifier = Modifier.size(Spacing.XXL)) {
-                AvatarGroup(urls = AvatarUrls(data.image ?: listOf()), title = data.title)
-                if (data.dotColor != null) {
-                    Box(
-                        modifier = Modifier
-                            .align(Alignment.BottomEnd)
-                            .size(10.dp)
-                            .clip(CircleShape)
-                            .background(data.dotColor)
-                    )
-                }
-            }
-
-            Spacer(Modifier.width(6.dp))
-
-            Column(modifier = Modifier.weight(1f, fill = false)) {
-                Row(verticalAlignment = Alignment.CenterVertically) {
-                    Text(
-                        text = data.title,
-                        color = data.tintColor,
-                        style = Typography.actionXsBold,
-                        fontFamily = HEADER_FONT_FAMILY,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                    if (data.icons.isNotEmpty()) {
-                        Spacer(Modifier.width(6.dp))
-                        Row(verticalAlignment = Alignment.CenterVertically) {
-                            data.icons.forEach { icon ->
-                                RemoteIcon16(url = icon)
-                            }
-                        }
-                    }
-                }
-
-                if (!data.subTitle.isNullOrEmpty()) {
-                    Spacer(Modifier.height(2.dp))
-                    Text(
-                        text = data.subTitle,
-                        color = data.tintColor,
-                        style = Typography.descriptionXsRegular,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis
-                    )
-                }
-            }
-        }
-    }
-}
-
-@Composable
-private fun TitleUserShimmer() {
-    val theme = AppTheme.current
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = Spacing.XS),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Box(
-            modifier = Modifier
-                .size(Spacing.XXL)
-                .clip(CircleShape)
-                .background(theme.colors.border.default)
-        ) {
-            Skeleton()
-        }
-        Spacer(Modifier.width(Spacing.M / 2))
-        Column(modifier = Modifier.fillMaxWidth()) {
-            Box(
-                modifier = Modifier
-                    .height(18.dp)
-                    .width(120.dp)
-                    .clip(RoundedCornerShape(8.dp))
-            ) { Skeleton() }
-            Spacer(Modifier.height(Spacing.XXS))
-            Box(
-                modifier = Modifier
-                    .height(12.dp)
-                    .width(120.dp)
-                    .clip(RoundedCornerShape(8.dp))
-            ) { Skeleton() }
-        }
-    }
-}
-
-@Composable
-private fun AvatarGroup(
-    urls: AvatarUrls?,
-    title: String? = null,
-    size: Dp = Spacing.XXL
-) {
-    val theme = AppTheme.current
-    val modifierBorder = remember {
-        Modifier.clip(CircleShape).border(width = (0.5).dp, color = theme.colors.border.default, shape = CircleShape)
-    }
-    val options = Options(
-        contentScale = ContentScale.Crop,
-        alignment = Alignment.Center
-    )
-
-    when (urls?.items?.size) {
-        0 -> InitialsAvatar(
-            modifier = modifierBorder,
-            name = title ?: "",
-            fallbackInitials = null,
-            size = size
-        )
-        1 -> SingleAvatar(options = options, modifier = modifierBorder, urls.items[0], size)
-        2 -> TwoAvatar(options = options, modifier = modifierBorder, urls, size)
-        3 -> ThreeAvatar(options = options, modifier = modifierBorder, urls, size)
-        4 -> FourAvatar(options = options, modifier = modifierBorder, urls, size)
-        else -> ManyAvatar(options = options, modifier = modifierBorder, urls!!, size)
-    }
-}
-
-@Composable
-private fun SingleAvatar(options: Options, modifier: Modifier = Modifier, url: String, size: Dp) {
-    Image(
-        source = url,
-        options = options,
-        modifier = modifier
-            .size(size)
-    )
-}
-
-@Composable
-private fun TwoAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 24.dp
-    Box(modifier = Modifier.size(size)) {
-        Image(
-            source = urls.items[0],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[1],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-    }
-}
-
-@Composable
-private fun ThreeAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    Box(modifier = Modifier.size(size).padding(2.dp)) {
-        Image(
-            source = urls.items[0],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-        )
-        Image(
-            source = urls.items[1],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopCenter)
-        )
-        Image(
-            source = urls.items[2],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-    }
-}
-
-@Composable
-private fun FourAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    Box(modifier = Modifier.size(size).padding(1.dp)) {
-        Image(
-            source = urls.items[0],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-        Image(
-            source = urls.items[1],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-        )
-        Image(
-            source = urls.items[2],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[3],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopStart)
-        )
-    }
-}
-
-@Composable
-private fun ManyAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
-    val child = 16.dp
-    val more = urls.items.size - 3
-    Box(modifier = Modifier.size(size).padding(1.dp)) {
-        Image(
-            source = urls.items[0],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomStart)
-        )
-        Image(
-            source = urls.items[1],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopEnd)
-        )
-        Image(
-            source = urls.items[2],
-            options = options,
-            modifier = modifier
-                .size(child)
-                .align(Alignment.TopStart)
-        )
-        Box(
-            modifier = modifier
-                .size(child)
-                .align(Alignment.BottomEnd)
-                .background(Colors.pink_09)
-                .padding(1.dp)
-                .clipToBounds(),
-            contentAlignment = Alignment.Center
-        ) {
-            BasicText(
-                text = "+$more",
-                style = TextStyle(
-                    color = Colors.pink_03,
-                    fontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
-                ),
-                maxLines = 1,
-                autoSize = TextAutoSize.StepBased(
-                    minFontSize = 1.sp,
-                    maxFontSize = 10.sp,
-                    stepSize = 1.sp
-                )
-            )
-        }
-    }
-}
-
-@Composable
-private fun InitialsAvatar(
-    modifier: Modifier = Modifier,
-    name: String,
-    fallbackInitials: String? = null,
-    size: Dp = Spacing.XXL
-) {
-    val initials = remember(name, fallbackInitials) {
-        fallbackInitials ?: run {
-            val words = name.trim().split(Regex("\\s+")).takeLast(2)
-            words.joinToString("") { it.firstOrNull()?.uppercase() ?: "" }
-        }
-    }
-    Box(
-        modifier = modifier
-            .size(size)
-            .background(Colors.pink_09),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = initials,
-            color = Colors.pink_03,
-            style = Typography.descriptionXsRegular
-        )
-    }
-}
-
-@Composable
-private fun RemoteIcon16(url: String) {
-    Image(
-        source = url,
-        options = Options(
-            contentScale = ContentScale.Crop
-        ),
-        modifier = Modifier
-            .size(16.dp)
-            .clip(RoundedCornerShape(4.dp)),
-    )
-}
-
-@Immutable
-private data class AvatarUrls(val items: List<String>)

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

@@ -1,169 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.absolutePadding
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.AbsoluteAlignment
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.layout.layout
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.constrainHeight
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.components.BadgeDot
-import vn.momo.kits.components.DotSize
-import vn.momo.kits.components.Icon
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.layout.DuoMetrics
-import vn.momo.kits.layout.SideBarEdge
-import vn.momo.kits.layout.getScreenLayout
-import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.navigation.LocalNavigator
-import vn.momo.kits.navigation.LocalOptions
-
-private val SIDE_BAR_ICON_SIZE = 24.dp
-
-// iPhone Duo: back and toolkit leave the bar for a column in the side safe area, as the system bars do.
-// bottomInset is what footer / tab bar / home indicator take from the bottom; the column stays above it.
-@Composable
-internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifier) {
-    val options = LocalOptions.current
-    val navigator = LocalNavigator.current
-    val sideBar = getScreenLayout().sideBar ?: return
-    val toolkit = options.headerRight as? HeaderRight.Toolkit
-    if (options.headerType == HeaderType.None || (options.hiddenBack && toolkit == null)) return
-
-    val headerColor = getHeaderColor(options.headerType, headerOpacity(), options.tintColor, Colors.black_17)
-    val isRight = sideBar.edge == SideBarEdge.RIGHT
-
-    Column(
-        modifier = modifier
-            .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
-            .width(sideBar.width)
-            .layout { measurable, constraints ->
-                val placeable = measurable.measure(constraints.copy(minHeight = 0))
-                val maxY = constraints.maxHeight - (bottomInset + Spacing.XL).roundToPx() - placeable.height
-                val y = minOf(sideBar.top.roundToPx(), maxY).coerceAtLeast(0)
-                layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
-                    placeable.place(0, y)
-                }
-            }
-            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
-        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
-        verticalArrangement = Arrangement.spacedBy(Spacing.M),
-    ) {
-        if (options.hiddenBack) {
-            // keep the slot so the toolkit does not jump between root and pushed screens
-            Spacer(Modifier.size(DuoMetrics.controlSize))
-        } else {
-            SideBarButton(
-                icon = "arrow-back",
-                headerColor = headerColor,
-                automationId = "btn_navigation_back",
-                onClick = { navigator.onBackSafe { } },
-            )
-        }
-        if (toolkit != null) {
-            Toolkit(headerRight = toolkit, tintColor = options.tintColor, headerColor = headerColor, vertical = true)
-        }
-    }
-}
-
-@Composable
-internal fun SideBarButton(
-    icon: String,
-    headerColor: HeaderColor,
-    onClick: () -> Unit,
-    enabled: Boolean = true,
-    showBadge: Boolean = false,
-    automationId: String? = null,
-) {
-    Box {
-        Box(
-            modifier = Modifier
-                .size(DuoMetrics.controlSize)
-                .sideBarGlass(headerColor, CircleShape)
-                .activeOpacityClickable(enabled = enabled, onClick = onClick)
-                .conditional(automationId != null) { setAutomationId(automationId.orEmpty()) },
-            contentAlignment = Alignment.Center,
-        ) {
-            Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
-        }
-        if (showBadge) {
-            BadgeDot(
-                size = DotSize.Small,
-                modifier = Modifier.align(Alignment.TopEnd).offset(x = -Spacing.XXS, y = Spacing.XXS),
-            )
-        }
-    }
-}
-
-// Capsule grouping related controls, one item per 50pt.
-@Composable
-internal fun SideBarGroup(
-    headerColor: HeaderColor,
-    itemCount: Int,
-    content: @Composable ColumnScope.() -> Unit,
-) {
-    val height = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
-    Column(
-        modifier = Modifier
-            .width(DuoMetrics.controlSize)
-            .height(height)
-            .sideBarGlass(headerColor, RoundedCornerShape(Radius.XL)),
-        content = content,
-    )
-}
-
-@Composable
-internal fun ColumnScope.SideBarGroupItem(
-    icon: String,
-    headerColor: HeaderColor,
-    automationId: String,
-    onClick: () -> Unit,
-) {
-    Box(
-        modifier = Modifier
-            .weight(1f)
-            .fillMaxWidth()
-            .activeOpacityClickable(onClick = onClick)
-            .setAutomationId(automationId),
-        contentAlignment = Alignment.Center,
-    ) {
-        Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
-    }
-}
-
-// Dark glass under light icons (banner headers), light glass otherwise. The light one is opaque:
-// Compose has no backdrop blur and a translucent fill shows its own shadow through (RN uses 85% white).
-private fun Modifier.sideBarGlass(headerColor: HeaderColor, shape: Shape): Modifier =
-    if (headerColor.tintIconColor == Colors.black_01) {
-        clip(shape)
-            .background(Colors.black_20.copy(alpha = 0.5f))
-            .border(0.5.dp, Colors.black_01.copy(alpha = 0.2f), shape)
-    } else {
-        shadow(3.dp, shape)
-            .background(Colors.black_01)
-            .border(0.5.dp, Colors.black_20.copy(alpha = 0.08f), shape)
-    }

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

@@ -1,132 +0,0 @@
-package vn.momo.kits.navigation.component
-
-import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.offset
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.delay
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.modifier.conditional
-import kotlinx.coroutines.launch
-import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.navigation.LocalFooterHeightPx
-import vn.momo.kits.navigation.LocalNavigator
-import vn.momo.kits.navigation.LocalOptions
-import vn.momo.kits.navigation.OverplayComponentRegistry
-import kotlin.time.Duration.Companion.milliseconds
-
-sealed class SnackBar(open val duration: Long? = null) {
-    data class Custom(
-        val content: @Composable () -> Unit,
-        override val duration: Long? = 3000L
-    ) : SnackBar(duration)
-
-    data class Toast(
-        override val duration: Long? = 3000L
-    ) : SnackBar(duration)
-}
-
-@Composable
-internal fun SnackBar(
-    data: SnackBar,
-    onDismiss: (() -> Unit)?
-) {
-    val navigator = LocalNavigator.current
-    val options = LocalOptions.current
-    val density = LocalDensity.current
-    val footerHeightPxState = LocalFooterHeightPx.current
-    val navigationBar = AppNavigationBar.current
-
-    val footerHeight = if (options.footerComponent != null) {
-        footerHeightPxState.value
-    } else {
-        with(density){ navigationBar.toPx() }
-    }.toInt()
-
-    var startPosition by remember { mutableStateOf(Float.MAX_VALUE) }
-    val targetPosition = 0f
-
-    var offsetY by remember { mutableStateOf(Animatable(startPosition)) }
-    val coroutineScope = rememberCoroutineScope()
-
-    suspend fun openEvent() {
-        offsetY.snapTo(startPosition)
-        offsetY.animateTo(
-            targetValue = targetPosition,
-            animationSpec = tween(
-                durationMillis = 350,
-            )
-        )
-    }
-
-    fun closeEvent() {
-        coroutineScope.launch {
-            offsetY.animateTo(
-                targetValue = startPosition,
-                animationSpec = tween(
-                    durationMillis = 200,
-                )
-            )
-            navigator.hideSnackBar()
-        }
-    }
-
-    LaunchedEffect(startPosition) {
-        if (startPosition != Float.MAX_VALUE){
-            openEvent()
-        }
-    }
-
-    LaunchedEffect(data.duration) {
-        val duration = data.duration
-        if (duration != null) {
-            delay(duration.milliseconds)
-            navigator.hideSnackBar()
-        }
-    }
-
-    DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose {
-            closeEvent()
-        }
-        onDispose {
-            onDismiss?.invoke()
-        }
-    }
-
-    Box(
-        modifier = Modifier
-            .offset { IntOffset(0, offsetY.value.toInt() - footerHeight) }
-            .onGloballyPositioned {
-                if (startPosition != it.size.height.toFloat()) {
-                    startPosition = it.size.height.toFloat()
-                    offsetY = Animatable(startPosition)
-                }
-            }
-            .fillMaxWidth()
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-    ) {
-        when (data) {
-            is SnackBar.Custom -> data.content()
-            is SnackBar.Toast -> {}
-        }
-    }
-}