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

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

@@ -0,0 +1,54 @@
+# SnackBar
+
+**File:** `vn.momo.kits/navigation/component/SnackBar.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun SnackBar(
+    message: String,
+    modifier: Modifier = Modifier,
+    actionLabel: String? = null,
+    onActionClick: (() -> Unit)? = null,
+    duration: SnackBarDuration = SnackBarDuration.SHORT,
+    isError: Boolean = false
+)
+
+enum class SnackBarDuration {
+    SHORT,      // 2 seconds
+    LONG,       // 5 seconds
+    INDEFINITE  // Until dismissed
+}
+```
+
+## Basic
+
+```kotlin
+SnackBar(
+    message = "Item deleted",
+    duration = SnackBarDuration.SHORT
+)
+```
+
+## With Action
+
+```kotlin
+SnackBar(
+    message = "Message deleted",
+    actionLabel = "Undo",
+    onActionClick = { /* undo */ },
+    duration = SnackBarDuration.SHORT
+)
+```
+
+## Error
+
+```kotlin
+SnackBar(
+    message = "Something went wrong",
+    isError = true,
+    actionLabel = "OK",
+    onActionClick = { /* dismiss */ }
+)
+```

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

@@ -0,0 +1,62 @@
+# Switch
+
+**File:** `vn.momo/kits/components/Switch.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Switch(
+    checked: Boolean,                    // Required: Checked state
+    onCheckedChange: (Boolean) -> Unit,// Required: State change callback
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true
+)
+```
+
+## Usage
+
+```kotlin
+var isEnabled by remember { mutableStateOf(false) }
+
+Row(
+    modifier = Modifier.fillMaxWidth(),
+    horizontalArrangement = Arrangement.SpaceBetween,
+    verticalAlignment = Alignment.CenterVertically
+) {
+    Text(text = "Dark Mode")
+    Switch(
+        checked = isEnabled,
+        onCheckedChange = { isEnabled = it }
+    )
+}
+```
+
+## Settings Toggle
+
+```kotlin
+@Composable
+fun NotificationSettings() {
+    var pushEnabled by remember { mutableStateOf(true) }
+    var emailEnabled by remember { mutableStateOf(false) }
+
+    Column {
+        SettingRow("Push Notifications", pushEnabled) { pushEnabled = it }
+        Divider()
+        SettingRow("Email Notifications", emailEnabled) { emailEnabled = it }
+    }
+}
+
+@Composable
+fun SettingRow(title: String, checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(text = title)
+        Switch(checked = checked, onCheckedChange = onCheckedChange)
+    }
+}
+```

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

