commonMain.io.github.lyxnx.compose.screenables.Previews.kt Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of screenables-desktop Show documentation
Jetpack Compose screen definition utility
There is a newer version: 1.1.3
package io.github.lyxnx.compose.screenables

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

/**
 * Container for preview constants
 */
public object Previews {
    /**
     * The major size for a typical phone screen
     *
     * This is either the height in portrait mode, or the width in landscape mode
     */
    public const val PHONE_PREVIEW_MAJOR: Int = 891

    /**
     * The minor size for a typical phone screen
     *
     * This is either the width in portrait mode, or the height in landscape mode
     */
    public const val PHONE_PREVIEW_MINOR: Int = 411

    /**
     * The major size for a typical tablet screen
     *
     * The either the height in portrait mode, or the width in landscape mode
     */
    public const val TABLET_PREVIEW_MAJOR: Int = 1280

    /**
     * The minor size for a typical tablet screen
     *
     * This is either the width in portrait mode, or the height in landscape mode
     */
    public const val TABLET_PREVIEW_MINOR: Int = 800

    internal const val GROUP_PHONE = "Phone"
    internal const val GROUP_TABLET = "Tablet"
}

/**
 * Previews a single component
 *
 * This function takes an optional [ScreenDefinition] parameter that can be used to provide a certain definition to the
 * component to preview. This is useful for components that depend on [LocalScreenDefinition] and change based on its value
 *
 * This function is preferred over [ScreenPreview] when previewing singular components
 */
@Composable
public fun ComponentPreview(
    backgroundColor: Color = Color.White,
    contentPadding: PaddingValues = PaddingValues(),
    screenDefinition: ScreenDefinition = LocalScreenDefinition.current,
    content: @Composable BoxScope.() -> Unit,
) {
    ProvideLocalScreenDefinition(screenDefinition) {
        Box(
            modifier = Modifier
                .background(backgroundColor)
                .padding(contentPadding),
            contentAlignment = Alignment.Center
        ) {
            content(this)
        }
    }
}

/**
 * Previews a composable with the given content padding
 *
 * This function takes an optional [ScreenDefinition] parameter that can be used to provide a certain definition to the
 * screen to preview. This is useful for components that depend on [LocalScreenDefinition] and change based on its value
 *
 * This function is preferred over [ComponentPreview] when previewing whole screens
 */
@Composable
public fun ScreenPreview(
    backgroundColor: Color = Color.White,
    contentPadding: PaddingValues = PaddingValues(),
    screenDefinition: ScreenDefinition = LocalScreenDefinition.current,
    content: @Composable BoxScope.() -> Unit,
) {
    ComponentPreview(
        backgroundColor = backgroundColor,
        contentPadding = contentPadding,
        screenDefinition = screenDefinition,
        content = content
    )
}