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

package/.claude/momo-native-kits-skill/workspace/iteration-2/eval-card/with_skill/outputs/CardExample.kt

@@ -0,0 +1,124 @@
+package com.example
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Card
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Text
+import vn.momo.kits.components.Title
+import vn.momo.kits.components.TitleType
+
+/**
+ * Example: Card component to display a list item with image and title
+ *
+ * This demonstrates how to create a card in MoMo Native Kits that displays
+ * a list item with an image on the left and a title on the right.
+ */
+@Composable
+fun ListItemCardExample() {
+    Card(
+        onClick = {
+            // Handle item click
+        },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        Row(
+            modifier = Modifier.padding(12.dp)
+        ) {
+            // Image on the left
+            Image(
+                source = "https://example.com/image.jpg",
+                modifier = Modifier.size(48.dp)
+            )
+
+            // Title on the right
+            Column(
+                modifier = Modifier.padding(start = 12.dp)
+            ) {
+                Title(
+                    text = "Item Title",
+                    type = TitleType.TITLE_4
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Alternative example: Card with image and title with description
+ */
+@Composable
+fun ListItemCardWithDescriptionExample() {
+    Card(
+        onClick = {
+            // Handle item click
+        },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        Row(
+            modifier = Modifier.padding(12.dp)
+        ) {
+            // Image on the left
+            Image(
+                source = "https://example.com/avatar.jpg",
+                modifier = Modifier.size(56.dp)
+            )
+
+            // Title and description on the right
+            Column(
+                modifier = Modifier.padding(start = 12.dp)
+            ) {
+                Title(
+                    text = "User Profile",
+                    type = TitleType.TITLE_4
+                )
+                Text(
+                    text = "View and edit your profile information",
+                    modifier = Modifier.padding(top = 4.dp)
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Example: Static card with image and title (non-clickable)
+ */
+@Composable
+fun StaticListItemCardExample() {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
+        Row(
+            modifier = Modifier.padding(12.dp)
+        ) {
+            // Image on the left
+            Image(
+                source = "https://example.com/icon.png",
+                modifier = Modifier.size(40.dp)
+            )
+
+            // Title on the right
+            Column(
+                modifier = Modifier.padding(start = 12.dp)
+            ) {
+                Title(
+                    text = "Settings",
+                    type = TitleType.TITLE_4
+                )
+            }
+        }
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-2/eval-card/without_skill/outputs/CardExample.kt

@@ -0,0 +1,71 @@
+package com.example.card
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+/**
+ * A card component to display a list item with image and title
+ */
+@Composable
+fun ListItemCard(
+    imageUrl: String,
+    title: String,
+    modifier: Modifier = Modifier
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(8.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            // Image
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = title,
+                modifier = Modifier
+                    .size(60.dp)
+                    .clip(RoundedCornerShape(8.dp)),
+                contentScale = ContentScale.Crop
+            )
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            // Title
+            Text(
+                text = title,
+                modifier = Modifier.weight(1f)
+            )
+        }
+    }
+}
+
+// Example usage
+@Composable
+fun CardExample() {
+    ListItemCard(
+        imageUrl = "https://example.com/image.jpg",
+        title = "Sample Item Title"
+    )
+}

package/.claude/momo-native-kits-skill/workspace/iteration-2/eval-loginform/with_skill/outputs/LoginFormExample.kt

@@ -0,0 +1,134 @@
+package vn.momo.kits.screens
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+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.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Button
+import vn.momo.kits.components.ButtonType
+import vn.momo.kits.components.Input
+import vn.momo.kits.components.InputPhoneNumber
+import vn.momo.kits.components.Size
+
+@Composable
+fun LoginFormExample() {
+    val phoneNumber: MutableState<String> = remember { mutableStateOf("") }
+    val password: MutableState<String> = remember { mutableStateOf("") }
+    var isLoading by remember { mutableStateOf(false) }
+    var phoneError by remember { mutableStateOf("") }
+    var passwordError by remember { mutableStateOf("") }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 16.dp)
+            .verticalScroll(rememberScrollState()),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Spacer(modifier = Modifier.height(48.dp))
+
+        // Phone number input
+        InputPhoneNumber(
+            text = phoneNumber,
+            onChangeText = {
+                phoneNumber.value = it
+                phoneError = "" // Clear error on typing
+            },
+            floatingValue = "Số điện thoại",
+            placeholder = "Nhập số điện thoại",
+            error = phoneError,
+            countryCode = "+84",
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Password input
+        Input(
+            text = password,
+            onChangeText = {
+                password.value = it
+                passwordError = "" // Clear error on typing
+            },
+            floatingValue = "Mật khẩu",
+            placeholder = "Nhập mật khẩu",
+            password = true,
+            keyboardType = KeyboardType.Password,
+            error = passwordError,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Forgot password button
+        Button(
+            onClick = { /* Navigate to forgot password */ },
+            title = "Quên mật khẩu?",
+            type = ButtonType.TEXT
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Login button
+        Button(
+            onClick = {
+                // Validate inputs
+                var hasError = false
+
+                if (phoneNumber.value.isEmpty()) {
+                    phoneError = "Vui lòng nhập số điện thoại"
+                    hasError = true
+                } else if (phoneNumber.value.length < 10) {
+                    phoneError = "Số điện thoại không hợp lệ"
+                    hasError = true
+                }
+
+                if (password.value.isEmpty()) {
+                    passwordError = "Vui lòng nhập mật khẩu"
+                    hasError = true
+                } else if (password.value.length < 6) {
+                    passwordError = "Mật khẩu phải có ít nhất 6 ký tự"
+                    hasError = true
+                }
+
+                if (!hasError) {
+                    isLoading = true
+                    // Perform login logic here
+                    // login(phoneNumber.value, password.value)
+                    isLoading = false
+                }
+            },
+            title = "Đăng nhập",
+            type = ButtonType.PRIMARY,
+            size = Size.LARGE,
+            isFull = true,
+            loading = isLoading,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Register link
+        Button(
+            onClick = { /* Navigate to register */ },
+            title = "Chưa có tài khoản? Đăng ký ngay",
+            type = ButtonType.TEXT
+        )
+
+        Spacer(modifier = Modifier.height(48.dp))
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-2/eval-loginform/without_skill/outputs/LoginFormExample.kt

@@ -0,0 +1,199 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+
+/**
+ * Login Form Example for MoMo Native Kits
+ *
+ * This example demonstrates how to create a login form with:
+ * - Phone number input with country code (+84 for Vietnam)
+ * - Password input with visibility toggle
+ * - Login button
+ *
+ * Usage:
+ * ```kotlin
+ * LoginFormExample()
+ * ```
+ */
+@Composable
+fun LoginFormExample(
+    modifier: Modifier = Modifier
+) {
+    // State management for form fields
+    val phoneNumber: MutableState<String> = remember { mutableStateOf("") }
+    val password: MutableState<String> = remember { mutableStateOf("") }
+
+    // Error states
+    val phoneError: MutableState<String> = remember { mutableStateOf("") }
+    val passwordError: MutableState<String> = remember { mutableStateOf("") }
+
+    // Loading state
+    val isLoading: MutableState<Boolean> = remember { mutableStateOf(false) }
+
+    // Theme
+    val theme = AppTheme.current
+
+    // Form validation
+    fun validateForm(): Boolean {
+        var isValid = true
+
+        // Validate phone number
+        if (phoneNumber.value.isEmpty()) {
+            phoneError.value = "Vui lòng nhập số điện thoại"
+            isValid = false
+        } else if (phoneNumber.value.length < 10) {
+            phoneError.value = "Số điện thoại không hợp lệ"
+            isValid = false
+        } else {
+            phoneError.value = ""
+        }
+
+        // Validate password
+        if (password.value.isEmpty()) {
+            passwordError.value = "Vui lòng nhập mật khẩu"
+            isValid = false
+        } else if (password.value.length < 6) {
+            passwordError.value = "Mật khẩu phải có ít nhất 6 ký tự"
+            isValid = false
+        } else {
+            passwordError.value = ""
+        }
+
+        return isValid
+    }
+
+    // Login handler
+    fun handleLogin() {
+        if (validateForm()) {
+            isLoading.value = true
+            // Perform login API call here
+            // For demo purposes, we'll just simulate a delay
+            android.os.Handler(android.os.Looper.getMainLooper()).postDelayed({
+                isLoading.value = false
+            }, 2000)
+        }
+    }
+
+    // Clear errors on text change
+    fun onPhoneNumberChange(value: String) {
+        phoneNumber.value = value
+        if (phoneError.value.isNotEmpty()) {
+            phoneError.value = ""
+        }
+    }
+
+    fun onPasswordChange(value: String) {
+        password.value = value
+        if (passwordError.value.isNotEmpty()) {
+            passwordError.value = ""
+        }
+    }
+
+    // Main layout
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(theme.colors.background.page)
+            .verticalScroll(rememberScrollState())
+            .padding(horizontal = Spacing.L)
+            .padding(top = Spacing.XXL),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Top
+    ) {
+        // App Logo / Title
+        Title(
+            text = "Đăng nhập",
+            style = vn.momo.kits.const.Typography.headerL
+        )
+
+        Spacer(modifier = Modifier.height(Spacing.XL))
+
+        // Phone Number Input
+        InputPhoneNumber(
+            text = phoneNumber,
+            placeholder = "Nhập số điện thoại",
+            size = InputPhoneNumberSize.LARGE,
+            onChangeText = ::onPhoneNumberChange,
+            error = phoneError.value,
+            errorSpacing = true,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(Spacing.L))
+
+        // Password Input
+        Input(
+            text = password,
+            placeholder = "Nhập mật khẩu",
+            size = InputSize.LARGE,
+            onChangeText = ::onPasswordChange,
+            error = passwordError.value,
+            errorSpacing = true,
+            secureTextEntry = true,
+            leadingIcon = "24_security_lock",
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(Spacing.XL))
+
+        // Login Button
+        Button(
+            onClick = ::handleLogin,
+            title = "Đăng nhập",
+            type = ButtonType.PRIMARY,
+            size = Size.LARGE,
+            loading = isLoading.value,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(Spacing.L))
+
+        // Forgot Password Link
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            vn.momo.kits.components.Text(
+                text = "Quên mật khẩu?",
+                style = vn.momo.kits.const.Typography.actionDefaultMedium,
+                color = theme.colors.primary
+            )
+        }
+
+        Spacer(modifier = Modifier.height(Spacing.XXL))
+
+        // Register Link
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            vn.momo.kits.components.Text(
+                text = "Chưa có tài khoản? ",
+                style = vn.momo.kits.const.Typography.bodyDefaultRegular,
+                color = theme.colors.text.secondary
+            )
+            vn.momo.kits.components.Text(
+                text = "Đăng ký ngay",
+                style = vn.momo.kits.const.Typography.bodyDefaultRegular,
+                color = theme.colors.primary
+            )
+        }
+    }
+}