@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Popup/PopupNotify.swift

@@ -0,0 +1,218 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+public typealias PopupActionDirection = PopupButtonDirection
+
+public struct PopupNotifyProps {
+    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: PopupActionDirection
+    public var onIconClose: () -> Void
+    public var isShowCloseIcon: Bool
+
+    public init(
+        image: String = "",
+        title: String = "Title",
+        description: String = "Description",
+        error: String = "",
+        primary: PopupAction? = nil,
+        secondary: PopupAction? = nil,
+        buttonDirection: PopupActionDirection = .row,
+        onIconClose: @escaping () -> Void,
+        isShowCloseIcon: Bool = true
+    ) {
+        self.image = image
+        self.title = title
+        self.description = description
+        self.error = error
+        self.primary = primary
+        self.secondary = secondary
+        self.buttonDirection = buttonDirection
+        self.onIconClose = onIconClose
+        self.isShowCloseIcon = isShowCloseIcon
+    }
+}
+
+public struct PopupNotify: View {
+    @EnvironmentObject private var localize: Localize
+
+    public let props: PopupNotifyProps
+
+    @State private var descriptionHeight: CGFloat = 0
+
+    private var errorCodePrefix: String {
+        localize.translate("errorCode")
+    }
+
+    private var maxDescriptionHeight: CGFloat {
+        scaleSize(TypographyStyle.bodyDefaultRegular.lineHeight) * 8.5
+    }
+
+    private var shouldUseColumnButtons: Bool {
+        switch props.buttonDirection {
+        case .column:
+            return true
+        case .row:
+            return false
+        case .auto:
+            return (props.secondary?.title.count ?? 0) > 12 || (props.primary?.title.count ?? 0) > 12
+        }
+    }
+
+    public init(props: PopupNotifyProps) {
+        self.props = props
+    }
+
+    public var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                if !props.image.isEmpty {
+                    popupImage
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    MomoText(
+                        props.title,
+                        typography: .headerDefaultBold,
+                        maxLines: 2,
+                        accessibilityId: "title_popup_permission"
+                    )
+                    .padding(.bottom, Spacing.S)
+
+                    descriptionContent
+
+                    if !props.error.isEmpty {
+                        MomoText(
+                            errorCodePrefix + props.error,
+                            typography: .descriptionXsRegular,
+                            color: Colors.black12,
+                            maxLines: 1
+                        )
+                        .padding(.top, Spacing.S)
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(Spacing.XL)
+
+                actionButtons
+                    .padding(.horizontal, Spacing.XL)
+                    .padding(.bottom, Spacing.XL)
+            }
+            .background(Colors.black01)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+
+            if props.isShowCloseIcon {
+                closeButton
+                    .offset(x: 1, y: -11)
+            }
+        }
+        .padding(.horizontal, Spacing.M)
+        .accessibilityElement(children: .ignore)
+        .accessibilityIdentifier("popup_notify")
+    }
+
+    private var popupImage: some View {
+        WebImage(url: URL(string: props.image), isAnimating: .constant(true))
+            .resizable()
+            .placeholder {
+                Rectangle()
+                    .fill(Colors.black03)
+                    .aspectRatio(1.777, contentMode: .fit)
+                    .frame(maxWidth: .infinity)
+            }
+            .aspectRatio(1.777, contentMode: .fit)
+            .frame(maxWidth: .infinity)
+            .clipShape(RoundedCorner(radius: Radius.L, corners: [.topLeft, .topRight]))
+    }
+
+    @ViewBuilder
+    private var descriptionContent: some View {
+        if descriptionHeight > maxDescriptionHeight {
+            ScrollView(.vertical, showsIndicators: false) {
+                descriptionText
+            }
+            .frame(height: maxDescriptionHeight)
+        } else {
+            descriptionText
+        }
+    }
+
+    private var descriptionText: some View {
+        MomoText(
+            props.description,
+            typography: .bodyDefaultRegular,
+            accessibilityId: "description_popup_permission"
+        )
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(
+            GeometryReader { proxy in
+                Color.clear
+                    .onAppear { descriptionHeight = proxy.size.height }
+                    .onChange(of: props.description) { _ in
+                        descriptionHeight = proxy.size.height
+                    }
+            }
+        )
+    }
+
+    @ViewBuilder
+    private var actionButtons: some View {
+        if shouldUseColumnButtons {
+            VStack(spacing: Spacing.S) {
+                primaryButton
+                if props.secondary != nil {
+                    secondaryButton
+                }
+            }
+        } else {
+            HStack(spacing: Spacing.S) {
+                if props.secondary != nil {
+                    secondaryButton
+                        .frame(maxWidth: .infinity)
+                }
+                primaryButton
+                    .frame(maxWidth: .infinity)
+            }
+        }
+    }
+
+    private var primaryButton: some View {
+        Button(
+            title: props.primary?.title ?? "",
+            action: { props.primary?.onPress?() },
+            size: .medium
+        )
+        .accessibilityIdentifier("btn_popup_allow")
+    }
+
+    private var secondaryButton: some View {
+        Button(
+            title: props.secondary?.title ?? "",
+            action: { props.secondary?.onPress?() },
+            type: .text,
+            size: .medium
+        )
+        .accessibilityIdentifier("btn_popup_cancel")
+    }
+
+    private var closeButton: some View {
+        SwiftUI.Button(action: props.onIconClose) {
+            ZStack {
+                Circle()
+                    .fill(Colors.black17)
+                    .overlay(
+                        Circle()
+                            .stroke(Colors.black01, lineWidth: 2)
+                    )
+                    .frame(width: 22, height: 22)
+
+                Icon(source: "navigation_close", size: 16, color: Colors.black01)
+            }
+        }
+        .accessibilityIdentifier("ic_popup_close")
+    }
+}

