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

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

@@ -0,0 +1,79 @@
+import SwiftUI
+import MoMoUIKits
+
+struct SuggestActionDemo: View {
+    @State private var visible1 = true
+    @State private var visible2 = true
+    @State private var visible3 = true
+    @State private var visible4 = true
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Default") {
+                    SuggestAction(
+                        message: "You have a new suggestion available for you.",
+                        buttonTitle: "View",
+                        visible: visible1,
+                        onClose: { visible1 = false },
+                        onPressButton: { visible1 = false }
+                    )
+                }
+
+                section("With bold message") {
+                    SuggestAction(
+                        message: "You have a new suggestion available for you.",
+                        buttonTitle: "View",
+                        boldMessage: "new suggestion",
+                        visible: visible2,
+                        onClose: { visible2 = false },
+                        onPressButton: { visible2 = false }
+                    )
+                }
+
+                section("With image") {
+                    SuggestAction(
+                        message: "Complete your profile to unlock more features.",
+                        buttonTitle: "Go",
+                        boldMessage: "Complete",
+                        image: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
+                        visible: visible3,
+                        onClose: { visible3 = false },
+                        onPressButton: { visible3 = false }
+                    )
+                }
+
+                section("Short message") {
+                    SuggestAction(
+                        message: "Update available.",
+                        buttonTitle: "Update",
+                        visible: visible4,
+                        onClose: { visible4 = false },
+                        onPressButton: { visible4 = false }
+                    )
+                }
+
+                Button(
+                    title: "Reset all",
+                    action: {
+                        visible1 = true
+                        visible2 = true
+                        visible3 = true
+                        visible4 = true
+                    },
+                    type: .primary,
+                    isFull: false
+                )
+            }
+            .padding()
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            MomoText(title, typography: .headerSSemibold, color: Colors.textSecondary)
+            content()
+        }
+    }
+}

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

@@ -0,0 +1,152 @@
+import MoMoUIKits
+import SwiftUI
+
+struct SwipeDemo: View {
+    @State private var showLeftActions = true
+    @State private var showRightActions = true
+    @State private var heightValue: Double = 56
+    @State private var radiusValue: Double = 0
+    @State private var lastAction = "No action yet"
+
+    private var editAction: SwipeAction {
+        SwipeAction(
+            label: "Edit",
+            icon: "24_basic_copy",
+            backgroundColor: Colors.blue03,
+            onPress: { lastAction = "Edit pressed" }
+        )
+    }
+
+    private var deleteAction: SwipeAction {
+        SwipeAction(
+            label: "Delete",
+            icon: "24_basic_delete",
+            backgroundColor: Colors.red03,
+            onPress: { lastAction = "Delete pressed" }
+        )
+    }
+
+    private var archiveAction: SwipeAction {
+        SwipeAction(
+            label: "Archive",
+            icon: "24_basic_flag",
+            backgroundColor: Colors.orange03,
+            onPress: { lastAction = "Archive pressed" }
+        )
+    }
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: Spacing.XL) {
+                preview
+                Divider()
+                playground
+            }
+            .padding(.vertical, Spacing.L)
+        }
+        .background(Colors.background)
+    }
+
+    private var preview: some View {
+        VStack(alignment: .leading, spacing: Spacing.XL) {
+            section("Right actions only") {
+                Swipe(rightActions: [deleteAction]) {
+                    swipeContent("Swipe left to delete")
+                }
+            }
+
+            section("Left actions only") {
+                Swipe(leftActions: [editAction, archiveAction]) {
+                    swipeContent("Swipe right for actions")
+                }
+            }
+
+            section("Both sides") {
+                Swipe(leftActions: [editAction], rightActions: [deleteAction]) {
+                    swipeContent("Swipe both directions")
+                }
+            }
+
+            section("Multiple right actions") {
+                Swipe(rightActions: [editAction, archiveAction, deleteAction]) {
+                    swipeContent("3 right actions")
+                }
+            }
+
+            section("With itemRadius") {
+                Swipe(rightActions: [deleteAction], itemRadius: Radius.S) {
+                    swipeContent("Rounded corners")
+                }
+            }
+
+            section("Custom height") {
+                Swipe(rightActions: [deleteAction], height: 80) {
+                    swipeContent("Taller row (80dp)")
+                }
+            }
+        }
+    }
+
+    private var playground: some View {
+        section("Playground") {
+            Toggle(isOn: $showLeftActions) {
+                MomoText("Show Left Actions", typography: .labelSMedium, color: Colors.text)
+            }
+
+            Toggle(isOn: $showRightActions) {
+                MomoText("Show Right Actions", typography: .labelSMedium, color: Colors.text)
+            }
+
+            VStack(alignment: .leading, spacing: Spacing.XS) {
+                MomoText("Height: \(Int(heightValue))", typography: .labelSMedium, color: Colors.textSecondary)
+                Slider(value: $heightValue, in: 40...100, step: 1)
+            }
+
+            VStack(alignment: .leading, spacing: Spacing.XS) {
+                MomoText("Item Radius: \(Int(radiusValue))", typography: .labelSMedium, color: Colors.textSecondary)
+                Slider(value: $radiusValue, in: 0...24, step: 1)
+            }
+
+            Swipe(
+                leftActions: showLeftActions ? [editAction, archiveAction] : [],
+                rightActions: showRightActions ? [deleteAction] : [],
+                height: CGFloat(heightValue),
+                itemRadius: CGFloat(radiusValue)
+            ) {
+                swipeContent("Swipe me!")
+            }
+
+            MomoText(lastAction, typography: .descriptionDefaultRegular, color: Colors.textSecondary)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: Spacing.M) {
+            MomoText(title, typography: .headerSSemibold, color: Colors.text)
+            content()
+        }
+        .padding(.horizontal, Spacing.M)
+    }
+
+    private func swipeContent(_ text: String) -> some View {
+        HStack {
+            MomoText(text, typography: .bodyDefaultRegular, color: Colors.text)
+            Spacer(minLength: 0)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.M)
+        .background(Colors.card)
+    }
+}
+
+#if DEBUG
+struct SwipeDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        SwipeDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,33 @@
+//
+//  SwitchDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 3/12/24.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct SwitchDemo: View {
+    @State private var checked = false
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text("Value")
+            Switch($checked, onChange: { newValue in
+                checked = newValue
+            })
+               
+            
+            Text("Disabled")
+            Switch( .constant(true), disabled: true, onChange: { _ in
+                checked = !checked
+            })
+                
+            Switch( .constant(false), disabled: true, onChange: { _ in
+                checked = !checked
+            })
+        }
+        .padding()
+    }
+}

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

