@momo-kits/native-kits 0.0.1-beta.4 → 0.0.2-alpha.1

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

@@ -0,0 +1,61 @@
+//
+//  SkeletonDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct SkeletonDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SkeletonPreview() }, playground: { SkeletonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SkeletonPreview: View {
+    var body: some View {
+        BasicColumnBox("Square (aspect 1:1)", alignment: .leading) {
+            Skeleton()
+                .aspectRatio(1, contentMode: .fit)
+                .frame(maxWidth: .infinity)
+        }
+        BasicColumnBox("Fixed height (32)", alignment: .leading) {
+            Skeleton()
+                .frame(maxWidth: .infinity)
+                .frame(height: 32)
+        }
+        BasicColumnBox("Lines", alignment: .leading) {
+            Skeleton().frame(maxWidth: .infinity).frame(height: 16)
+            Skeleton().frame(maxWidth: .infinity).frame(height: 16)
+            Skeleton().frame(width: 160).frame(height: 16)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SkeletonPlayground: View {
+    @State private var height: Double = 32
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Skeleton()
+                    .frame(maxWidth: .infinity)
+                    .frame(height: CGFloat(height))
+            },
+            params: [
+                .slider("Height", $height, min: 16, max: 200, step: 4),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,90 @@
+//
+//  SliderDemo.swift
+//  Example
+//
+//  Preview + Playground demo for MomoSlider.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct SliderDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SliderPreview() }, playground: { SliderPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SliderPreview: View {
+    var body: some View {
+        BasicColumnBox("Range Slider (default)", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1)
+        }
+        BasicColumnBox("With initial values", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 20, high: 80)
+        }
+        BasicColumnBox("Single-thumb (disableRange)", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 40, disableRange: true)
+        }
+        BasicColumnBox("Step = 10", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 10, low: 20, high: 70)
+        }
+        BasicColumnBox("Min range = 20", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 10, high: 90, minRange: 20)
+        }
+        BasicColumnBox("Floating Label", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, floatingLabel: true)
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            MomoSlider(min: 0, max: 100, step: 1, low: 30, high: 70, disabled: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SliderPlayground: View {
+    @State private var low: Double = 20
+    @State private var high: Double = 80
+    @State private var minRange: Double = 0
+    @State private var step: Double = 1
+    @State private var disableRange = false
+    @State private var floatingLabel = false
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoSlider(
+                    min: 0,
+                    max: 100,
+                    step: CGFloat(step),
+                    low: CGFloat(low),
+                    high: CGFloat(high),
+                    minRange: CGFloat(minRange),
+                    disableRange: disableRange,
+                    floatingLabel: floatingLabel,
+                    disabled: disabled,
+                    onValueChanged: { l, h, _ in low = Double(l); high = Double(h) }
+                )
+                // Re-seed when structural params change so initial values apply.
+                .id("\(disableRange)-\(minRange)-\(step)")
+            },
+            params: [
+                .checkbox("DisableRange", $disableRange),
+                .checkbox("FloatingLabel", $floatingLabel),
+                .checkbox("Disabled", $disabled),
+                .slider("Low", $low, min: 0, max: 100, step: 1),
+                .slider("High", $high, min: 0, max: 100, step: 1),
+                .slider("MinRange", $minRange, min: 0, max: 40, step: 5),
+                .slider("Step", $step, min: 1, max: 10, step: 1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,82 @@
+import MoMoUIKits
+import SwiftUI
+
+struct SnackBarDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SnackBarPreview() }, playground: { SnackBarPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+@available(iOS 16.0, *)
+private struct SnackBarPreview: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        BasicColumnBox("SnackBar", alignment: .leading) {
+            MoMoUIKits.Button(title: "Show snack bar", action: { showSnack(1) }, size: .large)
+            MoMoUIKits.Button(title: "Show toast", action: { navigator.showSnackBar(.toast(duration: 1)) }, type: .secondary, size: .large)
+            MoMoUIKits.Button(title: "Hide snack bar", action: { navigator.hideSnackBar() }, type: .text, size: .large)
+        }
+    }
+
+    private func showSnack(_ duration: TimeInterval?) {
+        navigator.showSnackBar(.custom(duration: duration) {
+            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)
+        })
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SnackBarPlayground: View {
+    @EnvironmentObject private var navigator: Navigator
+    @State private var duration = "1000"
+
+    private var seconds: TimeInterval? { Double(duration).map { $0 / 1000 } }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(spacing: Spacing.S) {
+                    MoMoUIKits.Button(title: "Show snack bar", action: { showSnack(seconds) }, size: .large)
+                    MoMoUIKits.Button(title: "Show toast", action: { navigator.showSnackBar(.toast(duration: seconds)) }, type: .secondary, size: .large)
+                    MoMoUIKits.Button(title: "Hide snack bar", action: { navigator.hideSnackBar() }, type: .text, size: .large)
+                }
+            },
+            params: [
+                .number("Duration (ms)", $duration),
+            ]
+        )
+    }
+
+    private func showSnack(_ duration: TimeInterval?) {
+        navigator.showSnackBar(.custom(duration: duration) {
+            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)
+        })
+    }
+}

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

