@momo-kits/native-kits 0.162.2-beta.1 → 0.162.2-sp.1-debug

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/BadgeDemo.swift

@@ -0,0 +1,269 @@
+//
+//  BadgeDemo.swift
+//  Example
+//
+//  Created by sophia on 12/5/25.
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - BadgeDemo
+
+struct BadgeDemo: View {
+    // MARK: Internal
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                // MARK: - Basic Badges
+                
+                VStack(alignment: .leading, spacing: 12) {
+                    Text("Basic Badges")
+                        .font(.headline)
+                        .padding(.horizontal, 16)
+                    
+                    VStack(spacing: 16) {
+                        HStack(spacing: 16) {
+                            VStack(spacing: 8) {
+                                Badge()
+                                Text("Default")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                Badge(label: "9")
+                                Text("Single Digit")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                Badge(label: "99")
+                                Text("Two Digits")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                Badge(label: "999")
+                                Text("99+ Format")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                        }
+                        
+                        HStack(spacing: 16) {
+                            VStack(spacing: 8) {
+                                Badge(label: "New")
+                                Text("Text Label")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                Badge(label: "Hot", backgroundColor: Colors.pink03)
+                                Text("Custom Color")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                Badge(label: "5", backgroundColor: Colors.green03)
+                                Text("Green Badge")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                        }
+                    }
+                    .padding(.horizontal, 16)
+                }
+                
+                Divider()
+                
+                // MARK: - Badge Dots
+                
+                VStack(alignment: .leading, spacing: 12) {
+                    Text("Badge Dots")
+                        .font(.headline)
+                        .padding(.horizontal, 16)
+                    
+                    HStack(spacing: 32) {
+                        VStack(spacing: 8) {
+                            BadgeDot(size: .small)
+                            Text("Small")
+                                .font(.caption)
+                                .foregroundColor(.gray)
+                        }
+                        
+                        VStack(spacing: 8) {
+                            BadgeDot(size: .large)
+                            Text("Large")
+                                .font(.caption)
+                                .foregroundColor(.gray)
+                        }
+                    }
+                    .padding(.horizontal, 16)
+                }
+                
+                Divider()
+                
+                // MARK: - Badge Ribbons
+                
+                VStack(alignment: .leading, spacing: 12) {
+                    Text("Badge Ribbons")
+                        .font(.headline)
+                        .padding(.horizontal, 16)
+                    
+                    VStack(spacing: 20) {
+                        HStack(spacing: 20) {
+                            VStack(spacing: 8) {
+                                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
+                                    .frame(width: 150, height: 30)
+                                Text("Top Left")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
+                                    .frame(width: 150, height: 30)
+                                Text("Top Right")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                        }
+                        
+                        HStack(spacing: 20) {
+                            VStack(spacing: 8) {
+                                BadgeRibbon(position: .bottomLeft, label: "Bottom Left", isRound: true)
+                                    .frame(width: 150, height: 30)
+                                Text("Bottom Left")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                            
+                            VStack(spacing: 8) {
+                                BadgeRibbon(position: .bottomRight, label: "Bottom Right", isRound: true)
+                                    .frame(width: 150, height: 30)
+                                Text("Bottom Right")
+                                    .font(.caption)
+                                    .foregroundColor(.gray)
+                            }
+                        }
+                    }
+                    .padding(.horizontal, 16)
+                }
+                
+                Divider()
+                
+                // MARK: - Badge in Context (Real Usage Examples)
+                
+                VStack(alignment: .leading, spacing: 12) {
+                    Text("Real Usage Examples")
+                        .font(.headline)
+                        .padding(.horizontal, 16)
+                    
+                    VStack(spacing: 16) {
+                        // Notification with badge
+                        HStack {
+                            Image(systemName: "bell.fill")
+                                .font(.system(size: 24))
+                                .foregroundColor(Colors.primary)
+                            
+                            Text("Notifications")
+                                .font(.body)
+                            
+                            Spacer()
+                            
+                            Badge(label: "23")
+                        }
+                        .padding()
+                        .background(Color(.systemGray6))
+                        .cornerRadius(12)
+                        
+                        // Message with badge
+                        HStack {
+                            Image(systemName: "message.fill")
+                                .font(.system(size: 24))
+                                .foregroundColor(Colors.primary)
+                            
+                            Text("Messages")
+                                .font(.body)
+                            
+                            Spacer()
+                            
+                            Badge(label: "5")
+                        }
+                        .padding()
+                        .background(Color(.systemGray6))
+                        .cornerRadius(12)
+                        
+                        // Product card with ribbon
+                        ZStack(alignment: .topTrailing) {
+                            VStack(alignment: .leading, spacing: 8) {
+                                Rectangle()
+                                    .fill(Color(.systemGray5))
+                                    .frame(height: 120)
+                                    .cornerRadius(8)
+                                
+                                Text("Product Name")
+                                    .font(.headline)
+                                
+                                Text("$99.99")
+                                    .font(.subheadline)
+                                    .foregroundColor(.gray)
+                            }
+                            .padding()
+                            .background(Color(.systemGray6))
+                            .cornerRadius(12)
+                            
+                            BadgeRibbon(position: .topRight, label: "NEW")
+                                .frame(width: 60, height: 40)
+                                .offset(x: 5, y: 0)
+                        }
+                        
+                        // Profile with dot indicator
+                        HStack {
+                            ZStack(alignment: .topTrailing) {
+                                Circle()
+                                    .fill(Color(.systemGray5))
+                                    .frame(width: 50, height: 50)
+                                
+                                BadgeDot(size: .small)
+                                    .offset(x: 2, y: 2)
+                            }
+                            
+                            VStack(alignment: .leading) {
+                                Text("User Name")
+                                    .font(.headline)
+                                Text("Online")
+                                    .font(.caption)
+                                    .foregroundColor(Colors.green03)
+                            }
+                            
+                            Spacer()
+                        }
+                        .padding()
+                        .background(Color(.systemGray6))
+                        .cornerRadius(12)
+                    }
+                    .padding(.horizontal, 16)
+                }
+            }
+            .padding(.vertical, 16)
+        }
+    }
+}
+
+// MARK: - Preview
+
+#if DEBUG
+struct BadgeDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        BadgeDemo()
+    }
+}
+#endif

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/BaselineView.swift

