@momo-kits/native-kits 0.167.1-duo.8 → 0.167.1-duo.9-debug

package/ios-demo/README.md

@@ -0,0 +1,120 @@
+# MoMoUIKitsDemo
+
+SwiftUI demo browser for `MoMoUIKits`.
+
+The package can optionally host a Compose UIKits screen by receiving a
+`UIViewController` factory from the host app. It does not import the KMP
+`shared` module directly.
+
+SwiftUI mode reuses the full demo screen set from
+`sample/iosApp/iosApp/Demo`, including the sample `HomeView` registry and demo
+screens for all currently available components.
+
+## CocoaPods
+
+In the host app `Podfile`, include both local pods:
+
+```ruby
+pod 'MoMoUIKits', :path => '../momo-native-kits/ios/native-kits.podspec'
+pod 'MoMoUIKitsDemo', :path => '../momo-native-kits/ios-demo'
+```
+
+Adjust the relative paths to match the host app checkout.
+
+## Host App Usage
+
+```swift
+import MoMoUIKitsDemo
+import shared
+
+class UIKitsViewController: BaseComposeAppViewController {
+  override func getViewController() -> UIViewController? {
+    let params = self.application.data as? [String: Any]
+
+    return MoMoUIKitsDemoViewControllerFactory.make(
+      context: MoMoUIKitsDemoContext(
+        appId: params?["appId"] as? String ?? "",
+        appCode: params?["code"] as? String ?? "",
+        appName: params?["name"] as? String,
+        appIcon: params?["icon"] as? String ?? ""
+      ),
+      composeViewController: {
+        UIKitsScreenComposeViewControllerKt.UIKitsScreenComposeViewController(
+          params: params
+        )
+      }
+    )
+  }
+
+  override func viewDidDisappear(_ animated: Bool) {
+    super.viewDidDisappear(animated)
+    composeViewController = nil
+  }
+}
+```
+
+If the host does not pass `composeViewController`, the demo opens directly in
+SwiftUI mode.
+
+## Included SwiftUI Demos
+
+The pod includes the sample demo screens for:
+
+- Animated Header
+- Avatar
+- Badge
+- Baseline View
+- Bottom Tab
+- Button
+- Carousel
+- Checkbox
+- Chip
+- Collapse
+- DateTimePicker
+- Divider
+- Header User
+- Icon Button
+- Image
+- Information
+- Input
+- Input DropDown
+- Input Money
+- Input OTP
+- Input Phone Number
+- Input Search
+- Input TextArea
+- Loader
+- Navigation
+- Pagination
+- Popup Display
+- Popup Notify
+- Popup Promotion
+- Progress Info
+- Radio
+- Rating
+- Skeleton
+- Slider
+- SnackBar
+- Stepper
+- Steps
+- Suggest Action
+- Swipe
+- Switch
+- TabView
+- Tag
+- Theme
+- Title
+- Tooltip
+- Typography
+- Uploader
+
+## Validation Notes
+
+Validated locally with:
+
+```sh
+pod ipc spec ios/MoMoUIKits.podspec
+pod ipc spec ios-demo/MoMoUIKitsDemo.podspec
+pod lib lint ios/MoMoUIKits.podspec --allow-warnings --skip-import-validation
+pod lib lint ios-demo/MoMoUIKitsDemo.podspec --allow-warnings --skip-import-validation --include-podspecs=ios/MoMoUIKits.podspec
+```

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

