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

package/.claude/momo-native-kits-skill/SKILL.md

@@ -0,0 +1,51 @@
+---
+name: momo-native-kits-skills
+description: |
+  MoMo Native Kits UI Component Rendering - Generate correct, production-ready Kotlin/Compose code for MoMo UI Kit components.
+
+  Use when:
+  - User says "tạo button", "tạo nút bấm", "button component", "primary button"
+  - User says "tạo input", "tạo ô nhập liệu", "text field", "form input", "nhập số điện thoại"
+  - User says "tạo search", "ô tìm kiếm", "input search", "tìm kiếm"
+  - User says "tạo checkbox", "ô tick", "checkbox"
+  - User says "tạo radio", "nút chọn", "radio button"
+  - User says "tạo switch", "nút gạt", "toggle", "bật/tắt"
+  - User says "tạo chip", "chip", "label"
+  - User says "tạo card", "thẻ", "khung"
+  - User says "tạo divider", "đường kẻ", "phân cách", "line"
+  - User says "tạo skeleton", "loading view"
+  - User says "tạo badge", "thông báo", "nhãn", "nhãn hiệu"
+  - User says "tạo popup", "thông báo", "alert", "xác nhận"
+  - User says "tạo snackbar", "toast", "thông báo ngắn", "message"
+  - User says "tạo tooltip", "gợi ý", "help", "hướng dẫn"
+  - User says "tạo trustbanner", "bảo mật", "trust"
+  - User says "tạo navigation", "điều hướng", "Bottom Tab", "BottomNavigation", "tab bar"
+  - User says "NavigationContainer", "setOptions", "navigator.push", "pop", "present"
+  - User says "Header", "tiêu đề", "app bar", "header type"
+  - User says "Text", "Title", "typography", "font", "chữ"
+  - User says "màu sắc", "colors", "Spacing", "Radius", "theme"
+---
+
+# MoMo Native Kits UI Components
+
+## Reference Files
+
+| File | Description |
+|------|-------------|
+| [button.md](references/button.md) | Button - nút bấm |
+| [input.md](references/input.md) | Input - các loại input |
+| [text.md](references/text.md) | Text, Title, Typography |
+| [checkbox.md](references/checkbox.md) | CheckBox - ô tick |
+| [radio.md](references/radio.md) | Radio - nút chọn |
+| [switch.md](references/switch.md) | Switch - nút gạt |
+| [chip.md](references/chip.md) | Chip - tag, label |
+| [card.md](references/card.md) | Card - thẻ, khung |
+| [divider.md](references/divider.md) | Divider - đường kẻ |
+| [skeleton.md](references/skeleton.md) | Skeleton - loading |
+| [badge.md](references/badge.md) | Badge, BadgeDot |
+| [trustbanner.md](references/trustbanner.md) | TrustBanner, Information |
+| [popup.md](references/popup.md) | PopupNotify, PopupPromotion |
+| [snackbar.md](references/snackbar.md) | SnackBar |
+| [tooltip.md](references/tooltip.md) | Tooltip |
+| [navigation.md](references/navigation.md) | Navigation, BottomTab, Header |
+| [constants.md](references/constants.md) | Colors, Radius, Spacing, Typography |

package/.claude/momo-native-kits-skill/evals/evals.json

