@momo-kits/native-kits 0.163.1-sp.8-debug → 0.163.1-sp.9-debug

package/.claude/settings.local.json

@@ -152,7 +152,9 @@
       "Bash(cp /Users/sophia/Workspace/momo/momo-native-kits/ios/Application/Navigation/Navigator.swift /Users/sophia/Workspace/momo/momo-app/node_modules/@momo-kits/native-kits/ios/Application/Navigation/Navigator.swift)",
       "Bash(cp /Users/sophia/Workspace/momo/momo-native-kits/ios/Application/Navigation/NavigatorManager.swift /Users/sophia/Workspace/momo/momo-app/node_modules/@momo-kits/native-kits/ios/Application/Navigation/NavigatorManager.swift)",
       "Bash(cp /Users/sophia/Workspace/momo/momo-native-kits/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/NavigationDemo.swift /Users/sophia/Workspace/momo/momo-app/node_modules/@momo-kits/native-kits/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/NavigationDemo.swift)",
-      "Bash(xcodebuild -workspace MoMoPlatform.xcworkspace -scheme MoMoPlatform-UAT -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -derivedDataPath build/DerivedData build)"
+      "Bash(xcodebuild -workspace MoMoPlatform.xcworkspace -scheme MoMoPlatform-UAT -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -derivedDataPath build/DerivedData build)",
+      "Bash(cp android/gradle/libs.versions.toml /private/tmp/claude-503/-Users-sophia-Workspace-momo-momo-native-kits/bfb380ee-54cb-4a02-bc5f-d152cce4b727/scratchpad/libs.versions.toml.bak)",
+      "Bash(sed -i '' 's/kits = \"0.163.1-sp.8\"/kits = \"0.163.1-sp.7\"/' android/gradle/libs.versions.toml)"
     ]
   }
 }

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-sp.8-debug"
+        version = "0.163.1-sp.9-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.163.1-sp.8-debug'
+    spec.version                  = '0.163.1-sp.9-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.163.1-sp.8
+version=0.163.1-sp.9
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/Navigation/Navigator.swift

