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

package/ios/Steps/Steps.swift

@@ -0,0 +1,467 @@
+import SwiftUI
+
+// ─── Data model ────────────────────────────────────────────────────────────────
+
+/// A single step rendered inside a ``Steps`` indicator.
+public struct StepItem: Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let description: String?
+    public let error: Bool
+    public let time: String?
+
+    public init(
+        title: String,
+        description: String? = nil,
+        error: Bool = false,
+        time: String? = nil
+    ) {
+        self.title = title
+        self.description = description
+        self.error = error
+        self.time = time
+    }
+}
+
+// ─── Enumerations ──────────────────────────────────────────────────────────────
+
+public enum StepsSize {
+    case small
+    case large
+}
+
+public enum StepsAlign {
+    case left
+    case right
+    case center
+    case stretch
+}
+
+// ─── Internal status ───────────────────────────────────────────────────────────
+
+private enum StepStatus {
+    case incomplete
+    case current
+    case completed
+    case error
+    case disabled
+}
+
+private func resolveStatus(
+    activeIndex: Int,
+    currentIndex: Int,
+    error: Bool,
+    disabled: Bool
+) -> StepStatus {
+    if disabled { return .disabled }
+    if error { return .error }
+    if activeIndex == currentIndex { return .current }
+    if activeIndex > currentIndex { return .completed }
+    return .incomplete
+}
+
+// ─── Color helpers ─────────────────────────────────────────────────────────────
+
+private func resolveIconBgAndBorder(_ status: StepStatus, theme: Theme) -> (bg: Color, border: Color) {
+    switch status {
+    case .current, .completed:
+        return (theme.colors.primary, theme.colors.background.tonal)
+    case .error:
+        return (theme.colors.error.primary, theme.colors.error.container)
+    case .disabled:
+        return (Colors.pink08, Colors.pink10)
+    case .incomplete:
+        return (Colors.black06, theme.colors.border.default)
+    }
+}
+
+private func resolveTitleColor(_ status: StepStatus, theme: Theme) -> Color {
+    switch status {
+    case .current:
+        return theme.colors.primary
+    case .error:
+        return theme.colors.error.primary
+    case .disabled:
+        return theme.colors.text.disable
+    default:
+        return theme.colors.text.default
+    }
+}
+
+// ─── Step bubble ───────────────────────────────────────────────────────────────
+
+private struct StepBubble: View {
+    @Environment(\.appTheme) private var theme
+
+    let index: Int
+    let isActive: Bool
+    let error: Bool
+    let size: StepsSize
+    let status: StepStatus
+    let useNumber: Bool
+    let customIcon: String?
+
+    private var bubbleSize: CGFloat { size == .small ? 16 : 24 }
+    private var innerSize: CGFloat { size == .small ? 12 : 16 }
+    private var dotSize: CGFloat { size == .small ? 6 : 8 }
+
+    var body: some View {
+        let colors = resolveIconBgAndBorder(status, theme: theme)
+        ZStack {
+            Circle()
+                .fill(colors.bg)
+                .overlay(Circle().strokeBorder(colors.border, lineWidth: 2))
+
+            bubbleContent
+        }
+        .frame(width: bubbleSize, height: bubbleSize)
+    }
+
+    @ViewBuilder
+    private var bubbleContent: some View {
+        if useNumber {
+            MomoText(
+                "\(index + 1)",
+                typography: .headerXsSemibold,
+                color: Colors.black01
+            )
+        } else if isActive {
+            if let customIcon = customIcon, !customIcon.isEmpty {
+                Icon(source: customIcon, size: innerSize, color: Colors.black01)
+            } else {
+                Circle()
+                    .fill(Colors.black01)
+                    .frame(width: dotSize, height: dotSize)
+            }
+        } else {
+            Icon(
+                source: error ? "navigation_close" : "notifications_check",
+                size: innerSize,
+                color: Colors.black01
+            )
+        }
+    }
+}
+
+// ─── Horizontal layout ─────────────────────────────────────────────────────────
+
+private struct StepsHorizontal: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [StepItem]
+    let activeIndex: Int
+    let size: StepsSize
+    let useNumber: Bool
+    let align: StepsAlign
+    let customIcon: String?
+    let disabled: Bool
+    let onPress: ((StepItem, Int) -> Void)?
+
+    private var completedLine: Color { theme.colors.primary.opacity(0.2) }
+    private var defaultLine: Color { theme.colors.background.default }
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                column(index: index, item: item)
+                    .frame(maxWidth: .infinity)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    @ViewBuilder
+    private func column(index: Int, item: StepItem) -> some View {
+        let status = resolveStatus(
+            activeIndex: activeIndex,
+            currentIndex: index,
+            error: item.error,
+            disabled: disabled
+        )
+        let isActiveOrError = status == .current || status == .error
+        let titleStyle: TypographyStyle = isActiveOrError
+            ? .headerXsSemibold : .descriptionDefaultRegular
+        let descStyle: TypographyStyle = size == .small
+            ? .descriptionXsRegular : .descriptionDefaultRegular
+        let titleColor = resolveTitleColor(status, theme: theme)
+        let subColor = disabled ? theme.colors.text.disable : theme.colors.text.hint
+
+        let colAlignment = horizontalAlignment(for: index)
+        let textAlignment = textAlign(for: index)
+
+        let hideLineLeft = align == .left || (align == .stretch && index == 0)
+        let hideLineRight = align == .right || (align == .stretch && index == steps.count - 1)
+
+        let lineLeft: Color = index == 0
+            ? Color.clear
+            : (activeIndex >= index ? completedLine : defaultLine)
+        let lineRight: Color = index == steps.count - 1
+            ? Color.clear
+            : (activeIndex > index ? completedLine : defaultLine)
+
+        let clickable = status == .completed && onPress != nil && !disabled
+
+        let columnBody = VStack(alignment: colAlignment, spacing: 0) {
+            if let time = item.time, !time.isEmpty {
+                MomoText(time, typography: .descriptionXsRegular, color: subColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+            }
+
+            HStack(spacing: 0) {
+                if !hideLineLeft {
+                    lineLeft
+                        .frame(height: 2)
+                        .frame(maxWidth: .infinity)
+                        .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topRight, .bottomRight]))
+                }
+                StepBubble(
+                    index: index,
+                    isActive: activeIndex == index,
+                    error: item.error,
+                    size: size,
+                    status: status,
+                    useNumber: useNumber,
+                    customIcon: customIcon
+                )
+                .padding(.leading, hideLineLeft ? 0 : Spacing.XS)
+                .padding(.trailing, hideLineRight ? 0 : Spacing.XS)
+                .padding(.vertical, Spacing.XS)
+                if !hideLineRight {
+                    lineRight
+                        .frame(height: 2)
+                        .frame(maxWidth: .infinity)
+                        .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topLeft, .bottomLeft]))
+                }
+            }
+            .frame(maxWidth: .infinity)
+
+            if !item.title.isEmpty {
+                MomoText(item.title, typography: titleStyle, color: titleColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+                    .padding(.bottom, Spacing.XXS)
+            }
+
+            if let desc = item.description, !desc.isEmpty {
+                MomoText(desc, typography: descStyle, color: subColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+            }
+        }
+        .contentShape(Rectangle())
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                columnBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            columnBody
+        }
+    }
+
+    private func horizontalAlignment(for index: Int) -> HorizontalAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if index == 0 { return .leading }
+            if index == steps.count - 1 { return .trailing }
+            return .center
+        }
+    }
+
+    private func textAlign(for index: Int) -> TextAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if index == 0 { return .leading }
+            if index == steps.count - 1 { return .trailing }
+            return .center
+        }
+    }
+
+    private func frameAlignment(_ h: HorizontalAlignment) -> Alignment {
+        switch h {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+}
+
+// ─── Vertical layout ───────────────────────────────────────────────────────────
+
+private struct StepsVertical: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [StepItem]
+    let activeIndex: Int
+    let size: StepsSize
+    let useNumber: Bool
+    let customIcon: String?
+    let disabled: Bool
+    let onPress: ((StepItem, Int) -> Void)?
+
+    private var completedLine: Color { theme.colors.primary.opacity(0.2) }
+    private var defaultLine: Color { theme.colors.background.default }
+    private var useSmall: Bool { size == .small }
+    private var connectorHeight: CGFloat { useSmall ? 24 : 32 }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                row(index: index, item: item)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    @ViewBuilder
+    private func row(index: Int, item: StepItem) -> some View {
+        let status = resolveStatus(
+            activeIndex: activeIndex,
+            currentIndex: index,
+            error: item.error,
+            disabled: disabled
+        )
+        let isActiveOrError = status == .current || status == .error
+        let isLast = index == steps.count - 1
+
+        let titleStyle: TypographyStyle = isActiveOrError
+            ? (useSmall ? .headerXsSemibold : .headerSSemibold)
+            : (useSmall ? .descriptionDefaultRegular : .bodyDefaultRegular)
+        let descStyle: TypographyStyle = useSmall
+            ? .descriptionXsRegular : .descriptionDefaultRegular
+
+        let titleColor = resolveTitleColor(status, theme: theme)
+        let subColor = disabled ? theme.colors.text.disable : theme.colors.text.hint
+        let lineColor = activeIndex > index ? completedLine : defaultLine
+
+        let clickable = status == .completed && onPress != nil && !disabled
+
+        let rowBody = HStack(alignment: .top, spacing: 0) {
+            VStack(spacing: 0) {
+                StepBubble(
+                    index: index,
+                    isActive: activeIndex == index,
+                    error: item.error,
+                    size: size,
+                    status: status,
+                    useNumber: useNumber,
+                    customIcon: customIcon
+                )
+                if !isLast {
+                    lineColor
+                        .frame(width: 2, height: connectorHeight)
+                        .padding(.vertical, Spacing.XS)
+                }
+            }
+            .padding(.trailing, Spacing.M)
+
+            VStack(alignment: .leading, spacing: 0) {
+                HStack(alignment: .top, spacing: 0) {
+                    MomoText(item.title, typography: titleStyle, color: titleColor)
+                        .lineLimit(2)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.trailing, Spacing.S)
+                    if let time = item.time, !time.isEmpty {
+                        MomoText(time, typography: .descriptionXsRegular, color: subColor)
+                    }
+                }
+                .frame(maxWidth: .infinity)
+
+                if let desc = item.description, !desc.isEmpty {
+                    MomoText(desc, typography: descStyle, color: subColor)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.top, Spacing.XXS)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.bottom, isLast ? 0 : Spacing.S)
+        }
+        .frame(maxWidth: .infinity)
+        .contentShape(Rectangle())
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                rowBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            rowBody
+        }
+    }
+}
+
+// ─── Public API ────────────────────────────────────────────────────────────────
+
+/// Steps — guided progress indicator through a sequence of procedural steps.
+///
+/// Mirrors the Compose `Steps` component.
+public struct Steps: View {
+    private let steps: [StepItem]
+    private let activeIndex: Int
+    private let horizontal: Bool
+    private let size: StepsSize
+    private let useNumber: Bool
+    private let align: StepsAlign
+    private let customIcon: String?
+    private let disabled: Bool
+    private let onPress: ((StepItem, Int) -> Void)?
+
+    public init(
+        steps: [StepItem],
+        activeIndex: Int,
+        horizontal: Bool = false,
+        size: StepsSize = .large,
+        useNumber: Bool = false,
+        align: StepsAlign = .center,
+        customIcon: String? = nil,
+        disabled: Bool = false,
+        onPress: ((StepItem, Int) -> Void)? = nil
+    ) {
+        self.steps = steps
+        self.activeIndex = activeIndex
+        self.horizontal = horizontal
+        self.size = size
+        self.useNumber = useNumber
+        self.align = align
+        self.customIcon = customIcon
+        self.disabled = disabled
+        self.onPress = onPress
+    }
+
+    public var body: some View {
+        if horizontal {
+            StepsHorizontal(
+                steps: steps,
+                activeIndex: activeIndex,
+                size: size,
+                useNumber: useNumber,
+                align: align,
+                customIcon: customIcon,
+                disabled: disabled,
+                onPress: onPress
+            )
+        } else {
+            StepsVertical(
+                steps: steps,
+                activeIndex: activeIndex,
+                size: size,
+                useNumber: useNumber,
+                customIcon: customIcon,
+                disabled: disabled,
+                onPress: onPress
+            )
+        }
+    }
+}

