@momo-kits/native-kits 0.163.1-beta.8 → 0.163.1-beta.9-debug

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

@@ -0,0 +1,103 @@
+//
+//  StepperDemo.swift
+//  Example
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - StepperDemo
+
+struct StepperDemo: View {
+    @State private var sizeLarge = 5
+    @State private var sizeSmall = 5
+
+    @State private var def0 = 0
+    @State private var def50 = 50
+    @State private var def100 = 100
+
+    @State private var customStep5 = 0
+    @State private var customStep10 = 10
+
+    @State private var editableLarge = 5
+    @State private var editableSmall = 5
+
+    @State private var disabledAllLarge = 5
+    @State private var disabledAllSmall = 5
+
+    @State private var disabledMinus = 5
+    @State private var disabledPlus = 5
+
+    @State private var boundLow = 0
+    @State private var boundHigh = 10
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Size") {
+                    MomoStepper(value: $sizeLarge, size: .large)
+                    MomoStepper(value: $sizeSmall, size: .small)
+                }
+
+                section("Default (min=0, max=100, step=1)") {
+                    MomoStepper(value: $def0)
+                    MomoStepper(value: $def50)
+                    MomoStepper(value: $def100)
+                }
+
+                section("Custom step") {
+                    MomoStepper(value: $customStep5, min: 0, max: 50, step: 5)
+                    MomoStepper(value: $customStep10, min: 0, max: 100, step: 10)
+                }
+
+                section("Editable") {
+                    MomoStepper(value: $editableLarge, editable: true)
+                    MomoStepper(value: $editableSmall, size: .small, editable: true)
+                }
+
+                section("Disabled — all") {
+                    MomoStepper(value: $disabledAllLarge, disabled: true)
+                    MomoStepper(value: $disabledAllSmall, size: .small, disabled: true)
+                }
+
+                section("Disabled — minus only") {
+                    MomoStepper(value: $disabledMinus, disabled: StepperDisabled(minus: true, plus: false))
+                }
+
+                section("Disabled — plus only") {
+                    MomoStepper(value: $disabledPlus, disabled: StepperDisabled(minus: false, plus: true))
+                }
+
+                section("Auto-disabled at bounds") {
+                    MomoStepper(value: $boundLow, min: 0, max: 10)
+                    MomoStepper(value: $boundHigh, min: 0, max: 10)
+                }
+            }
+            .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)
+    }
+}
+
+#if DEBUG
+struct StepperDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        StepperDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,94 @@
+//
+//  StepsDemo.swift
+//  Example
+//
+//  Usage demo for the Steps progress indicator. Mirrors Compose's `StepsUsage`
+//  preview cases: vertical/horizontal, sizes, error, use-number, alignments,
+//  disabled and time labels.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let sampleSteps: [StepItem] = [
+    StepItem(title: "Order placed", description: "Your order has been received", time: "09:00"),
+    StepItem(title: "Processing", description: "We are preparing your order", time: "09:15"),
+    StepItem(title: "Shipped", description: "Your order is on the way", time: "10:30"),
+    StepItem(title: "Delivered", description: "Package delivered successfully", time: "14:00"),
+]
+
+private let shortSteps: [StepItem] = [
+    StepItem(title: "Step 1"),
+    StepItem(title: "Step 2"),
+    StepItem(title: "Step 3"),
+]
+
+private let stepsWithError: [StepItem] = [
+    StepItem(title: "Verified"),
+    StepItem(title: "Payment", error: true),
+    StepItem(title: "Complete"),
+]
+
+struct StepsDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Vertical — Large (default)") {
+                    Steps(steps: sampleSteps, activeIndex: 1)
+                }
+                section("Vertical — Small") {
+                    Steps(steps: sampleSteps, activeIndex: 2, size: .small)
+                }
+                section("Vertical — With error") {
+                    Steps(steps: stepsWithError, activeIndex: 1)
+                }
+                section("Vertical — Use number") {
+                    Steps(steps: shortSteps, activeIndex: 1, useNumber: true)
+                }
+                section("Vertical — Disabled") {
+                    Steps(steps: sampleSteps, activeIndex: 1, disabled: true)
+                }
+                section("Horizontal — Center (default)") {
+                    Steps(steps: shortSteps, activeIndex: 1, horizontal: true)
+                }
+                section("Horizontal — With time") {
+                    Steps(steps: sampleSteps, activeIndex: 2, horizontal: true)
+                }
+                section("Horizontal — Align Left") {
+                    Steps(steps: shortSteps, activeIndex: 0, horizontal: true, align: .left)
+                }
+                section("Horizontal — Align Right") {
+                    Steps(steps: shortSteps, activeIndex: 2, horizontal: true, align: .right)
+                }
+                section("Horizontal — Align Stretch") {
+                    Steps(steps: shortSteps, activeIndex: 1, horizontal: true, align: .stretch)
+                }
+                section("Horizontal — Small + Use number") {
+                    Steps(
+                        steps: shortSteps,
+                        activeIndex: 1,
+                        horizontal: true,
+                        size: .small,
+                        useNumber: true
+                    )
+                }
+                section("Horizontal — With error") {
+                    Steps(steps: stepsWithError, activeIndex: 1, horizontal: true)
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            MomoText(title, typography: .headerSSemibold, color: Colors.text)
+            content()
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}

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()
+        }
+    }
+}