@momo-kits/native-kits 0.163.1-beta.3 → 0.163.1-beta.5-debug

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

@@ -0,0 +1,126 @@
+//
+//  CarouselDemo.swift
+//  Example
+//
+
+import SwiftUI
+import MoMoUIKits
+
+struct CarouselDemo: View {
+    // MARK: - Playground state
+    @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
+
+    private let slideColors: [Color] = [
+        Colors.pink09,
+        Colors.blue08,
+        Colors.green08,
+        Colors.orange08,
+        Colors.mint08,
+    ]
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: Spacing.XL) {
+                preview
+                Divider()
+                playground
+            }
+            .padding(Spacing.L)
+        }
+    }
+
+    // MARK: - Preview cases (mirror CarouselUsage.kt)
+    private var preview: some View {
+        VStack(alignment: .leading, spacing: Spacing.XL) {
+            section("Basic (3 slides)") {
+                Carousel(itemCount: 3) { index in slide(index) }
+                    .frame(height: 160)
+            }
+
+            section("Loop enabled") {
+                Carousel(itemCount: 5, loop: true) { index in slide(index) }
+                    .frame(height: 160)
+            }
+
+            section("Autoplay (3s interval)") {
+                Carousel(
+                    itemCount: 5,
+                    loop: true,
+                    autoplay: true,
+                    autoplayInterval: 3.0
+                ) { index in slide(index) }
+                    .frame(height: 160)
+            }
+
+            section("Inactive slide effects (opacity=0.5, scale=0.9)") {
+                Carousel(
+                    itemCount: 5,
+                    loop: true,
+                    inactiveSlideOpacity: 0.5,
+                    inactiveSlideScale: 0.9,
+                    contentPadding: 32
+                ) { index in slide(index) }
+                    .frame(height: 160)
+            }
+
+            section("Scroll disabled") {
+                Carousel(itemCount: 3, scrollEnabled: false) { index in slide(index) }
+                    .frame(height: 160)
+            }
+        }
+    }
+
+    // MARK: - Playground
+    private var playground: some View {
+        VStack(alignment: .leading, spacing: Spacing.M) {
+            Text("Playground").font(.headline)
+
+            Toggle("Loop", isOn: $loop)
+            Toggle("Autoplay", isOn: $autoplay)
+            Toggle("Scroll Enabled", isOn: $scrollEnabled)
+
+            VStack(alignment: .leading) {
+                Text("Inactive Opacity: \(String(format: "%.2f", inactiveOpacity))")
+                Slider(value: $inactiveOpacity, in: 0 ... 1)
+            }
+            VStack(alignment: .leading) {
+                Text("Inactive Scale: \(String(format: "%.2f", inactiveScale))")
+                Slider(value: $inactiveScale, in: 0.5 ... 1)
+            }
+
+            Carousel(
+                itemCount: 5,
+                loop: loop,
+                autoplay: autoplay,
+                scrollEnabled: scrollEnabled,
+                inactiveSlideOpacity: inactiveOpacity,
+                inactiveSlideScale: inactiveScale
+            ) { index in slide(index) }
+                .frame(height: 160)
+        }
+    }
+
+    // MARK: - Helpers
+    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: Spacing.S) {
+            Text(title).font(.subheadline).bold()
+            content()
+        }
+    }
+
+    private func slide(_ 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)
+    }
+}

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

