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

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

@@ -0,0 +1,109 @@
+//
+//  TitleDemo.swift
+//  Example
+//
+import SwiftUI
+import MoMoUIKits
+
+struct TitleDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Section Type") {
+                    Title(
+                        title: "Section Small",
+                        type: .section,
+                        size: .small
+                    )
+                    Title(
+                        title: "Section Medium",
+                        type: .section,
+                        size: .medium,
+                        icon: "basic_home",
+                        description: "This is a medium section with icon."
+                    )
+                    Title(
+                        title: "Section Large",
+                        type: .section,
+                        size: .large,
+                        showTrailingAction: true,
+                        badgeLabel: "NEW",
+                        onPressTrailingAction: { }
+                    )
+                }
+
+                section("Card Type") {
+                    Title(
+                        title: "Card Small Text Only",
+                        type: .card,
+                        size: .small,
+                        textOnly: true
+                    )
+                    Title(
+                        title: "Card Medium with Right Action",
+                        type: .card,
+                        size: .medium,
+                        icon: "basic_home",
+                        showRightAction: true,
+                        buttonTitle: "Action",
+                        onPressRightAction: { }
+                    )
+                    Title(
+                        title: "Card Large Full",
+                        type: .card,
+                        size: .large,
+                        icon: "basic_home",
+                        showRightAction: true,
+                        badgeLabel: "99+",
+                        onPressRightAction: { },
+                        description: "A large card title with description, badge and right arrow."
+                    )
+                }
+
+                section("Icon Alignment") {
+                    Title(
+                        title: "Icon Top",
+                        type: .section,
+                        icon: "basic_home",
+                        iconAlign: .top,
+                        description: "Icon aligned to top"
+                    )
+                    Title(
+                        title: "Icon Center",
+                        type: .section,
+                        icon: "basic_home",
+                        iconAlign: .center,
+                        description: "Icon aligned to center"
+                    )
+                    Title(
+                        title: "Icon Bottom",
+                        type: .section,
+                        icon: "basic_home",
+                        iconAlign: .bottom,
+                        description: "Icon aligned to bottom"
+                    )
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            MomoText(title, typography: .headerSSemibold, color: Colors.textSecondary)
+            content()
+        }
+    }
+}
+
+struct TitleDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            TitleDemo()
+        }
+    }
+}

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

@@ -0,0 +1,187 @@
+//
+//  TooltipDemo.swift
+//  Example
+//
+
+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()
+
+    // With Buttons
+    @StateObject private var singleBtnState = TooltipState()
+    @StateObject private var twoBtnState = TooltipState()
+
+    // Description Only
+    @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)
+                    }
+                }
+            }
+            .padding(.vertical, 48)
+            .padding(.horizontal, 16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 24) {
+            Text(title)
+                .font(.headline)
+            content()
+        }
+    }
+}
+
+#if DEBUG
+struct TooltipDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        TooltipDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,87 @@
+//
+//  TypographyDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 29/11/24.
+//
+import SwiftUI
+import MoMoUIKits
+
+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)
+        }
+    }
+}
+
+struct TypographyDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationView {
+            TypographyDemo()
+        }
+    }
+}
+

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