@@ -0,0 +1,195 @@
+# Display Components - Text & Typography
+
+## Overview
+
+MoMo Native Kits provides text and typography components for consistent text styling across the app.
+
+**Package:** `vn.momo.kits.components`
+
+---
+
+## Text Component
+
+**File:** `vn/momo/kits/components/Text.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun Text(
+    text: String,                              // Required: Text content
+    modifier: Modifier = Modifier,
+    color: Color = AppTheme.current.colors.text.default,
+    style: TextStyle = Typography.bodyDefault,
+    maxLines: Int = Int.MAX_VALUE,
+    overflow: TextOverflow = TextOverflow.Clip
+)
+```
+
+### Usage Examples
+
+```kotlin
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.Colors
+
+// Basic text
+Text(text = "Hello World")
+
+// With custom style
+Text(
+    text = "Styled text",
+    style = Typography.bodyBold
+)
+
+// With custom color
+Text(
+    text = "Colored text",
+    color = Colors.pink_01
+)
+
+// With max lines
+Text(
+    text = "Long text that might overflow",
+    maxLines = 2,
+    overflow = TextOverflow.Ellipsis
+)
+```
+
+---
+
+## Title Component
+
+**File:** `vn/momo/kits/components/Title.kt`
+
+### Parameters
+
+```kotlin
+@Composable
+fun Title(
+    text: String,                              // Required: Title text
+    modifier: Modifier = Modifier,
+    type: TitleType = TitleType.TITLE_1,     // Title type/size
+    color: Color = AppTheme.current.colors.text.default
+)
+```
+
+### Title Types
+
+| Type | Use Case |
+|------|----------|
+| `TITLE_1` | Main page titles |
+| `TITLE_2` | Section headers |
+| `TITLE_3` | Subsection headers |
+| `TITLE_4` | Card titles |
+| `TITLE_5` | Small titles |
+| `TITLE_6` | Tiny titles |
+
+### Usage Examples
+
+```kotlin
+import vn.momo.kits.components.Title
+import vn.momo.kits.components.TitleType
+
+// Main title
+Title(
+    text = "Trang chủ",
+    type = TitleType.TITLE_1
+)
+
+// Section header
+Title(
+    text = "Danh sách khuyến mãi",
+    type = TitleType.TITLE_2
+)
+
+// Card title
+Title(
+    text = "Ưu đãi đặc biệt",
+    type = TitleType.TITLE_4
+)
+```
+
+---
+
+## Typography System
+
+**File:** `vn.momo/kits/const/Typography.kt`
+
+The typography system provides consistent text styles across the app.
+
+### Available Styles
+
+| Style | Use Case |
+|-------|----------|
+| `headlineDefault` | Large headlines |
+| `headlineDefaultBold` | Bold headlines |
+| `titleDefault` | Default titles |
+| `titleDefaultBold` | Bold titles |
+| `bodyDefault` | Body text |
+| `bodyBold` | Bold body text |
+| `bodySmall` | Small body text |
+| `actionDefault` | Action text |
+| `actionDefaultBold` | Bold action text |
+| `captionDefault` | Captions |
+| `captionBold` | Bold captions |
+
+### Usage
+
+```kotlin
+import vn.momo.kits.const.Typography
+
+Text(
+    text = "Body text",
+    style = Typography.bodyDefault
+)
+
+Text(
+    text = "Caption",
+    style = Typography.captionDefault
+)
+```
+
+---
+
+## Real World Example
+
+```kotlin
+@Composable
+fun ArticleCard() {
+    Column(modifier = Modifier.padding(16.dp)) {
+        Title(
+            text = "Khuyến mãi mùa hè",
+            type = TitleType.TITLE_2
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Text(
+            text = "Giảm giá lên đến 50% cho tất cả sản phẩm mùa hè. Áp dụng từ ngày 15/06 đến 30/08.",
+            style = Typography.bodyDefault,
+            color = AppTheme.current.colors.text.secondary,
+            maxLines = 3,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Text(
+            text = "Còn 2 ngày",
+            style = Typography.captionDefault,
+            color = Colors.pink_01
+        )
+    }
+}
+```
+
+---
+
+## Best Practices
+
+1. **Use Title for headings** - Semantic hierarchy
+2. **Use Typography constants** - Consistent styling
+3. **Use AppTheme colors** - Theme-aware text colors
+4. **Limit maxLines with overflow** - Prevent layout issues
+5. **Use appropriate title type** - Match visual hierarchy

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

@@ -0,0 +1,34 @@
+# Tooltip
+
+**File:** `vn.momo.kits/components/Tooltip.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Tooltip(
+    text: String,
+    modifier: Modifier = Modifier,
+    position: TooltipPosition = TooltipPosition.BOTTOM
+)
+
+enum class TooltipPosition {
+    TOP, BOTTOM, LEFT, RIGHT
+}
+```
+
+## Usage
+
+```kotlin
+Row {
+    IconButton(
+        icon = "ic_help",
+        onClick = { /* Show help */ }
+    )
+
+    Tooltip(
+        text = "Click to get help",
+        position = TooltipPosition.RIGHT
+    )
+}
+```

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

@@ -0,0 +1,61 @@
+# TrustBanner
+
+**File:** `vn.momo.kits/components/TrustBanner.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun TrustBanner(
+    modifier: Modifier = Modifier,
+    title: String = "",
+    description: String = "",
+    icon: String? = null
+)
+```
+
+## Usage
+
+```kotlin
+TrustBanner(
+    title = "Bảo mật thanh toán",
+    description = "Thông tin được mã hóa SSL",
+    icon = "ic_shield"
+)
+```
+
+---
+
+# Information
+
+**File:** `vn.momo/kits/components/Information.kt`
+
+## Parameters
+
+```kotlin
+@Composable
+fun Information(
+    title: String,
+    modifier: Modifier = Modifier,
+    description: String? = null,
+    icon: String? = null,
+    type: InfoType = InfoType.INFO
+)
+
+enum class InfoType {
+    SUCCESS,
+    WARNING,
+    ERROR,
+    INFO
+}
+```
+
+## Usage
+
+```kotlin
+Information(
+    title = "Thành công",
+    description = "Giao dịch đã được xử lý",
+    type = InfoType.SUCCESS
+)
+```

package/.claude/momo-native-kits-skill/workspace/iteration-1/benchmark.json

