Add support for CustomPreviewAnnotations in Showkase 🚿 🌈 (#303)

* Add processing functions in showkase processor to write to internal custom annotation and return components annotated by the annotation

* Add support for crossmodule custom annotation

Retrieving metadata from classpath

* Add test for processing test for KSP

* Add comment about autogenetated file for the showkaseCustomAnnotationMetadata file gen

* Add supported custom annotation types to supported types

* Add ShowkaseBrowser tests and processor test for CustomPreviewAnnotation cases

* Add paparazzi test for custom preview annotation

* Add processor test for Custom preview annotation with injected preview parameter

* Fix detekt issue

* Regenerate paparazzi pictures

* Fix detekt issue

* update ksp flag on running kapt ui test

we are checking if the flag is present, not that it is true

* Update paparazzi screenshots

* Add scroll actions so ensure we are verifying the components

With the custom annotation feature we are having a bit to many components for the test emulator. We need to scroll town the page in the test to ensure that the components that we are verifying are visible

* Address review comments

* Remove compiler args for custom previews

This was done because we figured out that the metadata generation strategy works and this will give a better result to the enduser.

* Address review comments

* Remove redundant annotation check

* Add Seccond sample submodule

* Add showkase browser test submodule and multimodular tests

* Regenerate screenshots to screenshot tests for new submodule

* Add case for multi modular processing and make it work for KAPT

* Update compiler args to be seperate args

* Add missing compiler arg in test

* Regenerate screenshot tests

.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-2/.gitignore

@@ -0,0 +1 @@
+/build

sample-submodule-2/build.gradle

@@ -0,0 +1,87 @@
+plugins {
+    id 'com.android.library'
+    id 'kotlin-android'
+}
+
+if (project.hasProperty('useKsp')) {
+    apply plugin: 'com.google.devtools.ksp'
+} else {
+    apply plugin: 'kotlin-kapt'
+    kapt {
+        correctErrorTypes = true
+        arguments {
+            arg("multiPreviewType", "com.airbnb.android.submodule.showkasesample.FontPreview")
+        }
+    }
+}
+
+android {
+    compileSdkVersion 32
+
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 32
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_11
+        targetCompatibility JavaVersion.VERSION_11
+    }
+    kotlinOptions {
+        jvmTarget = '11'
+    }
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerVersion "${versions.kotlinCompilerVersion}"
+        kotlinCompilerExtensionVersion "${versions.composeCompiler}"
+
+    }
+    // Added to avoid this error -
+    // Execution failed for task ':app:mergeDebugAndroidTestJavaResource'.
+    // > A failure occurred while executing com.android.build.gradle.internal.tasks.MergeJavaResWorkAction
+    // > 2 files found with path 'META-INF/AL2.0' from inputs:
+    packagingOptions {
+        exclude 'META-INF/AL2.0'
+        exclude 'META-INF/LGPL2.1'
+    }
+}
+
+dependencies {
+    // Support Libraries
+    implementation deps.support.appCompat
+    implementation deps.support.ktx
+    implementation deps.support.lifecycleExtensions
+
+    // Showkase
+    implementation project(':showkase')
+    implementation project(':sample-submodule')
+
+    if (project.hasProperty('useKsp')) {
+        ksp project(':showkase-processor')
+    } else {
+        kapt project(':showkase-processor')
+    }
+
+    // Compose
+    implementation deps.compose.activityCompose
+    implementation deps.compose.composeRuntime
+    implementation deps.compose.constraintLayout
+    implementation deps.compose.core
+    implementation deps.compose.foundation
+    implementation deps.compose.tooling
+    implementation deps.compose.layout
+    implementation deps.compose.material
+    implementation deps.compose.savedInstanceState
+    implementation deps.compose.uiLiveData
+    androidTestImplementation deps.compose.uiTest
+}

sample-submodule-2/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

sample-submodule-2/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest package="com.airbnb.android.second.submodule">
+
+</manifest>

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

@@ -0,0 +1,12 @@
+package com.airbnb.android.submodule.showkasesample
+
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+
+@FontPreview
+@Composable
+fun TextPreview() {
+    Text(
+        text = "Some Font Preview"
+    )
+}

sample-submodule-2/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="name">Sample Second Submodule</string>
+</resources>

