@momo-kits/native-kits 0.0.1-beta.5 → 0.89.1-2

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

@@ -0,0 +1,64 @@
+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.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import vn.momo.kits.const.Colors
+
+@Composable
+fun Skeleton(
+) {
+    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        Box(
+            modifier = Modifier.fillMaxSize()
+                .background(Colors.black_05)
+                .shimmerLoadingAnimation(maxWidth = maxWidth.value.toInt())
+        )
+    }
+}
+
+fun Modifier.shimmerLoadingAnimation(
+    maxWidth: Int,
+    angleOfAxisY: Float = 0f,
+    durationMillis: Int = 1000,
+): Modifier {
+    return composed {
+        val widthOfShadowBrush = maxWidth * 60 / 100
+        val shimmerColors = listOf(
+            Colors.black_05,
+            Colors.black_03,
+            Colors.black_05,
+        )
+        val transition = rememberInfiniteTransition(label = "")
+        val translateAnimation = transition.animateFloat(
+            initialValue = 0f,
+            targetValue = (durationMillis + widthOfShadowBrush).toFloat(),
+            animationSpec = infiniteRepeatable(
+                animation = tween(
+                    durationMillis = durationMillis,
+                    easing = LinearEasing,
+                ),
+                repeatMode = RepeatMode.Restart,
+            ),
+        )
+        this.background(
+            brush = Brush.linearGradient(
+                colors = shimmerColors,
+                start = Offset(x = translateAnimation.value - widthOfShadowBrush, y = 0.0f),
+                end = Offset(x = translateAnimation.value, y = angleOfAxisY),
+            ),
+        )
+    }
+}

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

@@ -0,0 +1,63 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+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.material.ripple.rememberRipple
+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.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.utils.ifTrue
+
+@Composable
+fun Switch(
+    value: Boolean = false,
+    onChange: (Boolean) -> Unit = {},
+    disabled: Boolean = false,
+) {
+    val circleBackgroundColor = value.ifTrue(Colors.black_01, Colors.black_03)
+    var backgroundColor = value.ifTrue(Colors.green_03, Colors.black_07)
+    if (disabled) {
+        backgroundColor = value.ifTrue(Colors.green_09, Colors.black_05)
+    }
+
+    Box(
+        modifier = Modifier.then(
+            Modifier.width(38.dp).height(20.dp).border(
+                0.dp, Color.Unspecified,
+                RoundedCornerShape(20.dp)
+            ).background(backgroundColor, RoundedCornerShape(20.dp)).clip(RoundedCornerShape(20.dp))
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = rememberRipple(),
+                    enabled = !disabled,
+                    onClick = { onChange(!value) }
+                )
+                .padding(horizontal = Spacing.XS)
+        ),
+        contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
+    ) {
+        Box(
+            modifier = Modifier.size(14.dp)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
+                .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
+            contentAlignment = Alignment.Center
+        )
+        {
+            Box(Modifier.size(6.dp).background(backgroundColor, RoundedCornerShape(percent = 100)))
+        }
+    }
+}

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

@@ -0,0 +1,73 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+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.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.utils.primaryColors
+
+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,
+) {
+    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))
+            .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.labelS
+            )
+        }
+    }
+}

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

@@ -0,0 +1,42 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+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.unit.sp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.const.scaleSize
+
+@Composable
+fun Text(
+    text: String,
+    color: Color? = null,
+    style: TextStyle = Typography.paragraphDefault,
+    textAlign: TextAlign? = TextAlign.Start,
+    modifier: Modifier = Modifier,
+    maxLines: Int = Int.MAX_VALUE,
+    textDecoration: TextDecoration? = null,
+    onTextLayout: ((TextLayoutResult) -> Unit)? = null,
+) {
+    val fontSize = scaleSize(style.fontSize.value).sp
+    val fontFamily = getFontFamily("SFProText", style.fontWeight)
+
+    androidx.compose.material3.Text(
+        modifier = modifier,
+        text = text,
+        color = color ?: AppTheme.current.colors.text.default,
+        style = style,
+        textAlign = textAlign,
+        fontSize = fontSize,
+        fontFamily = fontFamily,
+        maxLines = maxLines,
+        textDecoration = textDecoration,
+        onTextLayout = onTextLayout,
+    )
+}

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

