Add Previews for All Compose Multiplatform Views

[kaszabimre]

Task Description: Add Previews for All Compose Multiplatform Views

Follow the Contribution Guidelines:

Before contributing, make sure to check the Contributing section in the root README.md file for more information on how to contribute to this project.

Goal

Ensure that all Compose Multiplatform views have associated previews, both in light and dark modes. Previews should be placed within the androidMain source set of each module that contains UI components. This will help streamline the development and design review process.

Steps

1. Update the build.gradle.kts Files:

   • In every module where views are defined (e.g., :features:details:view), ensure that the build.gradle.kts file is updated to include the required dependencies for Compose previews.

   • You can follow the example from the features/details/view module:

     android {
         ...
         dependencies {
             // Compose
             implementation(libs.compose.ui.tooling.preview)
             implementation(libs.compose.ui.tooling)
             implementation(libs.compose.runtime)
     
             // Coil
             implementation(libs.coil.network.okhttp)
     
             // Detekt
             detektPlugins(libs.detekt.formatting)
         }
     }

2. Create Previews in androidMain:

   • For every Compose view in the project, add a corresponding preview in the androidMain source set. The preview should include both a light mode and a dark mode version.

   • The previews should be created similarly to the example below, which comes from PlayerStatItemPreviews.kt:

     @Preview(name = "PlayerStatItemPreviewLight", group = "Components")
     @Preview(
         name = "PlayerStatItemPreviewDark",
         group = "Components",
         uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL
     )
     @Composable
     fun PlayerStatItemPreview() {
         PreviewBox {
             PlayerStatItem(
                 imageUrl = MockPlayer.createMockPlayer().team.imageUrl,
                 stat = stringResource(Res.string.team),
                 label = MockPlayer.createMockPlayer().team.label
             )
         }
     }

3. Use PreviewBox for Previews:

   • Ensure that all previews use the PreviewBox composable, which wraps the content in the appropriate theme and layout box. Here is the definition for PreviewBox:

     package io.imrekaszab.eaplayers.theme.preview
     
     import androidx.compose.foundation.background
     import androidx.compose.foundation.layout.Box
     import androidx.compose.runtime.Composable
     import androidx.compose.ui.Modifier
     import io.imrekaszab.eaplayers.theme.AppTheme
     
     @Composable
     fun PreviewBox(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
         AppTheme {
             Box(modifier = modifier.background(color = AppTheme.colorScheme.inverseOnSurface)) {
                 content()
             }
         }
     }

4. Ensure Consistency Across Modules:

   • Add the preview logic to all modules with UI components. Make sure that every Compose view has a preview.
   • Each preview should support both light and dark mode by utilizing the uiMode configuration in the @Preview annotations.
   • The group parameter for the @Preview annotation should be either "Components" or "Screen", depending on whether the view represents a component or an entire screen.

5. Validate the Previews:

   • Once the previews are in place, open Android Studio and ensure that all previews render correctly in both light and dark modes.
   • The previews should appear in the androidMain set and should provide a clear visual of the components in both themes.

Outcome

All Compose views will have corresponding previews in both light and dark modes, making it easier for developers to quickly inspect UI components without running the app. The use of PreviewBox ensures that the previews are consistent with the app's overall theme. This will improve the UI review and development process across modules.