@@ -0,0 +1,93 @@
+//
+//  StepperDemo.swift
+//  Example
+//
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct StepperDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { StepperPreview() }, playground: { StepperPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct StepperPreview: View {
+    @State private var sizeLarge = 5
+    @State private var sizeSmall = 5
+    @State private var def50 = 50
+    @State private var customStep5 = 0
+    @State private var editable = 5
+    @State private var disabledAll = 5
+    @State private var disabledMinus = 5
+    @State private var disabledPlus = 5
+    @State private var bound = 0
+
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            MomoStepper(value: $sizeLarge, size: .large)
+            MomoStepper(value: $sizeSmall, size: .small)
+        }
+        BasicColumnBox("Default (min=0, max=100, step=1)", alignment: .leading) {
+            MomoStepper(value: $def50)
+        }
+        BasicColumnBox("Custom step (5)", alignment: .leading) {
+            MomoStepper(value: $customStep5, min: 0, max: 50, step: 5)
+        }
+        BasicColumnBox("Editable", alignment: .leading) {
+            MomoStepper(value: $editable, editable: true)
+        }
+        BasicColumnBox("Disabled — all", alignment: .leading) {
+            MomoStepper(value: $disabledAll, disabled: true)
+        }
+        BasicColumnBox("Disabled — minus / plus only", alignment: .leading) {
+            MomoStepper(value: $disabledMinus, disabled: StepperDisabled(minus: true, plus: false))
+            MomoStepper(value: $disabledPlus, disabled: StepperDisabled(minus: false, plus: true))
+        }
+        BasicColumnBox("Auto-disabled at bounds (0…10)", alignment: .leading) {
+            MomoStepper(value: $bound, min: 0, max: 10)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct StepperPlayground: View {
+    @State private var value = 5
+    @State private var small = false
+    @State private var editable = false
+    @State private var disabled = false
+    @State private var step = 1.0
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoStepper(
+                    value: $value,
+                    min: 0,
+                    max: 100,
+                    step: Int(step),
+                    size: small ? .small : .large,
+                    disabled: StepperDisabled(disabled),
+                    editable: editable
+                )
+                .id("\(small)-\(editable)-\(disabled)-\(Int(step))")
+            },
+            params: [
+                .checkbox("Small", $small),
+                .checkbox("Editable", $editable),
+                .checkbox("Disabled", $disabled),
+                .slider("Step", $step, min: 1, max: 10, step: 1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,114 @@
+//
+//  StepsDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's StepsUsage.kt.
+//
+
+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"),
+]
+
+private let stepsSizeList: [PlaygroundOption] = [
+    .init("large", StepsSize.large),
+    .init("small", StepsSize.small),
+]
+
+private let stepsAlignList: [PlaygroundOption] = [
+    .init("center", StepsAlign.center),
+    .init("left", StepsAlign.left),
+    .init("right", StepsAlign.right),
+    .init("stretch", StepsAlign.stretch),
+]
+
+struct StepsDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { StepsPreview() }, playground: { StepsPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct StepsPreview: View {
+    var body: some View {
+        BasicColumnBox("Vertical — Large (default)", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 1)
+        }
+        BasicColumnBox("Vertical — Small", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 2, size: .small)
+        }
+        BasicColumnBox("Vertical — With error", alignment: .leading) {
+            Steps(steps: stepsWithError, activeIndex: 1)
+        }
+        BasicColumnBox("Vertical — Use number", alignment: .leading) {
+            Steps(steps: shortSteps, activeIndex: 1, useNumber: true)
+        }
+        BasicColumnBox("Horizontal — Center", alignment: .leading) {
+            Steps(steps: shortSteps, activeIndex: 1, horizontal: true)
+        }
+        BasicColumnBox("Horizontal — With time", alignment: .leading) {
+            Steps(steps: sampleSteps, activeIndex: 2, horizontal: true)
+        }
+        BasicColumnBox("Horizontal — With error", alignment: .leading) {
+            Steps(steps: stepsWithError, activeIndex: 1, horizontal: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct StepsPlayground: View {
+    @State private var activeIndex: Double = 1
+    @State private var size: PlaygroundOption? = stepsSizeList.first { $0.key == "large" }
+    @State private var align: PlaygroundOption? = stepsAlignList.first { $0.key == "center" }
+    @State private var horizontal = false
+    @State private var useNumber = false
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Steps(
+                    steps: sampleSteps,
+                    activeIndex: Int(activeIndex),
+                    horizontal: horizontal,
+                    size: (size?.value as? StepsSize) ?? .large,
+                    useNumber: useNumber,
+                    align: (align?.value as? StepsAlign) ?? .center,
+                    disabled: disabled
+                )
+            },
+            params: [
+                .slider("ActiveIndex", $activeIndex, min: 0, max: 3, step: 1),
+                .radio("Size", stepsSizeList, $size),
+                .radio("Align", stepsAlignList, $align),
+                .checkbox("Horizontal", $horizontal),
+                .checkbox("UseNumber", $useNumber),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,90 @@
+import MoMoUIKits
+import SwiftUI
+
+struct SuggestActionDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SuggestActionPreview() }, playground: { SuggestActionPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SuggestActionPreview: View {
+    @State private var visible1 = true
+    @State private var visible2 = true
+    @State private var visible3 = true
+
+    var body: some View {
+        BasicColumnBox("Default", alignment: .leading) {
+            SuggestAction(
+                message: "You have a new suggestion available for you.",
+                buttonTitle: "View",
+                visible: visible1,
+                onClose: { visible1 = false },
+                onPressButton: { visible1 = false }
+            )
+        }
+        BasicColumnBox("With bold message", alignment: .leading) {
+            SuggestAction(
+                message: "You have a new suggestion available for you.",
+                buttonTitle: "View",
+                boldMessage: "new suggestion",
+                visible: visible2,
+                onClose: { visible2 = false },
+                onPressButton: { visible2 = false }
+            )
+        }
+        BasicColumnBox("With image", alignment: .leading) {
+            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 }
+            )
+        }
+        MoMoUIKits.Button(
+            title: "Reset all",
+            action: { visible1 = true; visible2 = true; visible3 = true },
+            type: .primary,
+            isFull: false
+        )
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SuggestActionPlayground: View {
+    @State private var message = "You have a new suggestion available for you."
+    @State private var buttonTitle = "View"
+    @State private var boldMessage = "suggestion"
+    @State private var visible = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                SuggestAction(
+                    message: message,
+                    buttonTitle: buttonTitle,
+                    boldMessage: boldMessage,
+                    visible: visible,
+                    onClose: { visible = false },
+                    onPressButton: { visible = false }
+                )
+            },
+            params: [
+                .string("Message", $message),
+                .string("ButtonTitle", $buttonTitle),
+                .string("BoldMessage", $boldMessage),
+                .checkbox("Visible", $visible),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,107 @@
+//
+//  SwipeDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's SwipeUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+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)
+}
+
+struct SwipeDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SwipePreview() }, playground: { SwipePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SwipePreview: View {
+    private var editAction: SwipeAction {
+        SwipeAction(label: "Edit", icon: "24_basic_copy", backgroundColor: Colors.blue03, onPress: {})
+    }
+    private var deleteAction: SwipeAction {
+        SwipeAction(label: "Delete", icon: "24_basic_delete", backgroundColor: Colors.red03, onPress: {})
+    }
+    private var archiveAction: SwipeAction {
+        SwipeAction(label: "Archive", icon: "24_basic_flag", backgroundColor: Colors.orange03, onPress: {})
+    }
+
+    var body: some View {
+        BasicColumnBox("Right actions only", alignment: .leading) {
+            Swipe(rightActions: [deleteAction]) { swipeContent("Swipe left to delete") }
+        }
+        BasicColumnBox("Left actions only", alignment: .leading) {
+            Swipe(leftActions: [editAction, archiveAction]) { swipeContent("Swipe right for actions") }
+        }
+        BasicColumnBox("Both sides", alignment: .leading) {
+            Swipe(leftActions: [editAction], rightActions: [deleteAction]) { swipeContent("Swipe both directions") }
+        }
+        BasicColumnBox("Multiple right actions", alignment: .leading) {
+            Swipe(rightActions: [editAction, archiveAction, deleteAction]) { swipeContent("3 right actions") }
+        }
+        BasicColumnBox("With itemRadius", alignment: .leading) {
+            Swipe(rightActions: [deleteAction], itemRadius: Radius.S) { swipeContent("Rounded corners") }
+        }
+        BasicColumnBox("Custom height", alignment: .leading) {
+            Swipe(rightActions: [deleteAction], height: 80) { swipeContent("Taller row (80dp)") }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SwipePlayground: 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 {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    Swipe(
+                        leftActions: showLeftActions ? [editAction, archiveAction] : [],
+                        rightActions: showRightActions ? [deleteAction] : [],
+                        height: CGFloat(heightValue),
+                        itemRadius: CGFloat(radiusValue)
+                    ) { swipeContent("Swipe me!") }
+                    MomoText(lastAction, typography: .descriptionDefaultRegular, color: Colors.textSecondary)
+                }
+            },
+            params: [
+                .checkbox("ShowLeftActions", $showLeftActions),
+                .checkbox("ShowRightActions", $showRightActions),
+                .slider("Height", $heightValue, min: 40, max: 100, step: 1),
+                .slider("ItemRadius", $radiusValue, min: 0, max: 24, step: 1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,58 @@
+//
+//  SwitchDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Switch.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct SwitchDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SwitchPreview() }, playground: { SwitchPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SwitchPreview: View {
+    @State private var checked = false
+
+    var body: some View {
+        BasicColumnBox("Value", alignment: .leading) {
+            Switch($checked, onChange: { checked = $0 })
+        }
+        BasicColumnBox("Disabled (on)", alignment: .leading) {
+            Switch(.constant(true), disabled: true)
+        }
+        BasicColumnBox("Disabled (off)", alignment: .leading) {
+            Switch(.constant(false), disabled: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SwitchPlayground: View {
+    @State private var value = false
+    @State private var title = ""
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Switch($value, disabled: disabled, onChange: { value = $0 }, title: title)
+            },
+            params: [
+                .string("Title", $title),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
+    }
+}