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

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

@@ -0,0 +1,117 @@
+import MoMoUIKits
+import SwiftUI
+
+struct BaselineViewDemo: View {
+    @State private var enabled = true
+
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack(alignment: .top) {
+                demoContent(
+                    topInset: geometry.safeAreaInsets.top,
+                    bottomInset: geometry.safeAreaInsets.bottom
+                )
+
+                MoMoUIKits.BaselineView(enabled: enabled)
+            }
+            .background(Colors.black02)
+            .ignoresSafeArea(.container, edges: [.top, .bottom])
+        }
+    }
+
+    private func demoContent(topInset: CGFloat, bottomInset: CGFloat) -> some View {
+        VStack(spacing: 0) {
+            header(topInset: topInset)
+
+            ScrollView {
+                VStack(alignment: .leading, spacing: 16) {
+                    Toggle(isOn: $enabled) {
+                        MomoText("Show baseline overlay", typography: .headerDefaultBold)
+                    }
+                    .padding(16)
+                    .background(Colors.black01)
+                    .cornerRadius(Radius.M)
+
+                    MomoText(
+                        "Use this screen to inspect the safe area, header, horizontal spacing, bottom tab, and button baseline guides.",
+                        typography: .bodyDefaultRegular,
+                        color: Colors.textSecondary
+                    )
+
+                    ForEach(1...8, id: \.self) { index in
+                        sampleRow(index)
+                    }
+                }
+                .padding(.horizontal, 16)
+                .padding(.top, 16)
+                .padding(.bottom, 88)
+            }
+
+            bottomAction(bottomInset: bottomInset)
+        }
+    }
+
+    private func header(topInset: CGFloat) -> some View {
+        VStack(spacing: 0) {
+            Color.clear
+                .frame(height: topInset)
+
+            HStack(spacing: 12) {
+                Image(systemName: "chevron.left")
+                    .font(.system(size: 18, weight: .semibold))
+                    .frame(width: 40, height: 52)
+
+                MomoText("Baseline View", typography: .headerDefaultBold)
+
+                Spacer(minLength: 0)
+            }
+            .frame(height: 52)
+            .padding(.horizontal, 12)
+            .background(Colors.black01)
+        }
+    }
+
+    private func sampleRow(_ index: Int) -> some View {
+        HStack(spacing: 12) {
+            Circle()
+                .fill(Colors.primaryLight)
+                .frame(width: 36, height: 36)
+                .overlay(
+                    MomoText("\(index)", typography: .labelSMedium, color: Colors.primary)
+                )
+
+            VStack(alignment: .leading, spacing: 4) {
+                MomoText("Content row \(index)", typography: .headerSSemibold)
+                MomoText("Scrollable content under the debug overlay.", color: Colors.textSecondary)
+            }
+
+            Spacer(minLength: 0)
+        }
+        .padding(16)
+        .background(Colors.black01)
+        .cornerRadius(Radius.M)
+    }
+
+    private func bottomAction(bottomInset: CGFloat) -> some View {
+        VStack(spacing: 8) {
+            MoMoUIKits.Button(
+                title: "Primary action",
+                action: {},
+                type: .primary,
+                size: .large
+            )
+        }
+        .padding(.horizontal, 16)
+        .padding(.top, 8)
+        .padding(.bottom, bottomInset)
+        .background(Colors.black01)
+    }
+}
+
+#if DEBUG
+struct BaselineViewDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        BaselineViewDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,89 @@
+//
+//  BottomTabDemo.swift
+//  Example
+//
+//  Usage demo for the bottom-tab navigation. Mirrors Compose's `BottomTabUsage`:
+//  four tabs (each with its own header title + badge) and a center floating
+//  button. Must be hosted inside a `NavigationContainer` (uses the Navigator).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct BottomTabDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        BottomTab(
+            items: [
+                BottomTabItem(
+                    name: "Tab1",
+                    label: "Option 1",
+                    icon: "16_basic_home",
+                    badgeLabel: "",
+                    options: NavigationOptions(headerTitle: .default("Option 1"), hiddenBack: false),
+                    screen: { tabBody("Option 1", Colors.blue09) }
+                ),
+                BottomTabItem(
+                    name: "Tab2",
+                    label: "Option 2",
+                    icon: "help_center",
+                    badgeLabel: "0", // hidden (mirrors Compose's "0" → no badge)
+                    options: NavigationOptions(headerTitle: .default("Option 2")),
+                    screen: { tabBody("Option 2", Colors.pink09) }
+                ),
+                BottomTabItem(
+                    name: "Tab3",
+                    label: "Option 3 with a very long label",
+                    icon: "pin_star",
+                    badgeLabel: "New",
+                    options: NavigationOptions(headerTitle: .default("Option 3")),
+                    screen: { tabBody("Option 3", Colors.yellow09) }
+                ),
+                BottomTabItem(
+                    name: "Tab4",
+                    label: "Option 4 also quite long here",
+                    icon: "navigation_more_icon",
+                    badgeLabel: "9999",
+                    options: NavigationOptions(headerTitle: .default("Option 4")),
+                    screen: { tabBody("Option 4", Colors.blue10) }
+                )
+            ],
+            floatingButton: BottomTabFloatingButton(
+                icon: "16_basic_home",
+                label: "Quét QR",
+                onPress: { navigator.push({ qrScreen }, options: NavigationOptions(title: "QR")) }
+            )
+        )
+    }
+
+    @ViewBuilder
+    private func tabBody(_ title: String, _ color: Color) -> some View {
+        VStack {
+            MomoText(title, typography: .headerDefaultBold)
+                .padding(.top, 24)
+            Spacer()
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(color)
+    }
+
+    private var qrScreen: some View {
+        VStack { MomoText("QR scanner placeholder") }
+            .frame(maxWidth: .infinity)
+            .padding(24)
+    }
+}
+
+// MARK: - Standalone wrapper (so it can be opened directly from Home too)
+
+struct BottomTabDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            BottomTabDemoContent()
+        } else {
+            Text("Bottom tab demo requires iOS 16+").padding()
+        }
+    }
+}

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