@@ -0,0 +1,95 @@
+{
+  "skill_name": "momo-native-kits-skills",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Show me how to create a primary button with text 'Đăng nhập' in MoMo Native Kits",
+      "expected_output": "Kotlin code for Button component with ButtonType.PRIMARY, title='Đăng nhập', proper imports from vn.momo.kits.components",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "I need an input field for phone number with label 'Số điện thoại' and placeholder 'Nhập số điện thoại'",
+      "expected_output": "Kotlin code for Input component with label, placeholder, and keyboard type for phone",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "How do I implement a bottom tab navigation with 4 tabs: Home, Wallet, History, Profile in MoMo app?",
+      "expected_output": "Kotlin code for BottomTab with BottomTabItem list, proper navigation setup",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "Create a checkbox component for terms and conditions agreement",
+      "expected_output": "Kotlin code for CheckBox with label 'Tôi đồng ý với điều khoản'",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "Show me how to use the DateTimePicker component for date selection",
+      "expected_output": "Kotlin code for DateTimePicker with selectedDate, onDateSelected parameters",
+      "files": []
+    },
+    {
+      "id": 6,
+      "prompt": "I need a search input field like the one in MoMo app",
+      "expected_output": "Kotlin code for InputSearch component with placeholder 'Tìm kiếm...'",
+      "files": []
+    },
+    {
+      "id": 7,
+      "prompt": "How to create a modal screen in MoMo Native Kits?",
+      "expected_output": "Kotlin code for ModalScreen with onDismiss handler",
+      "files": []
+    },
+    {
+      "id": 8,
+      "prompt": "Create a switch component for toggling dark mode",
+      "expected_output": "Kotlin code for Switch component with checked state and onCheckedChange callback",
+      "files": []
+    },
+    {
+      "id": 9,
+      "prompt": "How to use setOptions in MoMo navigation? Show me how to change header title dynamically",
+      "expected_output": "Kotlin code showing setOptions in LaunchedEffect(Unit) with LocalNavigation.current",
+      "files": []
+    },
+    {
+      "id": 10,
+      "prompt": "Create a login form with phone input and password input in MoMo Native Kits",
+      "expected_output": "Kotlin code with InputPhoneNumber, Input (password), and Button components",
+      "files": []
+    },
+    {
+      "id": 11,
+      "prompt": "How to implement NavigationContainer in MoMo app? Show me the correct pattern",
+      "expected_output": "Kotlin code with single NavigationContainer, initialScreen, and NavigationOptions",
+      "files": []
+    },
+    {
+      "id": 12,
+      "prompt": "Create a card component to display a list item with image and title",
+      "expected_output": "Kotlin code for Card with Image and Title inside",
+      "files": []
+    },
+    {
+      "id": 13,
+      "prompt": "Show me how to use Navigator to push and pop screens in MoMo",
+      "expected_output": "Kotlin code showing navigator.push(), navigator.pop(), navigator.present()",
+      "files": []
+    },
+    {
+      "id": 14,
+      "prompt": "Create a loading skeleton for a card component",
+      "expected_output": "Kotlin code with Skeleton components showing loading state",
+      "files": []
+    },
+    {
+      "id": 15,
+      "prompt": "How to show a popup notification for success message in MoMo?",
+      "expected_output": "Kotlin code with PopupNotify and PopupNotifyProps",
+      "files": []
+    }
+  ]
+}

package/.claude/momo-native-kits-skill/references/badge.md

@@ -0,0 +1,52 @@
+# Badge
+
+**File:** `vn.momo/kits/components/Badge.kt`
+
+## Badge Parameters
+
+```kotlin
+@Composable
+fun Badge(
+    text: String,                    // Badge text
+    modifier: Modifier = Modifier,
+    type: BadgeType = BadgeType.RED
+)
+
+enum class BadgeType {
+    RED,    // Error/new
+    GREEN,  // Success
+    YELLOW, // Warning
+    BLUE,   // Info
+    GRAY    // Neutral
+}
+```
+
+## BadgeDot Parameters
+
+**File:** `vn.momo/kits/components/BadgeDot.kt`
+
+```kotlin
+@Composable
+fun BadgeDot(
+    modifier: Modifier = Modifier,
+    color: Color = Colors.red_02
+)
+```
+
+## Badge Usage
+
+```kotlin
+Row(verticalAlignment = Alignment.CenterVertically) {
+    Text(text = "New Feature")
+    Badge(text = "NEW", type = BadgeType.RED)
+}
+```
+
+## BadgeDot Usage
+
+```kotlin
+Row {
+    Icon(source = "ic_notification")
+    BadgeDot(color = Colors.red_02)
+}
+```

package/.claude/momo-native-kits-skill/references/button.md

