MULTIPLATFORM components module (#264)

* Component module * Components set up * Move UI components to new MULTIPLATFORM module
imashnake0 · Feb 9, 2025 · cd5cc2f · cd5cc2f
1 parent df9380d
commit cd5cc2f
Show file tree

Hide file tree

Showing 32 changed files with 140 additions and 153 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -64,6 +64,7 @@ tasks.withType<KotlinCompile>().configureEach {
 dependencies {
     implementation(projects.api.anilist)
     implementation(projects.core)
+    implementation(projects.components)
     implementation(projects.media)
     implementation(projects.navigation)
     implementation(projects.profile)

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt b/app/src/main/kotlin/com/imashnake/animite/features/MainActivity.kt
@@ -28,7 +28,7 @@ import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navDeepLink
 import com.imashnake.animite.api.anilist.sanitize.media.MediaList
-import com.imashnake.animite.core.ui.LocalPaddings
+import com.imashnake.animite.components.LocalPaddings
 import com.imashnake.animite.features.home.HomeScreen
 import com.imashnake.animite.features.searchbar.SearchFrontDrop
 import com.imashnake.animite.features.theme.AnimiteTheme

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt b/app/src/main/kotlin/com/imashnake/animite/features/home/HomeScreen.kt
@@ -65,17 +65,16 @@ import com.imashnake.animite.R
 import com.imashnake.animite.api.anilist.sanitize.media.Media
 import com.imashnake.animite.api.anilist.sanitize.media.MediaList
 import com.imashnake.animite.api.anilist.type.MediaType
+import com.imashnake.animite.components.LocalPaddings
+import com.imashnake.animite.components.ProgressIndicatorScreen
+import com.imashnake.animite.components.extensions.bannerParallax
+import com.imashnake.animite.components.extensions.thenIf
+import com.imashnake.animite.components.layout.BannerLayout
+import com.imashnake.animite.components.layout.TranslucentStatusBarLayout
+import com.imashnake.animite.components.media.MediaSmall
+import com.imashnake.animite.components.media.MediaSmallRow
+import com.imashnake.animite.components.shader.etherealShader
 import com.imashnake.animite.core.data.Resource
-import com.imashnake.animite.core.extensions.bannerParallax
-import com.imashnake.animite.core.extensions.landscapeCutoutPadding
-import com.imashnake.animite.core.extensions.thenIf
-import com.imashnake.animite.core.ui.LocalPaddings
-import com.imashnake.animite.core.ui.MediaSmall
-import com.imashnake.animite.core.ui.MediaSmallRow
-import com.imashnake.animite.core.ui.ProgressIndicatorScreen
-import com.imashnake.animite.core.ui.layouts.BannerLayout
-import com.imashnake.animite.core.ui.layouts.TranslucentStatusBarLayout
-import com.imashnake.animite.core.ui.shaders.etherealShader
 import com.imashnake.animite.media.MediaPage
 import com.imashnake.animite.navigation.SharedContentKey
 import com.imashnake.animite.navigation.SharedContentKey.Component.Card
@@ -182,7 +181,6 @@ fun HomeScreen(
                                                 start = LocalPaddings.current.large,
                                                 bottom = LocalPaddings.current.medium
                                             )
-                                            .landscapeCutoutPadding()
                                             .weight(1f, fill = false),
                                         maxLines = 1
                                     )
@@ -192,8 +190,7 @@ fun HomeScreen(
                                             .padding(
                                                 end = LocalPaddings.current.large,
                                                 bottom = LocalPaddings.current.medium
-                                            )
-                                            .landscapeCutoutPadding(),
+                                            ),
                                         selectedOption = homeMediaType,
                                         viewModel = viewModel
                                     )

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt b/app/src/main/kotlin/com/imashnake/animite/features/searchbar/SearchFrontDrop.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -16,6 +17,7 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imeNestedScroll
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.navigationBarsPadding
@@ -44,10 +46,10 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import com.imashnake.animite.R
 import com.imashnake.animite.api.anilist.sanitize.search.Search
 import com.imashnake.animite.api.anilist.type.MediaType
+import com.imashnake.animite.components.LocalPaddings
+import com.imashnake.animite.components.extensions.CROSSFADE_DURATION
+import com.imashnake.animite.components.media.MediaSmall
 import com.imashnake.animite.core.Constants
-import com.imashnake.animite.core.extensions.landscapeCutoutPadding
-import com.imashnake.animite.core.ui.LocalPaddings
-import com.imashnake.animite.core.ui.MediaSmall
 import com.imashnake.animite.core.R as coreR
 import com.imashnake.animite.media.R as mediaR
 import com.imashnake.animite.navigation.R as navigationR
@@ -61,6 +63,7 @@ import com.imashnake.animite.navigation.R as navigationR
  * @param modifier the [Modifier] to be applied to this Front Drop.
  * @param viewModel [SearchViewModel] instance.
  */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun SearchFrontDrop(
     hasExtraPadding: Boolean,
@@ -83,7 +86,7 @@ fun SearchFrontDrop(
         targetValue = MaterialTheme.colorScheme.background.copy(
             alpha = if (isExpanded) 0.95f else 0f
         ),
-        animationSpec = tween(Constants.CROSSFADE_DURATION),
+        animationSpec = tween(CROSSFADE_DURATION),
         label = "show_front_drop"
     )
 
@@ -96,10 +99,7 @@ fun SearchFrontDrop(
     searchList.data?.let {
         SearchList(
             searchList = it,
-            modifier = Modifier
-                // TODO: Add this back; https://issuetracker.google.com/issues/323708850.
-                //.imeNestedScroll()
-                .landscapeCutoutPadding(),
+            modifier = Modifier.imeNestedScroll(),
             onItemClick = { id ->
                 isExpanded = false
                 viewModel.setQuery(null)
@@ -113,7 +113,6 @@ fun SearchFrontDrop(
         setExpanded = { isExpanded = it },
         onSearched = viewModel::setQuery,
         modifier = modifier
-            .landscapeCutoutPadding()
             .padding(bottom = searchBarBottomPadding)
             .navigationBarsPadding()
             .consumeWindowInsets(PaddingValues(bottom = searchBarBottomPadding))

diff --git a/app/src/main/kotlin/com/imashnake/animite/features/theme/Theme.kt b/app/src/main/kotlin/com/imashnake/animite/features/theme/Theme.kt
@@ -13,9 +13,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
-import com.imashnake.animite.core.ui.LocalPaddings
-import com.imashnake.animite.core.ui.Paddings
-import com.imashnake.animite.core.ui.rememberDefaultPaddings
+import com.imashnake.animite.components.LocalPaddings
+import com.imashnake.animite.components.Paddings
+import com.imashnake.animite.components.rememberDefaultPaddings
 import com.imashnake.animite.media.ext.modify
 import com.materialkolor.PaletteStyle
 import com.materialkolor.rememberDynamicColorScheme

diff --git a/components/build.gradle.kts b/components/build.gradle.kts
@@ -0,0 +1,42 @@
+plugins {
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.compose.compiler)
+    alias(libs.plugins.compose.multiplatform)
+    alias(libs.plugins.detekt)
+}
+
+android {
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
+        }
+    }
+
+    buildFeatures { compose = true }
+
+    namespace = "com.imashnake.animite.components"
+}
+
+kotlin {
+    jvmToolchain(21)
+
+    androidTarget()
+    jvm()
+
+    sourceSets {
+        commonMain.dependencies {
+            implementation(compose.components.resources)
+            implementation(compose.material3)
+            implementation(compose.uiTooling)
+            implementation(libs.bundles.coil)
+        }
+        androidMain.dependencies {
+            implementation(libs.ktor.engine.android)
+        }
+        jvmMain.dependencies {
+            implementation(libs.ktor.engine.java)
+        }
+    }
+}
diff --git a/...ashnake/animite/core/ui/FallbackScreen.kt → ...nake/animite/components/FallbackScreen.kt b/...ashnake/animite/core/ui/FallbackScreen.kt → ...nake/animite/components/FallbackScreen.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui
+package com.imashnake.animite.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box

diff --git a/...nimite/core/ui/NestedScrollableContent.kt → ...ite/components/NestedScrollableContent.kt b/...nimite/core/ui/NestedScrollableContent.kt → ...ite/components/NestedScrollableContent.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui
+package com.imashnake.animite.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -14,14 +14,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Color.Companion.Transparent
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.unit.Dp
-import com.imashnake.animite.core.R
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun NestedScrollableContent(
     modifier: Modifier = Modifier,
-    gradientSize: Dp = dimensionResource(R.dimen.edge_gradient_size),
+    gradientSize: Dp = 8.dp,
     gradientColor: Color = MaterialTheme.colorScheme.background,
     content: @Composable (Modifier) -> Unit,
 ) {

diff --git a/...com/imashnake/animite/core/ui/Paddings.kt → .../imashnake/animite/components/Paddings.kt b/...com/imashnake/animite/core/ui/Paddings.kt → .../imashnake/animite/components/Paddings.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui
+package com.imashnake.animite.components
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.staticCompositionLocalOf

diff --git a/...nake/animite/core/ui/ProgressIndicator.kt → ...ite/components/ProgressIndicatorScreen.kt b/...nake/animite/core/ui/ProgressIndicator.kt → ...ite/components/ProgressIndicatorScreen.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui
+package com.imashnake.animite.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -11,8 +11,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.StrokeCap
-import androidx.compose.ui.res.dimensionResource
-import com.imashnake.animite.core.R
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun ProgressIndicatorScreen(modifier: Modifier = Modifier) {
@@ -29,7 +28,7 @@ private fun ProgressIndicator() {
     LinearProgressIndicator(
         strokeCap = StrokeCap.Round,
         modifier = Modifier
-            .width(dimensionResource(R.dimen.progress_indicator_width))
-            .height(dimensionResource(R.dimen.progress_indicator_height)),
+            .width(100.dp)
+            .height(3.dp),
     )
 }
diff --git a/...in/com/imashnake/animite/core/ui/Stats.kt → ...com/imashnake/animite/components/Stats.kt b/...in/com/imashnake/animite/core/ui/Stats.kt → ...com/imashnake/animite/components/Stats.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui
+package com.imashnake.animite.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column

diff --git a/...nimite/core/extensions/ImageRequestExt.kt → .../components/extensions/ImageRequestExt.kt b/...nimite/core/extensions/ImageRequestExt.kt → .../components/extensions/ImageRequestExt.kt
@@ -1,10 +1,11 @@
-package com.imashnake.animite.core.extensions
+package com.imashnake.animite.components.extensions
 
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.platform.LocalContext
+import coil3.compose.LocalPlatformContext
 import coil3.request.ImageRequest
 import coil3.request.crossfade
-import com.imashnake.animite.core.Constants
+
+const val CROSSFADE_DURATION = 500
 
 /**
  * Crossfades images after the request succeeds.
@@ -13,7 +14,7 @@ import com.imashnake.animite.core.Constants
  */
 @Composable
 fun crossfadeModel(model: Any?) = ImageRequest
-    .Builder(LocalContext.current)
+    .Builder(LocalPlatformContext.current)
     .data(model)
-    .crossfade(Constants.CROSSFADE_DURATION)
+    .crossfade(CROSSFADE_DURATION)
     .build()
diff --git a/...ke/animite/core/extensions/ModifierExt.kt → ...mite/components/extensions/ModifierExt.kt b/...ke/animite/core/extensions/ModifierExt.kt → ...mite/components/extensions/ModifierExt.kt
@@ -1,24 +1,12 @@
-package com.imashnake.animite.core.extensions
+package com.imashnake.animite.components.extensions
 
-import android.content.res.Configuration
 import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-fun Modifier.landscapeCutoutPadding() = composed {
-    if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-        displayCutoutPadding()
-    } else {
-        this
-    }
-}
-
 fun Modifier.bannerParallax(scrollState: ScrollState) = graphicsLayer {
     translationY = 0.7f * scrollState.value
 }

diff --git a/...e/animite/core/ui/layouts/BannerLayout.kt → ...animite/components/layout/BannerLayout.kt b/...e/animite/core/ui/layouts/BannerLayout.kt → ...animite/components/layout/BannerLayout.kt
@@ -1,4 +1,4 @@
-package com.imashnake.animite.core.ui.layouts
+package com.imashnake.animite.components.layout
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -13,10 +13,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.unit.Dp
-import com.imashnake.animite.core.R
-import com.imashnake.animite.core.ui.LocalPaddings
+import androidx.compose.ui.unit.dp
+import com.imashnake.animite.components.LocalPaddings
 
 /**
  * Most screens and pages follow a banner-style layout in Animite.
@@ -35,7 +34,7 @@ fun BannerLayout(
     banner: @Composable (Modifier) -> Unit,
     content: @Composable ColumnScope.() -> Unit,
     modifier: Modifier = Modifier,
-    bannerHeight: Dp = dimensionResource(R.dimen.banner_height),
+    bannerHeight: Dp = 168.dp,
     bannerModifier: Modifier = Modifier
         .height(bannerHeight)
         .fillMaxWidth(),

diff --git a/.../ui/layouts/TranslucentStatusBarLayout.kt → ...ents/layout/TranslucentStatusBarLayout.kt b/.../ui/layouts/TranslucentStatusBarLayout.kt → ...ents/layout/TranslucentStatusBarLayout.kt
@@ -1,28 +1,26 @@
-package com.imashnake.animite.core.ui.layouts
+package com.imashnake.animite.components.layout
 
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.statusBars
-import androidx.compose.material.ContentAlpha
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.unit.Dp
-import com.imashnake.animite.core.R
+import androidx.compose.ui.unit.dp
 
 @Composable
 @Suppress("LongParameterList")
 fun TranslucentStatusBarLayout(
     scrollState: ScrollState,
     modifier: Modifier = Modifier,
-    distanceUntilAnimated: Dp = dimensionResource(R.dimen.banner_height),
-    targetAlpha: Float = ContentAlpha.medium,
+    distanceUntilAnimated: Dp = 168.dp,
+    targetAlpha: Float = 0.6f,
     targetColor: Color = MaterialTheme.colorScheme.background,
     content: @Composable () -> Unit
 ) {