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

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -0,0 +1,123 @@
+//
+//  TrustBanner.swift
+//  MoMoUIKits
+//
+//  Created by Nguyễn Hoàng Sơn on 14/12/2023.
+//
+
+import Foundation
+import SwiftUI
+import SDWebImageSwiftUI
+
+let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
+
+public struct TrustBannerData: Decodable {
+    let content: [String: String]
+    let subContent: [String: String]
+    let pciImage: String
+    let sslImage: String
+    let urlConfig: String
+    let icons: [String]
+    let momoImage: String
+    
+    enum CodingKeys: String, CodingKey {
+        case content
+        case subContent
+        case pciImage
+        case sslImage
+        case icons
+        case momoImage
+        case urlConfig = "url_config"
+    }
+}
+
+let defaultBanner = TrustBannerData(
+    content: ["vi": "An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.",
+              "en": "Ensuring financial security and data privacy is MoMo's highest priority."],
+    subContent: [
+        "vi": "Tìm hiểu thêm",
+        "en": "Learn more"
+    ],
+    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
+    sslImage: "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
+    urlConfig: "login_and_security",
+    icons: [
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
+    ],
+    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
+)
+
+public struct TrustBanner: View {
+    @Environment(\.applicationEnvironment) var applicationEnvironment
+    @Environment(\.localize) private var localize
+
+    var onPress: ((String)->Void)?
+
+    public init(onPress: ((String)->Void)?) {
+        self.onPress = onPress
+    }
+
+    func onPressSecurity() {
+        if (onPress != nil) {
+            onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
+        }
+    }
+    
+    
+    public var body: some View {
+        HStack(alignment: .center, spacing: 8) {
+            WebImage(url: URL(string: applicationEnvironment.config?.trustBanner?.momoImage ?? defaultBanner.momoImage))
+                .resizable()
+                .scaledToFit()
+                .frame(width: 64, height: 64)
+            VStack(alignment: .leading){
+                Text(applicationEnvironment.config?.trustBanner?.content[localize.currentLanguage]
+                     ?? localize.translateData(defaultBanner.content))
+                    .foregroundColor(Color(hex: "484848"))
+                    .lineLimit(2)
+                    .font(.system(size: 13, weight: Font.Weight.regular))
+                    .ignoreBoldTextSetting()
+                    .lineSpacing(3)
+                    .padding(.bottom, 8)
+                HStack {
+                    HStack(spacing: 0) {
+                        Text(applicationEnvironment.config?.trustBanner?.subContent[localize.currentLanguage]
+                             ?? localize.translateData(defaultBanner.subContent))
+                            .foregroundColor(Colors.pink03)
+                            .font(.system(size: 13, weight: .bold))
+                            .ignoreBoldTextSetting()
+                            .padding(.trailing, 4)
+                        
+                        Icon(source: "arrow_chevron_right_small", color: Colors.pink03)
+                    }.onTapGesture {
+                        onPressSecurity()
+                    }
+                    
+                    Spacer()
+                    HStack{
+                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.pciImage ?? defaultBanner.pciImage))
+                            .resizable()
+                            .scaledToFit()
+                            .frame(width: 24, height: 20)
+                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.sslImage ?? defaultBanner.sslImage))
+                            .resizable()
+                            .scaledToFit()
+                            .frame(width: 52, height: 20)
+                    }
+                }
+                
+            }
+            
+        }
+        .padding(.all, 12)
+        .background(Color(hex: "F2F8FF"))
+        .cornerRadius(12)
+        .onTapGesture {
+            onPressSecurity()
+        }
+        .frame(maxWidth: UIScreen.main.bounds.size.width)
+    }
+}

package/ios/Title/Title.swift