@@ -273,30 +273,36 @@ public final class Navigator: ObservableObject {
         }
         if let preventBack = latest?.options?.headerBackProps?.preventBack {
             showModal {
-                PopupDisplay(
-                    isPresented: .constant(true),
-                    title: preventBack.title,
-                    description: preventBack.description,
-                    url: preventBack.image,
-                    buttonDirection: preventBack.buttonDirection,
-                    buttonType: .button,
-                    actionButtonTitle: preventBack.primary?.title ?? "",
-                    closeButtonTitle: preventBack.secondary?.title ?? "",
-                    onPressAction: { [weak self] in
-                        preventBack.primary?.onPress?()
-                        // Close the popup, then leave the screen (matches Compose's pop(2)).
-                        self?.pop(2, callback: callback)
-                    },
-                    onPressCloseButton: { [weak self] in
-                        preventBack.secondary?.onPress?()
-                        self?.hideOverplay()
-                    },
-                    onClose: { [weak self] in
-                        preventBack.onIconClose?()
-                        self?.hideOverplay()
-                    },
-                    errorCode: preventBack.error,
-                    isShowCloseIcon: preventBack.isShowCloseIcon
+                PopupNotify(
+                    props: PopupNotifyProps(
+                        image: preventBack.image,
+                        title: preventBack.title,
+                        description: preventBack.description,
+                        error: preventBack.error,
+                        primary: PopupAction(
+                            title: preventBack.primary?.title ?? "",
+                            onPress: { [weak self] in
+                                preventBack.primary?.onPress?()
+                                // Close the popup, then leave the screen (matches Compose's pop(2)).
+                                self?.pop(2, callback: callback)
+                            }
+                        ),
+                        secondary: preventBack.secondary.map { secondary in
+                            PopupAction(
+                                title: secondary.title,
+                                onPress: { [weak self] in
+                                    secondary.onPress?()
+                                    self?.hideOverplay()
+                                }
+                            )
+                        },
+                        buttonDirection: preventBack.buttonDirection,
+                        onIconClose: { [weak self] in
+                            preventBack.onIconClose?()
+                            self?.hideOverplay()
+                        },
+                        isShowCloseIcon: preventBack.isShowCloseIcon
+                    )
                 )
             }
             return

package/ios/Application/StackScreen.swift

@@ -143,13 +143,8 @@ public struct StackScreen<Content: View>: View {
     // MARK: - Body
 
     public var body: some View {
-        GeometryReader { geometry in
+        GeometryReader { _ in
             let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
-            let bottomInset = min(geometry.safeAreaInsets.bottom, 21)
-            // Skip this screen's own bottom-inset reservation when hosting a footer
-            // OR a self-contained BottomTab surface (mirrors Compose's
-            // `if (options.footerComponent != null || isBottomTab) 0.dp else navigationBar`).
-            let contentBottomInset = (footer == nil && !isBottomTabRoot) ? bottomInset : 0
 
             ZStack(alignment: .top) {
                 // Background color
@@ -161,7 +156,6 @@ public struct StackScreen<Content: View>: View {
                         VStack(alignment: horizontalAlignment, spacing: 0) {
                             headerAndContent
                         }
-                        .padding(.bottom, contentBottomInset)
 
                         FloatingContent(
                             fabProps: fabProps,

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.163.1-sp.8'
+  s.version          = '0.163.1-sp.9'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.163.1-sp.8'
+  s.version          = '0.163.1-sp.9'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/AvatarDemo.swift

@@ -2,92 +2,106 @@
 //  AvatarDemo.swift
 //  Example
 //
+//  Preview + Playground demo (DemoScreen pattern).
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct AvatarDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Size") {
-                    HStack(alignment: .center, spacing: 8) {
-                        Avatar(size: .size24)
-                        Avatar(size: .size32)
-                        Avatar(size: .size40)
-                        Avatar(size: .size48)
-                        Avatar(size: .size56)
-                        Avatar(size: .size72)
-                    }
-                }
-
-                section("Rounded vs Square") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, rounded: true)
-                        Avatar(size: .size40, rounded: false)
-                    }
-                }
-
-                section("Name (initials)") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, name: "Nguyen Van A")
-                        Avatar(size: .size40, name: "John Doe")
-                        Avatar(size: .size40, name: "MoMo")
-                    }
-                }
-
-                section("Image") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
-                        Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
-                    }
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { AvatarPreview() }, playground: { AvatarPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("showIconMomo") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconMomo: true)
-                        Avatar(size: .size48, name: "MN", showIconMomo: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=4", showIconMomo: true)
-                    }
-                }
+private let avatarSizeList: [PlaygroundOption] = [
+    .init("size24", AvatarSize.size24),
+    .init("size32", AvatarSize.size32),
+    .init("size40", AvatarSize.size40),
+    .init("size48", AvatarSize.size48),
+    .init("size56", AvatarSize.size56),
+    .init("size72", AvatarSize.size72),
+]
 
-                section("showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconSupport: true)
-                        Avatar(size: .size48, name: "CS", showIconSupport: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=5", showIconSupport: true)
-                    }
-                }
+// MARK: - Preview
 
-                section("showIconMomo + showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
-                        Avatar(size: .size72, name: "NV", showIconMomo: true, showIconSupport: true)
-                    }
-                }
+private struct AvatarPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.S) {
+                Avatar(size: .size24)
+                Avatar(size: .size32)
+                Avatar(size: .size40)
+                Avatar(size: .size48)
+                Avatar(size: .size56)
+                Avatar(size: .size72)
             }
-            .padding()
         }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.headline)
-            content()
+        BasicColumnBox("Rounded vs Square", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, rounded: true)
+                Avatar(size: .size40, rounded: false)
+            }
+        }
+        BasicColumnBox("Name (initials)", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, name: "Nguyen Van A")
+                Avatar(size: .size40, name: "John Doe")
+                Avatar(size: .size40, name: "MoMo")
+            }
+        }
+        BasicColumnBox("Image", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
+                Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
+                Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
+            }
+        }
+        BasicColumnBox("Icon badges", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size48, showIconMomo: true)
+                Avatar(size: .size48, showIconSupport: true)
+                Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
+            }
         }
     }
 }
 
-#if DEBUG
-struct AvatarDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        AvatarDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct AvatarPlayground: View {
+    @State private var size: PlaygroundOption? = avatarSizeList.first { $0.key == "size48" }
+    @State private var rounded = true
+    @State private var name = ""
+    @State private var image = ""
+    @State private var showIconMomo = false
+    @State private var showIconSupport = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Avatar(
+                    size: (size?.value as? AvatarSize) ?? .size48,
+                    rounded: rounded,
+                    name: name.isEmpty ? nil : name,
+                    image: image.isEmpty ? nil : image,
+                    showIconMomo: showIconMomo,
+                    showIconSupport: showIconSupport
+                )
+            },
+            params: [
+                .radio("Size", avatarSizeList, $size),
+                .checkbox("Rounded", $rounded),
+                .string("Name", $name),
+                .string("Image", $image),
+                .checkbox("ShowIconMomo", $showIconMomo),
+                .checkbox("ShowIconSupport", $showIconSupport),
+            ]
+        )
     }
 }
