The New State and animations in Styles, Grid Layout and Flex in Compose

HoverGridFlex.kt

package io.jadu.newapistest

import androidx.compose.animation.core.tween
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ExperimentalFlexBoxApi
import androidx.compose.foundation.layout.ExperimentalGridApi
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.animate
import androidx.compose.foundation.style.contentPadding
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


@OptIn(ExperimentalFoundationApi::class, ExperimentalFoundationStyleApi::class)
@Composable
fun BaseButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style {},
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
) {
    val styleState = rememberUpdatedStyleState(interactionSource) {
        it.isEnabled = enabled
    }

    Row(
        modifier = modifier
            .semantics(properties = { role = Role.Button })
            .clickable(
                enabled = enabled,
                onClick = onClick,
                interactionSource = interactionSource,
                indication = null // Style handles hover/press visuals
            )
            .styleable(styleState, style),
        content = content,
        verticalAlignment = Alignment.CenterVertically
    )
}

@OptIn(ExperimentalFoundationApi::class, ExperimentalFoundationStyleApi::class)
@Composable
fun StyleApiExample() {
    BaseButton(
        onClick = { /* action */ },
        style = Style {
            background(Color(0xFF1A1A2E))
            contentPadding(vertical = 13.dp, horizontal = 20.dp)

            dropShadow(
                Shadow(
                    radius = 0.dp,
                    color = Color(0xFFFFE54C),
                    spread = 0.dp,
                    offset = DpOffset(7.dp, 7.dp)
                )
            )

            hovered {
                animate(tween(200)) {
                    dropShadow(
                        Shadow(
                            radius = 8.dp,
                            color = Color(0xFFFFE54C),
                            spread = 2.dp,
                            offset = DpOffset(0.dp, 0.dp)
                        )
                    )
                }
            }

            pressed {
                animate(tween(100)) {
                    dropShadow(
                        Shadow(
                            radius = 2.dp,
                            color = Color(0xFFFFE54C),
                            spread = 0.dp,
                            offset = DpOffset(1.dp, 1.dp)
                        )
                    )
                }
            }
        }
    ) {
        Text("Hover / Press Me", color = Color.White, fontSize = 16.sp)
    }
}


@OptIn(ExperimentalGridApi::class)
@Composable
fun GridLayoutExample() {
    Grid(
        modifier = Modifier.fillMaxWidth().height(300.dp),
        config = {
            repeat(3) { column(1.fr) }
            row(60.dp)
            row(1.fr)
            row(48.dp)
            gap(4.dp)
        }
    ) {
        Box(
            Modifier
                .gridItem(columnSpan = 3)
                .background(Color(0xFF0F3460))
                .fillMaxSize()
        ) {
            Text("Header", color = Color.White, modifier = Modifier.align(Alignment.Center))
        }

        Box(
            Modifier
                .background(Color(0xFF533483))
                .fillMaxSize()
        ) {
            Text("Sidebar", color = Color.White, modifier = Modifier.align(Alignment.Center))
        }

        Box(
            Modifier
                .gridItem(columnSpan = 2)
                .background(Color(0xFF2B2D42))
                .fillMaxSize()
        ) {
            Text("Main", color = Color.White, modifier = Modifier.align(Alignment.Center))
        }

        Box(
            Modifier
                .gridItem(columnSpan = 3)
                .background(Color(0xFF8D99AE))
                .fillMaxSize()
        ) {
            Text("Footer", color = Color.White, modifier = Modifier.align(Alignment.Center))
        }
    }
}


@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxExample() {
    FlexBox(
        modifier = Modifier.fillMaxWidth(),
        config = {
            wrap(FlexWrap.Wrap)
            gap(8.dp)
        }
    ) {
        Box(
            Modifier
                .size(80.dp)
                .background(Color(0xFFE63946))
        )

        Box(
            Modifier
                .width(120.dp).height(80.dp)
                .flex { grow(1.0f) }
                .background(Color(0xFF457B9D))
        )

        Box(
            Modifier
                .size(100.dp)
                .flex { grow(0.5f); shrink(1.0f) }
                .background(Color(0xFF2A9D8F))
        )

        Box(
            Modifier
                .size(80.dp)
                .flex { grow(0.3f) }
                .background(Color(0xFFE9C46A))
        )

        Box(
            Modifier
                .size(80.dp)
                .background(Color(0xFFF4A261))
        )
    }
}