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

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

@@ -0,0 +1,429 @@
+package vn.momo.kits.navigation.examples
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.style.TextAlign
+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.Size
+import vn.momo.kits.navigation.LocalNavigation
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.NavigationContainer
+import vn.momo.kits.navigation.NavigationOptions
+import vn.momo.kits.navigation.component.HeaderTitle
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.ScrollData
+
+/**
+ * SetOptionsExample - Demonstrates how to use setOptions in MoMo Navigation
+ * to change header title dynamically.
+ *
+ * KEY CONCEPTS:
+ * - LocalNavigation.current provides access to setOptions for configuring screen header
+ * - Call setOptions inside LaunchedEffect(Unit) for initial screen configuration
+ * - Call setOptions from any user action handler to update header dynamically
+ * - HeaderTitle.Default("Your Title") is used to set the header text
+ *
+ * USAGE:
+ * 1. Access navigation: val navigation = LocalNavigation.current
+ * 2. Set initial options in LaunchedEffect(Unit) when screen loads
+ * 3. Update dynamically: navigation.setOptions(headerTitle = HeaderTitle.Default("New Title"))
+ *
+ * This example shows practical use cases for dynamic header title changes in a real app scenario.
+ */
+
+/**
+ * Main entry point showing the NavigationContainer with the SetOptionsDemoScreen
+ */
+@Composable
+fun SetOptionsNavigationExample() {
+    NavigationContainer(
+        initialScreen = {
+            SetOptionsDemoScreen()
+        },
+        options = NavigationOptions(
+            headerTitle = HeaderTitle.Default("MoMo Navigation"),
+            headerType = HeaderType.Default
+        )
+    )
+}
+
+/**
+ * Demo screen that showcases various setOptions use cases for dynamic header title changes
+ */
+@Composable
+fun SetOptionsDemoScreen() {
+    val navigation = LocalNavigation.current
+    val navigator = LocalNavigator.current
+
+    // State for dynamic title input
+    var titleInput by remember { mutableStateOf("") }
+
+    // State to track current title (for demonstration)
+    var currentTitle by remember { mutableStateOf("SetOptions Demo") }
+
+    // Set initial options when screen loads
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default(currentTitle),
+            headerType = HeaderType.Default
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        // Header
+        Text(
+            text = "How to Use setOptions",
+            style = MaterialTheme.typography.headlineSmall,
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center
+        )
+
+        Text(
+            text = "Learn how to change header title dynamically using setOptions in MoMo Navigation",
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ========================================
+        // Example 1: Dynamic Title from User Input
+        // ========================================
+        SectionHeader(title = "1. Change Title from Input")
+
+        Text(
+            text = "Enter a custom title and apply it to the header",
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        Input(
+            text = titleInput,
+            onChangeText = { titleInput = it },
+            placeholder = "Enter title here...",
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Button(
+            title = "Apply Title",
+            onClick = {
+                if (titleInput.isNotBlank()) {
+                    currentTitle = titleInput
+                    navigation.setOptions(
+                        headerTitle = HeaderTitle.Default(titleInput)
+                    )
+                    titleInput = "" // Clear input after applying
+                }
+            },
+            type = ButtonType.PRIMARY,
+            size = Size.MEDIUM,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ========================================
+        // Example 2: Quick Title Presets
+        // ========================================
+        SectionHeader(title = "2. Quick Title Presets")
+
+        Text(
+            text = "Common titles used in MoMo app",
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        // Row of preset buttons
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            RowPresetButtons(
+                presets = listOf("Home", "Profile", "Wallet"),
+                onPresetClick = { preset ->
+                    currentTitle = preset
+                    navigation.setOptions(
+                        headerTitle = HeaderTitle.Default(preset)
+                    )
+                }
+            )
+
+            RowPresetButtons(
+                presets = listOf("Settings", "Notifications", "History"),
+                onPresetClick = { preset ->
+                    currentTitle = preset
+                    navigation.setOptions(
+                        headerTitle = HeaderTitle.Default(preset)
+                    )
+                }
+            )
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ========================================
+        // Example 3: Context-Aware Title Changes
+        // ========================================
+        SectionHeader(title = "3. Context-Aware Titles")
+
+        Text(
+            text = "Real-world scenario: Title changes based on user selection",
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        // Simulate category selection
+        var selectedCategory by remember { mutableStateOf("All") }
+        val categories = listOf("All", "Electronics", "Fashion", "Food", "Travel")
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            categories.forEach { category ->
+                CategoryButton(
+                    title = category,
+                    isSelected = selectedCategory == category,
+                    onClick = {
+                        selectedCategory = category
+                        val displayTitle = if (category == "All") "Products" else "Products - $category"
+                        navigation.setOptions(
+                            headerTitle = HeaderTitle.Default(displayTitle)
+                        )
+                    }
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ========================================
+        // Example 4: Header Type Changes
+        // ========================================
+        SectionHeader(title = "4. Change Header Type")
+
+        Text(
+            text = "You can also change header type dynamically",
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        Button(
+            title = "Hide Header",
+            onClick = {
+                navigation.setOptions(
+                    headerType = HeaderType.None
+                )
+            },
+            type = ButtonType.OUTLINE,
+            size = Size.MEDIUM,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Button(
+            title = "Show Default Header",
+            onClick = {
+                navigation.setOptions(
+                    headerType = HeaderType.Default,
+                    headerTitle = HeaderTitle.Default(currentTitle)
+                )
+            },
+            type = ButtonType.OUTLINE,
+            size = Size.MEDIUM,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // ========================================
+        // Example 5: Navigation with Options
+        // ========================================
+        SectionHeader(title = "5. Push Screen with Options")
+
+        Text(
+            text = "Pass options when navigating to a new screen",
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+
+        Button(
+            title = "Go to Detail Screen",
+            onClick = {
+                navigator.push(
+                    content = { DetailScreen() },
+                    options = NavigationOptions(
+                        headerTitle = HeaderTitle.Default("Product Details")
+                    )
+                )
+            },
+            type = ButtonType.TONAL,
+            size = Size.MEDIUM,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // ========================================
+        // Summary
+        // ========================================
+        Text(
+            text = "Summary",
+            style = MaterialTheme.typography.titleMedium
+        )
+
+        Text(
+            text = """
+                To change header title dynamically with setOptions:
+
+                1. Get navigation instance: val navigation = LocalNavigation.current
+
+                2. Call setOptions() with HeaderTitle.Default("Your Title")
+
+                3. Use LaunchedEffect(Unit) for initial setup:
+                   LaunchedEffect(Unit) {
+                       navigation.setOptions(
+                           headerTitle = HeaderTitle.Default("Initial Title")
+                       )
+                   }
+
+                4. Call from any event handler for dynamic updates:
+                   Button(onClick = {
+                       navigation.setOptions(
+                           headerTitle = HeaderTitle.Default("New Title")
+                       )
+                   })
+            """.trimIndent(),
+            style = MaterialTheme.typography.bodySmall,
+            color = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+    }
+}
+
+/**
+ * Detail screen pushed from the main demo
+ * Shows that setOptions works on pushed screens too
+ */
+@Composable
+fun DetailScreen() {
+    val navigation = LocalNavigation.current
+
+    // Set options when this screen loads
+    LaunchedEffect(Unit) {
+        navigation.setOptions(
+            headerTitle = HeaderTitle.Default("Product Details"),
+            scrollData = ScrollData(scrollState = rememberScrollState())
+        )
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+            .verticalScroll(rememberScrollState()),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Text(
+            text = "Product Details",
+            style = MaterialTheme.typography.headlineMedium
+        )
+
+        Text(
+            text = "This is a detail screen pushed with NavigationOptions. " +
+                    "The header title was set when pushing this screen.",
+            style = MaterialTheme.typography.bodyMedium
+        )
+
+        Text(
+            text = "You can also change the title dynamically from this screen:",
+            style = MaterialTheme.typography.bodyMedium
+        )
+
+        Button(
+            title = "Update to 'Item Details'",
+            onClick = {
+                navigation.setOptions(
+                    headerTitle = HeaderTitle.Default("Item Details")
+                )
+            },
+            type = ButtonType.PRIMARY,
+            size = Size.MEDIUM
+        )
+
+        Button(
+            title = "Update to 'Product #12345'",
+            onClick = {
+                navigation.setOptions(
+                    headerTitle = HeaderTitle.Default("Product #12345")
+                )
+            },
+            type = ButtonType.SECONDARY,
+            size = Size.MEDIUM
+        )
+    }
+}
+
+// ========================================
+// Helper Components
+// ========================================
+
+@Composable
+private fun SectionHeader(title: String) {
+    Text(
+        text = title,
+        style = MaterialTheme.typography.titleMedium,
+        color = MaterialTheme.colorScheme.primary
+    )
+}
+
+@Composable
+private fun RowPresetButtons(
+    presets: List<String>,
+    onPresetClick: (String) -> Unit
+) {
+    Box(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        // Display presets as a text list for simplicity
+        // In real app, these would be chip or button components
+        Text(
+            text = presets.joinToString(" | "),
+            style = MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(vertical = 8.dp)
+        )
+    }
+}
+
+@Composable
+private fun CategoryButton(
+    title: String,
+    isSelected: Boolean,
+    onClick: () -> Unit
+) {
+    Button(
+        title = title,
+        onClick = onClick,
+        type = if (isSelected) ButtonType.PRIMARY else ButtonType.OUTLINE,
+        size = Size.SMALL,
+        modifier = Modifier.fillMaxWidth()
+    )
+}

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

@@ -0,0 +1,5 @@
+{
+  "total_tokens": 26971,
+  "duration_ms": 140851,
+  "total_duration_seconds": 140.9
+}