@momo-kits/native-kits 0.152.4-beta.5 → 0.152.4-beta.7

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

@@ -0,0 +1,143 @@
+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.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.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+
+data class IconSpecs(
+    val width: Dp,
+    val height: Dp,
+    val radius: Dp,
+    val size: Dp
+)
+
+enum class IconSize(val value: IconSpecs) {
+    LARGE(
+        IconSpecs(
+            height = 48.dp,
+            radius = Radius.XL,
+            width = 48.dp,
+            size = 48.dp
+        )
+    ),
+    SMALL(
+        IconSpecs(
+            height = 40.dp,
+            radius = Radius.XL,
+            width = 40.dp,
+            size = 40.dp
+        )
+    )
+}
+
+// Pre-computed shape to avoid repeated creation
+private val iconButtonShape = RoundedCornerShape(Radius.XL)
+
+// Cache for icon sizes to avoid repeated calculations
+private val iconSizeMap = mapOf(
+    IconSize.SMALL to 16.dp,
+    IconSize.LARGE to 24.dp
+)
+
+@Composable
+fun getIconStyle(type: ButtonType, color: Color? = null): Modifier {
+    val theme = AppTheme.current
+
+    return remember(type, color, theme) {
+        when (type) {
+            ButtonType.DISABLED -> Modifier
+                .background(theme.colors.background.disable, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
+
+            ButtonType.PRIMARY -> Modifier
+                .background(theme.colors.primary, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
+
+            ButtonType.SECONDARY -> Modifier
+                .background(theme.colors.background.surface, iconButtonShape)
+                .border(1.dp, theme.colors.border.default, iconButtonShape)
+
+            ButtonType.OUTLINE -> Modifier
+                .background(theme.colors.background.surface, iconButtonShape)
+                .border(1.dp, color ?: theme.colors.primary, iconButtonShape)
+
+            ButtonType.TONAL -> Modifier
+                .background(theme.colors.background.tonal, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
+
+            ButtonType.DANGER -> Modifier
+                .background(theme.colors.error.primary, iconButtonShape)
+                .border(0.dp, Color.Unspecified, iconButtonShape)
+
+            ButtonType.TEXT -> Modifier
+        }
+    }
+}
+
+@Composable
+fun getIconColor(type: ButtonType): Color {
+    val theme = AppTheme.current
+    return remember(type, theme) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.text.disable
+            ButtonType.PRIMARY -> Colors.black_01
+            ButtonType.SECONDARY -> theme.colors.text.default
+            ButtonType.OUTLINE -> theme.colors.primary
+            ButtonType.TONAL -> theme.colors.primary
+            ButtonType.DANGER -> Colors.black_01
+            ButtonType.TEXT -> theme.colors.primary
+        }
+    }
+}
+
+@Composable
+fun IconButton(
+    onClick: () -> Unit,
+    type: ButtonType = ButtonType.PRIMARY,
+    size: IconSize = IconSize.SMALL,
+    icon: String = "",
+) {
+    // Memoize icon size calculation
+    val iconSize = remember(size) {
+        iconSizeMap[size] ?: 16.dp
+    }
+
+    // Memoize enabled state
+    val isEnabled = remember(type) {
+        type != ButtonType.DISABLED
+    }
+
+    // Memoize radius for clipping
+    val radius = remember(size) {
+        size.value.radius
+    }
+
+    Box(
+        modifier = Modifier
+            .size(size.value.size)
+            .then(getIconStyle(type))
+            .clip(RoundedCornerShape(radius))
+            .clickable(enabled = isEnabled, onClick = onClick),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            source = icon,
+            color = getIconColor(type),
+            size = iconSize,
+        )
+    }
+}

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

