@momo-kits/native-kits 0.152.4-beta.2 → 0.152.4-beta.3

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -0,0 +1,258 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.resources.Font
+import org.jetbrains.compose.resources.FontResource
+import org.jetbrains.compose.resources.InternalResourceApi
+import vn.momo.kits.platform.getScreenDimensions
+import kotlin.math.max
+import kotlin.math.min
+import vn.momo.uikits.resources.Res
+import vn.momo.uikits.resources.momosignature
+import vn.momo.uikits.resources.momotrustdisplay
+import vn.momo.uikits.resources.sfprotext_black
+import vn.momo.uikits.resources.sfprotext_bold
+import vn.momo.uikits.resources.sfprotext_heavy
+import vn.momo.uikits.resources.sfprotext_light
+import vn.momo.uikits.resources.sfprotext_medium
+import vn.momo.uikits.resources.sfprotext_regular
+import vn.momo.uikits.resources.sfprotext_semibold
+import vn.momo.uikits.resources.sfprotext_thin
+import vn.momo.uikits.resources.sfprotext_ultralight
+
+const val DEFAULT_SCREEN_SIZE = 375f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
+
+@Composable
+fun scaleSize(size: Float): Float {
+    val scaleSizeMaxRate: Float = ScaleSizeMaxRate.current ?: MAX_FONT_SCALE
+    val deviceWidth = getScreenDimensions().width
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    val defaultFontSize = size / fontScale //To ignore OS scale
+    var fontSizeScaleDevice = defaultFontSize
+    var fontSizeScaleOS = defaultFontSize
+
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
+    }
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * scaleSizeMaxRate)
+    }
+
+    return max(
+        fontSizeScaleDevice,
+        fontSizeScaleOS
+    )
+}
+
+@Composable
+fun scaleSize(size: Dp): Dp {
+    val density = LocalDensity.current
+    val px = with(density) { size.toPx() }
+    val scaledPx = scaleSize(px)
+    return with(density) { scaledPx.toDp() }
+}
+
+
+@OptIn(InternalResourceApi::class)
+@Composable
+fun getFont(font: FontResource): FontFamily {
+    return FontFamily(Font(font))
+}
+
+@Composable
+fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
+    val key = "$fontFamily-${fontWeight?.weight}"
+    val fontMap = mapOf(
+        "SFProText-100" to Res.font.sfprotext_thin,
+        "SFProText-200" to Res.font.sfprotext_ultralight,
+        "SFProText-300" to Res.font.sfprotext_light,
+        "SFProText-400" to Res.font.sfprotext_regular,
+        "SFProText-500" to Res.font.sfprotext_medium,
+        "SFProText-600" to Res.font.sfprotext_semibold,
+        "SFProText-700" to Res.font.sfprotext_bold,
+        "SFProText-800" to Res.font.sfprotext_heavy,
+        "SFProText-900" to Res.font.sfprotext_black,
+
+        "MoMoSignature-100" to Res.font.momosignature,
+        "MoMoSignature-200" to Res.font.momosignature,
+        "MoMoSignature-300" to Res.font.momosignature,
+        "MoMoSignature-400" to Res.font.momosignature,
+        "MoMoSignature-500" to Res.font.momosignature,
+        "MoMoSignature-600" to Res.font.momosignature,
+        "MoMoSignature-700" to Res.font.momosignature,
+        "MoMoSignature-800" to Res.font.momosignature,
+        "MoMoSignature-900" to Res.font.momosignature,
+
+        "MoMoTrustDisplay-100" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-200" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-300" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-400" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-500" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-600" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-700" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-800" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-900" to Res.font.momotrustdisplay,
+    )
+    val font = fontMap[key] ?: Res.font.sfprotext_regular
+    return getFont(font)
+}
+
+@Immutable
+class AppTypography internal constructor(
+    val headlineDefaultBold: TextStyle,
+    val headerMBold: TextStyle,
+    val headerDefaultBold: TextStyle,
+    val headerSSemibold: TextStyle,
+    val headerXsSemibold: TextStyle,
+    val bodyDefaultRegular: TextStyle,
+    val bodyDefaultRegularStrikethrough: TextStyle,
+    val descriptionDefaultRegular: TextStyle,
+    val descriptionDefaultRegularStrikethrough: TextStyle,
+    val descriptionXsRegular: TextStyle,
+    val descriptionXsRegularStrikethrough: TextStyle,
+    val labelDefaultMedium: TextStyle,
+    val labelSMedium: TextStyle,
+    val labelXsMedium: TextStyle,
+    val actionDefaultBold: TextStyle,
+    val actionSBold: TextStyle,
+    val actionXsBold: TextStyle,
+    val actionXxsBold: TextStyle,
+) {
+    constructor(
+        default: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        headlineDefaultBold: TextStyle = TextStyle(
+            fontSize = 24.sp,
+            lineHeight = 34.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerMBold: TextStyle = TextStyle(
+            fontSize = 18.sp,
+            lineHeight = 26.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerSSemibold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        headerXsSemibold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        bodyDefaultRegular: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        bodyDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionDefaultRegular: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionXsRegular: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionXsRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        labelDefaultMedium: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelSMedium: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelXsMedium: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        actionDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionSBold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXsBold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXxsBold: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Bold
+        ),
+    ) : this(
+        headlineDefaultBold = headlineDefaultBold,
+        headerMBold = headerMBold,
+        headerDefaultBold = headerDefaultBold,
+        headerSSemibold = headerSSemibold,
+        headerXsSemibold = headerXsSemibold,
+        bodyDefaultRegular = bodyDefaultRegular,
+        bodyDefaultRegularStrikethrough = bodyDefaultRegularStrikethrough,
+        descriptionDefaultRegular = descriptionDefaultRegular,
+        descriptionDefaultRegularStrikethrough = descriptionDefaultRegularStrikethrough,
+        descriptionXsRegular = descriptionXsRegular,
+        descriptionXsRegularStrikethrough = descriptionXsRegularStrikethrough,
+        labelDefaultMedium = labelDefaultMedium,
+        labelSMedium = labelSMedium,
+        labelXsMedium = labelXsMedium,
+        actionDefaultBold = actionDefaultBold,
+        actionSBold = actionSBold,
+        actionXsBold = actionXsBold,
+        actionXxsBold = actionXxsBold
+    )
+}
+
+val Typography = AppTypography()

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -0,0 +1,2 @@
+package vn.momo.kits.layout
+

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -0,0 +1,35 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+
+data class GridContext(
+    val numberOfColumns: Number,
+    val gutterSize: Number,
+    val sizePerSpan: Number,
+    val getSizeSpan: (Number) -> Number
+)
+
+@Composable
+fun Item(
+    heightSpan: Number = 1,
+    widthSpan: Number = 1,
+    content: @Composable() () -> Unit,
+    modifier: Modifier = Modifier,
+    grid: GridContext
+) {
+
+    val widthItem = grid.getSizeSpan(widthSpan)
+    val heightItem = grid.getSizeSpan(heightSpan)
+
+    Box(
+        modifier = modifier.width(width = Dp(widthItem.toFloat()))
+            .height(height = Dp(heightItem.toFloat()))
+    ) {
+        content()
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -0,0 +1,2 @@
+package vn.momo.kits.layout
+

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -0,0 +1,59 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.node.SemanticsModifierNode
+import androidx.compose.ui.semantics.SemanticsPropertyReceiver
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import vn.momo.kits.platform.getPlatformName
+
+fun Modifier.setAutomationId(accessibilityId: String, label: String? = null): Modifier {
+    return if (getPlatformName() == "Android") {
+        semantics {
+            contentDescription = accessibilityId
+        }
+    } else {
+        semantics {
+            testTag = accessibilityId
+            contentDescription = label ?: accessibilityId
+        }
+    }
+}
+
+/**
+ * Alternative for [setAutomationId]
+ *
+ * reason: [link](https://developer.android.com/develop/ui/compose/custom-modifiers#composable_function_modifiers_are_never_skipped)
+ * */
+fun Modifier.kitsAutomationId(accessibilityId: String, label: String? = null) =
+    this then KitsAutomationIdElement(accessibilityId, label)
+
+private data class KitsAutomationIdElement(
+    private val accessibilityId: String,
+    private val label: String? = null,
+) : ModifierNodeElement<KitsAutomationIdNode>() {
+    override fun create(): KitsAutomationIdNode {
+        return KitsAutomationIdNode(accessibilityId, label)
+    }
+
+    override fun update(node: KitsAutomationIdNode) {
+        node.accessibilityId = accessibilityId
+        node.label = label
+    }
+}
+
+private class KitsAutomationIdNode(
+    var accessibilityId: String,
+    var label: String?,
+) : Modifier.Node(), SemanticsModifierNode {
+    override fun SemanticsPropertyReceiver.applySemantics() {
+        if (getPlatformName() == "Android") {
+            contentDescription = accessibilityId
+        } else {
+            testTag = accessibilityId
+            contentDescription = label ?: accessibilityId
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Clickable.kt

@@ -0,0 +1,68 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.semantics.Role
+
+fun Modifier.noFeedbackClickable(
+    enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, onClick: () -> Unit
+): Modifier = composed {
+    clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null,
+        enabled,
+        onClickLabel,
+        role,
+        onClick
+    )
+}
+
+fun Modifier.activeOpacityClickable(
+    activeOpacity: Float = 0.2f,
+    enabled: Boolean = true,
+    onClickLabel: String? = null,
+    role: Role? = null,
+    onClick: () -> Unit
+): Modifier = composed {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val animatedAlpha by animateFloatAsState(
+        targetValue = if (isPressed) activeOpacity else 1f,
+        label = "ActiveOpacity"
+    )
+
+    this
+        .graphicsLayer { alpha = animatedAlpha }
+        .clickable(
+            interactionSource = interactionSource,
+            indication = null,
+            enabled,
+            onClickLabel,
+            role,
+            onClick
+        )
+}
+
+
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Shadow.kt

@@ -0,0 +1,49 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.platform.setMaskFilter
+
+
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    borderRadius: Dp = 0.dp,
+    blurRadius: Float = 0f,
+    offsetY: Dp = 0.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0f.dp,
+    modifier: Modifier = Modifier
+) = this.then(
+    modifier.drawBehind {
+        this.drawIntoCanvas {
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            val spreadPixel = spread.toPx()
+            val leftPixel = (0f - spreadPixel) + offsetX.toPx()
+            val topPixel = (0f - spreadPixel) + offsetY.toPx()
+            val rightPixel = (this.size.width + spreadPixel)
+            val bottomPixel = (0f + spreadPixel) - offsetY.toPx()
+
+            if (blurRadius != 0f) {
+                frameworkPaint.setMaskFilter(blurRadius)
+            }
+
+            frameworkPaint.color = color.toArgb()
+            it.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                radiusX = borderRadius.toPx(),
+                radiusY = borderRadius.toPx(),
+                paint
+            )
+        }
+    }
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Size.kt

@@ -0,0 +1,51 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.node.LayoutModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.IntOffset
+
+@Composable
+fun Modifier.dynamicSize(
+    widthState: State<Int>? = null,
+    heightState: State<Int>? = null,
+) = this then DynamicSizeElement(widthState, heightState)
+
+private data class DynamicSizeElement(
+    val widthState: State<Int>?,
+    val heightState: State<Int>?,
+) : ModifierNodeElement<DynamicSizeNode>() {
+    override fun create(): DynamicSizeNode {
+        return DynamicSizeNode(widthState, heightState)
+    }
+
+    override fun update(node: DynamicSizeNode) {
+        node.widthState = widthState
+        node.heightState = heightState
+    }
+
+}
+
+private class DynamicSizeNode(
+    var widthState: State<Int>?,
+    var heightState: State<Int>?,
+) : Modifier.Node(), LayoutModifierNode {
+    override fun MeasureScope.measure(
+        measurable: Measurable,
+        constraints: Constraints
+    ): MeasureResult {
+        val p = measurable.measure(constraints)
+        return layout(
+            width = widthState?.value ?: p.width,
+            height = heightState?.value ?: p.height,
+        ) {
+            p.place(IntOffset.Zero)
+        }
+    }
+}