@momo-kits/native-kits 0.162.30-debug → 0.162.31-debug

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

@@ -2,186 +2,117 @@
 //  TooltipDemo.swift
 //  Example
 //
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
 
-import Foundation
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - TooltipDemo
-
 struct TooltipDemo: View {
-    // Placement
-    @StateObject private var topState = TooltipState()
-    @StateObject private var bottomState = TooltipState()
-    @StateObject private var leftState = TooltipState()
-    @StateObject private var rightState = TooltipState()
-
-    // Alignment
-    @StateObject private var startState = TooltipState()
-    @StateObject private var centerState = TooltipState()
-    @StateObject private var endState = TooltipState()
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TooltipPreview() }, playground: { TooltipPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-    // With Buttons
-    @StateObject private var singleBtnState = TooltipState()
-    @StateObject private var twoBtnState = TooltipState()
+// MARK: - Preview
 
-    // Description Only
+private struct TooltipPreview: View {
+    @StateObject private var topState = TooltipState()
+    @StateObject private var bottomState = TooltipState()
+    @StateObject private var btnState = TooltipState()
     @StateObject private var descState = TooltipState()
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 48) {
-                // MARK: - Placement
-
-                section("Placement") {
-                    Tooltip(
-                        state: topState,
-                        title: "Top",
-                        description: "Tooltip on top of the anchor.",
-                        placement: .top,
-                        onPressClose: { topState.hide() }
-                    ) {
-                        Button(title: "Top", action: { topState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: bottomState,
-                        title: "Bottom",
-                        description: "Tooltip below the anchor.",
-                        placement: .bottom,
-                        onPressClose: { bottomState.hide() }
-                    ) {
-                        Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    HStack {
-                        Tooltip(
-                            state: rightState,
-                            title: "Right",
-                            description: "Tooltip on the right.",
-                            placement: .right,
-                            onPressClose: { rightState.hide() }
-                        ) {
-                            Button(title: "Right", action: { rightState.toggle() }, size: .small, isFull: false)
-                        }
-                        Spacer().frame(width: 12)
-                        Tooltip(
-                            state: leftState,
-                            title: "Left",
-                            description: "Tooltip on the left.",
-                            placement: .left,
-                            onPressClose: { leftState.hide() }
-                        ) {
-                            Button(title: "Left", action: { leftState.toggle() }, size: .small, isFull: false)
-                        }
-                    }
-                }
-
-                // MARK: - Alignment
-
-                section("Alignment") {
-                    Tooltip(
-                        state: startState,
-                        title: "Start",
-                        description: "Aligned to start.",
-                        placement: .bottom,
-                        align: .start,
-                        onPressClose: { startState.hide() }
-                    ) {
-                        Button(title: "Start", action: { startState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: centerState,
-                        title: "Center",
-                        description: "Aligned to center.",
-                        placement: .bottom,
-                        align: .center,
-                        onPressClose: { centerState.hide() }
-                    ) {
-                        Button(title: "Center", action: { centerState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: endState,
-                        title: "End",
-                        description: "Aligned to end.",
-                        placement: .bottom,
-                        align: .end,
-                        onPressClose: { endState.hide() }
-                    ) {
-                        Button(title: "End", action: { endState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - With Buttons
-
-                section("With Buttons") {
-                    Tooltip(
-                        state: singleBtnState,
-                        title: "Single Button",
-                        description: "Tooltip with one action button.",
-                        buttons: [
-                            TooltipButton(title: "Got it", onPress: { singleBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { singleBtnState.hide() }
-                    ) {
-                        Button(title: "1 Button", action: { singleBtnState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: twoBtnState,
-                        title: "Two Buttons",
-                        description: "Tooltip with primary and secondary actions.",
-                        buttons: [
-                            TooltipButton(title: "Confirm", onPress: { twoBtnState.hide() }),
-                            TooltipButton(title: "Cancel", onPress: { twoBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { twoBtnState.hide() }
-                    ) {
-                        Button(title: "2 Buttons", action: { twoBtnState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - Description Only
-
-                section("Description Only") {
-                    Tooltip(
-                        state: descState,
-                        description: "This tooltip has no title, just a description.",
-                        placement: .top,
-                        onPressClose: { descState.hide() }
-                    ) {
-                        Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
-                    }
-                }
+        BasicColumnBox("Placement", alignment: .leading) {
+            Tooltip(state: topState, title: "Top", description: "Tooltip on top of the anchor.",
+                    placement: .top, onPressClose: { topState.hide() }) {
+                MoMoUIKits.Button(title: "Top", action: { topState.toggle() }, size: .small, isFull: false)
+            }
+            Tooltip(state: bottomState, title: "Bottom", description: "Tooltip below the anchor.",
+                    placement: .bottom, onPressClose: { bottomState.hide() }) {
+                MoMoUIKits.Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("With Buttons", alignment: .leading) {
+            Tooltip(state: btnState, title: "Two Buttons",
+                    description: "Tooltip with primary and secondary actions.",
+                    buttons: [
+                        TooltipButton(title: "Confirm", onPress: { btnState.hide() }),
+                        TooltipButton(title: "Cancel", onPress: { btnState.hide() }),
+                    ],
+                    placement: .bottom, onPressClose: { btnState.hide() }) {
+                MoMoUIKits.Button(title: "2 Buttons", action: { btnState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("Description Only", alignment: .leading) {
+            Tooltip(state: descState, description: "This tooltip has no title, just a description.",
+                    placement: .top, onPressClose: { descState.hide() }) {
+                MoMoUIKits.Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
             }
-            .padding(.vertical, 48)
-            .padding(.horizontal, 16)
         }
     }
+}
 
-    // MARK: - Helpers
+// MARK: - Playground
+
+// String-keyed so the demo doesn't depend on the exact enum type name;
+// the literal cases below are resolved against Tooltip's own parameter types.
+private let tooltipPlacementList: [PlaygroundOption] = [
+    .init("top", "top"), .init("bottom", "bottom"), .init("left", "left"), .init("right", "right"),
+]
+private let tooltipAlignList: [PlaygroundOption] = [
+    .init("start", "start"), .init("center", "center"), .init("end", "end"),
+]
+
+@available(iOS 16.0, *)
+private struct TooltipPlayground: View {
+    @StateObject private var state = TooltipState()
+    @State private var title = "Tooltip"
+    @State private var desc = "This is a tooltip description."
+    @State private var placement: PlaygroundOption? = tooltipPlacementList.first { $0.key == "bottom" }
+    @State private var align: PlaygroundOption? = tooltipAlignList.first { $0.key == "center" }
 
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 24) {
-            Text(title)
-                .font(.headline)
-            content()
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Tooltip(
+                    state: state,
+                    title: title,
+                    description: desc,
+                    placement: placementCase,
+                    align: alignCase,
+                    onPressClose: { state.hide() }
+                ) {
+                    MoMoUIKits.Button(title: "Show tooltip", action: { state.toggle() }, size: .small, isFull: false)
+                }
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $desc),
+                .radio("Placement", tooltipPlacementList, $placement),
+                .radio("Align", tooltipAlignList, $align),
+            ]
+        )
+    }
+
+    private var placementCase: TooltipPlacement {
+        switch placement?.key {
+        case "top": return .top
+        case "left": return .left
+        case "right": return .right
+        default: return .bottom
         }
     }
-}
 
-#if DEBUG
-struct TooltipDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        TooltipDemo()
+    private var alignCase: TooltipAlign {
+        switch align?.key {
+        case "start": return .start
+        case "end": return .end
+        default: return .center
+        }
     }
 }
-#endif

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

@@ -2,86 +2,86 @@
 //  TypographyDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 29/11/24.
+//  Preview + Playground demo for the Text (MomoText) component (DemoScreen pattern).
 //
-import SwiftUI
+
 import MoMoUIKits
+import SwiftUI
+
+private let typographyList: [PlaygroundOption] = [
+    .init("headlineDefaultBold", TypographyStyle.headlineDefaultBold),
+    .init("headerMBold", TypographyStyle.headerMBold),
+    .init("headerDefaultBold", TypographyStyle.headerDefaultBold),
+    .init("headerSSemibold", TypographyStyle.headerSSemibold),
+    .init("headerXsSemibold", TypographyStyle.headerXsSemibold),
+    .init("bodyDefaultRegular", TypographyStyle.bodyDefaultRegular),
+    .init("descriptionDefaultRegular", TypographyStyle.descriptionDefaultRegular),
+    .init("descriptionXsRegular", TypographyStyle.descriptionXsRegular),
+    .init("labelDefaultMedium", TypographyStyle.labelDefaultMedium),
+    .init("labelSMedium", TypographyStyle.labelSMedium),
+    .init("labelXsMedium", TypographyStyle.labelXsMedium),
+    .init("actionDefaultBold", TypographyStyle.actionDefaultBold),
+    .init("actionSBold", TypographyStyle.actionSBold),
+    .init("actionXsBold", TypographyStyle.actionXsBold),
+    .init("actionXxsBold", TypographyStyle.actionXxsBold),
+]
 
 struct TypographyDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 12) {
-                // New supported typography styles
-                MomoText("Headline Default Bold", typography: .headlineDefaultBold)
-                    .background(Color.red.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header M Bold", typography: .headerMBold)
-                    .background(Color.orange.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header Default Bold", typography: .headerDefaultBold)
-                    .background(Color.yellow.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header S Semibold", typography: .headerSSemibold)
-                    .background(Color.green.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header XS Semibold", typography: .headerXsSemibold)
-                    .background(Color.blue.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Body Default Regular
-                MomoText("Body Default Regular", typography: .bodyDefaultRegular)
-                    .background(Color.purple.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Description Default Regular", typography: .descriptionDefaultRegular)
-                    .background(Color.pink.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Description XS Regular", typography: .descriptionXsRegular)
-                    .background(Color.gray.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Label Default Medium
-                MomoText("Label Default Medium", typography: .labelDefaultMedium)
-                    .background(Color.red.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Label S Medium", typography: .labelSMedium)
-                    .background(Color.orange.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Label XS Medium", typography: .labelXsMedium)
-                    .background(Color.yellow.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Action Default Bold
-                MomoText("Action Default Bold", typography: .actionDefaultBold)
-                    .background(Color.green.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action S Bold", typography: .actionSBold)
-                    .background(Color.blue.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action XS Bold", typography: .actionXsBold)
-                    .background(Color.purple.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action XXS Bold", typography: .actionXxsBold)
-                    .background(Color.pink.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 16)
-            }
-            .padding(16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TypographyPreview() }, playground: { TypographyPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
 }
 
-struct TypographyDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        NavigationView {
-            TypographyDemo()
+// MARK: - Preview
+
+private struct TypographyPreview: View {
+    var body: some View {
+        BasicColumnBox("Headers", alignment: .leading) {
+            MomoText("Headline Default Bold", typography: .headlineDefaultBold)
+            MomoText("Header M Bold", typography: .headerMBold)
+            MomoText("Header Default Bold", typography: .headerDefaultBold)
+            MomoText("Header S Semibold", typography: .headerSSemibold)
+            MomoText("Header XS Semibold", typography: .headerXsSemibold)
+        }
+        BasicColumnBox("Body & Description", alignment: .leading) {
+            MomoText("Body Default Regular", typography: .bodyDefaultRegular)
+            MomoText("Description Default Regular", typography: .descriptionDefaultRegular)
+            MomoText("Description XS Regular", typography: .descriptionXsRegular)
+        }
+        BasicColumnBox("Labels", alignment: .leading) {
+            MomoText("Label Default Medium", typography: .labelDefaultMedium)
+            MomoText("Label S Medium", typography: .labelSMedium)
+            MomoText("Label XS Medium", typography: .labelXsMedium)
+        }
+        BasicColumnBox("Actions", alignment: .leading) {
+            MomoText("Action Default Bold", typography: .actionDefaultBold)
+            MomoText("Action S Bold", typography: .actionSBold)
+            MomoText("Action XS Bold", typography: .actionXsBold)
+            MomoText("Action XXS Bold", typography: .actionXxsBold)
         }
     }
 }
 
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TypographyPlayground: View {
+    @State private var text = "The quick brown fox"
+    @State private var typography: PlaygroundOption? = typographyList.first { $0.key == "bodyDefaultRegular" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoText(text, typography: (typography?.value as? TypographyStyle) ?? .bodyDefaultRegular)
+            },
+            params: [
+                .string("Text", $text),
+                .radio("Typography", typographyList, $typography),
+            ]
+        )
+    }
+}

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

@@ -2,130 +2,84 @@
 //  UploaderDemo.swift
 //  Example
 //
+//  Preview + Playground demo, mirroring Compose's UploaderUsage.kt.
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
+
+private let uploaderMockURL = "https://static.momocdn.net/app/img/kits/navigation-bar.png"
 
 struct UploaderDemo: View {
-    private let mockURL = "https://static.momocdn.net/app/img/kits/navigation-bar.png"
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { UploaderPreview() }, playground: { UploaderPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
 
-    // Playground state
-    @State private var playgroundImages: [UploadImage] = []
+private struct UploaderPreview: View {
+    var body: some View {
+        BasicColumnBox("Default — single slot, no images", alignment: .leading) {
+            Uploader(images: [], numberOfImages: 1, onAdd: {})
+        }
+        BasicColumnBox("With image + cancel button", alignment: .leading) {
+            Uploader(images: [UploadImage(uri: uploaderMockURL)], numberOfImages: 3, onAdd: {}, onCancel: { _, _ in })
+        }
+        BasicColumnBox("Multiple images (slot full)", alignment: .leading) {
+            Uploader(
+                images: [UploadImage(uri: uploaderMockURL), UploadImage(uri: uploaderMockURL), UploadImage(uri: uploaderMockURL)],
+                numberOfImages: 3, onAdd: {}, onCancel: { _, _ in }
+            )
+        }
+        BasicColumnBox("Loading state", alignment: .leading) {
+            Uploader(images: [UploadImage(uri: uploaderMockURL, loading: true)], numberOfImages: 3, onAdd: {}, onCancel: { _, _ in })
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Uploader(images: [], numberOfImages: 1, disabled: true, onAdd: {})
+        }
+        BasicColumnBox("Custom size (80 x 80)", alignment: .leading) {
+            Uploader(images: [UploadImage(uri: uploaderMockURL)], numberOfImages: 3, width: 80, height: 80, onAdd: {}, onCancel: { _, _ in })
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct UploaderPlayground: View {
+    @State private var images: [UploadImage] = []
     @State private var numberOfImages: Double = 3
     @State private var disabled = false
     @State private var width: Double = 64
     @State private var height: Double = 64
 
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Default — single slot, no images") {
-                    Uploader(
-                        images: [],
-                        numberOfImages: 1,
-                        onAdd: {}
-                    )
-                }
-
-                section("With image + cancel button") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL)],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Multiple images (slot full — picker hidden)") {
-                    Uploader(
-                        images: [
-                            UploadImage(uri: mockURL),
-                            UploadImage(uri: mockURL),
-                            UploadImage(uri: mockURL),
-                        ],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Loading state") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL, loading: true)],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Disabled") {
-                    Uploader(
-                        images: [],
-                        numberOfImages: 1,
-                        disabled: true,
-                        onAdd: {}
-                    )
-                }
-
-                section("Custom size (80 x 80)") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL)],
-                        numberOfImages: 3,
-                        width: 80,
-                        height: 80,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                Divider()
-
-                section("Playground") {
-                    VStack(alignment: .leading, spacing: 12) {
-                        Uploader(
-                            images: playgroundImages,
-                            numberOfImages: Int(numberOfImages),
-                            disabled: disabled,
-                            width: CGFloat(width),
-                            height: CGFloat(height),
-                            onAdd: {
-                                playgroundImages.append(UploadImage(uri: mockURL))
-                            },
-                            onCancel: { _, index in
-                                if playgroundImages.indices.contains(index) {
-                                    playgroundImages.remove(at: index)
-                                }
-                            },
-                            onPressImage: { _, _ in }
-                        )
-
-                        VStack(alignment: .leading, spacing: 4) {
-                            Text("numberOfImages: \(Int(numberOfImages))")
-                            Slider(value: $numberOfImages, in: 1...6, step: 1)
-
-                            Toggle("disabled", isOn: $disabled)
-
-                            Text("width: \(Int(width))")
-                            Slider(value: $width, in: 48...120, step: 1)
-
-                            Text("height: \(Int(height))")
-                            Slider(value: $height, in: 48...120, step: 1)
-                        }
-                        .font(.footnote)
-                    }
-                }
-            }
-            .padding()
-        }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.subheadline)
-                .foregroundColor(.secondary)
-            content()
-        }
+        PlaygroundTab(
+            component: {
+                Uploader(
+                    images: images,
+                    numberOfImages: Int(numberOfImages),
+                    disabled: disabled,
+                    width: CGFloat(width),
+                    height: CGFloat(height),
+                    onAdd: { images.append(UploadImage(uri: uploaderMockURL)) },
+                    onCancel: { _, index in
+                        if images.indices.contains(index) { images.remove(at: index) }
+                    },
+                    onPressImage: { _, _ in }
+                )
+            },
+            params: [
+                .slider("NumberOfImages", $numberOfImages, min: 1, max: 6, step: 1),
+                .checkbox("Disabled", $disabled),
+                .slider("Width", $width, min: 48, max: 120, step: 1),
+                .slider("Height", $height, min: 48, max: 120, step: 1),
+            ]
+        )
     }
 }

package/ios-demo/Sources/MoMoUIKitsDemo/SwiftUIDemoBrowserView.swift

@@ -7,7 +7,7 @@ struct SwiftUIDemoBrowserView: View {
     @State private var searchText = ""
 
     var body: some View {
-        Group {
+        ZStack {
             if #available(iOS 16.0, *) {
                 HomeView(
                     onOpenCompose: onOpenCompose,
@@ -16,6 +16,8 @@ struct SwiftUIDemoBrowserView: View {
             } else {
                 fallbackBrowser
             }
+
+            BaselineView()
         }
         .environment(\.appTheme, defaultTheme)
     }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.30-debug",
+  "version": "0.162.31-debug",
   "private": false,
-  "dependencies": {},
+  "dependeNavigationncies": {},
   "devDependencies": {},
   "license": "MoMo"
 }