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

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

@@ -0,0 +1,121 @@
+import MoMoUIKits
+import SwiftUI
+
+struct PopupNotifyDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            PopupNotifyDemoContent()
+        } else {
+            MomoText("PopupNotify demo requires iOS 16+")
+                .padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct PopupNotifyDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var image = "https://i.imgur.com/s70S9s9.png"
+    @State private var title = "Title"
+    @State private var description = "Check lại một nhịp auto chuyển sang dạng CTA."
+    @State private var error = "9004"
+    @State private var buttonDirection: PopupActionDirection = .auto
+    @State private var primaryTitle = "Primary"
+    @State private var secondaryTitle = "Secondary"
+    @State private var showCloseButton = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: Spacing.M) {
+                HStack(alignment: .center, spacing: Spacing.S) {
+                    Input(
+                        text: $image,
+                        placeholder: "Image URL",
+                        floatingValue: "Image URL"
+                    )
+                    Checkbox(
+                        Binding(
+                            get: { image.isEmpty },
+                            set: { checked in
+                                image = checked ? "" : "https://i.imgur.com/s70S9s9.png"
+                            }
+                        ),
+                        title: "undefined"
+                    )
+                }
+
+                Input(text: $title, placeholder: "Title", floatingValue: "Title")
+                Input(text: $description, placeholder: "Description", floatingValue: "Description")
+
+                HStack(alignment: .center, spacing: Spacing.S) {
+                    Input(text: $error, placeholder: "Error", floatingValue: "Error")
+                    Checkbox(
+                        Binding(
+                            get: { error.isEmpty },
+                            set: { checked in error = checked ? "" : "9004" }
+                        ),
+                        title: "undefined"
+                    )
+                }
+
+                VStack(alignment: .leading, spacing: Spacing.XS) {
+                    MomoText("Button Direction", typography: .descriptionDefaultRegular, color: Colors.black12)
+                    Picker("Button Direction", selection: $buttonDirection) {
+                        Text("Auto").tag(PopupActionDirection.auto)
+                        Text("Row").tag(PopupActionDirection.row)
+                        Text("Column").tag(PopupActionDirection.column)
+                    }
+                    .pickerStyle(.segmented)
+                }
+
+                Input(
+                    text: $primaryTitle,
+                    placeholder: "Primary Button Title",
+                    floatingValue: "Primary Button Title"
+                )
+                Input(
+                    text: $secondaryTitle,
+                    placeholder: "Secondary Button Title",
+                    floatingValue: "Secondary Button Title"
+                )
+
+                Checkbox($showCloseButton, title: "Show Close Button")
+
+                MoMoUIKits.Button(
+                    title: "Show popup",
+                    action: showPopup,
+                    size: .large
+                )
+                .padding(.top, Spacing.XS)
+            }
+            .padding(Spacing.L)
+        }
+    }
+
+    private func showPopup() {
+        navigator.showModal {
+            PopupNotify(
+                props: PopupNotifyProps(
+                    image: image,
+                    title: title,
+                    description: description,
+                    error: error,
+                    primary: PopupAction(title: primaryTitle, onPress: { navigator.hideOverplay() }),
+                    secondary: PopupAction(title: secondaryTitle, onPress: { navigator.hideOverplay() }),
+                    buttonDirection: buttonDirection,
+                    onIconClose: { navigator.hideOverplay() },
+                    isShowCloseIcon: showCloseButton
+                )
+            )
+        }
+    }
+}
+
+#if DEBUG
+struct PopupNotifyDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        PopupNotifyDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,76 @@
+//
+//  PopupPromotionDemo.swift
+//  Example
+//
+//  Usage demo for PopupPromotion component.
+//  Mirrors Compose's PromotionPopupUsage: an image-URL form whose action
+//  button presents the popup through `navigator.showModal`.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - PopupPromotionDemo
+
+struct PopupPromotionDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            PopupPromotionDemoContent()
+        } else {
+            Text("PopupPromotion demo requires iOS 16+")
+                .padding()
+        }
+    }
+}
+
+// MARK: - PopupPromotionDemoContent
+
+@available(iOS 16.0, *)
+private struct PopupPromotionDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var imageUrl = "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png"
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 12) {
+                Input(
+                    text: $imageUrl,
+                    placeholder: "Image URL",
+                    floatingValue: "Image URL"
+                )
+
+                Button(
+                    title: "Show Popup",
+                    action: showPopup,
+                    type: .primary,
+                    size: .large
+                )
+                .padding(.top, 8)
+            }
+            .padding(16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    private func showPopup() {
+        navigator.showModal {
+            PopupPromotion(
+                imageUrl: imageUrl,
+                onIconClose: { navigator.hideOverplay() },
+                onAction: { navigator.hideOverplay() }
+            )
+        }
+    }
+}
+
+// MARK: - Preview
+
+#if DEBUG
+struct PopupPromotionDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        PopupPromotionDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,89 @@
+//
+//  ProgressInfoDemo.swift
+//  Example
+//
+
+import SwiftUI
+import MoMoUIKits
+
+// MARK: - ProgressInfoDemo
+
+struct ProgressInfoDemo: View {
+    private let sampleSteps = [
+        ProgressInfoItem(title: "Bước 1", description: "Mô tả bước đầu tiên"),
+        ProgressInfoItem(title: "Bước 2", description: "Mô tả bước thứ hai"),
+        ProgressInfoItem(title: "Bước 3", description: "Mô tả bước thứ ba"),
+    ]
+
+    private let sampleStepsNoDesc = [
+        ProgressInfoItem(title: "Đăng ký"),
+        ProgressInfoItem(title: "Xác minh"),
+        ProgressInfoItem(title: "Hoàn tất"),
+    ]
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Vertical (default)") {
+                    ProgressInfo(steps: sampleSteps)
+                }
+
+                section("Vertical – no description") {
+                    ProgressInfo(steps: sampleStepsNoDesc, showDescription: false)
+                }
+
+                section("Vertical – useNumber") {
+                    ProgressInfo(steps: sampleSteps, useNumber: true)
+                }
+
+                section("Vertical – Small size") {
+                    ProgressInfo(steps: sampleSteps, size: .small)
+                }
+
+                section("Horizontal – Center (default)") {
+                    ProgressInfo(steps: sampleSteps, horizontal: true)
+                }
+
+                section("Horizontal – Left") {
+                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .left)
+                }
+
+                section("Horizontal – Right") {
+                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .right)
+                }
+
+                section("Horizontal – Stretch") {
+                    ProgressInfo(steps: sampleSteps, horizontal: true, align: .stretch)
+                }
+
+                section("Horizontal – useNumber") {
+                    ProgressInfo(steps: sampleSteps, horizontal: true, useNumber: true)
+                }
+
+                section("Horizontal – Small size") {
+                    ProgressInfo(
+                        steps: sampleStepsNoDesc,
+                        horizontal: true,
+                        size: .small,
+                        showDescription: false
+                    )
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(title)
+                .font(.system(size: 14, weight: .semibold))
+                .foregroundColor(.secondary)
+            content()
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}

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