package/ios/Popup/PopupPromotion.swift

@@ -2,6 +2,8 @@ import SwiftUI
 import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
+    @Environment(\.appTheme) private var theme
+
     var imageUrl: String
     var onIconClose: (() -> Void)?
     var onAction: (() -> Void)?
@@ -18,21 +20,26 @@ public struct PopupPromotion: View {
     }
 
     public var body: some View {
+        // Mirrors Kotlin's `Modifier.fillMaxWidth().aspectRatio(0.72f)` box with
+        // `ContentScale.FillBounds` inside it: a fixed-ratio frame the image stretches
+        // to exactly fill (no `.aspectRatio` modifier on the image itself, unlike the
+        // previous `.fit`, which letterboxed instead of stretching).
+        let boxWidth = UIScreen.main.bounds.width - Spacing.XL * 2
+        let boxHeight = boxWidth / 0.72
+
         VStack(spacing: 8) {
             if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+                Icon(source: "media_fail", size: boxWidth)
             }
             else {
                 WebImage(url: URL(string: imageUrl)!)
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
-                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .frame(width: boxWidth, height: boxHeight)
                             .clipped()
                     }
-                    .aspectRatio(0.72, contentMode: .fit)
-                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .frame(width: boxWidth, height: boxHeight, alignment: .center)
                     .clipped()
                     .onTapGesture {
                         onAction?()
@@ -53,16 +60,17 @@ public struct PopupPromotion: View {
             }) {
                 ZStack {
                     Circle()
-                        .strokeBorder(Colors.black01, lineWidth: 2)
-                        .background(Circle().fill(Colors.black17))
+                        .strokeBorder(theme.colors.background.surface, lineWidth: 2)
+                        .background(Circle().fill(theme.colors.text.default))
                         .frame(width: 22, height: 22)
 
-                    Icon(source: "navigation_close", size: 16,  color: Colors.black01)
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.background.surface)
                 }
                 .frame(width: 40, height: 40)
                 .padding(8)
                 .zIndex(1)
             }
+            .buttonStyle(.plain)
         }
     }
 

package/ios/ProgressInfo/ProgressInfo.swift

