From af5f791a0d530519de4f473b77988c27fbead9b4 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:01:13 +0300 Subject: [PATCH 01/47] refactor(ui): rename component files --- .../hyperion/ui/components/button/{Button.kt => Component.kt} | 0 .../atls/hyperion/ui/components/input/{Input.kt => Component.kt} | 0 .../hyperion/ui/components/modal/popup/{Popup.kt => Component.kt} | 0 .../hyperion/ui/components/switch/{Switch.kt => Component.kt} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/{Button.kt => Component.kt} (100%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/{Input.kt => Component.kt} (100%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/{Popup.kt => Component.kt} (100%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/{Switch.kt => Component.kt} (100%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/Button.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/Component.kt similarity index 100% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/Button.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/Input.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/Component.kt similarity index 100% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/Input.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/Popup.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/Component.kt similarity index 100% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/Popup.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/Switch.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/Component.kt similarity index 100% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/Switch.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/Component.kt From 768d874f28b4a61f0de10ddd1944abfaf9c10f50 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:14:44 +0300 Subject: [PATCH 02/47] feat(ui): pagination styles --- .../pagination/style/appearance/Appearance.kt | 18 ++++++++++++ .../pagination/style/appearance/Variants.kt | 11 ++++++++ .../pagination/style/shape/Shape.kt | 21 ++++++++++++++ .../pagination/style/shape/Variants.kt | 28 +++++++++++++++++++ 4 files changed, 78 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Appearance.kt new file mode 100644 index 000000000..055def21a --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Appearance.kt @@ -0,0 +1,18 @@ +package com.atls.hyperion.ui.components.pagination.style.appearance + +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.ui.components.pagination.state.PaginationState + +data class PaginationAppearance( + val activeColor: Color, + val disabledColor: Color, + val backgroundColor: Color = Color.Transparent +) { + companion object + + fun fromState(state: PaginationState): Color = + when (state) { + PaginationState.Active -> activeColor + PaginationState.Disabled -> disabledColor + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Variants.kt new file mode 100644 index 000000000..a9e81e342 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/appearance/Variants.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.pagination.style.appearance + +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +@Composable +fun PaginationAppearance.Companion.default(): PaginationAppearance = + PaginationAppearance( + activeColor = Colors.Palette.blueProtective, + disabledColor = Colors.Palette.gray + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Shape.kt new file mode 100644 index 000000000..3bfd4af58 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Shape.kt @@ -0,0 +1,21 @@ +package com.atls.hyperion.ui.components.pagination.style.shape + +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.DpSize +import com.atls.hyperion.ui.components.pagination.state.PaginationState + +class PaginationShape( + val activeSize: DpSize, + val disabledSize: DpSize, + val spacing: Dp, + val cornerRadius: Dp +) { + companion object + + fun sizeFromState(state: PaginationState): DpSize = + when (state) { + PaginationState.Active -> activeSize + PaginationState.Disabled -> disabledSize + } +} + diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt new file mode 100644 index 000000000..de5c01750 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt @@ -0,0 +1,28 @@ +package com.atls.hyperion.ui.components.pagination.style.shape + +import androidx.compose.runtime.Composable +import androidx.compose.ui.unit.DpSize +import com.atls.hyperion.ui.theme.tokens.components.PaginationItemSize +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun PaginationShape.Companion.circle(): PaginationShape = + PaginationShape( + activeSize = DpSize(PaginationItemSize.medium, PaginationItemSize.medium), + disabledSize = DpSize(PaginationItemSize.small, PaginationItemSize.small), + spacing = Space.g16, + cornerRadius = CornerRadius.full + ) + +@Composable +fun PaginationShape.Companion.rectangle(): PaginationShape = + PaginationShape( + activeSize = DpSize(PaginationItemSize.rectangleWidth, PaginationItemSize.rectangleHeight), + disabledSize = DpSize( + PaginationItemSize.rectangleWidth, + PaginationItemSize.rectangleHeight + ), + spacing = Space.g8, + cornerRadius = CornerRadius.md + ) From 928cd70b932a16141e3ff2281e3bc06a51911b62 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:14:54 +0300 Subject: [PATCH 03/47] feat(ui): pagination state --- .../atls/hyperion/ui/components/pagination/state/State.kt | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/state/State.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/state/State.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/state/State.kt new file mode 100644 index 000000000..dff1fc2e1 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/state/State.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.pagination.state + +enum class PaginationState { + Active, + Disabled +} From 9886ed408a15ce9ab9ca47e1d6916d68ca40835d Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:15:00 +0300 Subject: [PATCH 04/47] feat(ui): pagination component --- .../ui/components/pagination/Component.kt | 44 +++++++++++++++++++ .../ui/components/pagination/ui/Item.kt | 40 +++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/ui/Item.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/Component.kt new file mode 100644 index 000000000..50262af4a --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/Component.kt @@ -0,0 +1,44 @@ +package com.atls.hyperion.ui.components.pagination + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.pagination.state.PaginationState +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.ui.PaginationItem + +@Composable +fun Pagination( + currentPage: Int, + count: Int, + appearance: PaginationAppearance, + shape: PaginationShape, + modifier: Modifier = Modifier, + onPageClick: ((Int) -> Unit)? = null +) { + Row( + horizontalArrangement = Arrangement.spacedBy(shape.spacing), + verticalAlignment = Alignment.CenterVertically, + modifier = modifier.background(appearance.backgroundColor) + ) { + for (index in 0 until count) { + val state = when { + index == currentPage -> PaginationState.Active + else -> PaginationState.Disabled + } + val itemColor = appearance.fromState(state) + val itemSize = shape.sizeFromState(state) + + PaginationItem( + itemColor = itemColor, + size = itemSize, + cornerRadius = shape.cornerRadius, + onClick = onPageClick?.let { { it(index) } } + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/ui/Item.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/ui/Item.kt new file mode 100644 index 000000000..5d307272a --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/ui/Item.kt @@ -0,0 +1,40 @@ +package com.atls.hyperion.ui.components.pagination.ui + +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.size +import androidx.compose.foundation.shape.RoundedCornerShape +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 +import androidx.compose.ui.unit.DpSize + +@Composable +fun PaginationItem( + itemColor: Color, + size: DpSize, + cornerRadius: Dp, + onClick: (() -> Unit)? = null +) { + Box( + modifier = Modifier + .size(size) + .background( + color = itemColor, + shape = RoundedCornerShape(cornerRadius) + ) + .let { + if (onClick != null) { + it.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null, + onClick = onClick + ) + } else it + } + ) +} From 4f93fdc267bdbe3960f3ec8580235b220a87f8cc Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:15:11 +0300 Subject: [PATCH 05/47] feat(theme): pagination item sizes --- .../ui/theme/tokens/components/PaginationItemSize.kt | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt new file mode 100644 index 000000000..7b1ad0732 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.theme.tokens.components + +import androidx.compose.ui.unit.dp + +object PaginationItemSize { + val medium = 12.dp + val small = 8.dp + + val rectangleHeight = 4.dp + val rectangleWidth = 20.dp +} From cab70e2b8da962de3685418727ba3c77138bd7a8 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:15:23 +0300 Subject: [PATCH 06/47] chore(theme): full alpha --- .../kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt index ae0441a7a..ed931f8b2 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt @@ -1,6 +1,7 @@ package com.atls.hyperion.ui.theme.tokens.colors object Alpha { + val full = 1f val huge = 0.9f val large = 0.8f val medium = 0.6f From 4bfa5dc79d81fe54224cdd7ab0e27be3d996ecd7 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:21:44 +0300 Subject: [PATCH 07/47] feat(ui): carousel theme --- .../ui/components/carousel/style/shape/Shape.kt | 13 +++++++++++++ .../ui/components/carousel/style/shape/Variants.kt | 10 ++++++++++ 2 files changed, 23 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Shape.kt new file mode 100644 index 000000000..f63eb5d40 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Shape.kt @@ -0,0 +1,13 @@ +package com.atls.hyperion.ui.components.carousel.style.shape + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.unit.Dp + +@Immutable +data class CarouselShape( + val itemSpacing: Dp, + val peekWidth: Dp, + val padding: Dp +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt new file mode 100644 index 000000000..8f68edd74 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt @@ -0,0 +1,10 @@ +package com.atls.hyperion.ui.components.carousel.style.shape + +import com.atls.hyperion.ui.theme.tokens.layout.Space + +fun CarouselShape.Companion.default() = + CarouselShape( + itemSpacing = Space.g16, + peekWidth = Space.zero, + padding = Space.g24 + ) From d800f5385755cb20b0f869432574a8a9eb6707f4 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:22:13 +0300 Subject: [PATCH 08/47] feat(ui): carousel ui utils --- .../hyperion/ui/components/carousel/ui/CalculateDistance.kt | 6 ++++++ .../atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt | 4 ++++ .../hyperion/ui/components/carousel/ui/CenterOfViewport.kt | 4 ++++ .../ui/components/carousel/ui/NormalizedStartIndex.kt | 6 ++++++ 4 files changed, 20 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt new file mode 100644 index 000000000..8b2bbc89e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.carousel.ui + +import kotlin.math.abs + +fun calculateDistance(itemCenter: Int, viewportCenter: Int, stepPx: Float): Float = + abs(itemCenter - viewportCenter) / stepPx diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt new file mode 100644 index 000000000..d807a9ccf --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt @@ -0,0 +1,4 @@ +package com.atls.hyperion.ui.components.carousel.ui + +fun centerOfItem(offset: Int, size: Int): Int = + offset + size / 2 diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt new file mode 100644 index 000000000..889dd3aa6 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt @@ -0,0 +1,4 @@ +package com.atls.hyperion.ui.components.carousel.ui + +fun centerOfViewport(viewportStartOffset: Int, viewportWidth: Int): Int = + viewportStartOffset + viewportWidth / 2 diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt new file mode 100644 index 000000000..93046395d --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.carousel.ui + +fun normalizedStartIndex(centerIndex: Int, itemsSize: Int): Int { + val middle = Int.MAX_VALUE / 2 + return middle - (middle % itemsSize) + (centerIndex % itemsSize) +} From d5ee0348bf2534fd9fc21c2b6b209dc299c1ea9a Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:22:22 +0300 Subject: [PATCH 09/47] feat(ui): carousel component --- .../ui/components/carousel/Component.kt | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/Component.kt new file mode 100644 index 000000000..1463f1643 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/Component.kt @@ -0,0 +1,38 @@ +package com.atls.hyperion.ui.components.carousel + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.PagerState +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.carousel.style.shape.CarouselShape +import com.atls.hyperion.ui.components.carousel.style.shape.default + +@Composable +fun Carousel( + modifier: Modifier = Modifier, + pageCount: Int, + shape: CarouselShape = CarouselShape.default(), + pagerState: PagerState = rememberPagerState(pageCount = { + pageCount + }), + content: @Composable (page: Int) -> Unit +) { + + HorizontalPager( + state = pagerState, + contentPadding = PaddingValues(horizontal = shape.peekWidth + shape.padding), + modifier = modifier.fillMaxWidth(), + pageSpacing = shape.padding + ) { page -> + Box( + modifier = Modifier + .fillMaxWidth() + ) { + content(page) + } + } +} From 086b6f44e67e535fe5e4f44fb5dfc26096ec8e07 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:22:36 +0300 Subject: [PATCH 10/47] feat(ui): infinite overlay carousel --- .../ui/components/carousel/InfiniteOverlay.kt | 166 ++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt new file mode 100644 index 000000000..c6b249f7f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt @@ -0,0 +1,166 @@ +package com.atls.hyperion.ui.components.carousel + +import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxWithConstraints +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.MutableState +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.runtime.snapshotFlow +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.zIndex +import com.atls.hyperion.ui.components.carousel.ui.calculateDistance +import com.atls.hyperion.ui.components.carousel.ui.centerOfItem +import com.atls.hyperion.ui.components.carousel.ui.centerOfViewport +import com.atls.hyperion.ui.components.carousel.ui.normalizedStartIndex +import com.atls.hyperion.ui.theme.tokens.colors.Alpha +import com.atls.hyperion.ui.theme.tokens.layout.Space +import kotlin.math.abs + +@Composable +fun InfiniteOverlayCarousel( + items: List, + modifier: Modifier = Modifier, + baseCardSize: Dp, + sizeStep: Dp, + visibleItemCount: Int, + alphaStep: Float, + minAlpha: Float, + centerIndexState: MutableState, + itemContent: @Composable (item: T, size: Dp, alpha: Float, zIndex: Float) -> Unit +) { + require(items.isNotEmpty()) { "Items list must not be empty" } + require(visibleItemCount > 0) { "Visible item count must be positive" } + require(visibleItemCount % 2 == 1) { "Visible item count should be odd for symmetrical layout" } + + val startIndex = remember(items) { + normalizedStartIndex(centerIndexState.value, items.size) + } + + val listState = rememberLazyListState(initialFirstVisibleItemIndex = startIndex) + val density = LocalDensity.current + val halfCount = (visibleItemCount - 1) / 2 + + BoxWithConstraints(modifier = modifier + .height(baseCardSize)) { + val screenWidth = maxWidth + val screenWidthPx = with(density) { screenWidth.toPx() } + val baseCardSizePx = with(density) { baseCardSize.toPx() } + + val spacingPx = if (visibleItemCount == 1) { + 0f + } else { + (screenWidthPx - visibleItemCount * baseCardSizePx) / (visibleItemCount) + } + + val spacing = with(density) { spacingPx.toDp() } + val itemStepPx = baseCardSizePx + spacingPx + + val flingBehavior = rememberSnapFlingBehavior(lazyListState = listState) + + val viewportCenter by remember { + derivedStateOf { + centerOfViewport( + listState.layoutInfo.viewportStartOffset, + listState.layoutInfo.viewportSize.width + ) + } + } + + val currentCenterIndex by remember { + derivedStateOf { + val visibleItems = listState.layoutInfo.visibleItemsInfo + visibleItems.minByOrNull { info -> + abs(centerOfItem(info.offset, info.size) - viewportCenter) + }?.index ?: listState.firstVisibleItemIndex + } + } + + LaunchedEffect(currentCenterIndex) { + centerIndexState.value = currentCenterIndex + } + + LaunchedEffect(listState) { + snapshotFlow { listState.layoutInfo.visibleItemsInfo.isNotEmpty() } + .collect { ready -> + if (ready && !listState.isScrollInProgress) { + val visibleItems = listState.layoutInfo.visibleItemsInfo + val centerItemInfo = visibleItems.minByOrNull { info -> + abs(centerOfItem(info.offset, info.size) - viewportCenter) + } + centerItemInfo?.let { info -> + val realIndex = info.index % items.size + val middle = Int.MAX_VALUE / 2 - (Int.MAX_VALUE / 2) % items.size + val targetIndex = middle + realIndex + val offset = (info.size / 2) - (listState.layoutInfo.viewportSize.width / 2) + listState.scrollToItem(targetIndex, offset) + } + } + } + } + + val startDrawIndex by remember { + derivedStateOf { currentCenterIndex - halfCount } + } + val endDrawIndex by remember { + derivedStateOf { currentCenterIndex + halfCount } + } + + LazyRow( + state = listState, + flingBehavior = flingBehavior, + contentPadding = PaddingValues(Space.zero), + horizontalArrangement = Arrangement.spacedBy(spacing), + verticalAlignment = Alignment.CenterVertically, + ) { + items( + count = Int.MAX_VALUE, + key = { it } + ) { index -> + if (index !in startDrawIndex..endDrawIndex) { + Spacer(Modifier.width(baseCardSize)) + return@items + } + + val currentItemInfo = + listState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == index } + val distance = currentItemInfo?.let { info -> + calculateDistance( + centerOfItem(info.offset, info.size), + viewportCenter, + itemStepPx + ) + } ?: abs(index - currentCenterIndex).toFloat() + + val clampedDistance = distance.coerceAtMost(halfCount.toFloat()) + val size = baseCardSize - (sizeStep * clampedDistance) + val alpha = (Alpha.full - (alphaStep * clampedDistance)).coerceAtLeast(minAlpha) + val zIndex = (visibleItemCount - clampedDistance) + + val item = items[index % items.size] + + Box( + modifier = Modifier + .width(baseCardSize) + .zIndex(zIndex), + contentAlignment = Alignment.Center + ) { + itemContent(item, size, alpha, zIndex) + } + } + } + } +} From 7178e6a531e549cf6ba8b0ec97e39d6fc9a47431 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:22:52 +0300 Subject: [PATCH 11/47] feat(ui): carousel with pagination --- .../ui/components/carousel/WithPagination.kt | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt new file mode 100644 index 000000000..96b67a6f5 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt @@ -0,0 +1,51 @@ +package com.atls.hyperion.ui.components.carousel + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.pager.PagerState +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.carousel.style.shape.CarouselShape +import com.atls.hyperion.ui.components.carousel.style.shape.default +import com.atls.hyperion.ui.components.pagination.Pagination +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle +import com.atls.hyperion.ui.primitives.VerticalSpacer +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun CarouselWithPagination( + modifier: Modifier = Modifier, + pageCount: Int, + shape: CarouselShape = CarouselShape.default(), + pagerState: PagerState = rememberPagerState(pageCount = { + pageCount + }), + paginationAppearance: PaginationAppearance = PaginationAppearance.default(), + paginationShape: PaginationShape = PaginationShape.circle(), + content: @Composable (page: Int) -> Unit +) { + Column( + horizontalAlignment = Alignment.CenterHorizontally + ) { + Carousel( + pageCount = pageCount, + modifier = modifier, + shape = shape, + pagerState = pagerState, + content = content + ) + + VerticalSpacer(Space.g12) + + Pagination( + currentPage = pagerState.currentPage, + count = pageCount, + appearance = paginationAppearance, + shape = paginationShape + ) + } +} From 5f7acb88b50b4f1a67135c4f577082e4f5c5c307 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:23:02 +0300 Subject: [PATCH 12/47] feat(ui): carousel stories --- .../components/carousel/stories/Component.kt | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt new file mode 100644 index 000000000..9e1dfb7b0 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt @@ -0,0 +1,123 @@ +package com.atls.hyperion.ui.components.carousel.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +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.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.Carousel +import com.atls.hyperion.ui.components.carousel.CarouselWithPagination +import com.atls.hyperion.ui.components.carousel.InfiniteOverlayCarousel +import com.atls.hyperion.ui.components.carousel.style.shape.CarouselShape +import com.atls.hyperion.ui.components.carousel.style.shape.default +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle + +class CarouselStory : ComponentExample { + override val name: String = "Carousel" + + @Composable + override fun Content() { + Column( + modifier = Modifier.verticalScroll(rememberScrollState()) + ) { + ComponentVariants( + name = "Carousel", + appearances = listOf( + "Default" to { Unit } + ), + shapes = listOf( + "Default" to { CarouselShape.default() } + ) + ) { _, shape -> + Carousel( + pageCount = 5, + shape = shape, + modifier = Modifier.height(200.dp) + ) { page: Int -> + CarouselItem(page) + } + } + + ComponentVariants( + name = "Carousel With Pagination", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() } + ) + ) { appearance, shape -> + CarouselWithPagination( + pageCount = 5, + paginationAppearance = appearance, + paginationShape = shape, + modifier = Modifier.height(200.dp) + ) { page: Int -> + CarouselItem(page) + } + } + + val centerIndexState = remember { mutableStateOf(0) } + ComponentVariants( + name = "Infinite Overlay Carousel", + appearances = listOf( + "Default" to { Unit } + ), + shapes = listOf( + "Default" to { Unit } + ) + ) { _, _ -> + InfiniteOverlayCarousel( + items = listOf(Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan), + baseCardSize = 200.dp, + sizeStep = 20.dp, + visibleItemCount = 3, + alphaStep = 0.2f, + minAlpha = 0.5f, + centerIndexState = centerIndexState, + modifier = Modifier.fillMaxWidth().height(220.dp) + ) { color, size, alpha, _ -> + Box( + modifier = Modifier + .height(size) + .fillMaxWidth() + .padding(horizontal = 8.dp) + .background(color.copy(alpha = alpha)), + contentAlignment = Alignment.Center + ) { + Text("Item", color = Color.White) + } + } + } + } + } + + @Composable + private fun CarouselItem(page: Int) { + Box( + modifier = Modifier + .fillMaxWidth() + .height(200.dp) + .background(if (page % 2 == 0) Color.LightGray else Color.Gray), + contentAlignment = Alignment.Center + ) { + Text(text = "Page $page") + } + } +} From 628a1c739bea7a464431037ec4c4226368210d3f Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 14:23:29 +0300 Subject: [PATCH 13/47] feat(ui): pagination story --- .../kotlin/com/atls/hyperion/sample/App.kt | 6 +- .../storybook/shared/ui/ComponentVariants.kt | 3 - .../pagination/stories/Component.kt | 88 +++++++++++++++++++ 3 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index cfcc0b92e..c68a2a64a 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -6,11 +6,13 @@ import com.atls.hyperion.storybook.fragments.storybook.Storybook import com.atls.hyperion.ui.components.avatar.stories.AvatarStory import com.atls.hyperion.ui.components.button.stories.ButtonStory import com.atls.hyperion.ui.components.card.stories.CardStory +import com.atls.hyperion.ui.components.carousel.stories.CarouselStory import com.atls.hyperion.ui.components.checkbox.stories.CheckboxStory import com.atls.hyperion.ui.components.divider.stories.DividerStory import com.atls.hyperion.ui.components.input.stories.InputStory import com.atls.hyperion.ui.components.modal.bottom.stories.BottomDialogStory import com.atls.hyperion.ui.components.modal.popup.stories.PopupStory +import com.atls.hyperion.ui.components.pagination.stories.PaginationStory import com.atls.hyperion.ui.components.switch.stories.SwitchStory import com.atls.hyperion.ui.fragment.datepicker.stories.DatePickerStory import com.atls.hyperion.ui.fragment.datepicker.stories.DateRangePickerStory @@ -25,14 +27,16 @@ fun App() { AvatarStory(), BottomDialogStory(), ButtonStory(), + CardStory(), + CarouselStory(), CheckboxStory(), DatePickerStory(), DateRangePickerStory(), DividerStory(), InputStory(), + PaginationStory(), PopupStory(), SwitchStory(), - CardStory(), TextStory(), LinkStory() ) diff --git a/mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/shared/ui/ComponentVariants.kt b/mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/shared/ui/ComponentVariants.kt index dab73d455..f1ab16545 100644 --- a/mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/shared/ui/ComponentVariants.kt +++ b/mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/shared/ui/ComponentVariants.kt @@ -7,8 +7,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width -import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.verticalScroll import androidx.compose.material.Divider import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -27,7 +25,6 @@ fun ComponentVariants( Column( modifier = Modifier .fillMaxWidth() - .verticalScroll(rememberScrollState()) .padding(Padding.medium), verticalArrangement = Arrangement.spacedBy(Padding.large) ) { diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt new file mode 100644 index 000000000..712f9d2c8 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt @@ -0,0 +1,88 @@ +package com.atls.hyperion.ui.components.pagination.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.CarouselWithPagination +import com.atls.hyperion.ui.components.pagination.Pagination +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle +import com.atls.hyperion.ui.components.pagination.style.shape.rectangle +import com.atls.hyperion.ui.primitives.VerticalSpacer +import com.atls.hyperion.ui.theme.tokens.layout.Space + +class PaginationStory : ComponentExample { + override val name: String = "Pagination" + + @Composable + override fun Content() { + var currentPage by remember { mutableStateOf(1) } + + Column { + ComponentVariants( + name = "Pagination (Clickable)", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() }, + "Rectangle" to { PaginationShape.rectangle() } + ) + ) { appearance: PaginationAppearance, shape: PaginationShape -> + Pagination( + currentPage = currentPage, + count = 5, + appearance = appearance, + shape = shape, + onPageClick = { currentPage = it } + ) + } + + VerticalSpacer(Space.g24) + + ComponentVariants( + name = "Pagination with Carousel", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() }, + "Rectangle" to { PaginationShape.rectangle() } + ) + ) { appearance, shape -> + CarouselWithPagination( + pageCount = 5, + paginationAppearance = appearance, + paginationShape = shape, + modifier = Modifier.height(100.dp) + ) { page -> + Box( + modifier = Modifier + .fillMaxWidth() + .height(100.dp) + .background(if (page % 2 == 0) Color.LightGray else Color.Gray), + contentAlignment = Alignment.Center + ) { + Text(text = "Page $page") + } + } + } + } + } +} From 7b54a85cfc1441751bfddf945ca2895fbafa8740 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 16:20:22 +0300 Subject: [PATCH 14/47] chore(ui): rename fragment directory --- .../fragment/datepicker/model/DividerPosition.kt | 5 ----- .../datepicker/Fragment.kt | 14 +++++++------- .../datepicker/config/Constants.kt | 2 +- .../datepicker/lib/NextDateRange.kt | 4 ++-- .../datepicker/lib/NextMonth.kt | 2 +- .../datepicker/lib/PreviousMonth.kt | 2 +- .../datepicker/model/DateSelection.kt | 2 +- .../datepicker/model/DividerPosition.kt | 5 +++++ .../datepicker/stories/Component.kt | 6 +++--- .../datepicker/style/appearance/Appearance.kt | 2 +- .../datepicker/style/appearance/Variants.kt | 2 +- .../datepicker/style/shape/Shape.kt | 4 ++-- .../datepicker/style/shape/Variants.kt | 4 ++-- .../datepicker/ui/CalendarHeader.kt | 8 ++++---- .../datepicker/ui/DatePickerContent.kt | 16 ++++++++-------- .../{fragment => fragments}/datepicker/ui/Day.kt | 6 +++--- .../datepicker/ui/WeekDays.kt | 8 ++++---- 17 files changed, 46 insertions(+), 46 deletions(-) delete mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DividerPosition.kt rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/Fragment.kt (59%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/config/Constants.kt (52%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/lib/NextDateRange.kt (73%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/lib/NextMonth.kt (81%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/lib/PreviousMonth.kt (82%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/model/DateSelection.kt (82%) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DividerPosition.kt rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/stories/Component.kt (91%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/style/appearance/Appearance.kt (93%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/style/appearance/Variants.kt (95%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/style/shape/Shape.kt (89%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/style/shape/Variants.kt (92%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/ui/CalendarHeader.kt (89%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/ui/DatePickerContent.kt (89%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/ui/Day.kt (93%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{fragment => fragments}/datepicker/ui/WeekDays.kt (81%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DividerPosition.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DividerPosition.kt deleted file mode 100644 index a6340af9e..000000000 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DividerPosition.kt +++ /dev/null @@ -1,5 +0,0 @@ -package com.atls.hyperion.ui.fragment.datepicker.model - -enum class DividerPosition { - TOP, BOTTOM, NONE -} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/Fragment.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/Fragment.kt similarity index 59% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/Fragment.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/Fragment.kt index 6d08c55c4..3fd25c872 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/Fragment.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/Fragment.kt @@ -1,14 +1,14 @@ -package com.atls.hyperion.ui.fragment.datepicker +package com.atls.hyperion.ui.fragments.datepicker import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import com.atls.hyperion.ui.components.modal.popup.Popup -import com.atls.hyperion.ui.fragment.datepicker.model.DateSelection -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.DatePickerAppearance -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.default -import com.atls.hyperion.ui.fragment.datepicker.style.shape.DatePickerShape -import com.atls.hyperion.ui.fragment.datepicker.style.shape.default -import com.atls.hyperion.ui.fragment.datepicker.ui.DatePickerContent +import com.atls.hyperion.ui.fragments.datepicker.model.DateSelection +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.DatePickerAppearance +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.default +import com.atls.hyperion.ui.fragments.datepicker.style.shape.DatePickerShape +import com.atls.hyperion.ui.fragments.datepicker.style.shape.default +import com.atls.hyperion.ui.fragments.datepicker.ui.DatePickerContent @Composable fun DatePicker( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/config/Constants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/config/Constants.kt similarity index 52% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/config/Constants.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/config/Constants.kt index e86eadb6f..012acf8ad 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/config/Constants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/config/Constants.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.config +package com.atls.hyperion.ui.fragments.datepicker.config internal val DAYS_IN_WEEK = 7 internal val WEEK_RANGE = 0..6 diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextDateRange.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextDateRange.kt similarity index 73% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextDateRange.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextDateRange.kt index cb65aa690..6eeaeced2 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextDateRange.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextDateRange.kt @@ -1,6 +1,6 @@ -package com.atls.hyperion.ui.fragment.datepicker.lib +package com.atls.hyperion.ui.fragments.datepicker.lib -import com.atls.hyperion.ui.fragment.datepicker.model.DateSelection +import com.atls.hyperion.ui.fragments.datepicker.model.DateSelection import kotlinx.datetime.LocalDate fun DateSelection.Range.next(clicked: LocalDate): DateSelection.Range = diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextMonth.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextMonth.kt similarity index 81% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextMonth.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextMonth.kt index 7d054307f..225cec205 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/NextMonth.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/NextMonth.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.lib +package com.atls.hyperion.ui.fragments.datepicker.lib import kotlinx.datetime.Month import kotlinx.datetime.YearMonth diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/PreviousMonth.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/PreviousMonth.kt similarity index 82% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/PreviousMonth.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/PreviousMonth.kt index 1610c86fb..e2445ec80 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/lib/PreviousMonth.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/lib/PreviousMonth.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.lib +package com.atls.hyperion.ui.fragments.datepicker.lib import kotlinx.datetime.Month import kotlinx.datetime.YearMonth diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DateSelection.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DateSelection.kt similarity index 82% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DateSelection.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DateSelection.kt index 2996cd71c..a03c94445 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/model/DateSelection.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DateSelection.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.model +package com.atls.hyperion.ui.fragments.datepicker.model import kotlinx.datetime.LocalDate diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DividerPosition.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DividerPosition.kt new file mode 100644 index 000000000..e2863e68f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/model/DividerPosition.kt @@ -0,0 +1,5 @@ +package com.atls.hyperion.ui.fragments.datepicker.model + +enum class DividerPosition { + TOP, BOTTOM, NONE +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/stories/Component.kt similarity index 91% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/stories/Component.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/stories/Component.kt index 39b06502e..add56c035 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/stories/Component.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.stories +package com.atls.hyperion.ui.fragments.datepicker.stories import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding @@ -11,8 +11,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.ui.fragment.datepicker.DatePicker -import com.atls.hyperion.ui.fragment.datepicker.model.DateSelection +import com.atls.hyperion.ui.fragments.datepicker.DatePicker +import com.atls.hyperion.ui.fragments.datepicker.model.DateSelection class DatePickerStory( override val name: String = "Date picker" diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Appearance.kt similarity index 93% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Appearance.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Appearance.kt index cb1567a4a..cec7cfa90 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Appearance.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Appearance.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.style.appearance +package com.atls.hyperion.ui.fragments.datepicker.style.appearance import androidx.compose.ui.graphics.Color import com.atls.hyperion.ui.components.divider.style.appearance.DividerAppearance diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Variants.kt similarity index 95% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Variants.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Variants.kt index e59fdb1fa..286d6f9de 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/appearance/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/appearance/Variants.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.style.appearance +package com.atls.hyperion.ui.fragments.datepicker.style.appearance import androidx.compose.runtime.Composable import com.atls.hyperion.ui.components.divider.style.appearance.DividerAppearance diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Shape.kt similarity index 89% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Shape.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Shape.kt index 17d915078..620213257 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Shape.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Shape.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.style.shape +package com.atls.hyperion.ui.fragments.datepicker.style.shape import androidx.compose.foundation.layout.PaddingValues import androidx.compose.ui.graphics.Color @@ -8,7 +8,7 @@ import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Dp import com.atls.hyperion.ui.components.divider.style.shape.DividerShape import com.atls.hyperion.ui.components.modal.style.shape.ModalShape -import com.atls.hyperion.ui.fragment.datepicker.model.DividerPosition +import com.atls.hyperion.ui.fragments.datepicker.model.DividerPosition import com.atls.hyperion.ui.theme.tokens.layout.BorderStroke data class DatePickerShape( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt similarity index 92% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Variants.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt index 9ad908e0f..054560fd8 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.style.shape +package com.atls.hyperion.ui.fragments.datepicker.style.shape import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.shape.RoundedCornerShape @@ -8,7 +8,7 @@ import com.atls.hyperion.ui.components.divider.style.shape.DividerShape import com.atls.hyperion.ui.components.divider.style.shape.default import com.atls.hyperion.ui.components.modal.style.shape.ModalShape import com.atls.hyperion.ui.components.modal.style.shape.popup -import com.atls.hyperion.ui.fragment.datepicker.model.DividerPosition +import com.atls.hyperion.ui.fragments.datepicker.model.DividerPosition import com.atls.hyperion.ui.theme.tokens.components.IconSize import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius import com.atls.hyperion.ui.theme.tokens.layout.Space diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/CalendarHeader.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/CalendarHeader.kt similarity index 89% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/CalendarHeader.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/CalendarHeader.kt index 7fda72508..7c54bb6b9 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/CalendarHeader.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/CalendarHeader.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.ui +package com.atls.hyperion.ui.fragments.datepicker.ui import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement @@ -10,9 +10,9 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.painter.Painter import com.atls.hyperion.ui.components.divider.horizontal.HorizontalDivider -import com.atls.hyperion.ui.fragment.datepicker.model.DividerPosition -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.DatePickerAppearance -import com.atls.hyperion.ui.fragment.datepicker.style.shape.DatePickerShape +import com.atls.hyperion.ui.fragments.datepicker.model.DividerPosition +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.DatePickerAppearance +import com.atls.hyperion.ui.fragments.datepicker.style.shape.DatePickerShape import com.atls.hyperion.ui.generated.resources.Res import com.atls.hyperion.ui.generated.resources.chevron_left import com.atls.hyperion.ui.generated.resources.chevron_right diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/DatePickerContent.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/DatePickerContent.kt similarity index 89% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/DatePickerContent.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/DatePickerContent.kt index 104b54bfa..6102d2c17 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/DatePickerContent.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/DatePickerContent.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.ui +package com.atls.hyperion.ui.fragments.datepicker.ui import androidx.compose.foundation.background import androidx.compose.foundation.layout.fillMaxWidth @@ -7,13 +7,13 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier -import com.atls.hyperion.ui.fragment.datepicker.config.DAYS_IN_WEEK -import com.atls.hyperion.ui.fragment.datepicker.config.WEEK_RANGE -import com.atls.hyperion.ui.fragment.datepicker.lib.next -import com.atls.hyperion.ui.fragment.datepicker.lib.previous -import com.atls.hyperion.ui.fragment.datepicker.model.DateSelection -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.DatePickerAppearance -import com.atls.hyperion.ui.fragment.datepicker.style.shape.DatePickerShape +import com.atls.hyperion.ui.fragments.datepicker.config.DAYS_IN_WEEK +import com.atls.hyperion.ui.fragments.datepicker.config.WEEK_RANGE +import com.atls.hyperion.ui.fragments.datepicker.lib.next +import com.atls.hyperion.ui.fragments.datepicker.lib.previous +import com.atls.hyperion.ui.fragments.datepicker.model.DateSelection +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.DatePickerAppearance +import com.atls.hyperion.ui.fragments.datepicker.style.shape.DatePickerShape import com.atls.hyperion.ui.primitives.layout.column.Column import com.kizitonwose.calendar.compose.HorizontalCalendar import com.kizitonwose.calendar.compose.rememberCalendarState diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/Day.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/Day.kt similarity index 93% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/Day.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/Day.kt index 4c9b836cd..bdc23c877 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/Day.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/Day.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.fragment.datepicker.ui +package com.atls.hyperion.ui.fragments.datepicker.ui import androidx.compose.foundation.background import androidx.compose.foundation.border @@ -9,8 +9,8 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.DatePickerAppearance -import com.atls.hyperion.ui.fragment.datepicker.style.shape.DatePickerShape +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.DatePickerAppearance +import com.atls.hyperion.ui.fragments.datepicker.style.shape.DatePickerShape import com.atls.hyperion.ui.primitives.Text import com.atls.hyperion.ui.shared.layout.aspectSquare import com.atls.hyperion.ui.theme.tokens.colors.Colors diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/WeekDays.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/WeekDays.kt similarity index 81% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/WeekDays.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/WeekDays.kt index dcf60fd70..d2a4ebf98 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragment/datepicker/ui/WeekDays.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/ui/WeekDays.kt @@ -1,13 +1,13 @@ -package com.atls.hyperion.ui.fragment.datepicker.ui +package com.atls.hyperion.ui.fragments.datepicker.ui import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextAlign -import com.atls.hyperion.ui.fragment.datepicker.config.DAYS_IN_WEEK -import com.atls.hyperion.ui.fragment.datepicker.style.appearance.DatePickerAppearance -import com.atls.hyperion.ui.fragment.datepicker.style.shape.DatePickerShape +import com.atls.hyperion.ui.fragments.datepicker.config.DAYS_IN_WEEK +import com.atls.hyperion.ui.fragments.datepicker.style.appearance.DatePickerAppearance +import com.atls.hyperion.ui.fragments.datepicker.style.shape.DatePickerShape import com.atls.hyperion.ui.primitives.Text import com.atls.hyperion.ui.theme.tokens.layout.Weight import kotlinx.datetime.DayOfWeek From a16d9b8d7becdcc663ce675a0a4c7686e7184365 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 16:20:54 +0300 Subject: [PATCH 15/47] feat(ui): placeholder styles --- .../styles/appearance/Appearance.kt | 11 +++++++ .../placeholder/styles/appearance/Variants.kt | 18 ++++++++++ .../placeholder/styles/shape/Shape.kt | 12 +++++++ .../placeholder/styles/shape/Variants.kt | 33 +++++++++++++++++++ 4 files changed, 74 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Appearance.kt new file mode 100644 index 000000000..a1ad44431 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Appearance.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.placeholder.styles.appearance + +import androidx.compose.ui.graphics.Color + +data class PlaceholderAppearance( + val backgroundColor: Color, + val iconColor: Color, + val textColor: Color +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Variants.kt new file mode 100644 index 000000000..68e98f125 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/appearance/Variants.kt @@ -0,0 +1,18 @@ +package com.atls.hyperion.ui.components.placeholder.styles.appearance + +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +fun PlaceholderAppearance.Companion.imageBox(): PlaceholderAppearance = + PlaceholderAppearance( + backgroundColor = Colors.Palette.lightPurple, + iconColor = Colors.Text.darkGray, + textColor = Colors.Text.black + + ) + +fun PlaceholderAppearance.Companion.logo(): PlaceholderAppearance = + PlaceholderAppearance( + backgroundColor = Colors.Palette.transparent, + iconColor = Colors.Text.black, + textColor = Colors.Text.black + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Shape.kt new file mode 100644 index 000000000..766a22d21 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Shape.kt @@ -0,0 +1,12 @@ +package com.atls.hyperion.ui.components.placeholder.styles.shape + +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.Dp + +data class PlaceholderShape( + val iconSize: Dp, + val typography: TextStyle, + val spacing: Dp +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt new file mode 100644 index 000000000..1dc10ccc5 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt @@ -0,0 +1,33 @@ +package com.atls.hyperion.ui.components.placeholder.styles.shape + +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import com.atls.hyperion.ui.theme.tokens.components.IconSize +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.FontWeight +import com.atls.hyperion.ui.theme.typography.NunitoSansFontFamily + +@Composable +fun PlaceholderShape.Companion.imageBox(): PlaceholderShape = + PlaceholderShape( + iconSize = IconSize.large, + typography = TextStyle( + fontFamily = NunitoSansFontFamily(), + fontWeight = FontWeight.bold, + fontSize = FontSize.xl + ), + spacing = Space.g8 + ) + +@Composable +fun PlaceholderShape.Companion.logo(): PlaceholderShape = + PlaceholderShape( + iconSize = IconSize.large, + typography = TextStyle( + fontFamily = NunitoSansFontFamily(), + fontWeight = FontWeight.bold, + fontSize = FontSize.xl + ), + spacing = Space.g8 + ) From 537520453a39535da68913cc578e9323f6d0c0d3 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 16:21:14 +0300 Subject: [PATCH 16/47] feat(ui): placeholder component --- .../ui/components/placeholder/Component.kt | 37 +++++++++ .../placeholder/model/Orientation.kt | 6 ++ .../ui/components/placeholder/model/Type.kt | 6 ++ .../placeholder/stories/Component.kt | 83 +++++++++++++++++++ .../ui/components/placeholder/ui/Layout.kt | 79 ++++++++++++++++++ 5 files changed, 211 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Orientation.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Type.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/ui/Layout.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/Component.kt new file mode 100644 index 000000000..7679e7ea3 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/Component.kt @@ -0,0 +1,37 @@ +package com.atls.hyperion.ui.components.placeholder + +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderType +import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance +import com.atls.hyperion.ui.components.placeholder.styles.appearance.imageBox +import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape +import com.atls.hyperion.ui.components.placeholder.ui.PlaceholderLayout + +@Composable +fun Placeholder( + modifier: Modifier = Modifier, + type: PlaceholderType, + appearance: PlaceholderAppearance = PlaceholderAppearance.imageBox(), + shape: PlaceholderShape +) { + when (type) { + is PlaceholderType.Logo -> { + PlaceholderLayout( + modifier = modifier, + appearance = appearance, + shape = shape, + text = type.text, + orientation = type.orientation + ) + } + + PlaceholderType.ImageBox -> { + PlaceholderLayout( + modifier = modifier, + appearance = appearance, + shape = shape + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Orientation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Orientation.kt new file mode 100644 index 000000000..9b02fd44f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Orientation.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.placeholder.model + +enum class PlaceholderOrientation { + Horizontal, + Vertical +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Type.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Type.kt new file mode 100644 index 000000000..8d4e11848 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/model/Type.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.placeholder.model + +sealed interface PlaceholderType { + data class Logo(val text: String, val orientation: PlaceholderOrientation) : PlaceholderType + object ImageBox : PlaceholderType +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt new file mode 100644 index 000000000..72e702010 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt @@ -0,0 +1,83 @@ +package com.atls.hyperion.ui.components.placeholder.stories + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.placeholder.Placeholder +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderOrientation +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderType +import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance +import com.atls.hyperion.ui.components.placeholder.styles.appearance.imageBox +import com.atls.hyperion.ui.components.placeholder.styles.appearance.logo +import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape +import com.atls.hyperion.ui.components.placeholder.styles.shape.imageBox +import com.atls.hyperion.ui.components.placeholder.styles.shape.logo + +class PlaceholderStory( + override val name: String = "Placeholder" +) : ComponentExample { + + @Composable + override fun Content() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), + verticalArrangement = Arrangement.spacedBy(32.dp) + ) { + + ComponentVariants( + name = "ImageBoxPlaceholder", + appearances = listOf("Default" to { PlaceholderAppearance.imageBox() }), + shapes = listOf("Default" to { PlaceholderShape.imageBox() }) + ) { appearance, shape -> + Box(modifier = Modifier.size(100.dp)) { + Placeholder( + modifier = Modifier.matchParentSize(), + type = PlaceholderType.ImageBox, + appearance = appearance, + shape = shape + ) + } + } + + ComponentVariants( + name = "LogoPlaceholder Horizontal", + appearances = listOf("Default" to { PlaceholderAppearance.logo() }), + shapes = listOf("Default" to { PlaceholderShape.logo() }) + ) { appearance, shape -> + Placeholder( + type = PlaceholderType.Logo( + text = "Горизонтальный", + orientation = PlaceholderOrientation.Horizontal + ), + appearance = appearance, + shape = shape + ) + } + + ComponentVariants( + name = "LogoPlaceholder Vertical", + appearances = listOf("Default" to { PlaceholderAppearance.logo() }), + shapes = listOf("Default" to { PlaceholderShape.logo() }) + ) { appearance, shape -> + Placeholder( + type = PlaceholderType.Logo( + text = "Вертикальный", + orientation = PlaceholderOrientation.Vertical + ), + appearance = appearance, + shape = shape + ) + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/ui/Layout.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/ui/Layout.kt new file mode 100644 index 000000000..f6cd3290d --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/ui/Layout.kt @@ -0,0 +1,79 @@ +package com.atls.hyperion.ui.components.placeholder.ui + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderOrientation +import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance +import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape +import com.atls.hyperion.ui.generated.resources.Res +import com.atls.hyperion.ui.generated.resources.placeholder +import com.atls.hyperion.ui.primitives.Icon +import org.jetbrains.compose.resources.painterResource + +@Composable +fun PlaceholderLayout( + modifier: Modifier = Modifier, + appearance: PlaceholderAppearance, + shape: PlaceholderShape, + text: String? = null, + orientation: PlaceholderOrientation = PlaceholderOrientation.Horizontal, + content: @Composable () -> Unit = { + Icon( + icon = painterResource(Res.drawable.placeholder), + color = appearance.iconColor, + size = shape.iconSize + ) + } +) { + Box( + modifier = modifier + .background(appearance.backgroundColor), + contentAlignment = Alignment.Center + ) { + if (text == null) { + content() + } else { + when (orientation) { + PlaceholderOrientation.Horizontal -> { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Center + ) { + content() + Spacer(modifier = Modifier.width(shape.spacing)) + Text( + text = text, + style = shape.typography, + color = appearance.textColor + ) + } + } + + PlaceholderOrientation.Vertical -> { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + content() + Spacer(modifier = Modifier.height(shape.spacing)) + Text( + text = text, + style = shape.typography, + color = appearance.textColor + ) + } + } + } + } + } +} From 0845b0b871c3148a5567f4b06731fd1e95be027b Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 19:42:00 +0300 Subject: [PATCH 17/47] feat(ui): progress styles --- .../progress/styles/appearance/Appearance.kt | 7 ++++ .../progress/styles/appearance/Colors.kt | 32 +++++++++++++++++++ .../progress/styles/appearance/Variants.kt | 11 +++++++ .../components/progress/styles/shape/Shape.kt | 16 ++++++++++ .../progress/styles/shape/Variants.kt | 18 +++++++++++ 5 files changed, 84 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Colors.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Appearance.kt new file mode 100644 index 000000000..a0b20443e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Appearance.kt @@ -0,0 +1,7 @@ +package com.atls.hyperion.ui.components.progress.styles.appearance + +data class ProgressAppearance( + val colors: Colors +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Colors.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Colors.kt new file mode 100644 index 000000000..9019e12be --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Colors.kt @@ -0,0 +1,32 @@ +package com.atls.hyperion.ui.components.progress.styles.appearance + +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color + +sealed class Colors { + abstract val trailColor: Color + + sealed class Single : Colors() { + data class Solid( + val strokeColor: Color, + override val trailColor: Color + ) : Single() + + data class Gradient( + val strokeBrush: Brush, + override val trailColor: Color + ) : Single() + } + + sealed class Multiple : Colors() { + data class Solid( + val strokeColors: List, + override val trailColor: Color + ) : Multiple() + + data class Gradient( + val strokeBrushes: List, + override val trailColor: Color + ) : Multiple() + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Variants.kt new file mode 100644 index 000000000..91c45b050 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/appearance/Variants.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.progress.styles.appearance + +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +fun ProgressAppearance.Companion.primary(): ProgressAppearance = + ProgressAppearance( + colors = Colors.Single.Solid( + strokeColor = ThemeColors.Palette.blueProtective, + trailColor = ThemeColors.Palette.gray + ) + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Shape.kt new file mode 100644 index 000000000..05b5e8271 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Shape.kt @@ -0,0 +1,16 @@ +package com.atls.hyperion.ui.components.progress.styles.shape + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.unit.Dp + +data class ProgressShape( + val cornerRadius: Dp, + val strokeWidth: Dp, + val trailWidth: Dp = strokeWidth, + val strokeLinecap: StrokeCap = StrokeCap.Round, + val trailLinecap: StrokeCap = strokeLinecap, + val shape: RoundedCornerShape = RoundedCornerShape(cornerRadius) +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Variants.kt new file mode 100644 index 000000000..c6c3c94b3 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/styles/shape/Variants.kt @@ -0,0 +1,18 @@ +package com.atls.hyperion.ui.components.progress.styles.shape + +import com.atls.hyperion.ui.theme.tokens.layout.BorderStroke +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius + +fun ProgressShape.Companion.default(): ProgressShape = + ProgressShape( + cornerRadius = CornerRadius.full, + strokeWidth = BorderStroke.medium, + trailWidth = BorderStroke.medium + ) + +fun ProgressShape.Companion.thick(): ProgressShape = + ProgressShape( + cornerRadius = CornerRadius.full, + strokeWidth = BorderStroke.huge, + trailWidth = BorderStroke.large + ) From 0d9c804c2817335fde2e0ade97c76905e88d6fbd Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 19:42:31 +0300 Subject: [PATCH 18/47] feat(ui): progress constants/utils --- .../components/progress/config/Constants.kt | 16 ++++++++++++++++ .../components/progress/model/GapPosition.kt | 5 +++++ .../ui/components/progress/ui/GetBrush.kt | 19 +++++++++++++++++++ .../components/progress/ui/GetSolidColor.kt | 11 +++++++++++ 4 files changed, 51 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/config/Constants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/model/GapPosition.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/config/Constants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/config/Constants.kt new file mode 100644 index 000000000..bc265c44d --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/config/Constants.kt @@ -0,0 +1,16 @@ +package com.atls.hyperion.ui.components.progress.config + +const val FULL_CIRCLE = 360f +const val DEFAULT_GAP_DEGREE = 0f +const val DEFAULT_CANVAS_SCALE = 10f + +const val GAP_TOP_OFFSET = -90f +const val GAP_BOTTOM_OFFSET = 90f +const val GAP_LEFT_OFFSET = 180f +const val GAP_RIGHT_OFFSET = 0f + +const val MIN_PERCENT = 0f +const val MAX_PERCENT = 100f + +const val MIN_WEIGHT = 0f +const val MAX_WEIGHT = 1f diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/model/GapPosition.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/model/GapPosition.kt new file mode 100644 index 000000000..4b737c916 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/model/GapPosition.kt @@ -0,0 +1,5 @@ +package com.atls.hyperion.ui.components.progress.model + +enum class GapPosition { + Top, Bottom, Left, Right +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt new file mode 100644 index 000000000..91e459ed4 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt @@ -0,0 +1,19 @@ +package com.atls.hyperion.ui.components.progress.ui + +import androidx.compose.ui.graphics.Brush +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +fun getBrush(colors: Colors, index: Int): Brush? = when (colors) { + is Colors.Single.Gradient -> colors.strokeBrush + is Colors.Multiple.Gradient -> colors.strokeBrushes.getOrElse(index) { + Brush.linearGradient( + listOf( + ThemeColors.Palette.transparent, + ThemeColors.Palette.transparent + ) + ) + } + + else -> null +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt new file mode 100644 index 000000000..4566076f2 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.progress.ui + +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +fun getSolidColor(colors: Colors, index: Int): Color = when (colors) { + is Colors.Single.Solid -> colors.strokeColor + is Colors.Multiple.Solid -> colors.strokeColors.getOrElse(index) { ThemeColors.Palette.transparent } + else -> ThemeColors.Palette.transparent +} From d986f27b3bb12f36ca46309b10314ad7e3f1b56f Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 19:43:03 +0300 Subject: [PATCH 19/47] feat(ui): progress circle/line components with stories --- .../hyperion/ui/components/progress/Circle.kt | 101 +++++++++ .../hyperion/ui/components/progress/Line.kt | 71 +++++++ .../components/progress/stories/Component.kt | 192 ++++++++++++++++++ 3 files changed, 364 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt new file mode 100644 index 000000000..5df831aba --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt @@ -0,0 +1,101 @@ +package com.atls.hyperion.ui.components.progress + +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.drawscope.Stroke +import com.atls.hyperion.ui.components.progress.config.DEFAULT_CANVAS_SCALE +import com.atls.hyperion.ui.components.progress.config.DEFAULT_GAP_DEGREE +import com.atls.hyperion.ui.components.progress.config.FULL_CIRCLE +import com.atls.hyperion.ui.components.progress.config.GAP_BOTTOM_OFFSET +import com.atls.hyperion.ui.components.progress.config.GAP_LEFT_OFFSET +import com.atls.hyperion.ui.components.progress.config.GAP_RIGHT_OFFSET +import com.atls.hyperion.ui.components.progress.config.GAP_TOP_OFFSET +import com.atls.hyperion.ui.components.progress.config.MAX_PERCENT +import com.atls.hyperion.ui.components.progress.config.MIN_PERCENT +import com.atls.hyperion.ui.components.progress.model.GapPosition +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.ui.getBrush +import com.atls.hyperion.ui.components.progress.ui.getSolidColor + +@Composable +fun CircleProgress( + percents: List, + modifier: Modifier = Modifier, + appearance: ProgressAppearance = ProgressAppearance.primary(), + shape: ProgressShape = ProgressShape.default(), + gapDegree: Float = DEFAULT_GAP_DEGREE, + gapPosition: GapPosition = GapPosition.Top +) { + Canvas(modifier = modifier.size(shape.strokeWidth * DEFAULT_CANVAS_SCALE)) { + val strokeWidth = shape.strokeWidth.toPx() + val trailWidth = shape.trailWidth.toPx() + val diameter = size.minDimension - maxOf(strokeWidth, trailWidth) + val topLeft = Offset((size.width - diameter) / 2, (size.height - diameter) / 2) + val totalSweep = FULL_CIRCLE - gapDegree + + val startOffset = when (gapPosition) { + GapPosition.Top -> GAP_TOP_OFFSET + gapDegree / 2 + GapPosition.Bottom -> GAP_BOTTOM_OFFSET + gapDegree / 2 + GapPosition.Left -> GAP_LEFT_OFFSET + gapDegree / 2 + GapPosition.Right -> GAP_RIGHT_OFFSET + gapDegree / 2 + } + + drawArc( + color = appearance.colors.trailColor, + startAngle = startOffset, + sweepAngle = totalSweep, + useCenter = false, + topLeft = topLeft, + size = Size(diameter, diameter), + style = Stroke(width = trailWidth, cap = shape.trailLinecap) + ) + + var currentStart = startOffset + percents.forEachIndexed { index, percent -> + val sweep = if (percent >= 100f) totalSweep else ( + percent.coerceIn(MIN_PERCENT, MAX_PERCENT) / MAX_PERCENT) * totalSweep + if (sweep <= 0f) return@forEachIndexed + + val brush = getBrush(appearance.colors, index) + if (brush != null) { + drawArc( + brush = brush, + startAngle = currentStart, + sweepAngle = sweep, + useCenter = false, + topLeft = topLeft, + size = Size(diameter, diameter), + style = Stroke(width = strokeWidth, cap = shape.strokeLinecap) + ) + } else { + drawArc( + color = getSolidColor(appearance.colors, index), + startAngle = currentStart, + sweepAngle = sweep, + useCenter = false, + topLeft = topLeft, + size = Size(diameter, diameter), + style = Stroke(width = strokeWidth, cap = shape.strokeLinecap) + ) + } + currentStart += sweep + } + } +} + +@Composable +fun CircleProgress( + percent: Float, + modifier: Modifier = Modifier, + appearance: ProgressAppearance = ProgressAppearance.primary(), + shape: ProgressShape = ProgressShape.default(), + gapDegree: Float = 0f, + gapPosition: GapPosition = GapPosition.Top +) = CircleProgress(listOf(percent), modifier, appearance, shape, gapDegree, gapPosition) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt new file mode 100644 index 000000000..63ca96452 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt @@ -0,0 +1,71 @@ +package com.atls.hyperion.ui.components.progress + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import com.atls.hyperion.ui.components.progress.config.MAX_PERCENT +import com.atls.hyperion.ui.components.progress.config.MAX_WEIGHT +import com.atls.hyperion.ui.components.progress.config.MIN_WEIGHT +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.ui.getBrush +import com.atls.hyperion.ui.components.progress.ui.getSolidColor + +@Composable +fun LineProgress( + percents: List, + modifier: Modifier = Modifier, + appearance: ProgressAppearance, + shape: ProgressShape = ProgressShape.default() +) { + Row( + modifier = modifier + .fillMaxWidth() + .height(shape.trailWidth) + .clip(shape.shape) + .background(appearance.colors.trailColor) + ) { + var accumulated = MIN_WEIGHT + + percents.forEachIndexed { index, percent -> + if (percent <= MIN_WEIGHT) return@forEachIndexed + + val segmentWeight = (percent / MAX_PERCENT).coerceAtMost(MAX_WEIGHT - accumulated) + if (segmentWeight <= MIN_WEIGHT) return@forEachIndexed + + val brush = getBrush(appearance.colors, index) + val color = getSolidColor(appearance.colors, index) + + Box( + Modifier + .height(shape.strokeWidth) + .weight(segmentWeight) + .then( + brush?.let { Modifier.background(it) } + ?: Modifier.background(color) + ) + ) + + accumulated += segmentWeight + } + + if (accumulated < MAX_WEIGHT) { + Spacer(Modifier.weight(MAX_WEIGHT - accumulated)) + } + } +} + +@Composable +fun LineProgress( + percent: Float, + modifier: Modifier = Modifier, + appearance: ProgressAppearance, + shape: ProgressShape = ProgressShape.default() +) = LineProgress(listOf(percent), modifier, appearance, shape) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt new file mode 100644 index 000000000..4aaac1409 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt @@ -0,0 +1,192 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.Slider +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.progress.CircleProgress +import com.atls.hyperion.ui.components.progress.LineProgress +import com.atls.hyperion.ui.components.progress.model.GapPosition +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.styles.shape.thick +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +class ProgressStory : ComponentExample { + override val name: String = "Progress" + + @Composable + override fun Content() { + var percent by remember { mutableStateOf(40f) } + + Column( + modifier = Modifier + .fillMaxSize() + ) { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(16.dp) + ) { + Text("Percent: ${percent.toInt()}%") + Slider( + value = percent, + onValueChange = { percent = it }, + valueRange = 0f..100f + ) + } + + Spacer(modifier = Modifier.height(16.dp)) + + Column( + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()) + .padding(horizontal = 16.dp) + ) { + ComponentVariants( + name = "Line Progress", + appearances = listOf( + "Primary" to { ProgressAppearance.primary() }, + "Gradient" to { ProgressAppearance.gradientExample() } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() } + ) + ) { appearance, shape -> + LineProgress( + percent = percent, + appearance = appearance, + shape = shape, + modifier = Modifier.fillMaxWidth() + ) + } + + Spacer(modifier = Modifier.height(16.dp)) + val lineSegment1 = percent / 3 + val lineSegment2 = percent / 3 + val lineSegment3 = percent / 3 + val linePercents = listOf(lineSegment1, lineSegment2, lineSegment3) + val colors = listOf( + ThemeColors.Palette.red, + ThemeColors.Palette.blueProtective, + ThemeColors.Palette.green + ) + val multiColors = + Colors.Multiple.Solid(strokeColors = colors, trailColor = ThemeColors.Palette.gray) + + ComponentVariants( + name = "Segmented Line Progress", + appearances = listOf( + "Multi-color" to { ProgressAppearance.primary().copy(colors = multiColors) } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() } + ) + ) { appearance, shape -> + LineProgress( + percents = linePercents, + appearance = appearance, + shape = shape, + modifier = Modifier.fillMaxWidth() + ) + } + + Spacer(modifier = Modifier.height(24.dp)) + + ComponentVariants( + name = "Circle Progress", + appearances = listOf( + "Primary" to { ProgressAppearance.primary() }, + "Gradient" to { ProgressAppearance.gradientExample() } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() } + ) + ) { appearance, shape -> + Column( + horizontalAlignment = Alignment.CenterHorizontally + ) { + CircleProgress( + percent = percent, + appearance = appearance, + shape = shape, + gapDegree = 60f, + gapPosition = GapPosition.Top + ) + } + } + + Spacer(modifier = Modifier.height(16.dp)) + val segment1 = percent / 3 + val segment2 = percent / 3 + val segment3 = percent / 3 + val circlePercents = listOf(segment1, segment2, segment3) + val circleColors = listOf( + ThemeColors.Palette.red, + ThemeColors.Palette.blueProtective, + ThemeColors.Palette.green + ) + val circleMultiColors = + Colors.Multiple.Solid(strokeColors = circleColors, trailColor = ThemeColors.Palette.gray) + + ComponentVariants( + name = "Segmented Circle Progress", + appearances = listOf( + "Multi-color" to { ProgressAppearance.primary().copy(colors = circleMultiColors) } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() } + ) + ) { appearance, shape -> + Column( + horizontalAlignment = Alignment.CenterHorizontally + ) { + CircleProgress( + percents = circlePercents, + appearance = appearance, + shape = shape + ) + } + } + + Spacer(modifier = Modifier.height(24.dp)) + } + } + } +} + +fun ProgressAppearance.Companion.gradientExample(): ProgressAppearance = + ProgressAppearance( + colors = Colors.Single.Gradient( + strokeBrush = Brush.horizontalGradient( + colors = listOf(Color.Magenta, Color.Cyan) + ), + trailColor = ThemeColors.Palette.gray + ) + ) From f4c40f735326da4ecfdc48d50f1728041030d1ca Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 19:43:12 +0300 Subject: [PATCH 20/47] feat(ui): placeholder image --- .../composeResources/drawable/placeholder.xml | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/composeResources/drawable/placeholder.xml diff --git a/mobile/kmp/ui/src/commonMain/composeResources/drawable/placeholder.xml b/mobile/kmp/ui/src/commonMain/composeResources/drawable/placeholder.xml new file mode 100644 index 000000000..da6a2b6f1 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/composeResources/drawable/placeholder.xml @@ -0,0 +1,44 @@ + + + + + + + + From b7c96461d684a4f73c10e68a1e5644c3d3b41d9e Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:19:14 +0300 Subject: [PATCH 21/47] feat(ui): bottom bar styles --- .../bottombar/styles/appearance/Appearance.kt | 7 ++ .../bottombar/styles/appearance/Colors.kt | 36 +++++++ .../bottombar/styles/appearance/Variants.kt | 89 +++++++++++++++++ .../bottombar/styles/shape/Shape.kt | 42 ++++++++ .../bottombar/styles/shape/Variants.kt | 95 +++++++++++++++++++ 5 files changed, 269 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt new file mode 100644 index 000000000..a8e16c426 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt @@ -0,0 +1,7 @@ +package com.atls.hyperion.ui.components.bottombar.styles.appearance + +data class BottomBarAppearance( + val colors: Colors +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt new file mode 100644 index 000000000..70308c53b --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt @@ -0,0 +1,36 @@ +package com.atls.hyperion.ui.components.bottombar.styles.appearance + +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.ui.theme.tokens.colors.Alpha + +sealed class Colors { + abstract val backgroundColor: Color + abstract val dividerColor: Color + abstract val tabColors: TabColors + + sealed class TabColors { + abstract val activeColor: Color + abstract val inactiveColor: Color + abstract val rippleColor: Color + + data class WithLabel( + override val activeColor: Color, + override val inactiveColor: Color, + val activeLabelColor: Color, + val inactiveLabelColor: Color, + override val rippleColor: Color = activeColor.copy(alpha = Alpha.micro) + ) : TabColors() + + data class WithoutLabel( + override val activeColor: Color, + override val inactiveColor: Color, + override val rippleColor: Color = activeColor.copy(alpha = Alpha.micro) + ) : TabColors() + } + + data class Default( + override val backgroundColor: Color, + override val dividerColor: Color, + override val tabColors: TabColors + ) : Colors() +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt new file mode 100644 index 000000000..d8bebca83 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt @@ -0,0 +1,89 @@ +package com.atls.hyperion.ui.components.bottombar.styles.appearance + +import com.atls.hyperion.ui.theme.tokens.colors.Alpha +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +fun BottomBarAppearance.Companion.primary(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.white, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithLabel( + activeColor = ThemeColors.Palette.blueProtective, + inactiveColor = ThemeColors.Palette.gray, + activeLabelColor = ThemeColors.Palette.blueProtective, + inactiveLabelColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.blueProtective.copy(alpha = Alpha.micro) + ) + ) + ) + +fun BottomBarAppearance.Companion.secondary(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.white, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithLabel( + activeColor = ThemeColors.Palette.green, + inactiveColor = ThemeColors.Palette.gray, + activeLabelColor = ThemeColors.Palette.green, + inactiveLabelColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.green.copy(alpha = Alpha.micro) + ) + ) + ) + +fun BottomBarAppearance.Companion.dark(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.black, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithLabel( + activeColor = ThemeColors.Palette.white, + inactiveColor = ThemeColors.Palette.gray, + activeLabelColor = ThemeColors.Palette.white, + inactiveLabelColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.white.copy(alpha = Alpha.micro) + ) + ) + ) + + +fun BottomBarAppearance.Companion.primaryWithoutLabel(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.white, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithoutLabel( + activeColor = ThemeColors.Palette.blueProtective, + inactiveColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.blueProtective.copy(alpha = Alpha.micro) + ) + ) + ) + +fun BottomBarAppearance.Companion.secondaryWithoutLabel(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.white, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithoutLabel( + activeColor = ThemeColors.Palette.green, + inactiveColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.green.copy(alpha = Alpha.micro) + ) + ) + ) + +fun BottomBarAppearance.Companion.darkWithoutLabel(): BottomBarAppearance = + BottomBarAppearance( + colors = Colors.Default( + backgroundColor = ThemeColors.Palette.black, + dividerColor = ThemeColors.Palette.gray, + tabColors = Colors.TabColors.WithoutLabel( + activeColor = ThemeColors.Palette.white, + inactiveColor = ThemeColors.Palette.gray, + rippleColor = ThemeColors.Palette.white.copy(alpha = Alpha.micro) + ) + ) + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt new file mode 100644 index 000000000..1e3389cf1 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt @@ -0,0 +1,42 @@ +package com.atls.hyperion.ui.components.bottombar.styles.shape + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.Dp + +sealed class BottomBarShape { + + abstract val height: Dp + abstract val elevation: Dp + abstract val cornerRadius: Dp + abstract val dividerWidth: Dp + abstract val tabSpacing: Dp + abstract val iconSize: Dp + abstract val shape: RoundedCornerShape + + data class WithLabel( + override val height: Dp, + override val elevation: Dp, + override val cornerRadius: Dp, + override val dividerWidth: Dp, + override val tabSpacing: Dp, + override val iconSize: Dp, + val labelPadding: Dp, + val labelTypography: TextStyle, + override val shape: RoundedCornerShape = RoundedCornerShape(cornerRadius) + ) : BottomBarShape() { + companion object + } + + data class WithoutLabel( + override val height: Dp, + override val elevation: Dp, + override val cornerRadius: Dp, + override val dividerWidth: Dp, + override val tabSpacing: Dp, + override val iconSize: Dp, + override val shape: RoundedCornerShape = RoundedCornerShape(cornerRadius) + ) : BottomBarShape() { + companion object + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt new file mode 100644 index 000000000..75734f41c --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt @@ -0,0 +1,95 @@ +package com.atls.hyperion.ui.components.bottombar.styles.shape + +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.dp +import com.atls.hyperion.ui.theme.tokens.Elevation +import com.atls.hyperion.ui.theme.tokens.components.BottomBarSize +import com.atls.hyperion.ui.theme.tokens.components.IconSize +import com.atls.hyperion.ui.theme.tokens.layout.BorderStroke +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.FontWeight +import com.atls.hyperion.ui.theme.typography.NunitoSansFontFamily + +@Composable +fun BottomBarShape.WithLabel.Companion.default() = + BottomBarShape.WithLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.zero, + cornerRadius = CornerRadius.zero, + dividerWidth = BorderStroke.tiny, + tabSpacing = Space.g8, + iconSize = IconSize.medium, + labelPadding = Space.g4, + labelTypography = TextStyle( + fontSize = FontSize.xs3, + fontWeight = FontWeight.medium, + fontFamily = NunitoSansFontFamily() + ) + ) + +@Composable +fun BottomBarShape.WithLabel.Companion.elevated() = + BottomBarShape.WithLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.medium, + cornerRadius = CornerRadius.zero, + dividerWidth = BorderStroke.none, + tabSpacing = Space.g8, + iconSize = IconSize.medium, + labelPadding = Space.g4, + labelTypography = TextStyle( + fontSize = FontSize.xs3, + fontWeight = FontWeight.medium, + fontFamily = NunitoSansFontFamily() + ) + ) + +@Composable +fun BottomBarShape.WithLabel.Companion.rounded() = + BottomBarShape.WithLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.tiny, + cornerRadius = CornerRadius.xl2_5, + dividerWidth = BorderStroke.none, + tabSpacing = Space.g8, + iconSize = IconSize.medium, + labelPadding = Space.g4, + labelTypography = TextStyle( + fontSize = FontSize.xs3, + fontWeight = FontWeight.medium, + fontFamily = NunitoSansFontFamily() + ) + ) + +fun BottomBarShape.WithoutLabel.Companion.default() = + BottomBarShape.WithoutLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.zero, + cornerRadius = CornerRadius.zero, + dividerWidth = 1.dp, + tabSpacing = Space.g8, + iconSize = IconSize.medium + ) + +fun BottomBarShape.WithoutLabel.Companion.elevated() = + BottomBarShape.WithoutLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.medium, + cornerRadius = CornerRadius.zero, + dividerWidth = BorderStroke.none, + tabSpacing = Space.g8, + iconSize = IconSize.medium + ) + +fun BottomBarShape.WithoutLabel.Companion.rounded() = + BottomBarShape.WithoutLabel( + height = BottomBarSize.defaultHeight, + elevation = Elevation.tiny, + cornerRadius = CornerRadius.xl2_5, + dividerWidth = BorderStroke.none, + tabSpacing = Space.g8, + iconSize = IconSize.medium + ) From 935862f7a1d506ef7cb2f5375a94051bbf67ca1e Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:27:31 +0300 Subject: [PATCH 22/47] feat(ui): bottom bar components --- .../ui/components/bottombar/BottomBar.kt | 73 ++++++ .../hyperion/ui/components/bottombar/Tab.kt | 74 ++++++ .../ui/components/bottombar/model/Item.kt | 8 + .../components/bottombar/stories/Component.kt | 223 ++++++++++++++++++ 4 files changed, 378 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt new file mode 100644 index 000000000..d1c1499fd --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt @@ -0,0 +1,73 @@ +package com.atls.hyperion.ui.components.bottombar + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material.Surface +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.bottombar.model.BottomBarItem +import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape + +@Composable +fun BottomBar( + modifier: Modifier = Modifier, + appearance: BottomBarAppearance = BottomBarAppearance.primary(), + shape: BottomBarShape, + tabArrangement: Arrangement.Horizontal, + content: @Composable RowScope.() -> Unit +) { + Surface( + modifier = modifier.fillMaxWidth(), + elevation = shape.elevation, + shape = shape.shape + ) { + Row( + modifier = Modifier + .fillMaxWidth() + .background(appearance.colors.backgroundColor) + .height(shape.height) + .padding(horizontal = shape.tabSpacing), + horizontalArrangement = tabArrangement, + verticalAlignment = Alignment.CenterVertically + ) { + content() + } + } +} + +@Composable +fun BottomBar( + items: List, + selectedItemIndex: Int, + onItemClick: (Int) -> Unit, + modifier: Modifier = Modifier, + appearance: BottomBarAppearance = BottomBarAppearance.primary(), + shape: BottomBarShape, + tabArrangement: Arrangement.Horizontal +) { + BottomBar( + modifier = modifier, + appearance = appearance, + shape = shape, + tabArrangement = tabArrangement + ) { + items.forEachIndexed { index, item -> + BottomBarTab( + icon = item.icon, + label = item.label, + selected = index == selectedItemIndex, + onClick = { onItemClick(index) }, + appearance = appearance, + shape = shape + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt new file mode 100644 index 000000000..140f62a0f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt @@ -0,0 +1,74 @@ +package com.atls.hyperion.ui.components.bottombar + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.size +import androidx.compose.material.Icon +import androidx.compose.material.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.painter.Painter +import androidx.compose.ui.text.style.TextAlign +import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottombar.styles.appearance.Colors +import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape + +@Composable +fun BottomBarTab( + icon: Painter, + label: String?, + selected: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier, + appearance: BottomBarAppearance = BottomBarAppearance.primary(), + shape: BottomBarShape, +) { + val tabColors = appearance.colors.tabColors + val iconColor = if (selected) tabColors.activeColor else tabColors.inactiveColor + + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = modifier.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null, + onClick = onClick + ) + ) { + Icon( + painter = icon, + contentDescription = label ?: "", + tint = iconColor, + modifier = Modifier.size( + when (shape) { + is BottomBarShape.WithLabel -> shape.iconSize + is BottomBarShape.WithoutLabel -> shape.iconSize + } + ) + ) + + if (shape is BottomBarShape.WithLabel && label != null) { + Spacer(modifier = Modifier.height(shape.labelPadding)) + + val labelColor = when (val colors = tabColors) { + is Colors.TabColors.WithLabel -> + if (selected) colors.activeLabelColor else colors.inactiveLabelColor + + is Colors.TabColors.WithoutLabel -> + iconColor + } + + Text( + text = label, + color = labelColor, + style = shape.labelTypography, + textAlign = TextAlign.Center + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt new file mode 100644 index 000000000..7d8811d6f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt @@ -0,0 +1,8 @@ +package com.atls.hyperion.ui.components.bottombar.model + +import androidx.compose.ui.graphics.painter.Painter + +data class BottomBarItem( + val icon: Painter, + val label: String? = null +) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt new file mode 100644 index 000000000..66646867c --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt @@ -0,0 +1,223 @@ +package com.atls.hyperion.ui.components.bottombar.stories + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.RadioButton +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.graphics.drawscope.Stroke +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.bottombar.BottomBar +import com.atls.hyperion.ui.components.bottombar.model.BottomBarItem +import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottombar.styles.appearance.dark +import com.atls.hyperion.ui.components.bottombar.styles.appearance.darkWithoutLabel +import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottombar.styles.appearance.primaryWithoutLabel +import com.atls.hyperion.ui.components.bottombar.styles.appearance.secondary +import com.atls.hyperion.ui.components.bottombar.styles.appearance.secondaryWithoutLabel +import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape.WithLabel +import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape.WithoutLabel +import com.atls.hyperion.ui.components.bottombar.styles.shape.default +import com.atls.hyperion.ui.components.bottombar.styles.shape.elevated +import com.atls.hyperion.ui.components.bottombar.styles.shape.rounded +import kotlin.math.PI + +class BottomBarStory : ComponentExample { + override val name: String = "BottomBar" + + @Composable + override fun Content() { + Column( + modifier = Modifier + .verticalScroll(rememberScrollState()) + .padding(bottom = 80.dp) + ) { + val homePainter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawRect( + color = Color.Black, + topLeft = Offset(size.width * 0.2f, size.height * 0.3f), + size = Size(size.width * 0.6f, size.height * 0.6f) + ) + drawLine( + color = Color.Black, + start = Offset(size.width * 0.2f, size.height * 0.3f), + end = Offset(size.width * 0.5f, size.height * 0.1f) + ) + drawLine( + color = Color.Black, + start = Offset(size.width * 0.5f, size.height * 0.1f), + end = Offset(size.width * 0.8f, size.height * 0.3f) + ) + } + } + + val favoritePainter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + val cx = size.width / 2 + val cy = size.height / 2 + val r = size.width / 3 + drawCircle( + color = Color.Black, + center = Offset(cx, cy), + radius = r, + style = Stroke(2f) + ) + drawCircle(color = Color.Black, center = Offset(cx, cy), radius = r / 2) + } + } + + val profilePainter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawCircle( + color = Color.Black, + center = Offset(size.width / 2, size.height * 0.35f), + radius = size.width * 0.2f + ) + drawRect( + color = Color.Black, + topLeft = Offset(size.width * 0.3f, size.height * 0.5f), + size = Size(size.width * 0.4f, size.height * 0.4f) + ) + } + } + + val settingsPainter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawCircle( + color = Color.Black, + center = Offset(size.width / 2, size.height / 2), + radius = size.width * 0.3f, + style = Stroke(2f) + ) + for (i in 0 until 8) { + val angle = PI * i / 4 + val sx = + size.width / 2 + (size.width * 0.35f * kotlin.math.cos(angle)).toFloat() + val sy = + size.height / 2 + (size.height * 0.35f * kotlin.math.sin(angle)).toFloat() + val ex = + size.width / 2 + (size.width * 0.45f * kotlin.math.cos(angle)).toFloat() + val ey = + size.height / 2 + (size.height * 0.45f * kotlin.math.sin(angle)).toFloat() + drawLine( + color = Color.Black, + start = Offset(sx, sy), + end = Offset(ex, ey), + strokeWidth = 2f + ) + } + } + } + + val itemsWithLabels = listOf( + BottomBarItem(homePainter, "Home"), + BottomBarItem(favoritePainter, "Favorites"), + BottomBarItem(profilePainter, "Profile"), + BottomBarItem(settingsPainter, "Settings") + ) + + val itemsWithoutLabels = itemsWithLabels.map { it.copy(label = null) } + + var tabPosition by remember { mutableStateOf(Arrangement.Center) } + + Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) { + Text("Tab Position:") + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.padding(vertical = 8.dp) + ) { + RadioButton( + selected = tabPosition == Arrangement.Start, + onClick = { tabPosition = Arrangement.Start }) + Text("Start", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) + + RadioButton( + selected = tabPosition == Arrangement.Center, + onClick = { tabPosition = Arrangement.Center }) + Text("Center", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) + + RadioButton( + selected = tabPosition == Arrangement.End, + onClick = { tabPosition = Arrangement.End }) + Text("End", modifier = Modifier.padding(start = 4.dp)) + } + } + + ComponentVariants( + name = "BottomBar (With Labels)", + appearances = listOf( + "Primary" to { BottomBarAppearance.primary() }, + "Secondary" to { BottomBarAppearance.secondary() }, + "Dark" to { BottomBarAppearance.dark() } + ), + shapes = listOf( + "Default" to { WithLabel.default() }, + "Elevated" to { WithLabel.elevated() }, + "Rounded" to { WithLabel.rounded() } + ) + ) { appearance, shape -> + val selectedIndex = remember { mutableStateOf(0) } + BottomBar( + itemsWithLabels, + selectedIndex.value, + { selectedIndex.value = it }, + appearance = appearance, + shape = shape, + tabArrangement = tabPosition + ) + } + + Spacer(Modifier.height(32.dp)) + + ComponentVariants( + name = "BottomBar (Without Labels)", + appearances = listOf( + "Primary" to { BottomBarAppearance.primaryWithoutLabel() }, + "Secondary" to { BottomBarAppearance.secondaryWithoutLabel() }, + "Dark" to { BottomBarAppearance.darkWithoutLabel() } + ), + shapes = listOf( + "Default" to { WithoutLabel.default() }, + "Rounded" to { WithoutLabel.rounded() }, + "Elevated" to { WithoutLabel.elevated() } + ) + ) { appearance, shape -> + val selectedIndex = remember { mutableStateOf(0) } + BottomBar( + itemsWithoutLabels, + selectedIndex.value, + { selectedIndex.value = it }, + appearance = appearance, + shape = shape, + tabArrangement = tabPosition + ) + } + } + } +} From 952bda4094bf4d069319538a512e03bd22c02eb5 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:27:56 +0300 Subject: [PATCH 23/47] feat(theme): bottom bar sizes --- .../hyperion/ui/theme/tokens/components/BottomBarSize.kt | 7 +++++++ .../atls/hyperion/ui/theme/tokens/components/IconSize.kt | 1 + 2 files changed, 8 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt new file mode 100644 index 000000000..d24412d8d --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt @@ -0,0 +1,7 @@ +package com.atls.hyperion.ui.theme.tokens.components + +import androidx.compose.ui.unit.dp + +object BottomBarSize { + val defaultHeight = 56.dp +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/IconSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/IconSize.kt index 33bd8f36b..eb0bfe702 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/IconSize.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/IconSize.kt @@ -3,5 +3,6 @@ package com.atls.hyperion.ui.theme.tokens.components import androidx.compose.ui.unit.dp object IconSize { + val large = 32.dp val medium = 24.dp } From 281fe7c227d841cb74bb3c48363b692b1738f9ee Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:28:12 +0300 Subject: [PATCH 24/47] feat(theme): border sizes --- .../kotlin/com/atls/hyperion/ui/theme/tokens/layout/Borders.kt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Borders.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Borders.kt index ef8a9668a..c0d8d8ada 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Borders.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Borders.kt @@ -5,4 +5,7 @@ import androidx.compose.ui.unit.dp object BorderStroke { val none = 0.dp val tiny = 1.dp + val medium = 8.dp + val large = 12.dp + val huge = 16.dp } From 260d09d19486c85af3091b017bc3cc0b840a03b4 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:28:18 +0300 Subject: [PATCH 25/47] feat(theme): micro alpha --- .../kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt index ed931f8b2..295000ab2 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/colors/Alpha.kt @@ -5,4 +5,5 @@ object Alpha { val huge = 0.9f val large = 0.8f val medium = 0.6f + val micro = 0.12f } From 5c11910dc8d39e67cf0206a12d9be5e8083c8dec Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:28:30 +0300 Subject: [PATCH 26/47] feat(theme): medium elevation --- .../kotlin/com/atls/hyperion/ui/theme/tokens/Elevation.kt | 1 + 1 file changed, 1 insertion(+) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Elevation.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Elevation.kt index 871c26c28..684c84c67 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Elevation.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/Elevation.kt @@ -5,4 +5,5 @@ import androidx.compose.ui.unit.dp object Elevation { val zero = 0.dp val tiny = 2.dp + val medium = 8.dp } From 2a1afa78199569f0037ea668b1b07fcb07a8d539 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:28:46 +0300 Subject: [PATCH 27/47] fix(app): remove unused module deps --- mobile/kmp/settings.gradle.kts | 1 - 1 file changed, 1 deletion(-) diff --git a/mobile/kmp/settings.gradle.kts b/mobile/kmp/settings.gradle.kts index 583813c1d..c9bdb332b 100644 --- a/mobile/kmp/settings.gradle.kts +++ b/mobile/kmp/settings.gradle.kts @@ -17,4 +17,3 @@ rootProject.name = "hyperion" include(":sample") include(":ui") include(":storybook") -include(":storybook-api") From 5afab2a205275ff279ec068dd9fec795f8acb18e Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:28:58 +0300 Subject: [PATCH 28/47] feat(app): use new stories --- .../commonMain/kotlin/com/atls/hyperion/sample/App.kt | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index c68a2a64a..620e04a25 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -4,6 +4,7 @@ import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import com.atls.hyperion.storybook.fragments.storybook.Storybook import com.atls.hyperion.ui.components.avatar.stories.AvatarStory +import com.atls.hyperion.ui.components.bottombar.stories.BottomBarStory import com.atls.hyperion.ui.components.button.stories.ButtonStory import com.atls.hyperion.ui.components.card.stories.CardStory import com.atls.hyperion.ui.components.carousel.stories.CarouselStory @@ -13,9 +14,11 @@ import com.atls.hyperion.ui.components.input.stories.InputStory import com.atls.hyperion.ui.components.modal.bottom.stories.BottomDialogStory import com.atls.hyperion.ui.components.modal.popup.stories.PopupStory import com.atls.hyperion.ui.components.pagination.stories.PaginationStory +import com.atls.hyperion.ui.components.placeholder.stories.PlaceholderStory +import com.atls.hyperion.ui.components.progress.stories.ProgressStory import com.atls.hyperion.ui.components.switch.stories.SwitchStory -import com.atls.hyperion.ui.fragment.datepicker.stories.DatePickerStory -import com.atls.hyperion.ui.fragment.datepicker.stories.DateRangePickerStory +import com.atls.hyperion.ui.fragments.datepicker.stories.DatePickerStory +import com.atls.hyperion.ui.fragments.datepicker.stories.DateRangePickerStory import com.atls.hyperion.ui.primitives.stories.LinkStory import com.atls.hyperion.ui.primitives.stories.TextStory @@ -26,6 +29,7 @@ fun App() { components = listOf( AvatarStory(), BottomDialogStory(), + BottomBarStory(), ButtonStory(), CardStory(), CarouselStory(), @@ -35,7 +39,9 @@ fun App() { DividerStory(), InputStory(), PaginationStory(), + PlaceholderStory(), PopupStory(), + ProgressStory(), SwitchStory(), TextStory(), LinkStory() From 080a0f83114cd8aab5477b655b304fb7a3cb7e2c Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:32:53 +0300 Subject: [PATCH 29/47] chore(ui): rename bottom bar directory --- .../kotlin/com/atls/hyperion/sample/App.kt | 2 +- .../BottomBar.kt => bottomBar/Component.kt} | 10 +++---- .../{bottombar => bottomBar}/Tab.kt | 10 +++---- .../{bottombar => bottomBar}/model/Item.kt | 2 +- .../stories/Component.kt | 30 +++++++++---------- .../styles/appearance/Appearance.kt | 2 +- .../styles/appearance/Colors.kt | 2 +- .../styles/appearance/Variants.kt | 2 +- .../styles/shape/Shape.kt | 2 +- .../styles/shape/Variants.kt | 2 +- 10 files changed, 32 insertions(+), 32 deletions(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar/BottomBar.kt => bottomBar/Component.kt} (87%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/Tab.kt (88%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/model/Item.kt (70%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/stories/Component.kt (90%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/styles/appearance/Appearance.kt (57%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/styles/appearance/Colors.kt (94%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/styles/appearance/Variants.kt (98%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/styles/shape/Shape.kt (95%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/{bottombar => bottomBar}/styles/shape/Variants.kt (98%) diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index 620e04a25..43863ecaf 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -4,7 +4,7 @@ import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import com.atls.hyperion.storybook.fragments.storybook.Storybook import com.atls.hyperion.ui.components.avatar.stories.AvatarStory -import com.atls.hyperion.ui.components.bottombar.stories.BottomBarStory +import com.atls.hyperion.ui.components.bottomBar.stories.BottomBarStory import com.atls.hyperion.ui.components.button.stories.ButtonStory import com.atls.hyperion.ui.components.card.stories.CardStory import com.atls.hyperion.ui.components.carousel.stories.CarouselStory diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Component.kt similarity index 87% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Component.kt index d1c1499fd..39cd35911 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/BottomBar.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Component.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar +package com.atls.hyperion.ui.components.bottomBar import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement @@ -11,10 +11,10 @@ import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import com.atls.hyperion.ui.components.bottombar.model.BottomBarItem -import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance -import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary -import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape +import com.atls.hyperion.ui.components.bottomBar.model.BottomBarItem +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape @Composable fun BottomBar( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Tab.kt similarity index 88% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Tab.kt index 140f62a0f..f74635171 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/Tab.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Tab.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar +package com.atls.hyperion.ui.components.bottomBar import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource @@ -14,10 +14,10 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.text.style.TextAlign -import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance -import com.atls.hyperion.ui.components.bottombar.styles.appearance.Colors -import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary -import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.Colors +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape @Composable fun BottomBarTab( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/model/Item.kt similarity index 70% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/model/Item.kt index 7d8811d6f..cbc56b653 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/model/Item.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/model/Item.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.model +package com.atls.hyperion.ui.components.bottomBar.model import androidx.compose.ui.graphics.painter.Painter diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt similarity index 90% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt index 66646867c..e7f51b08a 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.stories +package com.atls.hyperion.ui.components.bottomBar.stories import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -27,20 +27,20 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.bottombar.BottomBar -import com.atls.hyperion.ui.components.bottombar.model.BottomBarItem -import com.atls.hyperion.ui.components.bottombar.styles.appearance.BottomBarAppearance -import com.atls.hyperion.ui.components.bottombar.styles.appearance.dark -import com.atls.hyperion.ui.components.bottombar.styles.appearance.darkWithoutLabel -import com.atls.hyperion.ui.components.bottombar.styles.appearance.primary -import com.atls.hyperion.ui.components.bottombar.styles.appearance.primaryWithoutLabel -import com.atls.hyperion.ui.components.bottombar.styles.appearance.secondary -import com.atls.hyperion.ui.components.bottombar.styles.appearance.secondaryWithoutLabel -import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape.WithLabel -import com.atls.hyperion.ui.components.bottombar.styles.shape.BottomBarShape.WithoutLabel -import com.atls.hyperion.ui.components.bottombar.styles.shape.default -import com.atls.hyperion.ui.components.bottombar.styles.shape.elevated -import com.atls.hyperion.ui.components.bottombar.styles.shape.rounded +import com.atls.hyperion.ui.components.bottomBar.BottomBar +import com.atls.hyperion.ui.components.bottomBar.model.BottomBarItem +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.dark +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.darkWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primaryWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondary +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondaryWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.default +import com.atls.hyperion.ui.components.bottomBar.styles.shape.elevated +import com.atls.hyperion.ui.components.bottomBar.styles.shape.rounded import kotlin.math.PI class BottomBarStory : ComponentExample { diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Appearance.kt similarity index 57% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Appearance.kt index a8e16c426..380a2cae5 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Appearance.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Appearance.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.styles.appearance +package com.atls.hyperion.ui.components.bottomBar.styles.appearance data class BottomBarAppearance( val colors: Colors diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Colors.kt similarity index 94% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Colors.kt index 70308c53b..f3a24f21d 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Colors.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Colors.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.styles.appearance +package com.atls.hyperion.ui.components.bottomBar.styles.appearance import androidx.compose.ui.graphics.Color import com.atls.hyperion.ui.theme.tokens.colors.Alpha diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Variants.kt similarity index 98% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Variants.kt index d8bebca83..d8ca02337 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/appearance/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/appearance/Variants.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.styles.appearance +package com.atls.hyperion.ui.components.bottomBar.styles.appearance import com.atls.hyperion.ui.theme.tokens.colors.Alpha import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Shape.kt similarity index 95% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Shape.kt index 1e3389cf1..bb9cde80f 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Shape.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Shape.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.styles.shape +package com.atls.hyperion.ui.components.bottomBar.styles.shape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.ui.text.TextStyle diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt similarity index 98% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt index 75734f41c..6e5105e9e 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottombar/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.bottombar.styles.shape +package com.atls.hyperion.ui.components.bottomBar.styles.shape import androidx.compose.runtime.Composable import androidx.compose.ui.text.TextStyle From 9974eac8b967f184bfbbaeb35cbc001ad3bbfe4c Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 20:47:53 +0300 Subject: [PATCH 30/47] feat(ui): top bar component --- .../kotlin/com/atls/hyperion/sample/App.kt | 2 + .../ui/components/topBar/Component.kt | 97 +++++++++++++++++++ .../ui/components/topBar/stories/Component.kt | 55 +++++++++++ .../topBar/style/appearance/Appearance.kt | 10 ++ .../topBar/style/appearance/Variants.kt | 11 +++ .../ui/components/topBar/style/shape/Shape.kt | 11 +++ .../components/topBar/style/shape/Variants.kt | 23 +++++ 7 files changed, 209 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/stories/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index 43863ecaf..947afaa0b 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -17,6 +17,7 @@ import com.atls.hyperion.ui.components.pagination.stories.PaginationStory import com.atls.hyperion.ui.components.placeholder.stories.PlaceholderStory import com.atls.hyperion.ui.components.progress.stories.ProgressStory import com.atls.hyperion.ui.components.switch.stories.SwitchStory +import com.atls.hyperion.ui.components.topBar.stories.TopBarStory import com.atls.hyperion.ui.fragments.datepicker.stories.DatePickerStory import com.atls.hyperion.ui.fragments.datepicker.stories.DateRangePickerStory import com.atls.hyperion.ui.primitives.stories.LinkStory @@ -44,6 +45,7 @@ fun App() { ProgressStory(), SwitchStory(), TextStory(), + TopBarStory(), LinkStory() ) ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt new file mode 100644 index 000000000..cf04a9cf1 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt @@ -0,0 +1,97 @@ +package com.atls.hyperion.ui.components.topBar + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxWithConstraints +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.onGloballyPositioned +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.atls.hyperion.ui.components.topBar.style.appearance.TopBarAppearance +import com.atls.hyperion.ui.components.topBar.style.appearance.default +import com.atls.hyperion.ui.components.topBar.style.shape.TopBarShape +import com.atls.hyperion.ui.components.topBar.style.shape.default +import com.atls.hyperion.ui.primitives.Text +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.tokens.layout.Weight + +@Composable +fun TopBar( + modifier: Modifier = Modifier, + text: String, + appearance: TopBarAppearance = TopBarAppearance.default(), + shape: TopBarShape = TopBarShape.default(), + centerContent: (@Composable () -> Unit)? = null, + beforeContent: @Composable () -> Unit = {}, + afterContent: @Composable () -> Unit = {} +) { + val density = LocalDensity.current + var beforeWidthPx by remember { mutableStateOf(0) } + var afterWidthPx by remember { mutableStateOf(0) } + var rowHeightPx by remember { mutableStateOf(0) } + + BoxWithConstraints( + modifier = modifier + .fillMaxWidth() + .background(appearance.backgroundColor) + .padding(shape.paddings) + ) { + Row( + modifier = Modifier + .fillMaxWidth() + .onGloballyPositioned { rowHeightPx = it.size.height }, + verticalAlignment = Alignment.CenterVertically + ) { + Box( + modifier = Modifier.onGloballyPositioned { beforeWidthPx = it.size.width }, + contentAlignment = Alignment.CenterStart + ) { beforeContent() } + + Spacer(Modifier.weight(Weight.full)) + + Box( + modifier = Modifier.onGloballyPositioned { afterWidthPx = it.size.width }, + contentAlignment = Alignment.CenterEnd + ) { afterContent() } + } + + val horizontalPadding = + with(density) { maxOf(beforeWidthPx, afterWidthPx).toDp() } + Space.g12 + val rowHeight = with(density) { rowHeightPx.toDp() } + + Box( + modifier = Modifier + .fillMaxWidth() + .padding(start = horizontalPadding, end = horizontalPadding) + .then( + if (rowHeight > 0.dp) + Modifier.heightIn( + min = rowHeight + ) + else Modifier + ), + contentAlignment = Alignment.Center + ) { + if (centerContent == null) { + Text( + text = text, + textAlign = TextAlign.Center, + typography = shape.typography, + color = appearance.textColor + ) + } else centerContent() + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/stories/Component.kt new file mode 100644 index 000000000..7fb92fa5c --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/stories/Component.kt @@ -0,0 +1,55 @@ +package com.atls.hyperion.ui.components.topBar.stories + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.topBar.TopBar +import com.atls.hyperion.ui.components.topBar.style.appearance.TopBarAppearance +import com.atls.hyperion.ui.components.topBar.style.appearance.default +import com.atls.hyperion.ui.components.topBar.style.shape.TopBarShape +import com.atls.hyperion.ui.components.topBar.style.shape.default + +class TopBarStory : ComponentExample { + override val name: String = "TopBar" + + @Composable + override fun Content() { + Column( + modifier = Modifier + .verticalScroll(rememberScrollState()) + .padding(bottom = 80.dp) + ) { + var text by remember { mutableStateOf("TopBar Title") } + + ComponentVariants( + name = "TopBar Variants", + appearances = listOf( + "Default" to { TopBarAppearance.default() } + ), + shapes = listOf( + "Default" to { TopBarShape.default() } + ) + ) { appearance, shape -> + TopBar( + text = text, + appearance = appearance, + shape = shape + ) + } + + Spacer(Modifier.height(24.dp)) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Appearance.kt new file mode 100644 index 000000000..0b9959ff3 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Appearance.kt @@ -0,0 +1,10 @@ +package com.atls.hyperion.ui.components.topBar.style.appearance + +import androidx.compose.ui.graphics.Color + +data class TopBarAppearance( + val backgroundColor: Color, + val textColor: Color +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Variants.kt new file mode 100644 index 000000000..f24134a9e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/appearance/Variants.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.topBar.style.appearance + +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +@Composable +fun TopBarAppearance.Companion.default(): TopBarAppearance = + TopBarAppearance( + backgroundColor = Colors.Palette.transparent, + textColor = Colors.Text.black + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Shape.kt new file mode 100644 index 000000000..e20d4da44 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Shape.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.topBar.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.ui.text.TextStyle + +data class TopBarShape( + val paddings: PaddingValues, + val typography: TextStyle +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt new file mode 100644 index 000000000..ce0522c09 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt @@ -0,0 +1,23 @@ +package com.atls.hyperion.ui.components.topBar.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.FontWeight +import com.atls.hyperion.ui.theme.typography.NunitoSansFontFamily + +@Composable +fun TopBarShape.Companion.default(): TopBarShape = + TopBarShape( + paddings = PaddingValues( + horizontal = Space.g24, + vertical = Space.zero + ), + typography = TextStyle( + fontWeight = FontWeight.bold, + fontSize = FontSize.xl4, + fontFamily = NunitoSansFontFamily() + ) + ) From 347c69b252f871ba2352a870878f9099b9460787 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:09:22 +0300 Subject: [PATCH 31/47] feat(ui): list styles --- .../list/style/appearance/Appearance.kt | 9 +++++++++ .../list/style/appearance/Variants.kt | 10 ++++++++++ .../ui/components/list/style/shape/Shape.kt | 11 +++++++++++ .../components/list/style/shape/Variants.kt | 19 +++++++++++++++++++ 4 files changed, 49 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Appearance.kt new file mode 100644 index 000000000..e41cc6a72 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Appearance.kt @@ -0,0 +1,9 @@ +package com.atls.hyperion.ui.components.list.style.appearance + +import androidx.compose.ui.graphics.Color + +data class ListAppearance( + val backgroundColor: Color +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Variants.kt new file mode 100644 index 000000000..7ace05974 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/appearance/Variants.kt @@ -0,0 +1,10 @@ +package com.atls.hyperion.ui.components.list.style.appearance + +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +@Composable +fun ListAppearance.Companion.default(): ListAppearance = + ListAppearance( + backgroundColor = Colors.Palette.transparent + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Shape.kt new file mode 100644 index 000000000..222ca49cf --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Shape.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.list.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.ui.unit.Dp + +data class ListShape( + val paddings: PaddingValues, + val spacing: Dp +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt new file mode 100644 index 000000000..56f49b610 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt @@ -0,0 +1,19 @@ +package com.atls.hyperion.ui.components.list.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun ListShape.Companion.default(): ListShape = + ListShape( + paddings = PaddingValues(Space.zero), + spacing = Space.zero + ) + +@Composable +fun ListShape.Companion.flowRow(): ListShape = + ListShape( + paddings = PaddingValues(Space.zero), + spacing = Space.g12 + ) From fbabefaa2df5d4a650d8e715e3878bbdc42ddeab Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:09:34 +0300 Subject: [PATCH 32/47] feat(ui): selectable lists --- .../ui/components/list/FlowSelectable.kt | 43 +++++++++++++++++++ .../hyperion/ui/components/list/Selectable.kt | 37 ++++++++++++++++ 2 files changed, 80 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/FlowSelectable.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Selectable.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/FlowSelectable.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/FlowSelectable.kt new file mode 100644 index 000000000..15fd029e0 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/FlowSelectable.kt @@ -0,0 +1,43 @@ +package com.atls.hyperion.ui.components.list + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.list.model.SelectionState +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow + +@OptIn(ExperimentalLayoutApi::class) +@Composable +fun FlowSelectableList( + modifier: Modifier = Modifier, + items: List Unit, isSelected: Boolean) -> Unit>>, + selectionState: SelectionState, + onItemClick: (ID) -> Unit, + appearance: ListAppearance = ListAppearance.default(), + shape: ListShape = ListShape.flowRow() +) { + FlowRow( + modifier = modifier + .fillMaxWidth() + .background(appearance.backgroundColor) + .padding(shape.paddings), + verticalArrangement = Arrangement.spacedBy(shape.spacing), + horizontalArrangement = Arrangement.spacedBy(shape.spacing) + ) { + items.forEach { (id, itemContent) -> + val isSelected = selectionState.isSelected(id) + itemContent( + { onItemClick(id) }, + isSelected + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Selectable.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Selectable.kt new file mode 100644 index 000000000..f9a10c7d4 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Selectable.kt @@ -0,0 +1,37 @@ +package com.atls.hyperion.ui.components.list + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.list.model.SelectionState +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow +import com.atls.hyperion.ui.primitives.VerticalSpacer + +@Composable +fun SelectableList( + modifier: Modifier = Modifier, + items: List Unit, isSelected: Boolean) -> Unit>>, + selectionState: SelectionState, + onItemClick: (ID) -> Unit, + appearance: ListAppearance = ListAppearance.default(), + shape: ListShape = ListShape.flowRow() +) { + Column( + modifier = modifier + .fillMaxWidth() + .background(color = appearance.backgroundColor) + .padding(shape.paddings) + ) { + items.forEach { (id, itemContent) -> + val isSelected = selectionState.isSelected(id) + itemContent({ onItemClick(id) }, isSelected) + VerticalSpacer(shape.spacing) + } + } +} From 355a39ec4a6cce82173b0d1acae6d97623c6e258 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:11:39 +0300 Subject: [PATCH 33/47] feat(ui): vertical list --- .../hyperion/ui/components/list/Vertical.kt | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Vertical.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Vertical.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Vertical.kt new file mode 100644 index 000000000..f50117ba7 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/Vertical.kt @@ -0,0 +1,27 @@ +package com.atls.hyperion.ui.components.list + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier + +@Composable +fun VerticalList( + items: List, + modifier: Modifier = Modifier, + arrangement: Arrangement.Vertical = Arrangement.Top, + contentPadding: PaddingValues = PaddingValues(), + itemContent: @Composable (T) -> Unit +) { + LazyColumn( + modifier = modifier, + verticalArrangement = arrangement, + contentPadding = contentPadding + ) { + items(items) { item -> + itemContent(item) + } + } +} From 35c6824d63cb309c86d6f815f86ff78e2f39ac8a Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:12:12 +0300 Subject: [PATCH 34/47] feat(ui): list item component --- .../hyperion/ui/components/list/item/Text.kt | 63 +++++++++++++++++++ .../ui/components/list/item/model/State.kt | 6 ++ .../list/item/style/appearance/Appearance.kt | 16 +++++ .../list/item/style/appearance/Colors.kt | 8 +++ .../list/item/style/appearance/Variants.kt | 17 +++++ .../components/list/item/style/shape/Shape.kt | 16 +++++ .../list/item/style/shape/Variants.kt | 31 +++++++++ 7 files changed, 157 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/Text.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/model/State.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Colors.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/Text.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/Text.kt new file mode 100644 index 000000000..877cff636 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/Text.kt @@ -0,0 +1,63 @@ +package com.atls.hyperion.ui.components.list.item + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.components.list.item.model.ListItemState +import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance +import com.atls.hyperion.ui.components.list.item.style.appearance.default +import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape +import com.atls.hyperion.ui.components.list.item.style.shape.default +import com.atls.hyperion.ui.primitives.Text +import com.atls.hyperion.ui.shared.addon.AddonPosition.After +import com.atls.hyperion.ui.shared.addon.AddonPosition.Before +import com.atls.hyperion.ui.shared.addon.AddonSlotManager +import com.atls.hyperion.ui.theme.tokens.layout.Weight + +@Composable +fun TextListItem( + modifier: Modifier = Modifier, + text: String, + state: ListItemState, + onClick: () -> Unit, + addons: AddonSlotManager = AddonSlotManager(), + appearance: TextListItemAppearance = TextListItemAppearance.default(), + shape: TextListItemShape = TextListItemShape.default() +) { + val colors = appearance.fromState(state) + + Row( + modifier = modifier + .fillMaxWidth() + .clickable(onClick = onClick) + .background( + color = colors.backgroundColor, + shape = RoundedCornerShape(shape.cornerRadius) + ) + .padding(shape.paddings) + ) { + addons.get(Before).forEach { + it.Content() + it.Spacer() + } + + Text( + modifier = Modifier + .weight(Weight.full) + .padding(shape.textPaddings), + text = text, + textAlign = shape.textAlign, + color = colors.textColor, + typography = shape.typography + ) + addons.get(After).forEach { + it.Spacer() + it.Content() + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/model/State.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/model/State.kt new file mode 100644 index 000000000..6c8ca6011 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/model/State.kt @@ -0,0 +1,6 @@ +package com.atls.hyperion.ui.components.list.item.model + +sealed interface ListItemState { + data object Selected: ListItemState + data object Unselected: ListItemState +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Appearance.kt new file mode 100644 index 000000000..168058655 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Appearance.kt @@ -0,0 +1,16 @@ +package com.atls.hyperion.ui.components.list.item.style.appearance + +import com.atls.hyperion.ui.components.list.item.model.ListItemState + +data class TextListItemAppearance( + val selected: TextListItemAppearanceColors, + val unselected: TextListItemAppearanceColors +) { + companion object + + fun fromState(state: ListItemState) = + when (state) { + ListItemState.Selected -> this.selected + ListItemState.Unselected -> this.unselected + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Colors.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Colors.kt new file mode 100644 index 000000000..6e42f2675 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Colors.kt @@ -0,0 +1,8 @@ +package com.atls.hyperion.ui.components.list.item.style.appearance + +import androidx.compose.ui.graphics.Color + +data class TextListItemAppearanceColors( + val backgroundColor: Color, + val textColor: Color +) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Variants.kt new file mode 100644 index 000000000..618e9fb92 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/appearance/Variants.kt @@ -0,0 +1,17 @@ +package com.atls.hyperion.ui.components.list.item.style.appearance + +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +@Composable +fun TextListItemAppearance.Companion.default(): TextListItemAppearance = + TextListItemAppearance( + selected = TextListItemAppearanceColors( + backgroundColor = Colors.Palette.blueProtective, + textColor = Colors.Text.white + ), + unselected = TextListItemAppearanceColors( + backgroundColor = Colors.Palette.white, + textColor = Colors.Text.black + ) + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Shape.kt new file mode 100644 index 000000000..dbaa1e4cf --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Shape.kt @@ -0,0 +1,16 @@ +package com.atls.hyperion.ui.components.list.item.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.Dp + +class TextListItemShape( + val cornerRadius: Dp, + val paddings: PaddingValues, + val textPaddings: PaddingValues, + val typography: TextStyle, + val textAlign: TextAlign +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt new file mode 100644 index 000000000..aa98e04b2 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt @@ -0,0 +1,31 @@ +package com.atls.hyperion.ui.components.list.item.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.FontWeight +import com.atls.hyperion.ui.theme.typography.NunitoSansFontFamily + +@Composable +fun TextListItemShape.Companion.default(): TextListItemShape = + TextListItemShape( + cornerRadius = CornerRadius.xl2, + paddings = PaddingValues( + horizontal = Space.g12, + vertical = Space.g8 + ), + textPaddings = PaddingValues( + horizontal = Space.g4, + vertical = Space.zero + ), + typography = TextStyle( + fontSize = FontSize.xs, + fontWeight = FontWeight.medium, + fontFamily = NunitoSansFontFamily() + ), + textAlign = TextAlign.Start + ) From afb6754ee41578b2bdfb3656cfe9f348bdc8c87e Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:12:22 +0300 Subject: [PATCH 35/47] feat(ui): selection state --- .../ui/components/list/model/SelectionState.kt | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/model/SelectionState.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/model/SelectionState.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/model/SelectionState.kt new file mode 100644 index 000000000..6adc63cc7 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/model/SelectionState.kt @@ -0,0 +1,13 @@ +package com.atls.hyperion.ui.components.list.model + +sealed interface SelectionState { + fun isSelected(item: T): Boolean + + data class Single(val selectedItem: T) : SelectionState { + override fun isSelected(item: T) = item == selectedItem + } + + data class Multiple(val selectedItems: Set) : SelectionState { + override fun isSelected(item: T) = selectedItems.contains(item) + } +} From de514ec6c8bca4e3f45341fab230ae7fb6722a04 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 21:25:02 +0300 Subject: [PATCH 36/47] feat(ui): list stories --- .../kotlin/com/atls/hyperion/sample/App.kt | 4 +- .../ui/components/list/stories/Component.kt | 138 ++++++++++++++++++ 2 files changed, 141 insertions(+), 1 deletion(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index 947afaa0b..6b3b561d3 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -11,6 +11,7 @@ import com.atls.hyperion.ui.components.carousel.stories.CarouselStory import com.atls.hyperion.ui.components.checkbox.stories.CheckboxStory import com.atls.hyperion.ui.components.divider.stories.DividerStory import com.atls.hyperion.ui.components.input.stories.InputStory +import com.atls.hyperion.ui.components.list.stories.ListStories import com.atls.hyperion.ui.components.modal.bottom.stories.BottomDialogStory import com.atls.hyperion.ui.components.modal.popup.stories.PopupStory import com.atls.hyperion.ui.components.pagination.stories.PaginationStory @@ -46,7 +47,8 @@ fun App() { SwitchStory(), TextStory(), TopBarStory(), - LinkStory() + LinkStory(), + ListStories() ) ) } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt new file mode 100644 index 000000000..f92240618 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt @@ -0,0 +1,138 @@ +package com.atls.hyperion.ui.components.list.stories + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.list.FlowSelectableList +import com.atls.hyperion.ui.components.list.SelectableList +import com.atls.hyperion.ui.components.list.VerticalList +import com.atls.hyperion.ui.components.list.item.TextListItem +import com.atls.hyperion.ui.components.list.item.model.ListItemState +import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance +import com.atls.hyperion.ui.components.list.item.style.appearance.default +import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape +import com.atls.hyperion.ui.components.list.item.style.shape.default +import com.atls.hyperion.ui.components.list.model.SelectionState +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow +import com.atls.hyperion.ui.primitives.VerticalSpacer + +class ListStories : ComponentExample { + override val name: String = "Lists" + + @Composable + override fun Content() { + Column { + val simpleItems = listOf("Item A", "Item B", "Item C") + ComponentVariants( + name = "VerticalList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("Default" to { ListShape.flowRow() }) + ) { appearance, shape -> + VerticalList(items = simpleItems) { item -> + TextListItem( + text = item, + state = ListItemState.Unselected, + onClick = {}, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + VerticalSpacer(shape.spacing) + } + } + + Spacer(Modifier.height(16.dp)) + + val selectableItems = listOf("Item 1", "Item 2") + var selectionState by remember { + mutableStateOf>( + SelectionState.Multiple( + emptySet() + ) + ) + } + ComponentVariants( + name = "SelectableList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("FlowRow" to { ListShape.flowRow() }) + ) { appearance, shape -> + SelectableList( + items = selectableItems.map { id -> + id to @Composable { onClick: () -> Unit, isSelected: Boolean -> + TextListItem( + text = id, + state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, + onClick = onClick, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + } + }, + selectionState = selectionState, + onItemClick = { id -> + val current = + (selectionState as SelectionState.Multiple).selectedItems.toMutableSet() + if (current.contains(id)) current.remove(id) else current.add(id) + selectionState = SelectionState.Multiple(current) + }, + appearance = appearance, + shape = shape + ) + } + + Spacer(Modifier.height(16.dp)) + + val flowItems = listOf("Apple", "Banana", "Orange", "Mango", "Peach", "Grapes") + var flowSelectionState by remember { + mutableStateOf>( + SelectionState.Multiple(emptySet()) + ) + } + + ComponentVariants( + name = "FlowSelectableList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("FlowRow" to { ListShape.flowRow() }) + ) { appearance, shape -> + FlowSelectableList( + items = flowItems.map { id -> + id to @Composable { onClick: () -> Unit, isSelected: Boolean -> + TextListItem( + modifier = Modifier.width(IntrinsicSize.Min), + text = id, + state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, + onClick = onClick, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + } + }, + selectionState = flowSelectionState, + onItemClick = { id -> + val current = + (flowSelectionState as SelectionState.Multiple).selectedItems.toMutableSet() + if (current.contains(id)) current.remove(id) else current.add(id) + flowSelectionState = SelectionState.Multiple(current) + }, + appearance = appearance, + shape = shape + ) + } + + Spacer(Modifier.height(32.dp)) + } + } +} From c0225066c8333fb11417a4b5b27fd45af79a043c Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 22:47:09 +0300 Subject: [PATCH 37/47] feat(ui): toast component --- .../kotlin/com/atls/hyperion/sample/App.kt | 4 +- .../hyperion/ui/components/toast/Toast.kt | 57 ++++++++++++++++ .../ui/components/toast/stories/Component.kt | 65 +++++++++++++++++++ .../toast/styles/appearance/Appearance.kt | 12 ++++ .../toast/styles/appearance/Variants.kt | 10 +++ .../ui/components/toast/styles/shape/Shape.kt | 16 +++++ .../components/toast/styles/shape/Variants.kt | 37 +++++++++++ 7 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/stories/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index 6b3b561d3..a1d12baff 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -18,6 +18,7 @@ import com.atls.hyperion.ui.components.pagination.stories.PaginationStory import com.atls.hyperion.ui.components.placeholder.stories.PlaceholderStory import com.atls.hyperion.ui.components.progress.stories.ProgressStory import com.atls.hyperion.ui.components.switch.stories.SwitchStory +import com.atls.hyperion.ui.components.toast.stories.ToastStories import com.atls.hyperion.ui.components.topBar.stories.TopBarStory import com.atls.hyperion.ui.fragments.datepicker.stories.DatePickerStory import com.atls.hyperion.ui.fragments.datepicker.stories.DateRangePickerStory @@ -48,7 +49,8 @@ fun App() { TextStory(), TopBarStory(), LinkStory(), - ListStories() + ListStories(), + ToastStories() ) ) } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt new file mode 100644 index 000000000..70298e06e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt @@ -0,0 +1,57 @@ +package com.atls.hyperion.ui.components.toast + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Snackbar +import androidx.compose.material3.SnackbarHost +import androidx.compose.material3.SnackbarHostState +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import com.atls.hyperion.ui.components.toast.styles.appearance.ToastAppearance +import com.atls.hyperion.ui.components.toast.styles.appearance.default +import com.atls.hyperion.ui.components.toast.styles.shape.ToastShape +import com.atls.hyperion.ui.components.toast.styles.shape.default + +@Composable +fun Toast( + hostState: SnackbarHostState, + appearance: ToastAppearance = ToastAppearance.default(), + shape: ToastShape = ToastShape.default(), +) { + Box( + modifier = Modifier.fillMaxWidth(), + contentAlignment = Alignment.BottomCenter + ) { + SnackbarHost( + hostState = hostState + ) { data -> + Snackbar( + shape = RoundedCornerShape(shape.cornerRadius), + containerColor = appearance.backgroundColor, + contentColor = appearance.textColor, + action = {} + ) { + Text( + text = data.visuals.message, + style = shape.typography, + textAlign = TextAlign.Center, + modifier = Modifier + .background(appearance.backgroundColor) + .border( + BorderStroke(shape.borderStroke, appearance.borderColor), + RoundedCornerShape(shape.cornerRadius) + ) + .padding(shape.paddings) + ) + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/stories/Component.kt new file mode 100644 index 000000000..cef77fd51 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/stories/Component.kt @@ -0,0 +1,65 @@ +package com.atls.hyperion.ui.components.toast.stories + +import androidx.compose.foundation.layout.Column +import androidx.compose.material.Button +import androidx.compose.material.Text +import androidx.compose.material3.SnackbarHostState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.toast.Toast +import com.atls.hyperion.ui.components.toast.styles.appearance.ToastAppearance +import com.atls.hyperion.ui.components.toast.styles.appearance.default +import com.atls.hyperion.ui.components.toast.styles.shape.ToastShape +import com.atls.hyperion.ui.components.toast.styles.shape.default +import com.atls.hyperion.ui.components.toast.styles.shape.rounded +import com.atls.hyperion.ui.components.toast.styles.shape.square +import kotlinx.coroutines.launch + +class ToastStories : ComponentExample { + override val name: String = "Toast" + + @Composable + override fun Content() { + val snackbarHostState = remember { SnackbarHostState() } + val scope = rememberCoroutineScope() + + var isVisible by remember { mutableStateOf(false) } + var toastText by remember { mutableStateOf("This is a toast message") } + + Column { + + ComponentVariants( + name = "Toast", + appearances = listOf( + "Default" to { ToastAppearance.default() } + ), + shapes = listOf( + "Default" to { ToastShape.default() }, + "Rounded" to { ToastShape.rounded() }, + "Square" to { ToastShape.square() } + ) + ) { appearance: ToastAppearance, shape: ToastShape -> + Button( + onClick = { + scope.launch { + snackbarHostState.showSnackbar("toast") + } + } + ) { + Text("Show Toast") + } + Toast( + hostState = snackbarHostState, + shape = shape, + appearance = appearance + ) + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Appearance.kt new file mode 100644 index 000000000..23029c4bf --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Appearance.kt @@ -0,0 +1,12 @@ +package com.atls.hyperion.ui.components.toast.styles.appearance + +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +data class ToastAppearance( + val backgroundColor: Color, + val textColor: Color, + val borderColor: Color = ThemeColors.Palette.transparent +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Variants.kt new file mode 100644 index 000000000..f7897599f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/appearance/Variants.kt @@ -0,0 +1,10 @@ +package com.atls.hyperion.ui.components.toast.styles.appearance + +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +fun ToastAppearance.Companion.default(): ToastAppearance = + ToastAppearance( + backgroundColor = Colors.Palette.white, + textColor = Colors.Palette.black, + borderColor = Colors.Palette.gray + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Shape.kt new file mode 100644 index 000000000..8f84def7e --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Shape.kt @@ -0,0 +1,16 @@ +package com.atls.hyperion.ui.components.toast.styles.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.Dp +import com.atls.hyperion.ui.theme.tokens.Elevation + +data class ToastShape( + val cornerRadius: Dp, + val paddings: PaddingValues, + val typography: TextStyle, + val borderStroke: Dp, + val elevation: Dp = Elevation.zero +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt new file mode 100644 index 000000000..c8cec1705 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt @@ -0,0 +1,37 @@ +package com.atls.hyperion.ui.components.toast.styles.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.ui.text.TextStyle +import com.atls.hyperion.ui.theme.tokens.layout.BorderStroke +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius +import com.atls.hyperion.ui.theme.tokens.layout.Space +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.LineHeights + +@Composable +fun ToastShape.Companion.default(): ToastShape = + ToastShape( + cornerRadius = CornerRadius.xl2, + paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), + borderStroke = BorderStroke.tiny + ) + +@Composable +fun ToastShape.Companion.rounded(): ToastShape = + ToastShape( + cornerRadius = CornerRadius.xl4, + paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), + borderStroke = BorderStroke.tiny + ) + +@Composable +fun ToastShape.Companion.square(): ToastShape = + ToastShape( + cornerRadius = CornerRadius.zero, + paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), + borderStroke = BorderStroke.tiny + ) From e02ff99269667ba0ffaa05f454f649ad9ae09711 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Tue, 13 Jan 2026 23:12:19 +0300 Subject: [PATCH 38/47] feat(ui): tooltip component --- .../kotlin/com/atls/hyperion/sample/App.kt | 4 +- .../ui/components/tooltip/Component.kt | 75 +++++++++++++++++++ .../components/tooltip/stories/Component.kt | 64 ++++++++++++++++ .../tooltip/style/appearance/Appearance.kt | 11 +++ .../tooltip/style/appearance/Variants.kt | 10 +++ .../components/tooltip/style/shape/Shape.kt | 15 ++++ .../tooltip/style/shape/Variants.kt | 19 +++++ .../ui/components/tooltip/ui/TextContent.kt | 41 ++++++++++ .../ui/theme/tokens/components/CaretSize.kt | 8 ++ 9 files changed, 246 insertions(+), 1 deletion(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Appearance.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Shape.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/ui/TextContent.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt diff --git a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt index a1d12baff..e2eabc539 100644 --- a/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt +++ b/mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt @@ -19,6 +19,7 @@ import com.atls.hyperion.ui.components.placeholder.stories.PlaceholderStory import com.atls.hyperion.ui.components.progress.stories.ProgressStory import com.atls.hyperion.ui.components.switch.stories.SwitchStory import com.atls.hyperion.ui.components.toast.stories.ToastStories +import com.atls.hyperion.ui.components.tooltip.stories.TextTooltipStories import com.atls.hyperion.ui.components.topBar.stories.TopBarStory import com.atls.hyperion.ui.fragments.datepicker.stories.DatePickerStory import com.atls.hyperion.ui.fragments.datepicker.stories.DateRangePickerStory @@ -50,7 +51,8 @@ fun App() { TopBarStory(), LinkStory(), ListStories(), - ToastStories() + ToastStories(), + TextTooltipStories() ) ) } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/Component.kt new file mode 100644 index 000000000..8b87d7fdf --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/Component.kt @@ -0,0 +1,75 @@ +package com.atls.hyperion.ui.components.tooltip + +import androidx.compose.foundation.MutatePriority +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.RichTooltip +import androidx.compose.material3.TooltipAnchorPosition +import androidx.compose.material3.TooltipBox +import androidx.compose.material3.TooltipDefaults +import androidx.compose.material3.TooltipState +import androidx.compose.material3.rememberTooltipState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Modifier +import androidx.compose.ui.window.PopupPositionProvider +import com.atls.hyperion.ui.components.tooltip.style.appearance.TooltipAppearance +import com.atls.hyperion.ui.components.tooltip.style.appearance.default +import com.atls.hyperion.ui.components.tooltip.style.shape.TooltipShape +import com.atls.hyperion.ui.components.tooltip.style.shape.default +import kotlinx.coroutines.launch + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun Tooltip( + modifier: Modifier = Modifier, + appearance: TooltipAppearance = TooltipAppearance.default(), + shape: TooltipShape = TooltipShape.default(), + positionProvider: PopupPositionProvider = TooltipDefaults.rememberTooltipPositionProvider( + TooltipAnchorPosition.Below + ), + tooltipState: TooltipState = rememberTooltipState(), + tooltipContent: @Composable () -> Unit, + content: @Composable () -> Unit +) { + val scope = rememberCoroutineScope() + + TooltipBox( + positionProvider = positionProvider, + state = tooltipState, + onDismissRequest = { + tooltipState.dismiss() + }, + tooltip = { + RichTooltip( + shape = RoundedCornerShape(shape.cornerRadius), + colors = TooltipDefaults.richTooltipColors().copy( + containerColor = appearance.backgroundColor + ), + caretShape = TooltipDefaults.caretShape(shape.caretSize), + text = { + Box( + modifier = Modifier.padding(shape.padding) + ) { + tooltipContent() + } + } + ) + }, + content = { + Box( + modifier = modifier + .clickable { + scope.launch { + tooltipState.show(MutatePriority.PreventUserInput) + } + } + ) { + content() + } + } + ) +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt new file mode 100644 index 000000000..c726f9cac --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt @@ -0,0 +1,64 @@ +package com.atls.hyperion.ui.components.tooltip.stories + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.atls.hyperion.storybook.shared.model.ComponentExample +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.tooltip.Tooltip +import com.atls.hyperion.ui.components.tooltip.style.appearance.TooltipAppearance +import com.atls.hyperion.ui.components.tooltip.style.appearance.default +import com.atls.hyperion.ui.components.tooltip.style.shape.TooltipShape +import com.atls.hyperion.ui.components.tooltip.style.shape.default +import com.atls.hyperion.ui.components.tooltip.ui.TextTooltipContent + +class TextTooltipStories : ComponentExample { + override val name: String = "Text Tooltip" + + @OptIn(ExperimentalMaterial3Api::class) + @Composable + override fun Content() { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + ComponentVariants( + name = "Text Tooltip", + appearances = listOf( + "Default" to { TooltipAppearance.default() } + ), + shapes = listOf( + "Default" to { TooltipShape.default() } + ) + ) { appearance: TooltipAppearance, shape: TooltipShape -> + Tooltip( + appearance = appearance, + shape = shape, + tooltipContent = { + TextTooltipContent( + text = "This is a tooltip with ${shape::class.simpleName} shape", + onDismiss = {} + ) + } + ) { + Box( + modifier = Modifier + .padding(16.dp) + .fillMaxWidth() + ) { + Text("Click me") + } + } + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Appearance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Appearance.kt new file mode 100644 index 000000000..7f7f22ff4 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Appearance.kt @@ -0,0 +1,11 @@ +package com.atls.hyperion.ui.components.tooltip.style.appearance + +import androidx.compose.runtime.Immutable +import androidx.compose.ui.graphics.Color + +@Immutable +data class TooltipAppearance( + val backgroundColor: Color +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Variants.kt new file mode 100644 index 000000000..d07aef3d5 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/appearance/Variants.kt @@ -0,0 +1,10 @@ +package com.atls.hyperion.ui.components.tooltip.style.appearance + +import androidx.compose.runtime.Composable +import com.atls.hyperion.ui.theme.tokens.colors.Colors + +@Composable +fun TooltipAppearance.Companion.default() = + TooltipAppearance( + backgroundColor = Colors.Palette.white + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Shape.kt new file mode 100644 index 000000000..6a35654eb --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Shape.kt @@ -0,0 +1,15 @@ +package com.atls.hyperion.ui.components.tooltip.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Immutable +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.DpSize + +@Immutable +data class TooltipShape( + val cornerRadius: Dp, + val caretSize: DpSize, + val padding: PaddingValues +) { + companion object +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt new file mode 100644 index 000000000..75fce1425 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt @@ -0,0 +1,19 @@ +package com.atls.hyperion.ui.components.tooltip.style.shape + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.ui.unit.DpSize +import com.atls.hyperion.ui.theme.tokens.components.CaretSize +import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius +import com.atls.hyperion.ui.theme.tokens.layout.Space + +fun TooltipShape.Companion.default() = + TooltipShape( + cornerRadius = CornerRadius.xl2, + caretSize = DpSize( + height = CaretSize.caretHeight, + width = CaretSize.caretWidth + ), + padding = PaddingValues( + vertical = Space.g8 + ) + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/ui/TextContent.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/ui/TextContent.kt new file mode 100644 index 000000000..398468a13 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/ui/TextContent.kt @@ -0,0 +1,41 @@ +package com.atls.hyperion.ui.components.tooltip.ui + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle +import com.atls.hyperion.ui.primitives.Text +import com.atls.hyperion.ui.theme.tokens.colors.Colors +import com.atls.hyperion.ui.theme.tokens.layout.Weight +import com.atls.hyperion.ui.theme.typography.FontSize +import com.atls.hyperion.ui.theme.typography.FontWeight + +@Composable +fun TextTooltipContent( + modifier: Modifier = Modifier, + text: String, + color: Color = Colors.Palette.black, + typography: TextStyle = TextStyle( + fontSize = FontSize.xs2, + fontWeight = FontWeight.medium, + ), + onDismiss: () -> Unit +) { + Box( + modifier = modifier + .clickable(onClick = onDismiss) + .fillMaxWidth(Weight.large) + .verticalScroll(rememberScrollState()) + ) { + Text( + text = text, + color = color, + typography = typography + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt new file mode 100644 index 000000000..4b8f0e201 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt @@ -0,0 +1,8 @@ +package com.atls.hyperion.ui.theme.tokens.components + +import androidx.compose.ui.unit.dp + +object CaretSize { + val caretHeight = 8.dp + val caretWidth = 16.dp +} From 2b5d6a68383717e7402ca3cdf0c4533a8e021947 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Wed, 14 Jan 2026 00:54:13 +0300 Subject: [PATCH 39/47] refactor(ui): rename spaces --- .../bottomBar/styles/shape/Variants.kt | 18 +++++++-------- .../ui/components/button/stories/Component.kt | 6 ++--- .../button/styles/shape/Variants.kt | 14 +++++------ .../components/card/style/shape/Variants.kt | 2 +- .../ui/components/carousel/WithPagination.kt | 2 +- .../carousel/style/shape/Variants.kt | 4 ++-- .../components/checkbox/stories/Component.kt | 6 ++--- .../components/checkbox/styles/shape/Shape.kt | 2 +- .../divider/stories/DividerStory.kt | 6 ++--- .../ui/components/input/stories/Component.kt | 12 +++++----- .../components/input/style/shape/Variants.kt | 10 ++++---- .../list/item/style/shape/Variants.kt | 6 ++--- .../components/list/style/shape/Variants.kt | 2 +- .../bottom/dragHandle/style/shape/Variants.kt | 2 +- .../modal/bottom/stories/Component.kt | 6 ++--- .../modal/popup/stories/Component.kt | 6 ++--- .../components/modal/style/shape/Variants.kt | 12 +++++----- .../pagination/stories/Component.kt | 2 +- .../pagination/style/shape/Variants.kt | 4 ++-- .../placeholder/styles/shape/Variants.kt | 4 ++-- .../ui/components/switch/stories/Component.kt | 6 ++--- .../switch/styles/shape/Variants.kt | 2 +- .../components/toast/styles/shape/Variants.kt | 6 ++--- .../tooltip/style/shape/Variants.kt | 2 +- .../ui/components/topBar/Component.kt | 2 +- .../components/topBar/style/shape/Variants.kt | 2 +- .../datepicker/style/shape/Variants.kt | 8 +++---- .../hyperion/ui/primitives/stories/Link.kt | 6 ++--- .../hyperion/ui/primitives/stories/Text.kt | 8 +++---- .../hyperion/ui/theme/tokens/layout/Spaces.kt | 23 +++++++++---------- 30 files changed, 95 insertions(+), 96 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt index 6e5105e9e..e75909d61 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt @@ -20,9 +20,9 @@ fun BottomBarShape.WithLabel.Companion.default() = elevation = Elevation.zero, cornerRadius = CornerRadius.zero, dividerWidth = BorderStroke.tiny, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium, - labelPadding = Space.g4, + labelPadding = Space.xs4, labelTypography = TextStyle( fontSize = FontSize.xs3, fontWeight = FontWeight.medium, @@ -37,9 +37,9 @@ fun BottomBarShape.WithLabel.Companion.elevated() = elevation = Elevation.medium, cornerRadius = CornerRadius.zero, dividerWidth = BorderStroke.none, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium, - labelPadding = Space.g4, + labelPadding = Space.xs4, labelTypography = TextStyle( fontSize = FontSize.xs3, fontWeight = FontWeight.medium, @@ -54,9 +54,9 @@ fun BottomBarShape.WithLabel.Companion.rounded() = elevation = Elevation.tiny, cornerRadius = CornerRadius.xl2_5, dividerWidth = BorderStroke.none, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium, - labelPadding = Space.g4, + labelPadding = Space.xs4, labelTypography = TextStyle( fontSize = FontSize.xs3, fontWeight = FontWeight.medium, @@ -70,7 +70,7 @@ fun BottomBarShape.WithoutLabel.Companion.default() = elevation = Elevation.zero, cornerRadius = CornerRadius.zero, dividerWidth = 1.dp, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium ) @@ -80,7 +80,7 @@ fun BottomBarShape.WithoutLabel.Companion.elevated() = elevation = Elevation.medium, cornerRadius = CornerRadius.zero, dividerWidth = BorderStroke.none, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium ) @@ -90,6 +90,6 @@ fun BottomBarShape.WithoutLabel.Companion.rounded() = elevation = Elevation.tiny, cornerRadius = CornerRadius.xl2_5, dividerWidth = BorderStroke.none, - tabSpacing = Space.g8, + tabSpacing = Space.xs2, iconSize = IconSize.medium ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/stories/Component.kt index af661f4a5..e3a0d064f 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/stories/Component.kt @@ -42,13 +42,13 @@ class ButtonStory : ComponentExample { Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = Space.g12) + .padding(horizontal = Space.sm) ) { Text(modifier = Modifier.weight(Weight.full), text = "Enabled") - HorizontalSpacer(Space.g12) + HorizontalSpacer(Space.sm) Switch(checked = enabled, onCheckedChange = { enabled = it }) } - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) ComponentVariants( name = "Button", diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/styles/shape/Variants.kt index ffb849f56..39a9f62b9 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/button/styles/shape/Variants.kt @@ -13,7 +13,7 @@ import com.atls.hyperion.ui.theme.typography.LineHeights fun ButtonShape.Companion.huge(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g24, vertical = Space.g16), + paddings = PaddingValues(horizontal = Space.xl3, vertical = Space.lg), typography = TextStyle(fontSize = FontSize.xl3, lineHeight = LineHeights.xl4), borderStroke = BorderStroke.none ) @@ -22,7 +22,7 @@ fun ButtonShape.Companion.huge(): ButtonShape = fun ButtonShape.Companion.large(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g24, vertical = Space.g14), + paddings = PaddingValues(horizontal = Space.xl3, vertical = Space.md), typography = TextStyle(fontSize = FontSize.xl2, lineHeight = LineHeights.xl3), borderStroke = BorderStroke.none ) @@ -31,7 +31,7 @@ fun ButtonShape.Companion.large(): ButtonShape = fun ButtonShape.Companion.semiMedium(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g20, vertical = Space.g12), + paddings = PaddingValues(horizontal = Space.xl, vertical = Space.sm), typography = TextStyle(fontSize = FontSize.lg, lineHeight = LineHeights.xl), borderStroke = BorderStroke.none ) @@ -40,7 +40,7 @@ fun ButtonShape.Companion.semiMedium(): ButtonShape = fun ButtonShape.Companion.medium(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g10), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.xs), typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), borderStroke = BorderStroke.none ) @@ -49,7 +49,7 @@ fun ButtonShape.Companion.medium(): ButtonShape = fun ButtonShape.Companion.normal(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g24, vertical = Space.g8), + paddings = PaddingValues(horizontal = Space.xl3, vertical = Space.xs2), typography = TextStyle(fontSize = FontSize.xs, lineHeight = LineHeights.sm), borderStroke = BorderStroke.none ) @@ -58,7 +58,7 @@ fun ButtonShape.Companion.normal(): ButtonShape = fun ButtonShape.Companion.small(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g6), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.xs3), typography = TextStyle(fontSize = FontSize.xs, lineHeight = LineHeights.xs), borderStroke = BorderStroke.none ) @@ -67,7 +67,7 @@ fun ButtonShape.Companion.small(): ButtonShape = fun ButtonShape.Companion.smallSizeMediumRadii(): ButtonShape = ButtonShape( cornerRadius = CornerRadius.xl2_5, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g6), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.xs3), typography = TextStyle(fontSize = FontSize.xs, lineHeight = LineHeights.xs), borderStroke = BorderStroke.none ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/card/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/card/style/shape/Variants.kt index 7fa6617d5..53a0e9c84 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/card/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/card/style/shape/Variants.kt @@ -10,6 +10,6 @@ import com.atls.hyperion.ui.theme.tokens.layout.Space fun CardShape.Companion.medium(): CardShape = CardShape( cornerRadius = CornerRadius.xl, - padding = PaddingValues(Space.g16), + padding = PaddingValues(Space.lg), borderWidth = BorderStroke.none ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt index 96b67a6f5..ae9132f8b 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/WithPagination.kt @@ -39,7 +39,7 @@ fun CarouselWithPagination( content = content ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Pagination( currentPage = pagerState.currentPage, diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt index 8f68edd74..0fc9152ee 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/style/shape/Variants.kt @@ -4,7 +4,7 @@ import com.atls.hyperion.ui.theme.tokens.layout.Space fun CarouselShape.Companion.default() = CarouselShape( - itemSpacing = Space.g16, + itemSpacing = Space.lg, peekWidth = Space.zero, - padding = Space.g24 + padding = Space.xl3 ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/stories/Component.kt index 53ceb1ba2..95012db0b 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/stories/Component.kt @@ -42,13 +42,13 @@ class CheckboxStory : ComponentExample { Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = Space.g12) + .padding(horizontal = Space.sm) ) { Text(modifier = Modifier.weight(Weight.full), text = "Enabled") - HorizontalSpacer(Space.g12) + HorizontalSpacer(Space.sm) Switch(checked = enabled, onCheckedChange = { enabled = it }) } - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) ComponentVariants( name = "Checkbox", diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/styles/shape/Shape.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/styles/shape/Shape.kt index 382b03759..644b1d526 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/styles/shape/Shape.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/checkbox/styles/shape/Shape.kt @@ -8,7 +8,7 @@ data class CheckboxShape( val size: Dp, val cornerRadius: Dp, val borderStroke: Dp, - val padding: PaddingValues = PaddingValues(Space.g2) + val padding: PaddingValues = PaddingValues(Space.xs5) ) { companion object } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt index fec542066..4b89c4468 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt @@ -21,7 +21,7 @@ class DividerStory : ComponentExample { @Composable override fun Content() { - Column(modifier = Modifier.padding(Space.g12)) { + Column(modifier = Modifier.padding(Space.sm)) { ComponentVariants( name = "Horizontal Divider", appearances = listOf( @@ -37,7 +37,7 @@ class DividerStory : ComponentExample { ) } - VerticalSpacer(Space.g24) + VerticalSpacer(Space.xl3) ComponentVariants( name = "Vertical Divider", @@ -49,7 +49,7 @@ class DividerStory : ComponentExample { ) ) { appearance: DividerAppearance, shape: DividerShape -> VerticalDivider( - modifier = Modifier.height(Space.g24), + modifier = Modifier.height(Space.xl3), appearance = appearance, shape = shape ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/stories/Component.kt index e2ee2c9f0..f595e7490 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/stories/Component.kt @@ -42,25 +42,25 @@ class InputStory : ComponentExample { Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = Space.g12), + .padding(horizontal = Space.sm), verticalAlignment = Alignment.CenterVertically ) { Text(modifier = Modifier.weight(Weight.full), text = "Enabled") - HorizontalSpacer(Space.g12) + HorizontalSpacer(Space.sm) Switch(checked = enabled, onCheckedChange = { enabled = it }) } - VerticalSpacer(Space.g8) + VerticalSpacer(Space.xs2) Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = Space.g12), + .padding(horizontal = Space.sm), verticalAlignment = Alignment.CenterVertically ) { Text(modifier = Modifier.weight(Weight.full), text = "Error") - HorizontalSpacer(Space.g12) + HorizontalSpacer(Space.sm) Switch(checked = isError, onCheckedChange = { isError = it }) } - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) ComponentVariants( name = "Input", diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/style/shape/Variants.kt index 504233cea..d905a784e 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/input/style/shape/Variants.kt @@ -14,8 +14,8 @@ fun InputShape.Companion.large(): InputShape = cornerRadius = CornerRadius.md, borderStroke = BorderStroke.tiny, paddings = PaddingValues( - vertical = Space.g12, - horizontal = Space.g16 + vertical = Space.sm, + horizontal = Space.lg ), textPaddings = PaddingValues(Space.zero), typography = TextStyle(fontSize = FontSize.md) @@ -27,11 +27,11 @@ fun InputShape.Companion.normal(): InputShape = cornerRadius = CornerRadius.xs3, borderStroke = BorderStroke.tiny, paddings = PaddingValues( - vertical = Space.g8, - horizontal = Space.g12 + vertical = Space.xs2, + horizontal = Space.sm ), textPaddings = PaddingValues( - vertical = Space.g4, + vertical = Space.xs4, horizontal = Space.zero ), typography = TextStyle(fontSize = FontSize.sm) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt index aa98e04b2..8fa97acfa 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/item/style/shape/Variants.kt @@ -15,11 +15,11 @@ fun TextListItemShape.Companion.default(): TextListItemShape = TextListItemShape( cornerRadius = CornerRadius.xl2, paddings = PaddingValues( - horizontal = Space.g12, - vertical = Space.g8 + horizontal = Space.sm, + vertical = Space.xs2 ), textPaddings = PaddingValues( - horizontal = Space.g4, + horizontal = Space.xs4, vertical = Space.zero ), typography = TextStyle( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt index 56f49b610..541dd58bd 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/style/shape/Variants.kt @@ -15,5 +15,5 @@ fun ListShape.Companion.default(): ListShape = fun ListShape.Companion.flowRow(): ListShape = ListShape( paddings = PaddingValues(Space.zero), - spacing = Space.g12 + spacing = Space.sm ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/dragHandle/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/dragHandle/style/shape/Variants.kt index 8fc610a60..ba0b726e5 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/dragHandle/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/dragHandle/style/shape/Variants.kt @@ -12,5 +12,5 @@ fun DragHandleShape.Companion.default(): DragHandleShape = height = DragHandleSize.height, width = DragHandleSize.width, cornerRadius = CornerRadius.xl6, - paddings = PaddingValues(top = Space.g8) + paddings = PaddingValues(top = Space.xs2) ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/stories/Component.kt index 8ce2156a5..8bb61c140 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/bottom/stories/Component.kt @@ -36,7 +36,7 @@ class BottomDialogStory : ComponentExample { Column( modifier = Modifier .fillMaxWidth() - .padding(Space.g12) + .padding(Space.sm) ) { Button( text = "Show Bottom Dialog", @@ -53,11 +53,11 @@ class BottomDialogStory : ComponentExample { Column( modifier = Modifier .fillMaxWidth() - .padding(Space.g16) + .padding(Space.lg) ) { Text(text = "This is a Bottom Dialog") Button( - modifier = Modifier.padding(top = Space.g12), + modifier = Modifier.padding(top = Space.sm), text = "Close", appearance = ButtonAppearance.blue(), shape = ButtonShape.normal(), diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/stories/Component.kt index 378158877..3d24bb26e 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/popup/stories/Component.kt @@ -29,7 +29,7 @@ class PopupStory : ComponentExample { Column( modifier = Modifier .fillMaxWidth() - .padding(Space.g12) + .padding(Space.sm) ) { Button( text = "Show Popup", @@ -45,11 +45,11 @@ class PopupStory : ComponentExample { Column( modifier = Modifier .fillMaxWidth() - .padding(Space.g16) + .padding(Space.lg) ) { Text(text = "This is a Popup Dialog") Button( - modifier = Modifier.padding(top = Space.g12), + modifier = Modifier.padding(top = Space.sm), text = "Close", appearance = ButtonAppearance.blue(), shape = ButtonShape.normal(), diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/style/shape/Variants.kt index ea3f71b06..628d0a712 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/modal/style/shape/Variants.kt @@ -12,8 +12,8 @@ fun ModalShape.Companion.popup(): ModalShape = ModalShape( shape = RoundedCornerShape(CornerRadius.zero), shadowElevation = Elevation.tiny, - paddings = PaddingValues(Space.g20), - spacers = PaddingValues(horizontal = Space.g24) + paddings = PaddingValues(Space.xl), + spacers = PaddingValues(horizontal = Space.xl3) ) @Composable @@ -25,10 +25,10 @@ fun ModalShape.Companion.bottom(): ModalShape = ), shadowElevation = Elevation.zero, paddings = PaddingValues( - top = Space.g4, - bottom = Space.g20, - start = Space.g20, - end = Space.g20 + top = Space.xs4, + bottom = Space.xl, + start = Space.xl, + end = Space.xl ), spacers = PaddingValues(horizontal = Space.zero) ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt index 712f9d2c8..a0377c750 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt @@ -54,7 +54,7 @@ class PaginationStory : ComponentExample { ) } - VerticalSpacer(Space.g24) + VerticalSpacer(Space.xl3) ComponentVariants( name = "Pagination with Carousel", diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt index de5c01750..6a6dad46a 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt @@ -11,7 +11,7 @@ fun PaginationShape.Companion.circle(): PaginationShape = PaginationShape( activeSize = DpSize(PaginationItemSize.medium, PaginationItemSize.medium), disabledSize = DpSize(PaginationItemSize.small, PaginationItemSize.small), - spacing = Space.g16, + spacing = Space.lg, cornerRadius = CornerRadius.full ) @@ -23,6 +23,6 @@ fun PaginationShape.Companion.rectangle(): PaginationShape = PaginationItemSize.rectangleWidth, PaginationItemSize.rectangleHeight ), - spacing = Space.g8, + spacing = Space.xs2, cornerRadius = CornerRadius.md ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt index 1dc10ccc5..132711a5d 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/styles/shape/Variants.kt @@ -17,7 +17,7 @@ fun PlaceholderShape.Companion.imageBox(): PlaceholderShape = fontWeight = FontWeight.bold, fontSize = FontSize.xl ), - spacing = Space.g8 + spacing = Space.xs2 ) @Composable @@ -29,5 +29,5 @@ fun PlaceholderShape.Companion.logo(): PlaceholderShape = fontWeight = FontWeight.bold, fontSize = FontSize.xl ), - spacing = Space.g8 + spacing = Space.xs2 ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/stories/Component.kt index 5015f5c81..5e83914cf 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/stories/Component.kt @@ -36,17 +36,17 @@ class SwitchStory : ComponentExample { Row( modifier = Modifier .fillMaxWidth() - .padding(horizontal = Space.g12), + .padding(horizontal = Space.sm), verticalAlignment = Alignment.CenterVertically ) { Text(modifier = Modifier.weight(Weight.full), text = "Enabled") - HorizontalSpacer(Space.g12) + HorizontalSpacer(Space.sm) androidx.compose.material.Switch( checked = enabled, onCheckedChange = { enabled = it } ) } - VerticalSpacer(Space.g8) + VerticalSpacer(Space.xs2) ComponentVariants( name = "Switch", appearances = listOf( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/styles/shape/Variants.kt index 15e5b743a..064ba64d8 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/switch/styles/shape/Variants.kt @@ -8,5 +8,5 @@ fun SwitchShape.Companion.medium(): SwitchShape = trackWidth = SwitchSize.defaultWidth, trackHeight = SwitchSize.defaultHeight, thumbSize = SwitchSize.defaultTrackSize, - thumbPadding = Space.g2 + thumbPadding = Space.xs5 ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt index c8cec1705..514a8c6de 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/styles/shape/Variants.kt @@ -13,7 +13,7 @@ import com.atls.hyperion.ui.theme.typography.LineHeights fun ToastShape.Companion.default(): ToastShape = ToastShape( cornerRadius = CornerRadius.xl2, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.sm), typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), borderStroke = BorderStroke.tiny ) @@ -22,7 +22,7 @@ fun ToastShape.Companion.default(): ToastShape = fun ToastShape.Companion.rounded(): ToastShape = ToastShape( cornerRadius = CornerRadius.xl4, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.sm), typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), borderStroke = BorderStroke.tiny ) @@ -31,7 +31,7 @@ fun ToastShape.Companion.rounded(): ToastShape = fun ToastShape.Companion.square(): ToastShape = ToastShape( cornerRadius = CornerRadius.zero, - paddings = PaddingValues(horizontal = Space.g16, vertical = Space.g12), + paddings = PaddingValues(horizontal = Space.lg, vertical = Space.sm), typography = TextStyle(fontSize = FontSize.md, lineHeight = LineHeights.md), borderStroke = BorderStroke.tiny ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt index 75fce1425..54e0fc8e3 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt @@ -14,6 +14,6 @@ fun TooltipShape.Companion.default() = width = CaretSize.caretWidth ), padding = PaddingValues( - vertical = Space.g8 + vertical = Space.xs2 ) ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt index cf04a9cf1..9519af6cf 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/Component.kt @@ -68,7 +68,7 @@ fun TopBar( } val horizontalPadding = - with(density) { maxOf(beforeWidthPx, afterWidthPx).toDp() } + Space.g12 + with(density) { maxOf(beforeWidthPx, afterWidthPx).toDp() } + Space.sm val rowHeight = with(density) { rowHeightPx.toDp() } Box( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt index ce0522c09..a09150791 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/topBar/style/shape/Variants.kt @@ -12,7 +12,7 @@ import com.atls.hyperion.ui.theme.typography.NunitoSansFontFamily fun TopBarShape.Companion.default(): TopBarShape = TopBarShape( paddings = PaddingValues( - horizontal = Space.g24, + horizontal = Space.xl3, vertical = Space.zero ), typography = TextStyle( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt index 054560fd8..5770099ff 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/fragments/datepicker/style/shape/Variants.kt @@ -31,12 +31,12 @@ fun DatePickerShape.Companion.default(): DatePickerShape = fontWeight = FontWeight.medium, ), cellSpacing = Space.zero, - cellPadding = Space.g8, + cellPadding = Space.xs2, cellShape = RoundedCornerShape(CornerRadius.xs2), - calendarPadding = PaddingValues(Space.g12), + calendarPadding = PaddingValues(Space.sm), headerIconSize = IconSize.medium, - headerSpacing = Space.g12, - headerHorizontalPadding = Space.g12, + headerSpacing = Space.sm, + headerHorizontalPadding = Space.sm, divider = DividerPosition.BOTTOM, dividerShape = DividerShape.default(), modalShape = ModalShape.popup() diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Link.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Link.kt index 76a9a9bf0..3e42b59f4 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Link.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Link.kt @@ -19,7 +19,7 @@ class LinkStory : ComponentExample { @Composable override fun Content() { Column( - modifier = Modifier.padding(Space.g16) + modifier = Modifier.padding(Space.lg) ) { Link( textDecoration = "Standard Blue Link", @@ -30,7 +30,7 @@ class LinkStory : ComponentExample { lineHeight = LineHeights.md ) ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Link( textDecoration = "Soft Blue Link", url = "https://google.com", @@ -40,7 +40,7 @@ class LinkStory : ComponentExample { lineHeight = LineHeights.md ) ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Link( textDecoration = "Small Gray Link", url = "https://google.com", diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Text.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Text.kt index f3e878db8..a6735798f 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Text.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/primitives/stories/Text.kt @@ -19,7 +19,7 @@ class TextStory : ComponentExample { @Composable override fun Content() { Column( - modifier = Modifier.padding(Space.g16) + modifier = Modifier.padding(Space.lg) ) { Text( text = "Heading XL", @@ -29,7 +29,7 @@ class TextStory : ComponentExample { lineHeight = LineHeights.xl4 ) ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Text( text = "Body Medium", color = Colors.Text.almostBlack, @@ -38,7 +38,7 @@ class TextStory : ComponentExample { lineHeight = LineHeights.md ) ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Text( text = "Small Caption", color = Colors.Text.gray, @@ -47,7 +47,7 @@ class TextStory : ComponentExample { lineHeight = LineHeights.xs ) ) - VerticalSpacer(Space.g12) + VerticalSpacer(Space.sm) Text( text = "Error Text", color = Colors.Text.red, diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt index 119557275..cfc9e92c5 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt @@ -5,16 +5,15 @@ import androidx.compose.ui.unit.dp object Space { val zero = 0.dp val g1 = 1.dp - val g2 = 2.dp - val g4 = 4.dp - val g6 = 6.dp - val g8 = 8.dp - val g10 = 10.dp - val g12 = 12.dp - val g14 = 14.dp - val g16 = 16.dp - val g17 = 17.dp - val g20 = 20.dp - val g22 = 22.dp - val g24 = 24.dp + val xs5 = 2.dp + val xs4 = 4.dp + val xs3 = 6.dp + val xs2 = 8.dp + val xs = 10.dp + val sm = 12.dp + val md = 14.dp + val lg = 16.dp + val xl = 20.dp + val xl2 = 22.dp + val xl3 = 24.dp } From 0ef35befea6df792e0207d06e3cdd8042621f86c Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Wed, 14 Jan 2026 02:41:26 +0300 Subject: [PATCH 40/47] refactor(common): move component tokens from theme --- .../BottomBarSize.kt => components/bottomBar/styles/Size.kt} | 2 +- .../hyperion/ui/components/bottomBar/styles/shape/Variants.kt | 2 +- .../pagination/style/Size.kt} | 2 +- .../hyperion/ui/components/pagination/style/shape/Variants.kt | 2 +- .../CaretSize.kt => components/tooltip/style/Size.kt} | 2 +- .../atls/hyperion/ui/components/tooltip/style/shape/Variants.kt | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{theme/tokens/components/BottomBarSize.kt => components/bottomBar/styles/Size.kt} (61%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{theme/tokens/components/PaginationItemSize.kt => components/pagination/style/Size.kt} (75%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/{theme/tokens/components/CaretSize.kt => components/tooltip/style/Size.kt} (67%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/Size.kt similarity index 61% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/Size.kt index d24412d8d..b93ecd0cd 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/BottomBarSize.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/Size.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.theme.tokens.components +package com.atls.hyperion.ui.components.bottomBar.styles import androidx.compose.ui.unit.dp diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt index 32b14ca7f..78ef9d600 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/styles/shape/Variants.kt @@ -3,8 +3,8 @@ package com.atls.hyperion.ui.components.bottomBar.styles.shape import androidx.compose.runtime.Composable import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.dp +import com.atls.hyperion.ui.components.bottomBar.styles.BottomBarSize import com.atls.hyperion.ui.primitives.icon.IconSize -import com.atls.hyperion.ui.theme.tokens.components.BottomBarSize import com.atls.hyperion.ui.theme.tokens.layout.BorderStroke import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius import com.atls.hyperion.ui.theme.tokens.layout.Elevation diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/Size.kt similarity index 75% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/Size.kt index 7b1ad0732..b53143dbf 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/PaginationItemSize.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/Size.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.theme.tokens.components +package com.atls.hyperion.ui.components.pagination.style import androidx.compose.ui.unit.dp diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt index 6a6dad46a..57ead6665 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/style/shape/Variants.kt @@ -2,7 +2,7 @@ package com.atls.hyperion.ui.components.pagination.style.shape import androidx.compose.runtime.Composable import androidx.compose.ui.unit.DpSize -import com.atls.hyperion.ui.theme.tokens.components.PaginationItemSize +import com.atls.hyperion.ui.components.pagination.style.PaginationItemSize import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius import com.atls.hyperion.ui.theme.tokens.layout.Space diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/Size.kt similarity index 67% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/Size.kt index 4b8f0e201..7f9f63f57 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/components/CaretSize.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/Size.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.theme.tokens.components +package com.atls.hyperion.ui.components.tooltip.style import androidx.compose.ui.unit.dp diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt index 54e0fc8e3..8e98a92d2 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/style/shape/Variants.kt @@ -2,7 +2,7 @@ package com.atls.hyperion.ui.components.tooltip.style.shape import androidx.compose.foundation.layout.PaddingValues import androidx.compose.ui.unit.DpSize -import com.atls.hyperion.ui.theme.tokens.components.CaretSize +import com.atls.hyperion.ui.components.tooltip.style.CaretSize import com.atls.hyperion.ui.theme.tokens.layout.CornerRadius import com.atls.hyperion.ui.theme.tokens.layout.Space From 8898340fa85b9179f4096cf8517e5556e23147d2 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Wed, 14 Jan 2026 02:44:26 +0300 Subject: [PATCH 41/47] fix(ui): bottom bar story --- .../ui/components/bottomBar/stories/Component.kt | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt index e7f51b08a..fb7df1c31 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt @@ -153,9 +153,9 @@ class BottomBarStory : ComponentExample { modifier = Modifier.padding(vertical = 8.dp) ) { RadioButton( - selected = tabPosition == Arrangement.Start, - onClick = { tabPosition = Arrangement.Start }) - Text("Start", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) + selected = tabPosition == Arrangement.SpaceAround, + onClick = { tabPosition = Arrangement.SpaceAround }) + Text("Space around", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) RadioButton( selected = tabPosition == Arrangement.Center, @@ -163,9 +163,9 @@ class BottomBarStory : ComponentExample { Text("Center", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) RadioButton( - selected = tabPosition == Arrangement.End, - onClick = { tabPosition = Arrangement.End }) - Text("End", modifier = Modifier.padding(start = 4.dp)) + selected = tabPosition == Arrangement.SpaceBetween, + onClick = { tabPosition = Arrangement.SpaceBetween }) + Text("Space between", modifier = Modifier.padding(start = 4.dp)) } } From 41bc9dba6947fcddcc404da210a4df8b6fac81b8 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 03:56:43 +0300 Subject: [PATCH 42/47] chore(ui): remove g1 space --- .../kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt index cfc9e92c5..d67696155 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/theme/tokens/layout/Spaces.kt @@ -4,7 +4,6 @@ import androidx.compose.ui.unit.dp object Space { val zero = 0.dp - val g1 = 1.dp val xs5 = 2.dp val xs4 = 4.dp val xs3 = 6.dp From 8521743975822dffab99fe9e16768aac83645f63 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 03:56:54 +0300 Subject: [PATCH 43/47] fix(ui): toast border --- .../com/atls/hyperion/ui/components/toast/Toast.kt | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt index 70298e06e..26dc90b78 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/toast/Toast.kt @@ -34,6 +34,11 @@ fun Toast( hostState = hostState ) { data -> Snackbar( + modifier = Modifier + .border( + BorderStroke(shape.borderStroke, appearance.borderColor), + RoundedCornerShape(shape.cornerRadius) + ), shape = RoundedCornerShape(shape.cornerRadius), containerColor = appearance.backgroundColor, contentColor = appearance.textColor, @@ -45,10 +50,7 @@ fun Toast( textAlign = TextAlign.Center, modifier = Modifier .background(appearance.backgroundColor) - .border( - BorderStroke(shape.borderStroke, appearance.borderColor), - RoundedCornerShape(shape.cornerRadius) - ) + .padding(shape.paddings) ) } From e4288c6bcc2b671e20e461b5d5d2c485273e41cd Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 03:57:54 +0300 Subject: [PATCH 44/47] refactor(progress): move ui utils to lib --- .../kotlin/com/atls/hyperion/ui/components/progress/Circle.kt | 4 ++-- .../kotlin/com/atls/hyperion/ui/components/progress/Line.kt | 4 ++-- .../hyperion/ui/components/progress/{ui => lib}/GetBrush.kt | 2 +- .../ui/components/progress/{ui => lib}/GetSolidColor.kt | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/{ui => lib}/GetBrush.kt (91%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/{ui => lib}/GetSolidColor.kt (89%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt index 5df831aba..7b9eae219 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Circle.kt @@ -16,13 +16,13 @@ import com.atls.hyperion.ui.components.progress.config.GAP_RIGHT_OFFSET import com.atls.hyperion.ui.components.progress.config.GAP_TOP_OFFSET import com.atls.hyperion.ui.components.progress.config.MAX_PERCENT import com.atls.hyperion.ui.components.progress.config.MIN_PERCENT +import com.atls.hyperion.ui.components.progress.lib.getBrush +import com.atls.hyperion.ui.components.progress.lib.getSolidColor import com.atls.hyperion.ui.components.progress.model.GapPosition import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance import com.atls.hyperion.ui.components.progress.styles.appearance.primary import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape import com.atls.hyperion.ui.components.progress.styles.shape.default -import com.atls.hyperion.ui.components.progress.ui.getBrush -import com.atls.hyperion.ui.components.progress.ui.getSolidColor @Composable fun CircleProgress( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt index 63ca96452..522cf0287 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/Line.kt @@ -12,11 +12,11 @@ import androidx.compose.ui.draw.clip import com.atls.hyperion.ui.components.progress.config.MAX_PERCENT import com.atls.hyperion.ui.components.progress.config.MAX_WEIGHT import com.atls.hyperion.ui.components.progress.config.MIN_WEIGHT +import com.atls.hyperion.ui.components.progress.lib.getBrush +import com.atls.hyperion.ui.components.progress.lib.getSolidColor import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape import com.atls.hyperion.ui.components.progress.styles.shape.default -import com.atls.hyperion.ui.components.progress.ui.getBrush -import com.atls.hyperion.ui.components.progress.ui.getSolidColor @Composable fun LineProgress( diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetBrush.kt similarity index 91% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetBrush.kt index 91e459ed4..7d67ece94 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetBrush.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetBrush.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.progress.ui +package com.atls.hyperion.ui.components.progress.lib import androidx.compose.ui.graphics.Brush import com.atls.hyperion.ui.components.progress.styles.appearance.Colors diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetSolidColor.kt similarity index 89% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetSolidColor.kt index 4566076f2..a0b724183 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/ui/GetSolidColor.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/lib/GetSolidColor.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.progress.ui +package com.atls.hyperion.ui.components.progress.lib import androidx.compose.ui.graphics.Color import com.atls.hyperion.ui.components.progress.styles.appearance.Colors From 1fe4a19c92c75525c77aaea1999213735ad2e541 Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 04:04:39 +0300 Subject: [PATCH 45/47] refactor(progress): storybook --- .../ui/components/progress/stories/Circle.kt | 37 ++++ .../components/progress/stories/Component.kt | 175 ++---------------- .../progress/stories/GradientExample.kt | 15 ++ .../ui/components/progress/stories/Line.kt | 34 ++++ .../progress/stories/PercentSlider.kt | 18 ++ .../progress/stories/SegmentedCircle.kt | 40 ++++ .../progress/stories/SegmentedLine.kt | 43 +++++ 7 files changed, 201 insertions(+), 161 deletions(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Circle.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/GradientExample.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Line.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/PercentSlider.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedCircle.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedLine.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Circle.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Circle.kt new file mode 100644 index 000000000..21f1d13fe --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Circle.kt @@ -0,0 +1,37 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.progress.CircleProgress +import com.atls.hyperion.ui.components.progress.model.GapPosition +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.styles.shape.thick +import com.atls.hyperion.ui.primitives.layout.column.Column + +@Composable +fun CircleProgressVariants(percent: Float) { + ComponentVariants( + name = "Circle Progress", + appearances = listOf( + "Primary" to { ProgressAppearance.primary() }, + "Gradient" to { ProgressAppearance.gradientExample() } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() }) + ) { appearance, shape -> + Column(horizontalAlignment = Alignment.CenterHorizontally) { + CircleProgress( + percent = percent, + appearance = appearance, + shape = shape, + gapDegree = 60f, + gapPosition = GapPosition.Top + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt index 4aaac1409..7f1d11c59 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Component.kt @@ -1,37 +1,19 @@ package com.atls.hyperion.ui.components.progress.stories import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material3.Slider -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Brush -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.progress.CircleProgress -import com.atls.hyperion.ui.components.progress.LineProgress -import com.atls.hyperion.ui.components.progress.model.GapPosition -import com.atls.hyperion.ui.components.progress.styles.appearance.Colors -import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance -import com.atls.hyperion.ui.components.progress.styles.appearance.primary -import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape -import com.atls.hyperion.ui.components.progress.styles.shape.default -import com.atls.hyperion.ui.components.progress.styles.shape.thick -import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors +import com.atls.hyperion.ui.primitives.VerticalSpacer +import com.atls.hyperion.ui.theme.tokens.layout.Space class ProgressStory : ComponentExample { override val name: String = "Progress" @@ -40,153 +22,24 @@ class ProgressStory : ComponentExample { override fun Content() { var percent by remember { mutableStateOf(40f) } - Column( - modifier = Modifier - .fillMaxSize() - ) { - Column( - modifier = Modifier - .fillMaxWidth() - .padding(16.dp) - ) { - Text("Percent: ${percent.toInt()}%") - Slider( - value = percent, - onValueChange = { percent = it }, - valueRange = 0f..100f - ) - } - - Spacer(modifier = Modifier.height(16.dp)) - + Column(modifier = Modifier.fillMaxSize()) { + PercentSlider(percent) { percent = it } + VerticalSpacer(Space.md) Column( modifier = Modifier .fillMaxSize() .verticalScroll(rememberScrollState()) - .padding(horizontal = 16.dp) + .padding(horizontal = Space.lg) ) { - ComponentVariants( - name = "Line Progress", - appearances = listOf( - "Primary" to { ProgressAppearance.primary() }, - "Gradient" to { ProgressAppearance.gradientExample() } - ), - shapes = listOf( - "Default" to { ProgressShape.default() }, - "Thick" to { ProgressShape.thick() } - ) - ) { appearance, shape -> - LineProgress( - percent = percent, - appearance = appearance, - shape = shape, - modifier = Modifier.fillMaxWidth() - ) - } - - Spacer(modifier = Modifier.height(16.dp)) - val lineSegment1 = percent / 3 - val lineSegment2 = percent / 3 - val lineSegment3 = percent / 3 - val linePercents = listOf(lineSegment1, lineSegment2, lineSegment3) - val colors = listOf( - ThemeColors.Palette.red, - ThemeColors.Palette.blueProtective, - ThemeColors.Palette.green - ) - val multiColors = - Colors.Multiple.Solid(strokeColors = colors, trailColor = ThemeColors.Palette.gray) - - ComponentVariants( - name = "Segmented Line Progress", - appearances = listOf( - "Multi-color" to { ProgressAppearance.primary().copy(colors = multiColors) } - ), - shapes = listOf( - "Default" to { ProgressShape.default() }, - "Thick" to { ProgressShape.thick() } - ) - ) { appearance, shape -> - LineProgress( - percents = linePercents, - appearance = appearance, - shape = shape, - modifier = Modifier.fillMaxWidth() - ) - } - - Spacer(modifier = Modifier.height(24.dp)) - - ComponentVariants( - name = "Circle Progress", - appearances = listOf( - "Primary" to { ProgressAppearance.primary() }, - "Gradient" to { ProgressAppearance.gradientExample() } - ), - shapes = listOf( - "Default" to { ProgressShape.default() }, - "Thick" to { ProgressShape.thick() } - ) - ) { appearance, shape -> - Column( - horizontalAlignment = Alignment.CenterHorizontally - ) { - CircleProgress( - percent = percent, - appearance = appearance, - shape = shape, - gapDegree = 60f, - gapPosition = GapPosition.Top - ) - } - } - - Spacer(modifier = Modifier.height(16.dp)) - val segment1 = percent / 3 - val segment2 = percent / 3 - val segment3 = percent / 3 - val circlePercents = listOf(segment1, segment2, segment3) - val circleColors = listOf( - ThemeColors.Palette.red, - ThemeColors.Palette.blueProtective, - ThemeColors.Palette.green - ) - val circleMultiColors = - Colors.Multiple.Solid(strokeColors = circleColors, trailColor = ThemeColors.Palette.gray) - - ComponentVariants( - name = "Segmented Circle Progress", - appearances = listOf( - "Multi-color" to { ProgressAppearance.primary().copy(colors = circleMultiColors) } - ), - shapes = listOf( - "Default" to { ProgressShape.default() }, - "Thick" to { ProgressShape.thick() } - ) - ) { appearance, shape -> - Column( - horizontalAlignment = Alignment.CenterHorizontally - ) { - CircleProgress( - percents = circlePercents, - appearance = appearance, - shape = shape - ) - } - } - - Spacer(modifier = Modifier.height(24.dp)) + LineProgressVariants(percent) + VerticalSpacer(Space.lg) + SegmentedLineProgressVariants(percent) + VerticalSpacer(Space.xl3) + CircleProgressVariants(percent) + VerticalSpacer(Space.lg) + SegmentedCircleProgressVariants(percent) + VerticalSpacer(Space.xl3) } } } } - -fun ProgressAppearance.Companion.gradientExample(): ProgressAppearance = - ProgressAppearance( - colors = Colors.Single.Gradient( - strokeBrush = Brush.horizontalGradient( - colors = listOf(Color.Magenta, Color.Cyan) - ), - trailColor = ThemeColors.Palette.gray - ) - ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/GradientExample.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/GradientExample.kt new file mode 100644 index 000000000..82658143f --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/GradientExample.kt @@ -0,0 +1,15 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +fun ProgressAppearance.Companion.gradientExample(): ProgressAppearance = + ProgressAppearance( + colors = Colors.Single.Gradient( + strokeBrush = Brush.horizontalGradient(colors = listOf(Color.Magenta, Color.Cyan)), + trailColor = ThemeColors.Palette.gray + ) + ) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Line.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Line.kt new file mode 100644 index 000000000..8f37076db --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/Line.kt @@ -0,0 +1,34 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.progress.LineProgress +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.styles.shape.thick + +@Composable +fun LineProgressVariants(percent: Float) { + ComponentVariants( + name = "Line Progress", + appearances = listOf( + "Primary" to { ProgressAppearance.primary() }, + "Gradient" to { ProgressAppearance.gradientExample() } + ), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() } + ) + ) { appearance, shape -> + LineProgress( + percent = percent, + appearance = appearance, + shape = shape, + modifier = Modifier.fillMaxWidth() + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/PercentSlider.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/PercentSlider.kt new file mode 100644 index 000000000..a03a72e33 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/PercentSlider.kt @@ -0,0 +1,18 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material.Slider +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.ui.primitives.layout.column.Column +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun PercentSlider(percent: Float, onChange: (Float) -> Unit) { + Column(modifier = Modifier.fillMaxWidth().padding(Space.lg)) { + Text("Percent: ${percent.toInt()}%") + Slider(value = percent, onValueChange = onChange, valueRange = 0f..100f) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedCircle.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedCircle.kt new file mode 100644 index 000000000..5f83e09ac --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedCircle.kt @@ -0,0 +1,40 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.progress.CircleProgress +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.styles.shape.thick +import com.atls.hyperion.ui.primitives.layout.column.Column +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +@Composable +fun SegmentedCircleProgressVariants(percent: Float) { + val segments = List(3) { percent / 3 } + val multiColors = Colors.Multiple.Solid( + strokeColors = listOf( + ThemeColors.Palette.red, + ThemeColors.Palette.blueProtective, + ThemeColors.Palette.green + ), + trailColor = ThemeColors.Palette.gray + ) + ComponentVariants( + name = "Segmented Circle Progress", + appearances = listOf("Multi-color" to { + ProgressAppearance.primary().copy(colors = multiColors) + }), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() }) + ) { appearance, shape -> + Column(horizontalAlignment = Alignment.CenterHorizontally) { + CircleProgress(percents = segments, appearance = appearance, shape = shape) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedLine.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedLine.kt new file mode 100644 index 000000000..c93b68544 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/progress/stories/SegmentedLine.kt @@ -0,0 +1,43 @@ +package com.atls.hyperion.ui.components.progress.stories + +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.progress.LineProgress +import com.atls.hyperion.ui.components.progress.styles.appearance.Colors +import com.atls.hyperion.ui.components.progress.styles.appearance.ProgressAppearance +import com.atls.hyperion.ui.components.progress.styles.appearance.primary +import com.atls.hyperion.ui.components.progress.styles.shape.ProgressShape +import com.atls.hyperion.ui.components.progress.styles.shape.default +import com.atls.hyperion.ui.components.progress.styles.shape.thick +import com.atls.hyperion.ui.theme.tokens.colors.Colors as ThemeColors + +@Composable +fun SegmentedLineProgressVariants(percent: Float) { + val segments = List(3) { percent / 3 } + val multiColors = Colors.Multiple.Solid( + strokeColors = listOf( + ThemeColors.Palette.red, + ThemeColors.Palette.blueProtective, + ThemeColors.Palette.green + ), + trailColor = ThemeColors.Palette.gray + ) + ComponentVariants( + name = "Segmented Line Progress", + appearances = listOf("Multi-color" to { + ProgressAppearance.primary().copy(colors = multiColors) + }), + shapes = listOf( + "Default" to { ProgressShape.default() }, + "Thick" to { ProgressShape.thick() }) + ) { appearance, shape -> + LineProgress( + percents = segments, + appearance = appearance, + shape = shape, + modifier = Modifier.fillMaxWidth() + ) + } +} From f227af545b04fa981b3b6126865ec51ffd6e77aa Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 04:17:36 +0300 Subject: [PATCH 46/47] refactor(common): stories --- .../components/bottomBar/stories/Component.kt | 166 ++---------------- .../components/bottomBar/stories/Painters.kt | 91 ++++++++++ .../bottomBar/stories/WithLabels.kt | 43 +++++ .../bottomBar/stories/WithoutLabels.kt | 43 +++++ .../components/carousel/stories/Component.kt | 106 +---------- .../ui/components/carousel/stories/Default.kt | 46 +++++ .../carousel/stories/InfiniteOverlay.kt | 52 ++++++ .../carousel/stories/WithPagination.kt | 49 ++++++ .../stories/{DividerStory.kt => Component.kt} | 0 .../ui/components/list/stories/Component.kt | 122 +------------ .../components/list/stories/FlowSelectable.kt | 63 +++++++ .../ui/components/list/stories/Selectable.kt | 60 +++++++ .../ui/components/list/stories/Vertical.kt | 37 ++++ .../components/pagination/stories/Carousel.kt | 50 ++++++ .../pagination/stories/ClickablePagination.kt | 38 ++++ .../pagination/stories/Component.kt | 70 +------- .../placeholder/stories/Component.kt | 66 +------ .../placeholder/stories/ImageBox.kt | 32 ++++ .../ui/components/placeholder/stories/Logo.kt | 47 +++++ .../components/tooltip/stories/Component.kt | 44 +---- .../ui/components/tooltip/stories/Text.kt | 50 ++++++ 21 files changed, 733 insertions(+), 542 deletions(-) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Painters.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithLabels.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithoutLabels.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Default.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/InfiniteOverlay.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/WithPagination.kt rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/{DividerStory.kt => Component.kt} (100%) create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/FlowSelectable.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Selectable.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Vertical.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Carousel.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/ClickablePagination.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/ImageBox.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Logo.kt create mode 100644 mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Text.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt index fb7df1c31..d541ddc64 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt @@ -18,30 +18,9 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.geometry.Size -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.drawscope.DrawScope -import androidx.compose.ui.graphics.drawscope.Stroke -import androidx.compose.ui.graphics.painter.Painter -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.bottomBar.BottomBar import com.atls.hyperion.ui.components.bottomBar.model.BottomBarItem -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.dark -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.darkWithoutLabel -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primary -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primaryWithoutLabel -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondary -import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondaryWithoutLabel -import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithLabel -import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithoutLabel -import com.atls.hyperion.ui.components.bottomBar.styles.shape.default -import com.atls.hyperion.ui.components.bottomBar.styles.shape.elevated -import com.atls.hyperion.ui.components.bottomBar.styles.shape.rounded -import kotlin.math.PI +import com.atls.hyperion.ui.theme.tokens.layout.Space class BottomBarStory : ComponentExample { override val name: String = "BottomBar" @@ -51,89 +30,8 @@ class BottomBarStory : ComponentExample { Column( modifier = Modifier .verticalScroll(rememberScrollState()) - .padding(bottom = 80.dp) + .padding(bottom = Space.xl3) ) { - val homePainter = object : Painter() { - override val intrinsicSize = Size(24f, 24f) - override fun DrawScope.onDraw() { - drawRect( - color = Color.Black, - topLeft = Offset(size.width * 0.2f, size.height * 0.3f), - size = Size(size.width * 0.6f, size.height * 0.6f) - ) - drawLine( - color = Color.Black, - start = Offset(size.width * 0.2f, size.height * 0.3f), - end = Offset(size.width * 0.5f, size.height * 0.1f) - ) - drawLine( - color = Color.Black, - start = Offset(size.width * 0.5f, size.height * 0.1f), - end = Offset(size.width * 0.8f, size.height * 0.3f) - ) - } - } - - val favoritePainter = object : Painter() { - override val intrinsicSize = Size(24f, 24f) - override fun DrawScope.onDraw() { - val cx = size.width / 2 - val cy = size.height / 2 - val r = size.width / 3 - drawCircle( - color = Color.Black, - center = Offset(cx, cy), - radius = r, - style = Stroke(2f) - ) - drawCircle(color = Color.Black, center = Offset(cx, cy), radius = r / 2) - } - } - - val profilePainter = object : Painter() { - override val intrinsicSize = Size(24f, 24f) - override fun DrawScope.onDraw() { - drawCircle( - color = Color.Black, - center = Offset(size.width / 2, size.height * 0.35f), - radius = size.width * 0.2f - ) - drawRect( - color = Color.Black, - topLeft = Offset(size.width * 0.3f, size.height * 0.5f), - size = Size(size.width * 0.4f, size.height * 0.4f) - ) - } - } - - val settingsPainter = object : Painter() { - override val intrinsicSize = Size(24f, 24f) - override fun DrawScope.onDraw() { - drawCircle( - color = Color.Black, - center = Offset(size.width / 2, size.height / 2), - radius = size.width * 0.3f, - style = Stroke(2f) - ) - for (i in 0 until 8) { - val angle = PI * i / 4 - val sx = - size.width / 2 + (size.width * 0.35f * kotlin.math.cos(angle)).toFloat() - val sy = - size.height / 2 + (size.height * 0.35f * kotlin.math.sin(angle)).toFloat() - val ex = - size.width / 2 + (size.width * 0.45f * kotlin.math.cos(angle)).toFloat() - val ey = - size.height / 2 + (size.height * 0.45f * kotlin.math.sin(angle)).toFloat() - drawLine( - color = Color.Black, - start = Offset(sx, sy), - end = Offset(ex, ey), - strokeWidth = 2f - ) - } - } - } val itemsWithLabels = listOf( BottomBarItem(homePainter, "Home"), @@ -146,78 +44,34 @@ class BottomBarStory : ComponentExample { var tabPosition by remember { mutableStateOf(Arrangement.Center) } - Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) { + Column(modifier = Modifier.fillMaxWidth().padding(Space.md)) { Text("Tab Position:") Row( verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.padding(vertical = 8.dp) + modifier = Modifier.padding(vertical = Space.sm) ) { RadioButton( selected = tabPosition == Arrangement.SpaceAround, onClick = { tabPosition = Arrangement.SpaceAround }) - Text("Space around", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) + Text("Space around", modifier = Modifier.padding(start = Space.xs, end = Space.sm)) RadioButton( selected = tabPosition == Arrangement.Center, onClick = { tabPosition = Arrangement.Center }) - Text("Center", modifier = Modifier.padding(start = 4.dp, end = 8.dp)) + Text("Center", modifier = Modifier.padding(start = Space.xs, end = Space.sm)) RadioButton( selected = tabPosition == Arrangement.SpaceBetween, onClick = { tabPosition = Arrangement.SpaceBetween }) - Text("Space between", modifier = Modifier.padding(start = 4.dp)) + Text("Space between", modifier = Modifier.padding(start = Space.xs)) } } - ComponentVariants( - name = "BottomBar (With Labels)", - appearances = listOf( - "Primary" to { BottomBarAppearance.primary() }, - "Secondary" to { BottomBarAppearance.secondary() }, - "Dark" to { BottomBarAppearance.dark() } - ), - shapes = listOf( - "Default" to { WithLabel.default() }, - "Elevated" to { WithLabel.elevated() }, - "Rounded" to { WithLabel.rounded() } - ) - ) { appearance, shape -> - val selectedIndex = remember { mutableStateOf(0) } - BottomBar( - itemsWithLabels, - selectedIndex.value, - { selectedIndex.value = it }, - appearance = appearance, - shape = shape, - tabArrangement = tabPosition - ) - } + BottomBarWithLabelsVariants(itemsWithLabels, tabPosition) - Spacer(Modifier.height(32.dp)) + Spacer(Modifier.height(Space.xl2)) - ComponentVariants( - name = "BottomBar (Without Labels)", - appearances = listOf( - "Primary" to { BottomBarAppearance.primaryWithoutLabel() }, - "Secondary" to { BottomBarAppearance.secondaryWithoutLabel() }, - "Dark" to { BottomBarAppearance.darkWithoutLabel() } - ), - shapes = listOf( - "Default" to { WithoutLabel.default() }, - "Rounded" to { WithoutLabel.rounded() }, - "Elevated" to { WithoutLabel.elevated() } - ) - ) { appearance, shape -> - val selectedIndex = remember { mutableStateOf(0) } - BottomBar( - itemsWithoutLabels, - selectedIndex.value, - { selectedIndex.value = it }, - appearance = appearance, - shape = shape, - tabArrangement = tabPosition - ) - } + BottomBarWithoutLabelsVariants(itemsWithoutLabels, tabPosition) } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Painters.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Painters.kt new file mode 100644 index 000000000..ab6e31085 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Painters.kt @@ -0,0 +1,91 @@ +package com.atls.hyperion.ui.components.bottomBar.stories + +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.drawscope.DrawScope +import androidx.compose.ui.graphics.drawscope.Stroke +import androidx.compose.ui.graphics.painter.Painter +import kotlin.math.PI + +val homePainter: Painter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawRect( + color = Color.Black, + topLeft = Offset(size.width * 0.2f, size.height * 0.3f), + size = Size(size.width * 0.6f, size.height * 0.6f) + ) + drawLine( + color = Color.Black, + start = Offset(size.width * 0.2f, size.height * 0.3f), + end = Offset(size.width * 0.5f, size.height * 0.1f) + ) + drawLine( + color = Color.Black, + start = Offset(size.width * 0.5f, size.height * 0.1f), + end = Offset(size.width * 0.8f, size.height * 0.3f) + ) + } +} + +val favoritePainter: Painter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + val cx = size.width / 2 + val cy = size.height / 2 + val r = size.width / 3 + drawCircle( + color = Color.Black, + center = Offset(cx, cy), + radius = r, + style = Stroke(2f) + ) + drawCircle(color = Color.Black, center = Offset(cx, cy), radius = r / 2) + } +} + +val profilePainter: Painter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawCircle( + color = Color.Black, + center = Offset(size.width / 2, size.height * 0.35f), + radius = size.width * 0.2f + ) + drawRect( + color = Color.Black, + topLeft = Offset(size.width * 0.3f, size.height * 0.5f), + size = Size(size.width * 0.4f, size.height * 0.4f) + ) + } +} + +val settingsPainter: Painter = object : Painter() { + override val intrinsicSize = Size(24f, 24f) + override fun DrawScope.onDraw() { + drawCircle( + color = Color.Black, + center = Offset(size.width / 2, size.height / 2), + radius = size.width * 0.3f, + style = Stroke(2f) + ) + for (i in 0 until 8) { + val angle = PI * i / 4 + val sx = + size.width / 2 + (size.width * 0.35f * kotlin.math.cos(angle)).toFloat() + val sy = + size.height / 2 + (size.height * 0.35f * kotlin.math.sin(angle)).toFloat() + val ex = + size.width / 2 + (size.width * 0.45f * kotlin.math.cos(angle)).toFloat() + val ey = + size.height / 2 + (size.height * 0.45f * kotlin.math.sin(angle)).toFloat() + drawLine( + color = Color.Black, + start = Offset(sx, sy), + end = Offset(ex, ey), + strokeWidth = 2f + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithLabels.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithLabels.kt new file mode 100644 index 000000000..9461072f0 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithLabels.kt @@ -0,0 +1,43 @@ +package com.atls.hyperion.ui.components.bottomBar.stories + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.bottomBar.BottomBar +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.dark +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primary +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondary +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.default +import com.atls.hyperion.ui.components.bottomBar.styles.shape.elevated +import com.atls.hyperion.ui.components.bottomBar.styles.shape.rounded + +@Composable +fun BottomBarWithLabelsVariants(items: List, tabPosition: Arrangement.Horizontal) { + ComponentVariants( + name = "BottomBar (With Labels)", + appearances = listOf( + "Primary" to { BottomBarAppearance.primary() }, + "Secondary" to { BottomBarAppearance.secondary() }, + "Dark" to { BottomBarAppearance.dark() } + ), + shapes = listOf( + "Default" to { WithLabel.default() }, + "Elevated" to { WithLabel.elevated() }, + "Rounded" to { WithLabel.rounded() } + ) + ) { appearance, shape -> + val selectedIndex = remember { mutableStateOf(0) } + BottomBar( + items, + selectedIndex.value, + { selectedIndex.value = it }, + appearance = appearance, + shape = shape, + tabArrangement = tabPosition + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithoutLabels.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithoutLabels.kt new file mode 100644 index 000000000..c7148c4aa --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/WithoutLabels.kt @@ -0,0 +1,43 @@ +package com.atls.hyperion.ui.components.bottomBar.stories + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.bottomBar.BottomBar +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.BottomBarAppearance +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.darkWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.primaryWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.appearance.secondaryWithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.BottomBarShape.WithoutLabel +import com.atls.hyperion.ui.components.bottomBar.styles.shape.default +import com.atls.hyperion.ui.components.bottomBar.styles.shape.elevated +import com.atls.hyperion.ui.components.bottomBar.styles.shape.rounded + +@Composable +fun BottomBarWithoutLabelsVariants(items: List, tabPosition: Arrangement.Horizontal) { + ComponentVariants( + name = "BottomBar (Without Labels)", + appearances = listOf( + "Primary" to { BottomBarAppearance.primaryWithoutLabel() }, + "Secondary" to { BottomBarAppearance.secondaryWithoutLabel() }, + "Dark" to { BottomBarAppearance.darkWithoutLabel() } + ), + shapes = listOf( + "Default" to { WithoutLabel.default() }, + "Rounded" to { WithoutLabel.rounded() }, + "Elevated" to { WithoutLabel.elevated() } + ) + ) { appearance, shape -> + val selectedIndex = remember { mutableStateOf(0) } + BottomBar( + items, + selectedIndex.value, + { selectedIndex.value = it }, + appearance = appearance, + shape = shape, + tabArrangement = tabPosition + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt index 9e1dfb7b0..6e9e41c3e 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Component.kt @@ -1,32 +1,11 @@ package com.atls.hyperion.ui.components.carousel.stories -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf -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.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.carousel.Carousel -import com.atls.hyperion.ui.components.carousel.CarouselWithPagination -import com.atls.hyperion.ui.components.carousel.InfiniteOverlayCarousel -import com.atls.hyperion.ui.components.carousel.style.shape.CarouselShape -import com.atls.hyperion.ui.components.carousel.style.shape.default -import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance -import com.atls.hyperion.ui.components.pagination.style.appearance.default -import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape -import com.atls.hyperion.ui.components.pagination.style.shape.circle class CarouselStory : ComponentExample { override val name: String = "Carousel" @@ -36,88 +15,9 @@ class CarouselStory : ComponentExample { Column( modifier = Modifier.verticalScroll(rememberScrollState()) ) { - ComponentVariants( - name = "Carousel", - appearances = listOf( - "Default" to { Unit } - ), - shapes = listOf( - "Default" to { CarouselShape.default() } - ) - ) { _, shape -> - Carousel( - pageCount = 5, - shape = shape, - modifier = Modifier.height(200.dp) - ) { page: Int -> - CarouselItem(page) - } - } - - ComponentVariants( - name = "Carousel With Pagination", - appearances = listOf( - "Default" to { PaginationAppearance.default() } - ), - shapes = listOf( - "Circle" to { PaginationShape.circle() } - ) - ) { appearance, shape -> - CarouselWithPagination( - pageCount = 5, - paginationAppearance = appearance, - paginationShape = shape, - modifier = Modifier.height(200.dp) - ) { page: Int -> - CarouselItem(page) - } - } - - val centerIndexState = remember { mutableStateOf(0) } - ComponentVariants( - name = "Infinite Overlay Carousel", - appearances = listOf( - "Default" to { Unit } - ), - shapes = listOf( - "Default" to { Unit } - ) - ) { _, _ -> - InfiniteOverlayCarousel( - items = listOf(Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan), - baseCardSize = 200.dp, - sizeStep = 20.dp, - visibleItemCount = 3, - alphaStep = 0.2f, - minAlpha = 0.5f, - centerIndexState = centerIndexState, - modifier = Modifier.fillMaxWidth().height(220.dp) - ) { color, size, alpha, _ -> - Box( - modifier = Modifier - .height(size) - .fillMaxWidth() - .padding(horizontal = 8.dp) - .background(color.copy(alpha = alpha)), - contentAlignment = Alignment.Center - ) { - Text("Item", color = Color.White) - } - } - } - } - } - - @Composable - private fun CarouselItem(page: Int) { - Box( - modifier = Modifier - .fillMaxWidth() - .height(200.dp) - .background(if (page % 2 == 0) Color.LightGray else Color.Gray), - contentAlignment = Alignment.Center - ) { - Text(text = "Page $page") + DefaultCarouselVariants() + CarouselWithPaginationVariants() + InfiniteOverlayCarouselVariants() } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Default.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Default.kt new file mode 100644 index 000000000..d0eed23b4 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/Default.kt @@ -0,0 +1,46 @@ +package com.atls.hyperion.ui.components.carousel.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.Carousel +import com.atls.hyperion.ui.components.carousel.style.shape.CarouselShape +import com.atls.hyperion.ui.components.carousel.style.shape.default +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun DefaultCarouselVariants() { + ComponentVariants( + name = "Carousel", + appearances = listOf( + "Default" to { Unit } + ), + shapes = listOf( + "Default" to { CarouselShape.default() } + ) + ) { _, shape -> + Carousel( + pageCount = 5, + shape = shape, + modifier = Modifier.height(Space.xl3) + ) { page: Int -> + CarouselItem(page) + } + } +} + +@Composable +private fun CarouselItem(page: Int) { + androidx.compose.foundation.layout.Box( + modifier = Modifier + .fillMaxWidth() + .height(Space.xl3) + .background(if (page % 2 == 0) androidx.compose.ui.graphics.Color.LightGray else androidx.compose.ui.graphics.Color.Gray), + contentAlignment = androidx.compose.ui.Alignment.Center + ) { + androidx.compose.material.Text(text = "Page $page") + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/InfiniteOverlay.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/InfiniteOverlay.kt new file mode 100644 index 000000000..096a5aa05 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/InfiniteOverlay.kt @@ -0,0 +1,52 @@ +package com.atls.hyperion.ui.components.carousel.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.InfiniteOverlayCarousel +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun InfiniteOverlayCarouselVariants() { + val centerIndexState = remember { mutableStateOf(0) } + ComponentVariants( + name = "Infinite Overlay Carousel", + appearances = listOf( + "Default" to { Unit } + ), + shapes = listOf( + "Default" to { Unit } + ) + ) { _, _ -> + InfiniteOverlayCarousel( + items = listOf(Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan), + baseCardSize = Space.xl3, + sizeStep = Space.lg, + visibleItemCount = 3, + alphaStep = 0.2f, + minAlpha = 0.5f, + centerIndexState = centerIndexState, + modifier = Modifier.fillMaxWidth().height(Space.xl3) + ) { color, size, alpha, _ -> + Box( + modifier = Modifier + .height(size) + .fillMaxWidth() + .padding(horizontal = Space.sm) + .background(color.copy(alpha = alpha)), + contentAlignment = Alignment.Center + ) { + androidx.compose.material.Text("Item", color = Color.White) + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/WithPagination.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/WithPagination.kt new file mode 100644 index 000000000..753f18bb0 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/stories/WithPagination.kt @@ -0,0 +1,49 @@ +package com.atls.hyperion.ui.components.carousel.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.CarouselWithPagination +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun CarouselWithPaginationVariants() { + ComponentVariants( + name = "Carousel With Pagination", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() } + ) + ) { appearance, shape -> + CarouselWithPagination( + pageCount = 5, + paginationAppearance = appearance, + paginationShape = shape, + modifier = Modifier.height(Space.xl3) + ) { page: Int -> + CarouselItem(page) + } + } +} + +@Composable +private fun CarouselItem(page: Int) { + androidx.compose.foundation.layout.Box( + modifier = Modifier + .fillMaxWidth() + .height(Space.xl3) + .background(if (page % 2 == 0) androidx.compose.ui.graphics.Color.LightGray else androidx.compose.ui.graphics.Color.Gray), + contentAlignment = androidx.compose.ui.Alignment.Center + ) { + androidx.compose.material.Text(text = "Page $page") + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/Component.kt similarity index 100% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/DividerStory.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/divider/stories/Component.kt diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt index f92240618..3696959e2 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Component.kt @@ -1,34 +1,12 @@ package com.atls.hyperion.ui.components.list.stories import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.list.FlowSelectableList -import com.atls.hyperion.ui.components.list.SelectableList -import com.atls.hyperion.ui.components.list.VerticalList -import com.atls.hyperion.ui.components.list.item.TextListItem -import com.atls.hyperion.ui.components.list.item.model.ListItemState -import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance -import com.atls.hyperion.ui.components.list.item.style.appearance.default -import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape -import com.atls.hyperion.ui.components.list.item.style.shape.default -import com.atls.hyperion.ui.components.list.model.SelectionState -import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance -import com.atls.hyperion.ui.components.list.style.appearance.default -import com.atls.hyperion.ui.components.list.style.shape.ListShape -import com.atls.hyperion.ui.components.list.style.shape.flowRow -import com.atls.hyperion.ui.primitives.VerticalSpacer +import com.atls.hyperion.ui.theme.tokens.layout.Space class ListStories : ComponentExample { override val name: String = "Lists" @@ -36,103 +14,17 @@ class ListStories : ComponentExample { @Composable override fun Content() { Column { - val simpleItems = listOf("Item A", "Item B", "Item C") - ComponentVariants( - name = "VerticalList", - appearances = listOf("Default" to { ListAppearance.default() }), - shapes = listOf("Default" to { ListShape.flowRow() }) - ) { appearance, shape -> - VerticalList(items = simpleItems) { item -> - TextListItem( - text = item, - state = ListItemState.Unselected, - onClick = {}, - appearance = TextListItemAppearance.default(), - shape = TextListItemShape.default() - ) - VerticalSpacer(shape.spacing) - } - } + VerticalListVariants() - Spacer(Modifier.height(16.dp)) + Spacer(Modifier.height(Space.md)) - val selectableItems = listOf("Item 1", "Item 2") - var selectionState by remember { - mutableStateOf>( - SelectionState.Multiple( - emptySet() - ) - ) - } - ComponentVariants( - name = "SelectableList", - appearances = listOf("Default" to { ListAppearance.default() }), - shapes = listOf("FlowRow" to { ListShape.flowRow() }) - ) { appearance, shape -> - SelectableList( - items = selectableItems.map { id -> - id to @Composable { onClick: () -> Unit, isSelected: Boolean -> - TextListItem( - text = id, - state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, - onClick = onClick, - appearance = TextListItemAppearance.default(), - shape = TextListItemShape.default() - ) - } - }, - selectionState = selectionState, - onItemClick = { id -> - val current = - (selectionState as SelectionState.Multiple).selectedItems.toMutableSet() - if (current.contains(id)) current.remove(id) else current.add(id) - selectionState = SelectionState.Multiple(current) - }, - appearance = appearance, - shape = shape - ) - } + SelectableListVariants() - Spacer(Modifier.height(16.dp)) + Spacer(Modifier.height(Space.md)) - val flowItems = listOf("Apple", "Banana", "Orange", "Mango", "Peach", "Grapes") - var flowSelectionState by remember { - mutableStateOf>( - SelectionState.Multiple(emptySet()) - ) - } + FlowSelectableListVariants() - ComponentVariants( - name = "FlowSelectableList", - appearances = listOf("Default" to { ListAppearance.default() }), - shapes = listOf("FlowRow" to { ListShape.flowRow() }) - ) { appearance, shape -> - FlowSelectableList( - items = flowItems.map { id -> - id to @Composable { onClick: () -> Unit, isSelected: Boolean -> - TextListItem( - modifier = Modifier.width(IntrinsicSize.Min), - text = id, - state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, - onClick = onClick, - appearance = TextListItemAppearance.default(), - shape = TextListItemShape.default() - ) - } - }, - selectionState = flowSelectionState, - onItemClick = { id -> - val current = - (flowSelectionState as SelectionState.Multiple).selectedItems.toMutableSet() - if (current.contains(id)) current.remove(id) else current.add(id) - flowSelectionState = SelectionState.Multiple(current) - }, - appearance = appearance, - shape = shape - ) - } - - Spacer(Modifier.height(32.dp)) + Spacer(Modifier.height(Space.xl2)) } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/FlowSelectable.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/FlowSelectable.kt new file mode 100644 index 000000000..55e0d4fa4 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/FlowSelectable.kt @@ -0,0 +1,63 @@ +package com.atls.hyperion.ui.components.list.stories + +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.list.FlowSelectableList +import com.atls.hyperion.ui.components.list.item.TextListItem +import com.atls.hyperion.ui.components.list.item.model.ListItemState +import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance +import com.atls.hyperion.ui.components.list.item.style.appearance.default +import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape +import com.atls.hyperion.ui.components.list.item.style.shape.default +import com.atls.hyperion.ui.components.list.model.SelectionState +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow + +@Composable +fun FlowSelectableListVariants() { + val flowItems = listOf("Apple", "Banana", "Orange", "Mango", "Peach", "Grapes") + var flowSelectionState by remember { + mutableStateOf>( + SelectionState.Multiple(emptySet()) + ) + } + + ComponentVariants( + name = "FlowSelectableList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("FlowRow" to { ListShape.flowRow() }) + ) { appearance, shape -> + FlowSelectableList( + items = flowItems.map { id -> + id to @Composable { onClick: () -> Unit, isSelected: Boolean -> + TextListItem( + modifier = Modifier.width(IntrinsicSize.Min), + text = id, + state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, + onClick = onClick, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + } + }, + selectionState = flowSelectionState, + onItemClick = { id -> + val current = + (flowSelectionState as SelectionState.Multiple).selectedItems.toMutableSet() + if (current.contains(id)) current.remove(id) else current.add(id) + flowSelectionState = SelectionState.Multiple(current) + }, + appearance = appearance, + shape = shape + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Selectable.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Selectable.kt new file mode 100644 index 000000000..066bc7ee9 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Selectable.kt @@ -0,0 +1,60 @@ +package com.atls.hyperion.ui.components.list.stories + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.list.SelectableList +import com.atls.hyperion.ui.components.list.item.TextListItem +import com.atls.hyperion.ui.components.list.item.model.ListItemState +import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance +import com.atls.hyperion.ui.components.list.item.style.appearance.default +import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape +import com.atls.hyperion.ui.components.list.item.style.shape.default +import com.atls.hyperion.ui.components.list.model.SelectionState +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow + +@Composable +fun SelectableListVariants() { + val selectableItems = listOf("Item 1", "Item 2") + var selectionState by remember { + mutableStateOf>( + SelectionState.Multiple( + emptySet() + ) + ) + } + ComponentVariants( + name = "SelectableList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("FlowRow" to { ListShape.flowRow() }) + ) { appearance, shape -> + SelectableList( + items = selectableItems.map { id -> + id to @Composable { onClick: () -> Unit, isSelected: Boolean -> + TextListItem( + text = id, + state = if (isSelected) ListItemState.Selected else ListItemState.Unselected, + onClick = onClick, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + } + }, + selectionState = selectionState, + onItemClick = { id -> + val current = + (selectionState as SelectionState.Multiple).selectedItems.toMutableSet() + if (current.contains(id)) current.remove(id) else current.add(id) + selectionState = SelectionState.Multiple(current) + }, + appearance = appearance, + shape = shape + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Vertical.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Vertical.kt new file mode 100644 index 000000000..c9fe40059 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/list/stories/Vertical.kt @@ -0,0 +1,37 @@ +package com.atls.hyperion.ui.components.list.stories + +import androidx.compose.runtime.Composable +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.list.VerticalList +import com.atls.hyperion.ui.components.list.item.TextListItem +import com.atls.hyperion.ui.components.list.item.model.ListItemState +import com.atls.hyperion.ui.components.list.item.style.appearance.TextListItemAppearance +import com.atls.hyperion.ui.components.list.item.style.appearance.default +import com.atls.hyperion.ui.components.list.item.style.shape.TextListItemShape +import com.atls.hyperion.ui.components.list.item.style.shape.default +import com.atls.hyperion.ui.components.list.style.appearance.ListAppearance +import com.atls.hyperion.ui.components.list.style.appearance.default +import com.atls.hyperion.ui.components.list.style.shape.ListShape +import com.atls.hyperion.ui.components.list.style.shape.flowRow +import com.atls.hyperion.ui.primitives.VerticalSpacer + +@Composable +fun VerticalListVariants() { + val simpleItems = listOf("Item A", "Item B", "Item C") + ComponentVariants( + name = "VerticalList", + appearances = listOf("Default" to { ListAppearance.default() }), + shapes = listOf("Default" to { ListShape.flowRow() }) + ) { appearance, shape -> + VerticalList(items = simpleItems) { item -> + TextListItem( + text = item, + state = ListItemState.Unselected, + onClick = {}, + appearance = TextListItemAppearance.default(), + shape = TextListItemShape.default() + ) + VerticalSpacer(shape.spacing) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Carousel.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Carousel.kt new file mode 100644 index 000000000..f7e3df103 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Carousel.kt @@ -0,0 +1,50 @@ +package com.atls.hyperion.ui.components.pagination.stories + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.carousel.CarouselWithPagination +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle +import com.atls.hyperion.ui.components.pagination.style.shape.rectangle +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun CarouselPaginationVariants() { + ComponentVariants( + name = "Pagination with Carousel", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() }, + "Rectangle" to { PaginationShape.rectangle() } + ) + ) { appearance, shape -> + CarouselWithPagination( + pageCount = 5, + paginationAppearance = appearance, + paginationShape = shape, + modifier = Modifier.height(Space.xl3) + ) { page -> + Box( + modifier = Modifier + .fillMaxWidth() + .height(Space.xl3) + .background(if (page % 2 == 0) Color.LightGray else Color.Gray), + contentAlignment = Alignment.Center + ) { + Text(text = "Page $page") + } + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/ClickablePagination.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/ClickablePagination.kt new file mode 100644 index 000000000..a8bf398fa --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/ClickablePagination.kt @@ -0,0 +1,38 @@ +package com.atls.hyperion.ui.components.pagination.stories + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.pagination.Pagination +import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance +import com.atls.hyperion.ui.components.pagination.style.appearance.default +import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape +import com.atls.hyperion.ui.components.pagination.style.shape.circle +import com.atls.hyperion.ui.components.pagination.style.shape.rectangle + +@Composable +fun ClickablePaginationVariants() { + var currentPage by remember { mutableStateOf(1) } + + ComponentVariants( + name = "Pagination (Clickable)", + appearances = listOf( + "Default" to { PaginationAppearance.default() } + ), + shapes = listOf( + "Circle" to { PaginationShape.circle() }, + "Rectangle" to { PaginationShape.rectangle() } + ) + ) { appearance: PaginationAppearance, shape: PaginationShape -> + Pagination( + currentPage = currentPage, + count = 5, + appearance = appearance, + shape = shape, + onPageClick = { currentPage = it } + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt index a0377c750..7188b8ceb 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/pagination/stories/Component.kt @@ -1,29 +1,8 @@ package com.atls.hyperion.ui.components.pagination.stories -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height -import androidx.compose.material.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.carousel.CarouselWithPagination -import com.atls.hyperion.ui.components.pagination.Pagination -import com.atls.hyperion.ui.components.pagination.style.appearance.PaginationAppearance -import com.atls.hyperion.ui.components.pagination.style.appearance.default -import com.atls.hyperion.ui.components.pagination.style.shape.PaginationShape -import com.atls.hyperion.ui.components.pagination.style.shape.circle -import com.atls.hyperion.ui.components.pagination.style.shape.rectangle import com.atls.hyperion.ui.primitives.VerticalSpacer import com.atls.hyperion.ui.theme.tokens.layout.Space @@ -32,57 +11,12 @@ class PaginationStory : ComponentExample { @Composable override fun Content() { - var currentPage by remember { mutableStateOf(1) } - Column { - ComponentVariants( - name = "Pagination (Clickable)", - appearances = listOf( - "Default" to { PaginationAppearance.default() } - ), - shapes = listOf( - "Circle" to { PaginationShape.circle() }, - "Rectangle" to { PaginationShape.rectangle() } - ) - ) { appearance: PaginationAppearance, shape: PaginationShape -> - Pagination( - currentPage = currentPage, - count = 5, - appearance = appearance, - shape = shape, - onPageClick = { currentPage = it } - ) - } + ClickablePaginationVariants() VerticalSpacer(Space.xl3) - ComponentVariants( - name = "Pagination with Carousel", - appearances = listOf( - "Default" to { PaginationAppearance.default() } - ), - shapes = listOf( - "Circle" to { PaginationShape.circle() }, - "Rectangle" to { PaginationShape.rectangle() } - ) - ) { appearance, shape -> - CarouselWithPagination( - pageCount = 5, - paginationAppearance = appearance, - paginationShape = shape, - modifier = Modifier.height(100.dp) - ) { page -> - Box( - modifier = Modifier - .fillMaxWidth() - .height(100.dp) - .background(if (page % 2 == 0) Color.LightGray else Color.Gray), - contentAlignment = Alignment.Center - ) { - Text(text = "Page $page") - } - } - } + CarouselPaginationVariants() } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt index 72e702010..3852a3d8d 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Component.kt @@ -1,25 +1,13 @@ package com.atls.hyperion.ui.components.placeholder.stories import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.placeholder.Placeholder -import com.atls.hyperion.ui.components.placeholder.model.PlaceholderOrientation -import com.atls.hyperion.ui.components.placeholder.model.PlaceholderType -import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance -import com.atls.hyperion.ui.components.placeholder.styles.appearance.imageBox -import com.atls.hyperion.ui.components.placeholder.styles.appearance.logo -import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape -import com.atls.hyperion.ui.components.placeholder.styles.shape.imageBox -import com.atls.hyperion.ui.components.placeholder.styles.shape.logo +import com.atls.hyperion.ui.theme.tokens.layout.Space class PlaceholderStory( override val name: String = "Placeholder" @@ -30,54 +18,12 @@ class PlaceholderStory( Column( modifier = Modifier .fillMaxSize() - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(32.dp) + .padding(Space.md), + verticalArrangement = Arrangement.spacedBy(Space.xl2) ) { - - ComponentVariants( - name = "ImageBoxPlaceholder", - appearances = listOf("Default" to { PlaceholderAppearance.imageBox() }), - shapes = listOf("Default" to { PlaceholderShape.imageBox() }) - ) { appearance, shape -> - Box(modifier = Modifier.size(100.dp)) { - Placeholder( - modifier = Modifier.matchParentSize(), - type = PlaceholderType.ImageBox, - appearance = appearance, - shape = shape - ) - } - } - - ComponentVariants( - name = "LogoPlaceholder Horizontal", - appearances = listOf("Default" to { PlaceholderAppearance.logo() }), - shapes = listOf("Default" to { PlaceholderShape.logo() }) - ) { appearance, shape -> - Placeholder( - type = PlaceholderType.Logo( - text = "Горизонтальный", - orientation = PlaceholderOrientation.Horizontal - ), - appearance = appearance, - shape = shape - ) - } - - ComponentVariants( - name = "LogoPlaceholder Vertical", - appearances = listOf("Default" to { PlaceholderAppearance.logo() }), - shapes = listOf("Default" to { PlaceholderShape.logo() }) - ) { appearance, shape -> - Placeholder( - type = PlaceholderType.Logo( - text = "Вертикальный", - orientation = PlaceholderOrientation.Vertical - ), - appearance = appearance, - shape = shape - ) - } + ImageBoxPlaceholderVariants() + LogoPlaceholderHorizontalVariants() + LogoPlaceholderVerticalVariants() } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/ImageBox.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/ImageBox.kt new file mode 100644 index 000000000..1e01c1bba --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/ImageBox.kt @@ -0,0 +1,32 @@ +package com.atls.hyperion.ui.components.placeholder.stories + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.placeholder.Placeholder +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderType +import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance +import com.atls.hyperion.ui.components.placeholder.styles.appearance.imageBox +import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape +import com.atls.hyperion.ui.components.placeholder.styles.shape.imageBox +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@Composable +fun ImageBoxPlaceholderVariants() { + ComponentVariants( + name = "ImageBoxPlaceholder", + appearances = listOf("Default" to { PlaceholderAppearance.imageBox() }), + shapes = listOf("Default" to { PlaceholderShape.imageBox() }) + ) { appearance, shape -> + Box(modifier = Modifier.size(Space.xl3)) { + Placeholder( + modifier = Modifier.matchParentSize(), + type = PlaceholderType.ImageBox, + appearance = appearance, + shape = shape + ) + } + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Logo.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Logo.kt new file mode 100644 index 000000000..4b83f58b8 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/placeholder/stories/Logo.kt @@ -0,0 +1,47 @@ +package com.atls.hyperion.ui.components.placeholder.stories + +import androidx.compose.runtime.Composable +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.placeholder.Placeholder +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderOrientation +import com.atls.hyperion.ui.components.placeholder.model.PlaceholderType +import com.atls.hyperion.ui.components.placeholder.styles.appearance.PlaceholderAppearance +import com.atls.hyperion.ui.components.placeholder.styles.appearance.logo +import com.atls.hyperion.ui.components.placeholder.styles.shape.PlaceholderShape +import com.atls.hyperion.ui.components.placeholder.styles.shape.logo + +@Composable +fun LogoPlaceholderHorizontalVariants() { + ComponentVariants( + name = "LogoPlaceholder Horizontal", + appearances = listOf("Default" to { PlaceholderAppearance.logo() }), + shapes = listOf("Default" to { PlaceholderShape.logo() }) + ) { appearance, shape -> + Placeholder( + type = PlaceholderType.Logo( + text = "Горизонтальный", + orientation = PlaceholderOrientation.Horizontal + ), + appearance = appearance, + shape = shape + ) + } +} + +@Composable +fun LogoPlaceholderVerticalVariants() { + ComponentVariants( + name = "LogoPlaceholder Vertical", + appearances = listOf("Default" to { PlaceholderAppearance.logo() }), + shapes = listOf("Default" to { PlaceholderShape.logo() }) + ) { appearance, shape -> + Placeholder( + type = PlaceholderType.Logo( + text = "Вертикальный", + orientation = PlaceholderOrientation.Vertical + ), + appearance = appearance, + shape = shape + ) + } +} diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt index c726f9cac..ef19f92ae 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Component.kt @@ -1,23 +1,14 @@ package com.atls.hyperion.ui.components.tooltip.stories import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import com.atls.hyperion.storybook.shared.model.ComponentExample -import com.atls.hyperion.storybook.shared.ui.ComponentVariants -import com.atls.hyperion.ui.components.tooltip.Tooltip -import com.atls.hyperion.ui.components.tooltip.style.appearance.TooltipAppearance -import com.atls.hyperion.ui.components.tooltip.style.appearance.default -import com.atls.hyperion.ui.components.tooltip.style.shape.TooltipShape -import com.atls.hyperion.ui.components.tooltip.style.shape.default -import com.atls.hyperion.ui.components.tooltip.ui.TextTooltipContent +import com.atls.hyperion.ui.theme.tokens.layout.Space class TextTooltipStories : ComponentExample { override val name: String = "Text Tooltip" @@ -28,37 +19,10 @@ class TextTooltipStories : ComponentExample { Column( modifier = Modifier .fillMaxWidth() - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp) + .padding(Space.md), + verticalArrangement = Arrangement.spacedBy(Space.md) ) { - ComponentVariants( - name = "Text Tooltip", - appearances = listOf( - "Default" to { TooltipAppearance.default() } - ), - shapes = listOf( - "Default" to { TooltipShape.default() } - ) - ) { appearance: TooltipAppearance, shape: TooltipShape -> - Tooltip( - appearance = appearance, - shape = shape, - tooltipContent = { - TextTooltipContent( - text = "This is a tooltip with ${shape::class.simpleName} shape", - onDismiss = {} - ) - } - ) { - Box( - modifier = Modifier - .padding(16.dp) - .fillMaxWidth() - ) { - Text("Click me") - } - } - } + TextTooltipVariants() } } } diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Text.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Text.kt new file mode 100644 index 000000000..1cc09b6f3 --- /dev/null +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/tooltip/stories/Text.kt @@ -0,0 +1,50 @@ +package com.atls.hyperion.ui.components.tooltip.stories + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import com.atls.hyperion.storybook.shared.ui.ComponentVariants +import com.atls.hyperion.ui.components.tooltip.Tooltip +import com.atls.hyperion.ui.components.tooltip.style.appearance.TooltipAppearance +import com.atls.hyperion.ui.components.tooltip.style.appearance.default +import com.atls.hyperion.ui.components.tooltip.style.shape.TooltipShape +import com.atls.hyperion.ui.components.tooltip.style.shape.default +import com.atls.hyperion.ui.components.tooltip.ui.TextTooltipContent +import com.atls.hyperion.ui.theme.tokens.layout.Space + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun TextTooltipVariants() { + ComponentVariants( + name = "Text Tooltip", + appearances = listOf( + "Default" to { TooltipAppearance.default() } + ), + shapes = listOf( + "Default" to { TooltipShape.default() } + ) + ) { appearance: TooltipAppearance, shape: TooltipShape -> + Tooltip( + appearance = appearance, + shape = shape, + tooltipContent = { + TextTooltipContent( + text = "This is a tooltip with ${shape::class.simpleName} shape", + onDismiss = {} + ) + } + ) { + Box( + modifier = Modifier + .padding(Space.md) + .fillMaxWidth() + ) { + Text("Click me") + } + } + } +} From 14376e100e911f96b99e529c8dce723eb5e6949e Mon Sep 17 00:00:00 2001 From: Arina Gazhina Date: Sat, 17 Jan 2026 04:18:24 +0300 Subject: [PATCH 47/47] refactor(carousel): move ui utils to lib --- .../hyperion/ui/components/carousel/InfiniteOverlay.kt | 8 ++++---- .../components/carousel/{ui => lib}/CalculateDistance.kt | 2 +- .../ui/components/carousel/{ui => lib}/CenterOfItem.kt | 2 +- .../components/carousel/{ui => lib}/CenterOfViewport.kt | 2 +- .../carousel/{ui => lib}/NormalizedStartIndex.kt | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/{ui => lib}/CalculateDistance.kt (74%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/{ui => lib}/CenterOfItem.kt (57%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/{ui => lib}/CenterOfViewport.kt (69%) rename mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/{ui => lib}/NormalizedStartIndex.kt (76%) diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt index d659b0bf5..c4eedda3d 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/InfiniteOverlay.kt @@ -22,10 +22,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.unit.Dp import androidx.compose.ui.zIndex -import com.atls.hyperion.ui.components.carousel.ui.calculateDistance -import com.atls.hyperion.ui.components.carousel.ui.centerOfItem -import com.atls.hyperion.ui.components.carousel.ui.centerOfViewport -import com.atls.hyperion.ui.components.carousel.ui.normalizedStartIndex +import com.atls.hyperion.ui.components.carousel.lib.calculateDistance +import com.atls.hyperion.ui.components.carousel.lib.centerOfItem +import com.atls.hyperion.ui.components.carousel.lib.centerOfViewport +import com.atls.hyperion.ui.components.carousel.lib.normalizedStartIndex import com.atls.hyperion.ui.theme.tokens.effects.Alpha import com.atls.hyperion.ui.theme.tokens.layout.Space import kotlin.math.abs diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CalculateDistance.kt similarity index 74% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CalculateDistance.kt index 8b2bbc89e..9d1fd5d3a 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CalculateDistance.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CalculateDistance.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.carousel.ui +package com.atls.hyperion.ui.components.carousel.lib import kotlin.math.abs diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfItem.kt similarity index 57% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfItem.kt index d807a9ccf..b722da301 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfItem.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfItem.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.carousel.ui +package com.atls.hyperion.ui.components.carousel.lib fun centerOfItem(offset: Int, size: Int): Int = offset + size / 2 diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfViewport.kt similarity index 69% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfViewport.kt index 889dd3aa6..ea6de18d7 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/CenterOfViewport.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/CenterOfViewport.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.carousel.ui +package com.atls.hyperion.ui.components.carousel.lib fun centerOfViewport(viewportStartOffset: Int, viewportWidth: Int): Int = viewportStartOffset + viewportWidth / 2 diff --git a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/NormalizedStartIndex.kt similarity index 76% rename from mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt rename to mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/NormalizedStartIndex.kt index 93046395d..584701b53 100644 --- a/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/ui/NormalizedStartIndex.kt +++ b/mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/carousel/lib/NormalizedStartIndex.kt @@ -1,4 +1,4 @@ -package com.atls.hyperion.ui.components.carousel.ui +package com.atls.hyperion.ui.components.carousel.lib fun normalizedStartIndex(centerIndex: Int, itemsSize: Int): Int { val middle = Int.MAX_VALUE / 2