@momo-kits/native-kits 0.167.1-beta.3 → 0.167.1-beta.3-debug

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

@@ -0,0 +1,125 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.text.InlineTextContent
+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.*
+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,
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
+    ) {
+    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,
+        inlineContent = inlineContent
+    )
+}
+
+
+@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,
+    inlineContent: Map<String, InlineTextContent> = mapOf(),
+) {
+    // Cache theme access to avoid repeated lookups
+    val theme = AppTheme.current
+
+    val fontSize = scaleSize(style.fontSize)
+    val lineHeight = scaleSize(style.lineHeight)
+    val font = getFontFamily(fontFamily ?: theme.font, style.fontWeight)
+
+    // 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,
+        inlineContent = inlineContent
+    )
+}
+

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

@@ -0,0 +1,207 @@
+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.*
+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, fontWeight = FontWeight.Bold)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp, fontWeight = FontWeight.Bold)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp, fontWeight = FontWeight.Bold)
+        }
+
+        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)
+            }
+            // react-kits' Title root is `styles.wrapper` = `{flexDirection:'row'}`
+            // plus, for a SECTION only, `marginTop: Spacing.S` (foundations/Title
+            // index.tsx). It has no padding at all, so the 8dp box here inset every
+            // title by 8dp against the web render.
+            .padding(top = if (type == TitleType.Section) Spacing.S else 0.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
+                    )
+                }
+            }
+        }
+    }
+}