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

package/ios/Navigation/Component/HeaderLocation.swift

@@ -0,0 +1,48 @@
+//
+//  HeaderLocation.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/HeaderLocation.kt`: a description above a
+//  tappable location with a chevron.
+//
+
+import SwiftUI
+
+public struct HeaderLocationView: View {
+    private let data: HeaderLocationData
+    private let tintColor: Color
+
+    public init(_ data: HeaderLocationData, tintColor: Color) {
+        self.data = data
+        self.tintColor = tintColor
+    }
+
+    @Environment(\.screenLayout) private var layout
+
+    public var body: some View {
+        if data.isLoading {
+            VStack(alignment: .leading, spacing: Spacing.XXS) {
+                titleSkeleton(height: 12)
+                titleSkeleton(height: 18)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+        } else {
+            let tint = parseHeaderTint(data.tintColor) ?? tintColor
+            SwiftUI.Button(action: { data.onPress?() }) {
+                VStack(alignment: .leading, spacing: 0) {
+                    if let description = data.description, !description.isEmpty {
+                        MomoText(description, typography: .descriptionXsRegular, color: tint, maxLines: 1)
+                    }
+                    HStack(spacing: 0) {
+                        MomoText(data.location, typography: .actionXsBold, color: tint, maxLines: 1)
+                        Spacer().frame(width: Spacing.XS)
+                        Icon(source: "16_arrow_chevron_down_small", size: 16, color: tint)
+                    }
+                }
+                .frame(maxWidth: headerTitleMaxWidth(layout), alignment: .leading)
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+            .disabled(data.onPress == nil)
+        }
+    }
+}

package/ios/Navigation/Component/HeaderRight.swift

@@ -0,0 +1,386 @@
+//
+//  HeaderRight.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/HeaderRight.kt`: the mini-app toolkit
+//  (shortcut / more / single tool, help center and close) in the bar or the iPhone Duo side bar.
+//
+
+import SwiftUI
+
+/// Mirrors Compose's `HeaderRight.Toolkit`.
+public struct HeaderRightData {
+    var useShortcut: Bool
+    var useMore: Bool
+    var tools: [ToolGroup]
+    var toolCallback: ((String) -> Void)?
+    var useSystemTools: Bool
+    /// Close dismisses only this mini app instead of returning home.
+    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
+    }
+
+    var closeIcon: String { useCloseIcon ? "16_navigation_close_circle" : "16_basic_home" }
+
+    var showBadge: Bool { tools.contains { group in group.items.contains { $0.showBadge } } }
+}
+
+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] {
+        [
+            "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] {
+        [
+            "title": title,
+            "items": items.map { $0.toMap() }
+        ]
+    }
+}
+
+private let helpCenterAppId = "vn.momo.helpcenter"
+
+/// The Help Center mini app hides its own help button; without a context there is nothing to open.
+private func usesHelpCenter(_ context: MiniAppContext?) -> Bool {
+    guard let context else { return false }
+    return context.appId != helpCenterAppId
+}
+
+private func showsShortcut(_ data: HeaderRightData, _ context: MiniAppContext?) -> Bool {
+    data.useShortcut && !(data.useMore && context == nil)
+}
+
+/// Height of the vertical toolkit: the optional shortcut, then the help/home capsule.
+func toolkitColumnHeight(_ data: HeaderRightData, context: MiniAppContext?) -> CGFloat {
+    let shortcut = showsShortcut(data, context) ? DuoMetrics.controlSize + Spacing.M : 0
+    return shortcut + (usesHelpCenter(context) ? 2 * DuoMetrics.itemPitch : DuoMetrics.controlSize)
+}
+
+/// A header right that renders the kit toolkit, so the Duo side bar can take it over.
+protocol ToolkitHeaderRightView {
+    var headerRight: HeaderRightData? { get }
+    var tintColor: Color? { get }
+}
+
+/// Toolkit data when `headerRight` renders the kit toolkit; nil for a custom header right.
+func toolkitHeaderRight(_ headerRight: (() -> any View)?) -> (data: HeaderRightData?, tintColor: Color?)? {
+    guard let toolkit = headerRight?() as? ToolkitHeaderRightView else { return nil }
+    return (toolkit.headerRight, toolkit.tintColor)
+}
+
+// MARK: - Public views
+
+/// The kit toolkit. Works under `NavigationContainer` (keyed environment) and under hosts that
+/// inject `ApplicationEnvironment` with `.environmentObject`.
+public struct HeaderRight: View, ToolkitHeaderRightView {
+    var headerRight: HeaderRightData?
+    var tintColor: Color?
+
+    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
+        self.headerRight = headerRight
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        Toolkit(headerRight: headerRight ?? HeaderRightData(), tintColor: tintColor)
+    }
+}
+
+@available(*, deprecated, renamed: "HeaderRight", message: "HeaderRight now reads both environment styles.")
+public struct NavigationHeaderRight: View, ToolkitHeaderRightView {
+    var headerRight: HeaderRightData?
+    var tintColor: Color?
+
+    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
+        self.headerRight = headerRight
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        Toolkit(headerRight: headerRight ?? HeaderRightData(), tintColor: tintColor)
+    }
+}
+
+// MARK: - Toolkit
+
+private struct NavigationButtonConfig {
+    let icon: String
+    let onPress: () -> Void
+}
+
+struct Toolkit: View {
+    let headerRight: HeaderRightData
+    var tintColor: Color?
+    /// iPhone Duo side bar column instead of the bar row.
+    var vertical: Bool = false
+
+    @State private var isFavorite = false
+    @State private var isLoading = false
+    @OptionalEnvironmentObject private var injectedEnvironment: ApplicationEnvironment?
+    @Environment(\.applicationEnvironment) private var keyedEnvironment
+    @Environment(\.headerColor) private var barColor
+
+    private var environment: ApplicationEnvironment { injectedEnvironment ?? keyedEnvironment }
+    private var context: MiniAppContext? { environment.applicationContext }
+
+    /// The bar's colors when inside a header, otherwise derived from the tint like a plain header.
+    private var headerColor: HeaderColor {
+        barColor ?? getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: tintColor)
+    }
+
+    private func apiValue(_ value: Any?) -> Any { value ?? NSNull() }
+
+    private var contextMap: [String: Any] {
+        [
+            "appId": apiValue(context?.appId),
+            "code": apiValue(context?.appCode),
+            "name": apiValue(context?.appName),
+            "icon": apiValue(context?.appIcon),
+            "description": apiValue(context?.description),
+            "support": apiValue(context?.support),
+            "toolkitConfig": apiValue(context?.toolkitConfig),
+            "providerId": apiValue(context?.providerId),
+            "permissions": apiValue(context?.permissions)
+        ]
+    }
+
+    private func parseResponse(_ response: String) -> Any? {
+        guard let data = response.data(using: .utf8),
+              let json = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else {
+            return nil
+        }
+        return json["response"]
+    }
+
+    // MARK: Actions
+
+    private func loadFavoriteState() {
+        _ = environment.composeApi?.request(
+            funcName: "isFavoriteApp",
+            params: ["code": apiValue(context?.appCode)]
+        ) { response in
+            isFavorite = parseResponse(response) as? Bool == true
+        }
+    }
+
+    private func onPressShortcut() {
+        _ = environment.composeApi?.request(
+            funcName: "onToolAction",
+            params: ["item": ["key": "onFavorite"], "context": contextMap]
+        ) { response in
+            if let result = parseResponse(response) as? [String: Any], result["success"] as? Bool == true {
+                isFavorite.toggle()
+            }
+        }
+    }
+
+    private func onPressMore() {
+        _ = environment.composeApi?.request(
+            funcName: "showTools",
+            params: [
+                "useSystemTools": headerRight.useSystemTools,
+                "tools": headerRight.tools.map { $0.toMap() },
+                "context": contextMap
+            ]
+        ) { response in
+            if let tool = parseResponse(response) as? String {
+                headerRight.toolCallback?(tool)
+            }
+        }
+    }
+
+    private func onPressHelpCenter() {
+        guard context != nil else { return }
+        _ = environment.composeApi?.request(
+            funcName: "showHelpCenter",
+            params: [
+                "appId": apiValue(context?.appId),
+                "code": apiValue(context?.appCode),
+                "name": apiValue(context?.appName),
+                "icon": apiValue(context?.appIcon),
+                "description": apiValue(context?.description)
+            ]
+        ) { _ in }
+    }
+
+    private func onPressClose() {
+        if headerRight.useCloseIcon {
+            environment.requestDismiss()
+        } else {
+            _ = environment.composeApi?.request(funcName: "dismissAll", params: nil) { _ in }
+        }
+    }
+
+    private var navigationButtonConfig: NavigationButtonConfig {
+        let totalTools = headerRight.tools.reduce(0) { $0 + $1.items.count }
+        if totalTools > 1 || headerRight.useMore {
+            return NavigationButtonConfig(icon: "navigation_more_icon", onPress: onPressMore)
+        }
+        if totalTools == 1, let tool = headerRight.tools.first?.items.first {
+            return NavigationButtonConfig(icon: tool.icon) { headerRight.toolCallback?(tool.key) }
+        }
+        return NavigationButtonConfig(icon: isFavorite ? "pin_star_checked" : "pin_star", onPress: onPressShortcut)
+    }
+
+    // MARK: Body
+
+    var body: some View {
+        Group {
+            if vertical {
+                verticalBody
+            } else {
+                horizontalBody
+            }
+        }
+        .onAppear(perform: loadFavoriteState)
+    }
+
+    private var verticalBody: some View {
+        let config = navigationButtonConfig
+        let useHelpCenter = usesHelpCenter(context)
+        return VStack(spacing: Spacing.M) {
+            if showsShortcut(headerRight, context) {
+                SideBarButton(
+                    icon: config.icon,
+                    headerColor: headerColor,
+                    showBadge: headerRight.showBadge,
+                    disabled: isLoading,
+                    action: config.onPress
+                )
+            }
+            SideBarGroup(headerColor: headerColor, itemCount: useHelpCenter ? 2 : 1) {
+                if useHelpCenter {
+                    SideBarGroupItem(
+                        icon: "help_center",
+                        headerColor: headerColor,
+                        accessibilityId: "btn_navigation_help_center",
+                        action: onPressHelpCenter
+                    )
+                }
+                SideBarGroupItem(
+                    icon: headerRight.closeIcon,
+                    headerColor: headerColor,
+                    accessibilityId: "btn_navigation_close",
+                    action: onPressClose
+                )
+            }
+        }
+    }
+
+    private var horizontalBody: some View {
+        let config = navigationButtonConfig
+        return HStack(alignment: .center, spacing: 0) {
+            if showsShortcut(headerRight, context) {
+                NavigationButton(
+                    disabled: isLoading,
+                    icon: config.icon,
+                    showBadge: headerRight.showBadge,
+                    headerColor: headerColor,
+                    onClick: config.onPress
+                )
+            }
+
+            HStack(alignment: .center, spacing: 0) {
+                if usesHelpCenter(context) {
+                    toolButton(icon: "help_center", accessibilityId: "btn_navigation_help_center", action: onPressHelpCenter)
+                    Rectangle()
+                        .fill(tintColor ?? Colors.black20)
+                        .frame(width: 0.5, height: 12)
+                }
+                toolButton(icon: headerRight.closeIcon, accessibilityId: "btn_navigation_close", action: onPressClose)
+            }
+            .frame(width: 65, height: 28)
+            .background(headerColor.backgroundButton)
+            .cornerRadius(14)
+            .overlay(RoundedRectangle(cornerRadius: 14).stroke(headerColor.borderColor, lineWidth: 0.2))
+            .padding(.leading, Spacing.S)
+        }
+    }
+
+    private func toolButton(icon: String, accessibilityId: String, action: @escaping () -> Void) -> some View {
+        SwiftUI.Button(action: action) {
+            Icon(source: icon, size: 20, color: headerColor.tintIconColor)
+                .padding(4)
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .accessibilityIdentifier(accessibilityId)
+    }
+}
+
+/// Mirrors Compose's `NavigationButton`: the 28pt circular shortcut / more button.
+struct NavigationButton: View {
+    var disabled: Bool
+    var icon: String
+    var showBadge: Bool
+    var headerColor: HeaderColor
+    var onClick: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onClick) {
+            ZStack {
+                Circle()
+                    .fill(headerColor.backgroundButton)
+                    .overlay(Circle().stroke(headerColor.borderColor, lineWidth: 0.2))
+                Icon(source: icon, size: 20, color: headerColor.tintIconColor)
+            }
+            .frame(width: 28, height: 28)
+            .overlay(alignment: .topTrailing) {
+                if showBadge {
+                    BadgeDot(size: .small).offset(x: -Spacing.XXS, y: -Spacing.XXS)
+                }
+            }
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
+    }
+}