@@ -25,7 +25,7 @@ struct ContentView: View {
 
 struct ScreenDemo: View {
     var body: some View {
-        Screen (
+        StackScreen(
 //            backgroundColor: Colors.blue01,
             headerTransparent: true,
             isBack: true,

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

@@ -4,7 +4,7 @@
 //
 //  Usage demo for the navigation flow. Mirrors Compose's `NavigationUsage`:
 //  exercises push / present / replace / reset, the modal & bottom-sheet
-//  overplays, the snack bar, the user header title and the bottom-tab layout.
+//  overplays, the snack bar, the header titles, runtime options and the bottom-tab layout.
 //
 
 import MoMoUIKits
@@ -149,6 +149,52 @@ private struct NavigationDemoContent: View {
                     )
                 }
 
+                row("Header Location Title") {
+                    navigator.push(
+                        { DemoLeafScreen(title: "Location title", color: Colors.blue09) },
+                        options: NavigationOptions(
+                            headerTitle: .location(
+                                HeaderLocationData(description: "Deliver to", location: "123 Nguyen Hue, District 1", onPress: { print("location") })
+                            )
+                        )
+                    )
+                }
+
+                row("Header Journey Title") {
+                    navigator.push(
+                        { DemoLeafScreen(title: "Journey title", color: Colors.pink09) },
+                        options: NavigationOptions(
+                            headerTitle: .journey(
+                                HeaderJourneyData(start: "Ho Chi Minh", end: "Ha Noi", description: "Mon, 12/10 · 1 adult", icon: "16_arrow_chevron_right", onPress: { print("journey") })
+                            )
+                        )
+                    )
+                }
+
+                row("Update Options At Runtime") {
+                    navigator.push(
+                        { UpdateOptionsScreen() },
+                        options: NavigationOptions(title: "Before update")
+                    )
+                }
+
+                row("Bottom Sheet With Footer") {
+                    navigator.showBottomSheet({
+                        VStack(spacing: 12) {
+                            ForEach(0..<6, id: \.self) { i in
+                                MomoText("Bottom sheet row \(i + 1)")
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+                            }
+                        }
+                        .padding(Spacing.L)
+                    }, header: .title("Footer"), draggable: false, footer: {
+                        AnyView(
+                            MoMoUIKits.Button(title: "Confirm", action: { navigator.hideOverplay() }, type: .primary, size: .large)
+                                .padding(.horizontal, Spacing.M)
+                        )
+                    })
+                }
+
                 row("Header Animated") {
                     navigator.push(
                         { AnimatedHeaderDemoContent() },
@@ -177,6 +223,36 @@ private struct NavigationDemoContent: View {
 
 // MARK: - Leaf / presented screens
 
+/// A screen changing its own header and footer after it is shown (Compose `LocalNavigation`).
+@available(iOS 16.0, *)
+private struct UpdateOptionsScreen: View {
+    @EnvironmentObject private var navigation: Navigation
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        VStack(spacing: 16) {
+            MoMoUIKits.Button(title: "Change title", action: {
+                navigation.setOptions { $0.title = "Updated at \(Date().formatted(date: .omitted, time: .standard))" }
+            }, type: .primary, size: .large)
+            MoMoUIKits.Button(title: "Add footer", action: {
+                navigation.setOptions {
+                    $0.footer = { AnyView(MoMoUIKits.Button(title: "Footer action", action: {}, type: .primary, size: .large)) }
+                }
+            }, type: .secondary, size: .large)
+            MoMoUIKits.Button(title: "Show snack bar above the footer", action: {
+                navigator.showSnackBar(.custom(duration: 2.0) {
+                    MomoText("Snack bar", color: Colors.black01)
+                        .frame(maxWidth: .infinity, minHeight: 48)
+                        .background(Colors.black17)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+                        .padding(.horizontal, Spacing.M)
+                })
+            }, type: .secondary, size: .large)
+        }
+        .padding(16)
+    }
+}
+
 @available(iOS 16.0, *)
 private struct DemoLeafScreen: View {
     @EnvironmentObject private var navigator: Navigator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.8",
+  "version": "0.167.1-duo.9-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/settings.gradle.kts

@@ -0,0 +1,64 @@
+import org.gradle.kotlin.dsl.maven
+
+rootProject.name = "momo-native-kits"
+enableFeaturePreview("TYPESAFE_PROJECT_ACCESSORS")
+
+pluginManagement {
+    repositories {
+        google {
+            mavenContent {
+                includeGroupAndSubgroups("androidx")
+                includeGroupAndSubgroups("com.android")
+                includeGroupAndSubgroups("com.google")
+            }
+        }
+        mavenCentral()
+        gradlePluginPortal()
+        maven {
+            url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
+            credentials {username = "download_packages"; password = "gldt-bjDqLpU_sPcHDuXau2ws" }
+        }
+        maven {
+            url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
+            credentials {
+                username = "viewer"
+                password = "viewer"
+            }
+            isAllowInsecureProtocol = true
+        }
+    }
+}
+
+dependencyResolutionManagement {
+    repositories {
+        google {
+            mavenContent {
+                includeGroupAndSubgroups("androidx")
+                includeGroupAndSubgroups("com.android")
+                includeGroupAndSubgroups("com.google")
+            }
+        }
+        mavenCentral()
+        maven { url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev") }
+        maven {
+            url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
+            credentials {
+                username = "download_packages";
+                password = "gldt-bjDqLpU_sPcHDuXau2ws"
+            }
+        }
+        maven {
+            url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
+            credentials {
+                username = "viewer"
+                password = "viewer"
+            }
+            isAllowInsecureProtocol = true
+        }
+    }
+}
+
+include(":compose")
+
+include(":sample:androidApp")
+include(":sample:shared")

package/ios/Application/HeaderRight.swift

@@ -1,324 +0,0 @@
-import SwiftUI
-import Foundation
-
-public struct HeaderRightData {
-    var useShortcut: Bool
-    var useMore: Bool
-    var tools: [ToolGroup]
-    var toolCallback: ((String) -> Void)?
-    var useSystemTools: Bool
-    var useCloseIcon: Bool
-    
-    public init(
-        useShortcut: Bool = false,
-        useMore: Bool = false,
-        tools: [ToolGroup] = [],
-        toolCallback: ((String) -> Void)? = nil,
-        useSystemTools: Bool = true,
-        useCloseIcon: Bool = false
-    ) {
-        self.useShortcut = useShortcut
-        self.useMore = useMore
-        self.tools = tools
-        self.toolCallback = toolCallback
-        self.useSystemTools = useSystemTools
-        self.useCloseIcon = useCloseIcon
-    }
-
-    /// Close-circle instead of home, as RN `headerRight.useCloseIcon`.
-    var closeIcon: String { useCloseIcon ? "16_navigation_close_circle" : "16_basic_home" }
-}
-
-/// The Help Center mini-app hides its own help-center button.
-func showsHelpCenter(_ context: MiniAppContext?) -> Bool {
-    context?.appId != "vn.momo.helpcenter"
-}
-
-public struct Tool {
-    var key: String
-    var icon: String
-    var showBadge: Bool
-    var name: [String: String]
-    var showRightIcon: Bool
-    
-    public init(
-        key: String,
-        icon: String,
-        name: [String: String] = [:],
-        showBadge: Bool = false,
-        showRightIcon: Bool = true
-    ) {
-        self.key = key
-        self.icon = icon
-        self.showBadge = showBadge
-        self.name = name
-        self.showRightIcon = showRightIcon
-    }
-    
-    func toMap() -> [String: Any] {
-        return [
-            "key": key,
-            "icon": icon,
-            "showBadge": showBadge,
-            "name": name,
-            "showRightIcon": showRightIcon
-        ]
-    }
-}
-
-public struct ToolGroup {
-    var title: [String: String]
-    var items: [Tool]
-    
-    public init(
-        title: [String: String] = [:],
-        items: [Tool]
-    ) {
-        self.title = title
-        self.items = items
-    }
-    
-    func toMap() -> [String: Any] {
-        return [
-            "title": title,
-            "items": items.map { $0.toMap() }
-        ]
-    }
-}
-
-struct NavigationButtonConfig {
-    let icon: String
-    let onPress: () -> Void
-}
-
-// MARK: - Components
-public struct HeaderRight: View {
-    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
-        self.headerRight = headerRight
-        self.tintColor = tintColor
-    }
-    var headerRight: HeaderRightData?
-    var tintColor: Color? = nil
-    
-    public var body: some View {
-        HStack(alignment: .center) {
-            ToolkitHeaderRight(headerRight: headerRight, tintColor: tintColor)
-        }
-    }
-}
-
-struct ToolkitHeaderRight: View {
-    var headerRight: HeaderRightData?
-    var tintColor: Color?
-    @State private var isFavorite: Bool = false
-    @State private var isLoading: Bool = false
-    // Legacy hosts inject with `.environmentObject`, containers with the keyed value; outside
-    // both this used to trap, so read the object optionally and fall back to the keyed one.
-    @OptionalEnvironmentObject private var injectedEnvironment: ApplicationEnvironment?
-    @Environment(\.applicationEnvironment) private var keyedEnvironment
-
-    private var environment: ApplicationEnvironment { injectedEnvironment ?? keyedEnvironment }
-
-    // MARK: - Actions
-    private func onPressShortcut() {
-        // onToolAction needs the app context (appId/code) so the host knows which app to (un)favorite;
-        // without it the favorite is a no-op. Mirrors onPressMore below and the Compose HeaderRight.
-        let context = environment.applicationContext
-        environment.composeApi?.request(
-            funcName: "onToolAction",
-            params: [
-                "item": ["key": "onFavorite"],
-                "context": [
-                    "appId": context?.appId,
-                    "code": context?.appCode,
-                    "name": context?.appName,
-                    "icon": context?.appIcon,
-                    "description": context?.description,
-                    "support": context?.support,
-                    "toolkitConfig": context?.toolkitConfig,
-                    "providerId": context?.providerId,
-                    "permissions": context?.permissions
-                ]
-            ]
-        ) { _ in
-            isFavorite.toggle()
-        }
-    }
-    
-    private func onPressHelpCenter() {
-        let context = environment.applicationContext
-        let paramMap: [String: Any] = [
-            "appId": context?.appId,
-            "code": context?.appCode,
-            "name": context?.appName,
-            "icon": context?.appIcon,
-            "description": context?.description
-        ]
-        environment.composeApi?.request(
-            funcName: "showHelpCenter",
-            params: paramMap
-        ) { _ in }
-    }
-    
-    private func onPressClose() {
-        environment.composeApi?.request(
-            funcName: "dismissAll",
-            params: ""
-        ) { _ in }
-    }
-    
-    private func onPressMore() {
-        let context = environment.applicationContext
-        let params: [String: Any] = [
-            "useSystemTools": headerRight?.useSystemTools,
-            "tools": headerRight?.tools.map { $0.toMap() } ?? [],
-            "context": [
-                "appId": context?.appId,
-                "code": context?.appCode,
-                "name": context?.appName,
-                "icon": context?.appIcon,
-                "description": context?.description,
-                "support": context?.support,
-                "toolkitConfig": context?.toolkitConfig,
-                "providerId": context?.providerId,
-                "permissions": context?.permissions
-            ]
-        ]
-        environment.composeApi?.request(
-            funcName: "showTools",
-            params: params
-        ) { response in
-            do {
-                if let jsonData = response.data(using: .utf8),
-                   let json = try JSONSerialization.jsonObject(with: jsonData) as? [String: Any],
-                   let toolResponse = json["response"] as? String {
-                    headerRight?.toolCallback?(toolResponse)
-                }
-            } catch {
-                print("Error parsing response:", error)
-            }
-        }
-    }
-    
-    // Load the current favorite state on appear so the star reflects reality; without this the button
-    // always renders "not favorited" until the user taps it. Mirrors the Compose LaunchedEffect.
-    private func loadFavoriteState() {
-        let context = environment.applicationContext
-        environment.composeApi?.request(
-            funcName: "isFavoriteApp",
-            params: ["code": context?.appCode]
-        ) { response in
-            guard let data = response.data(using: .utf8),
-                  let json = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
-                return
-            }
-            isFavorite = (json["response"] as? Bool) ?? false
-        }
-    }
-
-    private func getNavigationButtonConfig() -> NavigationButtonConfig {
-        let totalTools = headerRight?.tools.reduce(0) { $0 + $1.items.count } ?? 0
-        var icon = isFavorite ? "pin_star_checked" : "pin_star"
-        var onClickHandler: () -> Void = onPressShortcut
-        
-        if totalTools > 1 || headerRight?.useMore == true {
-            icon = "navigation_more_icon"
-            onClickHandler = onPressMore
-        } else if totalTools == 1, let singleTool = headerRight?.tools.first?.items.first {
-            icon = singleTool.icon
-            onClickHandler = {
-                headerRight?.toolCallback?(singleTool.key)
-            }
-        }
-        
-        return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
-    }
-    
-    var body: some View {
-        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
-        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
-        let navButtonConfig = getNavigationButtonConfig()
-        let showBadge = headerRight?.tools.contains { group in
-            group.items.contains { $0.showBadge }
-        } ?? false
-        
-        HStack(alignment: .center, spacing: 0) {
-            if headerRight?.useShortcut == true {
-                NavigationButton(
-                    disabled: isLoading,
-                    icon: navButtonConfig.icon,
-                    showBadge: showBadge,
-                    onClick: navButtonConfig.onPress,
-                    tintColor: tintColor
-                )
-            }
-            
-            HStack(alignment: .center, spacing: 0) {
-                if showsHelpCenter(environment.applicationContext) {
-                    Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
-                        .padding(4)
-                        .onTapGesture {
-                            onPressHelpCenter()
-                        }
-
-                    Rectangle()
-                        .fill(tintColor ?? Colors.black20)
-                        .frame(width: 0.5, height: 12)
-                }
-
-                Icon(source: headerRight?.closeIcon ?? "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
-                    .padding(4)
-                    .onTapGesture {
-                        onPressClose()
-                    }
-            }
-            .frame(width: 65, height: 28)
-            .background(backgroundButtonColor)
-            .cornerRadius(14)
-            .overlay(
-                RoundedRectangle(cornerRadius: 14)
-                    .stroke(borderColor, lineWidth: 0.2)
-            )
-            .padding(.leading, Spacing.S)
-        }
-        .onAppear {
-            loadFavoriteState()
-        }
-    }
-}
-
-struct NavigationButton: View {
-    var disabled: Bool
-    var icon: String
-    var showBadge: Bool
-    var onClick: () -> Void
-    var tintColor: Color?
-    
-    var body: some View {
-        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
-        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
-        
-        ZStack {
-            Circle()
-                .fill(backgroundButtonColor)
-                .overlay(
-                    Circle()
-                        .stroke(borderColor, lineWidth: 0.2)
-                )
-            
-            Icon(source: icon, size: 16, color: tintColor)
-            
-            if showBadge {
-                BadgeDot(size: .small)
-                    .offset(x: -2, y: -2)
-                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
-            }
-        }
-        .frame(width: 28, height: 28)
-        .onTapGesture {
-            if !disabled {
-                onClick()
-            }
-        }
-    }
-}

package/ios/Application/Navigation/HeaderBackProps.swift

@@ -1,66 +0,0 @@
-//
-//  HeaderBackProps.swift
-//  MoMoUIKits
-//
-//  SwiftUI mirror of Compose's `HeaderBackProps` + `PopupNotifyProps`/`PopupAction`.
-//  When `preventBack` is set, `Navigator.onBackSafe` shows a confirm popup
-//  before actually leaving the screen — same behavior as Compose.
-//
-
-import SwiftUI
-
-/// Mirrors Compose's `PopupAction` (a titled button with an optional handler).
-public struct PopupAction {
-    public let title: String
-    public let onPress: (() -> Void)?
-
-    public init(title: String, onPress: (() -> Void)? = nil) {
-        self.title = title
-        self.onPress = onPress
-    }
-}
-
-/// Mirrors Compose's `PopupNotifyProps` as consumed by `headerBackProps.preventBack`.
-public struct PreventBackProps {
-    public var image: String
-    public var title: String
-    public var description: String
-    public var error: String
-    public var primary: PopupAction?
-    public var secondary: PopupAction?
-    public var buttonDirection: PopupButtonDirection
-    public var isShowCloseIcon: Bool
-    public var onIconClose: (() -> Void)?
-
-    public init(
-        image: String = "",
-        title: String = "",
-        description: String = "",
-        error: String = "",
-        primary: PopupAction? = nil,
-        secondary: PopupAction? = nil,
-        buttonDirection: PopupButtonDirection = .row,
-        isShowCloseIcon: Bool = true,
-        onIconClose: (() -> Void)? = nil
-    ) {
-        self.image = image
-        self.title = title
-        self.description = description
-        self.error = error
-        self.primary = primary
-        self.secondary = secondary
-        self.buttonDirection = buttonDirection
-        self.isShowCloseIcon = isShowCloseIcon
-        self.onIconClose = onIconClose
-    }
-}
-
-/// Mirrors Compose's `HeaderBackProps`.
-public struct HeaderBackProps {
-    /// When non-nil, a confirm popup is shown before the back navigation runs.
-    public var preventBack: PreventBackProps?
-
-    public init(preventBack: PreventBackProps? = nil) {
-        self.preventBack = preventBack
-    }
-}