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

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)
+    }
+}

package/ios/{Colors+Spacing → Colors+Radius+Spacing}/Colors.swift

@@ -16,27 +16,28 @@ public enum Colors {
     public static let info = Color("Info")
     public static let success = Color("Success")
 
-    public static let black20 = Color(hex: "08101d")
-    public static let black19 = Color(hex: "0f1c2f")
-    public static let black18 = Color(hex: "1c293d")
-    public static let black17 = Color(hex: "2b3748")
-    public static let black16 = Color(hex: "3a4454")
-    public static let black15 = Color(hex: "475160")
-    public static let black14 = Color(hex: "555e6c")
-    public static let black13 = Color(hex: "636b78")
-    public static let black12 = Color(hex: "6f7682")
-    public static let black11 = Color(hex: "7e8590")
-    public static let black10 = Color(hex: "8c929c")
-    public static let black09 = Color(hex: "9a9fa8")
-    public static let black08 = Color(hex: "a8adb4")
-    public static let black07 = Color(hex: "b5bac0")
-    public static let black06 = Color(hex: "c8cbcf")
-    public static let black05 = Color(hex: "e0e1e4")
-    public static let black04 = Color(hex: "ececee")
-    public static let black03 = Color(hex: "f4f5f6")
-    public static let black02 = Color(hex: "fafbfc")
+    public static let black20 = Color(hex: "000000")
+    public static let black19 = Color(hex: "18191a")
+    public static let black18 = Color(hex: "242424")
+    public static let black17 = Color(hex: "303233")
+    public static let black16 = Color(hex: "404040")
+    public static let black15 = Color(hex: "484848")
+    public static let black14 = Color(hex: "565656")
+    public static let black13 = Color(hex: "646464")
+    public static let black12 = Color(hex: "727272")
+    public static let black11 = Color(hex: "878787")
+    public static let black10 = Color(hex: "a0a0a0")
+    public static let black09 = Color(hex: "b9b9b9")
+    public static let black08 = Color(hex: "c6c6c6")
+    public static let black07 = Color(hex: "cccccc")
+    public static let black06 = Color(hex: "d8d8d8")
+    public static let black05 = Color(hex: "e5e5e5")
+    public static let black04 = Color(hex: "e8e8e8")
+    public static let black03 = Color(hex: "f0f0f0")
+    public static let black02 = Color(hex: "f9f9f9")
     public static let black01 = Color(hex: "ffffff")
 
+
     public static let pink11 = Color(hex: "fef8fc")
     public static let pink10 = Color(hex: "fef4fa")
     public static let pink09 = Color(hex: "fdeaf4")
@@ -49,6 +50,7 @@ public enum Colors {
     public static let pink02 = Color(hex: "d42a87")
     public static let pink01 = Color(hex: "bc2678")
 
+
     public static let violet10 = Color(hex: "fcf8fe")
     public static let violet09 = Color(hex: "faf4fe")
     public static let violet08 = Color(hex: "ead4fc")

package/ios/Colors+Radius+Spacing/Radius.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+import Foundation
+
+public enum Radius {
+    public static let XXS: CGFloat = 2
+    public static let XS: CGFloat = 4
+    public static let S: CGFloat = 8
+    public static let M: CGFloat = 12
+    public static let L: CGFloat = 16
+    public static let XL: CGFloat = 24
+}
+
+public struct RoundedCorner: Shape {
+
+    var radius: CGFloat = .infinity
+    var corners: UIRectCorner = .allCorners
+
+    public func path(in rect: CGRect) -> Path {
+        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
+        return Path(path.cgPath)
+    }
+}

package/ios/Icon/Icon.swift

@@ -0,0 +1,51 @@
+import SwiftUI
+
+struct IconSource: Codable {
+    let uri: String
+}
+
+func loadIconSources() -> [String: IconSource] {
+    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json") else {
+        print("Error: icon.json not found")
+        return [:]
+    }
+    
+    do {
+        let data = try Data(contentsOf: url)
+        let decoded = try JSONDecoder().decode([String: IconSource].self, from: data)
+        return decoded
+    } catch {
+        print("Error decoding icon.json: \(error)")
+        return [:]
+    }
+}
+
+// Load the JSON data into a global variable
+let iconSources: [String: IconSource] = loadIconSources()
+
+// Icon ViewModel
+public struct Icon: View {
+    var source: String
+    var size: CGFloat
+    var color: Color?
+    var accessibilityLabel: String?
+    
+    public init(
+            source: String,
+            size: CGFloat = 24,
+            color: Color? = nil,
+            accessibilityLabel: String? = nil
+        ) {
+            self.source = source
+            self.size = size
+            self.color = color
+            self.accessibilityLabel = accessibilityLabel
+        }
+
+    public var body: some View {
+        if let uri = iconSources[source]?.uri {
+            ImageView(uri, color: color).frame(width: size, height: size)
+        }
+    }
+}
+

package/ios/Image/Image.swift

@@ -0,0 +1,70 @@
+
+
+import Foundation
+import SDWebImageSwiftUI
+import SkeletonUI
+import SwiftUI
+
+public struct ImageView: View {
+    // MARK: Lifecycle
+
+    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil) {
+        self.url = url
+        self.aspectRatio = aspectRatio
+        self.contentMode = contentMode
+        self.placeholder = placeholder
+        self.color = color
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        return WebImage(url: URL(string: url), isAnimating: .constant(true))
+            .onFailure { _ in
+                error = true
+            }
+            .onSuccess { _, _, _ in
+                error = false
+            }
+            .resizable()
+            .renderingMode(color != nil ? .template : .original)
+            .placeholder {
+                VStack(alignment: .center, content: {
+                    if error {
+                        Image(systemName: "photo.badge.exclamationmark").frame(width: 24, height: 24)
+                    } else if placeholder != nil {
+                        placeholder
+                    }
+                })
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .skeleton(with: !error && placeholder == nil)
+                .shape(type: .rectangle)
+            }
+            .scaledToFit()
+            .transition(.fade)
+            .aspectRatio(aspectRatio, contentMode: contentMode)
+            .foregroundColor(color)
+    }
+
+    // MARK: Internal
+
+    var aspectRatio: CGFloat?
+    var contentMode: ContentMode
+    var placeholder: AnyView?
+    var color: Color?
+
+    @State var error: Bool = false
+    var url: String
+}
+
+private struct ColorMultiplyModifier: ViewModifier {
+    let color: Color?
+
+    func body(content: Content) -> some View {
+        if let color {
+            content.colorMultiply(color)
+        } else {
+            content
+        }
+    }
+}