package/ios/Navigation/Component/HeaderTitle.swift

@@ -0,0 +1,36 @@
+//
+//  HeaderTitle.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/HeaderTitle.kt`: the plain header title.
+//
+
+import SwiftUI
+
+/// `actionSBold` at 15/22 in the header family, single line.
+struct HeaderTitleText: View {
+    let title: String
+    let color: Color
+    var centered: Bool = false
+
+    init(_ title: String, color: Color, centered: Bool = false) {
+        self.title = title
+        self.color = color
+        self.centered = centered
+    }
+
+    var body: some View {
+        MomoText(
+            title,
+            typography: .actionSBold,
+            color: color,
+            textAlign: centered ? .center : .leading,
+            maxLines: 1,
+            truncationMode: .tail,
+            accessibilityId: "title_navigation_header",
+            fontFamily: headerFontFamily
+        )
+        .fontSize(15, lineHeight: 22)
+        .frame(maxWidth: centered ? .infinity : nil, alignment: centered ? .center : .leading)
+    }
+}

package/ios/{Application/Navigation → Navigation/Component}/HeaderUser.swift

@@ -2,7 +2,7 @@
 //  HeaderUser.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `HeaderUser` (navigation/component/HeaderUser.kt).
+//  SwiftUI mirror of Compose's `navigation/component/HeaderUser.kt`.
 //  Renders a `HeaderTitle.User`: an avatar group (1..n avatars with overflow),
 //  a title with optional inline icons, and an optional subtitle. Shows a
 //  skeleton shimmer placeholder while `isLoading`.
