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

package/ios/Badge/Badge.swift

@@ -0,0 +1,84 @@
+import SwiftUI
+
+public struct Badge: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    let label: String
+    let backgroundColor: Color?
+    
+    private var primaryColors: [Color] {
+        [
+            Colors.black03,
+            Colors.pink03,
+            Colors.violet03,
+            Colors.indigo03,
+            Colors.blue03,
+            Colors.mint03,
+            Colors.green03,
+            Colors.lime03,
+            Colors.yellow03,
+            Colors.gold03,
+            Colors.orange03,
+            Colors.red03
+        ]
+    }
+    
+    public init(label: String = "Label", backgroundColor: Color? = nil) {
+        self.label = label
+        self.backgroundColor = backgroundColor
+    }
+    
+    private func isNumber(_ text: String) -> Bool {
+        return text.range(of: "^\\d+$", options: .regularExpression) != nil
+    }
+    
+    private func formatTitle(_ text: String) -> String {
+        if isNumber(text), let number = Int(text), number > 99 {
+            return "99+"
+        }
+        return text
+    }
+    
+    private var badgeColor: Color {
+        // Default colors based on label type
+        let defaultColor: Color = isNumber(label)
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary
+
+        // Mirror Compose: only apply backgroundColor when it is one of the
+        // allowed primaryColors; otherwise fall back to the label-based default.
+        if let bgColor = backgroundColor, primaryColors.contains(bgColor) {
+            return bgColor
+        }
+        return defaultColor
+    }
+    
+    public var body: some View {
+        MomoText(formatTitle(label), typography: .actionXxsBold, color: Colors.black01)
+            .padding(.horizontal, Spacing.XS)
+            .frame(minWidth: fontScale(16), minHeight: fontScale(16))
+            .background(badgeColor)
+            .cornerRadius(Radius.M)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(Colors.black01, lineWidth: 1)
+            )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Badge_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 20) {
+            Badge(label: "5")
+            Badge(label: "99")
+            Badge(label: "100")
+            Badge(label: "New")
+            Badge(label: "Hot", backgroundColor: Colors.pink03)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

package/ios/Badge/BadgeDot.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+public enum DotSize {
+    case small
+    case large
+    
+    var size: CGFloat {
+        switch self {
+        case .small: return 10
+        case .large: return 16
+        }
+    }
+}
+
+public struct BadgeDot: View {
+    var size: DotSize
+    
+    public init(size: DotSize = .large) {
+        self.size = size
+    }
+    
+    public var body: some View {
+        Circle()
+            .fill(Colors.red03)
+            .frame(width: size.size, height: size.size)
+            .overlay(
+                Circle()
+                    .stroke(Colors.black01, lineWidth: 1)
+            )
+    }
+}

package/ios/Badge/BadgeRibbon.swift

@@ -0,0 +1,319 @@
+import SwiftUI
+
+// MARK: - Custom Shape for Rounded Corners
+struct RoundedCorners: Shape {
+    var topLeft: CGFloat = 0.0
+    var topRight: CGFloat = 0.0
+    var bottomLeft: CGFloat = 0.0
+    var bottomRight: CGFloat = 0.0
+    
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        
+        let width = rect.size.width
+        let height = rect.size.height
+        
+        // Start from top left
+        path.move(to: CGPoint(x: topLeft, y: 0))
+        
+        // Top edge and top right corner
+        path.addLine(to: CGPoint(x: width - topRight, y: 0))
+        if topRight > 0 {
+            path.addArc(
+                center: CGPoint(x: width - topRight, y: topRight),
+                radius: topRight,
+                startAngle: Angle(degrees: -90),
+                endAngle: Angle(degrees: 0),
+                clockwise: false
+            )
+        }
+        
+        // Right edge and bottom right corner
+        path.addLine(to: CGPoint(x: width, y: height - bottomRight))
+        if bottomRight > 0 {
+            path.addArc(
+                center: CGPoint(x: width - bottomRight, y: height - bottomRight),
+                radius: bottomRight,
+                startAngle: Angle(degrees: 0),
+                endAngle: Angle(degrees: 90),
+                clockwise: false
+            )
+        }
+        
+        // Bottom edge and bottom left corner
+        path.addLine(to: CGPoint(x: bottomLeft, y: height))
+        if bottomLeft > 0 {
+            path.addArc(
+                center: CGPoint(x: bottomLeft, y: height - bottomLeft),
+                radius: bottomLeft,
+                startAngle: Angle(degrees: 90),
+                endAngle: Angle(degrees: 180),
+                clockwise: false
+            )
+        }
+        
+        // Left edge and top left corner
+        path.addLine(to: CGPoint(x: 0, y: topLeft))
+        if topLeft > 0 {
+            path.addArc(
+                center: CGPoint(x: topLeft, y: topLeft),
+                radius: topLeft,
+                startAngle: Angle(degrees: 180),
+                endAngle: Angle(degrees: 270),
+                clockwise: false
+            )
+        }
+        
+        path.closeSubpath()
+        return path
+    }
+}
+
+public enum RibbonPosition {
+    case topLeft
+    case topRight
+    case bottomLeft
+    case bottomRight
+}
+
+public struct BadgeRibbon: View {
+    @Environment(\.appTheme) private var theme
+    let position: RibbonPosition
+    let label: String
+    let isRound: Bool
+    let backgroundColor: Color?
+    
+    public init(
+        position: RibbonPosition = .topRight,
+        label: String = "Label",
+        isRound: Bool = false,
+        backgroundColor: Color? = nil
+    ) {
+        self.position = position
+        self.label = label
+        self.isRound = isRound
+        self.backgroundColor = backgroundColor
+    }
+    
+    private var rotation: Angle {
+        switch position {
+        case .topRight, .bottomRight:
+            return .degrees(180)
+        case .topLeft, .bottomLeft:
+            return .zero
+        }
+    }
+    
+    private var useUpTail: Bool {
+        position == .bottomLeft || position == .topRight
+    }
+    
+    private var verticalAlignment: VerticalAlignment {
+        switch position {
+        case .topLeft, .bottomRight:
+            return .top
+        case .bottomLeft, .topRight:
+            return .bottom
+        }
+    }
+    
+    public var body: some View {
+        let bgColor = backgroundColor ?? theme.colors.warning.primary
+
+        HStack(alignment: verticalAlignment, spacing: 0) {
+            if useUpTail {
+                upTail
+            } else {
+                downTail
+            }
+            
+            if isRound {
+                roundContent(backgroundColor: bgColor)
+            } else {
+                skewContent(backgroundColor: bgColor)
+            }
+        }
+        .frame(height: RibbonConstants.ribbonHeight)
+        .rotationEffect(rotation)
+    }
+    
+    private func roundContent(backgroundColor: Color) -> some View {
+        HStack(spacing: 0) {
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
+                .rotationEffect(rotation)
+        }
+        .frame(height: RibbonConstants.roundHeight)
+        .padding(.trailing, RibbonConstants.roundPaddingEnd)
+        .background(
+            RoundedCorners(
+                topLeft: 0,
+                topRight: RibbonConstants.roundRightRadius,
+                bottomLeft: 0,
+                bottomRight: RibbonConstants.roundRightRadius
+            )
+            .fill(backgroundColor)
+        )
+    }
+    
+    private func skewContent(backgroundColor: Color) -> some View {
+        HStack(spacing: 0) {
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
+                .rotationEffect(rotation)
+                .frame(height: RibbonConstants.skewBodyHeight)
+                .padding(.horizontal, 8)
+                .background(backgroundColor)
+            
+            rightTail
+        }
+    }
+    
+    private var upTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .rotationEffect(.degrees(180))
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var downTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var rightTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Tail_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
+        .offset(x: -2)
+        .clipped()
+    }
+}
+
+/// Ported from Compose's `RoundedBadgeRibbon` (BadgeRibbon.kt:164-326): a canvas-drawn
+/// ribbon shape sized to its text, mirrored per corner via scaleX/scaleY (never an actual
+/// rotation) — the label gets the same scale applied a second time so it stays right-reading
+/// while only the ribbon shape flips.
+public struct RoundedBadgeRibbon: View {
+    @Environment(\.momoFontScale) private var fontScale
+    let text: String
+    let position: RibbonPosition
+
+    public init(text: String = "Label", position: RibbonPosition = .topLeft) {
+        self.text = text
+        self.position = position
+    }
+
+    private var scale: (x: CGFloat, y: CGFloat) {
+        switch position {
+        case .topLeft: return (-1, 1)
+        case .topRight: return (1, 1)
+        case .bottomRight: return (1, -1)
+        case .bottomLeft: return (-1, -1)
+        }
+    }
+
+    private var measuredTextSize: CGSize {
+        let fontSize = fontScale(TypographyStyle.labelXsMedium.fontSize)
+        let font = UIFont.systemFont(ofSize: fontSize, weight: .medium)
+        return text.size(withAttributes: [.font: font])
+    }
+
+    public var body: some View {
+        let textSize = measuredTextSize
+        let minRibbonHeight = max(textSize.height * 1.2, 16)
+        let padding = minRibbonHeight / 4
+        let badgeHeight = minRibbonHeight + padding
+        let badgeWidth = max(textSize.width + padding * 2, 28)
+
+        ZStack {
+            Canvas { context, size in
+                let ribbonHeight = size.height - padding
+                let cornerRadius = (badgeHeight - padding) / 2
+                let mainColor = Colors.orange03
+                let tailColor = Colors.red01
+
+                let headWidth: CGFloat = 4
+                // Kotlin computes `leftSectionWidth` + `middleSectionWidth` here, but those
+                // cancel algebraically to `width - headWidth` — kept as the direct result.
+                let rightX = size.width - headWidth
+
+                let leftMiddlePath = RoundedCorners(topLeft: cornerRadius, topRight: 0, bottomLeft: cornerRadius, bottomRight: 0)
+                    .path(in: CGRect(x: 0, y: 0, width: rightX + 1, height: ribbonHeight))
+                context.fill(leftMiddlePath, with: .color(mainColor))
+
+                let headPath = RoundedCorners(topLeft: 0, topRight: cornerRadius, bottomLeft: 0, bottomRight: 0)
+                    .path(in: CGRect(x: rightX, y: 0, width: headWidth, height: ribbonHeight))
+                context.fill(headPath, with: .color(mainColor))
+
+                let halfHeadWidth = headWidth / 2
+                let tailStartX = rightX + headWidth - halfHeadWidth
+                let tailY = ribbonHeight
+                let tailHeight = padding
+
+                context.fill(
+                    Path(CGRect(x: tailStartX, y: tailY, width: halfHeadWidth, height: halfHeadWidth)),
+                    with: .color(mainColor)
+                )
+
+                let tailRightPath = RoundedCorners(topLeft: 0, topRight: tailHeight, bottomLeft: 0, bottomRight: tailHeight)
+                    .path(in: CGRect(x: tailStartX, y: tailY, width: halfHeadWidth, height: tailHeight))
+                context.fill(tailRightPath, with: .color(tailColor))
+            }
+
+            MomoText(text, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
+                .padding(.bottom, padding)
+                .padding(.horizontal, padding / 2)
+                .scaleEffect(x: scale.x, y: scale.y)
+        }
+        .frame(width: badgeWidth, height: badgeHeight)
+        .scaleEffect(x: scale.x, y: scale.y)
+    }
+}
+
+// MARK: - Constants
+private struct RibbonConstants {
+    static let ribbonHeight: CGFloat = 20
+    static let roundHeight: CGFloat = 16
+    static let skewBodyHeight: CGFloat = 16
+    static let roundRightRadius: CGFloat = 8
+    static let roundPaddingEnd: CGFloat = 6
+    static let skewTailWidth: CGFloat = 8
+    static let skewTailHeight: CGFloat = 16
+    static let headTailWidth: CGFloat = 5
+    static let headTailHeight: CGFloat = 20
+}
+
+// MARK: - String Extension for Text Size
+extension String {
+    func size(withAttributes attributes: [NSAttributedString.Key: Any]?) -> CGSize {
+        let size = (self as NSString).size(withAttributes: attributes)
+        return size
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct BadgeRibbon_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 30) {
+            // Basic ribbon examples
+            BadgeRibbon(position: .topRight, label: "New")
+            BadgeRibbon(position: .topLeft, label: "Hot", isRound: true)
+            BadgeRibbon(position: .bottomLeft, label: "Sale")
+            BadgeRibbon(position: .bottomRight, label: "50% OFF", isRound: true)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

package/ios/BaselineView/BaselineView.swift

@@ -0,0 +1,163 @@
+import SwiftUI
+
+public struct BaselineView: View {
+    private let enabled: Bool
+
+    public init(enabled: Bool = true) {
+        self.enabled = enabled
+    }
+
+    public var body: some View {
+        if enabled {
+            GeometryReader { geometry in
+                let topInset = geometry.safeAreaInsets.top
+                let bottomInset = min(geometry.safeAreaInsets.bottom, 21)
+
+                ZStack(alignment: .topLeading) {
+                    dangerZones(topInset: topInset, bottomInset: bottomInset)
+                    guideLines(
+                        topInset: topInset,
+                        bottomInset: bottomInset,
+                        width: geometry.size.width
+                    )
+                }
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .ignoresSafeArea()
+                .allowsHitTesting(false)
+                .accessibilityHidden(true)
+            }
+        }
+    }
+
+    private func dangerZones(topInset: CGFloat, bottomInset: CGFloat) -> some View {
+        let safeBackground = Color.red.opacity(0.15)
+
+        return ZStack(alignment: .topLeading) {
+            safeBackground
+                .frame(maxWidth: .infinity)
+                .frame(height: topInset)
+
+            HStack(spacing: 0) {
+                safeBackground
+                    .frame(width: 12)
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(width: 12)
+            }
+            .padding(.top, topInset)
+            .padding(.bottom, bottomInset)
+
+            VStack(spacing: 0) {
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(maxWidth: .infinity)
+                    .frame(height: bottomInset)
+            }
+        }
+    }
+
+    private func guideLines(topInset: CGFloat, bottomInset: CGFloat, width: CGFloat) -> some View {
+        ZStack(alignment: .topLeading) {
+            baselineLine(isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(y: topInset)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 52)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 104)
+
+            bottomLine(bottomInset: bottomInset + 64, color: Color(hex: 0xE400FF))
+
+            bottomLine(bottomInset: bottomInset, isDotted: false, color: Color(hex: 0xE400FF))
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: 12)
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: width - 12)
+
+            baselineLine(color: Color(hex: 0xFF7A00))
+                .offset(y: topInset + 26)
+
+            bottomLine(bottomInset: bottomInset + 56, color: Color(hex: 0xFFCC00))
+
+            bottomLine(bottomInset: bottomInset + 8, color: Color(hex: 0xFFCC00))
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 40, y: topInset)
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 48, y: topInset)
+        }
+    }
+
+    private func bottomLine(
+        bottomInset: CGFloat,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        VStack(spacing: 0) {
+            Spacer(minLength: 0)
+            baselineLine(isDotted: isDotted, color: color)
+                .padding(.bottom, bottomInset)
+        }
+    }
+
+    private func baselineLine(
+        orientation: BaselineOrientation = .horizontal,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        BaselineLineShape(orientation: orientation)
+            .stroke(
+                color,
+                style: StrokeStyle(
+                    lineWidth: 1,
+                    lineCap: .round,
+                    dash: isDotted ? [8, 8] : []
+                )
+            )
+            .frame(
+                maxWidth: orientation == .horizontal ? .infinity : 1,
+                maxHeight: orientation == .vertical ? .infinity : 1
+            )
+    }
+}
+
+public enum BaselineOrientation: Sendable {
+    case horizontal
+    case vertical
+}
+
+private struct BaselineLineShape: Shape {
+    let orientation: BaselineOrientation
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        switch orientation {
+        case .horizontal:
+            path.move(to: CGPoint(x: rect.minX, y: rect.midY))
+            path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
+        case .vertical:
+            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
+            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
+        }
+
+        return path
+    }
+}
+
+#if DEBUG
+struct BaselineView_Previews: PreviewProvider {
+    static var previews: some View {
+        ZStack {
+            Colors.black01
+            BaselineView()
+        }
+    }
+}
+#endif