@momo-kits/native-kits 0.161.2-beta.11-debug → 0.161.2-beta.11

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

@@ -1,157 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-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.semantics.contentDescription
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
-import vn.momo.kits.application.IsShowBaseLineDebug
-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.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-
-private const val LOGO_MOMO_URL =
-    "https://static.momocdn.net/app/img/kits/logo_momo_circle.png"
-private const val ICON_SUPPORT_DEFAULT_URL =
-    "https://static.momocdn.net/app/img/kits/_indicator.png"
-
-enum class AvatarSize(val sizeDp: Int, val iconSizeDp: Int) {
-    SIZE_24(24, 16),
-    SIZE_32(32, 16),
-    SIZE_40(40, 24),
-    SIZE_48(48, 32),
-    SIZE_56(56, 32),
-    SIZE_72(72, 40),
-}
-
-@Composable
-fun Avatar(
-    modifier: Modifier = Modifier,
-    size: AvatarSize = AvatarSize.SIZE_32,
-    rounded: Boolean = true,
-    name: String? = null,
-    image: String? = null,
-    showIconMomo: Boolean = false,
-    showIconSupport: Boolean = false,
-    iconSupport: String = ICON_SUPPORT_DEFAULT_URL,
-    accessibilityLabel: String? = null,
-) {
-    val theme = AppTheme.current
-
-    val cornerRadius = remember(rounded, size) {
-        if (rounded) (size.sizeDp / 2).dp else Spacing.XS
-    }
-    val shape = remember(cornerRadius) { RoundedCornerShape(cornerRadius) }
-
-    val badgeSizeDp = remember(size) { (size.iconSizeDp / 2).dp }
-    val badgeShape = remember(size) {
-        RoundedCornerShape((size.iconSizeDp / 4).dp)
-    }
-
-    val shouldShowIconTop = showIconMomo && rounded
-    val shouldShowIconBottom = showIconSupport && rounded
-
-    val initials = remember(name) {
-        name?.let { avatarInitials(it) }
-    }
-
-    val automationId = remember(accessibilityLabel, name) {
-        accessibilityLabel ?: "Avatar${if (name != null) "/$name" else ""}"
-    }
-
-    Box(
-        modifier = modifier
-            .size(size.sizeDp.dp)
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
-            .setAutomationId(automationId)
-            .semantics { contentDescription = automationId },
-    ) {
-        // Inner box with clip — holds avatar content
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .clip(shape)
-                .background(color = Colors.pink_09)
-                .border(width = 1.dp, color = theme.colors.border.default, shape = shape),
-            contentAlignment = Alignment.Center,
-        ) {
-            when {
-                image != null -> {
-                    Image(
-                        source = image,
-                        modifier = Modifier
-                            .fillMaxSize()
-                            .clip(shape)
-                            .semantics { contentDescription = "$automationId|img" },
-                    )
-                }
-
-                name != null -> {
-                    Text(
-                        text = initials ?: "",
-                        style = Typography.descriptionXsRegular,
-                        color = Colors.pink_03,
-                        modifier = Modifier
-                            .semantics { contentDescription = "$automationId|text" },
-                    )
-                }
-
-                else -> {
-                    Icon(
-                        source = "basic_person",
-                        size = size.iconSizeDp.dp,
-                        color = Colors.pink_03,
-                        modifier = Modifier
-                            .semantics { contentDescription = "$automationId|icon" },
-                    )
-                }
-            }
-        }
-
-        // Badge icons — outside clip so they are not cut by border
-        if (shouldShowIconTop) {
-            Image(
-                source = LOGO_MOMO_URL,
-                modifier = Modifier
-                    .zIndex(1f)
-                    .align(Alignment.TopEnd)
-                    .offset(x = 1.dp, y = (-1).dp)
-                    .size(badgeSizeDp)
-                    .clip(badgeShape)
-                    .semantics { contentDescription = "$automationId|top-icon" },
-            )
-        }
-
-        if (shouldShowIconBottom) {
-            Image(
-                source = iconSupport,
-                modifier = Modifier
-                    .zIndex(1f)
-                    .align(Alignment.BottomEnd)
-                    .offset(x = 1.dp, y = 1.dp)
-                    .size(badgeSizeDp)
-                    .clip(badgeShape)
-                    .semantics { contentDescription = "$automationId|bottom-icon" },
-            )
-        }
-    }
-}
-
-private fun avatarInitials(name: String): String {
-    val words = name.trim().split(" ").filter { it.isNotEmpty() }
-    return words.takeLast(2).joinToString("") { it.first().uppercaseChar().toString() }
-}

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

@@ -1,85 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.conditional
-
-
-@Composable
-fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier? = null) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
-
-    fun formatTitle(label: String): String {
-        if (isNumber(label) && label.toInt() > 99) {
-            return "99+"
-        }
-        return label
-    }
-
-    var badgeColor =
-        if (isNumber(label)) {
-            AppTheme.current.colors.error.primary
-        } else {
-            AppTheme.current.colors.warning.primary
-        }
-
-    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
-        badgeColor = backgroundColor
-    }
-    val scaleSize = scaleSize(16f)
-
-    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/BadgeDot.kt

