@momo-kits/native-kits 0.0.1-beta.4 → 0.0.2-alpha.1

package/ios/Application/Navigation/component/Header.swift

@@ -0,0 +1,178 @@
+//
+//  Header.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `Header` (navigation/component/Header.kt).
+//  Renders the 52pt header bar: a circular back button (colors resolved via
+//  `getHeaderColor`), the title area (`HeaderContent` → plain title, user title
+//  or inline search), the header-right toolkit, and a scroll-triggered bottom
+//  shadow. The header band background itself is painted by `HeaderBackground`.
+//
+//  Named `NavigationHeader` to coexist with the legacy `Header` in
+//  `Components.swift` (kept as-is, used as a package elsewhere; to be marked
+//  deprecated later). Used by the new `StackScreen` navigation path.
+//
+
+import SwiftUI
+
+public struct NavigationHeader: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    /// Optional rich title (mirrors Compose's `HeaderTitle`); `.user` renders an
+    /// avatar group, `.default`/nil renders plain `title`.
+    var headerTitle: HeaderTitle?
+    var headerRight: (() -> any View)? = { NavigationHeaderRight() }
+    var goBack: (() -> Void)?
+    var opacity: CGFloat = 1
+    var animatedHeader: AnimatedHeader?
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps?
+    var tintColor: Color?
+    /// Title opacity; used by the animated search header to fade the title out on scroll.
+    var titleOpacity: CGFloat = 1
+
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerTitle: HeaderTitle? = nil,
+        headerRight: (() -> any View)? = { HeaderRight() },
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat = 1,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil,
+        titleOpacity: CGFloat = 1
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerTitle = headerTitle
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
+        self.titleOpacity = titleOpacity
+    }
+
+    private var isAnimated: Bool { animatedHeader != nil }
+    private var isSurface: Bool { animatedHeader?.isSurface ?? true }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(isAnimated: isAnimated, isSurface: isSurface, opacity: opacity, tintColor: tintColor)
+    }
+
+    /// Centered title needs a full-width overlay to stay screen-centered, not
+    /// boxed between the back button and the header-right (mirrors Compose).
+    private var centerTitle: Bool {
+        guard inputSearchProps == nil else { return false }
+        let isDefault = headerTitle == nil || headerTitle?.defaultTitle != nil
+        return titlePosition == .center && isDefault
+    }
+
+    public var body: some View {
+        if headerType != .none {
+            ZStack {
+                HStack(spacing: 0) {
+                    if let goBack {
+                        BackButton(color: headerColor, onBack: goBack)
+                        Spacer().frame(width: Spacing.S)
+                    }
+
+                    if centerTitle {
+                        Spacer()
+                    } else {
+                        titleArea(centered: false)
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                    }
+
+                    if let headerRight {
+                        AnyView(headerRight())
+                            .background(
+                                GeometryReader { geo in
+                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                                }
+                            )
+                    }
+                }
+                .padding(.horizontal, Spacing.M)
+
+                if centerTitle {
+                    titleArea(centered: true)
+                        .padding(.horizontal, Spacing.M)
+                }
+            }
+            .frame(height: HEADER_HEIGHT)
+            .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
+        }
+    }
+
+    /// Mirrors Compose's `HeaderContent`: plain title, user title, or — when a
+    /// header search is active — the inline search field.
+    @ViewBuilder
+    private func titleArea(centered: Bool) -> some View {
+        if let inputSearchProps {
+            InputSearch(props: inputSearchProps)
+        } else if case let .user(userData)? = headerTitle {
+            if #available(iOS 16.0, *) {
+                HeaderUserView(userData)
+            }
+        } else {
+            MomoText(
+                headerTitle?.defaultTitle ?? title,
+                typography: .actionSBold,
+                color: headerColor.tintIconColor,
+                textAlign: centered ? .center : .leading,
+                maxLines: 1
+            )
+                .opacity(titleOpacity)
+                .truncationMode(.tail)
+                .frame(maxWidth: centered ? .infinity : nil, alignment: centered ? .center : .leading)
+        }
+    }
+}
+
+// MARK: - Back button
+
+/// Mirrors Compose's `BackButton`: a 28pt circular control with the back arrow.
+private struct BackButton: View {
+    let color: HeaderColor
+    let onBack: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onBack) {
+            Circle()
+                .fill(color.backgroundButton)
+                .overlay(Circle().stroke(color.borderColor, lineWidth: 0.2))
+                .frame(width: 28, height: 28)
+                .overlay(Icon(source: "arrow-back", size: 20, color: color.tintIconColor))
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+// MARK: - Vertical shadow
+
+/// Mirrors Compose's `VerticalShadow`: a 6pt drop shadow under the header that
+/// only appears once the header is fully opaque (scrolled).
+private struct VerticalShadow: View {
+    let opacity: CGFloat
+
+    var body: some View {
+        if opacity >= 1 {
+            LinearGradient(
+                gradient: Gradient(colors: [Color.black.opacity(0.05), .clear]),
+                startPoint: .top,
+                endPoint: .bottom
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: 6)
+        }
+    }
+}

package/ios/Application/Navigation/component/HeaderBackground.swift

@@ -0,0 +1,83 @@
+//
+//  HeaderBackground.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderBackground` (navigation/component/HeaderBackground.kt).
+//  Paints the header band behind the `Header`: a flat surface for `.default`,
+//  the taller pink gradient for `.extended`, fading out as the screen scrolls.
+//  Stays transparent when the header is transparent or the content is full-screen.
+//
+//  Named `NavigationHeaderBackground` to coexist with the legacy
+//  `HeaderBackground` in `Components.swift` (kept as-is, used as a package
+//  elsewhere; to be marked deprecated later). Used by the new `StackScreen`.
+//
+
+import SwiftUI
+
+public struct NavigationHeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+    }
+
+    private func pinkGradient(topColor: Color, bottomColor: Color) -> LinearGradient {
+        LinearGradient(
+            gradient: Gradient(colors: [
+                topColor,
+                bottomColor
+            ]),
+            startPoint: .top,
+            endPoint: .bottom
+        )
+    }
+
+    public var body: some View {
+        let statusBarHeight = safeAreaTopInset()
+        let opacity = max(0, 1 - scrollState / CGFloat(HEADER_HEIGHT))
+        let minHeight = fullScreenContent ? 0 : statusBarHeight + HEADER_HEIGHT
+        let maxHeight: CGFloat = 154
+        let backgroundColor = headerTransparent ? Color.clear : Colors.black01
+        let topColor = opacity == 0 ? backgroundColor : Color(hex: 0xFDCADE)
+
+        Group {
+            switch headerType {
+            case .default:
+                ZStack(alignment: .bottom) {
+                    backgroundColor
+                        .frame(height: minHeight)
+                    if !headerTransparent {
+                        pinkGradient(topColor: topColor, bottomColor: backgroundColor)
+                            .frame(height: maxHeight)
+                            .frame(height: minHeight, alignment: .top)
+                            .clipped()
+                    }
+                }
+
+            case .extended:
+                ZStack {
+                    if !headerTransparent {
+                        backgroundColor
+                            .frame(height: maxHeight)
+                        pinkGradient(topColor: topColor, bottomColor: backgroundColor)
+                            .frame(height: maxHeight)
+                    }
+                }
+
+            case .none:
+                EmptyView()
+            }
+        }
+    }
+}