@@ -0,0 +1,32 @@
+import SwiftUI
+import MoMoUIKits
+
+struct RadioDemo: View {
+    @State private var group: AnyHashable = 1
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 24) {
+            // Value
+            VStack(alignment: .leading, spacing: 12) {
+                Text("Value").font(.description1)
+                Radio(value: 1, groupValue: $group)
+                Radio(value: 2, groupValue: $group)
+            }
+
+            // Disabled
+            VStack(alignment: .leading, spacing: 12) {
+                Text("Disabled").font(.description1)
+                Radio(value: 1, groupValue: .constant(1), disabled: true)
+                Radio(value: 2, groupValue: .constant(1), disabled: false)
+            }
+
+            // Label
+            VStack(alignment: .leading, spacing: 12) {
+                Text("Label").font(.description1)
+                Radio(value: 1, groupValue: .constant(1), label: "Label")
+                Radio(value: 2, groupValue: .constant(1), label: "Label")
+            }
+        }
+        .padding()
+    }
+}

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

@@ -0,0 +1,56 @@
+import SwiftUI
+import MoMoUIKits
+
+struct RatingDemo: View {
+    @State private var interactiveRating: Float = 3
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Size") {
+                    Rating(numOfStars: 5, rating: 3, size: .small)
+                    Rating(numOfStars: 5, rating: 3, size: .medium)
+                    Rating(numOfStars: 5, rating: 3, size: .large)
+                }
+
+                section("Half star") {
+                    Rating(numOfStars: 5, rating: 3.5)
+                }
+
+                section("Full") {
+                    Rating(numOfStars: 5, rating: 5)
+                }
+
+                section("Empty") {
+                    Rating(numOfStars: 5, rating: 0)
+                }
+
+                section("Read-only (no callback)") {
+                    Rating(numOfStars: 5, rating: 4)
+                }
+
+                section("Interactive") {
+                    Rating(
+                        numOfStars: 5,
+                        rating: interactiveRating,
+                        onRatingChange: { newRating in
+                            interactiveRating = Float(newRating)
+                        }
+                    )
+                }
+            }
+            .padding()
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(title)
+            content()
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+//
+//  SkeletonDemo.swift
+//  Example
+//
+
+import SwiftUI
+import MoMoUIKits
+
+public struct SkeletonDemo: View {
+    public init() {}
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Spacer().frame(height: 12)
+
+            // Square skeleton (Compose: fillMaxWidth().aspectRatio(1f)).
+            Skeleton()
+                .aspectRatio(1, contentMode: .fit)
+                .frame(maxWidth: .infinity)
+
+            // Fixed-height skeleton (Compose: fillMaxWidth().height(32.dp)).
+            Skeleton()
+                .frame(maxWidth: .infinity)
+                .frame(height: 32)
+        }
+        .padding()
+    }
+}
+
+#Preview {
+    SkeletonDemo()
+}

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

