M3 implementation more customizable

README.md

@@ -9,12 +9,18 @@ An Android client for Open-Feeedback https://github.com/HugoGresse/open-feedback
 
 The Composable `OpenFeedback` is the entry point to vote on a session. It'll make calls
 between the Firebase which host your OpenFeedback instance and your mobile application. It is
-mandatory to pass the `OpenFeedbackState` to give the Firebase configuration and your open-feedback
-configuration which is common for all sessions of your event.
+mandatory to pass the `OpenFeedbackFirebaseConfig` to give the Firebase instance which is common 
+for all sessions of your event.
+
+Note that it is mandatory to keep this instance unique in your application because it creates the
+`FirebaseApp` instance which is the active connection between your mobile application and the
+OpenFeedback Firebase host. Consider to save this configuration in your custom `Application` class
+or in singleton in your dependency injection.
 
 ```kotlin
 // In your Application class
-val firebaseConfig = FirebaseConfig(
+val openfeedbackFirebaseConfig = OpenFeedbackFirebaseConfig(
+    context = applicationContext,
     projectId = "<your-firebase-open-feedback-project-id>",
     applicationId = "<your-firebase-open-feedback-app-id>",
     apiKey = "<your-firebase-open-feedback-api-key>",
@@ -23,7 +29,7 @@ val firebaseConfig = FirebaseConfig(
 
 // In your Compose screen
 OpenFeedback(
-    config = MyApp.firebaseConfig,
+    config = (application as MyApp).openfeedbackFirebaseConfig,
     projectId = "<your-open-feedback-project-id>",
     sessionId = "<your-open-feedback-session-id>",
     language = "<language-code>"
@@ -32,7 +38,12 @@ OpenFeedback(
 
 That's all!
 
-If you want to see an example, please check the [sample-app](sample-app/src/main/java/io/openfeedback/android/sample/MainActivity.kt).
+See the [sample-app](sample-app/src/main/java/io/openfeedback/android/sample/MainActivity.kt) app 
+module if you want to see this implementation in action.
+
+If you are interested to create your own UI, you can use the component `OpenFeedbackLayout`. This
+`Composable` takes OpenFeedback Model UI in input and you can use `OpenFeedbackViewModel` in the
+viewmodel artifact to get the data from the Firebase host.
 
 ## Installation
 
@@ -43,11 +54,14 @@ repositories {
     mavenCentral()
 }
 
+val openfeedbackVersion = "0.0.6"
 dependencies {
     // Material 2
-    implementation("io.openfeedback:feedback-android-sdk-m2:0.0.6")
+    implementation("io.openfeedback:feedback-android-sdk-m2:$openfeedbackVersion")
     // Material 3
-    implementation("io.openfeedback:feedback-android-sdk-m3:0.0.6")
+    implementation("io.openfeedback:feedback-android-sdk-m3:$openfeedbackVersion")
+    // ViewModel
+    implementation("io.openfeedback:feedback-android-sdk-viewmodel:$openfeedbackVersion")
 }
 ```
 

openfeedback-m2/src/main/java/io/openfeedback/android/m2/OpenFeedbackLayout.kt