package/ios/Application/Navigation/component/HeaderColor.swift

@@ -0,0 +1,65 @@
+//
+//  HeaderColor.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderColor` + `getHeaderColor`
+//  (navigation/component/Header.kt). Resolves the back-button / control colors
+//  for the header based on whether it sits over an animated (image) header and
+//  how far the screen has scrolled.
+//
+
+import SwiftUI
+
+/// Header band height, mirrors Compose's `HEADER_HEIGHT`.
+public let HEADER_HEIGHT: CGFloat = 52
+
+/// Mirrors Compose's `enum InputSearchType`.
+enum NavInputSearchType {
+    case none, header, animated
+}
+
+/// Mirrors Compose's `HeaderColor`.
+public struct HeaderColor {
+    public let tintIconColor: Color
+    public let backgroundButton: Color
+    public let borderColor: Color
+}
+
+/// Mirrors Compose's `getHeaderColor`. On iOS the "animated" header is expressed
+/// via a non-nil `animatedHeader`, so we pass `isAnimated`/`isSurface` instead of
+/// the Compose `HeaderType.Animated` case.
+func getHeaderColor(
+    isAnimated: Bool,
+    isSurface: Bool,
+    opacity: CGFloat,
+    tintColor: Color?,
+    defaultColor: Color = Colors.black17
+) -> HeaderColor {
+    if isAnimated {
+        if opacity >= 1 || !isSurface {
+            return HeaderColor(
+                tintIconColor: Colors.black17,
+                backgroundButton: Colors.black01.opacity(0.6),
+                borderColor: Colors.black20.opacity(0.2)
+            )
+        }
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: .clear
+        )
+    }
+
+    if tintColor == Colors.black01 {
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: Colors.black01.opacity(0.2)
+        )
+    }
+    return HeaderColor(
+        tintIconColor: tintColor ?? defaultColor,
+        backgroundButton: Colors.black01.opacity(0.6),
+        borderColor: Colors.black20.opacity(0.2)
+    )
+}