@@ -0,0 +1,63 @@
+//
+//  CheckBoxDemo.swift
+//  Example
+//
+//  Created by dung.pham2 on 2/12/24.
+//
+import SwiftUI
+import MoMoUIKits
+
+struct CheckboxDemo: View {
+    @State private var checked = false
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 20) {
+            // Interactive checkbox
+            Checkbox(
+                $checked,
+                onChange: { _ in checked = !checked },
+                title: "Check Box"
+            )
+            
+            // Unchecked checkbox
+            Checkbox(.constant(false), onChange: { _ in }, title: "Check Box")
+            
+            // Indeterminate checkbox
+            Checkbox(
+                .constant(true),
+//                disabled: (({ _ in }) != 0),
+                onChange: { _ in },
+                indeterminate: true,
+                title: "Indeterminate"
+            )
+            
+            // Disabled checkbox
+            Checkbox(
+                .constant(true),
+                disabled: true,
+                onChange: { _ in },
+                title: "Disable"
+            )
+            
+            // Disabled indeterminate checkbox
+            Checkbox(
+                .constant(true),
+                disabled: true,
+                onChange: {_ in },
+                indeterminate: true,
+                title: "Disable checked"
+            )
+            
+            // Disabled unchecked checkbox
+            Checkbox(
+                .constant(false),
+                disabled: true,
+                onChange: { _ in },
+                title: "Disable"
+            )
+        }
+        .padding()
+    }
+}
+
+

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

@@ -0,0 +1,20 @@
+
+import SwiftUI
+import MoMoUIKits
+
+struct ChipDemo: View {
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Chip(label: "Large", size: Chip.ChipSize.large)
+            Chip(label: "Small", size: Chip.ChipSize.small)
+            Chip(label: "Apple", iconLeft: "basic_home")
+            Chip(label: "Banana", iconRight: "basic_home")
+            Chip(label: "Orange", backgroundColor: Colors.black01)
+            Chip(label: "Grape", selected: true)
+            Chip(label: "Grape", iconRight: "basic_home", selected: true, iconRightTint: Colors.black05)
+            Chip(label: "Tagged", accessibilityLabel: "chip_tagged")
+        }
+        .padding()
+    }
+}

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

