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

package/ios/Application/Navigation/Overplay/BottomSheet.swift

@@ -0,0 +1,256 @@
+//
+//  BottomSheet.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomSheet` (navigation/BottomSheet.kt).
+//  A sheet that slides up from the bottom over a dimmed scrim, with a drag
+//  handle, a header (title or custom), a divider and the content body.
+//  Dragging down past a threshold (or tapping the scrim) dismisses it.
+//  Driven by `Navigator.showBottomSheet`.
+//
+
+import SwiftUI
+
+// MARK: - Header model
+
+/// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
+public struct BottomSheetHeader {
+    enum Style {
+        case title(String)
+        case custom(() -> AnyView)
+    }
+
+    let style: Style
+
+    /// Mirrors `BottomHeader.Title`.
+    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text))
+    }
+
+    /// Mirrors `BottomHeader.Custom`.
+    public static func custom<V: View>(@ViewBuilder _ content: @escaping () -> V) -> BottomSheetHeader {
+        BottomSheetHeader(style: .custom({ AnyView(content()) }))
+    }
+}
+
+// MARK: - Bottom sheet view
+
+@available(iOS 16.0, *)
+struct BottomSheetView<Content: View>: View {
+    let header: BottomSheetHeader
+    let isSurface: Bool
+    let barrierDismissible: Bool
+    let content: () -> Content
+
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.appTheme) private var theme
+    @Environment(\.applicationEnvironment) private var appEnv
+
+    /// Vertical translation of the sheet; starts off-screen and animates to 0.
+    @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
+    /// Mirrors Compose's `backgroundAlpha`: only touched by open()/close(), never by drag.
+    @State private var backgroundAlpha: CGFloat = 0
+    @State private var sheetHeight: CGFloat = 0
+    @State private var didAppear = false
+    @State private var keyboardHeight: CGFloat = 0
+    /// Live drag offset, isolated from `sheetOffset` so a touch-move only invalidates
+    /// this gesture-scoped value instead of forcing the whole body (including
+    /// `content()`) to reconstruct every frame — mirrors the pattern already used in
+    /// `ios/PopupView/PopupView.swift` for smooth drag-to-dismiss.
+    @GestureState private var dragTranslation: CGFloat = 0
+
+    /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
+    private let closeThreshold: CGFloat = 100
+
+    /// Mirrors Compose's per-term peak (0.3f). Combined with `backgroundAlpha` the
+    /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
+    private let maxDynamicAlpha: CGFloat = 0.3
+
+    private var screenHeight: CGFloat { UIScreen.main.bounds.height }
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    /// While the keyboard is up, it already covers the home-indicator area, so it
+    /// replaces (rather than adds to) the usual bottom-inset filler.
+    private var effectiveBottomInset: CGFloat { keyboardHeight > 0 ? keyboardHeight : bottomInset }
+
+    private var backgroundColor: Color {
+        isSurface ? theme.colors.background.surface : theme.colors.background.default
+    }
+
+    private var effectiveOffset: CGFloat { sheetOffset + dragTranslation }
+
+    /// Mirrors Compose's `dynamicAlpha`: a plain derived value (not itself animated)
+    /// that tracks the current offset live, shrinking toward 0 as the sheet is
+    /// dragged down.
+    private var dynamicAlpha: CGFloat {
+        let denom = sheetHeight > 0 ? sheetHeight : screenHeight
+        guard denom > 0 else { return maxDynamicAlpha }
+        let progress = min(max(1 - effectiveOffset / denom, 0), 1)
+        return progress * maxDynamicAlpha
+    }
+
+    /// Mirrors Compose's `alpha = backgroundAlpha + dynamicAlpha`: additive, so the
+    /// scrim peaks at 0.6 at rest and only fades to a 0.3 floor while dragging
+    /// (backgroundAlpha holds steady until an explicit close()).
+    private var totalScrimAlpha: CGFloat { backgroundAlpha + dynamicAlpha }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            // Dimmed scrim — additive backgroundAlpha + dynamicAlpha (see above).
+            Color.black.opacity(totalScrimAlpha)
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if barrierDismissible { close() }
+                }
+
+            sheet
+                .offset(y: effectiveOffset)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea()
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
+            guard let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+            withAnimation(.easeOut(duration: 0.25)) {
+                keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+            }
+        }
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            ScreenTracker.trackPopupDisplayed(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                parentScreenName: ScreenTracker.getLastScreenName()
+            )
+            navigator.registerOverplayDismiss { close() }
+            open()
+        }
+    }
+
+    private var sheet: some View {
+        VStack(spacing: 0) {
+            // Drag handle + header (the draggable region).
+            VStack(spacing: 0) {
+                Spacer().frame(height: 8)
+                Capsule()
+                    .fill(Colors.black06)
+                    .frame(width: 40, height: 4)
+                Spacer().frame(height: 4)
+                headerView
+                    .frame(height: 56)
+                    .padding(.horizontal, Spacing.M)
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: 72)
+            .contentShape(Rectangle())
+            .gesture(dragGesture)
+
+            Rectangle()
+                .fill(theme.colors.border.default)
+                .frame(height: 1)
+
+            content()
+
+            backgroundColor
+                .frame(height: effectiveBottomInset)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(alignment: .bottom)
+        .background(
+            GeometryReader { geo in
+                Color.clear.onAppear { sheetHeight = geo.size.height }
+            }
+        )
+        .background(backgroundColor)
+        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+    }
+
+    @ViewBuilder
+    private var headerView: some View {
+        switch header.style {
+        case .title(let text):
+            HStack(spacing: 0) {
+                Color.clear.frame(width: 24, height: 24)
+                MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
+                    .frame(maxWidth: .infinity, alignment: .center)
+                Icon(source: "navigation_close", size: 24, color: Colors.black17)
+                    .frame(width: 24, height: 24)
+                    .contentShape(Rectangle())
+                    .onTapGesture { close() }
+            }
+        case .custom(let builder):
+            builder()
+        }
+    }
+
+    // MARK: - Drag handling (mirrors Compose's detectDragGestures)
+
+    private var dragGesture: some Gesture {
+        // `.global` (not the default `.local`) so the gesture tracks against the
+        // window rather than the handle's own view, which is itself repositioned
+        // every frame by this same gesture's output (`sheet.offset(y: effectiveOffset)`
+        // in `body`) — the local coordinate space chasing its own moving reference
+        // frame is a plausible source of a continuous drag-time jitter.
+        DragGesture(coordinateSpace: .global)
+            .onChanged { _ in
+                // Touching the handle should immediately settle `sheetOffset` to its
+                // resting value (0) with no animation, so a drag that starts while the
+                // open animation — or the keyboard-driven resize, which shifts this
+                // same bottom-anchored top edge — is still in flight doesn't fight a
+                // moving target. Without this, the live drag value chases an animated
+                // one, producing a couple of corrective jumps before it settles.
+                if sheetOffset != 0 {
+                    sheetOffset = 0
+                }
+            }
+            .updating($dragTranslation) { value, state, _ in
+                state = max(value.translation.height, 0)
+            }
+            .onEnded { value in
+                let finalOffset = max(value.translation.height, 0)
+                // Capture into persisted state BEFORE @GestureState resets to 0,
+                // avoiding a one-frame snap back to rest before close()'s own
+                // slide-out animation starts (mirrors PopupView's `lastDragPosition`).
+                sheetOffset = finalOffset
+                if finalOffset > closeThreshold {
+                    close()
+                } else {
+                    withAnimation(.spring(response: 0.3, dampingFraction: 0.9)) {
+                        sheetOffset = 0
+                    }
+                }
+            }
+    }
+
+    // MARK: - Open / close animations
+
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.1)) { backgroundAlpha = maxDynamicAlpha }
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.35)) { sheetOffset = 0 }
+        }
+    }
+
+    /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
+    /// out over 100ms only after the slide finishes, then dismiss.
+    private func close() {
+        withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
+            sheetOffset = max(sheetHeight, screenHeight)
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.1)) {
+                backgroundAlpha = 0
+            }
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private func safeAreaBottomInset() -> CGFloat {
+    let bottomInset = UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+    return min(bottomInset, 21)
+}