@@ -1,32 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.modifier.conditional
-
-enum class DotSize(val size: Int) {
-    Small(10),
-    Large(16)
-}
-
-@Composable
-fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
-    Box(
-        modifier = modifier
-            .size(size.size.dp)
-            .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
-            .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-    )
-}

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

@@ -1,340 +0,0 @@
-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.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.CornerRadius
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.RoundRect
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.rememberTextMeasurer
-import androidx.compose.ui.text.style.TextAlign
-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.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.getFontFamily
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.conditional
-
-@Composable
-fun BadgeRibbon(
-    position: RibbonPosition = RibbonPosition.TopRight,
-    label: String = "Label",
-    isRound: Boolean = false,
-    modifier: Modifier = Modifier,
-) {
-    val theme = AppTheme.current
-
-    val rotate = if (position == RibbonPosition.TopRight || position == RibbonPosition.BottomRight) 180f else 0f
-    val useUpTail = position == RibbonPosition.BottomLeft || position == RibbonPosition.TopRight
-    val verticalAlignment = when(position){
-        RibbonPosition.TopLeft, RibbonPosition.BottomRight -> Alignment.Top
-        RibbonPosition.BottomLeft, RibbonPosition.TopRight -> Alignment.Bottom
-    }
-
-    Row(
-        modifier = modifier
-            .height(ribbonHeight)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .graphicsLayer { rotationZ = rotate },
-        verticalAlignment = verticalAlignment
-    ) {
-        if (useUpTail) {
-            UpTail()
-        } else {
-            DownTail()
-        }
-
-        if (isRound) {
-            renderRoundContent(label, rotate, theme.colors.warning.primary)
-        } else {
-            renderSkewContent(label, rotate, theme.colors.warning.primary)
-        }
-    }
-}
-
-@Composable
-fun renderRoundContent(label: String, rotate: Float, backgroundColor: Color){
-    Box(
-        modifier = Modifier
-            .height(roundHeight)
-            .background(
-                color = backgroundColor,
-                shape = RoundedCornerShape(
-                    topEnd = roundRightRadius,
-                    bottomEnd = roundRightRadius,
-                )
-            )
-            .padding(end = roundPaddingEnd),
-        contentAlignment = Alignment.Center,
-    ) {
-        Label(label, rotate)
-    }
-}
-
-@Composable
-fun renderSkewContent(label: String, rotate: Float, backgroundColor: Color){
-    Box(
-        modifier = Modifier
-            .height(skewBodyHeight)
-            .background(backgroundColor),
-        contentAlignment = Alignment.Center
-    ) {
-        Label(label, rotate)
-    }
-    RightTail()
-}
-
-@Composable
-fun Label(label: String, rotate: Float){
-    Text(
-        text = label,
-        color = Colors.black_01,
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis,
-        style = Typography.labelXsMedium,
-        modifier = Modifier.graphicsLayer { rotationZ = rotate }
-    )
-}
-
-@Composable
-fun UpTail() {
-    Image(
-        source = "https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png",
-        modifier = Modifier
-            .graphicsLayer { rotationZ = 180f }
-            .width(headTailWidth)
-            .height(headTailHeight),
-        options = Options(
-            contentScale = ContentScale.FillBounds,
-        )
-    )
-}
-
-@Composable
-fun DownTail() {
-    Image(
-        source = "https://static.momocdn.net/app/img/kits/utils/Head_4x.png",
-        modifier = Modifier
-            .width(headTailWidth)
-            .height(headTailHeight),
-        options = Options(
-            contentScale = ContentScale.FillBounds,
-        )
-    )
-}
-
-@Composable
-fun RightTail() {
-    Image(
-        source = "https://static.momocdn.net/app/img/kits/utils/Tail_4x.png",
-        modifier = Modifier
-            .width(skewTailWidth)
-            .height(skewTailHeight),
-        options = Options(
-            contentScale = ContentScale.FillBounds,
-        )
-    )
-}
-
-@Composable
-fun RoundedBadgeRibbon(
-    text: String = "Label",
-    position: RibbonPosition = RibbonPosition.TopLeft,
-    modifier: Modifier = Modifier
-) {
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-    val style = Typography.labelXsMedium
-    val fontFamily = style.fontFamily
-
-    val scaledFontSize = scaleSize(style.fontSize.value).sp
-    val fontFamilyResult = getFontFamily(fontFamily?.toString() ?: theme.font, style.fontWeight)
-
-    val fontSize = remember(scaledFontSize) { scaledFontSize }
-    val font = remember(fontFamilyResult) { fontFamilyResult }
-    val textMeasurer = rememberTextMeasurer()
-
-    val textLayoutResult = remember(text, fontSize, font) {
-        textMeasurer.measure(
-            text = text,
-            style = style.copy(fontSize = fontSize, fontFamily = font)
-        )
-    }
-
-    val textWidth = with(density) { textLayoutResult.size.width.toDp() }
-    val textHeight = with(density) { textLayoutResult.size.height.toDp() }
-
-    val minRibbonHeight = (textHeight * 1.2f).coerceAtLeast(16.dp)
-    val paddingBottom = minRibbonHeight / 4f
-    val badgeHeight = minRibbonHeight + paddingBottom
-    val horizontalPadding = paddingBottom
-    val badgeWidth = (textWidth + horizontalPadding * 2).coerceAtLeast(28.dp)
-
-    val (rotateZ, scaleY, scaleX) = when (position) {
-        RibbonPosition.TopLeft -> Triple(0f, 1f, -1f)
-        RibbonPosition.TopRight -> Triple(0f, 1f, 1f)
-        RibbonPosition.BottomRight -> Triple(0f, -1f, 1f)
-        RibbonPosition.BottomLeft -> Triple(0f, -1f, -1f)
-    }
-
-    Box(
-        modifier = modifier
-            .size(width = badgeWidth, height = badgeHeight)
-            .graphicsLayer {
-                rotationZ = rotateZ
-                this.scaleY = scaleY
-                this.scaleX = scaleX
-            }
-    ) {
-        val roundedRect = (badgeHeight - paddingBottom) / 2f
-
-        Canvas(modifier = Modifier.matchParentSize()) {
-            val width = size.width
-            val height = size.height
-            val ribbonHeight = height - paddingBottom.toPx()
-            val cornerRadius = roundedRect.toPx()
-
-            val mainColor = Color(0xFFFA541C)
-            val tailColor = Color(0xFFC41B24)
-
-            val headWidth = 4.dp.toPx()
-            val leftSectionWidth = width * (9f / 28f)
-            val middleSectionWidth = width - leftSectionWidth - headWidth
-            val rightX = leftSectionWidth + middleSectionWidth
-
-            // 1. Tail + 2. BG
-            val leftMiddlePath = Path().apply {
-                addRoundRect(
-                    RoundRect(
-                        rect = Rect(
-                            left = 0f,
-                            top = 0f,
-                            right = rightX + 1f,
-                            bottom = ribbonHeight
-                        ),
-                        topLeft = CornerRadius(cornerRadius, cornerRadius),
-                        topRight = CornerRadius.Zero,
-                        bottomRight = CornerRadius.Zero,
-                        bottomLeft = CornerRadius(cornerRadius, cornerRadius)
-                    )
-                )
-            }
-            drawPath(
-                path = leftMiddlePath,
-                color = mainColor
-            )
-
-            // 3. Head
-            val headPath = Path().apply {
-                addRoundRect(
-                    RoundRect(
-                        rect = Rect(
-                            left = rightX,
-                            top = 0f,
-                            right = rightX + headWidth,
-                            bottom = ribbonHeight
-                        ),
-                        topLeft = CornerRadius.Zero,
-                        topRight = CornerRadius(cornerRadius, cornerRadius),
-                        bottomRight = CornerRadius.Zero,
-                        bottomLeft = CornerRadius.Zero
-                    )
-                )
-            }
-            drawPath(
-                path = headPath,
-                color = mainColor
-            )
-
-            // Draw bottom tail section
-            val tailY = ribbonHeight
-            val tailHeight = paddingBottom.toPx()
-            val halfHeadWidth = headWidth / 2f
-            val tailStartX = rightX + headWidth - halfHeadWidth
-
-            // Background square (main color)
-            drawRect(
-                color = mainColor,
-                topLeft = Offset(tailStartX, tailY),
-                size = Size(halfHeadWidth, halfHeadWidth)
-            )
-
-            val tailRoundRadius = tailHeight
-            val tailRightPath = Path().apply {
-                addRoundRect(
-                    RoundRect(
-                        rect = Rect(
-                            left = tailStartX,
-                            top = tailY,
-                            right = tailStartX + halfHeadWidth,
-                            bottom = tailY + tailHeight
-                        ),
-                        topLeft = CornerRadius.Zero,
-                        topRight = CornerRadius(tailRoundRadius, tailRoundRadius),
-                        bottomRight = CornerRadius(tailRoundRadius, tailRoundRadius),
-                        bottomLeft = CornerRadius.Zero
-                    )
-                )
-            }
-            drawPath(
-                path = tailRightPath,
-                color = tailColor
-            )
-        }
-
-        Text(
-            text = text,
-            modifier = Modifier
-                .padding(bottom = paddingBottom)
-                .padding(horizontal = paddingBottom / 2)
-                .align(Alignment.Center)
-                .graphicsLayer {
-                    rotationZ = rotateZ
-                    this.scaleY = scaleY
-                    this.scaleX = scaleX
-                },
-            textAlign = TextAlign.Center,
-            style = Typography.labelXsMedium,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-            color = Colors.black_01
-        )
-    }
-}
-
-val ribbonHeight: Dp = 20.dp
-val roundHeight: Dp = 16.dp
-val skewBodyHeight: Dp = 16.dp
-val roundRightRadius: Dp = 12.dp
-val roundPaddingEnd: Dp = 6.dp
-val skewTailWidth: Dp = 8.dp
-val skewTailHeight: Dp = 16.dp
-val headTailWidth: Dp = 5.dp
-val headTailHeight: Dp = 20.dp
-
-enum class RibbonPosition {TopLeft, TopRight, BottomLeft, BottomRight}