@@ -0,0 +1,93 @@
+import SwiftUI
+import MoMoUIKits
+
+struct CollapseDemo: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Default") {
+                    Collapse(title: "Default collapse") {
+                        MomoText("This is the expanded content.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+
+                section("With Border") {
+                    Collapse(title: "With border", showBorder: true) {
+                        MomoText("Content inside a bordered collapse.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+
+                section("Expanded by Default") {
+                    Collapse(title: "Pre-expanded", expandDefault: true) {
+                        MomoText("This collapse starts expanded.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+
+                section("With Description") {
+                    Collapse(
+                        title: "Collapse with description",
+                        description: "A brief description below the title."
+                    ) {
+                        MomoText("Detailed content.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+
+                section("Title Sizes") {
+                    Collapse(title: "Small title", titleSize: .small) {
+                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+                    }
+                    Collapse(title: "Medium title", titleSize: .medium) {
+                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+                    }
+                    Collapse(title: "Large title", titleSize: .large) {
+                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+                    }
+                }
+
+                section("With SubTitle") {
+                    Collapse(title: "Collapse with subTitle", subTitle: "Sub") {
+                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+                    }
+                }
+
+                section("With Tag") {
+                    Collapse(title: "Collapse with tag", tagLabel: "New", tagColor: .red) {
+                        MomoText("Content", typography: .bodyDefaultRegular).padding(Spacing.M)
+                    }
+                }
+
+                section("Background Collapse Button") {
+                    Collapse(title: "Tonal chevron button", useBackgroundCollapseButton: true) {
+                        MomoText("Chevron has tonal background.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+
+                section("With Image") {
+                    Collapse(
+                        title: "Collapse with image",
+                        image: "https://static.momocdn.net/img/momo_icon.png",
+                        imageSize: 40,
+                        showBorder: true
+                    ) {
+                        MomoText("Content with leading image.", typography: .bodyDefaultRegular)
+                            .padding(Spacing.M)
+                    }
+                }
+            }
+            .padding()
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(title).font(.headline)
+            content()
+        }
+    }
+}

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

@@ -0,0 +1,107 @@
+//
+//  ContentView.swift
+//  Example
+//
+//  Created by Wem on 14/12/2023.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+
+struct ContentView: View {
+    @State private var searchText: String = ""
+    @State private var showPopup: Bool = false
+
+    var body: some View {
+
+        ScreenDemo()
+    }
+}
+
+#Preview {
+    ContentView()
+}
+
+struct ScreenDemo: View {
+    var body: some View {
+        Screen (
+//            backgroundColor: Colors.blue01,
+            headerTransparent: true,
+            isBack: true,
+            headerType: .extended,
+            title: "inputPhoneHeadetTitle",
+            titlePosition: .left,
+            goBack: {print("goBack")},
+            scrollable: true,
+            onContentLayout: nil,
+            useAvoidKeyboard: true,
+            footer: { AnyView(MoMoUIKits.Button(title: "String", action: {print("Footer Button")}, type: .primary, size: .large)) },
+            headerRight: nil,
+//            animatedHeader: AnimatedHeader(aspectRatio: .ratio16_9, composable: {scrollState in AnyView(ImageView("https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png"))}),
+            fabProps: FabProps(
+                icon: "https://static.momocdn.net/app/img/authentication/floating_helper.png",
+                label: "rjhtgirg",
+                onClick: { print("HELPER") },
+                containerColor: .clear, size: .large,
+                scrollOffset: nil,
+                position: .right,
+                bottomPadding: nil
+                
+                //                renderComponent: {
+                //                    AnyView(
+                //                        ImageView("https://static.momocdn.net/app/img/authentication/floating_helper.png")
+                //                    )
+                //                }
+                
+            )
+        ) {
+            //            TrustBanner(onPress: {_ in
+            //
+            //            }).padding(.horizontal, 12)
+            //                .padding(.vertical, 24)
+//            ChipDemo()
+//            InputPhoneNumberDemo()
+//            ButtonDemo()
+//            TypographyDemo()
+//            Spacer().frame(height: 300)
+//            InputDemo()
+//            BadgeDemo()
+//            ThemeDemo()
+            InputSearchDemo()
+        }
+
+//        VStack {
+//            PopupOverlay(isPresented: .constant(true))
+//        }
+    }
+    
+    struct PopupOverlay: View {
+        @Binding var isPresented: Bool
+        
+        var body: some View {
+            ZStack {
+                Color.black.opacity(0.4)
+                    .edgesIgnoringSafeArea(.all)
+                    .onTapGesture {
+                        isPresented = false
+                    }
+                
+                PopupDisplay(
+                    isPresented: $isPresented,
+                    title: "Cho phép sử dụng camera của bạn để chụp hình",
+                    description: "[Tên mini app] [Tên mini app] [Tên mini app] [Tên mini app] [Tên mini app] [Tên mini app] [Tên mini app] [Tên mini app] ",
+                    url: "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png",
+                    buttonDirection: .row,
+                    buttonType: .button,
+                    actionButtonTitle: "Allow",
+                    closeButtonTitle: "Deny",
+                    onPressAction: { isPresented = false },
+                    onClose: { isPresented = false },
+                    errorCode: "3643"
+                )
+                
+            }
+        }
+    }
+}

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

@@ -0,0 +1,124 @@
+//
+//  DateTimePickerDemo.swift
+//  Example
+//
+
+import Foundation
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - DateTimePickerDemo
+
+struct DateTimePickerDemo: View {
+    @State private var selected1: Date?
+    @State private var selected2: Date?
+    @State private var selected3: Date?
+    @State private var selected4: Date?
+    @State private var selected5: Date?
+    @State private var selected6: Date?
+    @State private var selected7: Date? = DateTimePickerUtils.getCurrentDateTime()
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                section("Format: DD-MM-YYYY") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY",
+                        onChange: { selected1 = $0 }
+                    )
+                    selectedLabel(selected1, format: "dd-MM-yyyy")
+                }
+
+                section("Format: DD-MM-YYYY HH:mm") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY HH:mm",
+                        onChange: { selected2 = $0 }
+                    )
+                    selectedLabel(selected2, format: "yyyy-MM-dd HH:mm")
+                }
+
+                section("Format: HH:mm") {
+                    DateTimePicker(
+                        format: "HH:mm",
+                        onChange: { selected3 = $0 }
+                    )
+                    selectedLabel(selected3, format: "HH:mm")
+                }
+
+                section("With minute interval (5 minutes)") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY HH:mm",
+                        minuteInterval: 5,
+                        onChange: { selected4 = $0 }
+                    )
+                    selectedLabel(selected4, format: "yyyy-MM-dd HH:mm")
+                }
+
+                section("With min/max date") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY",
+                        selectedValue: nil,
+                        minDate: DateTimePickerUtils.createRelativeDate(years: -1),
+                        maxDate: DateTimePickerUtils.createRelativeDate(years: 1),
+                        onChange: { selected5 = $0 }
+                    )
+                    selectedLabel(selected5, format: "dd-MM-yyyy")
+                }
+
+                section("With labels") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY HH:mm",
+                        arrayLabelTime: ["Day", "Month", "Year", "Hour", "Min"],
+                        onChange: { selected6 = $0 }
+                    )
+                    selectedLabel(selected6, format: "yyyy-MM-dd HH:mm")
+                }
+
+                section("With selected value") {
+                    DateTimePicker(
+                        format: "DD-MM-YYYY HH:mm",
+                        selectedValue: selected7,
+                        onChange: { selected7 = $0 }
+                    )
+                    selectedLabel(selected7, format: "yyyy-MM-dd HH:mm")
+                }
+            }
+            .padding(.vertical, 16)
+        }
+    }
+
+    // MARK: - Helpers
+
+    @ViewBuilder
+    private func selectedLabel(_ date: Date?, format: String) -> some View {
+        if let date = date {
+            MomoText(
+                "Selected: \(DateTimePickerUtils.formatDate(date, format: format))",
+                typography: .descriptionDefaultRegular,
+                color: Colors.textSecondary
+            )
+            .padding(.top, 8)
+        }
+    }
+
+    @ViewBuilder
+    private func section<Content: View>(
+        _ title: String,
+        @ViewBuilder content: () -> Content
+    ) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(title)
+                .font(.headline)
+            content()
+        }
+        .padding(.horizontal, 16)
+    }
+}
+
+#if DEBUG
+struct DateTimePickerDemo_Previews: PreviewProvider {
+    static var previews: some View {
+        DateTimePickerDemo()
+    }
+}
+#endif

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