@@ -0,0 +1,182 @@
+# Button Component
+
+## Overview
+
+The Button component is a core UI element in MoMo Native Kits for triggering actions. It supports multiple types, sizes, and states.
+
+**Package:** `vn.momo.kits.components`
+
+## Button Types
+
+| Type | Description | Use Case |
+|------|-------------|----------|
+| `PRIMARY` | Primary action button with filled background | Main CTA buttons |
+| `SECONDARY` | Secondary action with border | Secondary actions |
+| `TONAL` | Tonal background | Alternative primary actions |
+| `OUTLINE` | Outline style | Tertiary actions |
+| `DANGER` | Error/danger action | Destructive actions |
+| `TEXT` | Text-only button | Subtle actions |
+| `DISABLED` | Disabled state | Unavailable actions |
+
+## Button Sizes
+
+| Size | Height | Radius | Padding | Width |
+|------|--------|--------|---------|-------|
+| `LARGE` | 48.dp | 4.dp | 16.dp | 128.dp |
+| `MEDIUM` | 36.dp | 4.dp | 12.dp | 80.dp |
+| `SMALL` | 28.dp | 4.dp | 8.dp | 60.dp |
+
+## Parameters
+
+```kotlin
+@Composable
+fun Button(
+    onClick: () -> Unit,              // Required: Click handler
+    type: ButtonType = ButtonType.PRIMARY,
+    size: Size = Size.LARGE,
+    title: String = "Button",         // Button text
+    iconLeft: String = "",            // Left icon (icon name or URL)
+    iconRight: String = "",           // Right icon (icon name or URL)
+    loading: Boolean = false,        // Show loading spinner
+    useTintColor: Boolean = true,    // Apply tint color to icons
+    isFull: Boolean = true,           // Full width button
+    modifier: Modifier = Modifier
+)
+```
+
+## Usage Examples
+
+### Basic Primary Button
+
+```kotlin
+import vn.momo.kits.components.Button
+import vn.momo.kits.components.ButtonType
+import vn.momo.kits.components.Size
+
+Button(
+    onClick = { /* Handle click */ },
+    title = "Đăng nhập",
+    type = ButtonType.PRIMARY,
+    size = Size.LARGE
+)
+```
+
+### Button with Icon
+
+```kotlin
+Button(
+    onClick = { /* Handle click */ },
+    title = "Tiếp tục",
+    iconRight = "arrow_right",  // Icon name from MoMo icon system
+    type = ButtonType.PRIMARY,
+    size = Size.LARGE
+)
+```
+
+### Loading Button
+
+```kotlin
+var isLoading by remember { mutableStateOf(false) }
+
+Button(
+    onClick = {
+        isLoading = true
+        // Perform async operation
+        isLoading = false
+    },
+    title = "Đăng nhập",
+    loading = isLoading,
+    type = ButtonType.PRIMARY
+)
+```
+
+### Full Width Button
+
+```kotlin
+Button(
+    onClick = { /* Handle click */ },
+    title = "Đăng ký ngay",
+    type = ButtonType.PRIMARY,
+    isFull = true,
+    modifier = Modifier
+        .fillMaxWidth()
+        .padding(horizontal = 16.dp)
+)
+```
+
+### Danger Button (for destructive actions)
+
+```kotlin
+Button(
+    onClick = { showDeleteConfirmation() },
+    title = "Xóa tài khoản",
+    type = ButtonType.DANGER,
+    size = Size.LARGE
+)
+```
+
+### Disabled Button
+
+```kotlin
+Button(
+    onClick = { /* Will not trigger */ },
+    title = "Không thể click",
+    type = ButtonType.DISABLED,
+    enabled = false
+)
+```
+
+## Real World Example: Login Screen
+
+```kotlin
+@Composable
+fun LoginScreen() {
+    var isLoading by remember { mutableStateOf(false) }
+    val phoneNumber = remember { mutableStateOf("") }
+    val password = remember { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier.padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        // Input fields would go here
+
+        Button(
+            onClick = {
+                isLoading = true
+                // Perform login
+            },
+            title = "Đăng nhập",
+            type = ButtonType.PRIMARY,
+            size = Size.LARGE,
+            isFull = true,
+            loading = isLoading,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        TextButton(
+            onClick = { /* Navigate to forgot password */ },
+            title = "Quên mật khẩu?",
+            type = ButtonType.TEXT
+        )
+    }
+}
+```
+
+## Visual States
+
+| State | Visual |
+|-------|--------|
+| Default | Full color background |
+| Pressed | 50% opacity, slight scale down |
+| Loading | Spinner replacing icons |
+| Disabled | Gray background, 50% opacity |
+
+## Best Practices
+
+1. **Use PRIMARY for main CTA** - The most important action on screen
+2. **Use DANGER for destructive actions** - Delete, remove, logout
+3. **Use TEXT for subtle actions** - Links, secondary options
+4. **Set isFull = true for mobile** - Better touch targets
+5. **Always provide loading state** - For async operations > 200ms
+6. **Use consistent sizing** - LARGE for main CTAs, MEDIUM/SMALL for inline

