Merge pull request #1165 from Automattic/update/showkase

Adding Showkase to manage our Compose components

app/src/main/java/au/com/shiftyjelly/pocketcasts/showkase/AppShowkaseRootModule.kt

@@ -0,0 +1,7 @@
+package au.com.shiftyjelly.pocketcasts.showkase
+
+import com.airbnb.android.showkase.annotation.ShowkaseRoot
+import com.airbnb.android.showkase.annotation.ShowkaseRootModule
+
+@ShowkaseRoot
+class AppShowkaseRootModule : ShowkaseRootModule

base.gradle

@@ -80,6 +80,10 @@ android {
         }
     }
 
+    ksp {
+        arg("skipPrivatePreviews", "true")
+    }
+
     if (canSignRelease) {
         signingConfigs {
             release {
@@ -243,9 +247,11 @@ dependencies {
     implementation libs.media3ExoplayerHls
     implementation libs.media3Extractor
     implementation libs.media3Ui
+    implementation libs.showkase
 
     ksp libs.moshiKotlinCompile
     ksp libs.glideCompile
+    ksp libs.showkaseProcessor
     // Dagger doesn't support KSP yet https://github.com/google/dagger/issues/2349
     kapt libs.hiltCompiler
     kapt libs.hiltDaggerCompiler

dependencies.gradle

@@ -294,6 +294,8 @@ project.ext {
             // AboutLibraries - https://github.com/mikepenz/AboutLibraries
             aboutLibrariesCore: 'com.mikepenz:aboutlibraries-core:10.5.0',
             aboutLibrariesCompose: 'com.mikepenz:aboutlibraries-compose:10.5.0',
-
+            // Showkase
+            showkase: 'com.airbnb.android:showkase:1.0.0-beta18',
+            showkaseProcessor: 'com.airbnb.android:showkase-processor:1.0.0-beta18',
     ]
 }

modules/features/account/src/main/java/au/com/shiftyjelly/pocketcasts/account/onboarding/OnboardingForgotPasswordPage.kt

@@ -144,7 +144,7 @@ fun OnboardingForgotPasswordPage(
 
 @Preview
 @Composable
-fun OnboardingForgotPasswordPreview(
+private fun OnboardingForgotPasswordPreview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {

modules/features/account/src/main/java/au/com/shiftyjelly/pocketcasts/account/onboarding/OnboardingLoginPage.kt

@@ -148,7 +148,7 @@ internal fun OnboardingLoginPage(
 
 @Preview(showBackground = true)
 @Composable
-fun OnboardingLoginPage_Preview(
+private fun OnboardingLoginPage_Preview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {

modules/features/account/src/main/java/au/com/shiftyjelly/pocketcasts/account/onboarding/recommendations/OnboardingRecommendationsSearchPage.kt

@@ -132,7 +132,7 @@ fun OnboardingRecommendationsSearchPage(
 
 @Preview
 @Composable
-fun OnboardingRecommendationSearchPage_Preview(
+private fun OnboardingRecommendationSearchPage_Preview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {

modules/features/profile/src/main/java/au/com/shiftyjelly/pocketcasts/profile/CancelConfirmationFragment.kt

@@ -262,7 +262,7 @@ class CancelConfirmationFragment : BaseDialogFragment() {
 
     @Preview(showBackground = true)
     @Composable
-    fun CancelConfirmationView_Preview(
+    private fun CancelConfirmationViewPreview(
         @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
     ) {
         AppThemeWithBackground(themeType) {

modules/features/search/src/main/java/au/com/shiftyjelly/pocketcasts/search/SearchInlineResultsPage.kt

@@ -298,7 +298,7 @@ private fun MessageView(
 
 @Preview
 @Composable
-fun SearchResultsViewPreview(
+private fun SearchResultsViewPreview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {
@@ -352,7 +352,7 @@ fun SearchResultsViewPreview(
 
 @Preview
 @Composable
-fun NoResultsViewPreview(
+private fun NoResultsViewPreview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {
@@ -362,7 +362,7 @@ fun NoResultsViewPreview(
 
 @Preview
 @Composable
-fun SearchFailedViewPreview(
+private fun SearchFailedViewPreview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppThemeWithBackground(themeType) {

modules/features/search/src/main/java/au/com/shiftyjelly/pocketcasts/search/searchhistory/SearchHistoryPage.kt

@@ -366,7 +366,7 @@ fun SearchHistoryTermView(
 
 @Preview
 @Composable
-fun SearchHistoryViewPreview(
+private fun SearchHistoryViewPreview(
     @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
 ) {
     AppTheme(themeType) {

modules/features/settings/src/main/java/au/com/shiftyjelly/pocketcasts/settings/DeveloperFragment.kt

@@ -1,5 +1,6 @@
 package au.com.shiftyjelly.pocketcasts.settings
 
+import android.content.Intent
 import android.os.Bundle
 import android.view.View
 import android.widget.Toast
@@ -20,6 +21,7 @@ import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
 import au.com.shiftyjelly.pocketcasts.views.extensions.findToolbar
 import au.com.shiftyjelly.pocketcasts.views.extensions.setup
 import au.com.shiftyjelly.pocketcasts.views.helper.NavigationIcon.BackArrow
+import com.airbnb.android.showkase.ui.ShowkaseBrowserActivity
 import dagger.hilt.android.AndroidEntryPoint
 import io.reactivex.rxkotlin.subscribeBy
 import kotlinx.coroutines.CoroutineScope
@@ -48,6 +50,14 @@ class DeveloperFragment : PreferenceFragmentCompat(), CoroutineScope {
     override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
         setPreferencesFromResource(R.xml.preferences_developer, rootKey)
 
+        preferenceManager.findPreference<Preference>("showkase")?.setOnPreferenceClickListener {
+            val intent = Intent(context, ShowkaseBrowserActivity::class.java).apply {
+                putExtra("SHOWKASE_ROOT_MODULE", "au.com.shiftyjelly.pocketcasts.showkase.AppShowkaseRootModule")
+            }
+            startActivity(intent)
+            true
+        }
+
         preferenceManager.findPreference<Preference>("causeNotification")?.setOnPreferenceClickListener {
             triggerNotification()
             true

modules/features/settings/src/main/java/au/com/shiftyjelly/pocketcasts/settings/about/AboutFragment.kt

@@ -386,6 +386,6 @@ private fun AppLogoImage(width: Dp, image: Painter, text: String, color: Color,
 
 @Preview
 @Composable
-fun AboutPagePreview() {
+private fun AboutPagePreview() {
     AboutPage(onBackPressed = {})
 }

modules/features/settings/src/main/java/au/com/shiftyjelly/pocketcasts/settings/status/StatusFragment.kt

@@ -216,9 +216,9 @@ fun ServiceStatusRow(title: String, summary: String, help: String, status: Servi
     }
 }
 
-@Composable
 @Preview
-fun PreviewServiceStatusRow() {
+@Composable
+private fun PreviewServiceStatusRow() {
     MaterialTheme {
         ServiceStatusRow(
             title = stringResource(LR.string.settings_status_service_internet),

modules/features/settings/src/main/res/xml/preferences_developer.xml

@@ -2,6 +2,14 @@
 <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
     android:persistent="true">
 
+    <Preference
+        android:key="showkase"
+        android:defaultValue="false"
+        android:persistent="false"
+        android:icon="@drawable/ic_heart_outline"
+        android:title="Showkase"
+        android:summary="Compose components"/>
+
     <Preference
         android:key="forceRefresh"
         android:defaultValue="false"
@@ -39,4 +47,4 @@
         android:icon="@drawable/ic_upnext_playnext"
         android:title="Launch billing dialog" />
 
-</PreferenceScreen>
+</PreferenceScreen>

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/bars/BottomSheetAppBar.kt

@@ -1,15 +1,13 @@
 package au.com.shiftyjelly.pocketcasts.compose.bars
 
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.tooling.preview.PreviewParameter
-import au.com.shiftyjelly.pocketcasts.compose.AppTheme
-import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider
+import au.com.shiftyjelly.pocketcasts.compose.AppThemeWithBackground
 import au.com.shiftyjelly.pocketcasts.compose.theme
 import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+import com.airbnb.android.showkase.annotation.ShowkaseComposable
 
 /**
  * A styled App Bar that works in a Bottom Sheet component. It keeps the page background one color.
@@ -32,13 +30,29 @@ fun BottomSheetAppBar(
     )
 }
 
-@Preview(showBackground = true)
+@ShowkaseComposable(name = "BottomSheetAppBar", group = "Bottom sheet", styleName = "Light", defaultStyle = true)
+@Preview(name = "Light")
 @Composable
-private fun BottomSheetAppBarPreview(@PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType) {
-    AppTheme(themeType) {
-        Column {
-            BottomSheetAppBar(title = "Hello World", navigationButton = NavigationButton.Back, onNavigationClick = {})
-            BottomSheetAppBar(title = "Hello World", navigationButton = NavigationButton.Close, onNavigationClick = {})
-        }
+fun BottomSheetAppBarLightPreview() {
+    AppThemeWithBackground(Theme.ThemeType.LIGHT) {
+        BottomSheetAppBar(title = "Hello World", navigationButton = NavigationButton.Close, onNavigationClick = {})
+    }
+}
+
+@ShowkaseComposable(name = "BottomSheetAppBar", group = "Bottom sheet", styleName = "Back")
+@Preview(name = "Back")
+@Composable
+fun BottomSheetAppBarBackPreview() {
+    AppThemeWithBackground(Theme.ThemeType.LIGHT) {
+        BottomSheetAppBar(title = "Hello World", navigationButton = NavigationButton.Back, onNavigationClick = {})
+    }
+}
+
+@ShowkaseComposable(name = "BottomSheetAppBar", group = "Bottom sheet", styleName = "Dark")
+@Preview(name = "Dark")
+@Composable
+fun BottomSheetAppBarDarkPreview() {
+    AppThemeWithBackground(Theme.ThemeType.DARK) {
+        BottomSheetAppBar(title = "Hello World", navigationButton = NavigationButton.Close, onNavigationClick = {})
     }
 }

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/buttons/CircleButton.kt

@@ -31,7 +31,7 @@ fun CircleButton(size: Dp, onClick: () -> Unit, backgroundColor: Color, modifier
 
 @Preview(showBackground = true)
 @Composable
-fun CircleButtonPreview() {
+private fun CircleButtonPreview() {
     AppTheme(Theme.ThemeType.LIGHT) {
         CircleButton(
             size = 48.dp,

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/buttons/CircleIconButton.kt

@@ -15,6 +15,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import au.com.shiftyjelly.pocketcasts.compose.AppTheme
 import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+import com.airbnb.android.showkase.annotation.ShowkaseComposable
 
 @Composable
 fun CircleIconButton(
@@ -67,16 +68,31 @@ fun CircleIconButton(
     }
 }
 
-@Preview(showBackground = true)
+@ShowkaseComposable(name = "CircleIconButton", group = "Button", styleName = "Light", defaultStyle = true)
+@Preview(name = "Light")
 @Composable
-fun CircleIconButtonPreview() {
+fun CircleIconButtonLightPreview() {
     AppTheme(Theme.ThemeType.LIGHT) {
-        CircleIconButton(
-            size = 50.dp,
-            icon = Icons.Default.Add,
-            contentDescription = "Add",
-            backgroundColor = MaterialTheme.colors.primary,
-            onClick = {}
-        )
+        CircleIconButtonPreview()
     }
 }
+
+@ShowkaseComposable(name = "CircleIconButton", group = "Button", styleName = "Dark")
+@Preview(name = "Dark")
+@Composable
+fun CircleIconButtonDarkPreview() {
+    AppTheme(Theme.ThemeType.DARK) {
+        CircleIconButtonPreview()
+    }
+}
+
+@Composable
+private fun CircleIconButtonPreview() {
+    CircleIconButton(
+        size = 50.dp,
+        icon = Icons.Default.Add,
+        contentDescription = "Add",
+        backgroundColor = MaterialTheme.colors.primary,
+        onClick = {}
+    )
+}

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/buttons/RowButton.kt

@@ -18,13 +18,12 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import au.com.shiftyjelly.pocketcasts.compose.AppThemeWithBackground
 import au.com.shiftyjelly.pocketcasts.compose.components.TextH30
-import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider
 import au.com.shiftyjelly.pocketcasts.compose.theme
 import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+import com.airbnb.android.showkase.annotation.ShowkaseComposable
 
 @Composable
 fun RowButton(
@@ -74,13 +73,20 @@ fun RowButton(
     }
 }
 
-@Preview(showBackground = true)
+@ShowkaseComposable(name = "RowButton", group = "Button", styleName = "Light", defaultStyle = true)
+@Preview(name = "Light")
 @Composable
-fun RowButtonPreview(@PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType) {
-    AppThemeWithBackground(themeType) {
-        RowButton(
-            text = "Accept",
-            onClick = {}
-        )
+fun RowButtonsLightPreview() {
+    AppThemeWithBackground(Theme.ThemeType.LIGHT) {
+        RowButton(text = "Accept", onClick = {})
+    }
+}
+
+@ShowkaseComposable(name = "RowButton", group = "Button", styleName = "Dark")
+@Preview(name = "Dark")
+@Composable
+fun RowButtonsDarkPreview() {
+    AppThemeWithBackground(Theme.ThemeType.DARK) {
+        RowButton(text = "Accept", onClick = {})
     }
 }