package/ios/Application/Navigation/component/HeaderRightWidthKey.swift

@@ -0,0 +1,11 @@
+import SwiftUI
+
+/// Reports the measured width of the header-right area so the animated search
+/// header can compute its trailing inset (mirrors Compose's headerRightWidthPx).
+/// Written by the header views (`NavigationHeader`) and read by `StackScreen`.
+public struct HeaderRightWidthKey: PreferenceKey {
+    public static var defaultValue: CGFloat = 0
+    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}

package/ios/Application/Navigation/component/NavigationFooter.swift

@@ -0,0 +1,90 @@
+//
+//  NavigationFooter.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `Footer` (navigation/StackScreen.kt): the band
+//  pinned under the screen content — surface background, S/M padding, the
+//  navigation-bar reserve, and the 6pt gradient shadow cast up onto the content.
+//
+//  Named `NavigationFooter` to coexist with the legacy `Footer` in `Screen.swift`
+//  (kept as-is for the old `Screen` path). Used by `StackScreen`.
+//
+
+import SwiftUI
+
+public struct NavigationFooter: View {
+    /// Compose's `footerComponent`: nothing renders when nil.
+    var footerComponent: (() -> AnyView)?
+    /// Current keyboard height, measured from the bottom of the screen.
+    var keyboardSize: CGFloat
+
+    public init(
+        footerComponent: (() -> AnyView)?,
+        keyboardSize: CGFloat = 0
+    ) {
+        self.footerComponent = footerComponent
+        self.keyboardSize = keyboardSize
+    }
+
+    @Environment(\.appTheme) private var theme
+
+    /// Read from the window, not from an enclosing `GeometryProxy`: the proxy's bottom
+    /// inset grows to the keyboard height while the keyboard is up.
+    static var safeAreaBottom: CGFloat {
+        UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+            .first ?? 0
+    }
+
+    /// Compose's `AppNavigationBar.current` (`getNavigationBarHeight` clamps iOS to 21pt).
+    static var navigationBarInset: CGFloat { min(safeAreaBottom, 21) }
+
+    /// Compose's `bottomPadding + Spacing.S` with the keyboard down. The footer is laid
+    /// out inside the safe area, which already covers part of that gap.
+    static var bottomPadding: CGFloat {
+        max(navigationBarInset + Spacing.S - safeAreaBottom, 0)
+    }
+
+    /// Deliberately an offset and not padding: growing the footer feeds back into SwiftUI's
+    /// keyboard avoidance, so a padding-based lift never settles at the right place.
+    /// Negative lifts the band over the keyboard; positive shaves the few points by which
+    /// the safe area over-reserves compared to Compose. `FloatingContent` rides the same
+    /// amount so the FAB keeps its distance above the band.
+    ///
+    /// Natural position is `safeAreaBottom + bottomPadding` above the bottom of the screen;
+    /// Compose puts it at `(AppNavigationBar - keyboard).coerceAtLeast(0) + Spacing.S` on
+    /// top of the `imePadding()` lift — i.e. `max(navigationBar, keyboard) + Spacing.S`.
+    static func verticalOffset(keyboardSize: CGFloat) -> CGFloat {
+        (safeAreaBottom + bottomPadding) - (max(navigationBarInset, keyboardSize) + Spacing.S)
+    }
+
+    public var body: some View {
+        if let footerComponent = footerComponent {
+            VStack(alignment: .leading, spacing: 0) {
+                footerComponent()
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.top, Spacing.S)
+            .padding(.horizontal, Spacing.M)
+            .padding(.bottom, Self.bottomPadding)
+            // Compose paints the surface all the way to the bottom of the screen; the
+            // footer's own frame stops at the safe area, so only the fill bleeds down.
+            .background(theme.colors.background.surface.ignoresSafeArea(.container, edges: .bottom))
+            .overlay(alignment: .top) { shadow }
+            .offset(y: Self.verticalOffset(keyboardSize: keyboardSize))
+        }
+    }
+
+    /// Compose offsets the shadow box by -6dp, so it lands on the content above the
+    /// footer rather than on the footer surface itself.
+    private var shadow: some View {
+        LinearGradient(
+            colors: [Color.clear, Color.black.opacity(0.05)],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+        .frame(height: 6)
+        .offset(y: -6)
+        .allowsHitTesting(false)
+    }
+}

package/ios/Application/Navigation/component/NavigationHeaderRight.swift

@@ -0,0 +1,196 @@
+import SwiftUI
+import Foundation
+
+/// Keyed (`@Environment(\.applicationEnvironment)`) variant of `HeaderRight`, for hosts
+/// wired through `NavigationContainer`/`KitContainer` (the injection style introduced by
+/// MR 227 / DS-637). Reuses the shared data types (`HeaderRightData`, `Tool`, `ToolGroup`)
+/// and `NavigationButton` from `HeaderRight.swift`. The legacy `HeaderRight` there stays on
+/// `@EnvironmentObject` for hosts that render `Screen` directly with
+/// `.environmentObject(ApplicationEnvironment(...))`. Opt in per screen with
+/// `headerRight: { NavigationHeaderRight() }`.
+public struct NavigationHeaderRight: 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) {
+            ToolkitNavigationHeaderRight(headerRight: headerRight, tintColor: tintColor)
+        }
+    }
+}
+
+struct ToolkitNavigationHeaderRight: View {
+    var headerRight: HeaderRightData?
+    var tintColor: Color?
+    @State private var isFavorite: Bool = false
+    @State private var isLoading: Bool = false
+    @Environment(\.applicationEnvironment) private var environment
+
+    private func apiValue(_ value: Any?) -> Any {
+        value ?? NSNull()
+    }
+
+    private var contextMap: [String: Any] {
+        let context = environment.applicationContext
+        return [
+            "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 var shouldShowShortcut: Bool {
+        headerRight?.useShortcut == true && !(headerRight?.useMore == true && environment.applicationContext == nil)
+    }
+
+    private func parseResponse(_ response: String) -> Any? {
+        guard let jsonData = response.data(using: .utf8),
+              let json = try? JSONSerialization.jsonObject(with: jsonData) as? [String: Any] else {
+            return nil
+        }
+        return json["response"]
+    }
+
+    // MARK: - Actions
+    private func loadFavoriteState() {
+        environment.composeApi?.request(
+            funcName: "isFavoriteApp",
+            params: ["code": apiValue(environment.applicationContext?.appCode)]
+        ) { response in
+            if let isFavorite = parseResponse(response) as? Bool {
+                self.isFavorite = isFavorite
+            }
+        }
+    }
+
+    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 onPressHelpCenter() {
+        environment.composeApi?.request(
+            funcName: "showHelpCenter",
+            params: [
+                "appId": apiValue(environment.applicationContext?.appId),
+                "code": apiValue(environment.applicationContext?.appCode),
+                "name": apiValue(environment.applicationContext?.appName),
+                "icon": apiValue(environment.applicationContext?.appIcon),
+                "description": apiValue(environment.applicationContext?.description)
+            ]
+        ) { _ in }
+    }
+
+    private func onPressClose() {
+        environment.composeApi?.request(
+            funcName: "dismissAll",
+            params: nil
+        ) { _ in }
+    }
+
+    private func onPressMore() {
+        let params: [String: Any] = [
+            "useSystemTools": headerRight?.useSystemTools ?? true,
+            "tools": headerRight?.tools.map { $0.toMap() } ?? [],
+            "context": contextMap
+        ]
+        environment.composeApi?.request(
+            funcName: "showTools",
+            params: params
+        ) { response in
+            if let toolResponse = parseResponse(response) as? String {
+                headerRight?.toolCallback?(toolResponse)
+            }
+        }
+    }
+
+    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 shouldShowShortcut {
+                NavigationButton(
+                    disabled: isLoading,
+                    icon: navButtonConfig.icon,
+                    showBadge: showBadge,
+                    onClick: navButtonConfig.onPress,
+                    tintColor: tintColor
+                )
+            }
+
+            HStack(alignment: .center, spacing: 0) {
+                if environment.applicationContext != nil {
+                    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: "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()
+        }
+    }
+}