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

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

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