@@ -0,0 +1,117 @@
+import MoMoUIKits
+import SwiftUI
+
+struct BaselineViewDemo: View {
+    @State private var enabled = true
+
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack(alignment: .top) {
+                demoContent(
+                    topInset: geometry.safeAreaInsets.top,
+                    bottomInset: geometry.safeAreaInsets.bottom
+                )
+
+                MoMoUIKits.BaselineView(enabled: enabled)
+            }
+            .background(Colors.black02)
+            .ignoresSafeArea(.container, edges: [.top, .bottom])
+        }
+    }
+
+    private func demoContent(topInset: CGFloat, bottomInset: CGFloat) -> some View {
+        VStack(spacing: 0) {
+            header(topInset: topInset)
+
+            ScrollView {
+                VStack(alignment: .leading, spacing: 16) {
+                    Toggle(isOn: $enabled) {
+                        MomoText("Show baseline overlay", typography: .headerDefaultBold)
+                    }
+                    .padding(16)
+                    .background(Colors.black01)
+                    .cornerRadius(Radius.M)
+
+                    MomoText(
+                        "Use this screen to inspect the safe area, header, horizontal spacing, bottom tab, and button baseline guides.",
+                        typography: .bodyDefaultRegular,
+                        color: Colors.textSecondary
+                    )
+
+                    ForEach(1...8, id: \.self) { index in
+                        sampleRow(index)
+                    }
+                }
+                .padding(.horizontal, 16)
+                .padding(.top, 16)
+                .padding(.bottom, 88)
+            }
+
+            bottomAction(bottomInset: bottomInset)
+        }
+    }
+
+    private func header(topInset: CGFloat) -> some View {
+        VStack(spacing: 0) {
+            Color.clear
+                .frame(height: topInset)
+
+            HStack(spacing: 12) {
+                Image(systemName: "chevron.left")
+                    .font(.system(size: 18, weight: .semibold))
+                    .frame(width: 40, height: 52)
+
+                MomoText("Baseline View", typography: .headerDefaultBold)
+
+                Spacer(minLength: 0)
+            }
+            .frame(height: 52)
+            .padding(.horizontal, 12)
+            .background(Colors.black01)
+        }
+    }
+
+    private func sampleRow(_ index: Int) -> some View {
+        HStack(spacing: 12) {
+            Circle()
+                .fill(Colors.primaryLight)
+                .frame(width: 36, height: 36)
+                .overlay(
+                    MomoText("\(index)", typography: .labelSMedium, color: Colors.primary)
+                )
+
+            VStack(alignment: .leading, spacing: 4) {
+                MomoText("Content row \(index)", typography: .headerSSemibold)
+                MomoText("Scrollable content under the debug overlay.", color: Colors.textSecondary)
+            }
+
+            Spacer(minLength: 0)
+        }
+        .padding(16)
+        .background(Colors.black01)
+        .cornerRadius(Radius.M)
+    }
+
+    private func bottomAction(bottomInset: CGFloat) -> some View {
+        VStack(spacing: 8) {
+            MoMoUIKits.Button(
+                title: "Primary action",
+                action: {},
+                type: .primary,
+                size: .large
+            )
+        }
+        .padding(.horizontal, 16)
+        .padding(.top, 8)
+        .padding(.bottom, bottomInset)
+        .background(Colors.black01)
+    }
+}
+
+#if DEBUG
+struct BaselineViewDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        BaselineViewDemo()
+    }
+}
+#endif

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/BottomTabDemo.swift