@@ -0,0 +1,190 @@
+//
+//  TabViewDemo.swift
+//  Example
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - TabViewDemo
+
+struct TabViewDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Default (2 tabs)") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Tab 1") { tabContent("Content 1", Colors.pink09) },
+                            TabViewItem(title: "Tab 2") { tabContent("Content 2", Colors.blue08) },
+                        ]
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Default (3 tabs)") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Overview") { tabContent("Overview", Colors.pink09) },
+                            TabViewItem(title: "Activity") { tabContent("Activity", Colors.blue08) },
+                            TabViewItem(title: "Settings") { tabContent("Settings", Colors.green08) },
+                        ]
+                    )
+                    .frame(height: 160)
+                }
+
+                section("With badge & dot") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Inbox", badgeValue: "5") { tabContent("Inbox", Colors.orange08) },
+                            TabViewItem(title: "Alerts", showDot: true, dotSize: .small) { tabContent("Alerts", Colors.red08) },
+                            TabViewItem(title: "Done") { tabContent("Done", Colors.green08) },
+                        ]
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Scrollable (many tabs)") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Monday") { tabContent("Monday", Colors.pink09) },
+                            TabViewItem(title: "Tuesday") { tabContent("Tuesday", Colors.blue08) },
+                            TabViewItem(title: "Wednesday") { tabContent("Wednesday", Colors.green08) },
+                            TabViewItem(title: "Thursday") { tabContent("Thursday", Colors.orange08) },
+                            TabViewItem(title: "Friday") { tabContent("Friday", Colors.mint08) },
+                            TabViewItem(title: "Saturday") { tabContent("Saturday", Colors.red08) },
+                            TabViewItem(title: "Sunday") { tabContent("Sunday", Colors.pink09) },
+                        ],
+                        scrollable: true,
+                        selectedColor: Colors.pink01,
+                        unselectedColor: Colors.blue07
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Card type") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Personal") { tabContent("Personal", Colors.pink09) },
+                            TabViewItem(title: "Business") { tabContent("Business", Colors.blue08) },
+                            TabViewItem(title: "Savings") { tabContent("Savings", Colors.green08) },
+                        ],
+                        type: .card
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Card type with icon") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Home", icon: "basic_home") { tabContent("Home", Colors.pink09) },
+                            TabViewItem(title: "Search", icon: "basic_search") { tabContent("Search", Colors.blue08) },
+                        ],
+                        type: .card
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Column direction") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Home", icon: "basic_home") { tabContent("Home", Colors.pink09) },
+                            TabViewItem(title: "Search", icon: "basic_search") { tabContent("Search", Colors.blue08) },
+                            TabViewItem(title: "Profile", icon: "basic_user") { tabContent("Profile", Colors.green08) },
+                        ],
+                        direction: .column
+                    )
+                    .frame(height: 200)
+                }
+
+                section("Custom renderIcon") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(
+                                title: "Custom",
+                                renderIcon: { active in
+                                    AnyView(
+                                        RoundedRectangle(cornerRadius: 12)
+                                            .fill(active ? Colors.pink09 : Colors.black17)
+                                            .frame(width: 24, height: 24)
+                                    )
+                                }
+                            ) { tabContent("Custom Icon", Colors.pink09) },
+                            TabViewItem(title: "Normal", icon: "basic_search") { tabContent("Normal", Colors.blue08) },
+                        ]
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Swipe enabled") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Swipe 1") { tabContent("Swipe left/right", Colors.pink09) },
+                            TabViewItem(title: "Swipe 2") { tabContent("Swipeable!", Colors.blue08) },
+                        ],
+                        userScrollEnabled: true
+                    )
+                    .frame(height: 160)
+                }
+
+                section("Column direction card type") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Personal", icon: "basic_home") { tabContent("Personal", Colors.pink09) },
+                            TabViewItem(title: "Business", icon: "basic_search") { tabContent("Business", Colors.blue08) },
+                        ],
+                        type: .card,
+                        direction: .column
+                    )
+                    .frame(height: 200)
+                }
+
+                section("fitContent (no pager)") {
+                    MomoTabView(
+                        tabs: [
+                            TabViewItem(title: "Tab A") { tabContent("Tab A content", Colors.pink09) },
+                            TabViewItem(title: "Tab B") { tabContent("Tab B content", Colors.blue08) },
+                            TabViewItem(title: "Tab C") { tabContent("Tab C content", Colors.green08) },
+                        ],
+                        fitContent: true
+                    )
+                }
+            }
+            .padding(.vertical, 16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(title)
+                .font(.headline)
+            content()
+        }
+        .padding(.horizontal, 16)
+    }
+
+    @ViewBuilder
+    private func tabContent(_ label: String, _ background: Color) -> some View {
+        ZStack {
+            background
+            MomoText(label, typography: .headerSSemibold, color: Colors.text)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: 120)
+    }
+}
+
+#if DEBUG
+struct TabViewDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        TabViewDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,34 @@
+import SwiftUI
+import MoMoUIKits
+
+struct TagDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("Color").font(.headline)
+                    Tag()
+                    Tag(color: .red)
+                    Tag(color: .blue)
+                    Tag(color: .green)
+                    Tag(color: .orange)
+                    Tag(color: .grey)
+                }
+
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("Size").font(.headline)
+                    Tag(size: .large)
+                    Tag(size: .medium)
+                }
+
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("With Icon").font(.headline)
+                    Tag(icon: "ic_momo", color: .grey)
+                    Tag(icon: "ic_momo", color: .red, size: .medium)
+                    Tag(icon: "ic_momo", color: .blue, size: .medium)
+                }
+            }
+            .padding()
+        }
+    }
+}

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

