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

package/ios/Template/Logo/Logo.swift

@@ -0,0 +1,75 @@
+import Foundation
+import SwiftUI
+
+public struct LogoView: View {
+    var type: String
+    var useShadow: Bool
+    var useBorder: Bool
+    var useBackground : Bool
+    var backgroundColor: Color
+    var shadowColor : Color
+    var borderColor : Color
+    var source: String
+    var radius: CGFloat
+
+    public init(source: String = "",
+                type: String = "image",
+                useBackground : Bool = true,
+                useShadow: Bool = true,
+                useBorder : Bool = true,
+                backgroundColor: Color = Colors.black01,
+                shadowColor : Color = Color(hex: "d9d9d9"),
+                borderColor : Color = Color(hex: "e2e2e2")){
+        self.type = type
+        self.useShadow = useShadow
+        self.useBorder = useBorder
+        self.useBackground = useBackground
+        self.backgroundColor = backgroundColor
+        self.borderColor = borderColor
+        self.source = source
+        self.shadowColor = shadowColor
+        self.radius = type == "image" ? 7 : 0
+    }
+
+
+    public var body: some View {
+        return ImageView(source)
+            .scaledToFit()
+            .frame(width: 28, height: 28)
+            .cornerRadius(radius)
+            .containerBorder(type, useBorder, borderColor)
+            .containerBackground(type, useBackground, backgroundColor)
+            .containerShadow(useShadow, shadowColor)
+    }
+
+}
+
+private extension View {
+    func containerBorder (_ type: String, _ useBorder: Bool, _ borderColor: Color) -> some View {
+        Group {
+            if (useBorder && type != "icon") {
+                self.overlay(RoundedRectangle(cornerRadius: 8).stroke(borderColor, lineWidth: 1))
+            } else {
+                self
+            }
+        }
+    }
+    func containerBackground (_ type: String, _ useBackground: Bool, _ backgroundColor: Color) -> some View {
+        Group {
+            if (useBackground && type != "icon") {
+                self.background(backgroundColor)
+            } else {
+                self
+            }
+        }
+    }
+    func containerShadow (_ useShadow: Bool, _ shadowColor: Color) -> some View {
+        Group {
+            if useShadow {
+                self.shadow(color: shadowColor, radius: 2, x: 0, y: 2)
+            } else {
+                self
+            }
+        }
+    }
+}

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -0,0 +1,120 @@
+//
+//  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 {
+    @EnvironmentObject var applicationEnvironment: ApplicationEnvironment
+    
+    var onPress: ((String)->Void)?
+     
+    public init(onPress: ((String)->Void)?) {
+        self.onPress = onPress
+    }
+    
+    var language: String? = "vi"
+    
+    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[language ?? "vi"] as? String ?? defaultBanner.content[language ?? "vi"])
+                    .foregroundColor(Color(hex: "484848"))
+                    .lineLimit(2)
+                    .font(.system(size: 13, weight: Font.Weight.regular))
+                    .lineSpacing(3)
+                    .padding(.bottom, 8)
+                HStack {
+                    HStack(spacing: 0) {
+                        Text(applicationEnvironment.config?.trustBanner?.subContent[language ?? "vi"] as? String ?? defaultBanner.subContent[language ?? "vi"])
+                            .foregroundColor(Colors.pink03)
+                            .font(.system(size: 13, weight: .bold))
+                            .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/Typography/Text.swift

@@ -0,0 +1,140 @@
+import SwiftUI
+
+public func scaleSize(_ size: CGFloat, _ scaleRate: CGFloat? = nil) -> CGFloat {
+    let defaultScreenSize: CGFloat = 375
+    let maxFontScale: CGFloat = scaleRate ?? 1.5
+    let maxDeviceScale: CGFloat = 5
+    
+    let deviceWidth = UIScreen.main.bounds.width
+    let deviceScale = deviceWidth / defaultScreenSize
+    
+    let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+    let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
+    let fontScale = scaledFont.pointSize / defaultFont.pointSize
+    
+    var fontSizeDeviceScale = size
+    var fontSizeOSScale = size
+    
+    
+    if deviceScale > 1 {
+        fontSizeDeviceScale = min(fontSizeDeviceScale * deviceScale, fontSizeDeviceScale + maxDeviceScale)
+    }
+    
+    if fontScale > 1 {
+        fontSizeOSScale = min(fontSizeOSScale * fontScale, fontSizeOSScale * maxFontScale)
+    }
+    
+    return max(fontSizeDeviceScale, fontSizeOSScale)
+}
+
+public enum TypographyStyle {
+    case headlineDefaultBold
+    case headerMBold
+    case headerDefaultBold
+    case headerSSemibold
+    case headerXsSemibold
+    case bodyDefaultRegular
+    case bodyDefaultRegularStrikethrough
+    case descriptionDefaultRegular
+    case descriptionDefaultRegularStrikethrough
+    case descriptionXsRegular
+    case descriptionXsRegularStrikethrough
+    case labelDefaultMedium
+    case labelSMedium
+    case labelXsMedium
+    case actionDefaultBold
+    case actionSBold
+    case actionXsBold
+    case actionXxsBold
+}
+
+public extension TypographyStyle {
+    var fontSize: CGFloat {
+        switch self {
+        case .headlineDefaultBold: return 24
+        case .headerMBold: return 18
+        case .headerDefaultBold: return 16
+        case .headerSSemibold: return 14
+        case .headerXsSemibold: return 12
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough: return 14
+        case .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough: return 12
+        case .descriptionXsRegular, .descriptionXsRegularStrikethrough: return 10
+        case .labelDefaultMedium: return 14
+        case .labelSMedium: return 12
+        case .labelXsMedium: return 10
+        case .actionDefaultBold: return 16
+        case .actionSBold: return 14
+        case .actionXsBold: return 12
+        case .actionXxsBold: return 10
+        }
+    }
+    var lineHeight: CGFloat {
+        switch self {
+        case .headlineDefaultBold: return 34
+        case .headerMBold: return 26
+        case .headerDefaultBold: return 22
+        case .headerSSemibold: return 20
+        case .headerXsSemibold: return 18
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough: return 20
+        case .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough: return 18
+        case .descriptionXsRegular, .descriptionXsRegularStrikethrough: return 14
+        case .labelDefaultMedium: return 20
+        case .labelSMedium: return 18
+        case .labelXsMedium: return 14
+        case .actionDefaultBold: return 22
+        case .actionSBold: return 20
+        case .actionXsBold: return 18
+        case .actionXxsBold: return 14
+        }
+    }
+    var fontWeight: Font.Weight {
+        switch self {
+        case .headlineDefaultBold, .headerMBold, .headerDefaultBold,
+                .actionDefaultBold, .actionSBold, .actionXsBold, .actionXxsBold:
+            return .bold
+        case .headerSSemibold, .headerXsSemibold:
+            return .semibold
+        case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough,
+                .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough,
+                .descriptionXsRegular, .descriptionXsRegularStrikethrough:
+            return .regular
+        case .labelDefaultMedium, .labelSMedium, .labelXsMedium:
+            return .medium
+        }
+    }
+    var isStrikethrough: Bool {
+        switch self {
+        case .bodyDefaultRegularStrikethrough,
+                .descriptionDefaultRegularStrikethrough,
+                .descriptionXsRegularStrikethrough:
+            return true
+        default:
+            return false
+        }
+    }
+}
+
+public struct MomoText: View {
+    private let content: String
+    private let typography: TypographyStyle
+    private let color: Color
+    
+    public init(
+        _ content: String,
+        typography: TypographyStyle = .bodyDefaultRegular,
+        color: Color = Colors.text
+    ) {
+        self.content = content
+        self.typography = typography
+        self.color = color
+    }
+    
+    public var body: some View {
+        let text = SwiftUI.Text(content)
+            .font(.system(size: scaleSize(typography.fontSize), weight: typography.fontWeight))
+            .foregroundColor(color)
+            .lineSpacing(scaleSize(typography.lineHeight) - scaleSize(typography.fontSize))
+        
+        return text
+    }
+}

package/ios/Typography/Typography.swift

@@ -2,20 +2,85 @@ import SwiftUI
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
-        return Font.custom("SFProText", size: size)
-    }
+        let defaultScreenSize: CGFloat = 375
+        let maxFontScale: CGFloat = 1.5
+        let maxDeviceScale: CGFloat = 5
+        
+        let deviceWidth = UIScreen.main.bounds.width
+        let deviceScale = deviceWidth / defaultScreenSize
+        
+        let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+        let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
+        let fontScale = scaledFont.pointSize / defaultFont.pointSize
+
+        var fontSize = size
+
+        if deviceScale > 1 {
+            fontSize = min(fontSize * deviceScale, fontSize + maxDeviceScale)
+        }
 
-    static let h1 = appFont(size: 36).weight(.semibold)
+        if fontScale > 1 {
+            fontSize = min(fontSize * fontScale, fontSize * maxFontScale)
+        }
+
+        return Font.system(size: fontSize)
+    }
+    
+    // New supported typography styles
+    static let headline_default_bold = appFont(size: 24).weight(.bold)
+    static let header_m_bold = appFont(size: 18).weight(.bold)
+    static let header_default_bold = appFont(size: 16).weight(.bold)
+    static let header_default_semibold = appFont(size: 16).weight(.semibold)
+    static let header_s_semibold = appFont(size: 14).weight(.semibold)
+    static let header_xs_semibold = appFont(size: 12).weight(.semibold)
+    static let body_default_regular = appFont(size: 14).weight(.regular)
+    static let description_default_regular = appFont(size: 12).weight(.regular)
+    static let description_xs_regular = appFont(size: 10).weight(.regular)
+    static let label_default_medium = appFont(size: 14).weight(.medium)
+    static let label_s_medium = appFont(size: 12).weight(.medium)
+    static let label_xs_medium = appFont(size: 10).weight(.medium)
+    static let action_default_bold = appFont(size: 16).weight(.bold)
+    static let action_s_bold = appFont(size: 14).weight(.bold)
+    static let action_xs_bold = appFont(size: 12).weight(.bold)
+    static let action_xxs_bold = appFont(size: 10).weight(.bold)
+    
+    // Legacy styles
+    static let headline_default = appFont(size: 28).weight(.semibold)
+    static let headline_s = appFont(size: 24).weight(.semibold)
+    static let headline_l = appFont(size: 32).weight(.semibold)
+    static let headline_xl = appFont(size: 36).weight(.semibold)
+    static let title_default = appFont(size: 20).weight(.bold)
+    static let title_xs = appFont(size: 16).weight(.bold)
+    static let title_s = appFont(size: 18).weight(.bold)
+    static let header_default = appFont(size: 15).weight(.semibold)
+    static let header_xs = appFont(size: 12).weight(.semibold)
+    static let header_s = appFont(size: 14).weight(.semibold)
+    static let paragraph_default = appFont(size: 15).weight(.regular)
+    static let paragraph_bold = appFont(size: 15).weight(.bold)
+    static let description_default = appFont(size: 14).weight(.regular)
+    static let description_xs = appFont(size: 10).weight(.regular)
+    static let description_s = appFont(size: 12).weight(.regular)
+    static let label_default = appFont(size: 14).weight(.medium)
+    static let label_xxs = appFont(size: 8).weight(.medium)
+    static let label_xs = appFont(size: 10).weight(.medium)
+    static let label_s = appFont(size: 12).weight(.medium)
+    static let action_default = appFont(size: 16).weight(.bold)
+    static let action_xxs = appFont(size: 10).weight(.bold)
+    static let action_xs = appFont(size: 12).weight(.bold)
+    static let action_s = appFont(size: 15).weight(.bold)
+    
+    // deprecated
+    static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)
     static let h3 = appFont(size: 28).weight(.semibold)
     static let h4 = appFont(size: 24).weight(.semibold)
     static let title1 = appFont(size: 20).weight(.bold)
     static let title2 = appFont(size: 18).weight(.bold)
     static let title3 = appFont(size: 16).weight(.bold)
