ComposeKit là bộ UI Kit đa nền tảng phục vụ Mini App/SDK của MoMo. Toàn bộ giao diện, điều hướng, token thiết kế và layer tích hợp với MaxAPI đều được viết bằng Kotlin Multiplatform để tái sử dụng cho Android, iOS (qua Compose Multiplatform) cũng như các
npm install @momo-kits/native-kitsComposeKit là bộ UI Kit đa nền tảng phục vụ Mini App/SDK của MoMo. Toàn bộ giao diện, điều hướng, token thiết kế và layer tích hợp với MaxAPI đều được viết bằng Kotlin Multiplatform để tái sử dụng cho Android, iOS (qua Compose Multiplatform) cũng như các host native.
vn.momo.compose.kit.const.NavigationContainer, Navigator, bottom tabs, modal/bottom sheet) hỗ trợ dynamic screen registry và MaxAPI dismiss/present.MiniAppContext, KitConfig, ApplicationContext, AppLanguage) để tự động render Trust Banner, header assets, tracking.nativeSDK/ios) nhằm cover các màn đang viết Swift/Objective‑C.---
shared/: module KMP chính. Chứa toàn bộ source vn.momo.compose.kit.*, compose resources (font SF Pro), logic publish Maven và podspec.composeApp/: sample Compose Multiplatform Android dùng để thử nhanh component, navigator, trust banner.iosApp/: project SwiftUI + CocoaPods để test framework iOS sinh ra từ shared.nativeSDK/ios/: Swift package + podspec MoMoUIKits (phụ thuộc SDWebImageSwiftUI, SkeletonUI) cho các màn hoàn toàn native.publish_release.sh, .gitlab-ci.yml: script tự bump patch version, chạy :compose:publish... khi commit có [ci build].build-output/, build/: output tạm thời (không commit).---
Design tokens & theming
- const/Colors.kt, Radius.kt, Spacing.kt, Typography.kt định nghĩa token thống nhất.
- const/Theme.kt cung cấp Theme, ColorScheme, AppTheme, AppThemeController. Có sẵn defaultTheme & darkTheme, hỗ trợ inject assets (vd. header background từ KitConfig).
Layout primitives & modifier
- layout/Card.kt, Section.kt, Item.kt chứa khung section theo guideline Super App.
- modifier/AutomationId, Conditional, Shadow, Size giúp thêm accessibility id, điều kiện hoá modifier, shadow blur tuỳ nền.
UI components
- Buttons (Button.kt, IconButton.kt), typography helper (Text.kt, Title.kt), badge/tag (Badge*, Tag.kt), chip & switch (Chip.kt, Switch.kt), checkbox/radio.
- Input stack: Input* (OTP, PhoneNumber, Money, Search, DropDown, TextArea) với keyboard helpers.
- Pagination indicator (PaginationDot/Number/Scroll/WhiteDot.kt), skeleton loading (Skeleton.kt), trust UI (TrustBanner.kt).
- Popup/notify (PopupNotify, PopupPromotion), floating button, LazyColumnWithBouncing, Cupertino overscroll, DateTimePicker (Wheel UI + utils).
- Lottie animation (components/animation/LottieAnimation) dựng trên Compottie để chạy animation JSON đồng nhất trên Android/iOS/Desktop.
Navigation & application layer
- navigation/NavigationContainer, Navigation.kt, Navigator.kt, StackScreen.kt, BottomSheet.kt, bottom tab helpers.
- Navigator hỗ trợ push, replace, present, reset, pop(count), showModal, showBottomSheet với overlay registry (OverplayComponentRegistry).
- application/NavigationContainer.kt, MiniAppContext, KitConfig, ApplicationContext, AppConfig, AppLanguage cung cấp context cho header/trust banner, mapping sang map để gửi qua MaxAPI.
- application/Screen.kt, Header*, Footer, FloatingButton tạo template screen (đang deprecate, khuyến nghị dùng NavigationContainer + StackScreen).
Platform utilities
- platform/Platform.kt định nghĩa expect/actual cho getPlatformName, BackHandler, getScreenHeight, NativePaint mask filter. Android actual đi kèm getAndroidBuildVersion.
- utils/Icons.kt, Resources.kt, getAppStatusBarHeight() giúp truy xuất resource Compose đa nền tảng.
Native bridge
- shared/shared.podspec và nativeSDK/ios/MoMoUIKits.podspec cho phép embed vào iOS app via CocoaPods (deployment target 15.0, Swift 5). Phần native duy trì các SwiftUI component tương đương Compose (Button, Input, Popup, Trust Banner, Badge...).
---
libs.versions.toml).iosApp hoặc publish Pod.https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven.---
| Tác vụ | Lệnh |
| --- | --- |
| Build thư viện KMP (AAR + klib + framework) | ./gradlew :compose:assembleRelease |
| Publish local maven (nếu cần thử) | ./gradlew :compose:publishAllPublicationsToMavenLocal |
| Sample Android | ./gradlew :composeApp:assembleDebug |
| Sample iOS | mở iosApp/iosApp.xcworkspace rồi build trên Xcode |
Output Compose nằm trong shared/build/outputs và shared/build/publications/*. Debug fonts/resources ở shared/src/commonMain/composeResources.
---
gradle.properties nếu thay đổi group/artifact/version. Mặc định:
name=ComposeKit
group=vn.momo.kits
artifact.id=kits
version=0.1.2
url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven
gitlab.user=upload_packages
gitlab.password=
2. Chạy . Script sẽ:
- Đọc version hiện tại, query các version đã publish qua GitLab API.
- Bump patch (X.Y.Z+1) đến khi không trùng.
- Ghi lại gradle.properties, export VERSION, chạy ./gradlew clean + :compose:publishAllPublicationsToGitLabPackagesRepository.
3. CI (.gitlab-ci.yml) tự động thực thi script này khi push với commit message chứa [ci build] (trừ khi branch khớp engine/w*).---
$3
Thêm dependency
`kotlin
repositories {
maven { url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven") }
}commonMain.dependencies {
implementation("vn.momo.kits:kits:")
}
`Khởi tạo navigation container
kotlin
val miniAppContext = MiniAppContext(appId = "...", appCode = "...", appIcon = "...", toolkitConfig = ...)NavigationContainer(
initialScreen = { StackScreenExample() },
options = NavigationOptions(headerTitle = HeaderTitle.Default("Home")),
applicationContext = miniAppContext,
config = KitConfig(trustBanner = defaultBanner),
maxApi = maxApi, // IMaxApi implementation từ host
setNavigator = { navigator = it }
)
`Bên trong screen, truy cập
để:
`kotlin
val navigator = LocalNavigator.current
navigator.push { DetailScreen() }
navigator.showBottomSheet(content = { BottomSheetContent() })
`Tuỳ biến theme bằng
:
`kotlin
val themeController = AppThemeController.current
themeController(defaultTheme.copy(colors = defaultTheme.colors.copy(primary = Colors.pink_04)))
`, AppConfig.current, AppLanguage.current giúp component (ví dụ TrustBanner) tự lấy dữ liệu trust banner và tracking service_component_clicked.---
$3
- shared/shared.podspec sinh framework Compose (static) mang tên theo artifact.id (kits). Add vào Podfile:
`ruby
pod 'kits', :path => '../shared'
`
- Với màn SwiftUI thuần native, dùng :
`ruby
pod 'MoMoUIKits', :path => 'nativeSDK/ios'
`
Bộ này mirror hầu hết component Compose (Button, Input, Popup, TrustBanner...). chấp nhận MiniAppContext, KitConfig tương tự Kotlin.---
$3
- Screen composable cũ được đánh dấu @Deprecated; sử dụng NavigationContainer + StackScreen để hưởng lợi dynamic route và animation.
- DesignSystemWhiteList trong application/ApplicationContainer.kt hỗ trợ fallback cho host cũ; đừng kích hoạt nếu không cần.
- Khi thêm tài nguyên mới, đặt trong shared/src/commonMain/composeResources để Compose Multiplatform plugin sinh accessor tự động.
- Repo không bundle SDK bên thứ ba ngoại trừ vn.momo.corex.maxapi, Compose/Coil/Ktor và Compottie cho animation.---
$3
`kotlin
import io.github.alexzhirkevich.compottie.LottieCompositionSpec
import vn.momo.kits.components.animation.LottieAnimation@Composable
fun SuccessState() {
LottieAnimation(
spec = LottieCompositionSpec.Url(
"https://assets10.lottiefiles.com/packages/lf20_jcikwtux.json"
)
)
}
`-
đã bật coreLibraryDesugaringEnabled để tương thích compottie-dot/compottie-network với minSdk = 24.
- Nếu animation dùng asset/font nội bộ, kết hợp compottie-resources (rememberResourcesAssetsManager, rememberResourcesFontManager) để trỏ về composeResources`.