@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-skeleton/without_skill/outputs/SkeletonExample.kt

@@ -0,0 +1,229 @@
+package com.example.skeleton
+
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+/**
+ * A loading skeleton component that displays a shimmer effect
+ * while content is loading.
+ */
+@Composable
+fun ShimmerSkeleton(
+    modifier: Modifier = Modifier,
+    content: @Composable (Brush) -> Unit
+) {
+    val shimmerColors = listOf(
+        Color.LightGray.copy(alpha = 0.6f),
+        Color.LightGray.copy(alpha = 0.2f),
+        Color.LightGray.copy(alpha = 0.6f)
+    )
+
+    val transition = rememberInfiniteTransition(label = "shimmer")
+    val translateAnimation by transition.animateFloat(
+        initialValue = 0f,
+        targetValue = 1000f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(
+                durationMillis = 1200,
+                easing = FastOutSlowInEasing
+            ),
+            repeatMode = RepeatMode.Restart
+        ),
+        label = "shimmer_translate"
+    )
+
+    val brush = Brush.linearGradient(
+        colors = shimmerColors,
+        start = Offset(translateAnimation - 500f, translateAnimation - 500f),
+        end = Offset(translateAnimation, translateAnimation)
+    )
+
+    content(brush)
+}
+
+/**
+ * A card skeleton that displays a shimmer effect to indicate loading state.
+ * This mimics a typical card with an image placeholder, title, subtitle, and action button.
+ */
+@Composable
+fun CardSkeleton(
+    modifier: Modifier = Modifier
+) {
+    ShimmerSkeleton(modifier = modifier) { brush ->
+        Card(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+            shape = RoundedCornerShape(12.dp)
+        ) {
+            Column(
+                modifier = Modifier.padding(16.dp)
+            ) {
+                // Image placeholder
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(160.dp)
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(brush)
+                )
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                // Title placeholder (2 lines)
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.7f)
+                        .height(20.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.5f)
+                        .height(20.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+
+                Spacer(modifier = Modifier.height(12.dp))
+
+                // Description placeholder (3 lines)
+                repeat(3) { index ->
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth(if (index == 2) 0.6f else 1f)
+                            .height(14.dp)
+                            .clip(RoundedCornerShape(4.dp))
+                            .background(brush)
+                    )
+                    if (index < 2) {
+                        Spacer(modifier = Modifier.height(6.dp))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(16.dp))
+
+                // Action button and avatar row
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    // Action button placeholder
+                    Box(
+                        modifier = Modifier
+                            .width(100.dp)
+                            .height(36.dp)
+                            .clip(RoundedCornerShape(18.dp))
+                            .background(brush)
+                    )
+
+                    // Avatar placeholder
+                    Box(
+                        modifier = Modifier
+                            .size(40.dp)
+                            .clip(CircleShape)
+                            .background(brush)
+                    )
+                }
+            }
+        }
+    }
+}
+
+/**
+ * A simpler card skeleton with just title and description.
+ */
+@Composable
+fun SimpleCardSkeleton(
+    modifier: Modifier = Modifier
+) {
+    ShimmerSkeleton(modifier = modifier) { brush ->
+        Card(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+            shape = RoundedCornerShape(8.dp)
+        ) {
+            Column(
+                modifier = Modifier.padding(12.dp)
+            ) {
+                // Title
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.6f)
+                        .height(18.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                // Description
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.9f)
+                        .height(14.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+
+                Spacer(modifier = Modifier.height(4.dp))
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth(0.7f)
+                        .height(14.dp)
+                        .clip(RoundedCornerShape(4.dp))
+                        .background(brush)
+                )
+            }
+        }
+    }
+}
+
+/**
+ * Preview Composable for CardSkeleton
+ */
+@Composable
+fun CardSkeletonPreview() {
+    Column {
+        CardSkeleton()
+        Spacer(modifier = Modifier.height(16.dp))
+        SimpleCardSkeleton()
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/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-16T09:27:06Z",
+    "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-3/benchmark.md

@@ -0,0 +1,13 @@
+# Skill Benchmark: momo-native-kits-skills
+
+**Model**: <model-name>
+**Date**: 2026-03-16T09:27:06Z
+**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-3/eval-button/eval_metadata.json

@@ -0,0 +1,22 @@
+{
+  "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": [
+    {
+      "text": "Uses Button from vn.momo.kits.components",
+      "passed": true,
+      "evidence": "Import vn.momo.kits.components.Button"
+    },
+    {
+      "text": "Uses ButtonType.PRIMARY",
+      "passed": true,
+      "evidence": "type = ButtonType.PRIMARY"
+    },
+    {
+      "text": "Title is 'Đăng nhập'",
+      "passed": true,
+      "evidence": "title = 'Đăng nhập'"
+    }
+  ]
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-button/with_skill/outputs/PrimaryButtonExample.kt

@@ -0,0 +1,38 @@
+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
+
+/**
+ * Primary Button with text 'Đăng nhập'
+ *
+ * This example demonstrates how to create a primary button in MoMo Native Kits
+ * with the Vietnamese text "Đăng nhập" (Login).
+ *
+ * Key components used:
+ * - Button from vn.momo.kits.components
+ * - ButtonType.PRIMARY for the primary action style
+ * - Size.LARGE for appropriate touch target size
+ */
+@Composable
+fun PrimaryButtonExample() {
+    Button(
+        onClick = {
+            // Handle login action
+            // Example: Perform authentication
+        },
+        title = "Đăng nhập",
+        type = ButtonType.PRIMARY,
+        size = Size.LARGE,
+        isFull = true,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+    )
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-button/with_skill/timing.json

@@ -0,0 +1,5 @@
+{
+  "total_tokens": 18678,
+  "duration_ms": 758970,
+  "total_duration_seconds": 759.0
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-button/without_skill/outputs/PrimaryButtonExample.kt

@@ -0,0 +1,83 @@
+package vn.momo.kits.example
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+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.unit.dp
+import vn.momo.kits.components.Button
+import vn.momo.kits.components.ButtonType
+import vn.momo.kits.components.Size
+import vn.momo.kits.const.AppTheme
+
+/**
+ * Example demonstrating how to create a primary button with Vietnamese text 'Đăng nhập'
+ * (meaning "Login" in Vietnamese) using MoMo Native Kits.
+ *
+ * The Button component supports:
+ * - Multiple button types: PRIMARY, SECONDARY, TONAL, OUTLINE, DANGER, TEXT, DISABLED
+ * - Multiple sizes: LARGE, MEDIUM, SMALL
+ * - Optional icons on left or right
+ * - Loading state
+ * - Full-width or auto-width variants
+ */
+@Composable
+fun PrimaryButtonLoginExample() {
+    // Track click state for demonstration
+    var clickCount by remember { mutableStateOf(0) }
+
+    // Primary button with Vietnamese text 'Đăng nhập' (Login)
+    // Uses default ButtonType.PRIMARY which has the primary color background
+    Button(
+        onClick = { clickCount++ },
+        title = "Đăng nhập",  // Vietnamese for "Login"
+        type = ButtonType.PRIMARY,
+        size = Size.LARGE,
+        isFull = true,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+    )
+}
+
+/**
+ * Alternative example showing full usage with all parameters
+ */
+@Composable
+fun PrimaryButtonFullExample() {
+    var isLoading by remember { mutableStateOf(false) }
+
+    Button(
+        onClick = { /* Handle login action */ },
+        title = "Đăng nhập",
+        type = ButtonType.PRIMARY,        // Primary button style (colored background)
+        size = Size.LARGE,                // Large size (48dp height)
+        iconLeft = "ic_login",            // Optional left icon
+        iconRight = "",                   // No right icon
+        loading = isLoading,              // Loading state
+        useTintColor = true,              // Apply text color to icon
+        isFull = true,                    // Full width button
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    )
+}
+
+/**
+ * Minimal example - only required parameters
+ */
+@Composable
+fun PrimaryButtonMinimalExample() {
+    // Using only the required parameters
+    // type defaults to ButtonType.PRIMARY
+    Button(
+        onClick = { /* Handle click */ },
+        title = "Đăng nhập"
+    )
+}

package/.claude/momo-native-kits-skill/workspace/iteration-3/eval-button/without_skill/timing.json

@@ -0,0 +1,5 @@
+{
+  "total_tokens": 21228,
+  "duration_ms": 60387,
+  "total_duration_seconds": 60.4
+}

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

@@ -0,0 +1,22 @@
+{
+  "eval_id": 2,
+  "eval_name": "navigation-container",
+  "prompt": "How to implement NavigationContainer in MoMo app? Show me the correct pattern",
+  "assertions": [
+    {
+      "text": "Uses NavigationContainer from vn.momo.kits.navigation",
+      "passed": true,
+      "evidence": "import vn.momo.kits.navigation.NavigationContainer"
+    },
+    {
+      "text": "Uses initialScreen parameter",
+      "passed": true,
+      "evidence": "initialScreen = { ... }"
+    },
+    {
+      "text": "Uses NavigationOptions",
+      "passed": true,
+      "evidence": "options = NavigationOptions(...)"
+    }
+  ]
+}