@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

package/ios/Navigation/Component/HeaderJourney.swift

@@ -0,0 +1,73 @@
+//
+//  HeaderJourney.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/component/HeaderJourney.kt`: a "start → end" title
+//  with an optional description below.
+//
+
+import SwiftUI
+
+public struct HeaderJourneyView: View {
+    private let data: HeaderJourneyData
+    private let tintColor: Color
+
+    public init(_ data: HeaderJourneyData, 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: 18)
+                titleSkeleton(height: 12)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+        } else {
+            let tint = parseHeaderTint(data.tintColor) ?? tintColor
+            let iconTint = parseHeaderTint(data.iconColor) ?? tint
+            SwiftUI.Button(action: { data.onPress?() }) {
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(spacing: 0) {
+                        MomoText(data.start, typography: .actionXsBold, color: tint, maxLines: 1)
+                        Spacer().frame(width: Spacing.S)
+                        if data.icon.trimmingCharacters(in: .whitespaces).isEmpty {
+                            Spacer().frame(width: 16)
+                        } else {
+                            Icon(source: data.icon, size: 16, color: iconTint)
+                        }
+                        Spacer().frame(width: Spacing.S)
+                        if let end = data.end, !end.isEmpty {
+                            MomoText(end, typography: .actionXsBold, color: tint, maxLines: 1)
+                        }
+                        Spacer().frame(width: Spacing.XS)
+                        Icon(source: "16_arrow_chevron_down_small", size: 16, color: tint)
+                    }
+                    if let description = data.description, !description.isEmpty {
+                        MomoText(description, typography: .descriptionXsRegular, color: tint, maxLines: 1)
+                    }
+                }
+                .frame(maxWidth: headerTitleMaxWidth(layout), alignment: .leading)
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+            .disabled(data.onPress == nil)
+        }
+    }
+}
+
+func titleSkeleton(height: CGFloat) -> some View {
+    Skeleton()
+        .frame(width: 120, height: height)
+        .clipShape(RoundedRectangle(cornerRadius: 8))
+}
+
+/// CSS hex (`RGB`, `RRGGBB`, `RRGGBBAA`) as RN passes header tints; nil when unset or invalid.
+func parseHeaderTint(_ value: String?) -> Color? {
+    guard var digits = value?.trimmingCharacters(in: .whitespaces), !digits.isEmpty else { return nil }
+    if digits.hasPrefix("#") { digits.removeFirst() }
+    guard [3, 6, 8].contains(digits.count), digits.allSatisfy(\.isHexDigit) else { return nil }
+    return Color(hex: digits)
+}

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,425 @@
+//
+//  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)
+    }
+}
+
+// MARK: - Toolkit
+
+private struct NavigationButtonConfig {
+    let icon: String
+    let onPress: () -> Void
+}
+
+/// `sideBarColumn`: the iPhone Duo side bar; `sideBarRow`: the Duo header row on the status bar, same 48pt controls.
+enum ToolkitLayout {
+    case bar, sideBarColumn, sideBarRow
+}
+
+struct Toolkit: View {
+    let headerRight: HeaderRightData
+    var tintColor: Color?
+    var layout: ToolkitLayout = .bar
+
+    @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"]
+    }
+
+    private typealias MaxApiRequest = (MaxApi, [String: Any?], @escaping ([String: Any?]?) -> Void) -> Void
+
+    /// Through `composeApi` while the host still passes one, else `maxApi` (Compose `IMaxApi`).
+    /// Hosts may answer off the main thread, so the response is handed back on it.
+    private func request(
+        _ funcName: String,
+        _ params: [String: Any],
+        maxApi maxApiRequest: MaxApiRequest,
+        onResponse: @escaping (Any?) -> Void = { _ in }
+    ) {
+        if let composeApi = environment.composeApi {
+            _ = composeApi.request(funcName: funcName, params: params) { response in
+                let value = parseResponse(response)
+                DispatchQueue.main.async { onResponse(value) }
+            }
+        } else if let maxApi = environment.maxApi {
+            maxApiRequest(maxApi, params.mapValues { $0 as Any? }) { data in
+                let value = data?["response"] ?? nil
+                DispatchQueue.main.async { onResponse(value) }
+            }
+        }
+    }
+
+    // MARK: Actions
+
+    private func loadFavoriteState() {
+        request(
+            "isFavoriteApp",
+            ["code": apiValue(context?.appCode)],
+            maxApi: { $0.isFavoriteApp($1, callback: $2) }
+        ) { response in
+            isFavorite = response as? Bool == true
+        }
+    }
+
+    private func onPressShortcut() {
+        request(
+            "onToolAction",
+            ["item": ["key": "onFavorite"], "context": contextMap],
+            maxApi: { $0.onToolAction($1, callback: $2) }
+        ) { response in
+            if let result = response as? [String: Any], result["success"] as? Bool == true {
+                isFavorite.toggle()
+            }
+        }
+    }
+
+    private func onPressMore() {
+        request(
+            "showTools",
+            [
+                "useSystemTools": headerRight.useSystemTools,
+                "tools": headerRight.tools.map { $0.toMap() },
+                "context": contextMap
+            ],
+            maxApi: { $0.showTools($1, callback: $2) }
+        ) { response in
+            if let tool = response as? String {
+                headerRight.toolCallback?(tool)
+            }
+        }
+    }
+
+    private func onPressHelpCenter() {
+        guard context != nil else { return }
+        request(
+            "showHelpCenter",
+            [
+                "appId": apiValue(context?.appId),
+                "code": apiValue(context?.appCode),
+                "name": apiValue(context?.appName),
+                "icon": apiValue(context?.appIcon),
+                "description": apiValue(context?.description)
+            ],
+            maxApi: { $0.showHelpCenter($1, callback: $2) }
+        )
+    }
+
+    private func onPressClose() {
+        if headerRight.useCloseIcon {
+            environment.requestDismiss()
+        } else if let composeApi = environment.composeApi {
+            _ = composeApi.request(funcName: "dismissAll", params: nil) { _ in }
+        } else {
+            environment.maxApi?.dismissAll(completion: nil)
+        }
+    }
+
+    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 {
+            switch layout {
+            case .bar:
+                horizontalBody
+            case .sideBarColumn:
+                VStack(spacing: Spacing.M) { sideBarControls(horizontal: false) }
+            case .sideBarRow:
+                HStack(spacing: Spacing.M) { sideBarControls(horizontal: true) }
+            }
+        }
+        .onAppear(perform: loadFavoriteState)
+    }
+
+    @ViewBuilder
+    private func sideBarControls(horizontal: Bool) -> some View {
+        let config = navigationButtonConfig
+        let useHelpCenter = usesHelpCenter(context)
+        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, horizontal: horizontal) {
+            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.
+public struct NavigationButton: View {
+    var disabled: Bool
+    var icon: String
+    var showBadge: Bool
+    var headerColor: HeaderColor?
+    var onClick: () -> Void
+
+    @Environment(\.headerColor) private var barColor
+
+    /// Colors follow the enclosing header, so it fits a custom header right next to the toolkit.
+    public init(icon: String, showBadge: Bool = false, disabled: Bool = false, onClick: @escaping () -> Void) {
+        self.init(disabled: disabled, icon: icon, showBadge: showBadge, headerColor: nil, onClick: onClick)
+    }
+
+    init(disabled: Bool, icon: String, showBadge: Bool, headerColor: HeaderColor?, onClick: @escaping () -> Void) {
+        self.disabled = disabled
+        self.icon = icon
+        self.showBadge = showBadge
+        self.headerColor = headerColor
+        self.onClick = onClick
+    }
+
+    private var colors: HeaderColor {
+        headerColor ?? barColor ?? getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: nil)
+    }
+
+    public var body: some View {
+        SwiftUI.Button(action: onClick) {
+            ZStack {
+                Circle()
+                    .fill(colors.backgroundButton)
+                    .overlay(Circle().stroke(colors.borderColor, lineWidth: 0.2))
+                Icon(source: icon, size: 20, color: colors.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)
+    }
+}