Merge pull request #2 from skydoves/feature/versioning

Implement versioning for components

Author: skydoves

core/designsystem/src/main/kotlin/io/getstream/server/driven/core/designsystem/consumer/ConsumeDefaultUi.kt

@@ -29,7 +29,10 @@ import io.getstream.server.driven.core.designsystem.theme.ServerDrivenTheme
 import io.getstream.server.driven.core.model.UiComponent
 
 @Composable
-fun ConsumeDefaultUi(uiComponent: UiComponent) {
+fun ConsumeDefaultUi(
+  uiComponent: UiComponent,
+  version: Int
+) {
   Box(modifier = Modifier.fillMaxWidth()) {
     Text(
       modifier = Modifier.padding(6.dp),
@@ -44,7 +47,7 @@ fun ConsumeDefaultUi(uiComponent: UiComponent) {
 private fun ConsumeDefaultUiPreview() {
   ServerDrivenTheme {
     Box(modifier = Modifier.background(ServerDrivenTheme.colors.background)) {
-      ConsumeDefaultUi(MockUtils.mockTextUi1)
+      ConsumeDefaultUi(MockUtils.mockTextUi1, version = 1)
     }
   }
 }

core/designsystem/src/main/kotlin/io/getstream/server/driven/core/designsystem/consumer/ConsumeImageUi.kt

@@ -15,6 +15,7 @@
  */
 package io.getstream.server.driven.core.designsystem.consumer
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -34,10 +35,26 @@ import io.getstream.server.driven.core.model.ImageUi
 fun ConsumeImageUi(
   imageUi: ImageUi,
   modifier: Modifier = Modifier,
+  version: Int,
   imageOptions: ImageOptions? = null
 ) {
+  val newModifier = if (version == 1) {
+    modifier
+      .size(imageUi.size)
+      .clip(RoundedCornerShape(8.dp))
+  } else {
+    modifier
+      .size(imageUi.size)
+      .clip(RoundedCornerShape(16.dp))
+      .border(
+        width = 4.dp,
+        color = ServerDrivenTheme.colors.primary,
+        shape = RoundedCornerShape(16.dp)
+      )
+  }
+
   GlideImage(
-    modifier = modifier
+    modifier = newModifier
       .size(imageUi.size)
       .clip(RoundedCornerShape(8.dp)),
     imageModel = { imageUi.url },
@@ -51,8 +68,16 @@ fun ConsumeImageUi(
 
 @Preview
 @Composable
-private fun ConsumeImageUiPreview() {
+private fun ConsumeImageUiV1Preview() {
+  ServerDrivenTheme {
+    ConsumeImageUi(imageUi = MockUtils.mockImageUi, version = 1)
+  }
+}
+
+@Preview
+@Composable
+private fun ConsumeImageUiV2Preview() {
   ServerDrivenTheme {
-    ConsumeImageUi(imageUi = MockUtils.mockImageUi)
+    ConsumeImageUi(imageUi = MockUtils.mockImageUi, version = 2)
   }
 }

core/designsystem/src/main/kotlin/io/getstream/server/driven/core/designsystem/consumer/ConsumeList.kt

@@ -54,6 +54,7 @@ import io.getstream.server.driven.core.model.typedValue
 fun ConsumeList(
   listUi: ListUi,
   modifier: Modifier = Modifier,
+  version: Int,
   onListItemClicked: (UiComponent) -> Unit
 ) {
   val layoutType = listUi.layout.toLayoutType()
@@ -78,7 +79,8 @@ fun ConsumeList(
               )
           ) {
             ConsumeImageUi(
-              imageUi = imageUi.copy(size = listUi.itemSize)
+              imageUi = imageUi.copy(size = listUi.itemSize),
+              version = version
             )
 
             val like = listUi.extra["like"].typedValue(false)
@@ -124,7 +126,8 @@ private fun ConsumeListPreview() {
   ServerDrivenTheme {
     ConsumeList(
       listUi = MockUtils.mockListUi,
-      onListItemClicked = {}
+      onListItemClicked = {},
+      version = 1
     )
   }
 }

core/designsystem/src/main/kotlin/io/getstream/server/driven/core/designsystem/consumer/ConsumeTextUi.kt

@@ -29,29 +29,67 @@ import io.getstream.server.driven.core.model.TextUi
 
 @Composable
 fun ConsumeTextUi(
+  version: Int,
   textUi: TextUi,
   modifier: Modifier = Modifier
 ) {
-  Text(
-    modifier = modifier,
-    text = textUi.text,
-    color = ServerDrivenTheme.colors.textHighEmphasis,
-    fontSize = textUi.size.sp,
-    fontWeight = textUi.fontWeight.toFontWeight()
-  )
+  if (version == 1) {
+    Text(
+      modifier = modifier,
+      text = textUi.text,
+      color = ServerDrivenTheme.colors.textHighEmphasis,
+      fontSize = textUi.size.sp,
+      fontWeight = textUi.fontWeight.toFontWeight()
+    )
+  } else {
+    Text(
+      modifier = modifier,
+      text = textUi.text,
+      color = ServerDrivenTheme.colors.primary,
+      fontSize = textUi.size.sp,
+      fontWeight = textUi.fontWeight.toFontWeight()
+    )
+  }
+}
+
+@Preview
+@Composable
+private fun ConsumeTextUiV1Preview() {
+  ServerDrivenTheme {
+    Column(
+      modifier = Modifier
+        .background(ServerDrivenTheme.colors.background)
+        .fillMaxWidth()
+    ) {
+      ConsumeTextUi(
+        version = 1,
+        textUi = MockUtils.mockTextUi1
+      )
+      ConsumeTextUi(
+        version = 1,
+        textUi = MockUtils.mockTextUi2
+      )
+    }
+  }
 }
 
 @Preview
 @Composable
-private fun ConsumeTextUiPreview() {
+private fun ConsumeTextUiV2Preview() {
   ServerDrivenTheme {
     Column(
       modifier = Modifier
         .background(ServerDrivenTheme.colors.background)
         .fillMaxWidth()
     ) {
-      ConsumeTextUi(textUi = MockUtils.mockTextUi1)
-      ConsumeTextUi(textUi = MockUtils.mockTextUi2)
+      ConsumeTextUi(
+        version = 2,
+        textUi = MockUtils.mockTextUi1
+      )
+      ConsumeTextUi(
+        version = 2,
+        textUi = MockUtils.mockTextUi2
+      )
     }
   }
 }

core/designsystem/src/main/kotlin/io/getstream/server/driven/core/designsystem/consumer/UiConsumer.kt

@@ -25,17 +25,19 @@ import io.getstream.server.driven.core.model.UiComponent
 @Composable
 fun UiComponent.Consume(
   modifier: Modifier = Modifier,
+  version: Int = 0,
   onListItemClicked: (UiComponent) -> Unit = {}
 ) {
   when (this) {
-    is TextUi -> ConsumeTextUi(textUi = this, modifier = modifier)
-    is ImageUi -> ConsumeImageUi(imageUi = this, modifier = modifier)
+    is TextUi -> ConsumeTextUi(textUi = this, modifier = modifier, version = version)
+    is ImageUi -> ConsumeImageUi(imageUi = this, modifier = modifier, version = version)
     is ListUi -> ConsumeList(
       listUi = this,
       modifier = modifier,
+      version = version,
       onListItemClicked = onListItemClicked
     )
 
-    else -> ConsumeDefaultUi(uiComponent = this)
+    else -> ConsumeDefaultUi(uiComponent = this, version = version)
   }
 }

core/model/src/main/kotlin/io/getstream/server/driven/core/model/ScreenUi.kt

@@ -0,0 +1,24 @@
+/*
+ * Designed and developed by 2024 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package io.getstream.server.driven.core.model
+
+import androidx.compose.runtime.Immutable
+
+@Immutable
+data class ScreenUi(
+  val version: Int,
+  val components: List<UiComponent>
+)

core/model/src/main/kotlin/io/getstream/server/driven/core/model/TimelineUi.kt

@@ -19,6 +19,7 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 data class TimelineUi(
+  val version: Int,
   val top: TimelineTopUi,
   val center: TimelineCenterUi,
   val bottom: TimelineBottomUi

feature/timeline/src/main/kotlin/io/getstream/server/driven/feature/timeline/Timeline.kt

@@ -37,6 +37,7 @@ import io.getstream.server.driven.core.designsystem.preview.DefaultPreview
 import io.getstream.server.driven.core.designsystem.preview.MockUtils
 import io.getstream.server.driven.core.designsystem.theme.ServerDrivenTheme
 import io.getstream.server.driven.core.model.ImageUi
+import io.getstream.server.driven.core.model.ScreenUi
 import io.getstream.server.driven.core.model.UiComponent
 
 @Composable
@@ -60,7 +61,7 @@ fun ServerDrivenTimeline(
 
 @Composable
 private fun ServerDrivenTimelineContent(
-  timelineUi: List<UiComponent>,
+  timelineUi: ScreenUi,
   navigateToDetails: (UiComponent) -> Unit
 ) {
   Column(
@@ -71,7 +72,7 @@ private fun ServerDrivenTimelineContent(
       .verticalScroll(state = rememberScrollState()),
     verticalArrangement = Arrangement.spacedBy(12.dp)
   ) {
-    timelineUi.forEach { uiComponent ->
+    timelineUi.components.forEach { uiComponent ->
       val modifier = if (uiComponent is ImageUi) {
         Modifier.clickable { navigateToDetails.invoke(uiComponent) }
       } else {
@@ -80,6 +81,7 @@ private fun ServerDrivenTimelineContent(
 
       uiComponent.Consume(
         modifier = modifier,
+        version = timelineUi.version,
         onListItemClicked = { clickedComponent ->
           navigateToDetails.invoke(clickedComponent)
         }
@@ -93,10 +95,13 @@ private fun ServerDrivenTimelineContent(
 private fun ServerDrivenTimelineContentPreview() {
   ServerDrivenTheme {
     ServerDrivenTimelineContent(
-      listOf(
-        MockUtils.mockImageUi,
-        MockUtils.mockTextUi1,
-        MockUtils.mockTextUi2
+      ScreenUi(
+        version = 1,
+        components = listOf(
+          MockUtils.mockImageUi,
+          MockUtils.mockTextUi1,
+          MockUtils.mockTextUi2
+        )
       ),
       navigateToDetails = {}
     )

feature/timeline/src/main/kotlin/io/getstream/server/driven/feature/timeline/TimelineViewModel.kt

@@ -19,11 +19,12 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import dagger.hilt.android.lifecycle.HiltViewModel
 import io.getstream.server.driven.core.data.repository.TimelineRepository
-import io.getstream.server.driven.core.model.UiComponent
+import io.getstream.server.driven.core.model.ScreenUi
 import io.getstream.server.driven.core.model.buildUiComponentList
 import javax.inject.Inject
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.flow.map
@@ -34,9 +35,15 @@ class TimelineViewModel @Inject constructor(
   repository: TimelineRepository
 ) : ViewModel() {
 
-  val timelineUi: StateFlow<List<UiComponent>?> = repository.fetchTimelineUi()
+  val timelineUi: StateFlow<ScreenUi?> = repository.fetchTimelineUi()
     .flatMapLatest { response -> flowOf(response.getOrNull()) }
-    .map { it?.buildUiComponentList() }
+    .filterNotNull()
+    .map {
+      ScreenUi(
+        version = it.version,
+        components = it.buildUiComponentList()
+      )
+    }
     .stateIn(
       scope = viewModelScope,
       started = SharingStarted.WhileSubscribed(5000),