Add sample for wasm

sample/web-wasm/build.gradle.kts

@@ -28,13 +28,16 @@ kotlin {
 
     sourceSets {
         commonMain.dependencies {
-            implementation(projects.sample.shared)
+//            implementation(projects.sample.shared)
+            implementation(projects.core)
 
-            implementation(compose.runtime)
-            implementation(compose.foundation)
-            implementation(compose.material)
             implementation(compose.ui)
+            implementation(compose.material)
+            implementation(compose.materialIconsExtended)
             implementation(compose.components.resources)
+            implementation(compose.components.uiToolingPreview)
+
+            implementation(libs.jetbrains.navigation.compose)
         }
     }
 }

sample/web-wasm/src/wasmJsMain/kotlin/BackHandler.kt

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import androidx.compose.runtime.Composable
+
+@Composable
+fun BackHandler(enabled: Boolean = true, onBack: () -> Unit) {
+    // do nothing
+}

sample/web-wasm/src/wasmJsMain/kotlin/Main.kt

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
 import kotlinx.browser.document

sample/web-wasm/src/wasmJsMain/kotlin/soup/compose/material/motion/shared/App.kt

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package soup.compose.material.motion.shared
+
+import androidx.compose.runtime.Composable
+import soup.compose.material.motion.shared.theme.SampleTheme
+
+@Composable
+fun App() {
+    SampleTheme {
+        NavGraph()
+    }
+}

sample/web-wasm/src/wasmJsMain/kotlin/soup/compose/material/motion/shared/HomeScreen.kt