@@ -0,0 +1,108 @@
+//
+//  ButtonDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's ButtonUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct ButtonDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ButtonPreview() }, playground: { ButtonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct ButtonPreview: View {
+    private let url = "https://static-00.iconduck.com/assets.00/external-link-icon-512x512-h2zzryfc.png"
+
+    var body: some View {
+        BasicColumnBox("Title") {
+            MoMoUIKits.Button(title: "Open", action: {})
+        }
+
+        BasicColumnBox("Type") {
+            MoMoUIKits.Button(title: "PRIMARY", action: {}, type: .primary)
+            MoMoUIKits.Button(title: "DANGER", action: {}, type: .danger)
+            MoMoUIKits.Button(title: "SECONDARY", action: {}, type: .secondary)
+            MoMoUIKits.Button(title: "TONAL", action: {}, type: .tonal)
+            MoMoUIKits.Button(title: "OUTLINE", action: {}, type: .outline)
+            MoMoUIKits.Button(title: "TEXT", action: {}, type: .text)
+            MoMoUIKits.Button(title: "DISABLED", action: {}, type: .disabled)
+        }
+
+        BasicColumnBox("Size") {
+            MoMoUIKits.Button(title: "LARGE", action: {}, size: .large)
+            MoMoUIKits.Button(title: "MEDIUM", action: {}, size: .medium)
+            MoMoUIKits.Button(title: "SMALL", action: {}, size: .small)
+        }
+
+        BasicColumnBox("Loading") {
+            MoMoUIKits.Button(title: "PRIMARY", action: {}, type: .primary, loading: true)
+            MoMoUIKits.Button(title: "DANGER", action: {}, type: .danger, loading: true)
+            MoMoUIKits.Button(title: "SECONDARY", action: {}, type: .secondary, loading: true)
+            MoMoUIKits.Button(title: "TONAL", action: {}, type: .tonal, loading: true)
+            MoMoUIKits.Button(title: "OUTLINE", action: {}, type: .outline, loading: true)
+            MoMoUIKits.Button(title: "TEXT", action: {}, type: .text, loading: true)
+            MoMoUIKits.Button(title: "DISABLED", action: {}, type: .disabled, loading: true)
+        }
+
+        BasicColumnBox("Icon Right") {
+            MoMoUIKits.Button(title: "Icon", action: {}, iconRight: url)
+        }
+
+        BasicColumnBox("Icon Left") {
+            MoMoUIKits.Button(title: "Icon", action: {}, iconLeft: url)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ButtonPlayground: View {
+    @State private var title = "Button"
+    @State private var type: PlaygroundOption? = buttonTypeList.first { $0.key == "primary" }
+    @State private var size: PlaygroundOption? = buttonSizeList.first { $0.key == "large" }
+    @State private var iconRight: PlaygroundOption?
+    // Seeded (Compose leaves both nil) so the UseTintColor toggle has an icon to act on.
+    @State private var iconLeft: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var full = true
+    @State private var loading = false
+    @State private var useTintColor = true
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MoMoUIKits.Button(
+                    title: title,
+                    action: {},
+                    type: (type?.value as? ButtonType) ?? .primary,
+                    size: (size?.value as? ButtonSize) ?? .large,
+                    iconLeft: (iconLeft?.value as? String) ?? "",
+                    iconRight: (iconRight?.value as? String) ?? "",
+                    isFull: full,
+                    loading: loading,
+                    useTintColor: useTintColor
+                )
+            },
+            params: [
+                .string("Children", $title),
+                .radio("Type", buttonTypeList, $type),
+                .radio("Size", buttonSizeList, $size),
+                .checkbox("Full", $full),
+                .option("IconRight", playgroundIcons, $iconRight),
+                .option("IconLeft", playgroundIcons, $iconLeft),
+                .checkbox("Loading", $loading),
+                .checkbox("UseTintColor", $useTintColor),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,96 @@
+//
+//  CarouselDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let slideColors: [Color] = [
+    Colors.pink09, Colors.blue08, Colors.green08, Colors.orange08, Colors.mint08,
+]
+
+@ViewBuilder
+private func carouselSlide(_ index: Int) -> some View {
+    ZStack {
+        slideColors[index % slideColors.count]
+        Text("Slide \(index + 1)")
+            .font(.headline)
+            .foregroundColor(Colors.black01)
+    }
+    .frame(maxWidth: .infinity)
+    .frame(height: 160)
+    .cornerRadius(Radius.M)
+}
+
+struct CarouselDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CarouselPreview() }, playground: { CarouselPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct CarouselPreview: View {
+    var body: some View {
+        BasicColumnBox("Basic (3 slides)", alignment: .leading) {
+            Carousel(itemCount: 3) { carouselSlide($0) }.frame(height: 160)
+        }
+        BasicColumnBox("Loop enabled", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true) { carouselSlide($0) }.frame(height: 160)
+        }
+        BasicColumnBox("Autoplay (3s)", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true, autoplay: true, autoplayInterval: 3.0) { carouselSlide($0) }
+                .frame(height: 160)
+        }
+        BasicColumnBox("Inactive effects", alignment: .leading) {
+            Carousel(itemCount: 5, loop: true, inactiveSlideOpacity: 0.5, inactiveSlideScale: 0.9, contentPadding: 32) {
+                carouselSlide($0)
+            }
+            .frame(height: 160)
+        }
+        BasicColumnBox("Scroll disabled", alignment: .leading) {
+            Carousel(itemCount: 3, scrollEnabled: false) { carouselSlide($0) }.frame(height: 160)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CarouselPlayground: View {
+    @State private var loop = false
+    @State private var autoplay = false
+    @State private var scrollEnabled = true
+    @State private var inactiveOpacity: Double = 1.0
+    @State private var inactiveScale: Double = 1.0
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Carousel(
+                    itemCount: 5,
+                    loop: loop,
+                    autoplay: autoplay,
+                    scrollEnabled: scrollEnabled,
+                    inactiveSlideOpacity: inactiveOpacity,
+                    inactiveSlideScale: inactiveScale
+                ) { carouselSlide($0) }
+                    .frame(height: 160)
+            },
+            params: [
+                .checkbox("Loop", $loop),
+                .checkbox("Autoplay", $autoplay),
+                .checkbox("ScrollEnabled", $scrollEnabled),
+                .slider("InactiveOpacity", $inactiveOpacity, min: 0, max: 1, step: 0.1),
+                .slider("InactiveScale", $inactiveScale, min: 0.5, max: 1, step: 0.1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,60 @@
+//
+//  CheckboxDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Checkbox.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct CheckboxDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CheckboxPreview() }, playground: { CheckboxPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct CheckboxPreview: View {
+    var body: some View {
+        BasicColumnBox("States", alignment: .leading) {
+            Checkbox(.constant(true), onChange: { _ in }, title: "Checked")
+            Checkbox(.constant(false), onChange: { _ in }, title: "Unchecked")
+            Checkbox(.constant(true), onChange: { _ in }, indeterminate: true, title: "Indeterminate")
+        }
+        BasicColumnBox("Disabled", alignment: .leading) {
+            Checkbox(.constant(true), disabled: true, onChange: { _ in }, title: "Disabled checked")
+            Checkbox(.constant(true), disabled: true, onChange: { _ in }, indeterminate: true, title: "Disabled indeterminate")
+            Checkbox(.constant(false), disabled: true, onChange: { _ in }, title: "Disabled unchecked")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CheckboxPlayground: View {
+    @State private var checked = false
+    @State private var disabled = false
+    @State private var indeterminate = false
+    @State private var title = "Check Box"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Checkbox($checked, disabled: disabled, indeterminate: indeterminate, title: title)
+            },
+            params: [
+                .checkbox("Checked", $checked),
+                .checkbox("Disabled", $disabled),
+                .checkbox("Indeterminate", $indeterminate),
+                .string("Title", $title),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,76 @@
+//
+//  ChipDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Chip.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let chipSizeList: [PlaygroundOption] = [
+    .init("large", Chip.ChipSize.large),
+    .init("small", Chip.ChipSize.small),
+]
+
+struct ChipDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ChipPreview() }, playground: { ChipPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct ChipPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            Chip(label: "Large", size: .large)
+            Chip(label: "Small", size: .small)
+        }
+        BasicColumnBox("Icons", alignment: .leading) {
+            Chip(label: "Apple", iconLeft: "basic_home")
+            Chip(label: "Banana", iconRight: "basic_home")
+        }
+        BasicColumnBox("State", alignment: .leading) {
+            Chip(label: "Orange", backgroundColor: Colors.black01)
+            Chip(label: "Grape", selected: true)
+            Chip(label: "Grape", iconRight: "basic_home", selected: true, iconRightTint: Colors.black05)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ChipPlayground: View {
+    @State private var label = "Chip"
+    @State private var size: PlaygroundOption? = chipSizeList.first { $0.key == "large" }
+    @State private var selected = false
+    @State private var iconLeft: PlaygroundOption?
+    @State private var iconRight: PlaygroundOption?
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Chip(
+                    label: label,
+                    iconLeft: iconLeft?.value as? String,
+                    iconRight: iconRight?.value as? String,
+                    selected: selected,
+                    size: (size?.value as? Chip.ChipSize) ?? .large
+                )
+            },
+            params: [
+                .string("Label", $label),
+                .radio("Size", chipSizeList, $size),
+                .checkbox("Selected", $selected),
+                .option("IconLeft", playgroundIcons, $iconLeft),
+                .option("IconRight", playgroundIcons, $iconRight),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,102 @@
+//
+//  CollapseDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let collapseTitleSizeList: [PlaygroundOption] = [
+    .init("small", CollapseTitleSize.small),
+    .init("medium", CollapseTitleSize.medium),
+    .init("large", CollapseTitleSize.large),
+]
+
+struct CollapseDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { CollapsePreview() }, playground: { CollapsePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct CollapsePreview: View {
+    var body: some View {
+        BasicColumnBox("Default", alignment: .leading) {
+            Collapse(title: "Default collapse") {
+                MomoText("This is the expanded content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Border", alignment: .leading) {
+            Collapse(title: "With border", showBorder: true) {
+                MomoText("Content inside a bordered collapse.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("Expanded by Default", alignment: .leading) {
+            Collapse(title: "Pre-expanded", expandDefault: true) {
+                MomoText("This collapse starts expanded.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Description", alignment: .leading) {
+            Collapse(title: "Collapse with description", description: "A brief description below the title.") {
+                MomoText("Detailed content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("Title Sizes", alignment: .leading) {
+            Collapse(title: "Small title", titleSize: .small) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+            Collapse(title: "Large title", titleSize: .large) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+        BasicColumnBox("With Tag", alignment: .leading) {
+            Collapse(title: "Collapse with tag", tagLabel: "New", tagColor: .red) {
+                MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct CollapsePlayground: View {
+    @State private var title = "Collapse title"
+    @State private var description = ""
+    @State private var showBorder = false
+    @State private var expandDefault = false
+    @State private var titleSize: PlaygroundOption? = collapseTitleSizeList.first { $0.key == "medium" }
+    @State private var useBackgroundCollapseButton = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Collapse(
+                    title: title,
+                    description: description.isEmpty ? nil : description,
+                    showBorder: showBorder,
+                    expandDefault: expandDefault,
+                    titleSize: (titleSize?.value as? CollapseTitleSize) ?? .medium,
+                    useBackgroundCollapseButton: useBackgroundCollapseButton
+                ) {
+                    MomoText("Expanded content.", typography: .bodyDefaultRegular).padding(Spacing.M)
+                }
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $description),
+                .checkbox("ShowBorder", $showBorder),
+                .checkbox("ExpandDefault", $expandDefault),
+                .radio("TitleSize", collapseTitleSizeList, $titleSize),
+                .checkbox("BackgroundCollapseButton", $useBackgroundCollapseButton),
+            ]
+        )
+    }
+}