@momo-kits/native-kits 0.0.1-beta.2

package/example/ios/Example/Foundation/Popup/Floats.swift

@@ -0,0 +1,127 @@
+
+
+import SwiftUI
+
+// MARK: - FloatTopFirst
+
+struct FloatTopFirst: View {
+    var body: some View {
+        ZStack {
+            RoundedRectangle(cornerRadius: 12)
+                .fill(Color(hex: "E0E3E8"))
+            
+            HStack(spacing: 0) {
+                Image("avatar1")
+                    .aspectRatio(1.0, contentMode: .fit)
+                    .cornerRadius(16)
+                    .padding(16.0)
+                
+                VStack(alignment: .leading, spacing: 8) {
+                    Group {
+                        Text("Adam Jameson")
+                            .bold()
+                            .foregroundColor(.black) +
+                            Text(" invites you to join his training")
+                            .foregroundColor(.black.opacity(0.6))
+                    }
+                    
+                    Button {
+                        debugPrint("Accepted!")
+                    } label: {
+                        Text("Accept".uppercased())
+                            .font(.system(size: 14, weight: .black))
+                    }
+                }
+                
+                Spacer()
+            }
+        }
+        .frame(height: 98)
+        .padding(.horizontal, 16)
+    }
+}
+
+// MARK: - FloatTopSecond
+
+struct FloatTopSecond: View {
+    var body: some View {
+        HStack(spacing: 0) {
+            VStack(alignment: .leading, spacing: 2) {
+                Text("We give you a gift!")
+                    .foregroundColor(.white)
+                    .font(.system(size: 18))
+                
+                Text("30% discount until the end of the month on all products of the company.")
+                    .foregroundColor(.white)
+                    .font(.system(size: 16))
+                    .opacity(0.8)
+            }
+            
+            Spacer()
+            
+            Image("gift")
+                .aspectRatio(1.0, contentMode: .fit)
+        }
+        .padding(16)
+        .background(Color(hex: "9265F8").cornerRadius(12))
+        .shadow(color: Color(hex: "9265F8").opacity(0.5), radius: 40, x: 0, y: 12)
+        .padding(.horizontal, 16)
+    }
+}
+
+// MARK: - FloatBottomFirst
+
+struct FloatBottomFirst: View {
+    var body: some View {
+        HStack(spacing: 0) {
+            Text("Your message has been sent to Alex Brant")
+                .font(.system(size: 15))
+                .foregroundColor(.black)
+            Spacer()
+            Image("avatar2")
+                .frame(width: 32, height: 32)
+                .cornerRadius(16)
+        }
+        .padding(16)
+        .background(Color.white.cornerRadius(12))
+        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
+        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .padding(.horizontal, 16)
+    }
+}
+
+// MARK: - FloatBottomSecond
+
+struct FloatBottomSecond: View {
+    var body: some View {
+        HStack(spacing: 8) {
+            Image(systemName: "wifi.slash")
+                .foregroundColor(.white)
+                .frame(width: 24, height: 24)
+            
+            Text("Check your network connection and try again")
+                .foregroundColor(.white)
+                .font(.system(size: 16))
+        }
+        .padding(16)
+        .background(Color(hex: "FFB93D").cornerRadius(12))
+        .padding(.horizontal, 16)
+    }
+}
+
+// MARK: - Floats_Previews
+
+struct Floats_Previews: PreviewProvider {
+    static var previews: some View {
+        ZStack {
+            Rectangle()
+                .ignoresSafeArea()
+            VStack {
+                FloatTopFirst()
+                FloatTopSecond()
+                FloatBottomFirst()
+                FloatBottomSecond()
+            }
+        }
+    }
+}

package/example/ios/Example/Foundation/Popup/Popups.swift

