Approaches to Compose Previews

0 - Compose Previews.kt

package com.dladukedev.composepreviews.base

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

data class UserCardState(
    val userName: String,
    val isActive: Boolean,
    val activeDescription: String,
)

@Composable
fun userCardState(
    userName: String,
    isActive: Boolean,
): UserCardState {
    return remember(userName, isActive) {
        UserCardState(
            userName = userName,
            isActive = isActive,
            activeDescription = if (isActive) {
                "Active"
            } else {
                "Inactive"
            }
        )
    }
}

@Composable
fun UserCard(state: UserCardState, modifier: Modifier = Modifier) {
    Card(modifier = modifier) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(8.dp)
                .fillMaxWidth()
        ) {
            Text(text = state.userName)
            Text(
                text = state.activeDescription,
                color = if (state.isActive) {
                    Color.Black
                } else {
                    Color.Red
                }
            )
        }
    }
}

1 - Brute Force Method.kt

@Preview
@Composable
fun PreviewUserCard() {
    val state = UserCardState(
        userName = "John Doe",
        isActive = true,
        activeDescription = "Active",
    )
    UserCard(state = state)
}

@Preview
@Composable
fun PreviewUserCardInactive() {
    val state = UserCardState(
        userName = "John Doe",
        isActive = false,
        activeDescription = "Inactive",
    )
    UserCard(state = state)
}

2 - Hardcoded Method - Companion Object.kt

data class UserCardState(
    val userName: String,
    val isActive: Boolean,
    val activeDescription: String,
) {
    companion object {
        val preview = UserCardState(
            userName = "John Doe",
            isActive = true,
            activeDescription = "Active",
        )
    }
}

@Preview
@Composable
fun PreviewUserCard() {
    val state = UserCardState.preview
    UserCard(state = state)
}

@Preview
@Composable
fun PreviewUserCardInactive() {
    val state = UserCardState.preview
        .copy(isActive = false, activeDescription = "Inactive")
    UserCard(state = state)
}

2 - Hardcoded Method - Global Value.kt

private val userCardStatePreview = UserCardState(
    userName = "John Doe",
    isActive = true,
    activeDescription = "Active",
)

@Preview
@Composable
fun PreviewUserCard() {
    val state = userCardStatePreview
    UserCard(state = state)
}

@Preview
@Composable
fun PreviewUserCardInactive() {
    val state = userCardStatePreview
        .copy(isActive = false, activeDescription = "Inactive")
    UserCard(state = state)
}

2 - Hardcoded Method - Preview Parameter.kt

private val userCardStatePreview = UserCardState(
    userName = "John Doe",
    isActive = true,
    activeDescription = "Active",
)

class UserCardStatePreviewParameterProvider : CollectionPreviewParameterProvider<UserCardState>(
    listOf(
        userCardStatePreview,
        userCardStatePreview.copy(isActive = false, activeDescription = "Invalid")
    )
)

@Preview
@Composable
fun PreviewUserCard(@PreviewParameter(UserCardStatePreviewParameterProvider::class) state: UserCardState) {
    UserCard(state = state)
}

3 - Factory Method.kt

object UserStateFactory {
    fun create(
        userName: String = "John Doe",
        isActive: Boolean = true,
    ): UserCardState {
        val activeDescription = if (isActive) {
            "Active"
        } else {
            "Inactive"
        }

        return UserCardState(
            userName = userName,
            isActive = isActive,
            activeDescription = activeDescription,
        )
    }
}

@Preview
@Composable
fun PreviewUserCard() {
    val state = UserStateFactory.create()
    UserCard(state = state)
}

@Preview
@Composable
fun PreviewUserCardInactive() {
    val state = UserStateFactory.create(isActive = false)
    UserCard(state = state)
}

4 - State Holder Integration Method.kt

@Preview
@Composable
fun PreviewUserCard() {
    val state = userCardState(userName = "John Doe", isActive = true)
    UserCard(state = state)
}

@Preview
@Composable
fun PreviewUserCardInactive() {
    val state = userCardState(userName = "John Doe", isActive = false)
    UserCard(state = state)
}