@@ -0,0 +1,150 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.graphics.Color
+
+object Colors {
+    val black_01 = Color(0xFFFFFFFF)
+    val black_02 = Color(0xFFF9F9F9)
+    val black_03 = Color(0xFFF0F0F0)
+    val black_04 = Color(0xFFE8E8E8)
+    val black_05 = Color(0xFFE5E5E5)
+    val black_06 = Color(0xFFD8D8D8)
+    val black_07 = Color(0xFFCCCCCC)
+    val black_08 = Color(0xFFC6C6C6)
+    val black_09 = Color(0xFFB9B9B9)
+    val black_10 = Color(0xFFA0A0A0)
+    val black_11 = Color(0xFF878787)
+    val black_12 = Color(0xFF727272)
+    val black_13 = Color(0xFF646464)
+    val black_14 = Color(0xFF565656)
+    val black_15 = Color(0xFF484848)
+    val black_16 = Color(0xFF404040)
+    val black_17 = Color(0xFF303233)
+    val black_18 = Color(0xFF242424)
+    val black_19 = Color(0xFF18191A)
+    val black_20 = Color(0xFF000000)
+    val pink_01 = Color(0xFFBC2678)
+    val pink_02 = Color(0xFFD42A87)
+    val pink_03 = Color(0xFFEB2F96)
+    val pink_04 = Color(0xFFED43A0)
+    val pink_05 = Color(0xFFEF59AB)
+    val pink_06 = Color(0xFFF382C0)
+    val pink_07 = Color(0xFFF7ACD5)
+    val pink_08 = Color(0xFFFBD5EA)
+    val pink_09 = Color(0xFFFDEAF4)
+    val pink_10 = Color(0xFEF4FA)
+    val pink_11 = Color(0xFFFEF8FC)
+    val pink_MoMo_Branding = Color(0xFFA50064)
+    val violet_01 = Color(0xFF7822C0)
+    val violet_02 = Color(0xFF8726D8)
+    val violet_03 = Color(0xFF962AF0)
+    val violet_04 = Color(0xFFA03FF1)
+    val violet_05 = Color(0xFFAB55F3)
+    val violet_06 = Color(0xFFC07FF6)
+    val violet_07 = Color(0xFFD5AAF9)
+    val violet_08 = Color(0xFFEAD4FC)
+    val violet_09 = Color(0xFFF4E9FD)
+    val violet_10 = Color(0xFFFAF4FE)
+    val violet_11 = Color(0xFFFCF8FE)
+    val violet_11_stroke = Color(0xFFDFE1E5)
+    val indigo_01 = Color(0xFF3E3CCC)
+    val indigo_02 = Color(0xFF4644E6)
+    val indigo_03 = Color(0xFF4E4BFF)
+    val indigo_04 = Color(0xFF5F5DFF)
+    val indigo_05 = Color(0xFF716FFF)
+    val indigo_06 = Color(0xFF9593FF)
+    val indigo_07 = Color(0xFFB8B7FF)
+    val indigo_08 = Color(0xFFDCDBFF)
+    val indigo_09 = Color(0xFFEDEDFF)
+    val indigo_10 = Color(0xFFF6F6FF)
+    val indigo_11 = Color(0xFFF9F9FF)
+    val blue_01 = Color(0xFF0062CC)
+    val blue_02 = Color(0xFF006EE6)
+    val blue_03 = Color(0xFF007AFF)
+    val blue_04 = Color(0xFF1987FF)
+    val blue_05 = Color(0xFF3395FF)
+    val blue_06 = Color(0xFF66AFFF)
+    val blue_07 = Color(0xFF99CAFF)
+    val blue_08 = Color(0xFFCCE4FF)
+    val blue_09 = Color(0xFFE5F1FF)
+    val blue_10 = Color(0xFFF2F8FF)
+    val blue_11 = Color(0xFFF7FBFF)
+    val mint_01 = Color(0xFF0F9B9B)
+    val mint_02 = Color(0xFF11AFAF)
+    val mint_03 = Color(0xFF13C2C2)
+    val mint_04 = Color(0xFF2AC8C8)
+    val mint_05 = Color(0xFF42CECE)
+    val mint_06 = Color(0xFF71DADA)
+    val mint_07 = Color(0xFFA1E7E7)
+    val mint_08 = Color(0xFFD0F3F3)
+    val mint_09 = Color(0xFFE7F8F8)
+    val mint_10 = Color(0xFFF3FCFC)
+    val mint_11 = Color(0xFFF8FDFD)
+    val green_01 = Color(0xFF2A9F47)
+    val green_02 = Color(0xFF2FB350)
+    val green_03 = Color(0xFF34C759)
+    val green_04 = Color(0xFF48CC69)
+    val green_05 = Color(0xFF5DD27A)
+    val green_06 = Color(0xFF85DD9B)
+    val green_07 = Color(0xFFAEE9BD)
+    val green_08 = Color(0xFFD6F4DE)
+    val green_09 = Color(0xFFEAF9EE)
+    val green_10 = Color(0xFFF5FCF6)
+    val green_11 = Color(0xFFF9FDFA)
+    val lime_01 = Color(0xFF80AE0E)
+    val lime_02 = Color(0xFF90C30F)
+    val lime_03 = Color(0xFFA0D911)
+    val lime_04 = Color(0xFFA9DC28)
+    val lime_05 = Color(0xFFB3E141)
+    val lime_06 = Color(0xFFC6E870)
+    val lime_07 = Color(0xFFD9F0A0)
+    val lime_08 = Color(0xFFECF7CF)
+    val lime_09 = Color(0xFFF5FBE7)
+    val lime_10 = Color(0xFFFAFDF3)
+    val lime_11 = Color(0xFFFCFEF8)
+    val yellow_01 = Color(0xFFCCA300)
+    val yellow_02 = Color(0xFFE6B800)
+    val yellow_03 = Color(0xFFFFCC00)
+    val yellow_04 = Color(0xFFFFD119)
+    val yellow_05 = Color(0xFFFFD633)
+    val yellow_06 = Color(0xFFFFE066)
+    val yellow_07 = Color(0xFFFFEB99)
+    val yellow_08 = Color(0xFFFFF5CC)
+    val yellow_09 = Color(0xFFFFF9E5)
+    val yellow_10 = Color(0xFFFFFCF2)
+    val yellow_11 = Color(0xFFFFFDF7)
+    val gold_01 = Color(0xFFC87012)
+    val gold_02 = Color(0xFFE17E14)
+    val gold_03 = Color(0xFFFA8C16)
+    val gold_04 = Color(0xFFFA972D)
+    val gold_05 = Color(0xFFFBA345)
+    val gold_06 = Color(0xFFFCBA73)
+    val gold_07 = Color(0xFFFDD1A2)
+    val gold_08 = Color(0xFFFEE8D0)
+    val gold_09 = Color(0xFFFEF3E7)
+    val gold_10 = Color(0xFFFFF9F3)
+    val gold_11 = Color(0xFFFEFBF8)
+    val orange_01 = Color(0xFFC84316)
+    val orange_02 = Color(0xFFE14C19)
+    val orange_03 = Color(0xFFFA541C)
+    val orange_04 = Color(0xFFFA6532)
+    val orange_05 = Color(0xFFFB7649)
+    val orange_06 = Color(0xFFFC9877)
+    val orange_07 = Color(0xFFFDBBA4)
+    val orange_08 = Color(0xFFFEDDD2)
+    val orange_09 = Color(0xFFFEEDe8)
+    val orange_10 = Color(0xFFFFF6F3)
+    val orange_11 = Color(0xFFFEFAF8)
+    val red_01 = Color(0xFFC41B24)
+    val red_02 = Color(0xFFDD1F29)
+    val red_03 = Color(0xFFF5222D)
+    val red_04 = Color(0xFFF63842)
+    val red_05 = Color(0xFFF74E57)
+    val red_06 = Color(0xFFF97A81)
+    val red_07 = Color(0xFFFBA7AB)
+    val red_08 = Color(0xFFFDD3D5)
+    val red_09 = Color(0xFFFEe8EA)
+    val red_10 = Color(0xFFFEF4F4)
+    val red_11 = Color(0xFFFEF8F8)
+}
+

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