@@ -0,0 +1,182 @@
+//
+//  ThemeDemo.swift
+//  iosApp
+//
+//  Created by sophia on 25/2/26.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - ThemeDemo
+
+struct ThemeDemo: View {
+    @Environment(\.appTheme) private var theme
+    @State private var isDarkMode: Bool = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+
+                // MARK: Dark Mode Toggle
+                Toggle(isOn: $isDarkMode) {
+                    Text("Dark Mode")
+                        .font(.headline)
+                }
+                .padding(.horizontal, 16)
+                .padding(.vertical, 12)
+                .onChange(of: isDarkMode) { _ in
+                    // Theme switching is handled via parent environment
+                }
+
+                Divider()
+
+                // MARK: Primary / Secondary
+                SectionHeader("Primary & Secondary")
+                ThemeColorRow(label: "primary", color: theme.colors.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.secondary)
+
+                // MARK: Background
+                SectionHeader("Background")
+                ThemeColorRow(label: "default", color: theme.colors.background.default)
+                ThemeColorRow(label: "surface", color: theme.colors.background.surface)
+                ThemeColorRow(label: "tonal", color: theme.colors.background.tonal)
+                ThemeColorRow(label: "pressed", color: theme.colors.background.pressed)
+                ThemeColorRow(label: "selected", color: theme.colors.background.selected)
+                ThemeColorRow(label: "disable", color: theme.colors.background.disable)
+
+                // MARK: Text
+                SectionHeader("Text")
+                ThemeColorRow(label: "default", color: theme.colors.text.default)
+                ThemeColorRow(label: "secondary", color: theme.colors.text.secondary)
+                ThemeColorRow(label: "hint", color: theme.colors.text.hint)
+                ThemeColorRow(label: "disable", color: theme.colors.text.disable)
+
+                // MARK: Border
+                SectionHeader("Border")
+                ThemeColorRow(label: "default", color: theme.colors.border.default)
+                ThemeColorRow(label: "disable", color: theme.colors.border.disable)
+
+                // MARK: Success
+                SectionHeader("Success")
+                ThemeColorRow(label: "primary", color: theme.colors.success.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.success.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.success.container)
+
+                // MARK: Warning
+                SectionHeader("Warning")
+                ThemeColorRow(label: "primary", color: theme.colors.warning.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.warning.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.warning.container)
+
+                // MARK: Error
+                SectionHeader("Error")
+                ThemeColorRow(label: "primary", color: theme.colors.error.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.error.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.error.container)
+
+                // MARK: Highlight
+                SectionHeader("Highlight")
+                ThemeColorRow(label: "primary", color: theme.colors.highlight.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.highlight.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.highlight.container)
+
+                // MARK: Interactive
+                SectionHeader("Interactive")
+                ThemeColorRow(label: "primary", color: theme.colors.interactive.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.interactive.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.interactive.container)
+
+                Spacer(minLength: 32)
+            }
+        }
+        .navigationTitle("Theme")
+        .background(isDarkMode ? Colors.black10.ignoresSafeArea() : theme.colors.background.default.ignoresSafeArea())
+        .environment(\.appTheme, isDarkMode ? darkTheme : defaultTheme)
+    }
+}
+
+// MARK: - SectionHeader
+
+private struct SectionHeader: View {
+    let title: String
+
+    init(_ title: String) {
+        self.title = title
+    }
+
+    var body: some View {
+        Text(title)
+            .font(.headline)
+            .fontWeight(.bold)
+            .padding(.horizontal, 16)
+            .padding(.top, 20)
+            .padding(.bottom, 8)
+    }
+}
+
+// MARK: - ThemeColorRow
+
+private struct ThemeColorRow: View {
+    @Environment(\.appTheme) private var theme
+    let label: String
+    let color: Color
+
+    var body: some View {
+        HStack(spacing: 12) {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(color)
+                .frame(width: 36, height: 36)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 8)
+                        .stroke(theme.colors.border.default, lineWidth: 1)
+                )
+
+            Text(label)
+                .font(.body)
+                .foregroundColor(theme.colors.text.default)
+
+            Spacer()
+
+            Text(color.toHexString())
+                .font(.caption)
+                .foregroundColor(theme.colors.text.hint)
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .background(theme.colors.background.tonal)
+                .clipShape(Capsule())
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 4)
+    }
+}
+
+// MARK: - Color+Hex helper
+
+extension Color {
+    /// Returns a hex string like "#EB2F96" from a SwiftUI Color.
+    func toHexString() -> String {
+        guard let cgColor = UIColor(self).cgColor.converted(
+            to: CGColorSpaceCreateDeviceRGB(),
+            intent: .defaultIntent,
+            options: nil
+        ) else { return "#??????" }
+        guard let components = cgColor.components, components.count >= 3 else { return "#??????" }
+        let r = Int((components[0] * 255).rounded())
+        let g = Int((components[1] * 255).rounded())
+        let b = Int((components[2] * 255).rounded())
+        return String(format: "#%02X%02X%02X", r, g, b)
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    if #available(iOS 16.0, *) {
+        NavigationStack {
+            ThemeDemo()
+        }
+    } else {
+        // Fallback on earlier versions
+    }
+}