@@ -0,0 +1,101 @@
+
+import SwiftUI
+
+// MARK: - PopupMiddle
+
+struct PopupMiddle: View {
+    @Binding var isPresented: Bool
+
+    var body: some View {
+        VStack(spacing: 12) {
+            Image("winner")
+                .resizable()
+                .scaledToFit()
+                .frame(maxWidth: 226, maxHeight: 226)
+
+            Text("Congratulations!")
+                .foregroundColor(.black)
+                .font(.system(size: 24))
+                .padding(.top, 12)
+
+            Text("In two weeks, you did 12 workouts and burned 2671 calories. That's 566 calories more than last month. Continue at the same pace and the result will please you.")
+                .foregroundColor(.black)
+                .font(.system(size: 16))
+                .opacity(0.6)
+                .multilineTextAlignment(.center)
+                .padding(.bottom, 20)
+
+            Button("Thanks") {
+                isPresented = false
+            }
+            .buttonStyle(.plain)
+            .font(.system(size: 18, weight: .bold))
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, 18)
+            .padding(.horizontal, 24)
+            .foregroundColor(.white)
+            .background(Color(hex: "9265F8"))
+            .cornerRadius(12)
+        }
+        .padding(EdgeInsets(top: 37, leading: 24, bottom: 40, trailing: 24))
+        .background(Color.white.cornerRadius(20))
+        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
+        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .padding(.horizontal, 40)
+    }
+}
+
+// MARK: - PopupBottomFirst
+
+struct PopupBottomFirst: View {
+    @Binding var isPresented: Bool
+
+    var body: some View {
+        VStack(spacing: 12) {
+            Text("Policy changes")
+                .foregroundColor(.black)
+                .font(.system(size: 24))
+
+            Text("Policy change occurs through interactions between wide external changes or shocks to the political system and the success of the ideas in the coalitions, which may cause actors in the advocacy coalition to shift coalitions.")
+                .foregroundColor(.black)
+                .font(.system(size: 16))
+                .opacity(0.6)
+                .multilineTextAlignment(.center)
+                .padding(.bottom, 12)
+
+            Button("Ok, I accept") {
+                isPresented = false
+            }
+            .buttonStyle(.plain)
+            .font(.system(size: 18, weight: .bold))
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, 18)
+            .foregroundColor(.white)
+            .background(Color(hex: "FFB93D"))
+            .cornerRadius(12)
+        }
+        .padding(EdgeInsets(top: 37, leading: 24, bottom: 40, trailing: 24))
+        .background(Color.white.cornerRadius(20))
+        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
+        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .padding(.horizontal, 16)
+    }
+}
+
+// MARK: - Popups_Previews
+
+struct Popups_Previews: PreviewProvider {
+    static var previews: some View {
+        ZStack {
+            Rectangle()
+                .ignoresSafeArea()
+            PopupMiddle(isPresented: .constant(true))
+        }
+
+        ZStack {
+            Rectangle()
+                .ignoresSafeArea()
+            PopupBottomFirst(isPresented: .constant(false))
+        }
+    }
+}

package/example/ios/Example/Foundation/PopupDemo.swift