@@ -0,0 +1,131 @@
+//
+//  UploaderDemo.swift
+//  Example
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct UploaderDemo: View {
+    private let mockURL = "https://static.momocdn.net/app/img/kits/navigation-bar.png"
+
+    // Playground state
+    @State private var playgroundImages: [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()
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+import SwiftUI
+import MoMoUIKits
+
+struct SwiftUIDemoBrowserView: View {
+    let context: MoMoUIKitsDemoContext
+    @State private var searchText = ""
+
+    var body: some View {
+        Group {
+            if #available(iOS 16.0, *) {
+                HomeView()
+            } else {
+                fallbackBrowser
+            }
+        }
+        .environment(\.appTheme, defaultTheme)
+        .environmentObject(
+            ApplicationEnvironment(applicationContext: context.miniAppContext)
+        )
+    }
+
+    private var fallbackBrowser: some View {
+        NavigationView {
+            List {
+                ForEach(ScreenUsages) { item in
+                    NavigationLink(destination: item.destination) {
+                        MomoText(item.title, typography: .headerDefaultBold)
+                            .padding(.vertical, 8)
+                    }
+                }
+            }
+            .listStyle(.insetGrouped)
+            .navigationTitle("UI Kits SwiftUI")
+        }
+        .navigationViewStyle(.stack)
+    }
+
+    private var filteredSections: [UIKitsDemoSection] {
+        guard !searchText.isEmpty else { return UIKitsDemoRegistry.sections }
+
+        return UIKitsDemoRegistry.sections.compactMap { section in
+            let items = section.items.filter { item in
+                item.title.localizedCaseInsensitiveContains(searchText)
+                    || item.subtitle.localizedCaseInsensitiveContains(searchText)
+            }
+            guard !items.isEmpty else { return nil }
+            return UIKitsDemoSection(id: section.id, title: section.title, items: items)
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+import SwiftUI
+
+struct UIKitsDemoItem: Identifiable {
+    let id: String
+    let title: String
+    let subtitle: String
+    let destination: AnyView
+}
+
+struct UIKitsDemoSection: Identifiable {
+    let id: String
+    let title: String
+    let items: [UIKitsDemoItem]
+}
+

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

@@ -0,0 +1,73 @@
+import SwiftUI
+
+enum UIKitsDemoRegistry {
+    static let sections: [UIKitsDemoSection] = [
+        UIKitsDemoSection(
+            id: "components",
+            title: "Components",
+            items: [
+                UIKitsDemoItem(
+                    id: "typography",
+                    title: "Typography",
+                    subtitle: "Text styles and semantic colors",
+                    destination: AnyView(UIKitsTypographyDemoView())
+                ),
+                UIKitsDemoItem(
+                    id: "button",
+                    title: "Button",
+                    subtitle: "Primary, secondary, outline, loading",
+                    destination: AnyView(UIKitsButtonDemoView())
+                ),
+                UIKitsDemoItem(
+                    id: "badge",
+                    title: "Badge",
+                    subtitle: "Numeric and label badges",
+                    destination: AnyView(UIKitsBadgeDemoView())
+                ),
+                UIKitsDemoItem(
+                    id: "chip",
+                    title: "Chip",
+                    subtitle: "Selectable labels and compact filters",
+                    destination: AnyView(UIKitsChipDemoView())
+                )
+            ]
+        ),
+        UIKitsDemoSection(
+            id: "inputs",
+            title: "Inputs",
+            items: [
+                UIKitsDemoItem(
+                    id: "input",
+                    title: "Input",
+                    subtitle: "Text, error, password, disabled states",
+                    destination: AnyView(UIKitsInputDemoView())
+                ),
+                UIKitsDemoItem(
+                    id: "checkbox",
+                    title: "Checkbox",
+                    subtitle: "Checked, indeterminate, disabled",
+                    destination: AnyView(UIKitsCheckboxDemoView())
+                ),
+                UIKitsDemoItem(
+                    id: "radio",
+                    title: "Radio",
+                    subtitle: "Single choice controls",
+                    destination: AnyView(UIKitsRadioDemoView())
+                )
+            ]
+        ),
+        UIKitsDemoSection(
+            id: "feedback",
+            title: "Feedback",
+            items: [
+                UIKitsDemoItem(
+                    id: "popup",
+                    title: "Popup Notify",
+                    subtitle: "Notification popup content and actions",
+                    destination: AnyView(UIKitsPopupDemoView())
+                )
+            ]
+        )
+    ]
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.2-debug",
+  "version": "0.162.2-sp.1",
   "private": false,
   "dependencies": {},
   "devDependencies": {},