@momo-kits/native-kits 0.167.1-duo.5-debug → 0.167.1-duo.6

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

@@ -0,0 +1,76 @@
+//
+//  DuoTabDemo.swift
+//  Example
+//
+//  Mirrors RN `app/screens/IPhoneDuo/DuoTabUsage`: glass rail in the Duo side bar, floating
+//  glass bar when unfolded portrait. `useShortcut` gives the tallest side bar header, for the
+//  overlap review.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let swatches = [Colors.pink03, Colors.orange03, Colors.green03]
+private let history = (1...18).map { "Giao dịch #\($0)" }
+
+struct DuoTabDemo: View {
+    let useShortcut: Bool
+
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DuoTabDemoContent(useShortcut: useShortcut)
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct DuoTabDemoContent: View {
+    let useShortcut: Bool
+
+    var body: some View {
+        BottomTab(
+            items: [
+                tab("DuoMoMo", label: "MoMo", icon: "basic_home", title: "MoMo"),
+                tab("DuoPromotion", label: "Ưu đãi", icon: "shopping_coupon", title: "Ưu đãi", badge: ""),
+                tab("DuoHistory", label: "Lịch sử GD", icon: "time_clock_reset", title: "Lịch sử giao dịch", badge: "3"),
+                tab("DuoMe", label: "Tôi", icon: "basic_person", title: "Tôi"),
+            ],
+            floatingButton: BottomTabFloatingButton(icon: "navigation_full_screen", label: "Quét mọi QR", onPress: {})
+        )
+    }
+
+    private func tab(_ name: String, label: String, icon: String, title: String, badge: String? = nil) -> BottomTabItem {
+        BottomTabItem(
+            name: name,
+            label: label,
+            icon: icon,
+            badgeLabel: badge,
+            options: NavigationOptions(title: title, headerRightData: HeaderRightData(useShortcut: useShortcut)),
+            screen: { DuoTabList() }
+        )
+    }
+}
+
+private struct DuoTabList: View {
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(history.indices, id: \.self) { index in
+                if index > 0 { MomoDivider() }
+                HStack(spacing: Spacing.M) {
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(swatches[index % swatches.count])
+                        .frame(width: Spacing.XL, height: Spacing.XL)
+                    MomoText(history[index], typography: .bodyDefaultRegular)
+                    Spacer()
+                }
+                .padding(.vertical, Spacing.M)
+            }
+        }
+        .padding(.horizontal, Spacing.M)
+        .background(Colors.black01)
+        .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+        .padding(Spacing.M)
+    }
+}

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

