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

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

@@ -0,0 +1,175 @@
+//
+//  PopupDisplayDemo.swift
+//  Example
+//
+//  Usage demo for PopupDisplay component.
+//  Mirrors Compose's PopupNotifyUsage: a configurable form whose action
+//  button presents the popup through `navigator.showModal`.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - PopupDisplayDemo
+
+struct PopupDisplayDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            PopupDisplayDemoContent()
+        } else {
+            Text("PopupDisplay demo requires iOS 16+")
+                .padding()
+        }
+    }
+}
+
+// MARK: - PopupDisplayDemoContent
+
+@available(iOS 16.0, *)
+private struct PopupDisplayDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var image = "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.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 errorCode = "9004"
+    @State private var buttonDirection: PopupButtonDirection = .auto
+    @State private var primaryTitle = "Primary"
+    @State private var secondaryTitle = "Secondary"
+    @State private var showCloseIcon = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 12) {
+                // MARK: - Image URL
+
+                HStack(alignment: .center, spacing: 8) {
+                    Input(
+                        text: $image,
+                        placeholder: "Image URL",
+                        floatingValue: "Image URL"
+                    )
+                    Checkbox(
+                        Binding(
+                            get: { image.isEmpty },
+                            set: { checked in
+                                image = checked ? "" : "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png"
+                            }
+                        ),
+                        title: "undefined"
+                    )
+                }
+
+                // MARK: - Title
+
+                Input(
+                    text: $title,
+                    placeholder: "Title",
+                    floatingValue: "Title"
+                )
+
+                // MARK: - Description
+
+                Input(
+                    text: $description,
+                    placeholder: "Description",
+                    floatingValue: "Description"
+                )
+
+                // MARK: - Error code
+
+                HStack(alignment: .center, spacing: 8) {
+                    Input(
+                        text: $errorCode,
+                        placeholder: "Error",
+                        floatingValue: "Error"
+                    )
+                    Checkbox(
+                        Binding(
+                            get: { errorCode.isEmpty },
+                            set: { checked in
+                                errorCode = checked ? "" : "9004"
+                            }
+                        ),
+                        title: "undefined"
+                    )
+                }
+
+                // MARK: - Button direction
+
+                VStack(alignment: .leading, spacing: 6) {
+                    Text("Button Direction")
+                        .font(.caption)
+                        .foregroundColor(.secondary)
+                    Picker("Button Direction", selection: $buttonDirection) {
+                        Text("Auto").tag(PopupButtonDirection.auto)
+                        Text("Row").tag(PopupButtonDirection.row)
+                        Text("Column").tag(PopupButtonDirection.column)
+                    }
+                    .pickerStyle(.segmented)
+                }
+
+                // MARK: - Button titles
+
+                Input(
+                    text: $primaryTitle,
+                    placeholder: "Primary Button Title",
+                    floatingValue: "Primary Button Title"
+                )
+                Input(
+                    text: $secondaryTitle,
+                    placeholder: "Secondary Button Title",
+                    floatingValue: "Secondary Button Title"
+                )
+
+                // MARK: - Show close icon
+
+                Checkbox($showCloseIcon, title: "Show Close Button")
+                    .padding(.vertical, 4)
+
+                // MARK: - Action
+
+                Button(
+                    title: "Show popup",
+                    action: showPopup,
+                    type: .primary,
+                    size: .large
+                )
+                .padding(.top, 8)
+            }
+            .padding(16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    private func showPopup() {
+        navigator.showModal {
+            PopupDisplay(
+                isPresented: .constant(true),
+                title: title,
+                description: description,
+                url: image,
+                buttonDirection: buttonDirection,
+                buttonType: .button,
+                actionButtonTitle: primaryTitle,
+                closeButtonTitle: secondaryTitle,
+                onPressAction: { navigator.hideOverplay() },
+                onPressCloseButton: { navigator.hideOverplay() },
+                onClose: { navigator.hideOverplay() },
+                errorCode: errorCode,
+                isShowCloseIcon: showCloseIcon
+            )
+        }
+    }
+}
+
+// MARK: - Preview
+
+#if DEBUG
+struct PopupDisplayDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        PopupDisplayDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,95 @@
+import MoMoUIKits
+import SwiftUI
+
+struct PopupNotifyDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { PopupNotifyPreview() }, playground: { PopupNotifyPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+@available(iOS 16.0, *)
+private struct PopupNotifyPreview: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        BasicColumnBox("PopupNotify", alignment: .leading) {
+            MoMoUIKits.Button(title: "Show popup", action: { show() }, size: .large)
+        }
+    }
+
+    private func show() {
+        navigator.showModal {
+            PopupNotify(props: PopupNotifyProps(
+                image: "https://i.imgur.com/s70S9s9.png",
+                title: "Title",
+                description: "Check lại một nhịp auto chuyển sang dạng CTA.",
+                error: "9004",
+                primary: PopupAction(title: "Primary", onPress: { navigator.hideOverplay() }),
+                secondary: PopupAction(title: "Secondary", onPress: { navigator.hideOverplay() }),
+                onIconClose: { navigator.hideOverplay() },
+                isShowCloseIcon: true
+            ))
+        }
+    }
+}
+
+// MARK: - Playground
+
+private let popupDirectionList: [PlaygroundOption] = [
+    .init("auto", PopupActionDirection.auto),
+    .init("row", PopupActionDirection.row),
+    .init("column", PopupActionDirection.column),
+]
+
+@available(iOS 16.0, *)
+private struct PopupNotifyPlayground: 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 primaryTitle = "Primary"
+    @State private var secondaryTitle = "Secondary"
+    @State private var showClose = false
+    @State private var direction: PlaygroundOption? = popupDirectionList.first { $0.key == "auto" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(title: "Show popup", action: { show() }, size: .large)
+            },
+            params: [
+                .string("Image", $image),
+                .string("Title", $title),
+                .string("Description", $description),
+                .string("Error", $error),
+                .string("PrimaryTitle", $primaryTitle),
+                .string("SecondaryTitle", $secondaryTitle),
+                .radio("ButtonDirection", popupDirectionList, $direction),
+                .checkbox("ShowCloseButton", $showClose),
+            ]
+        )
+    }
+
+    private func show() {
+        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: (direction?.value as? PopupActionDirection) ?? .auto,
+                onIconClose: { navigator.hideOverplay() },
+                isShowCloseIcon: showClose
+            ))
+        }
+    }
+}

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

