@momo-kits/native-kits 0.152.4-beta.11 → 0.152.4-beta.13

package/compose/MoMoComposeKits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'MoMoComposeKits'
-    spec.version                  = '0.152.4'
+    spec.version                  = '0.0.1'
     spec.homepage                 = 'MoMoComposeKits'
     spec.source                   = { :http=> ''}
     spec.authors                  = 'M_SERVICE'

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -32,6 +33,7 @@ import vn.momo.kits.components.Icon
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 
+@Stable
 data class HeaderRightData(
     val useShortcut: Boolean = false,
     val useMore: Boolean = false,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/LiteScreen.kt

@@ -85,7 +85,6 @@ import vn.momo.kits.modifier.shadow
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
 
-@Deprecated("Use NavigationContainer(StackScreen) instead", ReplaceWith("NavigationContainer(StackScreen)"))
 @Composable
 fun LiteScreen(
     scrollable: Boolean = true,
@@ -352,7 +351,8 @@ private class LiteScreenHeaderPolicy(
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = constraints.maxWidth - spacing12 * 2,
+            maxWidth = (constraints.maxWidth - spacing12 * 2)
+                .coerceAtLeast(0),
         )
         val backIconPlaceable =
             measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)

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

@@ -13,6 +13,8 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
+import coil3.compose.LocalPlatformContext
+import coil3.request.ImageRequest
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 import vn.momo.kits.utils.noThemeIcons
@@ -24,6 +26,9 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
+    // decode image without downscaling it
+    val context = LocalPlatformContext.current
+
     val iconUrl = remember(source) {
         if (source.contains("https")) {
             source
@@ -49,7 +54,13 @@ fun Icon(
     ) {
         AsyncImage(
             modifier = Modifier.matchParentSize(),
-            model = iconUrl,
+            model = ImageRequest.Builder(context)
+                .data(iconUrl)
+                .size(
+                    coil3.size.Dimension.Undefined,
+                    coil3.size.Dimension.Undefined
+                )
+                .build(),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             colorFilter = colorFilter,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/SnackBar.kt

@@ -5,7 +5,6 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect

package/ios/Badge/Badge.swift

@@ -0,0 +1,85 @@
+import SwiftUI
+
+public struct Badge: View {
+    let label: String
+    let backgroundColor: Color?
+    
+    private var primaryColors: [Color] {
+        [
+            Colors.black03,
+            Colors.pink03,
+            Colors.violet03,
+            Colors.indigo03,
+            Colors.blue03,
+            Colors.mint03,
+            Colors.green03,
+            Colors.lime03,
+            Colors.yellow03,
+            Colors.gold03,
+            Colors.orange03,
+            Colors.red03
+        ]
+    }
+    
+    public init(label: String = "Label", backgroundColor: Color? = nil) {
+        self.label = label
+        self.backgroundColor = backgroundColor
+    }
+    
+    private func isNumber(_ text: String) -> Bool {
+        return text.range(of: "^\\d+$", options: .regularExpression) != nil
+    }
+    
+    private func formatTitle(_ text: String) -> String {
+        if isNumber(text), let number = Int(text), number > 99 {
+            return "99+"
+        }
+        return text
+    }
+    
+    private var badgeColor: Color {
+        // If a custom background color is provided, use it
+        if let bgColor = backgroundColor {
+            return bgColor
+        }
+        
+        // Otherwise, use default colors based on label type
+        if isNumber(label) {
+            return Colors.red03 // error.primary
+        } else {
+            return Colors.orange03 // warning.primary
+        }
+    }
+    
+    public var body: some View {
+        Text(formatTitle(label))
+            .font(.system(size: scaleSize(10), weight: .bold))
+            .foregroundColor(Colors.black01)
+            .padding(.horizontal, Spacing.XS)
+            .frame(minWidth: scaleSize(16), minHeight: scaleSize(16))
+            .background(badgeColor)
+            .cornerRadius(Radius.M)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(Colors.black01, lineWidth: 1)
+            )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Badge_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 20) {
+            Badge(label: "5")
+            Badge(label: "99")
+            Badge(label: "100")
+            Badge(label: "New")
+            Badge(label: "Hot", backgroundColor: Colors.pink03)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif
+

package/ios/Badge/BadgeRibbon.swift

@@ -0,0 +1,174 @@
+import SwiftUI
+
+public enum RibbonPosition {
+    case topLeft
+    case topRight
+    case bottomLeft
+    case bottomRight
+}
+
+public struct BadgeRibbon: View {
+    let position: RibbonPosition
+    let label: String
+    let isRound: Bool
+    let backgroundColor: Color
+    
+    public init(
+        position: RibbonPosition = .topRight,
+        label: String = "Label",
+        isRound: Bool = false,
+        backgroundColor: Color? = nil
+    ) {
+        self.position = position
+        self.label = label
+        self.isRound = isRound
+        self.backgroundColor = backgroundColor ?? Colors.orange03
+    }
+    
+    private var rotation: Angle {
+        switch position {
+        case .topRight, .bottomRight:
+            return .degrees(180)
+        case .topLeft, .bottomLeft:
+            return .zero
+        }
+    }
+    
+    private var useUpTail: Bool {
+        position == .bottomLeft || position == .topRight
+    }
+    
+    private var verticalAlignment: VerticalAlignment {
+        switch position {
+        case .topLeft, .bottomRight:
+            return .top
+        case .bottomLeft, .topRight:
+            return .bottom
+        }
+    }
+    
+    public var body: some View {
+        HStack(alignment: verticalAlignment, spacing: 0) {
+            if useUpTail {
+                upTail
+            } else {
+                downTail
+            }
+            
+            if isRound {
+                roundContent
+            } else {
+                skewContent
+            }
+        }
+        .frame(height: RibbonConstants.ribbonHeight)
+        .rotationEffect(rotation)
+    }
+    
+    private var roundContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(1)
+                .rotationEffect(rotation)
+        }
+        .frame(height: RibbonConstants.roundHeight)
+        .padding(.trailing, RibbonConstants.roundPaddingEnd)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.M)
+                .fill(backgroundColor)
+                .mask(
+                    HStack(spacing: 0) {
+                        Rectangle()
+                        RoundedRectangle(cornerRadius: Radius.M)
+                    }
+                )
+        )
+    }
+    
+    private var skewContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(1)
+                .rotationEffect(rotation)
+                .frame(height: RibbonConstants.skewBodyHeight)
+                .padding(.horizontal, 8)
+                .background(backgroundColor)
+            
+            rightTail
+        }
+    }
+    
+    private var upTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .rotationEffect(.degrees(180))
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var downTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var rightTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Tail_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
+        .offset(x: -2)
+        .clipped()
+    }
+}
+
+// MARK: - Constants
+private struct RibbonConstants {
+    static let ribbonHeight: CGFloat = 20
+    static let roundHeight: CGFloat = 16
+    static let skewBodyHeight: CGFloat = 16
+    static let roundRightRadius: CGFloat = 12
+    static let roundPaddingEnd: CGFloat = 6
+    static let skewTailWidth: CGFloat = 8
+    static let skewTailHeight: CGFloat = 16
+    static let headTailWidth: CGFloat = 5
+    static let headTailHeight: CGFloat = 20
+}
+
+// MARK: - String Extension for Text Size
+extension String {
+    func size(withAttributes attributes: [NSAttributedString.Key: Any]?) -> CGSize {
+        let size = (self as NSString).size(withAttributes: attributes)
+        return size
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct BadgeRibbon_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 30) {
+            // Basic ribbon examples
+            BadgeRibbon(position: .topRight, label: "New")
+            BadgeRibbon(position: .topLeft, label: "Hot", isRound: true)
+            BadgeRibbon(position: .bottomLeft, label: "Sale")
+            BadgeRibbon(position: .bottomRight, label: "50% OFF", isRound: true)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif
+

package/ios/Button/Button.swift

@@ -1,6 +1,6 @@
 import Foundation
-import SwiftUI
 import Lottie
+import SwiftUI
 
 // MARK: - ButtonType
 
@@ -33,7 +33,7 @@ public extension ButtonType {
     func backgroundColor(loading: Bool) -> Color {
         switch self {
         case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
-        case .primary:  return Colors.primary.opacity(loading ? 0.75 : 1)
+        case .primary: return Colors.primary.opacity(loading ? 0.75 : 1)
         case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
         case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
         case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
@@ -116,13 +116,13 @@ extension ButtonSize {
 }
 
 public struct Button: View {
-
     var title: String
     var action: () -> Void
     var type: ButtonType
     var size: ButtonSize
     var iconLeft: AnyView?
     var iconRight: AnyView?
+    var isFull: Bool
     var loading: Bool
 
     public init(
@@ -132,6 +132,7 @@ public struct Button: View {
         size: ButtonSize = .large,
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
+        isFull: Bool = true,
         loading: Bool = false
     ) {
         self.title = title
@@ -140,6 +141,7 @@ public struct Button: View {
         self.size = size
         self.iconLeft = iconLeft
         self.iconRight = iconRight
+        self.isFull = isFull
         self.loading = loading
     }
 
@@ -156,7 +158,6 @@ public struct Button: View {
     }
 
     public var body: some View {
-
         let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
 
         let bg = type.backgroundColor(loading: loading)
@@ -165,12 +166,11 @@ public struct Button: View {
         let borderWidth = type.borderWidth
 
         SwiftUI.Button(action: {
-            if !loading && type != .disabled {
+            if !loading, type != .disabled {
                 action()
             }
         }) {
             HStack(spacing: size.iconSpacing) {
-
                 if loading && loadingOnLeft {
                     LottieView(name: "lottie_circle_loader", loopMode: .loop)
                         .frame(width: size.iconSize, height: size.iconSize)
@@ -195,7 +195,7 @@ public struct Button: View {
                     iconRight.frame(width: size.iconSize, height: size.iconSize)
                 }
             }
-            .frame(maxWidth: .infinity)
+            .frame(maxWidth: isFull ? .infinity : nil)
             .padding(.horizontal, size.padding)
             .frame(height: size.height)
             .background(bg)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.152.4-beta.11",
+  "version": "0.152.4-beta.13",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"