Chapter/showkase

gradle/libs.versions.toml

@@ -23,6 +23,7 @@ android-material-version = '1.9.0'
 # Compose
 compose-bom = "2023.08.00"
 compose-kotlin-compiler = "1.5.2"
+showkase = "1.0.0-beta18"
 
 # Image
 glide = "4.16.0"
@@ -56,6 +57,8 @@ compose-material-icons-core = { group = "androidx.compose.material", name = "mat
 compose-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
 compose-material3 = { group = "androidx.compose.material3", name = "material3" }
 compose-tests-ui = { group = "androidx.compose.ui", name = "ui-test-junit4" }
+showkase = { group = "com.airbnb.android", name = "showkase", version.ref = "showkase" }
+showkase-ksp = { group = "com.airbnb.android", name = "showkase-processor", version.ref = "showkase" }
 
 # Image
 glide = { group = "com.github.bumptech.glide", name = "glide", version.ref = "glide" }

library-compose/build.gradle.kts

@@ -1,6 +1,9 @@
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
+
 plugins {
     alias(libs.plugins.android.library)
     alias(libs.plugins.kotlin.android)
+    alias(libs.plugins.ksp)
     id("maven-publish")
 }
 
@@ -46,6 +49,9 @@ android {
     publishing {
         singleVariant("release")
     }
+    ksp {
+        arg("skipPrivatePreviews", "true")
+    }
 }
 
 dependencies {
@@ -60,6 +66,9 @@ dependencies {
     api(platform(libs.compose.bom))
     api(libs.bundles.compose)
 
+    implementation(libs.showkase)
+    ksp(libs.showkase.ksp)
+
     // UI Tests
     androidTestImplementation(libs.compose.tests.ui)
 }
@@ -77,3 +86,10 @@ afterEvaluate {
         }
     }
 }
+
+tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
+    kotlinOptions {
+        freeCompilerArgs += "-opt-in=kotlin.RequiresOptIn"
+        freeCompilerArgs += "-opt-in=androidx.compose.material3.ExperimentalMaterial3Api"
+    }
+}

library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
@@ -135,13 +134,13 @@ fun GrapesTopAppBarMoreIcon(
 }
 
 //region previews
-@Preview
+@Preview("GrapesTopAppBars", group = "TopAppBar")
 @Composable