@@ -85,6 +85,7 @@ public let ScreenUsages: [ScreenUsage] = [
     ScreenUsage(title: "DateTimePicker", destination: AnyView(DateTimePickerDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
     ScreenUsage(title: "Navigation", destination: AnyView(NavigationDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "iPhone Duo", destination: AnyView(IPhoneDuoDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Animated Header", destination: AnyView(AnimatedHeaderDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Theme", destination: AnyView(ThemeDemo()), icon: getIcon(icon: "Typography")),
     ScreenUsage(title: "Localize", destination: AnyView(LocalizeDemo()), icon: getIcon(icon: "Typography")),

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

@@ -0,0 +1,170 @@
+//
+//  IPhoneDuoDemo.swift
+//  Example
+//
+//  Mirrors RN `app/screens/IPhoneDuo`: the live screen layout, an extended header + search
+//  + footer screen, the Duo tab bars, the popup / bottom sheet behaviour and a grid to scroll.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let gridRows: [[Int]] = [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]]
+
+// enough rows to scroll, so the header glass and side bar can be checked
+private let scrollRows: [[Int]] = Array(repeating: gridRows, count: 4).flatMap { $0 }
+
+struct IPhoneDuoDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            IPhoneDuoDemoContent()
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct IPhoneDuoDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.M) {
+            VStack(spacing: 0) {
+                ForEach(info, id: \.0) { label, value in
+                    HStack {
+                        MomoText(label, typography: .bodyDefaultRegular)
+                        Spacer()
+                        MomoText(value, typography: .headerSSemibold)
+                    }
+                    .padding(.vertical, Spacing.XS)
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            VStack(spacing: Spacing.S) {
+                demoButton("Extended header + footer") {
+                    navigator.push({ DuoGridScreen() }, options: extendedOptions)
+                }
+                demoButton("Glass tab bar") {
+                    navigator.push({ DuoTabDemo(useShortcut: false) }, options: tabOptions)
+                }
+                demoButton("Glass tab bar + useShortcut") {
+                    navigator.push({ DuoTabDemo(useShortcut: true) }, options: tabOptions)
+                }
+                demoButton("Bottom sheet: iPhone Duo safe area") {
+                    navigator.showBottomSheet({ BottomSheetSafeArea() }, isSurface: true, header: .title("Safe area"))
+                }
+                demoButton("PopupNotify") {
+                    navigator.showModal {
+                        PopupNotify(props: PopupNotifyProps(
+                            image: "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png",
+                            title: "Title",
+                            description: String(repeating: "Check lại một nhịp auto chuyển sang dạng CTA. ", count: 8),
+                            primary: PopupAction(title: "Đồng ý", onPress: { navigator.hideOverplay() }),
+                            secondary: PopupAction(title: "Đóng", onPress: { navigator.hideOverplay() }),
+                            onIconClose: { navigator.hideOverplay() }
+                        ))
+                    }
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            DuoGrid()
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private var info: [(String, String)] {
+        let insets = layout.insets
+        return [
+            ("iPhone Duo", layout.isIPhoneDuo ? "yes" : "no"),
+            ("Window", "\(Int(layout.width)) x \(Int(layout.height))"),
+            ("Safe area (T R B L)", "\(Int(insets.top)) \(Int(insets.trailing)) \(Int(insets.bottom)) \(Int(insets.leading))"),
+            ("Content inset (L R)", "\(Int(layout.insetLeft)) \(Int(layout.insetRight))"),
+            ("Content width", "\(Int(layout.contentWidth))"),
+            ("Header height", "\(Int(layout.headerHeight))"),
+            ("Side bar", layout.sideBar.map { "\($0.edge == .left ? "left" : "right"), \(Int($0.width))pt, top \(Int($0.top))" } ?? "none"),
+        ]
+    }
+
+    private var extendedOptions: NavigationOptions {
+        NavigationOptions(
+            title: "Extended",
+            headerType: .extended,
+            headerRightData: HeaderRightData(useShortcut: true),
+            footer: { AnyView(MoMoUIKits.Button(title: "Footer action", action: {}, size: .large)) }
+        )
+    }
+
+    private var tabOptions: NavigationOptions {
+        NavigationOptions(title: "Duo tabs", headerType: .none, scrollable: false)
+    }
+
+    private func demoButton(_ title: String, action: @escaping () -> Void) -> some View {
+        MoMoUIKits.Button(title: title, action: action, type: .secondary, size: .small)
+    }
+}
+
+private struct DuoGridScreen: View {
+    var body: some View {
+        DuoGrid().padding(.vertical, Spacing.M)
+    }
+}
+
+private struct DuoGrid: View {
+    var body: some View {
+        VStack(spacing: Spacing.M) {
+            ForEach(scrollRows.indices, id: \.self) { row in
+                SectionView {
+                    ForEach(scrollRows[row].indices, id: \.self) { index in
+                        let span = scrollRows[row][index]
+                        ItemView(widthSpan: span) {
+                            MomoText("span \(span)", typography: .descriptionDefaultRegular)
+                                .frame(maxWidth: .infinity)
+                                .frame(height: 48)
+                                .background(Colors.black04)
+                                .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Markers on the content edges show the side safe area inside the sheet.
+private struct BottomSheetSafeArea: View {
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.XS) {
+            HStack {
+                marker("← content edge")
+                Spacer()
+                marker("content edge →")
+            }
+            .padding(.bottom, Spacing.S)
+            MomoText("Window: \(Int(layout.width)) × \(Int(layout.height))", typography: .bodyDefaultRegular)
+            MomoText(
+                "Insets: top \(Int(layout.insets.top)) · right \(Int(layout.insets.trailing)) · bottom \(Int(layout.insets.bottom)) · left \(Int(layout.insets.leading))",
+                typography: .bodyDefaultRegular
+            )
+            MomoText(
+                "On iPhone Duo: the outer display keeps a full-width sheet with content inside the side safe area; the inner display centers the sheet, still attached to the bottom edge. Other devices are unchanged.",
+                typography: .descriptionDefaultRegular,
+                color: Colors.black12
+            )
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private func marker(_ text: String) -> some View {
+        MomoText(text, typography: .labelSMedium, color: Colors.pink03)
+            .padding(.vertical, Spacing.XS)
+            .padding(.horizontal, Spacing.S)
+            .background(Colors.black04)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.5-debug",
+  "version": "0.167.1-duo.6",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/build.gradle.kts

@@ -1,11 +0,0 @@
-plugins {
-    // this is necessary to avoid the plugins to be loaded multiple times
-    // in each subproject's classloader
-    alias(libs.plugins.android.application) apply false
-    alias(libs.plugins.android.library) apply false
-    alias(libs.plugins.compose) apply false
-    alias(libs.plugins.kotlin.compose.compiler) apply false
-    alias(libs.plugins.jetbrains.kotlin.multiplatform) apply false
-    alias(libs.plugins.jetbrains.kotlin.serialization) apply false
-    alias(libs.plugins.vanniktech.mavenPublish) apply false
-}

package/compose/build.gradle.kts

@@ -1,190 +0,0 @@
-// import com.vanniktech.maven.publish.JavadocJar
-// import com.vanniktech.maven.publish.KotlinMultiplatform
-import org.jetbrains.kotlin.gradle.dsl.JvmTarget
-
-plugins {
-    alias(libs.plugins.jetbrains.kotlin.multiplatform)
-    alias(libs.plugins.android.library)
-    alias(libs.plugins.compose)
-    alias(libs.plugins.kotlin.compose.compiler)
-//         alias(libs.plugins.vanniktech.mavenPublish)
-    id(libs.plugins.jetbrains.kotlin.cocoapods.get().pluginId)
-    kotlin("plugin.serialization")
-}
-
-val gitlabName: String = findProperty("name") as String? ?: ""
-val gitlabRepo: String = findProperty("repo") as String? ?: ""
-val gitlabUrl: String = findProperty("url") as String? ?: ""
-val gitlabGroup: String = findProperty("group") as String? ?: ""
-val gitlabArtifactId: String = findProperty("artifact.id") as String? ?: ""
-val gitlabVersion: String = findProperty("version") as String? ?: ""
-val gitlabUser: String = findProperty("gitlab.user") as String? ?: ""
-val gitlabKey: String = findProperty("gitlab.password") as String? ?: ""
-
-kotlin {
-    androidTarget {
-        compilerOptions {
-            jvmTarget.set(JvmTarget.JVM_17)
-        }
-        publishLibraryVariants("release")
-    }
-
-    val fwName = gitlabArtifactId
-    val iosTargets = listOf(iosArm64(), iosSimulatorArm64())
-    iosTargets.forEach {
-        it.binaries.framework {
-            baseName = fwName
-            binaryOption("bundleId", "$gitlabGroup.$fwName")
-            isStatic = true
-        }
-    }
-
-    cocoapods {
-        version = "0.167.1-duo.5-debug"
-        summary = "IOS Shared module"
-        homepage = "https://momo.vn"
-        ios.deploymentTarget = "15.0"
-
-        framework {
-            baseName = fwName
-            isStatic = true
-        }
-
-        pod("lottie-ios") {
-            moduleName = "Lottie"
-            version = "4.4.3"
-            extraOpts += listOf("-compiler-option", "-fmodules")
-        }
-    }
-
-    sourceSets {
-        all {
-            languageSettings.optIn("vn.momo.kits.modifier.InternalApi")
-        }
-        commonMain.dependencies {
-            implementation(compose.runtime)
-            implementation(compose.material)
-            implementation(compose.material3)
-            implementation(compose.components.resources)
-            implementation(libs.compose.ui.backhandler)
-            implementation(libs.ktor.client.core)
-            implementation(libs.jetbrains.coroutines.core)
-            implementation(libs.navigation.multiplatform)
-            implementation(libs.coil.multiplatform.compose)
-            implementation(libs.coil.multiplatform.core)
-            implementation(libs.coil.multiplatform.network.ktor)
-            implementation(libs.jetbrains.serialization.json)
-            implementation(libs.kotlinx.datetime)
-            api(libs.native.max.api)
-            implementation(libs.compottie)
-            implementation(libs.gif.image)
-        }
-        androidMain.dependencies {
-            implementation(libs.ktor.client.okhttp)
-            implementation(libs.airbnb.lottie)
-        }
-        iosMain.dependencies {
-            implementation(libs.ktor.client.darwin)
-        }
-    }
-}
-
-android {
-    namespace = "vn.momo.kits.kits"
-    compileSdk = 35
-    compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_17
-    }
-    defaultConfig {
-        minSdk = 24
-    }
-}
-
-dependencies {
-}
-
-repositories {
-    google {
-        mavenContent {
-            includeGroupAndSubgroups("androidx")
-            includeGroupAndSubgroups("com.android")
-            includeGroupAndSubgroups("com.google")
-        }
-    }
-    mavenCentral()
-    maven { url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev") }
-    maven {
-        url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
-        credentials {username = "download_packages"; password = "gldt-bjDqLpU_sPcHDuXau2ws" }
-    }
-    maven {
-        url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
-        credentials {
-            username = "viewer"
-            password = "viewer"
-        }
-        isAllowInsecureProtocol = true
-    }
-}
-
-compose {
-    resources {
-        publicResClass = true
-        packageOfResClass = "vn.momo.uikits.resources"
-        generateResClass = always
-    }
-}
-
-// publishing {
-//     repositories {
-//         maven {
-//             name = "${gitlabRepo}Packages"
-//             credentials {
-//                 username = gitlabUser
-//                 password = gitlabKey
-//             }
-//             url = uri("$gitlabUrl")
-//         }
-//     }
-// }
-
-// mavenPublishing {
-//     configure(
-//         KotlinMultiplatform(
-//             javadocJar = JavadocJar.Empty(),
-//             sourcesJar = true,
-//             androidVariantsToPublish = listOf("release")
-//         )
-//     )
-// 
-//     repositories {
-//         maven {
-//             name = "${gitlabRepo}Packages"
-//             credentials { username = gitlabUser; password = gitlabKey }
-//             url = uri("$gitlabUrl")
-//         }
-//     }
-// 
-//     coordinates(gitlabGroup.toString(), gitlabArtifactId, gitlabVersion.toString())
-// 
-//     pom {
-//         name = "$gitlabName Klib"
-//         description = "$gitlabName"
-//         url = "https://gitlab.mservice.com.vn"
-//         licenses {
-//             license {
-//                 name = "The Apache License, Version 2.0"
-//                 url = "https://www.apache.org/licenses/LICENSE-2.0.txt"
-//                 distribution = "https://www.apache.org/licenses/LICENSE-2.0.txt"
-//             }
-//         }
-//         developers {
-//             developer {
-//                 id = "kotlin-hands-on"
-//                 name = "Kotlin Developer Advocate"
-//                 url = "https://github.com/kotlin-hands-on/"
-//             }
-//         }
-//     }
-// }

package/compose/build.gradle.kts.backup

@@ -1,190 +0,0 @@
-import com.vanniktech.maven.publish.JavadocJar
-import com.vanniktech.maven.publish.KotlinMultiplatform
-import org.jetbrains.kotlin.gradle.dsl.JvmTarget
-
-plugins {
-    alias(libs.plugins.jetbrains.kotlin.multiplatform)
-    alias(libs.plugins.android.library)
-    alias(libs.plugins.compose)
-    alias(libs.plugins.kotlin.compose.compiler)
-    alias(libs.plugins.vanniktech.mavenPublish)
-    id(libs.plugins.jetbrains.kotlin.cocoapods.get().pluginId)
-    kotlin("plugin.serialization")
-}
-
-val gitlabName: String = findProperty("name") as String? ?: ""
-val gitlabRepo: String = findProperty("repo") as String? ?: ""
-val gitlabUrl: String = findProperty("url") as String? ?: ""
-val gitlabGroup: String = findProperty("group") as String? ?: ""
-val gitlabArtifactId: String = findProperty("artifact.id") as String? ?: ""
-val gitlabVersion: String = findProperty("version") as String? ?: ""
-val gitlabUser: String = findProperty("gitlab.user") as String? ?: ""
-val gitlabKey: String = findProperty("gitlab.password") as String? ?: ""
-
-kotlin {
-    androidTarget {
-        compilerOptions {
-            jvmTarget.set(JvmTarget.JVM_17)
-        }
-        publishLibraryVariants("release")
-    }
-
-    val fwName = gitlabArtifactId
-    val iosTargets = listOf(iosArm64(), iosSimulatorArm64())
-    iosTargets.forEach {
-        it.binaries.framework {
-            baseName = fwName
-            binaryOption("bundleId", "$gitlabGroup.$fwName")
-            isStatic = true
-        }
-    }
-
-    cocoapods {
-        version = gitlabVersion
-        summary = "IOS Shared module"
-        homepage = "https://momo.vn"
-        ios.deploymentTarget = "15.0"
-
-        framework {
-            baseName = fwName
-            isStatic = true
-        }
-
-        pod("lottie-ios") {
-            moduleName = "Lottie"
-            version = "4.4.3"
-            extraOpts += listOf("-compiler-option", "-fmodules")
-        }
-    }
-
-    sourceSets {
-        all {
-            languageSettings.optIn("vn.momo.kits.modifier.InternalApi")
-        }
-        commonMain.dependencies {
-            implementation(compose.runtime)
-            implementation(compose.material)
-            implementation(compose.material3)
-            implementation(compose.components.resources)
-            implementation(libs.compose.ui.backhandler)
-            implementation(libs.ktor.client.core)
-            implementation(libs.jetbrains.coroutines.core)
-            implementation(libs.navigation.multiplatform)
-            implementation(libs.coil.multiplatform.compose)
-            implementation(libs.coil.multiplatform.core)
-            implementation(libs.coil.multiplatform.network.ktor)
-            implementation(libs.jetbrains.serialization.json)
-            implementation(libs.kotlinx.datetime)
-            api(libs.native.max.api)
-            implementation(libs.compottie)
-            implementation(libs.gif.image)
-        }
-        androidMain.dependencies {
-            implementation(libs.ktor.client.okhttp)
-            implementation(libs.airbnb.lottie)
-        }
-        iosMain.dependencies {
-            implementation(libs.ktor.client.darwin)
-        }
-    }
-}
-
-android {
-    namespace = "$gitlabGroup.$gitlabArtifactId"
-    compileSdk = libs.versions.android.compileSdk.get().toInt()
-    compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_17
-        targetCompatibility = JavaVersion.VERSION_17
-    }
-    defaultConfig {
-        minSdk = libs.versions.android.minSdk.get().toInt()
-    }
-}
-
-dependencies {
-}
-
-repositories {
-    google {
-        mavenContent {
-            includeGroupAndSubgroups("androidx")
-            includeGroupAndSubgroups("com.android")
-            includeGroupAndSubgroups("com.google")
-        }
-    }
-    mavenCentral()
-    maven { url = uri("https://maven.pkg.jetbrains.space/public/p/compose/dev") }
-    maven {
-        url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven")
-        credentials {username = "download_packages"; password = "gldt-bjDqLpU_sPcHDuXau2ws" }
-    }
-    maven {
-        url = uri("https://artifacts.mservice.com.vn/repository/maven-momo-app/")
-        credentials {
-            username = "viewer"
-            password = "viewer"
-        }
-        isAllowInsecureProtocol = true
-    }
-}
-
-compose {
-    resources {
-        publicResClass = true
-        packageOfResClass = "vn.momo.uikits.resources"
-        generateResClass = always
-    }
-}
-
-publishing {
-    repositories {
-        maven {
-            name = "${gitlabRepo}Packages"
-            credentials {
-                username = gitlabUser
-                password = gitlabKey
-            }
-            url = uri("$gitlabUrl")
-        }
-    }
-}
-
-mavenPublishing {
-    configure(
-        KotlinMultiplatform(
-            javadocJar = JavadocJar.Empty(),
-            sourcesJar = true,
-            androidVariantsToPublish = listOf("release")
-        )
-    )
-
-    repositories {
-        maven {
-            name = "${gitlabRepo}Packages"
-            credentials { username = gitlabUser; password = gitlabKey }
-            url = uri("$gitlabUrl")
-        }
-    }
-
-    coordinates(gitlabGroup.toString(), gitlabArtifactId, gitlabVersion.toString())
-
-    pom {
-        name = "$gitlabName Klib"
-        description = "$gitlabName"
-        url = "https://gitlab.mservice.com.vn"
-        licenses {
-            license {
-                name = "The Apache License, Version 2.0"
-                url = "https://www.apache.org/licenses/LICENSE-2.0.txt"
-                distribution = "https://www.apache.org/licenses/LICENSE-2.0.txt"
-            }
-        }
-        developers {
-            developer {
-                id = "kotlin-hands-on"
-                name = "Kotlin Developer Advocate"
-                url = "https://github.com/kotlin-hands-on/"
-            }
-        }
-    }
-}