From 63aa1b83272ee1fb3254024b570ddead86c26196 Mon Sep 17 00:00:00 2001 From: Eliezer Graber Date: Sun, 17 Nov 2024 00:17:27 -0800 Subject: [PATCH] Add NavGraph builders for material3 bottom sheet (#198) --- gradle/libs.versions.toml | 2 +- kotlin-js-store/package-lock.json | 148 +++++++++++++++++- settings.gradle.kts | 1 + vice-nav-material3/build.gradle.kts | 29 ++++ vice-nav-material3/gradle.properties | 3 + .../material3/ViceMaterial3NavGraphBuilder.kt | 55 +++++++ vice-nav/build.gradle.kts | 1 - .../eygraber/vice/nav/ViceNavGraphBuilder.kt | 30 ---- 8 files changed, 234 insertions(+), 35 deletions(-) create mode 100644 vice-nav-material3/build.gradle.kts create mode 100644 vice-nav-material3/gradle.properties create mode 100644 vice-nav-material3/src/commonMain/kotlin/com/eygraber/vice/nav/material3/ViceMaterial3NavGraphBuilder.kt diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 1cb2f24..73213ba 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -41,8 +41,8 @@ buildscript-publish = { module = "com.vanniktech:gradle-maven-publish-plugin", v compose-lifecycle = { module = "org.jetbrains.androidx.lifecycle:lifecycle-runtime-compose", version.ref = "composeLifecycle" } compose-navigation = "org.jetbrains.androidx.navigation:navigation-compose:2.8.0-alpha10" -compose-navigationMaterial = "org.jetbrains.compose.material:material-navigation:1.7.0-beta02" compose-navigationAndroid = "androidx.navigation:navigation-compose:2.8.4" +compose-navigationMaterial3 = "com.eygraber:compose-material3-navigation:0.0.1" detektEygraber-formatting = { module = "com.eygraber.detekt.rules:formatting", version.ref = "detektEygraber" } detektEygraber-style = { module = "com.eygraber.detekt.rules:style", version.ref = "detektEygraber" } diff --git a/kotlin-js-store/package-lock.json b/kotlin-js-store/package-lock.json index 8907684..e715865 100644 --- a/kotlin-js-store/package-lock.json +++ b/kotlin-js-store/package-lock.json @@ -16,6 +16,10 @@ "packages/vice-vice-nav-wasm-js-test", "packages/vice-vice-nav", "packages/vice-vice-nav-test", + "packages/vice-vice-nav-material3-wasm-js", + "packages/vice-vice-nav-material3-wasm-js-test", + "packages/vice-vice-nav-material3", + "packages/vice-vice-nav-material3-test", "packages/vice-vice-portal-wasm-js", "packages/vice-vice-portal-wasm-js-test", "packages/vice-vice-portal", @@ -34,10 +38,11 @@ "packages_imported/skiko-wasm-js/0.8.18", "packages_imported/skiko-js-wasm-runtime/0.8.18", "packages_imported/skiko-js/0.8.18", - "packages_imported/portal-compose-wasm-js/0.9.31", - "packages_imported/portal-compose-js/0.9.31", "packages_imported/Kotlin-DateTime-library-kotlinx-datetime-wasm-js/0.6.0", - "packages_imported/Kotlin-DateTime-library-kotlinx-datetime/0.6.0" + "packages_imported/compose-material3-navigation-js/0.0.1", + "packages_imported/Kotlin-DateTime-library-kotlinx-datetime/0.6.0", + "packages_imported/portal-compose-wasm-js/0.9.31", + "packages_imported/portal-compose-js/0.9.31" ], "devDependencies": {} }, @@ -1048,6 +1053,10 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, + "node_modules/compose-material3-navigation-js": { + "resolved": "packages_imported/compose-material3-navigation-js/0.0.1", + "link": true + }, "node_modules/compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", @@ -4348,6 +4357,22 @@ "resolved": "packages/vice-vice-nav", "link": true }, + "node_modules/vice-vice-nav-material3": { + "resolved": "packages/vice-vice-nav-material3", + "link": true + }, + "node_modules/vice-vice-nav-material3-test": { + "resolved": "packages/vice-vice-nav-material3-test", + "link": true + }, + "node_modules/vice-vice-nav-material3-wasm-js": { + "resolved": "packages/vice-vice-nav-material3-wasm-js", + "link": true + }, + "node_modules/vice-vice-nav-material3-wasm-js-test": { + "resolved": "packages/vice-vice-nav-material3-wasm-js-test", + "link": true + }, "node_modules/vice-vice-nav-test": { "resolved": "packages/vice-vice-nav-test", "link": true @@ -4716,6 +4741,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "packages_imported/compose-material3-navigation-js/0.0.1": { + "name": "compose-material3-navigation-js", + "version": "0.0.1", + "devDependencies": {} + }, "packages_imported/Kotlin-DateTime-library-kotlinx-datetime-wasm-js/0.5.0": { "name": "Kotlin-DateTime-library-kotlinx-datetime-wasm-js", "version": "0.5.0", @@ -5288,6 +5318,118 @@ }, "devDependencies": {} }, + "packages/vice-vice-nav-bottom-sheet": { + "version": "0.9.3-SNAPSHOT", + "extraneous": true, + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": {} + }, + "packages/vice-vice-nav-bottom-sheet-test": { + "version": "0.9.3-SNAPSHOT", + "extraneous": true, + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": { + "karma": "6.4.3", + "karma-chrome-launcher": "3.2.0", + "karma-mocha": "2.0.1", + "karma-sourcemap-loader": "0.4.0", + "karma-webpack": "5.0.1", + "mocha": "10.7.0", + "source-map-loader": "5.0.0", + "typescript": "5.5.4", + "webpack": "5.93.0", + "webpack-cli": "5.1.4" + } + }, + "packages/vice-vice-nav-bottom-sheet-wasm-js": { + "version": "0.9.3-SNAPSHOT", + "extraneous": true, + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": {} + }, + "packages/vice-vice-nav-bottom-sheet-wasm-js-test": { + "version": "0.9.3-SNAPSHOT", + "extraneous": true, + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": { + "karma": "6.4.3", + "karma-chrome-launcher": "3.2.0", + "karma-mocha": "2.0.1", + "karma-sourcemap-loader": "0.4.0", + "karma-webpack": "5.0.1", + "mocha": "10.7.0", + "source-map-loader": "5.0.0", + "typescript": "5.5.4", + "webpack": "5.93.0", + "webpack-cli": "5.1.4" + } + }, + "packages/vice-vice-nav-material3": { + "version": "0.9.3-SNAPSHOT", + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": {} + }, + "packages/vice-vice-nav-material3-test": { + "version": "0.9.3-SNAPSHOT", + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": { + "karma": "6.4.3", + "karma-chrome-launcher": "3.2.0", + "karma-mocha": "2.0.1", + "karma-sourcemap-loader": "0.4.0", + "karma-webpack": "5.0.1", + "mocha": "10.7.0", + "source-map-loader": "5.0.0", + "typescript": "5.5.4", + "webpack": "5.93.0", + "webpack-cli": "5.1.4" + } + }, + "packages/vice-vice-nav-material3-wasm-js": { + "version": "0.9.3-SNAPSHOT", + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": {} + }, + "packages/vice-vice-nav-material3-wasm-js-test": { + "version": "0.9.3-SNAPSHOT", + "dependencies": { + "@js-joda/core": "3.2.0", + "format-util": "^1.0.5" + }, + "devDependencies": { + "karma": "6.4.3", + "karma-chrome-launcher": "3.2.0", + "karma-mocha": "2.0.1", + "karma-sourcemap-loader": "0.4.0", + "karma-webpack": "5.0.1", + "mocha": "10.7.0", + "source-map-loader": "5.0.0", + "typescript": "5.5.4", + "webpack": "5.93.0", + "webpack-cli": "5.1.4" + } + }, "packages/vice-vice-nav-test": { "version": "0.9.3-SNAPSHOT", "dependencies": { diff --git a/settings.gradle.kts b/settings.gradle.kts index 1380a48..a436cfd 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -64,6 +64,7 @@ include(":samples:nav:shared") include(":samples:nav:wasmJsApp") include(":vice-core") include(":vice-nav") +include(":vice-nav-material3") include(":vice-portal") include(":vice-sources") diff --git a/vice-nav-material3/build.gradle.kts b/vice-nav-material3/build.gradle.kts new file mode 100644 index 0000000..f19143b --- /dev/null +++ b/vice-nav-material3/build.gradle.kts @@ -0,0 +1,29 @@ +plugins { + id("com.eygraber.conventions-kotlin-multiplatform") + id("com.eygraber.conventions-android-library") + id("com.eygraber.conventions-compose-jetbrains") + id("com.eygraber.conventions-detekt") + id("com.eygraber.conventions-publish-maven-central") +} + +android { + namespace = "com.eygraber.vice.nav.material3" +} + +kotlin { + defaultKmpTargets( + project = project, + ) + + sourceSets { + commonMain.dependencies { + api(projects.viceNav) + + api(libs.compose.navigation) + api(libs.compose.navigationMaterial3) + + implementation(compose.material3) + implementation(compose.runtime) + } + } +} diff --git a/vice-nav-material3/gradle.properties b/vice-nav-material3/gradle.properties new file mode 100644 index 0000000..caab439 --- /dev/null +++ b/vice-nav-material3/gradle.properties @@ -0,0 +1,3 @@ +POM_ARTIFACT_ID=vice-nav-material3 +POM_NAME=VICE Nav for compose material3 navigation +POM_DESCRIPTION=A VICE integration with Compose Navigation and material3 ModalBottomSheet diff --git a/vice-nav-material3/src/commonMain/kotlin/com/eygraber/vice/nav/material3/ViceMaterial3NavGraphBuilder.kt b/vice-nav-material3/src/commonMain/kotlin/com/eygraber/vice/nav/material3/ViceMaterial3NavGraphBuilder.kt new file mode 100644 index 0000000..2b3ab05 --- /dev/null +++ b/vice-nav-material3/src/commonMain/kotlin/com/eygraber/vice/nav/material3/ViceMaterial3NavGraphBuilder.kt @@ -0,0 +1,55 @@ +package com.eygraber.vice.nav.material3 + +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.ModalBottomSheetDefaults +import androidx.compose.material3.ModalBottomSheetProperties +import androidx.compose.runtime.remember +import androidx.navigation.NamedNavArgument +import androidx.navigation.NavBackStackEntry +import androidx.navigation.NavDeepLink +import androidx.navigation.NavGraphBuilder +import androidx.navigation.NavType +import androidx.navigation.toRoute +import com.eygraber.compose.material3.navigation.bottomSheet +import com.eygraber.vice.nav.TypedNavBackStackEntry +import com.eygraber.vice.nav.ViceDestination +import kotlin.jvm.JvmSuppressWildcards +import kotlin.reflect.KType + +@ExperimentalMaterial3Api +public fun NavGraphBuilder.viceBottomSheet( + route: String, + arguments: List = emptyList(), + deepLinks: List = emptyList(), + modalBottomSheetProperties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties, + skipPartiallyExpanded: Boolean = false, + destinationFactory: (NavBackStackEntry) -> ViceDestination<*, *, *, *>, +) { + bottomSheet( + route = route, + arguments = arguments, + deepLinks = deepLinks, + modalBottomSheetProperties = modalBottomSheetProperties, + skipPartiallyExpanded = skipPartiallyExpanded, + ) { + remember(it.id) { destinationFactory(it) }.Vice() + } +} + +@ExperimentalMaterial3Api +public inline fun NavGraphBuilder.viceBottomSheet( + typeMap: Map> = emptyMap(), + deepLinks: List = emptyList(), + modalBottomSheetProperties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties, + skipPartiallyExpanded: Boolean = false, + crossinline destinationFactory: (TypedNavBackStackEntry) -> ViceDestination<*, *, *, *>, +) { + bottomSheet( + typeMap = typeMap, + deepLinks = deepLinks, + modalBottomSheetProperties = modalBottomSheetProperties, + skipPartiallyExpanded = skipPartiallyExpanded, + ) { + remember(it.id) { destinationFactory(TypedNavBackStackEntry(it.toRoute(), it)) }.Vice() + } +} diff --git a/vice-nav/build.gradle.kts b/vice-nav/build.gradle.kts index 3dc8535..768a16c 100644 --- a/vice-nav/build.gradle.kts +++ b/vice-nav/build.gradle.kts @@ -24,7 +24,6 @@ kotlin { api(projects.viceCore) api(libs.compose.navigation) - api(libs.compose.navigationMaterial) implementation(compose.runtime) diff --git a/vice-nav/src/commonMain/kotlin/com/eygraber/vice/nav/ViceNavGraphBuilder.kt b/vice-nav/src/commonMain/kotlin/com/eygraber/vice/nav/ViceNavGraphBuilder.kt index a749649..e60fddc 100644 --- a/vice-nav/src/commonMain/kotlin/com/eygraber/vice/nav/ViceNavGraphBuilder.kt +++ b/vice-nav/src/commonMain/kotlin/com/eygraber/vice/nav/ViceNavGraphBuilder.kt @@ -4,7 +4,6 @@ import androidx.compose.animation.AnimatedContentTransitionScope import androidx.compose.animation.EnterTransition import androidx.compose.animation.ExitTransition import androidx.compose.animation.SizeTransform -import androidx.compose.material.navigation.bottomSheet import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.remember import androidx.compose.ui.window.DialogProperties @@ -119,32 +118,3 @@ public inline fun NavGraphBuilder.viceDialog( remember(it.id) { destinationFactory(TypedNavBackStackEntry(it.toRoute(), it)) }.Vice() } } - -public fun NavGraphBuilder.viceBottomSheet( - route: String, - arguments: List = emptyList(), - deepLinks: List = emptyList(), - destinationFactory: (NavBackStackEntry) -> ViceDestination<*, *, *, *>, -) { - bottomSheet( - route = route, - arguments = arguments, - deepLinks = deepLinks, - ) { - remember(it.id) { destinationFactory(it) }.Vice() - } -} - -// TODO: Only available starting Compose 1.8.0 -// public inline fun NavGraphBuilder.viceBottomSheet( -// typeMap: Map> = emptyMap(), -// deepLinks: List = emptyList(), -// crossinline destinationFactory: (TypedNavBackStackEntry) -> ViceDestination<*, *, *, *>, -// ) { -// bottomSheet( -// typeMap = typeMap, -// deepLinks = deepLinks, -// ) { -// remember(it.id) { destinationFactory(TypedNavBackStackEntry(it.toRoute(), it)) }.Vice() -// } -// }