package/.claude/momo-native-kits-skill/references/card.md

@@ -0,0 +1,48 @@
+# Card
+
+**File:** `vn.momo.kits/layout/Card.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Card(
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null,          // Optional click handler
+    elevation: Dp = 2.dp,                  // Shadow elevation
+    cornerRadius: Dp = Radius.M,           // Corner radius
+    backgroundColor: Color = AppTheme.current.colors.background.surface
+) {
+    // Content goes here
+}
+```
+
+## Basic
+
+```kotlin
+Card(
+    modifier = Modifier.fillMaxWidth()
+) {
+    Column(modifier = Modifier.padding(16.dp)) {
+        Title(text = "Card Title", type = TitleType.TITLE_3)
+        Text(text = "Card content")
+    }
+}
+```
+
+## Clickable
+
+```kotlin
+Card(
+    onClick = { /* Navigate */ },
+    modifier = Modifier.fillMaxWidth()
+) {
+    Row(modifier = Modifier.padding(16.dp)) {
+        Image(source = "image.jpg")
+        Column(modifier = Modifier.padding(start = 12.dp)) {
+            Title(text = "Item Title")
+            Text(text = "Description")
+        }
+    }
+}
+```

package/.claude/momo-native-kits-skill/references/checkbox.md

@@ -0,0 +1,51 @@
+# CheckBox
+
+**File:** `vn/momo/kits/components/CheckBox.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun CheckBox(
+    checked: Boolean,                    // Required: Checked state
+    onCheckedChange: (Boolean) -> Unit, // Required: State change callback
+    modifier: Modifier = Modifier,
+    title: String = "",                 // Label text
+    enabled: Boolean = true            // Enable/disable
+)
+```
+
+## Usage
+
+```kotlin
+var isChecked by remember { mutableStateOf(false) }
+
+CheckBox(
+    checked = isChecked,
+    onCheckedChange = { isChecked = it },
+    title = "Đồng ý với điều khoản"
+)
+```
+
+## With Button
+
+```kotlin
+@Composable
+fun TermsAgreement() {
+    var agreed by remember { mutableStateOf(false) }
+
+    Column {
+        CheckBox(
+            checked = agreed,
+            onCheckedChange = { agreed = it },
+            title = "Tôi đồng ý với Điều khoản sử dụng"
+        )
+
+        Button(
+            title = "Tiếp tục",
+            type = ButtonType.PRIMARY,
+            enabled = agreed
+        )
+    }
+}
+```

package/.claude/momo-native-kits-skill/references/chip.md

@@ -0,0 +1,48 @@
+# Chip
+
+**File:** `vn/momo/kits/components/Chip.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Chip(
+    text: String,                      // Required: Chip text
+    modifier: Modifier = Modifier,
+    isSelected: Boolean = false,       // Selected state
+    onClick: (() -> Unit)? = null,    // Click handler
+    leadingIcon: String? = null        // Optional leading icon
+)
+```
+
+## Usage
+
+```kotlin
+var selectedChips by remember { mutableStateOf(setOf("food")) }
+
+Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+    listOf("food", "drink", "dessert", "snack").forEach { chip ->
+        Chip(
+            text = chip,
+            isSelected = chip in selectedChips,
+            onClick = {
+                selectedChips = if (chip in selectedChips) {
+                    selectedChips - chip
+                } else {
+                    selectedChips + chip
+                }
+            }
+        )
+    }
+}
+```
+
+## With Icon
+
+```kotlin
+Chip(
+    text = "With Icon",
+    leadingIcon = "ic_tag",
+    onClick = { /* Handle click */ }
+)
+```