@momo-kits/native-kits 0.157.2-debug → 0.157.2

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

@@ -1,96 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.RepeatMode
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.modifier.conditional
-
-// Pre-computed shimmer colors to avoid repeated list creation
-private val shimmerColors = listOf(
-    Colors.black_05,
-    Colors.black_03,
-    Colors.black_05,
-)
-
-// Constants for better performance
-private const val SHADOW_BRUSH_PERCENTAGE = 0.6f
-private const val DEFAULT_DURATION_MILLIS = 1000
-
-@Composable
-fun Skeleton() {
-    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
-        // Memoize width calculation
-        val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
-
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Colors.black_05)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .shimmerLoadingAnimation(maxWidth = maxWidthValue)
-        )
-    }
-}
-
-@Composable
-fun Modifier.shimmerLoadingAnimation(
-    maxWidth: Int,
-    angleOfAxisY: Float = 0f,
-    durationMillis: Int = DEFAULT_DURATION_MILLIS,
-): Modifier {
-    // Memoize calculations to avoid repeated computations
-    val widthOfShadowBrush = remember(maxWidth) {
-        (maxWidth * SHADOW_BRUSH_PERCENTAGE).toInt()
-    }
-
-    val animationTarget = remember(durationMillis, widthOfShadowBrush) {
-        (durationMillis + widthOfShadowBrush).toFloat()
-    }
-
-    val transition = rememberInfiniteTransition(label = "shimmer")
-    val translateAnimation = transition.animateFloat(
-        initialValue = 0f,
-        targetValue = animationTarget,
-        animationSpec = infiniteRepeatable(
-            animation = tween(
-                durationMillis = durationMillis,
-                easing = LinearEasing,
-            ),
-            repeatMode = RepeatMode.Restart,
-        ),
-        label = "shimmerTranslate"
-    )
-
-    return drawBehind {
-        // Memoize brush creation by using remember in the calling composable
-        val startX = translateAnimation.value - widthOfShadowBrush
-        val endX = translateAnimation.value
-
-        drawRect(
-            brush = Brush.linearGradient(
-                colors = shimmerColors,
-                start = Offset(x = startX, y = 0f),
-                end = Offset(x = endX, y = angleOfAxisY)
-            )
-        )
-    }
-}

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

@@ -1,96 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-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.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-
-// Pre-computed shapes to avoid repeated creation
-private val switchShape = RoundedCornerShape(20.dp)
-private val circleShape = RoundedCornerShape(percent = 100)
-
-@Composable
-fun Switch(
-    value: Boolean = false,
-    onChange: (Boolean) -> Unit = {},
-    disabled: Boolean = false,
-    title: String? = "",
-    accessibilityId: String? = ""
-) {
-    // Memoize color calculations to avoid repeated conditional logic
-    val colors = remember(value, disabled) {
-        val circleColor = if (value) Colors.black_01 else Colors.black_03
-        val bgColor = when {
-            disabled && value -> Colors.green_09
-            disabled && !value -> Colors.black_05
-            value -> Colors.green_03
-            else -> Colors.black_07
-        }
-        circleColor to bgColor
-    }
-
-    val (circleBackgroundColor, backgroundColor) = colors
-
-    // Memoize automation ID to avoid string concatenation on every render
-    val automationIdValue = remember(accessibilityId, title, value) {
-        accessibilityId ?: "toggle_${title ?: "unknown"}_$value"
-    }
-
-    // Memoize alignment calculation
-    val contentAlignment = remember(value) {
-        if (value) Alignment.CenterEnd else Alignment.CenterStart
-    }
-
-    // Memoize click handler to avoid lambda recreation
-    val onClickHandler = remember(onChange, value) {
-        { onChange(!value) }
-    }
-
-    Box(modifier = Modifier.setAutomationId(automationIdValue)) {
-        Box(
-            modifier = Modifier
-                .width(38.dp)
-                .height(20.dp)
-                .border(0.dp, Color.Unspecified, switchShape)
-                .background(backgroundColor, switchShape)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .clip(switchShape)
-                .clickable(enabled = !disabled, onClick = onClickHandler)
-                .padding(horizontal = Spacing.XS),
-            contentAlignment = contentAlignment
-        ) {
-            Box(
-                modifier = Modifier
-                    .size(14.dp)
-                    .border(0.dp, Color.Unspecified, circleShape)
-                    .background(circleBackgroundColor, circleShape),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    Modifier
-                        .size(6.dp)
-                        .background(backgroundColor, circleShape)
-                )
-            }
-        }
-    }
-}

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