-    static let headerText1 = appFont(size: 15).weight(.semibold)
+    static let headerText1 = appFont(size: 15).weight(.semibold) //header_default
     static let headerText2 = appFont(size: 14).weight(.semibold)
     static let headerText3 = appFont(size: 12).weight(.semibold)
-    static let paragraph = appFont(size: 15).weight(.regular)
+    static let paragraph = appFont(size: 15).weight(.regular) //paragraph_default
     static let description1 = appFont(size: 14).weight(.regular)
     static let description2 = appFont(size: 12).weight(.regular)
     static let description3 = appFont(size: 10).weight(.regular)

package/ios/native-kits.podspec

@@ -1,15 +1,20 @@
-Pod::Spec.new do |spec|
-    spec.name          = 'MoMoUIKits'
-    spec.version       = '1.0.0'
-    spec.license       = { :type => 'MIT', :file => 'LICENSE' }
-    spec.homepage      = 'https://gitlab.com'
-    spec.authors       = { 'Developer' => 'momo@mservice.com.vn' }
-    spec.summary       = 'Components for SwiftUI'
-    spec.source        = { :git => 'https://gitlab.com', :tag => 'v1.0.0' }
-    spec.swift_versions = ['5.0']
-    spec.ios.deployment_target  = '13.0'
-
-    spec.source_files   = "**/*.swift"
-
-    spec.framework      = 'SwiftUI', 'Combine'
-  end
+Pod::Spec.new do |s|
+  s.name             = 'MoMoUIKits'
+  s.version          = '1.0.0'
+  s.summary          = 'MoMoUIKits for iOS'
+  s.homepage         = 'https://momo.vn'
+  s.license          = { :type => 'MIT', :file => 'LICENSE' }
+  s.author           = { 'MoMo' => 'dev@momo.vn' }
+  s.source           = { :path => '.' }
+
+  s.ios.deployment_target = '15.0'
+  s.swift_version         = '5.0'
+
+  s.source_files       = "**/*.swift"
+  s.framework             = 'SwiftUI', 'Combine'
+  s.dependency  'SDWebImageSwiftUI'
+  s.dependency       'lottie-ios'
+  s.dependency  'SkeletonUI', '1.0.11'
+end
+
+

package/package.json

@@ -1,8 +1,8 @@
 {
-    "name": "@momo-kits/native-kits",
-    "version": "0.0.1-beta.4",
-    "private": false,
-    "dependencies": {},
-    "devDependencies": {},
-    "license": "MoMo"
+  "name": "@momo-kits/native-kits",
+  "version": "0.2.0-kt22",
+  "private": false,
+  "dependencies": {},
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/CODE_OF_CONDUCT.md

@@ -1,133 +0,0 @@
-
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, caste, color, religion, or sexual
-identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
-  community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of
-  any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
-  without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series of
-actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or permanent
-ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within the
-community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.1, available at
-[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
-
-Community Impact Guidelines were inspired by
-[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
-
-For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
-[https://www.contributor-covenant.org/translations][translations].
-
-[homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
-[translations]: https://www.contributor-covenant.org/translations