@@ -21,11 +21,6 @@ public struct HeaderUserView: View {
 
     @Environment(\.screenLayout) private var layout
 
-    // back button and toolkit share the bar unless the iPhone Duo side bar holds them
-    private var maxWidth: CGFloat {
-        layout.sideBar != nil ? layout.contentWidth - Spacing.M * 2 : layout.width - 172
-    }
-
     public var body: some View {
         if data.isLoading {
             shimmer
@@ -35,6 +30,14 @@ public struct HeaderUserView: View {
     }
 
     private var content: some View {
+        SwiftUI.Button(action: { data.onPress?() }) {
+            row
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(data.onPress == nil)
+    }
+
+    private var row: some View {
         HStack(spacing: 0) {
             HStack(spacing: 0) {
                 ZStack(alignment: .bottomTrailing) {
@@ -51,8 +54,7 @@ public struct HeaderUserView: View {
 
                 VStack(alignment: .leading, spacing: 0) {
                     HStack(spacing: 0) {
-                        MomoText(data.title, typography: .actionXsBold, color: data.tintColor ?? Colors.black17, maxLines: 1)
-                            .truncationMode(.tail)
+                        MomoText(data.title, typography: .actionXsBold, color: data.tintColor, maxLines: 1, fontFamily: headerFontFamily)
 
                         if !data.icons.isEmpty {
                             Spacer().frame(width: 6)
@@ -68,34 +70,27 @@ public struct HeaderUserView: View {
 
                     if let subTitle = data.subTitle, !subTitle.isEmpty {
                         Spacer().frame(height: 2)
-                        MomoText(subTitle, typography: .descriptionXsRegular, color: data.tintColor ?? Colors.black17, maxLines: 1)
-                            .truncationMode(.tail)
+                        MomoText(subTitle, typography: .descriptionXsRegular, color: data.tintColor, maxLines: 1)
                     }
                 }
             }
-            .frame(maxWidth: maxWidth, alignment: .leading)
+            .frame(maxWidth: headerTitleMaxWidth(layout), alignment: .leading)
 
             Spacer(minLength: 0)
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding(.vertical, Spacing.XS)
         .contentShape(Rectangle())
-        .onTapGesture { data.onPress?() }
-        .allowsHitTesting(data.onPress != nil)
     }
 
     private var shimmer: some View {
         HStack(spacing: Spacing.M / 2) {
-            Circle()
-                .fill(Colors.black05)
+            Skeleton()
                 .frame(width: avatarSize, height: avatarSize)
+                .clipShape(Circle())
             VStack(alignment: .leading, spacing: Spacing.XXS) {
-                RoundedRectangle(cornerRadius: 8)
-                    .fill(Colors.black05)
-                    .frame(width: 120, height: 18)
-                RoundedRectangle(cornerRadius: 8)
-                    .fill(Colors.black05)
-                    .frame(width: 120, height: 12)
+                titleSkeleton(height: 18)
+                titleSkeleton(height: 12)
             }
         }
         .frame(maxWidth: .infinity, alignment: .leading)
@@ -108,6 +103,7 @@ public struct HeaderUserView: View {
 /// Mirrors Compose's `AvatarGroup`: lays out 1..4 avatars in a fixed collage,
 /// falls back to initials when empty, and shows a "+n" overflow tile beyond 4.
 private struct AvatarGroup: View {
+    @Environment(\.appTheme) private var theme
     let urls: [String]
     let title: String
     let size: CGFloat
@@ -177,7 +173,7 @@ private struct AvatarGroup: View {
         ImageView(url)
             .aspectRatio(contentMode: .fill)
             .clipShape(Circle())
-            .overlay(Circle().stroke(Colors.black05, lineWidth: 0.5))
+            .overlay(Circle().stroke(theme.colors.border.default, lineWidth: 0.5))
     }
 
     private func overflowTile(more: Int) -> some View {
@@ -189,6 +185,7 @@ private struct AvatarGroup: View {
 }
 
 private struct InitialsAvatar: View {
+    @Environment(\.appTheme) private var theme
     let name: String
     let size: CGFloat
 
@@ -204,6 +201,6 @@ private struct InitialsAvatar: View {
             .frame(width: size, height: size)
             .background(Colors.pink09)
             .clipShape(Circle())
-            .overlay(Circle().stroke(Colors.black05, lineWidth: 0.5))
+            .overlay(Circle().stroke(theme.colors.border.default, lineWidth: 0.5))
     }
 }