@@ -0,0 +1,179 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.DefaultAlpha
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.platform.LocalDensity
+import coil3.compose.AsyncImage
+import vn.momo.kits.const.AppTheme
+
+data class Options(
+    val alignment: Alignment = Alignment.TopStart,
+    val contentScale: ContentScale = ContentScale.Crop,
+    val colorFilter: ColorFilter? = null,
+    val alpha: Float = DefaultAlpha,
+)
+
+enum class ImageState {
+    Loading, Success, Error
+}
+
+// Cached domain set for better performance
+private val supportedDomains = setOf(
+    "static.momocdn.net",
+    "img.mservice.com.vn",
+    "cdn.mservice.com.vn",
+    "img.mservice.io",
+    "image.momocdn.net"
+)
+
+// Pre-computed size chart for optimal image sizing
+private val sizeChart = mapOf(
+    64 to "XXS",
+    128 to "XS",
+    256 to "S",
+    512 to "M",
+    768 to "L",
+    1024 to "XL",
+    2048 to "XXL"
+)
+
+// Optimized size selection using binary search approach
+private fun closestSizeForWidth(width: Float): String {
+    val targetWidth = width.toInt()
+    return sizeChart.entries
+        .minByOrNull { kotlin.math.abs(it.key - targetWidth) }
+        ?.value ?: "M"
+}
+
+// Cached regex for better URL parsing performance
+private val urlHostRegex = Regex("^(?:https?://)?([^:/\\s]+)")
+
+private fun getHostFromUrl(url: String): String? {
+    return try {
+        urlHostRegex.find(url)?.groupValues?.get(1)
+    } catch (_: Exception) {
+        null
+    }
+}
+
+// Optimized query parameter appending
+private fun appendSizeQueryParam(url: String, value: String): String {
+    val fragmentIndex = url.indexOf('#')
+    val (baseUrl, fragment) = if (fragmentIndex != -1) {
+        url.take(fragmentIndex) to url.substring(fragmentIndex)
+    } else {
+        url to ""
+    }
+
+    val separator = if (baseUrl.contains('?')) "&" else "?"
+    return "${baseUrl}${separator}size=$value$fragment"
+}
+
+// Cache for processed URLs to avoid repeated calculations
+private val urlCache = mutableMapOf<String, String>()
+
+@Composable
+fun Image(
+    source: Any,
+    modifier: Modifier = Modifier,
+    options: Options? = null,
+    loading: Boolean = true,
+) {
+    val imageOptions = remember(options) {
+        options ?: Options()
+    }
+
+    var imageState by remember { mutableStateOf(ImageState.Loading) }
+    val density = LocalDensity.current
+
+    BoxWithConstraints(
+        modifier = modifier.semantics { contentDescription = "img|$source" },
+    ) {
+        val urlToLoad = remember(source, maxWidth, maxHeight, density) {
+            when (source) {
+                is String -> {
+                    // Check cache first
+                    val cacheKey = "$source|${maxWidth}|${density.density}"
+                    urlCache[cacheKey] ?: run {
+                        val processedUrl = processImageUrl(source, maxWidth, density)
+                        urlCache[cacheKey] = processedUrl
+                        processedUrl
+                    }
+                }
+                else -> source
+            }
+        }
+
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = urlToLoad,
+            contentDescription = null,
+            contentScale = imageOptions.contentScale,
+            alignment = imageOptions.alignment,
+            colorFilter = imageOptions.colorFilter,
+            alpha = imageOptions.alpha,
+            onLoading = { imageState = ImageState.Loading },
+            onSuccess = { imageState = ImageState.Success },
+            onError = { imageState = ImageState.Error },
+        )
+
+        when (imageState) {
+            ImageState.Loading -> if (loading) Skeleton()
+            ImageState.Error -> {
+                val theme = AppTheme.current
+                Icon(
+                    source = "media_fail",
+                    color = theme.colors.text.disable,
+                    modifier = Modifier.align(Alignment.Center)
+                )
+            }
+            ImageState.Success -> {}
+        }
+    }
+}
+
+// Extracted URL processing logic for better performance
+private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp, density: androidx.compose.ui.unit.Density): String {
+    val host = getHostFromUrl(url)
+    return if (host != null && supportedDomains.contains(host)) {
+        val widthPx = with(density) { maxWidth.roundToPx() }
+        val pixelRatio = density.density
+        val pixelFitForWidth = widthPx * pixelRatio
+        val sizeKey = closestSizeForWidth(pixelFitForWidth)
+        appendSizeQueryParam(url, sizeKey)
+    } else {
+        url
+    }
+}
+
+@Composable
+fun Image(
+    source: Painter,
+    modifier: Modifier = Modifier,
+    colorFilter: ColorFilter? = null,
+    alpha: Float = DefaultAlpha,
+    contentScale: ContentScale = ContentScale.Crop,
+    alignment: Alignment = Alignment.Center,
+) {
+    androidx.compose.foundation.Image(
+        modifier = modifier,
+        painter = source,
+        contentDescription = null,
+        contentScale = contentScale,
+        alignment = alignment,
+        colorFilter = colorFilter,
+        alpha = alpha,
+    )
+}

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

