@momo-kits/native-kits 0.162.30 → 0.162.31

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",
+  "version": "0.162.31",
   "private": false,
-  "dependencies": {},
+  "dependeNavigationncies": {},
   "devDependencies": {},
   "license": "MoMo"
 }