-#endif

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/BadgeDemo.swift

@@ -2,268 +2,74 @@
 //  BadgeDemo.swift
 //  Example
 //
-//  Created by sophia on 12/5/25.
+//  Preview + Playground demo for Badge / BadgeDot / BadgeRibbon.
 //
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - BadgeDemo
-
 struct BadgeDemo: View {
-    // MARK: Internal
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { BadgePreview() }, playground: { BadgePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
+// MARK: - Preview
+
+private struct BadgePreview: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                // MARK: - Basic Badges
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Basic Badges")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge()
-                                Text("Default")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "9")
-                                Text("Single Digit")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "99")
-                                Text("Two Digits")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "999")
-                                Text("99+ Format")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge(label: "New")
-                                Text("Text Label")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "Hot", backgroundColor: Colors.pink03)
-                                Text("Custom Color")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "5", backgroundColor: Colors.green03)
-                                Text("Green Badge")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Dots
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Dots")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    HStack(spacing: 32) {
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .small)
-                            Text("Small")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                        
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .large)
-                            Text("Large")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Ribbons
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Ribbons")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 20) {
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomLeft, label: "Bottom Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomRight, label: "Bottom Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge in Context (Real Usage Examples)
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Real Usage Examples")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        // Notification with badge
-                        HStack {
-                            Image(systemName: "bell.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Notifications")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "23")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Message with badge
-                        HStack {
-                            Image(systemName: "message.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Messages")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "5")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Product card with ribbon
-                        ZStack(alignment: .topTrailing) {
-                            VStack(alignment: .leading, spacing: 8) {
-                                Rectangle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(height: 120)
-                                    .cornerRadius(8)
-                                
-                                Text("Product Name")
-                                    .font(.headline)
-                                
-                                Text("$99.99")
-                                    .font(.subheadline)
-                                    .foregroundColor(.gray)
-                            }
-                            .padding()
-                            .background(Color(.systemGray6))
-                            .cornerRadius(12)
-                            
-                            BadgeRibbon(position: .topRight, label: "NEW")
-                                .frame(width: 60, height: 40)
-                                .offset(x: 5, y: 0)
-                        }
-                        
-                        // Profile with dot indicator
-                        HStack {
-                            ZStack(alignment: .topTrailing) {
-                                Circle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(width: 50, height: 50)
-                                
-                                BadgeDot(size: .small)
-                                    .offset(x: 2, y: 2)
-                            }
-                            
-                            VStack(alignment: .leading) {
-                                Text("User Name")
-                                    .font(.headline)
-                                Text("Online")
-                                    .font(.caption)
-                                    .foregroundColor(Colors.green03)
-                            }
-                            
-                            Spacer()
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                    }
-                    .padding(.horizontal, 16)
-                }
+        BasicColumnBox("Basic Badges", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                Badge()
+                Badge(label: "9")
+                Badge(label: "99")
+                Badge(label: "999")
+            }
+            HStack(spacing: Spacing.L) {
+                Badge(label: "New")
+                Badge(label: "Hot", backgroundColor: Colors.pink03)
+                Badge(label: "5", backgroundColor: Colors.green03)
+            }
+        }
+
+        BasicColumnBox("Badge Dots", alignment: .leading) {
+            HStack(spacing: Spacing.XL) {
+                BadgeDot(size: .small)
+                BadgeDot(size: .large)
+            }
+        }
+
+        BasicColumnBox("Badge Ribbons", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
+                    .frame(width: 150, height: 30)
+                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
+                    .frame(width: 150, height: 30)
             }
-            .padding(.vertical, 16)
         }
     }
 }
 
-// MARK: - Preview
+// MARK: - Playground
 
-#if DEBUG
-struct BadgeDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        BadgeDemo()
+@available(iOS 16.0, *)
+private struct BadgePlayground: View {
+    @State private var label = "New"
+    @State private var color: PlaygroundOption? = playgroundColors.first { $0.key == "pink03" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Badge(label: label, backgroundColor: color?.value as? Color)
+            },
+            params: [
+                .string("Label", $label),
+                .color("BackgroundColor", playgroundColors, $color),
+            ]
+        )
     }
 }
-#endif