@@ -0,0 +1,111 @@
+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.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+
+enum class InformationState {
+    DEFAULT,
+    WARNING,
+    ERROR
+}
+
+@Composable
+fun Information(
+    title: String? = null,
+    description: String = "Description",
+    state: InformationState = InformationState.DEFAULT,
+    image: String? = null,
+    onPressAction: (() -> Unit)? = null,
+    showIcon: Boolean = true,
+    action: String? = null,
+    showIconClose: Boolean = true,
+    onPressClose: (() -> Unit)? = null,
+) {
+    var borderColor = Colors.blue_07
+    var backgroundColor = Colors.blue_10
+    var color = Colors.blue_03
+    var iconSource = "notifications_info"
+
+    if (state === InformationState.WARNING) {
+        borderColor = Colors.yellow_06
+        backgroundColor = Colors.yellow_09
+        color = Colors.orange_03
+        iconSource = "24_notifications_alert_triangle"
+    }
+
+    if (state === InformationState.ERROR) {
+        borderColor = Colors.red_07
+        backgroundColor = Colors.red_10
+        color = Colors.red_03
+        iconSource = "24_notifications_alert_octagon"
+    }
+
+    Column(
+        modifier = Modifier.border(
+            width = 0.5.dp,
+            shape = RoundedCornerShape(Radius.S),
+            color = borderColor
+        ).background(color = backgroundColor)
+            .padding(Spacing.M)
+    ) {
+        Row {
+            if (image != null) {
+                Image(
+                    source = image,
+                    modifier = Modifier.padding(end = Spacing.S).width(40.dp).height(40.dp).clip(
+                        RoundedCornerShape(Radius.S)
+                    )
+                )
+            }
+            if (image == null && showIcon) {
+                Icon(
+                    source = iconSource,
+                    size = 16.dp,
+                    color = color,
+                    modifier = Modifier.padding(end = Spacing.S)
+                )
+            }
+            Column(modifier = Modifier.weight(1f)) {
+                if (title != null) {
+                    Text(title, style = Typography.labelDefaultMedium)
+                }
+                Text(description, style = Typography.descriptionDefaultRegular)
+            }
+            if (onPressClose != null && showIconClose) {
+                Icon(
+                    source = "navigation_close",
+                    size = 16.dp,
+                    modifier = Modifier.clickable(onClick = onPressClose)
+                )
+            }
+        }
+        if (action != null && onPressAction != null) {
+            Row(modifier = Modifier.padding(top = Spacing.S)) {
+                Text(
+                    action,
+                    modifier = Modifier.weight(1f).clickable(onClick = onPressAction),
+                    textAlign = TextAlign.End,
+                    style = Typography.actionXsBold,
+                    color = color
+                )
+            }
+        }
+    }
+
+}