-fun GrapesSimpleTopAppBarPreview() {
+internal fun GrapesSimpleTopAppBarPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
                 .background(GrapesTheme.colors.mainNeutralLighter)
                 .verticalScroll(rememberScrollState()),
             verticalArrangement = Arrangement.spacedBy(8.dp)

library-compose/src/main/java/com/spendesk/grapes/compose/avatar/GrapesEditAvatar.kt

@@ -126,9 +126,9 @@ object EditAvatarDefaults {
     val badgeSize = DpSize(24.dp, 24.dp)
 }
 
-@Preview(showBackground = true)
+@Preview(showBackground = true, name = "Avatar", group = "Avatar")
 @Composable
-private fun Preview() {
+internal fun Preview() {
     GrapesTheme {
         Column(
             verticalArrangement = Arrangement.spacedBy(12.dp),

library-compose/src/main/java/com/spendesk/grapes/compose/badge/Badge.kt

@@ -35,9 +35,9 @@ fun GrapesBadge(
     )
 }
 
-@Preview
+@Preview(name = "Badges", group = "Badges")
 @Composable
-fun GrapesBadgePreview() {
+internal fun GrapesBadgePreview() {
     GrapesTheme {
         Column(verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingXSmall)) {
             GrapesBadge(content = "Message Inline Success", configuration = GrapesConfigurationStatus.SUCCESS)

library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt

@@ -69,9 +69,9 @@ internal fun GrapesBucketCore(
 
 // endregion internal
 
-@Preview
+@Preview(name = "Bucket", group = "Bucket")
 @Composable
-private fun GrapesBucketPreview() {
+internal fun GrapesBucketPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier

library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketContainer.kt

@@ -40,9 +40,9 @@ fun GrapesBucketContainer(
     }
 }
 
-@Preview
+@Preview(name = "Bucket container", group = "Bucket")
 @Composable
-private fun GrapesContainerPreview() {
+internal fun GrapesContainerPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier

library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt

@@ -54,13 +54,13 @@ fun GrapesBucketHeadline(
     }
 }
 
-@Preview(showBackground = true)
+@Preview(showBackground = true, name = "Bucket headline", group = "Bucket")
 @Composable
-private fun GrapesBucketHeadlinePreview() {
+internal fun GrapesBucketHeadlinePreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
                 .background(GrapesTheme.colors.mainNeutralLighter)
                 .verticalScroll(rememberScrollState()),
         ) {

library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButton.kt

@@ -58,12 +58,12 @@ fun GrapesButton(
 //region Previews
 @Preview(
     name = "Primary",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
 )
 @Composable
-fun ButtonPrimaryPreview() {
+internal fun ButtonPrimaryPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
@@ -94,17 +94,17 @@ fun ButtonPrimaryPreview() {
 
 @Preview(
     name = "Primary Small",
-    group = "Small",
+    group = "Button",
     widthDp = 810,
     showBackground = true,
 )
 @Composable
-private fun ButtonPrimarySmallPreview() {
+internal fun ButtonPrimarySmallPreview() {
     GrapesTheme {
-        Row(
+        Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceAround
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceAround
         ) {
             GrapesButton(
                 text = "Primary Small Enabled",
@@ -128,12 +128,12 @@ private fun ButtonPrimarySmallPreview() {
 
 @Preview(
     name = "Secondary",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
 )
 @Composable
-fun ButtonSecondaryPreview() {
+internal fun ButtonSecondaryPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
@@ -164,17 +164,17 @@ fun ButtonSecondaryPreview() {
 
 @Preview(
     name = "Secondary Small",
-    group = "Small",
+    group = "Button",
     widthDp = 850,
     showBackground = true,
 )
 @Composable
-fun ButtonSecondarySmallPreview() {
+internal fun ButtonSecondarySmallPreview() {
     GrapesTheme {
-        Row(
+        Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceAround
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceAround
         ) {
             GrapesButton(
                 text = "Secondary Small Enabled",
@@ -198,13 +198,13 @@ fun ButtonSecondarySmallPreview() {
 
 @Preview(
     name = "Text",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
     backgroundColor = 0xFF421896 // Primary Dark
 )
 @Composable
-fun ButtonTextPreview() {
+internal fun ButtonTextPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
@@ -235,18 +235,18 @@ fun ButtonTextPreview() {
 
 @Preview(
     name = "Text Small",
-    group = "Small",
+    group = "Button",
     widthDp = 850,
     showBackground = true,
     backgroundColor = 0xFF421896 // Primary Dark
 )
 @Composable
-fun ButtonTextSmallPreview() {
+internal fun ButtonTextSmallPreview() {
     GrapesTheme {
-        Row(
+        Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceAround
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceAround
         ) {
             GrapesButton(
                 text = "Secondary Text Enabled",
@@ -270,12 +270,12 @@ fun ButtonTextSmallPreview() {
 
 @Preview(
     name = "Warning",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
 )
 @Composable
-fun ButtonWarningPreview() {
+internal fun ButtonWarningPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
@@ -306,12 +306,12 @@ fun ButtonWarningPreview() {
 
 @Preview(
     name = "Alert",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
 )
 @Composable
-fun ButtonAlertPreview() {
+internal fun ButtonAlertPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
@@ -342,17 +342,17 @@ fun ButtonAlertPreview() {
 
 @Preview(
     name = "Link Primary",
-    group = "Small",
+    group = "Button",
     widthDp = 850,
     showBackground = true,
 )
 @Composable
-fun ButtonLinkPrimaryPreview() {
+internal fun ButtonLinkPrimaryPreview() {
     GrapesTheme {
-        Row(
+        Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceAround
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceAround
         ) {
             GrapesButton(
                 text = "Link Primary Enabled",
@@ -376,17 +376,17 @@ fun ButtonLinkPrimaryPreview() {
 
 @Preview(
     name = "Link Secondary",
-    group = "Small",
+    group = "Button",
     widthDp = 1030,
     showBackground = true,
 )
 @Composable
-fun ButtonLinkSecondaryPreview() {
+internal fun ButtonLinkSecondaryPreview() {
     GrapesTheme {
-        Row(
+        Column(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceAround
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceAround
         ) {
             GrapesButton(
                 text = "Link Secondary Enabled",
@@ -410,12 +410,12 @@ fun ButtonLinkSecondaryPreview() {
 
 @Preview(
     name = "Alert Outlined",
-    group = "Default",
+    group = "Button",
     widthDp = 372,
     showBackground = true,
 )
 @Composable
-fun ButtonAlertOutlinedPreview() {
+internal fun ButtonAlertOutlinedPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier

library-compose/src/main/java/com/spendesk/grapes/compose/button/GrapesButtonBrand.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -101,13 +101,13 @@ private fun BrandLeadingIcon(style: GrapesButtonStyle, @DrawableRes iconRes: Int
     }
 }
 
-@Preview
+@Preview(name = "Brand button", group = "Button")
 @Composable
-private fun GrapesButtonBrandPreview() {
+internal fun GrapesButtonBrandPreview() {
     GrapesTheme {
         Column(
             modifier = Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
                 .background(GrapesTheme.colors.mainBackground)
                 .padding(GrapesTheme.dimensions.paddingLarge),
             verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingLarge)