@momo-kits/native-kits 0.157.1-skill.1 → 0.157.1-skill.3-debug

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-2-bottomtab/with_skill/outputs/BottomTabExample.kt

@@ -0,0 +1,236 @@
+package com.example.momoapp
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.navigation.BottomTab
+import vn.momo.kits.navigation.BottomTabItem
+import vn.momo.kits.navigation.NavigationOptions
+import vn.momo.kits.navigation.StackScreen
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.components.Title
+import vn.momo.kits.components.TitleType
+import vn.momo.kits.navigation.component.Header
+
+/**
+ * MoMo App Bottom Tab Navigation Example
+ *
+ * This example demonstrates how to implement a bottom tab navigation
+ * with 4 tabs: Home, Wallet, History, Profile
+ */
+@Composable
+fun MoMoApp() {
+    BottomTab(
+        items = listOf(
+            // Home Tab
+            BottomTabItem(
+                name = "home",
+                label = "Trang chủ",
+                icon = "ic_home",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        HomeScreen()
+                    }
+                }
+            ),
+
+            // Wallet Tab
+            BottomTabItem(
+                name = "wallet",
+                label = "Ví của tôi",
+                icon = "ic_wallet",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        WalletScreen()
+                    }
+                }
+            ),
+
+            // History Tab
+            BottomTabItem(
+                name = "history",
+                label = "Lịch sử",
+                icon = "ic_history",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        HistoryScreen()
+                    }
+                }
+            ),
+
+            // Profile Tab
+            BottomTabItem(
+                name = "profile",
+                label = "Tài khoản",
+                icon = "ic_profile",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        ProfileScreen()
+                    }
+                }
+            )
+        )
+    )
+}
+
+// ==================== Screen Composables ====================
+
+@Composable
+private fun HomeScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Title(
+            text = "Trang chủ",
+            type = TitleType.TITLE_1
+        )
+    }
+}
+
+@Composable
+private fun WalletScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Title(
+            text = "Ví của tôi",
+            type = TitleType.TITLE_1
+        )
+    }
+}
+
+@Composable
+private fun HistoryScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Title(
+            text = "Lịch sử giao dịch",
+            type = TitleType.TITLE_1
+        )
+    }
+}
+
+@Composable
+private fun ProfileScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Title(
+            text = "Tài khoản",
+            type = TitleType.TITLE_1
+        )
+    }
+}
+
+// ==================== Alternative: With Badge Example ====================
+
+/**
+ * Example showing how to add badges/dots to tabs
+ */
+@Composable
+fun MoMoAppWithBadges() {
+    BottomTab(
+        items = listOf(
+            BottomTabItem(
+                name = "home",
+                label = "Trang chủ",
+                icon = "ic_home",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        HomeScreen()
+                    }
+                }
+            ),
+            BottomTabItem(
+                name = "wallet",
+                label = "Ví của tôi",
+                icon = "ic_wallet",
+                showDot = true,  // Shows notification dot
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        WalletScreen()
+                    }
+                }
+            ),
+            BottomTabItem(
+                name = "history",
+                label = "Lịch sử",
+                icon = "ic_history",
+                badgeLabel = "3",  // Shows badge with number
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        HistoryScreen()
+                    }
+                }
+            ),
+            BottomTabItem(
+                name = "profile",
+                label = "Tài khoản",
+                icon = "ic_profile",
+                screen = {
+                    StackScreen(
+                        navigationOptions = NavigationOptions(
+                            headerType = HeaderType.DEFAULT,
+                            isShowBottomTab = true
+                        )
+                    ) {
+                        ProfileScreen()
+                    }
+                }
+            )
+        )
+    )
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-2-bottomtab/without_skill/outputs/BottomTabExample.kt