@@ -1,92 +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.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-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.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
-
-enum class TagSize(val height: Float) {
-    Large(24.toFloat()),
-    Medium(18.toFloat())
-}
-
-enum class TagColor(val backgroundColor: Color, val textColor: Color) {
-    Default(Colors.black_04, Colors.black_17),
-    Orange(Colors.orange_08, Colors.orange_03),
-    Green(Colors.green_08, Colors.green_03),
-    Red(Colors.red_08, Colors.red_03),
-    Blue(Colors.blue_08, Colors.blue_03),
-    Grey(Colors.black_04, Colors.black_12),
-}
-
-@Composable
-fun Tag(
-    label: String = "Label",
-    icon: String? = null,
-    color: TagColor = TagColor.Default,
-    size: TagSize = TagSize.Large,
-    customColor: Color? = 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)
-    )
-    var tagColor = color.backgroundColor
-    var labelColor = color.textColor
-
-    if (primaryColors.contains(customColor)) {
-        tagColor = color.backgroundColor
-        labelColor = color.textColor
-    }
-
-    Box(
-        modifier = Modifier
-            .height(scaleSize(size.height).dp)
-            .background(tagColor, shape = RoundedCornerShape(Radius.S))
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(horizontal = Spacing.S),
-        contentAlignment = Alignment.Center
-    ) {
-        Row(verticalAlignment = Alignment.CenterVertically) {
-            if (icon != null) {
-                Icon(
-                    source = icon,
-                    size = 16.dp,
-                    color = labelColor
-                )
-            }
-            Text(
-                text = label,
-                color = labelColor,
-                style = Typography.labelSMedium
-            )
-        }
-    }
-}

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

@@ -1,130 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.border
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.text.TextLayoutResult
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextDecoration
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.TextUnit
-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.Typography
-import vn.momo.kits.const.getFontFamily
-import vn.momo.kits.const.scaleSize
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-
-@Composable
-fun Text(
-    text: String,
-    color: Color? = null,
-    style: TextStyle = Typography.bodyDefaultRegular,
-    textAlign: TextAlign? = TextAlign.Start,
-    modifier: Modifier = Modifier,
-    maxLines: Int = Int.MAX_VALUE,
-    overflow: TextOverflow = TextOverflow.Clip,
-    textDecoration: TextDecoration? = null,
-    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
-    fontFamily: String? = null,
-    minLines: Int = 1,
-    letterSpacing: TextUnit = TextUnit.Unspecified,
-    softWrap: Boolean = true,
-    accessibilityId: String? = null
-) {
-    Text(
-        text = AnnotatedString(text),
-        color = color,
-        style = style,
-        textAlign = textAlign,
-        modifier = modifier,
-        maxLines = maxLines,
-        overflow = overflow,
-        textDecoration = textDecoration,
-        onTextLayout = onTextLayout,
-        fontFamily = fontFamily,
-        minLines = minLines,
-        letterSpacing = letterSpacing,
-        softWrap = softWrap,
-        accessibilityId = accessibilityId
-    )
-}
-
-
-@Composable
-fun Text(
-    text: AnnotatedString,
-    color: Color? = null,
-    style: TextStyle = Typography.bodyDefaultRegular,
-    textAlign: TextAlign? = TextAlign.Start,
-    modifier: Modifier = Modifier,
-    maxLines: Int = Int.MAX_VALUE,
-    overflow: TextOverflow = TextOverflow.Clip,
-    textDecoration: TextDecoration? = null,
-    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
-    fontFamily: String? = null,
-    minLines: Int = 1,
-    letterSpacing: TextUnit = TextUnit.Unspecified,
-    softWrap: Boolean = true,
-    accessibilityId: String? = null
-) {
-    // Cache theme access to avoid repeated lookups
-    val theme = AppTheme.current
-
-    // Call @Composable functions directly in composable context
-    val scaledFontSize = scaleSize(style.fontSize)
-    val scaledLineHeight = scaleSize(style.lineHeight)
-    val fontFamilyResult = getFontFamily(fontFamily ?: theme.font, style.fontWeight)
-
-    // Now memoize the results
-    val fontSize = remember(scaledFontSize) { scaledFontSize }
-    val lineHeight = remember(scaledLineHeight) { scaledLineHeight }
-    val font = remember(fontFamilyResult) { fontFamilyResult }
-
-    // Memoize color calculation
-    val textColor = remember(color, theme) {
-        color ?: theme.colors.text.default
-    }
-
-    // Memoize style copy operation
-    val optimizedStyle = remember(style) {
-        style.copy(
-            fontWeight = null,
-            lineHeight = if (lineHeight.value.isFinite() && lineHeight.value > 0) lineHeight else style.lineHeight
-        )
-    }
-
-    // Memoize automation ID
-    val automationId = remember(accessibilityId, text) {
-        accessibilityId ?: text
-    }
-
-    // on/off baseline config value, default will be false
-
-    androidx.compose.material3.Text(
-        modifier = modifier.conditional(IsShowBaseLineDebug){
-            border(1.dp, Colors.blue_03)
-        }.setAutomationId(automationId.toString()),
-        text = text,
-        color = textColor,
-        style = optimizedStyle,
-        textAlign = textAlign,
-        fontSize = fontSize,
-        fontFamily = font,
-        maxLines = maxLines,
-        softWrap = softWrap,
-        letterSpacing = letterSpacing,
-        minLines = minLines,
-        textDecoration = textDecoration,
-        onTextLayout = onTextLayout ?: {},
-        overflow = overflow
-    )
-}
-

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

