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

package/ios/Popup/PopupPromotion.swift

@@ -0,0 +1,74 @@
+import SwiftUI
+import SDWebImageSwiftUI
+
+public struct PopupPromotion: View {
+    @Environment(\.appTheme) private var theme
+
+    var imageUrl: String
+    var onIconClose: (() -> Void)?
+    var onAction: (() -> Void)?
+
+
+    public init(
+        imageUrl: String,
+        onIconClose: (() -> Void)? = nil,
+        onAction: (() -> Void)? = nil
+    ) {
+        self.imageUrl = imageUrl
+        self.onIconClose = onIconClose
+        self.onAction = onAction
+    }
+
+    public var body: some View {
+        VStack(spacing: 8) {
+            if(imageUrl.isEmpty) {
+                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+            }
+            else {
+                WebImage(url: URL(string: imageUrl)!)
+                    .resizable()
+                    .placeholder {
+                        Color.gray
+                            .aspectRatio(0.72, contentMode: .fit)
+                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .clipped()
+                    }
+                    .aspectRatio(0.72, contentMode: .fit)
+                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .clipped()
+                    .onTapGesture {
+                        onAction?()
+                    }
+            }
+            buildCloseIcon()
+                .accessibility(identifier: "ic_popup_close")
+        }
+        .accessibilityElement(children: .ignore)
+        .accessibility(identifier: "popup_promotion")
+    }
+
+    @ViewBuilder
+    private func buildCloseIcon() -> some View {
+        HStack(alignment: .center, spacing: 0) {
+            SwiftUI.Button(action: {
+                onIconClose?()
+            }) {
+                ZStack {
+                    Circle()
+                        .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: theme.colors.background.surface)
+                }
+                .frame(width: 40, height: 40)
+                .padding(8)
+                .zIndex(1)
+            }
+        }
+    }
+
+}
+
+
+

package/ios/ProgressInfo/ProgressInfo.swift

@@ -0,0 +1,297 @@
+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 {
+    @Environment(\.momoFontScale) private var fontScale
+    let index: Int
+    let size: ProgressInfoSize
+    let useNumber: Bool
+    let customIcon: String?
+
+    var body: some View {
+        let containerSize = fontScale(size == .small ? 16 : 24)
+        let dotSize = fontScale(size == .small ? 6 : 8)
+        let iconSize = fontScale(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
+        }
+    }
+}

package/ios/Rating/Rating.swift

@@ -0,0 +1,83 @@
+import SwiftUI
+
+public enum RatingSize {
+    case small
+    case medium
+    case large
+
+    var iconSize: CGFloat {
+        switch self {
+        case .small: return 16
+        case .medium: return 20
+        case .large: return 24
+        }
+    }
+}
+
+public struct Rating: View {
+    @Environment(\.momoFontScale) private var fontScale
+    private let numOfStars: Int
+    private let rating: Float
+    private let onRatingChange: ((Int) -> Void)?
+    private let size: RatingSize
+
+    public init(
+        numOfStars: Int,
+        rating: Float,
+        onRatingChange: ((Int) -> Void)? = nil,
+        size: RatingSize = .large
+    ) {
+        self.numOfStars = numOfStars
+        self.rating = rating
+        self.onRatingChange = onRatingChange
+        self.size = size
+    }
+
+    public var body: some View {
+        HStack(spacing: 2) {
+            ForEach(0..<numOfStars, id: \.self) { index in
+                star(at: index)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func star(at index: Int) -> some View {
+        let icon = Icon(
+            source: starIcon(at: index),
+            size: fontScale(size.iconSize),
+            color: starColor(at: index)
+        )
+
+        if let onRatingChange = onRatingChange {
+            SwiftUI.Button(action: { onRatingChange(index + 1) }) {
+                icon
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            icon
+        }
+    }
+
+    private func starIcon(at index: Int) -> String {
+        let intRating = Int(rating)
+        if index < intRating {
+            return "reaction_star_full"
+        } else if index == intRating && rating.truncatingRemainder(dividingBy: 1) != 0 {
+            return "reaction_star_half"
+        } else {
+            return "reaction_star_non"
+        }
+    }
+
+    private func starColor(at index: Int) -> Color {
+        let intRating = Int(rating)
+        if index < intRating {
+            return Colors.yellow03
+        } else if index == intRating && rating.truncatingRemainder(dividingBy: 1) != 0 {
+            return Colors.yellow03
+        } else {
+            return Colors.black07
+        }
+    }
+}

package/{example/ios/Example/Preview Content/Preview Assets.xcassets/Contents.json → ios/Resources/MoMoUIKitsColors.xcassets/AccentColor.colorset/Contents.json}

@@ -1,4 +1,9 @@
 {
+  "colors" : [
+    {
+      "idiom" : "universal"
+    }
+  ],
   "info" : {
     "author" : "xcode",
     "version" : 1

package/{example/ios/Example/Assets.xcassets → ios/Resources/MoMoUIKitsColors.xcassets}/Text.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.282",
-          "green" : "0.216",
-          "red" : "0.169"
+          "blue" : "0.200",
+          "green" : "0.196",
+          "red" : "0.188"
         }
       },
       "idiom" : "universal"

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/Contents.json

@@ -0,0 +1,9 @@
+{
+  "info": {
+    "author": "xcode",
+    "version": 1
+  },
+  "properties": {
+    "provides-namespace": true
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/background-default.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xF2",
+          "green": "0xF2",
+          "blue": "0xF6",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x12",
+          "green": "0x12",
+          "blue": "0x12",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/background-disable.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xEB",
+          "green": "0xEB",
+          "blue": "0xF2",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x30",
+          "green": "0x30",
+          "blue": "0x30",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/background-pressed.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xDF",
+          "green": "0xDF",
+          "blue": "0xE6",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x1A",
+          "green": "0x1A",
+          "blue": "0x1A",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}