@@ -0,0 +1,12 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.unit.dp
+
+object Radius {
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+}

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

@@ -0,0 +1,13 @@
+package vn.momo.kits.const
+
+import androidx.compose.ui.unit.dp
+
+object Spacing {
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+    val XXL = 32.dp
+}

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

@@ -0,0 +1,173 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+data class Background(
+    val default: Color,
+    val surface: Color,
+    val tonal: Color,
+    val pressed: Color,
+    val selected: Color,
+    val disable: Color
+)
+
+data class ColorScheme(
+    val primary: Color,
+    val secondary: Color,
+    val background: Background,
+    val text: TextColors,
+    val border: BorderColors,
+    val success: ColorSet,
+    val warning: ColorSet,
+    val error: ColorSet,
+    val highlight: ColorSet,
+    val interactive: ColorSet
+)
+
+data class TextColors(
+    val default: Color,
+    val secondary: Color,
+    val hint: Color,
+    val disable: Color
+)
+
+data class BorderColors(
+    val default: Color,
+    val disable: Color
+)
+
+data class ColorSet(
+    val primary: Color,
+    val secondary: Color,
+    val container: Color
+)
+
+data class ThemeAssets(
+    val headerBackground: String? = null
+)
+
+data class Theme(
+    val dark: Boolean,
+    val colors: ColorScheme,
+    val font: String,
+    val assets: ThemeAssets
+)
+
+val defaultTheme = Theme(
+    dark = false,
+    colors = ColorScheme(
+        primary = Colors.pink_03,
+        secondary = Colors.pink_07,
+        background = Background(
+            default = Color(0xFFF2F2F6),
+            surface = Colors.black_01,
+            tonal = Colors.pink_08,
+            pressed = Color(0xFFDFDFE6),
+            selected = Colors.pink_10,
+            disable = Color(0xFFEBEBF2)
+        ),
+        text = TextColors(
+            default = Colors.black_17,
+            secondary = Colors.black_15,
+            hint = Colors.black_12,
+            disable = Colors.black_08
+        ),
+        border = BorderColors(
+            default = Colors.black_04,
+            disable = Colors.black_03
+        ),
+        success = ColorSet(
+            primary = Colors.green_03,
+            secondary = Colors.green_07,
+            container = Colors.green_08
+        ),
+        warning = ColorSet(
+            primary = Colors.orange_03,
+            secondary = Colors.orange_07,
+            container = Colors.orange_08
+        ),
+        error = ColorSet(
+            primary = Colors.red_03,
+            secondary = Colors.red_07,
+            container = Colors.red_08,
+        ),
+        highlight = ColorSet(
+            primary = Colors.mint_03,
+            secondary = Colors.mint_07,
+            container = Colors.mint_08
+        ),
+        interactive = ColorSet(
+            primary = Colors.blue_03,
+            secondary = Colors.blue_07,
+            container = Colors.blue_08
+        )
+    ),
+    font = "SFProText",
+    assets = ThemeAssets(
+        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
+    )
+)
+
+
+val darkTheme = Theme(
+    dark = true,
+    colors = ColorScheme(
+        primary = Colors.pink_04,
+        secondary = Colors.pink_08,
+        background = Background(
+            default = Color(0xFF121212),
+            surface = Color(0xFF1E1E1E),
+            tonal = Colors.pink_08,
+            pressed = Color(0xFF1A1A1A),
+            selected = Colors.pink_11,
+            disable = Color(0xFF303030)
+        ),
+        text = TextColors(
+            default = Color.White,
+            secondary = Color(0xFFB0B0B0),
+            hint = Color(0xFF727272),
+            disable = Color(0xFF505050)
+        ),
+        border = BorderColors(
+            default = Color(0xFF2A2A2A),
+            disable = Color(0xFF242424)
+        ),
+        success = ColorSet(
+            primary = Colors.green_03,
+            secondary = Colors.green_07,
+            container = Colors.green_08
+        ),
+        warning = ColorSet(
+            primary = Colors.orange_03,
+            secondary = Colors.orange_07,
+            container = Colors.orange_08
+        ),
+        error = ColorSet(
+            primary = Colors.red_03,
+            secondary = Colors.red_07,
+            container = Colors.red_08,
+        ),
+        highlight = ColorSet(
+            primary = Colors.mint_03,
+            secondary = Colors.mint_07,
+            container = Colors.mint_08
+        ),
+        interactive = ColorSet(
+            primary = Colors.blue_03,
+            secondary = Colors.blue_07,
+            container = Colors.blue_08
+        )
+    ),
+    font = "SFProText",
+    assets = ThemeAssets(
+        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
+    )
+)
+
+
+val AppTheme = staticCompositionLocalOf { defaultTheme }
+val AppStatusBar = staticCompositionLocalOf {
+    0.dp
+}