@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-debug

package/ios/Pagination/PaginationDot.swift

@@ -0,0 +1,61 @@
+//
+//  PaginationDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationDot.
+//  An active dot is a 12x4 pill in `activeColor`; inactive dots are 4x4
+//  rounded squares in the pressed-background token.
+//
+
+import SwiftUI
+
+// MARK: - Dot
+
+/// A single pagination dot, mirroring Compose's `Dot` composable.
+public struct PaginationDotItem: View {
+    @Environment(\.appTheme) private var theme
+
+    private let active: Bool
+    private let activeColor: Color
+
+    public init(active: Bool = false, activeColor: Color) {
+        self.active = active
+        self.activeColor = activeColor
+    }
+
+    public var body: some View {
+        if active {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(activeColor)
+                .frame(width: 12, height: 4)
+        } else {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(theme.colors.background.pressed)
+                .frame(width: 4, height: 4)
+        }
+    }
+}
+
+// MARK: - PaginationDot
+
+/// Mirrors Compose's `PaginationDot(activeIndex, dataLength)`.
+public struct PaginationDot: View {
+    @Environment(\.appTheme) private var theme
+
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: theme.colors.primary)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+    }
+}

package/ios/Pagination/PaginationNumber.swift

@@ -0,0 +1,35 @@
+//
+//  PaginationNumber.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationNumber.
+//  Renders "current/total" text on a translucent black rounded chip.
+//
+
+import SwiftUI
+
+// MARK: - PaginationNumber
+
+/// Mirrors Compose's `PaginationNumber(activeIndex, dataLength)`.
+public struct PaginationNumber: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 2) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        MomoText(
+            "\(1 + activeIndex)/\(dataLength)",
+            typography: .labelDefaultMedium,
+            color: Colors.black01
+        )
+        .padding(.horizontal, Spacing.S)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.L)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}

package/ios/Pagination/PaginationScroll.swift

@@ -0,0 +1,101 @@
+//
+//  PaginationScroll.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationScroll.
+//  Wraps arbitrary horizontally-scrollable content and renders a
+//  progress-bar style indicator whose position tracks the scroll offset.
+//
+
+import SwiftUI
+
+// MARK: - Constants
+
+private let INDICATOR_WIDTH: CGFloat = 24
+private let PROGRESS_WIDTH: CGFloat = 72
+
+/// Memoized offset calculation, mirroring Compose's `calculateOffset`.
+private func calculateOffset(currentPosition: CGFloat, maxBound: CGFloat) -> CGFloat {
+    guard maxBound > 0 else { return 0 }
+    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound)
+}
+
+// MARK: - PaginationScroll
+
+/// Mirrors Compose's `PaginationScroll(modifier, content)`.
+///
+/// The trailing-closure `content` is laid out in a horizontal scroll view and
+/// the indicator below reflects the current scroll progress.
+public struct PaginationScroll<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    private let content: Content
+
+    @State private var scrollOffset: CGFloat = 0
+    @State private var contentWidth: CGFloat = 0
+    @State private var viewportWidth: CGFloat = 0
+
+    public init(@ViewBuilder content: () -> Content) {
+        self.content = content()
+    }
+
+    private var maxBound: CGFloat {
+        max(contentWidth - viewportWidth, 0)
+    }
+
+    private var indicatorOffset: CGFloat {
+        calculateOffset(currentPosition: scrollOffset, maxBound: maxBound)
+    }
+
+    public var body: some View {
+        VStack(spacing: 0) {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 0) {
+                    content
+                }
+                .background(
+                    GeometryReader { proxy in
+                        Color.clear
+                            .preference(
+                                key: ScrollOffsetKey.self,
+                                value: -proxy.frame(in: .named("paginationScroll")).minX
+                            )
+                            .onAppear { contentWidth = proxy.size.width }
+                            .onChange(of: proxy.size.width) { contentWidth = $0 }
+                    }
+                )
+            }
+            .coordinateSpace(name: "paginationScroll")
+            .background(
+                GeometryReader { viewport in
+                    Color.clear
+                        .onAppear { viewportWidth = viewport.size.width }
+                        .onChange(of: viewport.size.width) { viewportWidth = $0 }
+                }
+            )
+            .onPreferenceChange(ScrollOffsetKey.self) { scrollOffset = max($0, 0) }
+            .padding(.bottom, Spacing.L)
+
+            // Progress indicator
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.background.pressed)
+                    .frame(width: PROGRESS_WIDTH, height: 4)
+
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.primary)
+                    .frame(width: INDICATOR_WIDTH, height: 4)
+                    .offset(x: indicatorOffset)
+            }
+        }
+    }
+}
+
+// MARK: - Preference key
+
+private struct ScrollOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}

package/ios/Pagination/PaginationWhiteDot.swift

@@ -0,0 +1,37 @@
+//
+//  PaginationWhiteDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationWhiteDot.
+//  Same dot layout as PaginationDot, but the active color is white
+//  (black_01) and the row sits on a translucent black rounded surface.
+//
+
+import SwiftUI
+
+// MARK: - PaginationWhiteDot
+
+/// Mirrors Compose's `PaginationWhiteDot(activeIndex, dataLength)`.
+public struct PaginationWhiteDot: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: Colors.black01)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+        .padding(Spacing.XS)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}

package/ios/Popup/PopupDisplay.swift

@@ -221,17 +221,13 @@ public struct PopupDisplay: View {
     var RowTextButtons: some View {
         HStack {
             SwiftUI.Button(action: onPressCloseButton) {
-                Text(closeButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
                 .padding(.trailing, 12)
 
             SwiftUI.Button(action: onPressAction) {
-                Text(actionButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
@@ -240,17 +236,13 @@ public struct PopupDisplay: View {
     var ColumnTextButtons: some View {
         VStack(alignment: .trailing) {
             SwiftUI.Button(action: onPressAction) {
-                Text(actionButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
                 .padding(.bottom, 6)
 
             SwiftUI.Button(action: onPressCloseButton) {
-                Text(closeButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))

package/ios/Popup/PopupInput.swift

@@ -35,17 +35,11 @@ public struct PopupInput: View {
 
                 VStack {
                     VStack(alignment: .leading) {
-                        Text(title)
-                            .foregroundColor(.black)
-                            .font(.headerText1)
-                            .ignoreBoldTextSetting()
+                        MomoText(title, typography: .headerDefaultBold, color: .black)
                             .padding(.top, 12)
                             .padding(.bottom, 24)
 
-                        Text(description)
-                            .foregroundColor(.black)
-                            .font(.paragraph)
-                            .ignoreBoldTextSetting()
+                        MomoText(description, typography: .bodyDefaultRegular, color: .black)
                             .opacity(0.6)
                             .multilineTextAlignment(.leading)
                             .padding(.bottom, 20)

package/ios/Popup/PopupNotify.swift

@@ -0,0 +1,219 @@
+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 {
+    public let props: PopupNotifyProps
+
+    @State private var descriptionHeight: CGFloat = 0
+
+    private var errorCodePrefix: String {
+        let language = UserDefaults.standard
+            .string(forKey: "language")?
+            .replacingOccurrences(of: "\"", with: "") ?? "vi"
+        return language == "en" ? "Error code: " : "Mã lỗi: "
+    }
+
+    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")
+    }
+}