@momo-kits/native-kits 0.0.1-beta.4 → 0.2.0-kt22

package/ios/Badge/BadgeRibbon.swift

@@ -0,0 +1,242 @@
+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 {
+    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(
+            RoundedCorners(
+                topLeft: 0,
+                topRight: RibbonConstants.roundRightRadius,
+                bottomLeft: 0,
+                bottomRight: RibbonConstants.roundRightRadius
+            )
+            .fill(backgroundColor)
+        )
+    }
+    
+    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 = 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/Button/Button.swift

@@ -1,15 +1,16 @@
-
 import Foundation
+import Lottie
 import SwiftUI
 
 // MARK: - ButtonType
 
 public enum ButtonType {
     case primary
-    case danger
-    case tonal
     case secondary
+    case tonal
     case outline
+    case danger
+    case text
     case disabled
 }
 
@@ -21,111 +22,190 @@ public enum ButtonSize {
     case small
 }
 
-// MARK: - Button
+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 {
-    // MARK: Lifecycle
+    var title: String
+    var action: () -> Void
+    var type: ButtonType
+    var size: ButtonSize
+    var iconLeft: AnyView?
+    var iconRight: AnyView?
+    var isFull: Bool
+    var loading: Bool
 
-    public init(title: String = "", action: @escaping () -> Void, type: ButtonType = .primary, size: ButtonSize = .large, iconLeft: AnyView? = nil, iconRight: AnyView? = nil) {
+    public init(
+        title: String = "",
+        action: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: ButtonSize = .large,
+        iconLeft: AnyView? = nil,
+        iconRight: AnyView? = nil,
+        isFull: Bool = true,
+        loading: Bool = false
+    ) {
         self.title = title
         self.action = action
         self.type = type
         self.size = size
         self.iconLeft = iconLeft
         self.iconRight = iconRight
+        self.isFull = isFull
+        self.loading = loading
     }
 
-    // MARK: Public
+    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 {
-        SwiftUI.Button(action: action) {
-            HStack {
-                iconLeft
-                renderTitle(title: title, type: type, size: size)
-                iconRight
+        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()
             }
-            .buttonSize(size)
-            .buttonType(type)
-        }.disabled(type == .disabled)
-    }
+        }) {
+            HStack(spacing: size.iconSpacing) {
+                if loading && loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
 
-    // MARK: Internal
+                } else if let iconLeft = iconLeft {
+                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                }
 
-    var title: String
-    var action: () -> Void = {}
-    var type: ButtonType = .primary
-    var size: ButtonSize = .large
-    var iconLeft: AnyView?
-    var iconRight: AnyView?
+                Text(title)
+                    .font(size.font)
+                    .foregroundColor(fg)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
 
-    func renderTitle(title: String, type: ButtonType, size: ButtonSize) -> Text {
-        switch size {
-        case .large:
-            return Text(title).font(.system(size: 16, weight: Font.Weight.bold))
-        case .medium:
-            return Text(title).font(.system(size: 14, weight: Font.Weight.bold))
-        case .small:
-            return Text(title).font(.system(size: 12, weight: Font.Weight.bold))
-        }
-    }
-}
+                if loading && !loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
 
-private extension View {
-    func buttonType(_ type: ButtonType) -> some View {
-        switch type {
-        case .primary:
-            return AnyView(self
-                .background(Colors.primary)
-                .foregroundColor(Colors.black01)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .danger:
-            return AnyView(self
-                .background(Colors.error)
-                .foregroundColor(Colors.black01)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .tonal:
-            return AnyView(self
-                .background(Colors.primaryLight)
-                .foregroundColor(Colors.primary)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .secondary:
-            return AnyView(self
-                .background(Colors.card)
-                .foregroundColor(Colors.text)
-                .cornerRadius(8)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.black06, lineWidth: 1))
-                .padding(2)
-            )
-        case .outline:
-            return AnyView(self
-                .background(Colors.card)
-                .foregroundColor(Colors.primary)
-                .cornerRadius(8)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.primary, lineWidth: 1))
-                .padding(2)
+                } else if let iconRight = iconRight {
+                    iconRight.frame(width: size.iconSize, height: size.iconSize)
+                }
+            }
+            .frame(maxWidth: isFull ? .infinity : nil)
+            .padding(.horizontal, size.padding)
+            .frame(height: size.height)
+            .background(bg)
+            .overlay(
+                RoundedRectangle(cornerRadius: size.radius)
+                    .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
             )
-        case .disabled:
-            return AnyView(self
-                .background(Colors.black05)
-                .foregroundColor(Colors.black06)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        }
-    }
-
-    func buttonSize(_ size: ButtonSize) -> some View {
-        switch size {
-        case .large:
-            return self
-                .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.XS)
-        case .medium:
-            return self
-                .frame(minWidth: 80, maxWidth: 96, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.XS)
-        case .small:
-            return self
-                .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.XS)
+            .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)
+        }
+    }
+}