@@ -0,0 +1,150 @@
+//
+//  SliderDemo.swift
+//  Example
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - SliderDemo
+
+struct SliderDemo: View {
+    // Playground state
+    @State private var pgLow: CGFloat = 20
+    @State private var pgHigh: CGFloat = 80
+    @State private var pgDisableRange = false
+    @State private var pgFloatingLabel = false
+    @State private var pgDisabled = false
+    @State private var pgMinRange = false
+    @State private var pgStepBig = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                preview
+                Divider()
+                playground
+            }
+            .padding(.vertical, 16)
+        }
+    }
+
+    // MARK: - Preview
+
+    private var preview: some View {
+        VStack(alignment: .leading, spacing: 24) {
+            section("Range Slider (default)") {
+                MomoSlider(min: 0, max: 100, step: 1)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Range Slider with initial values") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 20, high: 80)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Single-thumb Slider (disableRange)") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 40, disableRange: true)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Slider with step = 10") {
+                MomoSlider(min: 0, max: 100, step: 10, low: 20, high: 70)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Slider with minRange = 20") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 10, high: 90, minRange: 20)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Floating Label") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, floatingLabel: true)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Disabled") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, disabled: true)
+                    .padding(.horizontal, 8)
+            }
+
+            section("Disabled single-thumb") {
+                MomoSlider(min: 0, max: 100, step: 1, low: 50, disableRange: true, disabled: true)
+                    .padding(.horizontal, 8)
+            }
+        }
+    }
+
+    // MARK: - Playground
+
+    private var playground: some View {
+        section("Playground") {
+            toggle("Disable Range (single thumb)", $pgDisableRange)
+            toggle("Floating Label", $pgFloatingLabel)
+            toggle("Disabled", $pgDisabled)
+            toggle("Min Range = 20", $pgMinRange)
+            toggle("Step = 10 (instead of 1)", $pgStepBig)
+
+            MomoSlider(
+                min: 0,
+                max: 100,
+                step: pgStepBig ? 10 : 1,
+                low: pgLow,
+                high: pgHigh,
+                minRange: pgMinRange ? 20 : 0,
+                disableRange: pgDisableRange,
+                floatingLabel: pgFloatingLabel,
+                disabled: pgDisabled,
+                onValueChanged: { low, high, _ in
+                    pgLow = low
+                    pgHigh = high
+                }
+            )
+            .padding(.horizontal, 8)
+            // Re-create slider when structural params change so initial values apply.
+            .id("\(pgDisableRange)-\(pgMinRange)-\(pgStepBig)")
+
+            if pgDisableRange {
+                Text("Value: \(Int(pgLow))")
+                    .font(.subheadline)
+                    .padding(.top, 8)
+            } else {
+                Text("Low: \(Int(pgLow))  ·  High: \(Int(pgHigh))")
+                    .font(.subheadline)
+                    .padding(.top, 8)
+            }
+        }
+    }
+
+    // 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 toggle(_ title: String, _ binding: Binding<Bool>) -> some View {
+        Toggle(isOn: binding) {
+            Text(title)
+                .font(.subheadline)
+        }
+    }
+}
+
+#if DEBUG
+struct SliderDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        SliderDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,138 @@
+import MoMoUIKits
+import SwiftUI
+
+struct SnackBarDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            SnackBarDemoContent()
+        } else {
+            MomoText("SnackBar demo requires iOS 16+")
+                .padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct SnackBarDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var duration = "1000"
+    @State private var undefinedDuration = false
+    @State private var showFooter = true
+
+    private var snackBarDuration: TimeInterval? {
+        if undefinedDuration {
+            return nil
+        }
+        guard let milliseconds = Double(duration) else {
+            return nil
+        }
+        return milliseconds / 1000
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ScrollView {
+                VStack(alignment: .leading, spacing: Spacing.M) {
+                    Input(
+                        text: $duration,
+                        placeholder: "Duration",
+                        floatingValue: "Duration",
+                        keyboardType: .numberPad
+                    )
+
+                    Checkbox(
+                        Binding(
+                            get: { undefinedDuration },
+                            set: { checked in
+                                undefinedDuration = checked
+                                if checked {
+                                    duration = ""
+                                } else if duration.isEmpty {
+                                    duration = "1000"
+                                }
+                            }
+                        ),
+                        title: "Undefined"
+                    )
+
+                    HStack(spacing: Spacing.M) {
+                        MoMoUIKits.Switch($showFooter)
+                        MomoText("Footer")
+                    }
+
+                    MoMoUIKits.Button(
+                        title: "Show snack bar",
+                        action: showSnackBar,
+                        size: .large
+                    )
+
+                    MoMoUIKits.Button(
+                        title: "Show toast",
+                        action: { navigator.showSnackBar(.toast(duration: snackBarDuration)) },
+                        type: .secondary,
+                        size: .large
+                    )
+
+                    MoMoUIKits.Button(
+                        title: "Hide snack bar",
+                        action: { navigator.hideSnackBar() },
+                        type: .text,
+                        size: .large
+                    )
+                }
+                .padding(Spacing.L)
+            }
+
+            if showFooter {
+                footer
+            }
+        }
+    }
+
+    private var footer: some View {
+        VStack(spacing: 0) {
+            MoMoUIKits.Button(
+                title: "Footer",
+                action: {},
+                size: .large
+            )
+            .padding(.vertical, Spacing.S)
+            .padding(.horizontal, Spacing.M)
+        }
+        .frame(maxWidth: .infinity)
+        .background(Colors.black01)
+        .overlay(
+            Rectangle()
+                .fill(Colors.black20.opacity(0.1))
+                .frame(height: 4)
+                .shadow(color: Colors.black20.opacity(0.2), radius: 10, y: -2),
+            alignment: .top
+        )
+    }
+
+    private func showSnackBar() {
+        navigator.showSnackBar(
+            .custom(duration: snackBarDuration) {
+                HStack {
+                    MomoText("Snack bar !!!", color: Colors.black01)
+                    Spacer()
+                }
+                .padding(.horizontal, 20)
+                .frame(height: 80)
+                .frame(maxWidth: .infinity)
+                .background(Colors.black17)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+                .padding(.horizontal, Spacing.M)
+            }
+        )
+    }
+}
+
+#if DEBUG
+struct SnackBarDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        SnackBarDemo()
+    }
+}
+#endif