@@ -11,26 +11,24 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
-import io.openfeedback.android.FirebaseConfig
+import io.openfeedback.android.viewmodels.OpenFeedbackFirebaseConfig
 import io.openfeedback.android.viewmodels.OpenFeedbackUiState
 import io.openfeedback.android.viewmodels.OpenFeedbackViewModel
 import io.openfeedback.android.viewmodels.models.UISessionFeedback
 import io.openfeedback.android.viewmodels.models.UIVoteItem
 
 @Composable
 fun OpenFeedback(
-    config: FirebaseConfig,
+    config: OpenFeedbackFirebaseConfig,
     projectId: String,
     sessionId: String,
     language: String,
     modifier: Modifier = Modifier,
     loading: @Composable () -> Unit = { Loading(modifier = modifier) }
 ) {
-    val context = LocalContext.current
     val viewModel: OpenFeedbackViewModel = viewModel(
         factory = OpenFeedbackViewModel.Factory.create(
-            context = context,
-            firebaseConfig = config,
+            firebaseApp = config.firebaseApp,
             projectId = projectId,
             sessionId = sessionId,
             language = language

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/OpenFeedbackLayout.kt

@@ -1,42 +1,50 @@
 package io.openfeedback.android.m3
 
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
-import io.openfeedback.android.FirebaseConfig
+import io.openfeedback.android.viewmodels.OpenFeedbackFirebaseConfig
 import io.openfeedback.android.viewmodels.OpenFeedbackUiState
 import io.openfeedback.android.viewmodels.OpenFeedbackViewModel
+import io.openfeedback.android.viewmodels.models.UIDot
 import io.openfeedback.android.viewmodels.models.UISessionFeedback
 import io.openfeedback.android.viewmodels.models.UIVoteItem
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun OpenFeedback(
-    config: FirebaseConfig,
+    config: OpenFeedbackFirebaseConfig,
     projectId: String,
     sessionId: String,
     language: String,
     modifier: Modifier = Modifier,
     loading: @Composable () -> Unit = { Loading(modifier = modifier) }
 ) {
-    val context = LocalContext.current
+    val configuration = LocalConfiguration.current
     val viewModel: OpenFeedbackViewModel = viewModel(
         factory = OpenFeedbackViewModel.Factory.create(
-            context = context,
-            firebaseConfig = config,
+            firebaseApp = config.firebaseApp,
             projectId = projectId,
             sessionId = sessionId,
             language = language
         )
     )
+    val columnCount = if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) 4 else 2
     val uiState = viewModel.uiState.collectAsState()
     when (uiState.value) {
         is OpenFeedbackUiState.Loading -> loading()
@@ -45,7 +53,16 @@ fun OpenFeedback(
             OpenFeedbackLayout(
                 sessionFeedback = session,
                 modifier = modifier,
-                onClick = { voteItem -> viewModel.vote(voteItem = voteItem) }
+                columnCount = columnCount,
+                content = {
+                    VoteCard(
+                        voteModel = it,
+                        onClick = { voteItem -> viewModel.vote(voteItem = voteItem) },
+                        modifier = Modifier
+                            .height(100.dp)
+                            .fillMaxWidth()
+                    )
+                }
             )
         }
     }
@@ -56,10 +73,19 @@ fun OpenFeedback(
 fun OpenFeedbackLayout(
     sessionFeedback: UISessionFeedback,
     modifier: Modifier = Modifier,
-    onClick: (voteItem: UIVoteItem) -> Unit
+    columnCount: Int = 2,
+    horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(8.dp),
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
+    content: @Composable ColumnScope.(UIVoteItem) -> Unit
 ) {
     Column(modifier = modifier) {
-        VoteItems(voteItems = sessionFeedback.voteItem, onClick = onClick)
+        VoteItems(
+            voteItems = sessionFeedback.voteItem,
+            columnCount = columnCount,
+            horizontalArrangement = horizontalArrangement,
+            verticalArrangement = verticalArrangement,
+            content = content
+        )
         Box(
             modifier = Modifier
                 .fillMaxWidth()
@@ -70,3 +96,40 @@ fun OpenFeedbackLayout(
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun OpenFeedbackLayoutPreview() {
+    MaterialTheme {
+        OpenFeedbackLayout(
+            sessionFeedback = UISessionFeedback(
+                comments = emptyList(),
+                listOf(
+                    UIVoteItem(
+                        id = "",
+                        text = "Fun",
+                        dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                        votedByUser = true
+                    ),
+                    UIVoteItem(
+                        id = "",
+                        text = "Fun",
+                        dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                        votedByUser = true
+                    )
+                )
+            ),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            VoteCard(
+                voteModel = it,
+                onClick = {},
+                modifier = Modifier
+                    .height(100.dp)
+                    .fillMaxWidth()
+            )
+        }
+    }
+}

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/VoteCard.kt

@@ -1,33 +1,35 @@
 package io.openfeedback.android.m3
 
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.openfeedback.android.viewmodels.models.UIDot
 import io.openfeedback.android.viewmodels.models.UIVoteItem
 
 @ExperimentalMaterial3Api
 @Composable
-internal fun VoteCard(
+fun VoteCard(
     voteModel: UIVoteItem,
     modifier: Modifier = Modifier,
     style: TextStyle = MaterialTheme.typography.bodyMedium,
     backgroundColor: Color = MaterialTheme.colorScheme.surface,
-    contentColor: Color = MaterialTheme.colorScheme.onSurface,
+    contentColor: Color = contentColorFor(backgroundColor = backgroundColor),
     shape: Shape = MaterialTheme.shapes.medium,
     onClick: (voteItem: UIVoteItem) -> Unit
 ) {
@@ -39,23 +41,32 @@ internal fun VoteCard(
         modifier = modifier,
         onClick = { onClick(voteModel) }
     ) {
-        Box(modifier = Modifier.height(100.dp)) {
-            Canvas(modifier = Modifier.fillMaxSize()) {
-                voteModel.dots.forEach { dot ->
-                    val offset = Offset(x = this.size.width * dot.x, y = this.size.height * dot.y)
-                    drawCircle(
-                        color = Color(
-                            dot.color.substring(0, 2).toInt(16),
-                            dot.color.substring(2, 4).toInt(16),
-                            dot.color.substring(4, 6).toInt(16),
-                            255 / 3
-                        ),
-                        radius = 30.dp.value,
-                        center = offset,
-                        style = Fill
-                    )
+        Box(
+            modifier = Modifier
+                .drawBehind {
+                    voteModel.dots.forEach { dot ->
+                        val offset =
+                            Offset(x = this.size.width * dot.x, y = this.size.height * dot.y)
+                        drawCircle(
+                            color = Color(
+                                dot.color
+                                    .substring(0, 2)
+                                    .toInt(16),
+                                dot.color
+                                    .substring(2, 4)
+                                    .toInt(16),
+                                dot.color
+                                    .substring(4, 6)
+                                    .toInt(16),
+                                255 / 3
+                            ),
+                            radius = 30.dp.value,
+                            center = offset,
+                            style = Fill
+                        )
+                    }
                 }
-            }
+        ) {
             Text(
                 text = voteModel.text,
                 style = style,
@@ -65,3 +76,21 @@ internal fun VoteCard(
         }
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun VoteCardPreview() {
+    MaterialTheme {
+        VoteCard(
+            voteModel = UIVoteItem(
+                id = "",
+                text = "Fun",
+                dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                votedByUser = true
+            ),
+            onClick = {},
+            modifier = Modifier.size(height = 100.dp, width = 200.dp)
+        )
+    }
+}