@@ -0,0 +1,20 @@
+{
+  "metadata": {
+    "skill_name": "momo-native-kits-skills",
+    "skill_path": "<path/to/skill>",
+    "executor_model": "<model-name>",
+    "analyzer_model": "<model-name>",
+    "timestamp": "2026-03-16T07:03:41Z",
+    "evals_run": [],
+    "runs_per_configuration": 3
+  },
+  "runs": [],
+  "run_summary": {
+    "delta": {
+      "pass_rate": "+0.00",
+      "time_seconds": "+0.0",
+      "tokens": "+0"
+    }
+  },
+  "notes": []
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/benchmark.md

@@ -0,0 +1,13 @@
+# Skill Benchmark: momo-native-kits-skills
+
+**Model**: <model-name>
+**Date**: 2026-03-16T07:03:41Z
+**Evals**:  (3 runs each per configuration)
+
+## Summary
+
+| Metric | Config A | Config B | Delta |
+|--------|------------|---------------|-------|
+| Pass Rate | 0% ± 0% | 0% ± 0% | +0.00 |
+| Time | 0.0s ± 0.0s | 0.0s ± 0.0s | +0.0s |
+| Tokens | 0 ± 0 | 0 ± 0 | +0 |

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-0-button/eval_metadata.json

@@ -0,0 +1,6 @@
+{
+  "eval_id": 0,
+  "eval_name": "button-primary",
+  "prompt": "Show me how to create a primary button with text 'Đăng nhập' in MoMo Native Kits",
+  "assertions": []
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-0-button/with_skill/outputs/ButtonExample.kt

@@ -0,0 +1,55 @@
+package com.example
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+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.Size
+
+/**
+ * Example: Primary Button with text 'Đăng nhập'
+ *
+ * This demonstrates how to create a primary button in MoMo Native Kits
+ * with the Vietnamese text "Đăng nhập" (Login).
+ */
+@Composable
+fun LoginButtonExample() {
+    Button(
+        onClick = {
+            // Handle login action
+        },
+        title = "Đăng nhập",
+        type = ButtonType.PRIMARY,
+        size = Size.LARGE,
+        isFull = true,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+    )
+}
+
+/**
+ * Alternative example: Primary button with additional customization
+ */
+@Composable
+fun LoginButtonWithIconsExample() {
+    Button(
+        onClick = {
+            // Handle login action
+        },
+        title = "Đăng nhập",
+        type = ButtonType.PRIMARY,
+        size = Size.LARGE,
+        iconLeft = "user",        // Optional: Add icon on the left
+        iconRight = "arrow_right", // Optional: Add icon on the right
+        loading = false,          // Set to true when processing login
+        isFull = true,
+        useTintColor = true,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+    )
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-0-button/without_skill/outputs/ButtonExample.kt

@@ -0,0 +1,45 @@
+package com.momo.example
+
+import androidx.compose.foundation.layout.fillWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+/**
+ * Primary button with Vietnamese text "Đăng nhập" (Login)
+ */
+@Composable
+fun PrimaryLoginButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier
+            .fillWidth()
+            .height(48.dp),
+        shape = RoundedCornerShape(8.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = Color(0xFFAD0000), // MoMo's primary red color
+            contentColor = Color.White
+        ),
+        elevation = ButtonDefaults.buttonElevation(
+            defaultElevation = 2.dp,
+            pressedElevation = 4.dp
+        )
+    ) {
+        Text(
+            text = "Đăng nhập",
+            fontSize = 16.sp,
+            fontWeight = FontWeight.SemiBold
+        )
+    }
+}

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

@@ -0,0 +1,6 @@
+{
+  "eval_id": 1,
+  "eval_name": "input-phone",
+  "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'",
+  "assertions": []
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-1-input/with_skill/outputs/InputPhoneExample.kt

@@ -0,0 +1,40 @@
+package com.example
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+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.Modifier
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Input
+
+@Composable
+fun InputPhoneExample() {
+    var phoneNumber by remember { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Input(
+            value = phoneNumber,
+            onValueChange = { newValue ->
+                // Filter to only allow digits
+                phoneNumber = newValue.filter { it.isDigit() }
+            },
+            modifier = Modifier.fillMaxWidth(),
+            inputSize = vn.momo.kits.components.InputSize.LARGE,
+            label = "Số điện thoại",
+            placeholder = "Nhập số điện thoại",
+            keyboardType = KeyboardType.Phone,
+            maxLength = 10
+        )
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-1-input/without_skill/outputs/InputPhoneExample.kt

@@ -0,0 +1,42 @@
+package com.example.input
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.Text
+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.Modifier
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun InputPhoneExample() {
+    var phoneNumber by remember { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        OutlinedTextField(
+            value = phoneNumber,
+            onValueChange = { newValue ->
+                // Filter to only allow numeric characters
+                phoneNumber = newValue.filter { it.isDigit() }
+            },
+            label = { Text("Số điện thoại") },
+            placeholder = { Text("Nhập số điện thoại") },
+            keyboardOptions = KeyboardOptions(
+                keyboardType = KeyboardType.Phone
+            ),
+            singleLine = true,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-2-bottomtab/eval_metadata.json

@@ -0,0 +1,6 @@
+{
+  "eval_id": 2,
+  "eval_name": "bottom-tab",
+  "prompt": "How do I implement a bottom tab navigation with 4 tabs: Home, Wallet, History, Profile in MoMo app?",
+  "assertions": []
+}