openuispec 0.1.44 → 0.1.46

package/examples/social-app/generated/android/social-app/app/src/main/java/com/social/app/ui/screens/EditProfileScreen.kt

@@ -0,0 +1,180 @@
+package com.social.app.ui.screens
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.CameraAlt
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import com.social.app.R
+import com.social.app.data.MockData
+import com.social.app.ui.components.ActionTriggerButton
+import com.social.app.ui.components.ActionTriggerVariant
+import com.social.app.ui.components.ContractSnackbarHost
+import com.social.app.ui.components.ContractTextField
+import com.social.app.ui.theme.Shapes
+import com.social.app.ui.theme.Spacing
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EditProfileScreen(
+    onBackClick: () -> Unit
+) {
+    val user = MockData.users.find { it.id == "user_me" } ?: MockData.users[0]
+
+    var displayName by remember { mutableStateOf(user.displayName) }
+    var handle by remember { mutableStateOf(user.handle) }
+    var bio by remember { mutableStateOf(user.bio ?: "") }
+    var website by remember { mutableStateOf("https://rustam.design") }
+    val savedMessage = stringResource(R.string.edit_profile_saved)
+    val snackbarHostState = remember { SnackbarHostState() }
+    val scope = rememberCoroutineScope()
+
+    Scaffold(
+        snackbarHost = {
+            ContractSnackbarHost(hostState = snackbarHostState)
+        },
+        topBar = {
+            TopAppBar(
+                title = { Text(stringResource(R.string.profile_edit_button)) },
+                navigationIcon = {
+                    IconButton(onClick = onBackClick) {
+                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
+                    }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.surface)
+            )
+        }
+    ) { padding ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding)
+                .verticalScroll(rememberScrollState())
+                .padding(Spacing.MD),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(Spacing.MD),
+        ) {
+            Surface(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                shape = Shapes.CardShape,
+                color = MaterialTheme.colorScheme.surfaceVariant,
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(Spacing.LG),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(Spacing.SM),
+                ) {
+                    Box(
+                        modifier = Modifier.size(120.dp),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        AsyncImage(
+                            model = user.avatarUrl,
+                            contentDescription = user.displayName,
+                            modifier = Modifier.fillMaxSize(),
+                            contentScale = ContentScale.Crop,
+                        )
+                        Surface(
+                            modifier = Modifier
+                                .align(Alignment.BottomEnd)
+                                .size(32.dp),
+                            shape = Shapes.RoundedCapPrimary,
+                            color = MaterialTheme.colorScheme.primary,
+                        ) {
+                            Box(contentAlignment = Alignment.Center) {
+                                Icon(
+                                    Icons.Default.CameraAlt,
+                                    contentDescription = null,
+                                    tint = MaterialTheme.colorScheme.onPrimary,
+                                )
+                            }
+                        }
+                    }
+                    Text(
+                        text = stringResource(R.string.edit_profile_avatar),
+                        style = MaterialTheme.typography.labelLarge,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                        textAlign = TextAlign.Center,
+                    )
+                }
+            }
+
+            ContractTextField(
+                value = displayName,
+                onValueChange = { displayName = it },
+                label = stringResource(R.string.edit_profile_display_name),
+            )
+            ContractTextField(
+                value = handle,
+                onValueChange = { handle = it },
+                label = stringResource(R.string.edit_profile_handle),
+            )
+            ContractTextField(
+                value = bio,
+                onValueChange = { bio = it.take(160) },
+                label = stringResource(R.string.edit_profile_bio),
+                singleLine = false,
+                maxLines = 5,
+            )
+            ContractTextField(
+                value = website,
+                onValueChange = { website = it },
+                label = stringResource(R.string.edit_profile_website),
+                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri),
+            )
+
+            ActionTriggerButton(
+                text = stringResource(R.string.edit_profile_save),
+                onClick = {
+                    scope.launch {
+                        snackbarHostState.currentSnackbarData?.dismiss()
+                        snackbarHostState.showSnackbar(message = savedMessage)
+                    }
+                    scope.launch {
+                        delay(3000)
+                        snackbarHostState.currentSnackbarData?.dismiss()
+                        onBackClick()
+                    }
+                },
+                variant = ActionTriggerVariant.Primary,
+                fullWidth = true,
+            )
+        }
+    }
+}

