Add support for CustomPreviewAnnotations in Showkase 🚿 🌈

.github/workflows/android.yml

@@ -92,7 +92,7 @@ jobs:
           api-level: ${{ matrix.api-level }}
           target: ${{ matrix.target }}
           arch: x86_64
-          script: ./gradlew connectedCheck --no-daemon --stacktrace -PuseKsp=false --debug
+          script: ./gradlew connectedCheck --no-daemon --stacktrace --debug
 
       - name: Run UI Tests w/ KSP
         uses: reactivecircus/android-emulator-runner@v2

sample-submodule/src/main/java/com/airbnb/android/submodule/showkasesample/FontPreview.kt

@@ -0,0 +1,8 @@
+package com.airbnb.android.submodule.showkasesample
+
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(name = "Normal font size", group = "FontPreview", fontScale = 1f)
+@Preview(name = "High font size", group = "FontPreview", fontScale = 1.5f)
+@Preview(name = "Super High font size", group = "FontPreview", fontScale = 2f)
+annotation class FontPreview

sample/build.gradle

@@ -65,11 +65,13 @@ android {
 if (project.hasProperty("useKsp")) {
     ksp {
         arg("skipPrivatePreviews", "true")
+        arg("multiPreviewTypes", "com.airbnb.android.submodule.showkasesample.FontPreview")
     }
 } else {
     kapt {
         arguments {
             arg("skipPrivatePreviews", "true")
+            arg("multiPreviewTypes", "com.airbnb.android.submodule.showkasesample.FontPreview")
         }
     }
 }

sample/src/main/java/com/airbnb/android/showkasesample/CustomShape.kt

@@ -0,0 +1,35 @@
+package com.airbnb.android.showkasesample
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.airbnb.android.submodule.showkasesample.FontPreview
+
+@Preview(name = "Shape 100 by 100", group = "Shapes", widthDp = 100, heightDp = 100)
+@Preview(name = "Shape 150 by 150", group = "Shapes", widthDp = 150, heightDp = 150)
+annotation class CustomShape
+
+@CustomShape
+@Composable
+fun CustomRoundedBlueSquare() {
+    Box(modifier = Modifier
+        .size(40.dp)
+        .background(Color.Blue)
+        .clip(RoundedCornerShape(8.dp)))
+}
+
+@FontPreview
+@Composable
+fun CustomRoundedSquareWithText() {
+    Box(Modifier.size(100.dp).clip(RoundedCornerShape(8.dp))) {
+        Text("This is a rounded square!")
+    }
+}

showkase-annotation/src/main/java/com/airbnb/android/showkase/annotation/ShowkaseMultiPreviewCodegenMetadata.kt

@@ -0,0 +1,10 @@
+package com.airbnb.android.showkase.annotation
+@Target(AnnotationTarget.FUNCTION)
+annotation class ShowkaseMultiPreviewCodegenMetadata(
+    val previewName: String,
+    val previewGroup: String,
+    val supportTypeQualifiedName: String,
+    val packageName: String,
+    val showkaseWidth: Int,
+    val showkaseHeight: Int,
+)

showkase-browser-testing-submodule/src/main/java/com/vinaygaba/showkase_browser_testing_submodule/CustomSizePreviews.kt

@@ -0,0 +1,12 @@
+@file:Suppress("PackageNaming")
+
+package com.vinaygaba.showkase_browser_testing_submodule
+
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(name = "CustomSize 100 * 100", widthDp = 100, heightDp = 100, group = "CustomSubmodulePreview")
+@Preview(name = "CustomSize 200 * 200", widthDp = 200, heightDp = 200, group = "CustomSubmodulePreview")
+annotation class CustomSizePreview
+
+@Preview(name = "Custom Font Size 1.2f", fontScale = 1.2f, group = "Custom Size Submodule")
+annotation class CustomFontSizePreview

showkase-browser-testing-submodule/src/main/java/com/vinaygaba/showkase_browser_testing_submodule/SubmoduleTestComposables.kt

@@ -1,12 +1,38 @@
 @file:Suppress("PackageNaming")
+
 package com.vinaygaba.showkase_browser_testing_submodule
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 import com.airbnb.android.showkase.annotation.ShowkaseComposable
 
 @ShowkaseComposable(name = "Submodule Component", group = "Submodule")
 @Composable
 fun SubmoduleComposable() {
     BasicText(text = "Submodule Component")
 }
+
+@CustomFontSizePreview
+@Composable
+fun CustomSubmoduleText() {
+    BasicText(text = "Submodule text composable")
+}
+
+@CustomSizePreview
+@Composable
+fun CustomShape() {
+    Box(
+        modifier = Modifier
+            .size(20.dp)
+            .background(Color.Blue)
+            .clip(CircleShape)
+    )
+}

showkase-browser-testing/src/androidTest/java/com/airbnb/android/showkase_browser_testing/ShowkaseBrowserTest.kt

@@ -41,9 +41,9 @@ class ShowcaseBrowserTest {
     // in Kotlin 1.6. It will be available in the old backend in Kotlin version 1.7.20.
     // See https://youtrack.jetbrains.com/issue/KT-49682 for more information about this.
     private val componentSize = if (BuildConfig.IS_RUNNING_KSP) {
-        11
+        17
     } else {
-        7
+        9
     }
 
     @Test
@@ -73,8 +73,6 @@ class ShowcaseBrowserTest {
             verifyRowsWithTextAreDisplayed(
                 "Group1 (2)",
                 "Group2 (1)",
-                "Group3 (2)",
-                "Submodule (1)"
             )
         }
     }
@@ -322,6 +320,12 @@ class ShowcaseBrowserTest {
             // Select components
             clickRowWithText("Components ($componentSize)")
 
+            onRoot().performTouchInput {
+                swipeUp()
+            }
+
+            waitForIdle()
+
             // Select Group 3
             clickRowWithText("Group3 (2)")
 
@@ -459,7 +463,17 @@ class ShowcaseBrowserTest {
             goBack()
 
             // Confirm that we are in the right screen
-            verifyRowsWithTextAreDisplayed("Group1 (2)", "Group2 (1)", "Group3 (2)")
+            verifyRowsWithTextAreDisplayed("Group1 (2)", "Group2 (1)")
+
+            onRoot().performTouchInput {
+                swipeUp()
+            }
+
+            waitForIdle()
+
+            // Confirm that we are in the right screen
+            verifyRowsWithTextAreDisplayed("Group3 (2)")
+
 
             // Go back to the landing screen
             goBack()
@@ -560,6 +574,12 @@ class ShowcaseBrowserTest {
             // Tap on the "Components" row
             clickRowWithText("Components ($componentSize)")
 
+            onRoot().performTouchInput {
+                swipeUp()
+            }
+
+            waitForIdle()
+
             // Select "Group4"
             clickRowWithText("Group4 (1)")
 
@@ -656,12 +676,18 @@ class ShowcaseBrowserTest {
             composeTestRule.apply {
 
                 verifyLandingScreen(
-                    components = 11,
+                    components = componentSize,
                     typography = 13,
                     colors = 4,
                 )
                 // Tap on the "Components" row
-                clickRowWithText("Components (11)")
+                clickRowWithText("Components ($componentSize)")
+
+                waitForIdle()
+
+                onRoot().performTouchInput {
+                    swipeUp()
+                }
 
                 waitForIdle()
 
@@ -678,4 +704,84 @@ class ShowcaseBrowserTest {
             }
         }
     }
+
+    @Test
+    fun customPreviewShowsUpInBrowser() {
+        composeTestRule.apply {
+
+            verifyLandingScreen(
+                components = componentSize,
+                typography = 13,
+                colors = 4,
+            )
+            // Tap on the "Components" row
+            clickRowWithText("Components ($componentSize)")
+
+            waitForIdle()
+
+            clickRowWithText("Custom Text (1)")
+
+            waitForIdle()
+
+            // Verify that they are all displayed and treated as different components
+            onNodeWithText("PreviewCustomTextLight - Custom Text Dark").assertIsDisplayed()
+
+        }
+    }
+
+    @Test
+    fun customSubmodulePreviewShowsUpInBrowser() {
+        composeTestRule.apply {
+
+            verifyLandingScreen(
+                components = componentSize,
+                typography = 13,
+                colors = 4,
+            )
+            // Tap on the "Components" row
+            clickRowWithText("Components ($componentSize)")
+
+            waitForIdle()
+
+            onNodeWithText("Custom Size Submodule (1)").performScrollTo()
+
+            waitForIdle()
+
+            clickRowWithText("Custom Size Submodule (1)")
+
+            waitForIdle()
+
+            // Verify that they are all displayed and treated as different components
+            onNodeWithText("CustomSubmoduleText - Custom Font Size 1.2f").assertIsDisplayed()
+
+        }
+    }
+
+    @Test
+    fun customStackedSubmodulePreviewShowsUpInBrowserForKsp() {
+        if (BuildConfig.IS_RUNNING_KSP) {
+
+            composeTestRule.apply {
+
+                verifyLandingScreen(
+                    components = componentSize,
+                    typography = 13,
+                    colors = 4,
+                )
+                // Tap on the "Components" row
+                clickRowWithText("Components ($componentSize)")
+
+                waitForIdle()
+
+                clickRowWithText("CustomSubmodulePreview (2)")
+
+                waitForIdle()
+
+                // Verify that they are all displayed and treated as different components
+                onNodeWithText("CustomShape - CustomSize 200 * 200").assertIsDisplayed()
+                onNodeWithText("CustomShape - CustomSize 100 * 100").assertIsDisplayed()
+
+            }
+        }
+    }
 }

showkase-browser-testing/src/main/java/com/airbnb/android/showkase_browser_testing/TestComposables.kt

@@ -67,8 +67,7 @@ fun TestComposable8() {
     BasicText(text = "Test Composable9and10")
 }
 
-// Adding this to see on the UI tests that this compiles.
-// Will remove it when we actually supports MultiPreviewAnnotations.
+
 @Preview(
     name = "Custom Text Light",
     group = "Button",
@@ -81,11 +80,24 @@ fun TestComposable8() {
 )
 annotation class CustomButtonPreview
 
+@Preview(
+    name = "Custom Text Dark",
+    group = "Custom Text",
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+)
+annotation class CustomTextPreview
+
 @CustomButtonPreview
 @Composable
 fun PreviewCustomText() {
     BasicText(text = "MultiPreviewAnnotation!")
 }
 
+@CustomTextPreview
+@Composable
+fun PreviewCustomTextLight() {
+    BasicText(text = "CustomPreviewAnnotation!")
+}
+
 @ShowkaseRoot
 class MyRootModule: ShowkaseRootModule

showkase-processor-testing/src/test/java/com/airbnb/android/showkase_processor_testing/BaseProcessorTest.kt

@@ -107,6 +107,7 @@ abstract class BaseProcessorTest {
         if (UPDATE_TEST_OUTPUTS) {
             generatedSources.forEach {
                 println("Generated: ${it.name}")
+                println("Generated: ${it.readText()}")
                 it.copyTo(File(outputDir, it.name))
             }
         } else {

showkase-processor-testing/src/test/java/com/airbnb/android/showkase_processor_testing/ShowkaseProcessorTest.kt

@@ -560,7 +560,15 @@ class ShowkaseProcessorTest : BaseProcessorTest() {
 
     @Test
     fun `composable function with multiple preview functions compiles`() {
-        compileInputsAndVerifyOutputs()
+        // Testing only KAPT here since some of these previews are stacked.
+        // This is yielding different output as repeatable annotations
+        // are not yet supported by KAPT.
+        compileInputsAndVerifyOutputs(modes = listOf(Mode.KAPT))
+    }
+
+    @Test
+    fun `composable function with multiple preview functions compiles ksp`() {
+        compileInputsAndVerifyOutputs(modes = listOf(Mode.KSP))
     }
 
     @Test
@@ -574,5 +582,34 @@ class ShowkaseProcessorTest : BaseProcessorTest() {
         // This functionality is only supported with KSP for now.
         compileInputsAndVerifyOutputs(modes = listOf(Mode.KSP))
     }
+
+    @Test
+    fun `composable function with custom preview annotation generates output`() {
+        compileInputsAndVerifyOutputs(modes = listOf(Mode.KAPT,  Mode.KSP), options = mutableMapOf("multiPreviewTypes" to "com.airbnb.android.showkase_processor_testing.ThemePreview"))
+    }
+
+    @Test
+    fun `composable function with custom preview annotation with preview param generates output`() {
+        compileInputsAndVerifyOutputs(modes = listOf(Mode.KAPT,  Mode.KSP), options = mutableMapOf("multiPreviewTypes" to "com.airbnb.android.showkase_processor_testing.ThemePreview"))
+    }
+
+    @Test
+    fun `composable function with repeatable custom preview annotation generates output`() {
+        // This is only supported by KSP for now
+        compileInputsAndVerifyOutputs(modes = listOf(Mode.KSP), options = mutableMapOf("multiPreviewTypes" to "com.airbnb.android.showkase_processor_testing.ThemePreview"))
+    }
+
+    @Test
+    fun `composable function with multiple repeatable custom preview annotation generates output`() {
+        // This is only supported by KSP for now
+        compileInputsAndVerifyOutputs(
+            modes = listOf(Mode.KSP),
+            options = mutableMapOf(
+                "multiPreviewTypes" to
+                        "com.airbnb.android.showkase_processor_testing.ThemePreview, " +
+                        "com.airbnb.android.showkase_processor_testing.FontPreview"
+            )
+        )
+    }
 }