@@ -0,0 +1,366 @@
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - PopupDemo
+
+struct PopupDemo: View {
+    @AppStorage("showOTPKeyboard") var showOTPKeyboard: Bool = false
+    
+    @State var showingTopFirstFloat: Bool = false
+    @State var showingTopSecondFloat: Bool = false
+    @State var showingBottomFirstFloat: Bool = false
+    @State var showingBottomSecondFloat: Bool = false
+
+    @State var showingMiddlePopup: Bool = false
+    @State var showingBottomFirstPopup: Bool = false
+
+    @State var showingFirstActionSheet: Bool = false
+    @State var showingSecondActionSheet: Bool = false
+
+    var body: some View {
+        let hideAll: () -> () = {
+            self.showingTopFirstFloat = false
+            self.showingTopSecondFloat = false
+            self.showingBottomFirstFloat = false
+            self.showingBottomSecondFloat = false
+
+            self.showingMiddlePopup = false
+            self.showingBottomFirstPopup = false
+
+            self.showingFirstActionSheet = false
+            self.showingSecondActionSheet = false
+        }
+
+        return ZStack {
+            Rectangle()
+                .fill(Colors.background)
+                .ignoresSafeArea()
+            ScrollView {
+                LazyVStack(spacing: 12) {
+                    Group {
+                        SectionHeader(name: "Design system", count: 4)
+                            .padding(.bottom, 12)
+
+                        PopupButton(isShowing: $showOTPKeyboard, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Show OTP keyboard",
+                                detail: "Top popup show otp keyboard"
+                            ) {
+                                ActionSheetImage()
+                            }
+                        }
+                    }
+                    
+                    Group {
+                        SectionHeader(name: "Floats", count: 4)
+                            .padding(.bottom, 12)
+
+                        PopupButton(isShowing: $showingTopFirstFloat, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Top version 1",
+                                detail: "Top float with a picture and one button"
+                            ) {
+                                FloatsImage(position: .top)
+                            }
+                        }
+                        PopupButton(isShowing: $showingTopSecondFloat, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Top version 2",
+                                detail: "Top float with a picture"
+                            ) {
+                                FloatsImage(position: .top)
+                            }
+                        }
+                        PopupButton(isShowing: $showingBottomFirstFloat, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Bottom version 1",
+                                detail: "Bottom float with a picture"
+                            ) {
+                                FloatsImage(position: .bottom)
+                            }
+                        }
+                        PopupButton(isShowing: $showingBottomSecondFloat, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Bottom version 2",
+                                detail: "Bottom float with a picture"
+                            ) {
+                                FloatsImage(position: .bottom)
+                            }
+                        }
+                    }
+
+                    Group {
+                        SectionHeader(name: "Popups", count: 2)
+                            .padding(EdgeInsets(top: 20, leading: 0, bottom: 12, trailing: 0))
+
+                        PopupButton(isShowing: $showingMiddlePopup, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Middle",
+                                detail: "Popup in the middle of the screen with a picture"
+                            ) {
+                                PopupImage(style: .default)
+                            }
+                        }
+                        PopupButton(isShowing: $showingBottomFirstPopup, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Bottom version 1",
+                                detail: "Popup bottom"
+                            ) {
+                                PopupImage(style: .bottomFirst)
+                            }
+                        }
+                    }
+
+                    Group {
+                        SectionHeader(name: "Action sheets", count: 2)
+                            .padding(EdgeInsets(top: 20, leading: 0, bottom: 12, trailing: 0))
+
+                        PopupButton(isShowing: $showingFirstActionSheet, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Version 1",
+                                detail: "Action sheets"
+                            ) {
+                                ActionSheetImage()
+                            }
+                        }
+                        PopupButton(isShowing: $showingSecondActionSheet, hideAll: hideAll) {
+                            PopupTypeView(
+                                title: "Version 2",
+                                detail: "Action sheets"
+                            ) {
+                                ActionSheetImage()
+                            }
+                        }
+                    }
+                }
+            }
+
+            // MARK: - Designed floats
+
+            .popup(isPresented: $showingTopFirstFloat, type: .floater(), position: .top, animation: .spring()) {
+                FloatTopFirst()
+            }
+            .popup(isPresented: $showingTopSecondFloat, type: .floater(), position: .top, animation: .spring(), autohideIn: 3) {
+                FloatTopSecond()
+            }
+            .popup(isPresented: $showingBottomFirstFloat, type: .floater(), position: .bottom, animation: .spring(), autohideIn: 2) {
+                FloatBottomFirst()
+            }
+            .popup(isPresented: $showingBottomSecondFloat, type: .floater(), position: .bottom, animation: .spring(), autohideIn: 5) {
+                FloatBottomSecond()
+            }
+
+            // MARK: - Designed popups
+
+            .popup(isPresented: $showingMiddlePopup, type: .default, position: .center, closeOnTap: true, backgroundColor: .black.opacity(0.4)) {
+                PopupMiddle(isPresented: $showingMiddlePopup)
+            }
+            .popup(isPresented: $showingBottomFirstPopup, type: .floater(), position: .bottom, closeOnTapOutside: true, backgroundColor: .black.opacity(0.4)) {
+                PopupBottomFirst(isPresented: $showingBottomFirstPopup)
+            }
+
+            // MARK: - Designed sheets
+
+            .popup(isPresented: $showingFirstActionSheet, type: .toast, position: .bottom, closeOnTap: false, backgroundColor: .black.opacity(0.4)) {
+                ActionSheetFirst()
+            }
+            .popup(isPresented: $showingSecondActionSheet, type: .toast, position: .bottom, closeOnTap: false, backgroundColor: .black.opacity(0.4)) {
+                ActionSheetSecond()
+            }
+        }
+    }
+}
+
+// MARK: - SectionHeader
+
+private struct SectionHeader: View {
+    let name: String
+    let count: Int
+
+    var body: some View {
+        HStack {
+            Text(name)
+                .font(.system(size: 24, weight: .bold))
+                .foregroundColor(Colors.text)
+
+            Spacer()
+
+            HStack(spacing: 4) {
+                Text("\(count)")
+                    .font(.system(size: 18))
+                    .foregroundColor(Colors.text)
+                    .opacity(0.8)
+
+                Text("types")
+                    .font(.system(size: 18))
+                    .foregroundColor(Colors.text)
+                    .opacity(0.5)
+            }
+        }
+        .padding(.horizontal, 20)
+    }
+}
+
+// MARK: - PopupTypeView
+
+private struct PopupTypeView<Content>: View where Content: View {
+    let title: String
+    let detail: String
+    @ViewBuilder let icon: () -> Content
+
+    var body: some View {
+        ZStack(alignment: .leading) {
+            RoundedRectangle(cornerRadius: 12)
+                .fill(Colors.card)
+
+            HStack {
+                icon()
+                VStack(alignment: .leading, spacing: 0) {
+                    Text(title)
+                        .font(.system(size: 18))
+                        .foregroundColor(Colors.text)
+                    Text(detail)
+                        .lineLimit(1)
+                        .font(.system(size: 13))
+                        .foregroundColor(Colors.text)
+                        .opacity(0.4)
+                }
+            }
+            .padding()
+        }
+        .padding(.horizontal, 20)
+    }
+}
+
+// MARK: - PopupButton
+
+private struct PopupButton<Content>: View where Content: View {
+    @Binding var isShowing: Bool
+
+    var hideAll: () -> ()
+
+    @ViewBuilder let content: () -> Content
+
+    var body: some View {
+        Button {
+            hideAll()
+            isShowing.toggle()
+        } label: {
+            content()
+        }
+    }
+}
+
+// MARK: - AlertImageView
+
+private struct AlertImageView<Content>: View where Content: View {
+    let hex: String
+    let alignment: Alignment
+
+    @ViewBuilder let content: (Color) -> Content
+
+    var body: some View {
+        let color = Color(hex: hex)
+        return ZStack(alignment: alignment) {
+            Rectangle()
+                .fill(color)
+                .opacity(0.24)
+                .frame(width: 40, height: 40)
+            content(color)
+        }
+        .cornerRadius(10)
+    }
+}
+
+// MARK: - FloatsImage
+
+private struct FloatsImage: View {
+    enum Position {
+        case top
+        case bottom
+
+        // MARK: Internal
+
+        func toAligment() -> Alignment {
+            switch self {
+            case .top:
+                return .top
+            case .bottom:
+                return .bottom
+            }
+        }
+    }
+
+    let position: Position
+
+    var body: some View {
+        AlertImageView(hex: "9265F8", alignment: position.toAligment()) { color in
+            Rectangle()
+                .fill(color)
+                .frame(width: 24, height: 4)
+                .cornerRadius(12)
+                .padding(.all, 8)
+        }
+    }
+}
+
+// MARK: - PopupImage
+
+private struct PopupImage: View {
+    enum Style {
+        case `default`
+        case bottomFirst
+        case bottomSecond
+
+        // MARK: Internal
+
+        func toAligment() -> Alignment {
+            switch self {
+            case .default:
+                return .center
+            case .bottomFirst,
+                 .bottomSecond:
+                return .bottom
+            }
+        }
+    }
+
+    let style: Style
+
+    var body: some View {
+        AlertImageView(hex: "CCE7A2", alignment: style.toAligment()) { color in
+            switch style {
+            case .default:
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(color)
+                    .frame(width: 24, height: 20)
+
+            case .bottomFirst:
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(color)
+                    .frame(width: 24, height: 20)
+                    .padding(.bottom, 4)
+
+            case .bottomSecond:
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(color)
+                    .frame(width: 40, height: 20)
+                    .padding(0)
+            }
+        }
+    }
+}
+
+// MARK: - ActionSheetImage
+
+private struct ActionSheetImage: View {
+    var body: some View {
+        AlertImageView(hex: "FFB93D", alignment: .bottom) { color in
+            RoundedRectangle(cornerRadius: 4)
+                .fill(color)
+                .frame(width: 40, height: 20)
+                .padding(0)
+        }
+    }
+}

