@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

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

@@ -0,0 +1,182 @@
+//
+//  ThemeDemo.swift
+//  iosApp
+//
+//  Created by sophia on 25/2/26.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - ThemeDemo
+
+struct ThemeDemo: View {
+    @Environment(\.appTheme) private var theme
+    @State private var isDarkMode: Bool = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+
+                // MARK: Dark Mode Toggle
+                Toggle(isOn: $isDarkMode) {
+                    Text("Dark Mode")
+                        .font(.headline)
+                }
+                .padding(.horizontal, 16)
+                .padding(.vertical, 12)
+                .onChange(of: isDarkMode) { _ in
+                    // Theme switching is handled via parent environment
+                }
+
+                Divider()
+
+                // MARK: Primary / Secondary
+                SectionHeader("Primary & Secondary")
+                ThemeColorRow(label: "primary", color: theme.colors.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.secondary)
+
+                // MARK: Background
+                SectionHeader("Background")
+                ThemeColorRow(label: "default", color: theme.colors.background.default)
+                ThemeColorRow(label: "surface", color: theme.colors.background.surface)
+                ThemeColorRow(label: "tonal", color: theme.colors.background.tonal)
+                ThemeColorRow(label: "pressed", color: theme.colors.background.pressed)
+                ThemeColorRow(label: "selected", color: theme.colors.background.selected)
+                ThemeColorRow(label: "disable", color: theme.colors.background.disable)
+
+                // MARK: Text
+                SectionHeader("Text")
+                ThemeColorRow(label: "default", color: theme.colors.text.default)
+                ThemeColorRow(label: "secondary", color: theme.colors.text.secondary)
+                ThemeColorRow(label: "hint", color: theme.colors.text.hint)
+                ThemeColorRow(label: "disable", color: theme.colors.text.disable)
+
+                // MARK: Border
+                SectionHeader("Border")
+                ThemeColorRow(label: "default", color: theme.colors.border.default)
+                ThemeColorRow(label: "disable", color: theme.colors.border.disable)
+
+                // MARK: Success
+                SectionHeader("Success")
+                ThemeColorRow(label: "primary", color: theme.colors.success.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.success.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.success.container)
+
+                // MARK: Warning
+                SectionHeader("Warning")
+                ThemeColorRow(label: "primary", color: theme.colors.warning.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.warning.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.warning.container)
+
+                // MARK: Error
+                SectionHeader("Error")
+                ThemeColorRow(label: "primary", color: theme.colors.error.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.error.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.error.container)
+
+                // MARK: Highlight
+                SectionHeader("Highlight")
+                ThemeColorRow(label: "primary", color: theme.colors.highlight.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.highlight.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.highlight.container)
+
+                // MARK: Interactive
+                SectionHeader("Interactive")
+                ThemeColorRow(label: "primary", color: theme.colors.interactive.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.interactive.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.interactive.container)
+
+                Spacer(minLength: 32)
+            }
+        }
+        .navigationTitle("Theme")
+        .background(isDarkMode ? Colors.black10.ignoresSafeArea() : theme.colors.background.default.ignoresSafeArea())
+        .environment(\.appTheme, isDarkMode ? darkTheme : defaultTheme)
+    }
+}
+
+// MARK: - SectionHeader
+
+private struct SectionHeader: View {
+    let title: String
+
+    init(_ title: String) {
+        self.title = title
+    }
+
+    var body: some View {
+        Text(title)
+            .font(.headline)
+            .fontWeight(.bold)
+            .padding(.horizontal, 16)
+            .padding(.top, 20)
+            .padding(.bottom, 8)
+    }
+}
+
+// MARK: - ThemeColorRow
+
+private struct ThemeColorRow: View {
+    @Environment(\.appTheme) private var theme
+    let label: String
+    let color: Color
+
+    var body: some View {
+        HStack(spacing: 12) {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(color)
+                .frame(width: 36, height: 36)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 8)
+                        .stroke(theme.colors.border.default, lineWidth: 1)
+                )
+
+            Text(label)
+                .font(.body)
+                .foregroundColor(theme.colors.text.default)
+
+            Spacer()
+
+            Text(color.toHexString())
+                .font(.caption)
+                .foregroundColor(theme.colors.text.hint)
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .background(theme.colors.background.tonal)
+                .clipShape(Capsule())
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 4)
+    }
+}
+
+// MARK: - Color+Hex helper
+
+extension Color {
+    /// Returns a hex string like "#EB2F96" from a SwiftUI Color.
+    func toHexString() -> String {
+        guard let cgColor = UIColor(self).cgColor.converted(
+            to: CGColorSpaceCreateDeviceRGB(),
+            intent: .defaultIntent,
+            options: nil
+        ) else { return "#??????" }
+        guard let components = cgColor.components, components.count >= 3 else { return "#??????" }
+        let r = Int((components[0] * 255).rounded())
+        let g = Int((components[1] * 255).rounded())
+        let b = Int((components[2] * 255).rounded())
+        return String(format: "#%02X%02X%02X", r, g, b)
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    if #available(iOS 16.0, *) {
+        NavigationStack {
+            ThemeDemo()
+        }
+    } else {
+        // Fallback on earlier versions
+    }
+}

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()
+        }
+    }
+}