@@ -0,0 +1,89 @@
+//
+//  BottomTabDemo.swift
+//  Example
+//
+//  Usage demo for the bottom-tab navigation. Mirrors Compose's `BottomTabUsage`:
+//  four tabs (each with its own header title + badge) and a center floating
+//  button. Must be hosted inside a `NavigationContainer` (uses the Navigator).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct BottomTabDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        BottomTab(
+            items: [
+                BottomTabItem(
+                    name: "Tab1",
+                    label: "Option 1",
+                    icon: "16_basic_home",
+                    badgeLabel: "",
+                    options: NavigationOptions(headerTitle: .default("Option 1"), hiddenBack: false),
+                    screen: { tabBody("Option 1", Colors.blue09) }
+                ),
+                BottomTabItem(
+                    name: "Tab2",
+                    label: "Option 2",
+                    icon: "help_center",
+                    badgeLabel: "0", // hidden (mirrors Compose's "0" → no badge)
+                    options: NavigationOptions(headerTitle: .default("Option 2")),
+                    screen: { tabBody("Option 2", Colors.pink09) }
+                ),
+                BottomTabItem(
+                    name: "Tab3",
+                    label: "Option 3 with a very long label",
+                    icon: "pin_star",
+                    badgeLabel: "New",
+                    options: NavigationOptions(headerTitle: .default("Option 3")),
+                    screen: { tabBody("Option 3", Colors.yellow09) }
+                ),
+                BottomTabItem(
+                    name: "Tab4",
+                    label: "Option 4 also quite long here",
+                    icon: "navigation_more_icon",
+                    badgeLabel: "9999",
+                    options: NavigationOptions(headerTitle: .default("Option 4")),
+                    screen: { tabBody("Option 4", Colors.blue10) }
+                )
+            ],
+            floatingButton: BottomTabFloatingButton(
+                icon: "16_basic_home",
+                label: "Quét QR",
+                onPress: { navigator.push({ qrScreen }, options: NavigationOptions(title: "QR")) }
+            )
+        )
+    }
+
+    @ViewBuilder
+    private func tabBody(_ title: String, _ color: Color) -> some View {
+        VStack {
+            MomoText(title, typography: .headerDefaultBold)
+                .padding(.top, 24)
+            Spacer()
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(color)
+    }
+
+    private var qrScreen: some View {
+        VStack { MomoText("QR scanner placeholder") }
+            .frame(maxWidth: .infinity)
+            .padding(24)
+    }
+}
+
+// MARK: - Standalone wrapper (so it can be opened directly from Home too)
+
+struct BottomTabDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            BottomTabDemoContent()
+        } else {
+            Text("Bottom tab demo requires iOS 16+").padding()
+        }
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/ButtonDemo.swift

@@ -0,0 +1,100 @@
+//
+//  Foundation.swift
+//  Example
+//
+//  Created by Wem on 13/12/2022.
+//
+
+import Foundation
+import Lottie
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - ButtonDemo
+
+struct ButtonDemo: View {
+    // MARK: Internal
+
+    var body: some View {
+        ScrollView {
+            VStack {
+                Toggle("Disabled", isOn: $disabled)
+
+                Group {
+                    Button(title: "Button", action: onPress, type: disabled ? .disabled : .primary, size: .large,
+                           iconRight: AnyView(Image(systemName: "checkmark.circle")))
+                    Button(title: "Button", action: onPress, size: .small)
+                }
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .danger,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")))
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium)
+                    Button(title: "Button", action: onPress, type: .danger, size: .small)
+                }
+                
+                Group {
+                    Button(title: "Button", action: onPress, type: .danger, iconLeft: AnyView(Image(systemName: "checkmark.circle")), isFull: false)
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium, isFull: false)
+                    Button(title: "Button", action: onPress, type: .danger, size: .small, isFull: false)
+                }
+
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .tonal, size: .large)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .medium)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .small)
+                }
+
+                Group {
+                    Button(title: "Tinted icon", action: onPress, type: .primary,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: true)
+                    Button(title: "Original icon", action: onPress, type: .primary,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: false)
+                }
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .secondary, size: .large)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .medium)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .small)
+                }
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .text, size: .large)
+                    Button(title: "Button", action: onPress, type: .text, size: .medium)
+                    Button(title: "Button", action: onPress, type: .text, size: .small)
+                }
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .outline, size: .large)
+                    Button(title: "Button", action: onPress, type: .outline, size: .medium)
+                    Button(title: "Button", action: onPress, type: .outline, size: .small)
+                }
+
+                Group {
+                    Button(title: "Button", action: onPress, type: .disabled, size: .large)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .medium)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .small)
+                }
+                Group {
+                    Button(title: "Button", action: onPress, type: .primary, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .medium, iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .outline, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .text, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .medium, loading: true)
+                }
+            }.padding(16)
+        }.padding(.top)
+    }
+
+    func onPress() {
+        print("Button")
+    }
+
+    // MARK: Private
+
+    @State private var value: String = ""
+    @State private var disabled: Bool = false
+}