package/ios/SuggestAction/SuggestAction.swift

@@ -0,0 +1,100 @@
+import SwiftUI
+import Foundation
+
+public struct SuggestAction: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+
+    private let message: String
+    private let buttonTitle: String
+    private let boldMessage: String
+    private let image: String
+    private let visible: Bool
+    private let onClose: () -> Void
+    private let onPressButton: () -> Void
+
+    public init(
+        message: String,
+        buttonTitle: String,
+        boldMessage: String = "",
+        image: String = "",
+        visible: Bool = false,
+        onClose: @escaping () -> Void = {},
+        onPressButton: @escaping () -> Void = {}
+    ) {
+        self.message = message
+        self.buttonTitle = buttonTitle
+        self.boldMessage = boldMessage
+        self.image = image
+        self.visible = visible
+        self.onClose = onClose
+        self.onPressButton = onPressButton
+    }
+
+    // Builds an attributed string with `boldMessage` (case-insensitive) emphasized.
+    private var annotatedMessage: AttributedString {
+        let baseFont = Font.system(size: fontScale(TypographyStyle.bodyDefaultRegular.fontSize), weight: .regular)
+        var attributed = AttributedString(message)
+        attributed.font = baseFont
+
+        guard !boldMessage.isEmpty,
+              let range = message.range(of: boldMessage, options: .caseInsensitive)
+        else {
+            return attributed
+        }
+
+        if let boldRange = Range(range, in: attributed) {
+            attributed[boldRange].font = Font.system(
+                size: fontScale(TypographyStyle.bodyDefaultRegular.fontSize),
+                weight: .bold
+            )
+        }
+        return attributed
+    }
+
+    public var body: some View {
+        Group {
+            if visible {
+                HStack(spacing: 0) {
+                    if !image.isEmpty {
+                        ImageView(image)
+                            .frame(width: 32, height: 32)
+                            .clipShape(RoundedRectangle(cornerRadius: Radius.XS, style: .continuous))
+                        Spacer().frame(width: Spacing.S)
+                    }
+
+                    Text(annotatedMessage)
+                        .foregroundColor(theme.colors.text.default)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.trailing, Spacing.M)
+
+                    Button(
+                        title: buttonTitle,
+                        action: { onPressButton() },
+                        type: .tonal,
+                        size: .small,
+                        isFull: false
+                    )
+
+                    Spacer().frame(width: Spacing.S)
+
+                    SwiftUI.Button(action: onClose) {
+                        Icon(source: "navigation_close", size: 24, color: theme.colors.text.default)
+                            .contentShape(Rectangle())
+                    }
+                    .buttonStyle(ActiveOpacityButtonStyle())
+                }
+                .padding(Spacing.M)
+                .frame(maxWidth: .infinity)
+                .background(
+                    RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
+                        .fill(theme.colors.background.surface)
+                )
+                .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
+                .shadow(color: theme.colors.text.default.opacity(0.12), radius: 8, x: 0, y: 4)
+                .transition(.opacity)
+            }
+        }
+        .animation(.easeInOut, value: visible)
+    }
+}