package/ios/Input/ErrorView.swift

@@ -0,0 +1,55 @@
+//
+//  ErrorView.swift
+//  Pods
+//
+//  Created by sophia on 13/1/26.
+//
+
+import SwiftUI
+
+public struct ErrorView: View {
+    public var errorMessage: String
+    public var errorSpacing: Bool
+    public var hintText: String
+    
+    public init(
+        errorMessage: String = "",
+        errorSpacing: Bool = false,
+        hintText: String = ""
+    ) {
+        self.errorMessage = errorMessage
+        self.errorSpacing = errorSpacing
+        self.hintText = hintText
+    }
+    
+    public var body: some View {
+        if !errorMessage.isEmpty || !hintText.isEmpty {
+            HStack(alignment: .top, spacing: 4) {
+                Icon(source: "ic_error", size: scaleSize(16), color: displayColor())
+                MomoText(
+                    displayText(),
+                    typography: .descriptionDefaultRegular,
+                    color: displayColor()
+                )
+            }
+            .padding(.top, Spacing.XS)
+        } else if errorSpacing {
+            Spacer()
+                .padding(.top, Spacing.XS)
+                .frame(height: 18)
+        }
+    }
+    
+    // MARK: - Helpers
+    
+    private func displayColor() -> Color {
+        !errorMessage.isEmpty ? Colors.red03 : Colors.black12
+    }
+    
+    private func displayText() -> String {
+        if !errorMessage.isEmpty {
+            return errorMessage
+        }
+        return hintText.isEmpty ? "Không thể chỉnh sửa" : hintText
+    }
+}

package/ios/Input/Input.swift