@@ -1,214 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-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.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-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.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.modifier.conditional
-
-enum class TitleType { Card, Section }
-enum class TitleSize { Small, Medium, Large }
-enum class IconAlign { Top, Center, Bottom }
-enum class ButtonSize { Small, Large }
-
-@Composable
-fun Title(
-    title: String,
-    type: TitleType = TitleType.Section,
-    size: TitleSize = TitleSize.Medium,
-    icon: String? = null,
-    iconColor: Color? = null,
-    iconAlign: IconAlign = IconAlign.Top,
-    showRightAction: Boolean = false,
-    showTrailingAction: Boolean = false,
-    badgeLabel: String? = null,
-    buttonTitle: String? = null,
-    buttonSize: ButtonSize = ButtonSize.Small,
-    onPressRightAction: () -> Unit = {},
-    onPressTrailingAction: () -> Unit = {},
-    textOnly: Boolean = false,
-    description: String? = null,
-    modifier: Modifier = Modifier
-) {
-    val theme = AppTheme.current
-    val textStyle: TextStyle = when (type) {
-        TitleType.Card -> when (size) {
-            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
-            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
-            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
-        }
-
-        TitleType.Section -> when (size) {
-            TitleSize.Small -> TextStyle(
-                fontSize = 16.sp,
-                lineHeight = 24.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            TitleSize.Medium -> TextStyle(
-                fontSize = 18.sp,
-                lineHeight = 26.sp,
-                fontWeight = FontWeight.Bold
-            )
-
-            TitleSize.Large -> TextStyle(
-                fontSize = 20.sp,
-                lineHeight = 28.sp,
-                fontWeight = FontWeight.Bold
-            )
-        }
-    }
-
-    if (textOnly) {
-        Text(
-            text = title,
-            style = textStyle,
-            modifier = modifier
-        )
-        return
-    }
-
-    Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .height(IntrinsicSize.Min)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(8.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        icon?.let {
-            Column(
-                modifier = Modifier.fillMaxHeight().padding(end = Spacing.S),
-                verticalArrangement = when (iconAlign) {
-                    IconAlign.Top -> Arrangement.Top
-                    IconAlign.Center -> Arrangement.Center
-                    IconAlign.Bottom -> Arrangement.Bottom
-                },
-            ) {
-                // Icon
-                Icon(
-                    source = it,
-                    color = iconColor ?: theme.colors.text.default,
-                    modifier = Modifier.size(24.dp)
-                )
-            }
-        }
-
-        Column(
-            modifier = Modifier.weight(1f)
-        ) {
-            Row(
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = if (showTrailingAction) Modifier else Modifier.weight(1f),
-                ) {
-                    Text(
-                        text = title,
-                        style = textStyle,
-                        maxLines = if (showTrailingAction || badgeLabel != null) 1 else 2,
-                    )
-
-                    // Badge
-                    badgeLabel?.let {
-                        Spacer(modifier = Modifier.width(4.dp))
-                        Badge(
-                            label = it
-                        )
-                    }
-
-                }
-
-                // Trailing action (icon)
-                if (showTrailingAction && !showRightAction) {
-                    Spacer(modifier = Modifier.width(8.dp))
-                    Box(
-                        modifier = Modifier
-                            .size(24.dp)
-                            .background(
-                                color = if (type == TitleType.Section) Colors.black_06.copy(0.6f) else Colors.black_06.copy(
-                                    0.3f
-                                ),
-                                shape = RoundedCornerShape(12.dp)
-                            )
-                            .clickable { onPressTrailingAction() },
-                        contentAlignment = Alignment.Center
-                    ) {
-                        Icon(
-                            source = "arrow_chevron_right_small",
-                            size = 18.dp
-                        )
-                    }
-                }
-            }
-
-            // Description
-            description?.let {
-                Spacer(modifier = Modifier.height(4.dp))
-                Text(
-                    text = it,
-                    style = Typography.descriptionDefaultRegular,
-                    color = theme.colors.text.secondary
-                )
-            }
-        }
-
-        // Right action (button or icon)
-        if (showRightAction && !showTrailingAction) {
-            Spacer(modifier = Modifier.width(8.dp))
-            if (buttonTitle != null) {
-                Text(
-                    text = buttonTitle,
-                    style = if (buttonSize === ButtonSize.Small) Typography.actionXsBold else Typography.actionSBold,
-                    color = theme.colors.primary,
-                    modifier = Modifier.clickable { onPressRightAction() }
-                )
-            } else {
-                Box(
-                    modifier = Modifier
-                        .size(24.dp)
-                        .background(
-                            color = Colors.pink_03.copy(alpha = 0.1f),
-                            shape = RoundedCornerShape(12.dp)
-                        )
-                        .clickable { onPressRightAction() },
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        source = "arrow_chevron_right_small",
-                        modifier = Modifier.size(22.dp),
-                        color = theme.colors.primary
-                    )
-                }
-            }
-        }
-    }
-}