@@ -0,0 +1,296 @@
+import SwiftUI
+
+// MARK: - Data model
+
+public struct ProgressInfoItem: Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let description: String?
+
+    public init(title: String, description: String? = nil) {
+        self.title = title
+        self.description = description
+    }
+}
+
+public enum ProgressInfoSize {
+    case small
+    case large
+}
+
+public enum ProgressInfoAlign {
+    case left
+    case right
+    case center
+    case stretch
+}
+
+// MARK: - Public entry-point
+
+/// Display-only step progress indicator.
+///
+/// - Parameters:
+///   - steps: Ordered list of steps; each has a title and an optional description.
+///   - horizontal: When `true` renders steps in a horizontal row with connector lines;
+///     when `false` (default) renders a vertical column.
+///   - size: Icon diameter: `.small` = 16, `.large` = 24 (default).
+///   - useNumber: Show the 1-based step index inside the icon instead of the default dot.
+///   - align: Alignment of icon + text for the horizontal variant.
+///   - showTitle: Whether step titles are rendered (default `true`).
+///   - showDescription: Whether step descriptions are rendered (default `true`).
+///   - customIcon: Icon source key rendered inside each step circle (overrides the dot;
+///     itself overridden by `useNumber`).
+public struct ProgressInfo: View {
+    private let steps: [ProgressInfoItem]
+    private let horizontal: Bool
+    private let size: ProgressInfoSize
+    private let useNumber: Bool
+    private let align: ProgressInfoAlign
+    private let showTitle: Bool
+    private let showDescription: Bool
+    private let customIcon: String?
+
+    public init(
+        steps: [ProgressInfoItem],
+        horizontal: Bool = false,
+        size: ProgressInfoSize = .large,
+        useNumber: Bool = false,
+        align: ProgressInfoAlign = .center,
+        showTitle: Bool = true,
+        showDescription: Bool = true,
+        customIcon: String? = nil
+    ) {
+        self.steps = steps
+        self.horizontal = horizontal
+        self.size = size
+        self.useNumber = useNumber
+        self.align = align
+        self.showTitle = showTitle
+        self.showDescription = showDescription
+        self.customIcon = customIcon
+    }
+
+    public var body: some View {
+        if horizontal {
+            ProgressInfoHorizontal(
+                steps: steps,
+                size: size,
+                useNumber: useNumber,
+                align: align,
+                showTitle: showTitle,
+                showDescription: showDescription,
+                customIcon: customIcon
+            )
+        } else {
+            ProgressInfoVertical(
+                steps: steps,
+                size: size,
+                useNumber: useNumber,
+                showTitle: showTitle,
+                showDescription: showDescription,
+                customIcon: customIcon
+            )
+        }
+    }
+}
+
+// MARK: - Tokens
+
+private let progressInfoLineColor = Colors.pink08
+private let progressInfoAccentColor = Colors.pinkMoMoBranding
+
+// MARK: - Horizontal variant
+
+private struct ProgressInfoHorizontal: View {
+    let steps: [ProgressInfoItem]
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let align: ProgressInfoAlign
+    let showTitle: Bool
+    let showDescription: Bool
+    let customIcon: String?
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                let isFirst = index == 0
+                let isLast = index == steps.count - 1
+
+                let alignment = columnAlignment(isFirst: isFirst, isLast: isLast)
+                let textAlign = textAlignment(isFirst: isFirst, isLast: isLast)
+                let endPadding: CGFloat = (!isLast && align != .center && align != .stretch) ? Spacing.XS : 0
+                let hideLineLeft = align == .left || (align == .stretch && isFirst)
+                let hideLineRight = align == .right || (align == .stretch && isLast)
+
+                VStack(alignment: alignment, spacing: 0) {
+                    HStack(spacing: 0) {
+                        if !hideLineLeft {
+                            ProgressInfoHorizontalLine()
+                        }
+                        ProgressInfoStepIcon(
+                            index: index,
+                            size: size,
+                            useNumber: useNumber,
+                            customIcon: customIcon
+                        )
+                        .padding(.vertical, Spacing.XS)
+                        if !hideLineRight {
+                            ProgressInfoHorizontalLine()
+                        }
+                    }
+                    .frame(maxWidth: .infinity)
+
+                    if showTitle && !item.title.isEmpty {
+                        MomoText(item.title, typography: .headerXsSemibold)
+                            .multilineTextAlignment(textAlign)
+                            .frame(maxWidth: .infinity, alignment: frameAlignment(alignment))
+                            .padding(.bottom, Spacing.XS)
+                    }
+
+                    if showDescription, let desc = item.description, !desc.isEmpty {
+                        MomoText(desc, typography: .descriptionDefaultRegular, color: Colors.black12)
+                            .multilineTextAlignment(textAlign)
+                            .frame(maxWidth: .infinity, alignment: frameAlignment(alignment))
+                    }
+                }
+                .frame(maxWidth: .infinity)
+                .padding(.trailing, endPadding)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    private func columnAlignment(isFirst: Bool, isLast: Bool) -> HorizontalAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if isFirst { return .leading }
+            if isLast { return .trailing }
+            return .center
+        }
+    }
+
+    private func frameAlignment(_ h: HorizontalAlignment) -> Alignment {
+        switch h {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+
+    private func textAlignment(isFirst: Bool, isLast: Bool) -> TextAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if isFirst { return .leading }
+            if isLast { return .trailing }
+            return .center
+        }
+    }
+}
+
+// MARK: - Vertical variant
+
+private struct ProgressInfoVertical: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [ProgressInfoItem]
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let showTitle: Bool
+    let showDescription: Bool
+    let customIcon: String?
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                let isLast = index == steps.count - 1
+
+                HStack(alignment: .top, spacing: 0) {
+                    VStack(spacing: 0) {
+                        ProgressInfoStepIcon(
+                            index: index,
+                            size: size,
+                            useNumber: useNumber,
+                            customIcon: customIcon
+                        )
+                        if !isLast {
+                            Rectangle()
+                                .fill(theme.colors.primary.opacity(0.2))
+                                .frame(width: 2)
+                                .frame(maxHeight: .infinity)
+                        }
+                    }
+                    .frame(minHeight: isLast ? 40 : 48)
+
+                    VStack(alignment: .leading, spacing: 0) {
+                        if showTitle && !item.title.isEmpty {
+                            MomoText(item.title, typography: .headerXsSemibold)
+                                .lineLimit(2)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                                .padding(.trailing, Spacing.S)
+                        }
+                        if showDescription, let desc = item.description, !desc.isEmpty {
+                            MomoText(desc, typography: .descriptionDefaultRegular, color: Colors.black12)
+                                .frame(maxWidth: .infinity, alignment: .leading)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.trailing, Spacing.S)
+                    .padding(.bottom, isLast ? 0 : Spacing.S)
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .fixedSize(horizontal: false, vertical: true)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+// MARK: - Step icon
+
+private struct ProgressInfoStepIcon: View {
+    let index: Int
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let customIcon: String?
+
+    var body: some View {
+        let containerSize = scaleSize(size == .small ? 16 : 24)
+        let dotSize = scaleSize(size == .small ? 6 : 8)
+        let iconSize = scaleSize(size == .small ? 12 : 16)
+
+        ZStack {
+            Circle()
+                .fill(progressInfoLineColor)
+                .overlay(Circle().strokeBorder(progressInfoLineColor, lineWidth: 2))
+
+            if useNumber {
+                MomoText("\(index + 1)", typography: .headerXsSemibold, color: progressInfoAccentColor)
+                    .multilineTextAlignment(.center)
+            } else if let icon = customIcon, !icon.isEmpty {
+                Icon(source: icon, size: iconSize, color: progressInfoAccentColor)
+            } else {
+                Circle()
+                    .fill(progressInfoAccentColor)
+                    .frame(width: dotSize, height: dotSize)
+            }
+        }
+        .frame(width: containerSize, height: containerSize)
+    }
+}
+
+// MARK: - Horizontal connector line
+
+private struct ProgressInfoHorizontalLine: View {
+    var body: some View {
+        Rectangle()
+            .fill(progressInfoLineColor)
+            .frame(height: 2)
+            .frame(maxWidth: .infinity)
+    }
+}

package/ios/Radio/Radio.swift

@@ -0,0 +1,69 @@
+import Foundation
+import SwiftUI
+
+public struct Radio: View {
+    @Environment(\.appTheme) private var theme
+
+    var value: AnyHashable
+    @Binding var groupValue: AnyHashable
+    var disabled: Bool
+    var onChange: (() -> Void)?
+    var label: String
+
+    public init(
+        value: AnyHashable,
+        groupValue: Binding<AnyHashable>,
+        disabled: Bool = false,
+        onChange: (() -> Void)? = nil,
+        label: String = ""
+    ) {
+        self.value = value
+        self._groupValue = groupValue
+        self.disabled = disabled
+        self.onChange = onChange
+        self.label = label
+    }
+
+    private var selected: Bool {
+        value == groupValue
+    }
+
+    private func onTap() {
+        groupValue = value
+        onChange?()
+    }
+
+    public var body: some View {
+        SwiftUI.Button(action: onTap) {
+            HStack(spacing: 0) {
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(borderColor, lineWidth: borderWidth)
+                    .frame(width: 20, height: 20)
+                    .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
+
+                if !label.isEmpty {
+                    MomoText(label, typography: .descriptionDefaultRegular)
+                }
+            }
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
+    }
+
+    private var borderWidth: CGFloat {
+        selected ? 6 : 2
+    }
+
+    private var borderColor: Color {
+        if disabled && selected {
+            return theme.colors.background.tonal
+        } else if disabled {
+            return theme.colors.text.disable
+        } else if selected {
+            return theme.colors.primary
+        } else {
+            return theme.colors.text.default
+        }
+    }
+}