@@ -4,22 +4,22 @@ import SwiftUI
 
 fileprivate struct FloatingComponent: View {
     var floatingValue: String
+    var floatingIcon: AnyView?
     
-    public init (_ floatingValue: String = ""){
+    public init (_ floatingValue: String = "", floatingIcon: AnyView? = nil){
         self.floatingValue = floatingValue
+        self.floatingIcon = floatingIcon
     }
     
     public var body: some View {
         return HStack {
             Text(floatingValue)
+                .font(.paragraph)
                 .foregroundColor(Colors.black09)
                 .font(.system(size: 12))
                 .padding(.leading, 8)
-            Image(systemName: "info.circle")
-                .foregroundColor(Colors.black09)
-                .frame(width: 16, height: 16)
-                .padding(.leading, -4)
                 .padding(.trailing, 8)
+            floatingIcon
         }
         .background(Colors.black01)
         .offset(x: 16, y:-8)
@@ -27,72 +27,181 @@ fileprivate struct FloatingComponent: View {
     }
 }
 
+struct DotTextField: View{
+    @Binding var value: String
+    @State var isHide: Bool = true
+    
+    
+    func onToggle(){
+        isHide.toggle()
+    }
+    
+    public var body: some View {
+        return HStack {
+            if (isHide){
+                SecureField("", text: $value)
+            }
+            else {
+                TextField("", text: $value)
+            }
+            
+            SwiftButton(action: onToggle){
+                Image(systemName: isHide ?  "eye.slash" : "eye")
+                    .foregroundColor(Colors.text)
+                    .frame(width: 16, height: 16)
+                    .padding(.leading, -4)
+            }
+            
+            
+        }
+        
+    }
+}
+
 public struct Input: View {
-    @State var value: String = ""
+    @Binding var value: String
     @State var focused: Bool = false
     
-    var iconPadding: CGFloat
-    var multilines: Bool
     var placeholder: String
     var floatingValue: String
     var errorMessage: String
+    var errorSpacing: Bool
+    var isSecure: Bool
+    var keyboardType: UIKeyboardType
+    var floatingIcon: AnyView?
+    var rightIcon: AnyView?
+    var onChange: ((String) -> Void)?
+    var onBlur: (() -> Void)?
+    var floatingIconURL: String?
+    var floatingIconColor: Color?
+    var size: InputSize
+    var fontWeight: InputFontWeight
+    var disabled: Bool
+    var leadingIcon: String?
+    var leadingIconColor: Color?
+    var loading: Bool
+    var required: Bool
+    var hintText: String?
     
-    func onEditingChanged(_ focused: Bool){
-        self.focused = focused
+    func onCancel(){
+        self.value.removeAll()
     }
     
-    public init(placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = ""){
+    public init(_ value: Binding<String>, placeholder: String  = "", floatingValue: String = "", multilines: Bool  = false, errorMessage: String = "", isSecure: Bool = false, keyboardType: UIKeyboardType = .default, floatingIcon:  AnyView? = nil, rightIcon:  AnyView? = nil, onChange: ((String)->Void)? = nil, onBlur: (()->Void)? = nil, floatingIconURL: String? = nil, floatingIconColor: Color? = Colors.pink03, size: InputSize = .small, fontWeight: InputFontWeight = .regular, disabled: Bool = false, leadingIcon: String? = nil, leadingIconColor: Color? = Colors.pink03, loading: Bool = false, required: Bool = false, hintText: String? = nil, errorSpacing: Bool = false){
         self.placeholder = placeholder
         self.floatingValue = floatingValue
-        self.multilines = multilines
-        self.iconPadding = multilines == true ? 16 : 0
         self.errorMessage = errorMessage
+        self.isSecure = isSecure
+        self._value = value
+        self.keyboardType = keyboardType
+        self.rightIcon = rightIcon
+        self.floatingIcon = floatingIcon
+        self.onChange = onChange
+        self.floatingIconURL = floatingIconURL
+        self.floatingIconColor = floatingIconColor
+        self.size = size
+        self.fontWeight = fontWeight
+        self.disabled = disabled
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.hintText = hintText
+        self.errorSpacing = errorSpacing
+    }
+    
+    func onChangeText(value: String){
+        onChange?(value)
     }
     
     public var body: some View {
-        return ZStack (alignment: .topLeading){
-            
-            HStack(alignment: multilines == true ? .top : .center){
-                if (multilines){
-                    if #available(iOS 14.0, *) {
-                        TextEditor(text: $value)
-                            .frame(maxWidth: .infinity, minHeight: 48)
-                            .padding(.horizontal, 8)
-                            .padding(.top,4 )
-                            .accentColor(Colors.pink03)
-                            .fixedSize(horizontal: false, vertical: true)
+            VStack(alignment: .leading, spacing: 4) {
+                ZStack(alignment: .topLeading) {
+                    HStack(alignment: .center) {
+                        if let leadingIcon = leadingIcon {
+                            Icon(source: leadingIcon, size: 16, color: leadingIconColor)
+                        }
+                        
+                        if !isSecure {
+                            TextField("", text: $value, onEditingChanged: { isChange in
+                                self.focused = isChange
+                            })
+                            .disabled(disabled)
+                            .font(fontWeight == .bold ? .headline : .body)
+                        } else {
+                            DotTextField(value: $value)
+                                .disabled(disabled)
+                        }
+                        
+                        if loading {
+                            ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                .frame(width: 20, height: 20)
+                        } else if !value.isEmpty {
+                            SwiftButton(action: onCancel){
+                                Image(systemName: "x.circle.fill")
+                                    .foregroundColor(Colors.text)
+                                    .frame(width: 16, height: 16)
+                                    .padding(.leading, -4)
+                                    .padding(.trailing, 8)
+                            }
+                        }
+
+                        rightIcon
                     }
-                }
-                else {
-                    TextField("",text: $value, onEditingChanged:{ isChange in
-                        onEditingChanged(isChange)
-                    })
                     .padding(.horizontal, 12)
-                    .accentColor(Colors.pink03)
+                    .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
+                    .background(
+                        RoundedRectangle(cornerRadius: Radius.S)
+                            .fill(Colors.black01)
+                    )
+                    .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused ? Colors.pink03 : Colors.border, lineWidth: 1))
                     
+                    if value.isEmpty {
+                        MomoText(placeholder + (required ? " *" : ""), typography: size == .small ? .headerSSemibold : .headerMBold, color: Colors.black09)
+                            .padding(.horizontal, leadingIcon == nil ? 12 : 32)
+                            .padding(.top, 12)
+                            .allowsHitTesting(false)
+                    }
                     
+                    if !floatingValue.isEmpty {
+                        FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
+                            AnyView(
+                                Icon(source: url, size: 16, color: floatingIconColor)
+                                )
+                        })
+                            
+                    }
                 }
                 
-                Image(systemName: "info.circle")
-                    .foregroundColor(Colors.black09)
-                    .frame(width: 16, height: 16)
-                    .padding(.leading, -4)
-                    .padding(.trailing, 8)
-                    .padding(.top, iconPadding)
-            }
-            .frame(maxWidth: .infinity, minHeight: 48)
-            .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused == true ? Colors.pink03 : Colors.border, lineWidth: 1))
-            .padding(.horizontal, 1)
-            if (value.isEmpty){
-                Text(placeholder)
-                    .font(.system(size: 16))
-                    .foregroundColor(Colors.black09)
-                    .padding(.leading, 12)
-                    .padding(.top, 14)
-                    .allowsHitTesting(false)
+                ErrorView(
+                    errorMessage: errorMessage,
+                    errorSpacing: errorSpacing,
+                    hintText: hintText ?? ""
+                )
             }
-            FloatingComponent(floatingValue)
-        }.padding(.bottom, 8)
+        }
+}
+
+
+struct ActivityIndicator: UIViewRepresentable {
+    @Binding var isAnimating: Bool
+    let style: UIActivityIndicatorView.Style
+
+    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
+        return UIActivityIndicatorView(style: style)
     }
-    
+
+    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
+        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
+    }
+}
+
+public enum InputSize {
+    case small
+    case large
+}
+
+public enum InputFontWeight {
+    case regular
+    case bold
 }