@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,340 @@
+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}