package/examples/social-app/generated/android/social-app/app/src/main/java/com/social/app/ui/screens/HomeFeedScreen.kt

@@ -0,0 +1,157 @@
+package com.social.app.ui.screens
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.social.app.R
+import com.social.app.data.MockData
+import com.social.app.ui.components.ChipOption
+import com.social.app.ui.components.ContractChipRow
+import com.social.app.ui.components.ContractListCard
+import com.social.app.ui.components.PostItem
+import com.social.app.ui.components.StoryItem
+import com.social.app.ui.theme.Spacing
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.flow.map
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun HomeFeedScreen(
+    onPostClick: (String) -> Unit,
+    onUserClick: (String) -> Unit,
+) {
+    var selectedFilter by remember { mutableStateOf("all") }
+    val storyListState = rememberLazyListState()
+    val feedListState = rememberLazyListState()
+    val filteredPosts =
+        remember(selectedFilter) {
+            when (selectedFilter) {
+                "following" -> MockData.posts.filter { it.authorId != "user_me" }
+                "popular" -> MockData.posts.filter { it.likeCount >= 1000 }
+                else -> MockData.posts
+            }
+        }
+    var visiblePostCount by remember(selectedFilter) { mutableIntStateOf(minOf(2, filteredPosts.size)) }
+
+    LaunchedEffect(selectedFilter, filteredPosts.size) {
+        visiblePostCount = minOf(2, filteredPosts.size)
+    }
+
+    LaunchedEffect(feedListState, filteredPosts.size, visiblePostCount) {
+        snapshotFlow { feedListState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: -1 }
+            .map { lastVisibleIndex -> lastVisibleIndex >= feedListState.layoutInfo.totalItemsCount - 2 }
+            .distinctUntilChanged()
+            .filter { it }
+            .collect {
+                if (visiblePostCount < filteredPosts.size) {
+                    visiblePostCount = minOf(visiblePostCount + 1, filteredPosts.size)
+                }
+            }
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = { Text(stringResource(R.string.nav_home)) },
+                colors =
+                    TopAppBarDefaults.centerAlignedTopAppBarColors(
+                        containerColor = MaterialTheme.colorScheme.surface,
+                    ),
+            )
+        },
+    ) { padding ->
+        LazyColumn(
+            state = feedListState,
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .padding(padding),
+            contentPadding = PaddingValues(bottom = Spacing.LG),
+        ) {
+            item {
+                LazyRow(
+                    state = storyListState,
+                    flingBehavior = rememberSnapFlingBehavior(lazyListState = storyListState),
+                    contentPadding = PaddingValues(horizontal = Spacing.MD),
+                    horizontalArrangement = Arrangement.spacedBy(Spacing.SM),
+                    modifier = Modifier.padding(vertical = Spacing.MD),
+                ) {
+                    items(MockData.stories) { story ->
+                        val linkedPostId = MockData.posts.find { it.authorId == story.authorId }?.id ?: MockData.posts.first().id
+                        StoryItem(
+                            name = story.authorName,
+                            imageUrl = story.previewUrl,
+                            onClick = { onPostClick(linkedPostId) },
+                        )
+                    }
+                }
+            }
+
+            item {
+                ContractChipRow(
+                    options =
+                        listOf(
+                            ChipOption("all", stringResource(R.string.home_filter_all)),
+                            ChipOption("following", stringResource(R.string.home_filter_following)),
+                            ChipOption("popular", stringResource(R.string.home_filter_popular)),
+                        ),
+                    selectedValue = selectedFilter,
+                    onSelect = { selectedFilter = it.value },
+                )
+                Spacer(modifier = Modifier.height(Spacing.MD))
+            }
+
+            if (filteredPosts.isEmpty()) {
+                item {
+                    ContractListCard(
+                        title = stringResource(R.string.home_empty_feed),
+                        modifier = Modifier.padding(horizontal = Spacing.MD),
+                    )
+                }
+            } else {
+                items(filteredPosts.take(visiblePostCount), key = { it.id }) { post ->
+                    PostItem(
+                        authorName = post.authorName,
+                        authorHandle = post.authorHandle,
+                        authorAvatar = post.authorAvatar,
+                        body = post.body,
+                        likeCount = post.likeCount,
+                        commentCount = post.commentCount,
+                        timestamp = post.timestamp,
+                        mediaUrl = post.mediaUrl,
+                        onAuthorClick = { onUserClick(post.authorId) },
+                        onLikeClick = {},
+                        onCommentClick = { onPostClick(post.id) },
+                    )
+                }
+            }
+        }
+    }
+}

