@momo-kits/native-kits 0.152.4-beta.1 → 0.152.4-beta.10

package/ios/Badge/BadgeRibbon.swift

@@ -0,0 +1,174 @@
+import SwiftUI
+
+public enum RibbonPosition {
+    case topLeft
+    case topRight
+    case bottomLeft
+    case bottomRight
+}
+
+public struct BadgeRibbon: View {
+    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 ?? Colors.orange03
+    }
+    
+    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 {
+        HStack(alignment: verticalAlignment, spacing: 0) {
+            if useUpTail {
+                upTail
+            } else {
+                downTail
+            }
+            
+            if isRound {
+                roundContent
+            } else {
+                skewContent
+            }
+        }
+        .frame(height: RibbonConstants.ribbonHeight)
+        .rotationEffect(rotation)
+    }
+    
+    private var roundContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(1)
+                .rotationEffect(rotation)
+        }
+        .frame(height: RibbonConstants.roundHeight)
+        .padding(.trailing, RibbonConstants.roundPaddingEnd)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.M)
+                .fill(backgroundColor)
+                .mask(
+                    HStack(spacing: 0) {
+                        Rectangle()
+                        RoundedRectangle(cornerRadius: Radius.M)
+                    }
+                )
+        )
+    }
+    
+    private var skewContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(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()
+    }
+}
+
+// MARK: - Constants
+private struct RibbonConstants {
+    static let ribbonHeight: CGFloat = 20
+    static let roundHeight: CGFloat = 16
+    static let skewBodyHeight: CGFloat = 16
+    static let roundRightRadius: CGFloat = 12
+    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/Button/Button.swift

@@ -0,0 +1,211 @@
+import Foundation
+import SwiftUI
+import Lottie
+
+// MARK: - ButtonType
+
+public enum ButtonType {
+    case primary
+    case secondary
+    case tonal
+    case outline
+    case danger
+    case text
+    case disabled
+}
+
+// MARK: - ButtonSize
+
+public enum ButtonSize {
+    case large
+    case medium
+    case small
+}
+
+public struct ButtonStyleData {
+    let background: Color
+    let content: Color
+    let border: Color?
+    let borderWidth: CGFloat
+}
+
+public extension ButtonType {
+    func backgroundColor(loading: Bool) -> Color {
+        switch self {
+        case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
+        case .primary:  return Colors.primary.opacity(loading ? 0.75 : 1)
+        case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
+        case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
+        case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
+        case .danger: return Colors.error.opacity(loading ? 0.75 : 1)
+        case .text: return .clear
+        }
+    }
+
+    func contentColor(loading: Bool) -> Color {
+        switch self {
+        case .disabled: return Colors.black06.opacity(loading ? 0.75 : 1)
+        case .primary: return Colors.black01
+        case .secondary: return Colors.black17
+        case .outline: return Colors.primary
+        case .tonal: return Colors.primary
+        case .danger: return Colors.black01
+        case .text: return Colors.primary
+        }
+    }
+
+    var borderColor: Color? {
+        switch self {
+        case .outline: return Colors.primary
+        case .secondary: return Colors.black04
+        default: return nil
+        }
+    }
+
+    var borderWidth: CGFloat {
+        switch self {
+        case .outline: return 1
+        case .secondary: return 1
+        default: return 0
+        }
+    }
+}
+
+extension ButtonSize {
+    var height: CGFloat {
+        switch self {
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
+        }
+    }
+
+    var padding: CGFloat {
+        switch self {
+        case .large: return Spacing.L
+        case .medium: return Spacing.M
+        case .small: return Spacing.S
+        }
+    }
+
+    var radius: CGFloat {
+        Radius.S
+    }
+
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .medium, .small: return 16
+        }
+    }
+
+    var iconSpacing: CGFloat {
+        switch self {
+        case .small: return Spacing.XS
+        case .medium, .large: return Spacing.S
+        }
+    }
+
+    var font: Font {
+        switch self {
+        case .large: return .system(size: 16, weight: .bold)
+        case .medium: return .system(size: 14, weight: .bold)
+        case .small: return .system(size: 12, weight: .bold)
+        }
+    }
+}
+
+public struct Button: View {
+
+    var title: String
+    var action: () -> Void
+    var type: ButtonType
+    var size: ButtonSize
+    var iconLeft: AnyView?
+    var iconRight: AnyView?
+    var loading: Bool
+
+    public init(
+        title: String = "",
+        action: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: ButtonSize = .large,
+        iconLeft: AnyView? = nil,
+        iconRight: AnyView? = nil,
+        loading: Bool = false
+    ) {
+        self.title = title
+        self.action = action
+        self.type = type
+        self.size = size
+        self.iconLeft = iconLeft
+        self.iconRight = iconRight
+        self.loading = loading
+    }
+
+    private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
+        let hasLeft = left != nil
+        let hasRight = right != nil
+
+        switch (hasLeft, hasRight) {
+        case (false, false): return true
+        case (true, false): return true
+        case (false, true): return false
+        case (true, true): return false
+        }
+    }
+
+    public var body: some View {
+
+        let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
+
+        let bg = type.backgroundColor(loading: loading)
+        let fg = type.contentColor(loading: loading)
+        let border = type.borderColor
+        let borderWidth = type.borderWidth
+
+        SwiftUI.Button(action: {
+            if !loading && type != .disabled {
+                action()
+            }
+        }) {
+            HStack(spacing: size.iconSpacing) {
+
+                if loading && loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
+                } else if let iconLeft = iconLeft {
+                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                }
+
+                Text(title)
+                    .font(size.font)
+                    .foregroundColor(fg)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+
+                if loading && !loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
+                } else if let iconRight = iconRight {
+                    iconRight.frame(width: size.iconSize, height: size.iconSize)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.horizontal, size.padding)
+            .frame(height: size.height)
+            .background(bg)
+            .overlay(
+                RoundedRectangle(cornerRadius: size.radius)
+                    .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+            )
+            .clipShape(RoundedRectangle(cornerRadius: size.radius))
+            .opacity(loading ? 0.75 : 1)
+        }
+        .disabled(type == .disabled || loading)
+    }
+}