package/example/ios/Example/Foundation/TypographyDemo.swift

@@ -0,0 +1,53 @@
+//
+//  TypographyDemo.swift
+//  Example
+//
+//  Created by Wem on 13/12/2022.
+//
+
+import Foundation
+import SwiftUI
+
+struct TypographyDemo: View {
+
+    var body: some View {
+        ScrollView {
+            Group {
+                VStack {
+                    Text("Text").font(.h1)
+                    Text("Text").font(.h2)
+                    Text("Text").font(.h3)
+                    Text("Text").font(.h4)
+                }
+                VStack {
+                    Text("Text").font(.title1)
+                    Text("Text").font(.title2)
+                    Text("Text").font(.title3)
+                }
+                VStack {
+                    Text("Text").font(.headerText1)
+                    Text("Text").font(.headerText2)
+                    Text("Text").font(.headerText3)
+                    Text("Text").font(.paragraph)
+                }
+                VStack {
+                    Text("Text").font(.description1)
+                    Text("Text").font(.description2)
+                    Text("Text").font(.description3)
+                }
+                VStack {
+                    Text("Text").font(.label1)
+                    Text("Text").font(.label2)
+                    Text("Text").font(.label3)
+                    Text("Text").font(.label4)
+                }
+                VStack {
+                    Text("Text").font(.action1)
+                    Text("Text").font(.action2)
+                    Text("Text").font(.action3)
+                    Text("Text").font(.action4)
+                }
+            }.padding(16)
+        }.padding(.top)
+    }
+}

package/example/ios/Example/Foundation.swift

@@ -0,0 +1,26 @@
+//
+//  Foundation.swift
+//  Example
+//
+//  Created by Wem on 13/12/2022.
+//
+
+import Foundation
+import SwiftUI
+
+struct Foundation: View {
+    var foundations: [ComponentModel]
+    
+    var body: some View {
+        NavigationView {
+            List(foundations) { item in
+                NavigationLink {
+                    ComponentDetail(item)
+                } label: {
+                    ComponentItem(item)
+                }
+            }
+            .navigationTitle("Foundations")
+        }
+    }
+}

package/example/ios/Example/Info.plist

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>SFProText-Bold.ttf</string>
+		<string>SFProText-Regular.ttf</string>
+		<string>SFProText-Semibold.ttf</string>
+		<string>SFProText-Light.ttf</string>
+		<string>SFProText-Heavy.ttf</string>
+		<string>SFProText-Medium.ttf</string>
+		<string>SFProText-Black.ttf</string>
+		<string>SFProText-Thin.ttf</string>
+		<string>SFProText-Ultralight.ttf</string>
+	</array>
+</dict>
+</plist>