package/examples/social-app/generated/android/social-app/app/src/main/java/com/social/app/ui/screens/MessagesInboxScreen.kt

@@ -0,0 +1,85 @@
+package com.social.app.ui.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.social.app.R
+import com.social.app.data.MockData
+import com.social.app.ui.components.ContractListCard
+import com.social.app.ui.components.ContractTextField
+import com.social.app.ui.theme.Spacing
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MessagesInboxScreen(
+    onConversationClick: (String) -> Unit
+) {
+    var searchQuery by remember { mutableStateOf("") }
+
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = { Text(stringResource(R.string.nav_messages)) },
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(containerColor = MaterialTheme.colorScheme.surface)
+            )
+        }
+    ) { padding ->
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding),
+        ) {
+            item {
+                ContractTextField(
+                    value = searchQuery,
+                    onValueChange = { searchQuery = it },
+                    modifier = Modifier
+                        .padding(Spacing.MD),
+                    label = stringResource(R.string.messages_search_placeholder),
+                    placeholder = stringResource(R.string.messages_search_placeholder),
+                    leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
+                )
+            }
+
+            val participants = MockData.users.filter { it.id != "user_me" }
+            if (participants.isEmpty()) {
+                item {
+                    Box(modifier = Modifier.fillMaxWidth().padding(Spacing.XL), contentAlignment = Alignment.Center) {
+                        Text(stringResource(R.string.messages_empty_inbox), style = MaterialTheme.typography.bodyLarge)
+                    }
+                }
+            } else {
+                items(participants) { user ->
+                    ContractListCard(
+                        title = user.displayName,
+                        subtitle = user.bio ?: user.handle,
+                        trailing = if (user.id == "u_9921") "1" else null,
+                        avatarUrl = user.avatarUrl,
+                        modifier = Modifier.padding(horizontal = Spacing.MD, vertical = Spacing.XS),
+                        onClick = { onConversationClick(user.id) },
+                    )
+                }
+            }
+        }
+    }
+}

package/examples/social-app/generated/android/social-app/app/src/main/java/com/social/app/ui/screens/NotificationsScreen.kt

@@ -0,0 +1,74 @@
+package com.social.app.ui.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.social.app.R
+import com.social.app.data.MockData
+import com.social.app.ui.components.ContractListCard
+import com.social.app.ui.theme.Spacing
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun NotificationsScreen(
+    onNotificationRead: (String) -> Unit,
+) {
+    val unreadIds = remember { mutableStateListOf(*MockData.notifications.map { it.id }.toTypedArray()) }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = { Text(stringResource(R.string.nav_notifications)) },
+                colors =
+                    TopAppBarDefaults.centerAlignedTopAppBarColors(
+                        containerColor = MaterialTheme.colorScheme.surface,
+                    ),
+            )
+        },
+    ) { padding ->
+        if (MockData.notifications.isEmpty()) {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                Text(text = stringResource(R.string.notifications_empty), style = MaterialTheme.typography.bodyLarge)
+            }
+        } else {
+            LazyColumn(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .padding(padding),
+            ) {
+                items(MockData.notifications) { notification ->
+                    val isUnread = notification.id in unreadIds
+                    ContractListCard(
+                        title = notification.actorName,
+                        subtitle = notification.message,
+                        trailing = notification.timestamp,
+                        avatarUrl = notification.actorAvatar,
+                        modifier = Modifier.padding(horizontal = Spacing.MD, vertical = Spacing.XS),
+                        onClick = {
+                            if (isUnread) {
+                                unreadIds.remove(notification.id)
+                                onNotificationRead(notification.id)
+                            }
+                        },
+                    )
+                }
+            }
+        }
+    }
+}