@@ -0,0 +1,152 @@
+package com.momo.app.ui.navigation
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Receipt
+import androidx.compose.material.icons.filled.Wallet
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Person
+import androidx.compose.material.icons.outlined.Receipt
+import androidx.compose.material.icons.outlined.Wallet
+import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.navigation.NavDestination.Companion.hierarchy
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+
+/**
+ * Bottom Tab Navigation with 4 tabs: Home, Wallet, History, Profile
+ * Designed for MoMo app
+ */
+sealed class BottomNavItem(
+    val route: String,
+    val title: String,
+    val selectedIcon: ImageVector,
+    val unselectedIcon: ImageVector
+) {
+    data object Home : BottomNavItem(
+        route = "home",
+        title = "Home",
+        selectedIcon = Icons.Filled.Home,
+        unselectedIcon = Icons.Outlined.Home
+    )
+
+    data object Wallet : BottomNavItem(
+        route = "wallet",
+        title = "Wallet",
+        selectedIcon = Icons.Filled.Wallet,
+        unselectedIcon = Icons.Outlined.Wallet
+    )
+
+    data object History : BottomNavItem(
+        route = "history",
+        title = "History",
+        selectedIcon = Icons.Filled.Receipt,
+        unselectedIcon = Icons.Outlined.Receipt
+    )
+
+    data object Profile : BottomNavItem(
+        route = "profile",
+        title = "Profile",
+        selectedIcon = Icons.Filled.Person,
+        unselectedIcon = Icons.Outlined.Person
+    )
+}
+
+@Composable
+fun BottomTabNavigation() {
+    val navController = rememberNavController()
+    val navBackStackEntry by navController.currentBackStackEntryAsState()
+    val currentDestination = navBackStackEntry?.destination
+
+    val bottomNavItems = listOf(
+        BottomNavItem.Home,
+        BottomNavItem.Wallet,
+        BottomNavItem.History,
+        BottomNavItem.Profile
+    )
+
+    Scaffold(
+        bottomBar = {
+            NavigationBar {
+                bottomNavItems.forEach { item ->
+                    val selected = currentDestination?.hierarchy?.any { it.route == item.route } == true
+
+                    NavigationBarItem(
+                        selected = selected,
+                        onClick = {
+                            navController.navigate(item.route) {
+                                popUpTo(navController.graph.findStartDestination().id) {
+                                    saveState = true
+                                }
+                                launchSingleTop = true
+                                restoreState = true
+                            }
+                        },
+                        icon = {
+                            Icon(
+                                imageVector = if (selected) item.selectedIcon else item.unselectedIcon,
+                                contentDescription = item.title
+                            )
+                        },
+                        label = {
+                            Text(text = item.title)
+                        }
+                    )
+                }
+            }
+        }
+    ) { paddingValues ->
+        NavHost(
+            navController = navController,
+            startDestination = BottomNavItem.Home.route,
+            modifier = Modifier.padding(paddingValues)
+        ) {
+            composable(BottomNavItem.Home.route) {
+                HomeScreen()
+            }
+            composable(BottomNavItem.Wallet.route) {
+                WalletScreen()
+            }
+            composable(BottomNavItem.History.route) {
+                HistoryScreen()
+            }
+            composable(BottomNavItem.Profile.route) {
+                ProfileScreen()
+            }
+        }
+    }
+}
+
+// Placeholder screens for each tab
+@Composable
+private fun HomeScreen() {
+    Text(text = "Home Screen")
+}
+
+@Composable
+private fun WalletScreen() {
+    Text(text = "Wallet Screen")
+}
+
+@Composable
+private fun HistoryScreen() {
+    Text(text = "History Screen")
+}
+
+@Composable
+private fun ProfileScreen() {
+    Text(text = "Profile Screen")
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-3-checkbox/eval_metadata.json

@@ -0,0 +1,6 @@
+{
+  "eval_id": 3,
+  "eval_name": "checkbox-terms",
+  "prompt": "Create a checkbox component for terms and conditions agreement",
+  "assertions": []
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-3-checkbox/with_skill/outputs/CheckBoxExample.kt

@@ -0,0 +1,49 @@
+package com.example
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Button
+import vn.momo.kits.components.ButtonType
+import vn.momo.kits.components.CheckBox
+import vn.momo.kits.components.Size
+import vn.momo.kits.const.Spacing
+
+@Composable
+fun TermsAndConditionsScreen() {
+    var isAgreed by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier.padding(Spacing.L)
+    ) {
+        // Checkbox for terms and conditions agreement
+        CheckBox(
+            checked = isAgreed,
+            onCheckedChange = { isAgreed = it },
+            label = "Tôi đồng ý với Điều khoản dịch vụ và Chính sách bảo mật",
+            enabled = true
+        )
+
+        Spacer(modifier = Modifier.height(Spacing.XL))
+
+        // Submit button that is enabled only when checkbox is checked
+        Button(
+            onClick = {
+                // Handle terms acceptance submission
+                // Navigate to next screen or process registration
+            },
+            title = "Tiếp tục",
+            type = ButtonType.PRIMARY,
+            size = Size.LARGE,
+            isFull = true,
+            enabled = isAgreed
+        )
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-3-checkbox/without_skill/outputs/CheckBoxExample.kt

@@ -0,0 +1,123 @@
+package com.example.checkbox
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Button
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TermsAndConditionsCheckbox(
+    onTermsAccepted: (Boolean) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    var isChecked by remember { mutableStateOf(false) }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Checkbox(
+            checked = isChecked,
+            onCheckedChange = { newValue ->
+                isChecked = newValue
+                onTermsAccepted(newValue)
+            }
+        )
+
+        Spacer(modifier = Modifier.width(8.dp))
+
+        Column(modifier = Modifier.weight(1f)) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text(
+                    text = "I agree to the",
+                    style = MaterialTheme.typography.bodyMedium
+                )
+                TextButton(onClick = { /* Open terms */ }) {
+                    Text(
+                        text = "Terms and Conditions",
+                        style = MaterialTheme.typography.bodyMedium,
+                        textDecoration = TextDecoration.Underline,
+                        color = MaterialTheme.colorScheme.primary
+                    )
+                }
+            }
+
+            Text(
+                text = "and",
+                style = MaterialTheme.typography.bodyMedium
+            )
+
+            TextButton(onClick = { /* Open privacy policy */ }) {
+                Text(
+                    text = "Privacy Policy",
+                    style = MaterialTheme.typography.bodyMedium,
+                    textDecoration = TextDecoration.Underline,
+                    color = MaterialTheme.colorScheme.primary
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun CheckBoxExample(
+    modifier: Modifier = Modifier
+) {
+    var termsAccepted by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = "Create Account",
+            style = MaterialTheme.typography.headlineMedium,
+            modifier = Modifier.padding(bottom = 24.dp)
+        )
+
+        TermsAndConditionsCheckbox(
+            onTermsAccepted = { accepted ->
+                termsAccepted = accepted
+            }
+        )
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        Button(
+            onClick = { /* Handle signup */ },
+            enabled = termsAccepted,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = "Sign Up")
+        }
+
+        if (!termsAccepted) {
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = "Please accept the terms and conditions to continue",
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.error
+            )
+        }
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-4-datetimepicker/eval_metadata.json

@@ -0,0 +1,6 @@
+{
+  "eval_id": 4,
+  "eval_name": "datetimepicker",
+  "prompt": "Show me how to use the DateTimePicker component for date selection",
+  "assertions": []
+}