@@ -0,0 +1,270 @@
+import SwiftUI
+
+// MARK: - Enums
+
+public enum TitleType {
+    case card
+    case section
+}
+
+public enum TitleSize {
+    case small
+    case medium
+    case large
+}
+
+public enum IconAlign {
+    case top
+    case center
+    case bottom
+}
+
+public enum TitleButtonSize {
+    case small
+    case large
+}
+
+// MARK: - Title
+
+public struct Title: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+
+    private let title: String
+    private let type: TitleType
+    private let size: TitleSize
+    private let icon: String?
+    private let iconColor: Color?
+    private let iconAlign: IconAlign
+    private let showRightAction: Bool
+    private let showTrailingAction: Bool
+    private let badgeLabel: String?
+    private let buttonTitle: String?
+    private let buttonSize: TitleButtonSize
+    private let onPressRightAction: () -> Void
+    private let onPressTrailingAction: () -> Void
+    private let textOnly: Bool
+    private let description: String?
+
+    public init(
+        title: String,
+        type: TitleType = .section,
+        size: TitleSize = .medium,
+        icon: String? = nil,
+        iconColor: Color? = nil,
+        iconAlign: IconAlign = .top,
+        showRightAction: Bool = false,
+        showTrailingAction: Bool = false,
+        badgeLabel: String? = nil,
+        buttonTitle: String? = nil,
+        buttonSize: TitleButtonSize = .small,
+        onPressRightAction: @escaping () -> Void = {},
+        onPressTrailingAction: @escaping () -> Void = {},
+        textOnly: Bool = false,
+        description: String? = nil
+    ) {
+        self.title = title
+        self.type = type
+        self.size = size
+        self.icon = icon
+        self.iconColor = iconColor
+        self.iconAlign = iconAlign
+        self.showRightAction = showRightAction
+        self.showTrailingAction = showTrailingAction
+        self.badgeLabel = badgeLabel
+        self.buttonTitle = buttonTitle
+        self.buttonSize = buttonSize
+        self.onPressRightAction = onPressRightAction
+        self.onPressTrailingAction = onPressTrailingAction
+        self.textOnly = textOnly
+        self.description = description
+    }
+
+    // MARK: - Title text style
+
+    private var titleFontSize: CGFloat {
+        switch type {
+        case .card:
+            switch size {
+            case .small: return 14
+            case .medium: return 16
+            case .large: return 18
+            }
+        case .section:
+            switch size {
+            case .small: return 16
+            case .medium: return 18
+            case .large: return 20
+            }
+        }
+    }
+
+    private var titleLineHeight: CGFloat {
+        switch type {
+        case .card:
+            switch size {
+            case .small: return 20
+            case .medium: return 22
+            case .large: return 26
+            }
+        case .section:
+            switch size {
+            case .small: return 24
+            case .medium: return 26
+            case .large: return 28
+            }
+        }
+    }
+
+    private var titleFontWeight: Font.Weight {
+        switch type {
+        case .card: return .regular
+        case .section: return .bold
+        }
+    }
+
+    private var titleMaxLines: Int {
+        (showTrailingAction || badgeLabel != nil) ? 1 : 2
+    }
+
+    private var iconVerticalAlignment: VerticalAlignment {
+        switch iconAlign {
+        case .top: return .top
+        case .center: return .center
+        case .bottom: return .bottom
+        }
+    }
+
+    private var trailingBackground: Color {
+        type == .section
+            ? Colors.black06.opacity(0.6)
+            : Colors.black06.opacity(0.3)
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        if textOnly {
+            titleText
+        } else {
+            fullLayout
+        }
+    }
+
+    private var titleText: some View {
+        SwiftUI.Text(title)
+            .font(.system(size: fontScale(titleFontSize), weight: titleFontWeight))
+            .ignoreBoldTextSetting()
+            .foregroundColor(theme.colors.text.default)
+            .lineSpacing(fontScale(titleLineHeight) - fontScale(titleFontSize))
+            .lineLimit(titleMaxLines)
+            .truncationMode(.tail)
+    }
+
+    private var fullLayout: some View {
+        HStack(alignment: .center, spacing: 0) {
+            HStack(alignment: iconVerticalAlignment, spacing: 0) {
+                if let icon = icon {
+                    Icon(
+                        source: icon,
+                        size: 24,
+                        color: iconColor ?? theme.colors.text.default
+                    )
+                    .padding(.trailing, Spacing.S)
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    HStack(alignment: .center, spacing: 0) {
+                        HStack(alignment: .center, spacing: 0) {
+                            titleText
+
+                            if let badgeLabel = badgeLabel {
+                                Spacer().frame(width: 4)
+                                Badge(label: badgeLabel)
+                            }
+                        }
+                        if showTrailingAction != true {
+                            Spacer(minLength: 0)
+                        }
+
+                        if showTrailingAction && !showRightAction {
+                            Spacer().frame(width: 8)
+                            SwiftUI.Button(action: onPressTrailingAction) {
+                                Icon(source: "arrow_chevron_right_small", size: 18)
+                                    .frame(width: 24, height: 24)
+                                    .background(trailingBackground)
+                                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                            }
+                            .buttonStyle(.plain)
+                        }
+                    }
+
+                    if let description = description {
+                        Spacer().frame(height: 4)
+                        MomoText(
+                            description,
+                            typography: .descriptionDefaultRegular,
+                            color: theme.colors.text.secondary
+                        )
+                    }
+                }
+            }
+
+            if showRightAction && !showTrailingAction {
+                Spacer().frame(width: 8)
+                if let buttonTitle = buttonTitle {
+                    SwiftUI.Button(action: onPressRightAction) {
+                        MomoText(
+                            buttonTitle,
+                            typography: buttonSize == .small ? .actionXsBold : .actionSBold,
+                            color: theme.colors.primary
+                        )
+                    }
+                    .buttonStyle(.plain)
+                } else {
+                    SwiftUI.Button(action: onPressRightAction) {
+                        Icon(
+                            source: "arrow_chevron_right_small",
+                            size: 22,
+                            color: theme.colors.primary
+                        )
+                        .frame(width: 24, height: 24)
+                        .background(Colors.pink03.opacity(0.1))
+                        .clipShape(RoundedRectangle(cornerRadius: 12))
+                    }
+                    .buttonStyle(.plain)
+                }
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(8)
+    }
+}
+
+// MARK: - Preview
+
+#if DEBUG
+struct Title_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Title(title: "Section Small", type: .section, size: .small)
+            Title(
+                title: "Section Medium",
+                type: .section,
+                size: .medium,
+                icon: "basic_home",
+                description: "This is a medium section with icon."
+            )
+            Title(
+                title: "Section Large",
+                type: .section,
+                size: .large,
+                showTrailingAction: true,
+                badgeLabel: "NEW"
+            )
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif