@momo-kits/native-kits 0.168.1-beta.8-debug → 0.168.1-beta.9

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

@@ -1,338 +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
-internal 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
-internal fun RenderSkewContent(label: String, rotate: Float, backgroundColor: Color){
-    Box(
-        modifier = Modifier
-            .height(skewBodyHeight)
-            .background(backgroundColor),
-        contentAlignment = Alignment.Center
-    ) {
-        Label(label, rotate)
-    }
-    RightTail()
-}
-
-@Composable
-internal 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
-internal 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
-internal 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
-internal 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 padding = minRibbonHeight / 4f
-    val badgeHeight = minRibbonHeight + padding
-    val badgeWidth = (textWidth + padding * 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 - padding) / 2f
-
-        Canvas(modifier = Modifier.matchParentSize()) {
-            val width = size.width
-            val height = size.height
-            val ribbonHeight = height - padding.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 = padding.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 tailRightPath = Path().apply {
-                addRoundRect(
-                    RoundRect(
-                        rect = Rect(
-                            left = tailStartX,
-                            top = tailY,
-                            right = tailStartX + halfHeadWidth,
-                            bottom = tailY + tailHeight
-                        ),
-                        topLeft = CornerRadius.Zero,
-                        topRight = CornerRadius(tailHeight, tailHeight),
-                        bottomRight = CornerRadius(tailHeight, tailHeight),
-                        bottomLeft = CornerRadius.Zero
-                    )
-                )
-            }
-            drawPath(
-                path = tailRightPath,
-                color = tailColor
-            )
-        }
-
-        Text(
-            text = text,
-            modifier = Modifier
-                .padding(bottom = padding)
-                .padding(horizontal = padding / 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
-        )
-    }
-}
-
-private val ribbonHeight: Dp = 20.dp
-private val roundHeight: Dp = 16.dp
-private val skewBodyHeight: Dp = 16.dp
-private val roundRightRadius: Dp = 12.dp
-private val roundPaddingEnd: Dp = 6.dp
-private val skewTailWidth: Dp = 8.dp
-private val skewTailHeight: Dp = 16.dp
-private val headTailWidth: Dp = 5.dp
-private val headTailHeight: Dp = 20.dp
-
-enum class RibbonPosition {TopLeft, TopRight, BottomLeft, BottomRight}

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

@@ -1,175 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
-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 vn.momo.kits.platform.getPlatformName
-import vn.momo.kits.platform.getStatusBarHeight
-
-@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
-        )
-    }
-}
-
-private enum class BaselineOrientation { Horizontal, Vertical }
-
-@Composable
-private 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,
-        )
-    }
-}