Follow up for new jetsnack example (#4753)

- Apply window insets for UI containers
- Update the screenshot
- Align gradle.properties with other examples
- Add jetsnack to all example verification scripts

examples/jetsnack/README.md

@@ -6,7 +6,7 @@ Check it out:
 
 [![Static Badge](https://img.shields.io/badge/online%20demo%20%F0%9F%9A%80-6b57ff?style=for-the-badge)](https://zal.im/wasm/jetsnack).
 
-![](screenshots/jetsnack.png)
+![](screenshots/jetsnack_mpp.png)
 
 > **Note:**
 > To learn more about the Jetsnack application, visit the [Jetsnack README.md](https://github.com/android/compose-samples/tree/main/Jetsnack).

examples/jetsnack/build.gradle.kts

@@ -8,16 +8,6 @@ allprojects {
         google()
         mavenCentral()
     }
-
-    afterEvaluate {
-        extensions.findByType(ComposeExtension::class.java)?.apply {
-            val kotlinGeneration = project.property("kotlin.generation")
-            val composeCompilerVersion = project.property("compose.compiler.version.$kotlinGeneration") as String
-            kotlinCompilerPlugin.set(composeCompilerVersion)
-            val kotlinVersion = project.property("kotlin.version.$kotlinGeneration") as String
-            kotlinCompilerPluginArgs.add("suppressKotlinVersionCompatibilityCheck=$kotlinVersion")
-        }
-    }
 }
 
 plugins {

examples/jetsnack/common/src/androidMain/kotlin/com/example/jetsnack/ui/snackdetail/jetSnackNavigationBarsPadding.kt

@@ -3,8 +3,12 @@ package com.example.jetsnack.ui.snackdetail
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 
+@Composable
 actual fun Modifier.jetSnackNavigationBarsPadding(): Modifier = this.navigationBarsPadding()
+@Composable
 actual fun Modifier.jetSnackStatusBarsPadding(): Modifier = this.statusBarsPadding()
+@Composable
 actual fun Modifier.jetSnackSystemBarsPadding(): Modifier = this.systemBarsPadding()

examples/jetsnack/common/src/commonMain/kotlin/com/example/jetsnack/ui/home/Feed.kt

@@ -26,6 +26,7 @@ import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 //import androidx.compose.desktop.ui.tooling.preview.Preview
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
@@ -48,6 +49,7 @@ import com.example.jetsnack.ui.components.FilterBar
 import com.example.jetsnack.ui.components.JetsnackDivider
 import com.example.jetsnack.ui.components.JetsnackSurface
 import com.example.jetsnack.ui.components.SnackCollection
+import com.example.jetsnack.ui.snackdetail.jetSnackStatusBarsPadding
 import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
@@ -74,9 +76,9 @@ private fun Feed(
 ) {
 
     JetsnackSurface(modifier = modifier.fillMaxSize()) {
-        Box {
+        Column {
+            DestinationBar(modifier = Modifier.jetSnackStatusBarsPadding())
             SnackCollectionList(snackCollections, filters, onSnackClick)
-            DestinationBar()
         }
     }
 }
@@ -94,9 +96,6 @@ private fun SnackCollectionList(
         LazyColumn {
 
             item {
-                Spacer(
-                    Modifier.windowInsetsTopHeight(snackCollectionListItemWindowInsets())
-                )
                 FilterBar(filters, onShowFilters = { filtersVisible = true })
             }
             itemsIndexed(snackCollections) { index, snackCollection ->

examples/jetsnack/common/src/commonMain/kotlin/com/example/jetsnack/ui/snackdetail/SnackDetail.kt

@@ -389,8 +389,11 @@ private fun CartBottomBar(modifier: Modifier = Modifier) {
     }
 }
 
+@Composable
 expect fun Modifier.jetSnackNavigationBarsPadding(): Modifier
+@Composable
 expect fun Modifier.jetSnackStatusBarsPadding(): Modifier
+@Composable
 expect fun Modifier.jetSnackSystemBarsPadding(): Modifier
 
 //@Preview

examples/jetsnack/common/src/nonAndroidMain/kotlin/com/example/jetsnack/ui/home/snackCollectionListItemWindowInsets.kt

@@ -1,12 +1,12 @@
 package com.example.jetsnack.ui.home
 
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.add
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
 
 @Composable
 actual fun snackCollectionListItemWindowInsets(): WindowInsets {
-    // TODO: implement
-    // WindowInsets.statusBars.add(WindowInsets(top = 56.dp))
-    return WindowInsets(top =  56.dp)
+    return WindowInsets.statusBars.add(WindowInsets(top = 56.dp))
 }

examples/jetsnack/common/src/nonAndroidMain/kotlin/com/example/jetsnack/ui/snackdetail/jetSnackNavigationBarsPadding.kt

@@ -1,11 +1,21 @@
 package com.example.jetsnack.ui.snackdetail
 
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 
-actual fun Modifier.jetSnackNavigationBarsPadding(): Modifier = this
-//  .navigationBarsPadding()
+@Composable
+actual fun Modifier.jetSnackNavigationBarsPadding(): Modifier =
+    this.windowInsetsPadding(WindowInsets.navigationBars)
 
-actual fun Modifier.jetSnackStatusBarsPadding(): Modifier = this
-// statusBarsPadding()
-actual fun Modifier.jetSnackSystemBarsPadding(): Modifier = this
-// Modifier.systemBarsPadding()
+@Composable
+actual fun Modifier.jetSnackStatusBarsPadding(): Modifier =
+    this.windowInsetsPadding(WindowInsets.statusBars)
+
+@Composable
+actual fun Modifier.jetSnackSystemBarsPadding(): Modifier =
+    this.windowInsetsPadding(WindowInsets.systemBars)

examples/jetsnack/gradle.properties

@@ -2,28 +2,8 @@ org.gradle.jvmargs=-Xmx3g
 kotlin.code.style=official
 android.useAndroidX=true
 agp.version=8.0.2
+kotlin.version=1.9.23
+compose.version=1.6.2
 
 #Compose for Web is Experimental
 org.jetbrains.compose.experimental.wasm.enabled=true
-
-# region Versions for Kotlin 1.9.x Generation
-kotlin.version.1.9.x=1.9.23
-compose.compiler.version.1.9.x=1.5.8
-compose.wasm.version.1.9.x=1.6.0
-
-# To enable K2 Kotlin compiler uncomment the next line
-#kotlin.experimental.tryK2=true
-
-# endregion
-
-# region Versions for Kotlin 2.0.0 Generation
-kotlin.version.2.0.0=2.0.0-Beta4
-compose.compiler.version.2.0.0=1.5.9-kt-2.0.0-Beta4
-compose.wasm.version.2.0.0=1.6.0
-
-
-# endregion
-
-# 
-kotlin.generation=1.9.x
-#kotlin.generation=2.0.0

examples/jetsnack/settings.gradle.kts

@@ -6,12 +6,15 @@ pluginManagement {
     }
 
     plugins {
-        val kotlinGeneration = extra["kotlin.generation"]
-        kotlin("multiplatform").version(extra["kotlin.version.$kotlinGeneration"] as String)
-        kotlin("android").version(extra["kotlin.version.$kotlinGeneration"] as String)
-        id("com.android.application").version(extra["agp.version"] as String)
-        id("com.android.library").version(extra["agp.version"] as String)
-        id("org.jetbrains.compose").version(extra["compose.wasm.version.$kotlinGeneration"] as String)
+        val kotlinVersion = extra["kotlin.version"] as String
+        val agpVersion = extra["agp.version"] as String
+        val composeVersion = extra["compose.version"] as String
+
+        kotlin("multiplatform").version(kotlinVersion)
+        kotlin("android").version(kotlinVersion)
+        id("com.android.application").version(agpVersion)
+        id("com.android.library").version(agpVersion)
+        id("org.jetbrains.compose").version(composeVersion)
     }
 }
 

examples/jetsnack/web/src/wasmJsMain/resources/load.mjs

@@ -1,5 +0,0 @@
-import { instantiate } from './jetsnackwasmapp.uninstantiated.mjs';
-
-await wasmSetup;
-
-instantiate({ skia: Module['asm'] });

examples/jetsnack/web/webpack.config.d/boilerplate.js

@@ -1,7 +0,0 @@
-config.entry = {
-    main: [require('path').resolve(__dirname, "kotlin/load.mjs")]
-};
-
-config.resolve ?? (config.resolve = {});
-config.resolve.alias ?? (config.resolve.alias = {});
-config.resolve.alias.skia = false;

examples/validateExamples.sh

@@ -27,3 +27,4 @@ runGradle notepad packageDistributionForCurrentOS
 runGradle todoapp-lite packageDistributionForCurrentOS
 runGradle graphics-2d packageDistributionForCurrentOS
 runGradle widgets-gallery packageDistributionForCurrentOS
+runGradle jetsnack packageDistributionForCurrentOS

examples/validateExamplesAndroid.sh

@@ -28,3 +28,4 @@ runGradle graphics-2d installDebug
 runGradle todoapp-lite installDebug
 runGradle widgets-gallery installDebug
 runGradle todoapp installDebug
+runGradle jetsnack installDebug

examples/validateExamplesIos.sh

@@ -37,3 +37,4 @@ runGradle imageviewer
 runGradle todoapp-lite
 runGradle widgets-gallery
 runGradle graphics-2d
+runGradle jetsnack

examples/validateExamplesWithJs.sh

@@ -22,3 +22,4 @@ runGradle() {
 runGradle html/compose-bird build
 runGradle html/landing build
 runGradle html/with-react build
+runGradle jetsnack :web:wasmJsBrowserDistribution