@momo-kits/native-kits 0.155.1-tracking.13 → 0.155.1-tracking.14-debug

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

@@ -0,0 +1,72 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+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.unit.dp
+import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.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.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+@Composable
+fun Radio(
+    value: Any,
+    groupValue: Any,
+    disabled: Boolean = false,
+    onChange: () -> Unit = {},
+    label: String = "",
+    modifier: Modifier = Modifier,
+) {
+    val selected = value == groupValue
+    val borderColor = when {
+        disabled && selected -> AppTheme.current.colors.background.tonal
+        disabled -> AppTheme.current.colors.text.disable
+        selected -> AppTheme.current.colors.primary
+        else -> AppTheme.current.colors.text.default
+    }
+    val borderWidth = if (selected) 6.dp else 2.dp
+    val application = ApplicationContext.current
+
+    Row(
+        modifier = modifier.activeOpacityClickable(
+            onClick = onChange,
+            enabled = !disabled,
+        ),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = modifier
+                .padding(end = if (label.isEmpty()) 0.dp else Spacing.XS)
+                .border(borderWidth, borderColor, RoundedCornerShape(Radius.M))
+                .conditional(application.isShowBaselineDebug()) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .clip(RoundedCornerShape(Radius.M))
+                .size(20.dp)
+        )
+        if (label.isNotEmpty()) {
+            Text(
+                style = Typography.descriptionDefaultRegular,
+                text = label,
+            )
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import vn.momo.kits.application.ScaleSizeMaxRate
+
+@Composable
+fun ScaleSizeScope(
+    scaleSizeMaxRate: Float? = null,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        ScaleSizeMaxRate provides scaleSizeMaxRate,
+    ) {
+        content()
+    }
+}

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

@@ -0,0 +1,99 @@
+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.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.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() {
+    val application = ApplicationContext.current
+
+    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        // Memoize width calculation
+        val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Colors.black_05)
+                .conditional(application.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

@@ -0,0 +1,99 @@
+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.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.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) }
+    }
+
+    val application = ApplicationContext.current
+
+    Box(modifier = Modifier.setAutomationId(automationIdValue)) {
+        Box(
+            modifier = Modifier
+                .width(38.dp)
+                .height(20.dp)
+                .border(0.dp, Color.Unspecified, switchShape)
+                .background(backgroundColor, switchShape)
+                .conditional(application.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

@@ -0,0 +1,95 @@
+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.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.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
+    }
+
+    val application = ApplicationContext.current
+
+    Box(
+        modifier = Modifier
+            .height(scaleSize(size.height).dp)
+            .background(tagColor, shape = RoundedCornerShape(Radius.S))
+            .conditional(application.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

@@ -0,0 +1,132 @@
+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.ApplicationContext
+import vn.momo.kits.application.MiniAppContext.Companion.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
+) {
+    val application = ApplicationContext.current
+    // 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(application.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
+    )
+}
+