package/ios/CalculatorKeyboard/CalculatorKeyboard.swift

@@ -0,0 +1,126 @@
+
+import Foundation
+import SwiftUI
+
+// MARK: - CalculatorKeyboard
+
+
+extension String {
+    var isNumber: Bool {
+        let digitsCharacters = CharacterSet(charactersIn: "0123456789")
+        return CharacterSet(charactersIn: self).isSubset(of: digitsCharacters)
+    }
+}
+
+
+public struct CalculatorKeyboard: View {
+    // MARK: Lifecycle
+    @Binding var value: String
+    @State var tempValue: String = ""
+    
+    public init(_ value: Binding<String>) {
+        self._value = value
+    }
+    
+    func onPressBack(){
+        if (value.count > 0 ){
+            value.removeLast()
+        }
+        
+    }
+    
+    func onPressClear(key: String){
+        value = ""
+        tempValue = ""
+    }
+    
+    func onPressEqual(key: String){
+        if (tempValue == "") {
+            return
+        }
+        if (tempValue.last?.isNumber == false){
+            tempValue.removeLast()
+        }
+        let expression = NSExpression(format: tempValue)
+        
+        value = String(expression.expressionValue(with: nil, context: nil) as! Int)
+        if (Int(value) ?? 0 < 0){
+            value = ""
+        }
+    }
+    
+    func onPressKey(key:String){
+        if (tempValue.last?.isNumber == false){
+            if (key.isNumber == false){
+                return
+            }
+        }
+        var convertedKey = key
+        if (key == "x") {convertedKey = "*"}
+        if (key == "÷") {convertedKey = "/"}
+        if (value == "" && (key == "0" || key == "000" || key.isNumber == false)) {
+            return
+        }
+        else {
+            value.append(key)
+            tempValue.append(convertedKey)
+        }
+    }
+    
+    // MARK: Public
+    
+    public var body: some View {
+        return GeometryReader { geo in
+            VStack {
+                HStack {
+                    KeyboardButton("AC", action: self.onPressClear, color: Colors.pink07, textColor: Colors.black01)
+                    KeyboardButton("÷", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                    KeyboardButton("x", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                    
+                    SwiftUI.Button(action: onPressBack) {
+                        HStack {
+                            Image(
+                                systemName: "delete.backward"
+                            ).foregroundColor(Colors.black01)
+                        }.frame(maxWidth: .infinity, minHeight: 48)
+                            .background(Colors.pink07)
+                            .foregroundColor(Colors.black01)
+                            .clipShape(RoundedRectangle(cornerRadius: 8))
+                    }
+                }
+                
+                HStack {
+                    KeyboardButton("7", action: self.onPressKey)
+                    KeyboardButton("8", action: self.onPressKey)
+                    KeyboardButton("9", action: self.onPressKey)
+                    KeyboardButton("-", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                }
+                
+                HStack {
+                    KeyboardButton("4", action: self.onPressKey)
+                    KeyboardButton("5", action: self.onPressKey)
+                    KeyboardButton("6", action: self.onPressKey)
+                    KeyboardButton("+", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                }
+                
+                HStack{
+                    VStack{
+                        HStack {
+                            KeyboardButton("1", action: self.onPressKey)
+                            KeyboardButton("2", action: self.onPressKey)
+                            KeyboardButton("3", action: self.onPressKey)
+                        }
+                        
+                        HStack{
+                            KeyboardButton("000", action: self.onPressKey)
+                            KeyboardButton("0", action: self.onPressKey, width: CGFloat(geo.size.width * 0.25 - 5))
+                        }
+                    }
+                    
+                    KeyboardButton("=", action: self.onPressEqual, width: CGFloat(geo.size.width * 0.25 - 5), height: 102, color: Colors.primary, textColor: Colors.black01)
+                    
+                }
+            }.background(Colors.background)
+        }
+    }
+}

package/ios/Checkbox/Checkbox.swift

@@ -0,0 +1,81 @@
+import Foundation
+import SwiftUI
+
+public struct Checkbox: View{
+    @Binding var checked: Bool
+    var disabled: Bool
+    var onChange: ((Bool)->Void)?
+    var indeterminate: Bool
+    var title: String
+
+
+    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ( (Bool) -> Void)? = nil,
+                indeterminate: Bool = false,
+                title: String = ""){
+        self._checked = checked
+        self.disabled = disabled
+        self.onChange = onChange
+        self.indeterminate = indeterminate
+        self.title = title
+    }
+
+    func onCheck(){
+        checked.toggle()
+        onChange?(checked)
+    }
+
+    public var body: some View {
+        HStack(spacing: Spacing.S) {
+            // Checkbox
+            ZStack {
+                RoundedRectangle(cornerRadius: Radius.XS)
+                    .fill(backgroundColor)
+                    .frame(width: 20, height: 20)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: Radius.XS)
+                            .stroke(borderColor, lineWidth: Spacing.XXS)
+                    )
+
+                if checked {
+                    Image(systemName: indeterminate ? "minus.square.fill" : "checkmark.square.fill")
+                        .resizable()
+                        .foregroundColor(backgroundColor)
+                        .background(Colors.black01)
+                        .frame(width: 20, height: 20)
+                }
+            }
+
+            .onTapGesture {
+                if !disabled {
+                    onCheck()
+                }
+            }
+
+            // Title
+            if !title.isEmpty {
+                Text(title)
+                    .font(.description1)
+            }
+        }
+    }
+
+    private var borderColor: Color {
+        if disabled {
+            return Colors.black03
+        } else if checked {
+            return Colors.primary
+        } else {
+            return Colors.text
+        }
+    }
+
+    private var backgroundColor: Color {
+        if disabled && checked {
+            return Colors.pink08
+        } else if checked {
+            return Colors.primary
+        } else {
+            return Color.clear
+        }
+    }
+}

package/ios/Chip/Chip.swift

@@ -0,0 +1,96 @@
+import SwiftUI
+import Foundation
+
+public struct Chip: View {
+    public enum ChipSize { case small, large }
+
+    public struct Dimensions {
+        let horizontal: CGFloat
+        let vertical: CGFloat
+        let iconSize: CGFloat
+        let iconSpacing: CGFloat
+    }
+
+    public static let Large = Dimensions(horizontal: 12, vertical: 8, iconSize: 20, iconSpacing: 8)
+    public static let Small = Dimensions(horizontal: 10, vertical: 6, iconSize: 16, iconSpacing: 6)
+
+    private let label: String?
+    private let iconLeft: String?
+    private let iconRight: String?
+    private let selected: Bool
+    private let onClick: () -> Void
+    private let size: ChipSize
+    private let iconLeftTint: Color?
+    private let iconRightTint: Color?
+    private let backgroundColor: Color?
+    private let accessibilityLabel: String?
+
+    public init(
+        label: String? = "Label",
+        iconLeft: String? = nil,
+        iconRight: String? = nil,
+        selected: Bool = false,
+        onClick: @escaping () -> Void = {},
+        size: ChipSize = .large,
+        iconLeftTint: Color? = nil,
+        iconRightTint: Color? = nil,
+        backgroundColor: Color? = nil,
+        accessibilityLabel: String? = nil
+    ) {
+        self.label = label
+        self.iconLeft = iconLeft
+        self.iconRight = iconRight
+        self.selected = selected
+        self.onClick = onClick
+        self.size = size
+        self.iconLeftTint = iconLeftTint
+        self.iconRightTint = iconRightTint
+        self.backgroundColor = backgroundColor
+        self.accessibilityLabel = accessibilityLabel
+    }
+
+    public var body: some View {
+        let dims = (size == .small) ? Self.Small : Self.Large
+
+        let bg: Color = {
+            if selected { return Colors.pink10 }
+            if let explicit = backgroundColor { return explicit }
+            return Colors.black03
+        }()
+
+        let textColor: Color = selected ? Colors.primary : Colors.text
+        let leftTint: Color = selected ? Colors.primary : iconLeftTint ?? Colors.text
+        let rightTint: Color = selected ? Colors.primary : iconRightTint ?? Colors.text
+
+        HStack(spacing: dims.iconSpacing) {
+            if let iconLeft {
+                Icon(source: iconLeft, size: dims.iconSize, color: leftTint)
+            }
+
+            if let text = label, !text.isEmpty {
+                MomoText(text, typography: (size == .large) ? .labelDefaultMedium : .labelSMedium, color: textColor)
+                    .lineLimit(1)
+            }
+
+            if let iconRight {
+                Icon(source: iconRight, size: dims.iconSize, color: rightTint)
+            }
+        }
+        .padding(.horizontal, dims.horizontal)
+        .padding(.vertical, dims.vertical)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
+                .fill(bg)
+        )
+        .overlay(
+            Group {
+                if selected {
+                    RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
+                        .stroke(Colors.primary, lineWidth: 2)
+                }
+            }
+        )
+        .contentShape(RoundedRectangle(cornerRadius: Radius.L, style: .continuous))
+        .onTapGesture(perform: onClick)
+    }
+}