package/ios/Application/Navigation/Overplay/ModalScreen.swift

@@ -0,0 +1,74 @@
+//
+//  ModalScreen.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `ModalScreen` (navigation/ModalScreen.kt).
+//  A centered overlay that fades + scales in over a dimmed scrim, and animates
+//  back out before the overplay is removed. Driven by `Navigator.showModal`.
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct ModalScreen<Content: View>: View {
+    let barrierDismissible: Bool
+    let content: () -> Content
+
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.applicationEnvironment) private var appEnv
+
+    @State private var scrimOpacity: CGFloat = 0
+    @State private var contentScale: CGFloat = 0.8
+    @State private var contentOpacity: CGFloat = 0
+    @State private var didAppear = false
+
+    var body: some View {
+        ZStack {
+            // Dimmed scrim (mirrors `Color.Black.copy(alpha = 0.6f * alpha)`).
+            Color.black.opacity(0.6 * scrimOpacity)
+                .ignoresSafeArea()
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if barrierDismissible { navigator.hideOverplay() }
+                }
+
+            content()
+                .scaleEffect(contentScale)
+                .opacity(contentOpacity)
+        }
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            ScreenTracker.trackPopupDisplayed(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                parentScreenName: ScreenTracker.getLastScreenName()
+            )
+            navigator.registerOverplayDismiss { close() }
+            open()
+        }
+    }
+
+    // Mirrors Compose's `openEvent`: 250ms fade + scale to 1.
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.easeOut(duration: 0.25)) {
+                scrimOpacity = 1
+                contentScale = 1
+                contentOpacity = 1
+            }
+        }
+    }
+
+    // Mirrors Compose's `closeEvent`: 200ms fade + scale back to 0.8, then remove.
+    private func close() {
+        withAnimation(.easeIn(duration: 0.2)) {
+            scrimOpacity = 0
+            contentScale = 0.8
+            contentOpacity = 0
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+}

package/ios/Application/Navigation/Overplay/SnackBar.swift

@@ -0,0 +1,144 @@
+//
+//  SnackBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `SnackBar` (navigation/component/SnackBar.kt).
+//  A snack bar slides up from the bottom (just above the footer / home
+//  indicator), stays for `duration`, then slides back down and is removed.
+//  `Navigator.showSnackBar(_:)` drives it through the overplay host.
+//
+
+import Foundation
+import SwiftUI
+
+// MARK: - SnackBar model
+
+/// Mirrors Compose's `sealed class SnackBar` (Custom / Toast). A `nil` duration
+/// keeps the snack bar on screen until dismissed manually.
+public struct SnackBar {
+    public enum Style {
+        case custom
+        case toast
+    }
+
+    public let style: Style
+    public let duration: TimeInterval?
+    public let content: (() -> AnyView)?
+
+    private init(style: Style, duration: TimeInterval?, content: (() -> AnyView)?) {
+        self.style = style
+        self.duration = duration
+        self.content = content
+    }
+
+    /// Mirrors `SnackBar.Custom`: renders arbitrary content.
+    public static func custom<V: View>(
+        duration: TimeInterval? = 3.0,
+        @ViewBuilder content: @escaping () -> V
+    ) -> SnackBar {
+        SnackBar(style: .custom, duration: duration, content: { AnyView(content()) })
+    }
+
+    /// Mirrors `SnackBar.Toast`: a placeholder with no custom content (parity with
+    /// Compose where `Toast` currently renders nothing).
+    public static func toast(duration: TimeInterval? = 3.0) -> SnackBar {
+        SnackBar(style: .toast, duration: duration, content: nil)
+    }
+}
+
+// MARK: - SnackBar host view
+
+/// Self-animating container. Slides the content up on appear, schedules an
+/// auto-dismiss after `duration`, and animates out before removing the overplay.
+@available(iOS 16.0, *)
+struct SnackBarView: View {
+    let snackBar: SnackBar
+    /// Bottom inset so the bar sits above the footer / home indicator
+    /// (mirrors Compose's `footerHeight` offset).
+    let bottomInset: CGFloat
+
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var contentHeight: CGFloat = 0
+    @State private var offsetY: CGFloat = 0
+    @State private var didAppear = false
+    @State private var isClosing = false
+    @State private var autoDismissWorkItem: DispatchWorkItem?
+
+    var body: some View {
+        VStack(spacing: 0) {
+            Spacer(minLength: 0)
+            content
+                .background(
+                    GeometryReader { geo in
+                        Color.clear.onAppear { contentHeight = geo.size.height }
+                    }
+                )
+                .offset(y: offsetY)
+                .padding(.bottom, bottomInset)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .onAppear {
+            guard !didAppear else { return }
+            didAppear = true
+            offsetY = max(contentHeight, 200) + bottomInset
+            open()
+            registerClose()
+            scheduleAutoDismiss()
+        }
+        .onDisappear {
+            autoDismissWorkItem?.cancel()
+            autoDismissWorkItem = nil
+        }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        switch snackBar.style {
+        case .custom:
+            snackBar.content?()
+        case .toast:
+            EmptyView()
+        }
+    }
+
+    // Mirrors Compose's `openEvent`: 350ms slide up.
+    private func open() {
+        DispatchQueue.main.async {
+            withAnimation(.easeOut(duration: 0.35)) {
+                offsetY = 0
+            }
+        }
+    }
+
+    // Animated slide down, then remove (mirrors Compose's `closeEvent`/`hideSnackBar`).
+    private func close() {
+        guard !isClosing else { return }
+        isClosing = true
+        autoDismissWorkItem?.cancel()
+        autoDismissWorkItem = nil
+
+        withAnimation(.easeIn(duration: 0.2)) {
+            offsetY = max(contentHeight, 200) + bottomInset
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            navigator.finishOverplayDismiss()
+        }
+    }
+
+    private func registerClose() {
+        navigator.registerOverplayDismiss { close() }
+    }
+
+    private func scheduleAutoDismiss() {
+        guard let duration = snackBar.duration else { return }
+        let workItem = DispatchWorkItem {
+            // Only auto-dismiss if this snack bar is still the active overplay.
+            if navigator.overplay?.type == .snackBar {
+                navigator.hideSnackBar()
+            }
+        }
+        autoDismissWorkItem = workItem
+        DispatchQueue.main.asyncAfter(deadline: .now() + duration, execute: workItem)
+    }
+}

package/ios/Application/Navigation/Tracking/ScreenTracker.swift

@@ -0,0 +1,117 @@
+//
+//  ScreenTracker.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/tracking/ScreenTracker.kt`. Pure
+//  logic, no platform dependency beyond the `MaxApi` bridge.
+//
+
+import Foundation
+
+public final class ScreenTrackingState {
+    public var time: Double = Date().timeIntervalSince1970 * 1000
+    public var releaseNavigated: Bool = false
+    public var releaseLoad: Bool = false
+    public var releaseInteraction: Bool = false
+    public var previousScreenName: String?
+    public var action: String = "push"
+
+    public init() {}
+}
+
+public enum ScreenTracker {
+    private static var lastScreenName: String?
+
+    public static func trackScreenNavigated(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        action: String,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseNavigated else { return }
+
+        let previousScreen = lastScreenName
+        lastScreenName = screenName
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["pre_screen_name"] = previousScreen
+        params["state"] = "navigated"
+        params["action"] = action
+        maxApi?.track(eventName: "auto_screen_navigated", params: params)
+
+        state.releaseNavigated = true
+        state.previousScreenName = previousScreen
+    }
+
+    public static func trackScreenDisplayed(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Double,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseLoad else { return }
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["state"] = "load"
+        params["duration"] = duration
+        maxApi?.track(eventName: "auto_screen_displayed", params: params)
+
+        state.releaseLoad = true
+    }
+
+    public static func trackScreenInteracted(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Double,
+        totalDuration: Double,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseInteraction else { return }
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["state"] = "interaction"
+        params["duration"] = duration
+        params["total_duration"] = totalDuration
+        maxApi?.track(eventName: "auto_screen_interacted", params: params)
+
+        state.releaseInteraction = true
+    }
+
+    public static func trackPopupDisplayed(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        parentScreenName: String?
+    ) {
+        maxApi?.track(eventName: "auto_popup_displayed", params: [
+            "screen_name": parentScreenName,
+            "tracking_source": 1,
+            "app_id": context?.appId,
+            "feature_code": context?.appCode,
+            "kits_version": nil,
+            "component_name": "Modal"
+        ])
+    }
+
+    private static func buildBaseParams(
+        context: MiniAppContext?,
+        screenName: String,
+        componentName: String = "Screen"
+    ) -> [String: Any?] {
+        [
+            "app_id": context?.appId,
+            "feature_code": context?.appCode,
+            "screen_name": screenName,
+            "component_name": componentName,
+            "tracking_source": 1
+        ]
+    }
+
+    public static func getLastScreenName() -> String? { lastScreenName }
+
+    public static func reset() {
+        lastScreenName = nil
+    }
+}