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

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-4-datetimepicker/without_skill/outputs/DateTimePickerExample.kt

@@ -1,330 +0,0 @@
-package com.example.datetimepicker
-
-import android.app.DatePickerDialog
-import android.app.TimePickerDialog
-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.material3.Button
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.TopAppBar
-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.platform.LocalContext
-import androidx.compose.ui.unit.dp
-import java.text.SimpleDateFormat
-import java.util.Calendar
-import java.util.Date
-import java.util.Locale
-
-/**
- * DateTimePicker Example in Jetpack Compose
- *
- * This example demonstrates different ways to use DatePicker and TimePicker
- * dialogs in Android Jetpack Compose applications.
- */
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun DateTimePickerScreen() {
-    // State for selected date and time
-    var selectedDate by remember { mutableStateOf<Long?>(null) }
-    var selectedTime by remember { mutableStateOf<Long?>(null) }
-
-    // Formatters for displaying date and time
-    val dateFormatter = remember { SimpleDateFormat("dd/MM/yyyy", Locale.getDefault()) }
-    val timeFormatter = remember { SimpleDateFormat("HH:mm", Locale.getDefault()) }
-    val dateTimeFormatter = remember { SimpleDateFormat("dd/MM/yyyy HH:mm", Locale.getDefault()) }
-
-    // Calendar instance for dialogs
-    val calendar = remember { Calendar.getInstance() }
-
-    // Context for showing dialogs
-    val context = LocalContext.current
-
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("DateTimePicker Example") }
-            )
-        }
-    ) { paddingValues ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(paddingValues)
-                .padding(16.dp)
-        ) {
-            Text(
-                text = "Date & Time Selection",
-                style = MaterialTheme.typography.headlineSmall
-            )
-
-            Spacer(modifier = Modifier.height(24.dp))
-
-            // ===== Date Picker Example =====
-            Text(
-                text = "Date Picker",
-                style = MaterialTheme.typography.titleMedium
-            )
-
-            Spacer(modifier = Modifier.height(8.dp))
-
-            OutlinedTextField(
-                value = selectedDate?.let { dateFormatter.format(Date(it)) } ?: "",
-                onValueChange = { },
-                label = { Text("Select Date") },
-                readOnly = true,
-                modifier = Modifier.fillMaxWidth(),
-                trailingIcon = {
-                    TextButton(onClick = {
-                        // Show DatePickerDialog
-                        val datePickerDialog = DatePickerDialog(
-                            context,
-                            { _, year, month, dayOfMonth ->
-                                calendar.set(year, month, dayOfMonth)
-                                selectedDate = calendar.timeInMillis
-                            },
-                            calendar.get(Calendar.YEAR),
-                            calendar.get(Calendar.MONTH),
-                            calendar.get(Calendar.DAY_OF_MONTH)
-                        )
-                        datePickerDialog.show()
-                    }) {
-                        Text("Pick")
-                    }
-                }
-            )
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            // ===== Time Picker Example =====
-            Text(
-                text = "Time Picker",
-                style = MaterialTheme.typography.titleMedium
-            )
-
-            Spacer(modifier = Modifier.height(8.dp))
-
-            OutlinedTextField(
-                value = selectedTime?.let {
-                    val cal = Calendar.getInstance().apply { timeInMillis = it }
-                    String.format(
-                        Locale.getDefault(),
-                        "%02d:%02d",
-                        cal.get(Calendar.HOUR_OF_DAY),
-                        cal.get(Calendar.MINUTE)
-                    )
-                } ?: "",
-                onValueChange = { },
-                label = { Text("Select Time") },
-                readOnly = true,
-                modifier = Modifier.fillMaxWidth(),
-                trailingIcon = {
-                    TextButton(onClick = {
-                        // Show TimePickerDialog
-                        val timePickerDialog = TimePickerDialog(
-                            context,
-                            { _, hourOfDay, minute ->
-                                calendar.set(Calendar.HOUR_OF_DAY, hourOfDay)
-                                calendar.set(Calendar.MINUTE, minute)
-                                selectedTime = calendar.timeInMillis
-                            },
-                            calendar.get(Calendar.HOUR_OF_DAY),
-                            calendar.get(Calendar.MINUTE),
-                            true // 24-hour format
-                        )
-                        timePickerDialog.show()
-                    }) {
-                        Text("Pick")
-                    }
-                }
-            )
-
-            Spacer(modifier = Modifier.height(16.dp))
-
-            // ===== Combined Date & Time Example =====
-            Text(
-                text = "Date & Time Picker",
-                style = MaterialTheme.typography.titleMedium
-            )
-
-            Spacer(modifier = Modifier.height(8.dp))
-
-            OutlinedTextField(
-                value = if (selectedDate != null && selectedTime != null) {
-                    val combinedCal = Calendar.getInstance().apply {
-                        timeInMillis = selectedDate!!
-                        val timeCal = Calendar.getInstance().apply { timeInMillis = selectedTime!! }
-                        set(Calendar.HOUR_OF_DAY, timeCal.get(Calendar.HOUR_OF_DAY))
-                        set(Calendar.MINUTE, timeCal.get(Calendar.MINUTE))
-                    }
-                    dateTimeFormatter.format(Date(combinedCal.timeInMillis))
-                } else if (selectedDate != null) {
-                    dateFormatter.format(Date(selectedDate!!))
-                } else {
-                    ""
-                },
-                onValueChange = { },
-                label = { Text("Select Date & Time") },
-                readOnly = true,
-                modifier = Modifier.fillMaxWidth(),
-                trailingIcon = {
-                    TextButton(onClick = {
-                        // First show DatePicker, then TimePicker
-                        val datePickerDialog = DatePickerDialog(
-                            context,
-                            { _, year, month, dayOfMonth ->
-                                calendar.set(year, month, dayOfMonth)
-                                selectedDate = calendar.timeInMillis
-
-                                // After date is selected, show time picker
-                                val timePickerDialog = TimePickerDialog(
-                                    context,
-                                    { _, hourOfDay, minute ->
-                                        calendar.set(Calendar.HOUR_OF_DAY, hourOfDay)
-                                        calendar.set(Calendar.MINUTE, minute)
-                                        selectedTime = calendar.timeInMillis
-                                    },
-                                    calendar.get(Calendar.HOUR_OF_DAY),
-                                    calendar.get(Calendar.MINUTE),
-                                    true
-                                )
-                                timePickerDialog.show()
-                            },
-                            calendar.get(Calendar.YEAR),
-                            calendar.get(Calendar.MONTH),
-                            calendar.get(Calendar.DAY_OF_MONTH)
-                        )
-                        datePickerDialog.show()
-                    }) {
-                        Text("Pick")
-                    }
-                }
-            )
-
-            Spacer(modifier = Modifier.height(32.dp))
-
-            // ===== Display Selected Values =====
-            Text(
-                text = "Selected Values:",
-                style = MaterialTheme.typography.titleMedium
-            )
-
-            Spacer(modifier = Modifier.height(8.dp))
-
-            Text(
-                text = "Date: ${selectedDate?.let { dateFormatter.format(Date(it)) } ?: "Not selected"}"
-            )
-
-            Text(
-                text = "Time: ${selectedTime?.let {
-                    val cal = Calendar.getInstance().apply { timeInMillis = it }
-                    String.format(Locale.getDefault(), "%02d:%02d", cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE))
-                } ?: "Not selected"}"
-            )
-
-            Spacer(modifier = Modifier.height(24.dp))
-
-            // ===== Clear Button =====
-            OutlinedButton(
-                onClick = {
-                    selectedDate = null
-                    selectedTime = null
-                },
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                Text("Clear Selection")
-            }
-        }
-    }
-}
-
-/**
- * Alternative approach using Material3 DatePicker and TimePicker composables
- * (Available in newer versions of Material3)
- */
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun DateTimePickerWithMaterial3(
-    onDateTimeSelected: (Long) -> Unit = {}
-) {
-    // This requires Material3 1.1.0+ and shows inline pickers
-    // For full implementation, use the datePicker and timePicker state APIs
-
-    var showDatePicker by remember { mutableStateOf(false) }
-    var showTimePicker by remember { mutableStateOf(false) }
-    var selectedDateMillis by remember { mutableStateOf<Long?>(null) }
-
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(16.dp)
-    ) {
-        Button(
-            onClick = { showDatePicker = true },
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            Text("Show Date Picker Dialog")
-        }
-
-        Spacer(modifier = Modifier.height(8.dp))
-
-        Button(
-            onClick = { showTimePicker = true },
-            modifier = Modifier.fillMaxWidth(),
-            enabled = selectedDateMillis != null
-        ) {
-            Text("Show Time Picker Dialog")
-        }
-
-        // Note: Material3 also provides DatePicker and TimePicker composables
-        // that can be used inline (not as dialogs) for more customization
-    }
-}
-
-/**
- * Example of custom DatePickerDialog styling
- */
-@Composable
-fun StyledDatePickerExample() {
-    val context = LocalContext.current
-    val calendar = remember { Calendar.getInstance() }
-
-    Button(
-        onClick = {
-            val dialog = DatePickerDialog(
-                context,
-                { _, year, month, dayOfMonth ->
-                    // Handle date selection
-                    calendar.set(year, month, dayOfMonth)
-                    println("Selected date: ${calendar.time}")
-                },
-                calendar.get(Calendar.YEAR),
-                calendar.get(Calendar.MONTH),
-                calendar.get(Calendar.DAY_OF_MONTH)
-            ).apply {
-                // Customize dialog
-                datePicker.firstDayOfWeek = Calendar.MONDAY
-                // Set min/max date if needed
-                // datePicker.minDate = ...
-                // datePicker.maxDate = ...
-            }
-            dialog.show()
-        }
-    ) {
-        Text("Styled Date Picker")
-    }
-}

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

@@ -1,124 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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))
-    }
-}