@@ -0,0 +1,67 @@
+//
+//  PopupPromotionDemo.swift
+//  Example
+//
+//  Preview + Playground demo. PopupPromotion is presented via `navigator.showModal`.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct PopupPromotionDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { PopupPromotionPreview() }, playground: { PopupPromotionPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+@available(iOS 16.0, *)
+private struct PopupPromotionPreview: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        BasicColumnBox("PopupPromotion", alignment: .leading) {
+            MoMoUIKits.Button(
+                title: "Show Popup",
+                action: { show("https://static.momocdn.net/app/app/appx/ABC.png?size=M") },
+                size: .large
+            )
+        }
+    }
+
+    private func show(_ url: String) {
+        navigator.showModal {
+            PopupPromotion(imageUrl: url, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct PopupPromotionPlayground: View {
+    @EnvironmentObject private var navigator: Navigator
+    @State private var imageUrl = "https://static.momocdn.net/app/app/appx/ABC.png?size=M"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(title: "Show Popup", action: { show() }, size: .large)
+            },
+            params: [
+                .string("ImageURL", $imageUrl),
+            ]
+        )
+    }
+
+    private func show() {
+        navigator.showModal {
+            PopupPromotion(imageUrl: imageUrl, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
+        }
+    }
+}

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

@@ -0,0 +1,101 @@
+//
+//  ProgressInfoDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's ProgressInfoUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let piSteps = [
+    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 piStepsNoDesc = [
+    ProgressInfoItem(title: "Đăng ký"),
+    ProgressInfoItem(title: "Xác minh"),
+    ProgressInfoItem(title: "Hoàn tất"),
+]
+
+private let progressInfoSizeList: [PlaygroundOption] = [
+    .init("large", ProgressInfoSize.large),
+    .init("small", ProgressInfoSize.small),
+]
+
+private let progressInfoAlignList: [PlaygroundOption] = [
+    .init("center", ProgressInfoAlign.center),
+    .init("left", ProgressInfoAlign.left),
+    .init("right", ProgressInfoAlign.right),
+    .init("stretch", ProgressInfoAlign.stretch),
+]
+
+struct ProgressInfoDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ProgressInfoPreview() }, playground: { ProgressInfoPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct ProgressInfoPreview: View {
+    var body: some View {
+        BasicColumnBox("Vertical (default)", alignment: .leading) {
+            ProgressInfo(steps: piSteps)
+        }
+        BasicColumnBox("Vertical – no description", alignment: .leading) {
+            ProgressInfo(steps: piStepsNoDesc, showDescription: false)
+        }
+        BasicColumnBox("Vertical – useNumber", alignment: .leading) {
+            ProgressInfo(steps: piSteps, useNumber: true)
+        }
+        BasicColumnBox("Horizontal – Center", alignment: .leading) {
+            ProgressInfo(steps: piSteps, horizontal: true)
+        }
+        BasicColumnBox("Horizontal – useNumber", alignment: .leading) {
+            ProgressInfo(steps: piSteps, horizontal: true, useNumber: true)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ProgressInfoPlayground: View {
+    @State private var size: PlaygroundOption? = progressInfoSizeList.first { $0.key == "large" }
+    @State private var align: PlaygroundOption? = progressInfoAlignList.first { $0.key == "center" }
+    @State private var horizontal = false
+    @State private var useNumber = false
+    @State private var showTitle = true
+    @State private var showDescription = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                ProgressInfo(
+                    steps: piSteps,
+                    horizontal: horizontal,
+                    size: (size?.value as? ProgressInfoSize) ?? .large,
+                    useNumber: useNumber,
+                    align: (align?.value as? ProgressInfoAlign) ?? .center,
+                    showTitle: showTitle,
+                    showDescription: showDescription
+                )
+            },
+            params: [
+                .radio("Size", progressInfoSizeList, $size),
+                .radio("Align", progressInfoAlignList, $align),
+                .checkbox("Horizontal", $horizontal),
+                .checkbox("UseNumber", $useNumber),
+                .checkbox("ShowTitle", $showTitle),
+                .checkbox("ShowDescription", $showDescription),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,64 @@
+//
+//  RadioDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Radio.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct RadioDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { RadioPreview() }, playground: { RadioPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct RadioPreview: View {
+    @State private var group: AnyHashable = 1
+
+    var body: some View {
+        BasicColumnBox("Value", alignment: .leading) {
+            Radio(value: 1, groupValue: $group)
+            Radio(value: 2, groupValue: $group)
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Radio(value: 1, groupValue: .constant(1), disabled: true)
+            Radio(value: 2, groupValue: .constant(1), disabled: false)
+        }
+        BasicColumnBox("Label", alignment: .leading) {
+            Radio(value: 1, groupValue: .constant(1), label: "Label")
+            Radio(value: 2, groupValue: .constant(1), label: "Label")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct RadioPlayground: View {
+    @State private var group: AnyHashable = 1
+    @State private var label = "Label"
+    @State private var disabled = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    Radio(value: 1, groupValue: $group, disabled: disabled, label: label)
+                    Radio(value: 2, groupValue: $group, disabled: disabled, label: label)
+                }
+            },
+            params: [
+                .string("Label", $label),
+                .checkbox("Disabled", $disabled),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,68 @@
+//
+//  RatingDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Rating.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let ratingSizeList: [PlaygroundOption] = [
+    .init("small", RatingSize.small),
+    .init("medium", RatingSize.medium),
+    .init("large", RatingSize.large),
+]
+
+struct RatingDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { RatingPreview() }, playground: { RatingPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct RatingPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            Rating(numOfStars: 5, rating: 3, size: .small)
+            Rating(numOfStars: 5, rating: 3, size: .medium)
+            Rating(numOfStars: 5, rating: 3, size: .large)
+        }
+        BasicColumnBox("Values", alignment: .leading) {
+            Rating(numOfStars: 5, rating: 3.5)
+            Rating(numOfStars: 5, rating: 5)
+            Rating(numOfStars: 5, rating: 0)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct RatingPlayground: View {
+    @State private var stars: Double = 5
+    @State private var rating: Double = 3
+    @State private var size: PlaygroundOption? = ratingSizeList.first { $0.key == "large" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Rating(
+                    numOfStars: Int(stars),
+                    rating: Float(rating),
+                    size: (size?.value as? RatingSize) ?? .large
+                )
+            },
+            params: [
+                .slider("NumOfStars", $stars, min: 1, max: 10, step: 1),
+                .slider("Rating", $rating, min: 0, max: 10, step: 0.5),
+                .radio("Size", ratingSizeList, $size),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,83 @@
+//
+//  SectionDemo.swift
+//  Example
+//
+//  Preview + Playground demo for SectionView / ItemView (12-column grid).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct SectionDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { SectionPreview() }, playground: { SectionPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct SectionPreview: View {
+    var body: some View {
+        BasicColumnBox("Full width — span 12", alignment: .leading) {
+            SectionView { SectionTile("12") }
+        }
+        BasicColumnBox("Even splits", alignment: .leading) {
+            SectionView {
+                ItemView(widthSpan: 6) { SectionTile("6") }
+                ItemView(widthSpan: 6) { SectionTile("6") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+                ItemView(widthSpan: 4) { SectionTile("4") }
+            }
+        }
+        BasicColumnBox("heightSpan — square tiles", alignment: .leading) {
+            SectionView {
+                ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
+                ItemView(widthSpan: 3, heightSpan: 3) { SectionTile("3×3") }
+                ItemView(widthSpan: 6, heightSpan: 3) { SectionTile("6×3") }
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct SectionPlayground: View {
+    @State private var span: Double = 6
+    @State private var useMargin = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                SectionView(useMargin: useMargin) {
+                    ItemView(widthSpan: Int(span)) { SectionTile("\(Int(span))") }
+                    ItemView(widthSpan: 12 - Int(span)) { SectionTile("\(12 - Int(span))") }
+                }
+            },
+            params: [
+                .slider("Left widthSpan", $span, min: 1, max: 11, step: 1),
+                .checkbox("useMargin", $useMargin),
+            ]
+        )
+    }
+}
+
+/// Filled placeholder so span widths are visible.
+private struct SectionTile: View {
+    let label: String
+    init(_ label: String) { self.label = label }
+
+    var body: some View {
+        Text(label)
+            .font(.footnote)
+            .foregroundColor(Colors.black17)
+            .frame(maxWidth: .infinity, minHeight: 44, maxHeight: .infinity)
+            .background(Colors.blue08)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
+    }
+}