@@ -0,0 +1,14 @@
+import SwiftUI
+import MoMoUIKits
+
+struct DividerDemo: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            ForEach(0..<5, id: \.self) { index in
+                Text("Item\(index)")
+                MomoDivider()
+            }
+        }
+        .padding()
+    }
+}

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

@@ -0,0 +1,49 @@
+//
+//  HeaderUserDemo.swift
+//  Example
+//
+//  Usage demo for the `HeaderTitle.user` header. Mirrors Compose's
+//  `HeaderUserUsage`: the avatar-group user title is supplied via the screen's
+//  NavigationOptions (see NavigationDemo's "Header User Title" entry), and this
+//  body explains the variations the title supports.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct HeaderUserDemoContent: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            MomoText("The header above renders a HeaderTitle.user:", typography: .headerDefaultBold)
+            bullet("Avatar group (1–4 avatars, then a “+n” overflow tile)")
+            bullet("Initials fallback when no avatar URLs are provided")
+            bullet("Title + optional inline verified icons")
+            bullet("Optional subtitle and status dot")
+            bullet("Skeleton shimmer while isLoading")
+            Spacer()
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(16)
+    }
+
+    @ViewBuilder
+    private func bullet(_ text: String) -> some View {
+        HStack(alignment: .top, spacing: 8) {
+            MomoText("•")
+            MomoText(text)
+        }
+    }
+}
+
+// MARK: - Standalone wrapper (header title is only visible when pushed via NavigationDemo)
+
+struct HeaderUserDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            HeaderUserDemoContent()
+        } else {
+            Text("Header user demo requires iOS 16+").padding()
+        }
+    }
+}