Merge pull request #6 from DevelopersBreach/yuga/detail-topic-ui

Updated `TopicScreen` and `Detail Screen` with changed UI

Author: YugaJ7

composeApp/build.gradle.kts

@@ -69,18 +69,17 @@ kotlin {
         val desktopMain by getting
 
         androidMain.dependencies {
-            implementation(compose.preview)
             implementation(libs.androidx.activity.compose)
             implementation(libs.koin.android)
             implementation(libs.koin.androidx.compose)
-            implementation(compose.components.uiToolingPreview)
         }
         commonMain.dependencies {
             implementation(compose.runtime)
             implementation(compose.foundation)
-            implementation(compose.material)
+            implementation(compose.material3)
             implementation(compose.ui)
             implementation(compose.components.resources)
+            implementation(compose.materialIconsExtended)
             implementation(libs.androidx.lifecycle.viewmodel)
             implementation(libs.androidx.lifecycle.runtime.compose)
             implementation(libs.androidx.navigation.compose)

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/CodeExampleBoxPreview.kt

@@ -0,0 +1,20 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.CodeExampleBox
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun CodeExampleBoxPreview() {
+    KotlinDictionaryTheme {
+        CodeExampleBox(
+            code = sampleCodeSnippet(),
+            modifier = Modifier.padding(16.dp),
+        )
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/PreviewDetailScreen.kt

@@ -0,0 +1,14 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenContent
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun DetailScreenPreview() {
+    KotlinDictionaryTheme {
+        DetailScreenContent(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/PreviewUtils.kt

@@ -0,0 +1,55 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.CodeExample
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.Section
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.Syntax
+import com.developersbreach.kotlindictionarymultiplatform.data.topic.model.Topic
+
+fun sampleCodeSnippet(): String = """
+    fun greet(name: String): String {
+        return "Hello, Sam!"
+    }
+    """.trimIndent()
+
+fun topic() = "Smart Casts"
+
+fun subtitle() = "Automatic casting of immutable values"
+
+fun fakeTopicDetails() = KotlinTopicDetails(
+    topicId = "smart-cast",
+    topicName = "Smart Cast",
+    intro = "Smart casting allows the compiler to automatically cast types.",
+    syntax = Syntax(
+        signature = "if (x is String) println(x.length)",
+        notes = "Works only with immutable vars",
+    ),
+    sections = listOf(
+        Section(
+            heading = "Why Use It?",
+            content = "Because it’s safer and reduces boilerplate.",
+            codeExamples = listOf(
+                CodeExample(
+                    description = "Basic usage of smart cast",
+                    code = """
+                        fun printLength(obj: Any) {
+                            if (obj is String) {
+                                println(obj.length) // Smart cast
+                            }
+                        }
+                    """.trimIndent(),
+                ),
+            ),
+        ),
+    ),
+    pitfalls = listOf("Doesn't work with mutable vars."),
+    relatedTopics = listOf("Type Checking", "Safe Casts"),
+)
+
+fun sampleTopicList(): List<Topic> = listOf(
+    Topic("Smart Casts"),
+    Topic("Null Safety"),
+    Topic("Coroutines"),
+    Topic("Lambdas"),
+    Topic("Sealed Classes"),
+)

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/SearchFieldPreview.kt

@@ -0,0 +1,22 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+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.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.topic.SearchField
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun SearchFieldPreview() {
+    KotlinDictionaryTheme {
+        var searchQuery by remember { mutableStateOf("") }
+        SearchField(
+            searchQuery = searchQuery,
+            onQueryChange = { searchQuery = it },
+        )
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/TopicCardPreview.kt

@@ -0,0 +1,20 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.topic.TopicCard
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun TopicCardPreview() {
+    KotlinDictionaryTheme {
+        TopicCard(
+            topic = topic(),
+            subtitle = subtitle(),
+            isBookmarked = false,
+            onBookmarkClick = {},
+            onCardClick = {},
+        )
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/TopicScreenPreview.kt

@@ -0,0 +1,67 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.data.topic.model.Topic
+import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiState
+import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiStateHandler
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.topic.TopicScreenLayout
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+
+// Fake ViewModel for previews
+class FakeTopicViewModel : TopicViewModelFakeBase() {
+    override val topics = MutableStateFlow<UiState<List<Topic>>>(UiState.Success(sampleTopicList()))
+    override val searchQuery = MutableStateFlow("")
+    override val filteredTopics = MutableStateFlow(sampleTopicList())
+    override val bookmarkedStates = MutableStateFlow(List(sampleTopicList().size) { true })
+
+    override fun updateSearchQuery(newQuery: String) {}
+
+    override fun toggleBookmark(index: Int) {}
+}
+
+// Base class to avoid needing Android ViewModel
+abstract class TopicViewModelFakeBase {
+    abstract val topics: StateFlow<UiState<List<Topic>>>
+    abstract val searchQuery: StateFlow<String>
+    abstract val filteredTopics: StateFlow<List<Topic>>
+    abstract val bookmarkedStates: StateFlow<List<Boolean>>
+
+    abstract fun updateSearchQuery(newQuery: String)
+
+    abstract fun toggleBookmark(index: Int)
+}
+
+@Composable
+fun TopicScreenContent(
+    viewModel: TopicViewModelFakeBase,
+    onTopicClick: (String) -> Unit = {},
+) {
+    val topicState by viewModel.topics.collectAsState()
+    val filteredTopics by viewModel.filteredTopics.collectAsState()
+    val searchQuery by viewModel.searchQuery.collectAsState()
+    val bookmarkedStates by viewModel.bookmarkedStates.collectAsState()
+
+    UiStateHandler(uiState = topicState) {
+        TopicScreenLayout(
+            topics = filteredTopics,
+            bookmarkedStates = bookmarkedStates,
+            searchQuery = searchQuery,
+            onQueryChange = viewModel::updateSearchQuery,
+            onBookmarkClick = viewModel::toggleBookmark,
+            onTopicClick = onTopicClick,
+        )
+    }
+}
+
+@PreviewLightDark
+@Composable
+fun TopicScreenPreview() {
+    KotlinDictionaryTheme {
+        TopicScreenContent(viewModel = FakeTopicViewModel())
+    }
+}