sample-submodule/build.gradle

@@ -9,6 +9,10 @@ if (project.hasProperty('useKsp')) {
     apply plugin: 'kotlin-kapt'
     kapt {
         correctErrorTypes = true
+        arguments {
+            arg("multiPreviewType","com.airbnb.android.submodule.showkasesample.LocalePreview")
+            arg("multiPreviewType", "com.airbnb.android.submodule.showkasesample.FontPreview")
+        }
     }
 }
 

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

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

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

@@ -0,0 +1,6 @@
+package com.airbnb.android.submodule.showkasesample
+
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(name = "Norwegian", group = "LocalePreview", locale = "nb")
+annotation class LocalePreview

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

@@ -0,0 +1,9 @@
+package com.airbnb.android.submodule.showkasesample
+
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+
+@Composable
+fun TownNamesPreview() {
+    Text(text = "New York")
+}

sample/build.gradle

@@ -81,6 +81,7 @@ dependencies {
     //  Figure out a way to enable using debugImplementation
     implementation project(':showkase')
     implementation project(':sample-submodule')
+    implementation project(':sample-submodule-2')
     if (project.hasProperty('useKsp')) {
         ksp project(':showkase-processor')
         kspAndroidTest project(':showkase-processor')

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!")
+    }
+}

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

@@ -16,6 +16,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.sp
 import com.airbnb.android.showkase.annotation.ShowkaseComposable
 import com.airbnb.android.showkase.ui.padding4x
+import com.airbnb.android.submodule.showkasesample.LocalePreview
 
 /**
  * This component shows some static text in cursive text style. 
@@ -39,7 +40,9 @@ fun CursiveTextComponent() {
     ShowkaseTheme {
         Card {
             Text(
-                text = string, modifier = Modifier.fillMaxWidth().padding(padding4x),
+                text = string, modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(padding4x),
                 style = TextStyle(
                     fontSize = 16.sp, fontWeight = FontWeight.Bold,
                     fontFamily = FontFamily.Cursive
@@ -59,7 +62,9 @@ fun SerifTextComponentPreview() {
     ShowkaseTheme {
         Card {
             Text(
-                text = string, modifier = Modifier.fillMaxWidth().padding(padding4x),
+                text = string, modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(padding4x),
                 style = TextStyle(
                     fontSize = 16.sp, fontWeight = FontWeight.Bold,
                     fontFamily = FontFamily.Serif
@@ -79,7 +84,9 @@ fun SansSerifTextComponentPreview() {
     ShowkaseTheme {
         Card {
             Text(
-                text = string, modifier = Modifier.fillMaxWidth().padding(padding4x),
+                text = string, modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(padding4x),
                 style = TextStyle(
                     fontSize = 16.sp, fontWeight = FontWeight.Bold,
                     fontFamily = FontFamily.SansSerif
@@ -99,7 +106,9 @@ fun H4TextRowComponentPreview() {
         Card {
             Text(
                 text = string,
-                modifier = Modifier.fillMaxWidth().padding(padding4x),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(padding4x),
                 style = Material.h4
             )
         }
@@ -128,7 +137,9 @@ fun H6TextRowComponent(text: String) {
         Card {
             Text(
                 text = text,
-                modifier = Modifier.fillMaxWidth().padding(padding4x),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(padding4x),
                 style = Material.h6
             )
         }
@@ -154,3 +165,9 @@ fun H6TextRowComponentPreviewWithSpecialCharInPreview(
 ) {
     H6TextRowComponent(person.name)
 }
+
+@LocalePreview
+@Composable
+fun EnglishText() {
+    Text(text = "Some english text")
+}

settings.gradle

@@ -5,9 +5,11 @@ include ':showkase-processor-testing'
 include ':showkase-annotation'
 include ':sample'
 include ':sample-submodule'
+include ':sample-submodule-2'
 include ':showkase-screenshot-testing'
 include ':showkase-browser-testing'
 include ':showkase-browser-testing-submodule'
+include ':showkase-browser-testing-submodule-2'
 include ':showkase-screenshot-testing-shot'
 include ':showkase-screenshot-testing-paparazzi-sample'
 include ':showkase-screenshot-testing-paparazzi'

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-2/.gitignore

@@ -0,0 +1 @@
+/build