Upgraded showkase to beta-01

build.gradle

@@ -4,15 +4,17 @@ buildscript {
             'androidXTestCore':'1.0.0',
             'androidXTestRules':'1.1.0',
             'assertJ': '3.16.1',
-            'compose': '1.0.0-alpha11',
-            'composeNavigation': '1.0.0-alpha06',
+            'compose': '1.0.0-beta01',
+            'composeActivity': '1.3.0-alpha03',
+            'composeConstraintLayout': '1.0.0-alpha03',
+            'composeNavigation': '1.0.0-alpha08',
             'detekt': '1.7.4',
             'espresso': '3.2.0',
             'gradle': '4.2.0-alpha15',
             'junit' : '4.12',
             'junitImplementation' : '1.1.1',
-            'kotlin': '1.4.21-2',
-            'kotlinCompilerVersion': '1.4.21-2',
+            'kotlin': '1.4.30',
+            'kotlinCompilerVersion': '1.4.30',
             'kotlinCompileTesting': '1.2.8',
             'kotlinPoet': '1.6.0',
             'kotlinXMetadata': '0.1.0',
@@ -27,15 +29,17 @@ buildscript {
     ext.deps = [
             'autoService': "com.google.auto.service:auto-service:${versions.autoService}",
             'compose': [
+                    'activityCompose': "androidx.activity:activity-compose:${versions.composeActivity}",
                     'composeComplier': "androidx.compose:compose-compiler:${versions.compose}",
                     'composeNavigation': "androidx.navigation:navigation-compose:${versions.composeNavigation}",
                     'composeRuntime': "androidx.compose.runtime:runtime:${versions.compose}",
+                    'constraintLayout': "androidx.constraintlayout:constraintlayout-compose:${versions.composeConstraintLayout}",
                     'core': "androidx.compose.ui:ui:${versions.compose}",
                     'foundation': "androidx.compose.foundation:foundation:${versions.compose}",
                     'tooling': "androidx.compose.ui:ui-tooling:${versions.compose}",
                     'layout': "androidx.compose.foundation:foundation-layout:${versions.compose}",
                     'material': "androidx.compose.material:material:${versions.compose}",
-                    'savedInstanceState': "androidx.compose.runtime:runtime-saved-instance-state:${versions.compose}",
+                    'savedInstanceState': "androidx.compose.runtime:runtime-saveable:${versions.compose}",
                     'uiTest': "androidx.compose.ui:ui-test-junit4:${versions.compose}",
                     'uiLiveData': "androidx.compose.runtime:runtime-livedata:${versions.compose}"
             ],
@@ -86,20 +90,6 @@ allprojects {
         jcenter()
         maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
     }
-
-    // Needed due to kotlin bug that is fixed in Kotlin 1.4. Since Compose doesn't yet work with 1.4, 
-    // we'll have to use this compiler flag. 
-    // https://youtrack.jetbrains.com/issue/KT-31734
-    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
-        kotlinOptions {
-            jvmTarget = "1.8"
-            freeCompilerArgs += [
-                    "-Xallow-jvm-ir-dependencies", 
-                    "-Xskip-prerelease-check",
-                    "-XXLanguage:+NonParenthesizedAnnotationsOnFunctionalTypes"
-            ]
-        }
-    }
 }
 
 task clean(type: Delete) {

gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https://services.gradle.org/distributions/gradle-6.7-bin.zip
+distributionUrl=https://services.gradle.org/distributions/gradle-6.8.3-bin.zip

sample-submodule/build.gradle

@@ -65,7 +65,9 @@ dependencies {
     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

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

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
@@ -47,7 +47,7 @@ fun CreditCardComponent(cardName: String) {
         ) {
             Card(
                 shape = RoundedCornerShape(padding4x),
-                modifier = Modifier.preferredWidth(300.dp).aspectRatio(16 / 9f),
+                modifier = Modifier.width(300.dp).aspectRatio(16 / 9f),
                 backgroundColor = MaterialTheme.colors.primary
             ) {
                 Column(verticalArrangement = Arrangement.SpaceBetween) {

sample/build.gradle

@@ -79,7 +79,9 @@ dependencies {
     implementation deps.support.lifecycleExtensions
 
     // 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

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

@@ -12,7 +12,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.onCommit
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -21,7 +20,6 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.nativeCanvas
-import androidx.compose.ui.layout.WithConstraints
 import com.squareup.picasso.Picasso
 import com.squareup.picasso.Target
 

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

@@ -1,8 +1,8 @@
 package com.airbnb.android.showkasesample
 
 import android.os.Bundle
+import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.ui.platform.setContent
 
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {

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

@@ -9,19 +9,22 @@ import androidx.compose.material.BottomNavigationItem
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.savedinstancestate.savedInstanceState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.autoSaver
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.airbnb.android.showkase.annotation.ShowkaseComposable
 import com.airbnb.android.showkase.ui.padding4x
 
 val listItems = listOf("Games", "Apps", "Movies", "Books")
 
 @Composable
 fun BottomNavigationAlwaysShowLabelComponent() {
-    var selectedIndex by savedInstanceState { 0 }
+    var selectedIndex by com.airbnb.android.showkasesample.rememberSaveable { mutableStateOf(0) }
 
     ShowkaseTheme {
         BottomNavigation(modifier = Modifier.padding(padding4x)) {
@@ -47,3 +50,34 @@ fun BottomNavigationAlwaysShowLabelComponent() {
 fun BottomNavigationAlwaysShowLabelComponentPreview() {
     BottomNavigationAlwaysShowLabelComponent()
 }
+
+/**
+ * Added temporarily as there is a bug in beta-01. Should be able to remove this once beta-02 is 
+ * released. More details here - https://issuetracker.google.com/issues/180042685 
+ */
+@Suppress("SpreadOperator")
+@Composable
+fun <T : Any> rememberSaveable(
+    vararg inputs: Any?,
+    stateSaver: Saver<T, out Any> = autoSaver(),
+    key: String? = null,
+    init: () -> MutableState<T>
+): MutableState<T> = rememberSaveable(
+    *inputs,
+    saver = mutableStateSaver(init, stateSaver),
+    key = key,
+    init = init
+)
+
+private fun <T : Any, K : Any> mutableStateSaver(
+    init: () -> MutableState<T>,
+    inner: Saver<T, K>
+) =
+    Saver<MutableState<T>, K>(
+        save = { state ->
+            with(inner) { save(state.value) }
+        },
+        restore = { value ->
+            init().also { it.value = inner.restore(value)!! }
+        }
+    )

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

@@ -3,13 +3,13 @@ package com.airbnb.android.showkasesample
 import androidx.compose.material.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ConstraintLayout
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.preferredHeight
-import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
+import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ListItem
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
@@ -24,11 +24,13 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
+import androidx.constraintlayout.compose.ConstraintLayout
 import com.airbnb.android.showkase.annotation.ShowkaseComposable
 import com.airbnb.android.showkase.ui.padding1x
 import com.airbnb.android.showkase.ui.padding2x
 import com.airbnb.android.showkase.ui.padding4x
 
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun SimpleRow(title: String, subtitle: String) {
     ShowkaseTheme {
@@ -55,8 +57,8 @@ fun SimpleRow(title: String, subtitle: String) {
                 )
             }, icon = {
                 Column(
-                    modifier = Modifier.preferredWidth(60.dp)
-                        .preferredHeight(60.dp)
+                    modifier = Modifier.width(60.dp)
+                        .height(60.dp)
                         .background(color = Color.Gray)
                 ) {}
             })
@@ -68,7 +70,7 @@ fun SimpleRow(title: String, subtitle: String) {
 fun TitleSubtitleThumbnailRow() {
     ShowkaseTheme {
         Card(
-            modifier = Modifier.preferredHeight(120.dp)
+            modifier = Modifier.height(120.dp)
                 .fillMaxWidth()
                 .padding(padding2x),
             shape = RoundedCornerShape(padding1x)
@@ -92,8 +94,8 @@ fun TitleSubtitleThumbnailRow() {
                     start.linkTo(image.end, margin = padding4x)
                 })
 
-                Column(modifier = Modifier.preferredHeight(72.dp)
-                    .preferredWidth(72.dp)
+                Column(modifier = Modifier.height(72.dp)
+                    .width(72.dp)
                     .background(color = Color.Gray)
                     .constrainAs(image) {
                         centerVerticallyTo(parent)
@@ -159,7 +161,7 @@ fun ProductCardRow(imageUrl: String, title: String, subtitle: String) {
         ) {
             NetworkImage(
                 imageUrl = imageUrl,
-                modifier = Modifier.fillMaxWidth().preferredHeight(200.dp)
+                modifier = Modifier.fillMaxWidth().height(200.dp)
             )
             Text(
                 text = title,

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

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Card
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.AmbientContext
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -33,7 +33,7 @@ import com.airbnb.android.showkase.ui.padding4x
 @Preview
 @Composable
 fun CursiveTextComponent() {
-    val context = AmbientContext.current
+    val context = LocalContext.current
     val string = context.getString(R.string.app_name)
 
     ShowkaseTheme {
@@ -53,7 +53,7 @@ fun CursiveTextComponent() {
 @Preview
 @Composable
 fun SerifTextComponentPreview() {
-    val context = AmbientContext.current
+    val context = LocalContext.current
     val string = context.getString(R.string.app_name)
 
     ShowkaseTheme {
@@ -73,7 +73,7 @@ fun SerifTextComponentPreview() {
 @Preview
 @Composable
 fun SansSerifTextComponentPreview() {
-    val context = AmbientContext.current
+    val context = LocalContext.current
     val string = context.getString(R.string.app_name)
 
     ShowkaseTheme {
@@ -92,7 +92,7 @@ fun SansSerifTextComponentPreview() {
 @ShowkaseComposable(name = "H4 Text Row", group = "Text")
 @Composable
 fun H4TextRowComponentPreview() {
-    val context = AmbientContext.current
+    val context = LocalContext.current
     val string = context.getString(R.string.app_name)
 
     ShowkaseTheme {

showkase-processor-testing/build.gradle

@@ -62,6 +62,7 @@ dependencies {
     implementation project(':showkase-processor')
 
     // Compose
+    implementation deps.compose.activityCompose
     implementation deps.compose.composeRuntime
     implementation deps.compose.core
     implementation deps.compose.foundation

showkase-processor-testing/src/androidTest/java/com/airbnb/android/showkase_processor_testing/ShowkaseBrowserTest.kt

@@ -1,13 +1,17 @@
 package com.airbnb.android.showkase_processor_testing
 
+import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.junit4.AndroidComposeTestRule
 import androidx.test.ext.junit.rules.ActivityScenarioRule
 import androidx.test.platform.app.InstrumentationRegistry
 import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
 import androidx.compose.ui.test.performGesture
 import androidx.compose.ui.test.swipeDown
 import com.airbnb.android.showkase.ui.ShowkaseBrowserActivity
 import com.vinaygaba.showcase_processor_testing.createShowkaseBrowserIntent
+import kotlinx.coroutines.delay
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -338,9 +342,11 @@ class ShowcaseBrowserTest {
 
             // Click on "Group 1" to go to the components in a group screen
             clickRowWithText("Group1")
-
+            
             // Click on "Test Composable1" to go to the component details screen
             clickRowWithText("Test Composable1")
+
+            waitForIdle()
 
             // Go back to the components in a group screen
             goBack()

showkase-processor-testing/src/main/java/com/airbnb/android/showkase_processor_testing/TestComposables.kt

@@ -3,7 +3,7 @@ package com.vinaygaba.showcase_processor_testing
 
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.platform.AmbientContext
+import androidx.compose.ui.platform.LocalContext
 import com.airbnb.android.showkase.annotation.ShowkaseComposable
 import com.airbnb.android.showkase.annotation.ShowkaseRoot
 import com.airbnb.android.showkase.annotation.ShowkaseRootModule

showkase/build.gradle

@@ -77,8 +77,10 @@ dependencies {
     implementation deps.support.lifecycleExtensions
 
     // Compose
+    implementation deps.compose.activityCompose
     implementation deps.compose.composeRuntime
     implementation deps.compose.composeNavigation
+    implementation deps.compose.constraintLayout
     implementation deps.compose.core
     implementation deps.compose.foundation
     implementation deps.compose.tooling