@@ -0,0 +1,200 @@
+/*
+ * Copyright 2021 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package soup.compose.material.motion.shared
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.requiredHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import soup.compose.material.motion.shared.theme.SampleTheme
+
+private data class Demo(
+    val title: String,
+    val description: String,
+    val destination: Destination,
+)
+
+private data class Category(
+    val title: String,
+    val items: List<Demo>,
+) {
+    companion object {
+        val items: List<Category> = listOf(
+            Category(
+                title = "Additional Examples (Core)",
+                items = listOf(
+                    Demo(
+                        title = "MaterialSharedAxis",
+                        description = "MaterialSharedAxisScreen",
+                        destination = Destination.MaterialSharedAxis,
+                    ),
+                    Demo(
+                        title = "MaterialFadeThrough",
+                        description = "MaterialFadeThroughScreen",
+                        destination = Destination.MaterialFadeThrough,
+                    ),
+                    Demo(
+                        title = "MaterialFade",
+                        description = "MaterialFadeScreen",
+                        destination = Destination.MaterialFade,
+                    ),
+                    Demo(
+                        title = "MaterialElevationScale",
+                        description = "MaterialElevationScaleScreen",
+                        destination = Destination.MaterialElevationScale,
+                    ),
+                    Demo(
+                        title = "Hold",
+                        description = "HoldScreen",
+                        destination = Destination.Hold,
+                    ),
+                    Demo(
+                        title = "CircularReveal",
+                        description = "CircularRevealScreen",
+                        destination = Destination.CircularReveal,
+                    ),
+                ),
+            ),
+            Category(
+                title = "Additional Examples (Navigation)",
+                items = listOf(
+                    Demo(
+                        title = "AnimatedNavHost",
+                        description = "AnimatedNavHostScreen",
+                        destination = Destination.AnimatedNavHost,
+                    ),
+                ),
+            ),
+        )
+    }
+}
+
+@Composable
+fun HomeScreen(onItemClick: (Destination) -> Unit) {
+    Scaffold(
+        topBar = {
+            TopAppBar(title = { Text(text = "Transition for Jetpack Compose") })
+        },
+    ) { contentPadding ->
+        LazyColumn(
+            modifier = Modifier.fillMaxSize(),
+            contentPadding = contentPadding,
+        ) {
+            item {
+                Column {
+                    Text(
+                        text = "Description",
+                        modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 16.dp),
+                        style = MaterialTheme.typography.subtitle1,
+                    )
+                    Text(
+                        text = "Transition choreography is a coordinated sequence of motion" +
+                            " that maintains user focus as the interface adapts.",
+                        modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
+                        style = MaterialTheme.typography.body2,
+                    )
+                    HomeDemoItem(
+                        Demo(
+                            title = "Demo",
+                            description = "DemoScreen",
+                            destination = Destination.Demo,
+                        ),
+                        onItemClick = onItemClick,
+                    )
+                }
+            }
+            Category.items.forEachIndexed { index, category ->
+                item(
+                    key = index,
+                    contentType = { "Category" },
+                ) {
+                    Divider()
+                    HomeCategoryItem(title = category.title)
+                }
+                items(
+                    items = category.items,
+                    key = { it.destination.route },
+                    contentType = { "Demo" },
+                ) { demo ->
+                    HomeDemoItem(demo, onItemClick = onItemClick)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun HomeCategoryItem(
+    title: String,
+    modifier: Modifier = Modifier,
+) {
+    Text(
+        text = title,
+        modifier = modifier.padding(start = 16.dp, top = 16.dp),
+        style = MaterialTheme.typography.subtitle1,
+    )
+}
+
+@Composable
+private fun HomeDemoItem(
+    demo: Demo,
+    onItemClick: (Destination) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        verticalArrangement = Arrangement.Center,
+        modifier = modifier
+            .fillMaxWidth()
+            .requiredHeight(64.dp)
+            .clickable { onItemClick(demo.destination) }
+            .padding(horizontal = 16.dp),
+    ) {
+        Text(
+            text = demo.title,
+            modifier = Modifier.fillMaxWidth(),
+            fontWeight = FontWeight.SemiBold,
+            style = MaterialTheme.typography.body2,
+        )
+        Text(
+            modifier = Modifier.fillMaxWidth(),
+            text = demo.description,
+            style = MaterialTheme.typography.caption,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun DefaultPreview() {
+    SampleTheme {
+        HomeScreen(onItemClick = {})
+    }
+}

sample/web-wasm/src/wasmJsMain/kotlin/soup/compose/material/motion/shared/NavGraph.kt

@@ -0,0 +1,100 @@
+/*
+ * Copyright 2021 SOUP
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package soup.compose.material.motion.shared
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import soup.compose.material.motion.animation.materialSharedAxisZIn
+import soup.compose.material.motion.animation.materialSharedAxisZOut
+import soup.compose.material.motion.shared.circularreveal.CircularRevealScreen
+import soup.compose.material.motion.shared.demo.DemoScreen
+import soup.compose.material.motion.shared.material.elevationscale.MaterialElevationScaleScreen
+import soup.compose.material.motion.shared.material.fade.MaterialFadeScreen
+import soup.compose.material.motion.shared.material.fadethrough.MaterialFadeThroughScreen
+import soup.compose.material.motion.shared.material.hold.HoldScreen
+import soup.compose.material.motion.shared.material.sharedaxis.MaterialSharedAxisScreen
+import soup.compose.material.motion.shared.navigation.AnimatedNavHostScreen
+
+enum class Destination(val route: String) {
+    Home("Home"),
+    Demo("Demo"),
+    MaterialSharedAxis("MaterialSharedAxis"),
+    MaterialFadeThrough("MaterialFadeThrough"),
+    MaterialFade("MaterialFade"),
+    MaterialElevationScale("MaterialElevationScale"),
+    Hold("Hold"),
+    CircularReveal("CircularReveal"),
+    AnimatedNavHost("AnimatedNavHost"),
+}
+
+@Composable
+fun NavGraph(
+    startDestination: String = Destination.Home.route,
+) {
+    val navController = rememberNavController()
+    val upPress: () -> Unit = {
+        navController.navigateUp()
+    }
+    NavHost(
+        navController = navController,
+        startDestination = startDestination,
+        modifier = Modifier.fillMaxSize(),
+        enterTransition = { materialSharedAxisZIn(forward = true) },
+        exitTransition = { materialSharedAxisZOut(forward = true) },
+        popEnterTransition = { materialSharedAxisZIn(forward = false) },
+        popExitTransition = { materialSharedAxisZOut(forward = false) },
+    ) {
+        composable(Destination.Home.route) {
+            HomeScreen(
+                onItemClick = {
+                    navController.navigate(route = it.route)
+                },
+            )
+        }
+        composable(Destination.Demo.route) {
+            DemoScreen(upPress = upPress)
+        }
+
+        // Core
+        composable(Destination.MaterialSharedAxis.route) {
+            MaterialSharedAxisScreen(upPress = upPress)
+        }
+        composable(Destination.MaterialFadeThrough.route) {
+            MaterialFadeThroughScreen(upPress = upPress)
+        }
+        composable(Destination.MaterialFade.route) {
+            MaterialFadeScreen(upPress = upPress)
+        }
+        composable(Destination.MaterialElevationScale.route) {
+            MaterialElevationScaleScreen(upPress = upPress)
+        }
+        composable(Destination.Hold.route) {
+            HoldScreen(upPress = upPress)
+        }
+        composable(Destination.CircularReveal.route) {
+            CircularRevealScreen(upPress = upPress)
+        }
+
+        // Navigation
+        composable(Destination.AnimatedNavHost.route) {
+            AnimatedNavHostScreen(upPress = upPress)
+        }
+    }
+}