Setup Showkase and add some Preview. WIP

app/build.gradle

@@ -125,4 +125,7 @@ dependencies {
     debugImplementation "androidx.compose.ui:ui-tooling"
     debugImplementation "androidx.compose.ui:ui-test-manifest"
     implementation 'com.airbnb.android:mavericks-compose:3.0.1'
+
+    implementation("com.airbnb.android:showkase:1.0.0-beta14")
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }

app/src/main/java/io/element/android/x/MainActivity.kt

@@ -13,13 +13,23 @@ import androidx.compose.animation.AnimatedContentScope
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
 import androidx.navigation.NavHostController
+import com.airbnb.android.showkase.models.Showkase
 import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
 import com.ramcosta.composedestinations.DestinationsNavHost
 import com.ramcosta.composedestinations.animations.defaults.RootNavGraphDefaultAnimations
@@ -40,8 +50,38 @@ class MainActivity : ComponentActivity() {
         // FIXME Scrolling is broken on login screens. Commenting this line fixes the issue.
         WindowCompat.setDecorFitsSystemWindows(window, false)
         setContent {
-            ElementXTheme {
+            Box(modifier = Modifier.fillMaxSize()) {
-                MainScreen(viewModel = viewModel)
+                ElementXTheme {
+                    MainScreen(viewModel = viewModel)
+                }
+                ShowkaseButton(
+                    onClick = { startActivity(Showkase.getBrowserIntent(this@MainActivity)) }
+                )
+            }
+        }
+    }
+
+}
+
+@Composable
+private fun ShowkaseButton(
+    onClick: () -> Unit = {}
+) {
+    val showkaseButtonVisible = remember { mutableStateOf(true) }
+    if (showkaseButtonVisible.value) {
+        Button(
+            modifier = Modifier
+                .padding(top = 32.dp, start = 16.dp),
+            onClick = onClick
+        ) {
+            Text(text = "Showkase Browser")
+            IconButton(
+                modifier = Modifier
+                    .padding(start = 8.dp)
+                    .size(16.dp),
+                onClick = { showkaseButtonVisible.value = false },
+            ) {
+                Icon(imageVector = Icons.Filled.Close, contentDescription = "")
             }
         }
     }
@@ -122,6 +162,6 @@ private fun LogNavigation(navController: NavHostController) {
 
 @Composable
 @Preview
-private fun MainContentPreview() {
+fun MainContentPreview() {
     MainContent(startRoute = OnBoardingScreenNavigationDestination)
 }

app/src/main/java/io/element/android/x/Showkase.kt

@@ -0,0 +1,7 @@
+package io.element.android.x
+
+import com.airbnb.android.showkase.annotation.ShowkaseRoot
+import com.airbnb.android.showkase.annotation.ShowkaseRootModule
+
+@ShowkaseRoot
+class ElementRootModule : ShowkaseRootModule

build.gradle

@@ -1,8 +1,10 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
+// TODO Convert to .kts
 plugins {
     id 'com.android.application' version '7.3.0' apply false
     id 'com.android.library' version '7.3.0' apply false
     id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
+    id 'com.google.devtools.ksp' version '1.7.20-1.0.7' apply false
 }
 
 task clean(type: Delete) {

docs/usefulLinks.md

@@ -1,3 +1,7 @@
+### VersionCatalog
+
+
+
 
 ### Jetpack Compose
 

features/login/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -16,4 +18,7 @@ dependencies {
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.3")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
+
+    // TODO Move to common config
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }

features/login/src/main/java/io/element/android/x/features/login/LoginScreen.kt

@@ -202,7 +202,7 @@ fun LoginContent(
 
 @Composable
 @Preview
-private fun LoginContentPreview() {
+fun LoginContentPreview() {
     ElementXTheme(darkTheme = false) {
         LoginContent(
             state = LoginViewState(

features/login/src/main/java/io/element/android/x/features/login/changeserver/ChangeServerScreen.kt

@@ -150,7 +150,7 @@ fun ChangeServerContent(
 
 @Composable
 @Preview
-private fun ChangeServerContentPreview() {
+fun ChangeServerContentPreview() {
     ChangeServerContent(
         state = ChangeServerViewState(homeserver = "matrix.org"),
     )

features/messages/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -19,4 +21,7 @@ dependencies {
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.3")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
-}
+
+    // TODO Move to common config
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
+}

features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt

@@ -515,7 +515,7 @@ class MessagesItemGroupPositionToMessagesTimelineItemContentProvider :
 
 @Preview(showBackground = true)
 @Composable
-private fun TimelineItemsPreview(
+fun TimelineItemsPreview(
     @PreviewParameter(MessagesTimelineItemContentProvider::class)
     content: MessagesTimelineItemContent
 ) {

features/onboarding/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -17,4 +19,6 @@ dependencies {
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.3")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
+    // TODO Move to common config
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }

features/roomlist/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -17,4 +19,6 @@ dependencies {
     testImplementation("junit:junit:4.13.2")
     androidTestImplementation("androidx.test.ext:junit:1.1.3")
     androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
+    // TODO Move to common config
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }

features/roomlist/src/main/java/io/element/android/x/features/roomlist/RoomListScreen.kt

@@ -145,7 +145,7 @@ private fun LazyListState.isScrolled(): Boolean {
 
 @Preview
 @Composable
-private fun PreviewableRoomListContent() {
+fun PreviewableRoomListContent() {
     ElementXTheme(darkTheme = false) {
         RoomListContent(
             roomSummaries = stubbedRoomSummaries(),
@@ -162,7 +162,7 @@ private fun PreviewableRoomListContent() {
 
 @Preview
 @Composable
-private fun PreviewableDarkRoomListContent() {
+fun PreviewableDarkRoomListContent() {
     ElementXTheme(darkTheme = true) {
         RoomListContent(
             roomSummaries = stubbedRoomSummaries(),

gradle/libs.versions.toml

@@ -3,6 +3,7 @@
 android_gradle_plugin = "7.3.1"
 firebase_gradle_plugin = "3.0.2"
 kotlin = "1.7.20"
+ksp = "1.7.20-1.0.7"
 
 # AndroidX
 material = "1.6.1"
@@ -92,3 +93,5 @@ wysiwyg = { module = "io.element.android:wysiwyg", version.ref = "wysiwyg" }
 
 [bundles]
 
+[plugins]
+ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }

libraries/designsystem/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -9,5 +11,7 @@ android {
         // Should not be there, but this is a POC
         implementation("io.coil-kt:coil-compose:2.2.1")
         implementation(libs.accompanist.systemui)
+        // TODO Move to common config
+        ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
     }
 }

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt

@@ -1,8 +1,11 @@
 package io.element.android.x.designsystem
 
 import androidx.compose.ui.graphics.Color
+import com.airbnb.android.showkase.annotation.ShowkaseColor
 
+@ShowkaseColor(name = "LightGrey", group = "Material Design")
 val LightGrey = Color(0x993C3C43)
+@ShowkaseColor(name = "DarkGrey", group = "Material Design")
 val DarkGrey = Color(0x99EBEBF5)
 
 val AvatarGradientStart = Color(0xFF4CA1AF)

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Type.kt

@@ -7,24 +7,31 @@ import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
+import com.airbnb.android.showkase.annotation.ShowkaseTypography
+
+
+@ShowkaseTypography(name = "Body Large", group = "Element")
+val bodyLarge = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Normal,
+    fontSize = 16.sp,
+    lineHeight = 24.sp,
+    letterSpacing = 0.5.sp
+)
+
+@ShowkaseTypography(name = "Headline Small", group = "Element")
+val headlineSmall = TextStyle(
+    fontFamily = FontFamily.Default,
+    fontWeight = FontWeight.Bold,
+    fontSize = 32.sp,
+    lineHeight = 24.sp,
+    letterSpacing = 0.5.sp
+)
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-
+    bodyLarge = bodyLarge,
-    bodyLarge = TextStyle(
+    headlineSmall = headlineSmall,
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp
-    ),
-    headlineSmall = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Bold,
-        fontSize = 32.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp
-    ),
     /* Other default text styles to override
     titleLarge = TextStyle(
         fontFamily = FontFamily.Default,

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/ProgressDialog.kt

@@ -51,6 +51,6 @@ fun ProgressDialog(text: String? = null, onDismiss: () -> Unit = {}) {
 
 @Composable
 @Preview
-private fun ProgressDialogPreview() {
+fun ProgressDialogPreview() {
     ProgressDialog("test dialog content")
 }

libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/dialogs/ConfirmationDialog.kt

@@ -71,7 +71,7 @@ fun ConfirmationDialog(
 
 @Composable
 @Preview
-private fun ConfirmationDialogPreview() {
+fun ConfirmationDialogPreview() {
     ConfirmationDialog(
         isDisplayed = remember { mutableStateOf(true) },
         title = "Title",

libraries/textcomposer/build.gradle.kts

@@ -1,5 +1,7 @@
 plugins {
     id("io.element.android-compose")
+    // TODO Move to common config
+    id("com.google.devtools.ksp") version "1.7.20-1.0.7"
 }
 
 android {
@@ -15,4 +17,6 @@ dependencies {
     implementation(libs.wysiwyg)
     implementation(libs.androidx.constraintlayout)
     implementation("com.google.android.material:material:1.7.0")
+    // TODO Move to common config
+    ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }

plugins/src/main/java/io.element.android-compose.gradle.kts

@@ -5,6 +5,8 @@ import extension.proguardConfig
 plugins {
     id("com.android.library")
     id("kotlin-android")
+//    alias(libs.plugins.ksp)
+//    id("com.google.devtools.ksp") // version "1.7.20-1.0.7"
 }
 
 android {
@@ -28,4 +30,6 @@ dependencies {
     debugImplementation("androidx.compose.ui:ui-tooling")
     debugImplementation("androidx.compose.ui:ui-test-manifest")
 
+    implementation("com.airbnb.android:showkase:1.0.0-beta14")
+  //  ksp("com.airbnb.android:showkase-processor:1.0.0-beta14")
 }