Components part3

mobile/kmp/sample/src/commonMain/kotlin/com/atls/hyperion/sample/App.kt

@@ -4,16 +4,25 @@ 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
 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
+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.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
 import com.atls.hyperion.ui.primitives.stories.LinkStory
 import com.atls.hyperion.ui.primitives.stories.TextStory
 
@@ -24,17 +33,26 @@ fun App() {
             components = listOf(
                 AvatarStory(),
                 BottomDialogStory(),
+                BottomBarStory(),
                 ButtonStory(),
+                CardStory(),
+                CarouselStory(),
                 CheckboxStory(),
                 DatePickerStory(),
                 DateRangePickerStory(),
                 DividerStory(),
                 InputStory(),
+                PaginationStory(),
+                PlaceholderStory(),
                 PopupStory(),
+                ProgressStory(),
                 SwitchStory(),
-                CardStory(),
                 TextStory(),
-                LinkStory()
+                TopBarStory(),
+                LinkStory(),
+                ListStories(),
+                ToastStories(),
+                TextTooltipStories()
             )
         )
     }

mobile/kmp/settings.gradle.kts

@@ -17,4 +17,3 @@ rootProject.name = "hyperion"
 include(":sample")
 include(":ui")
 include(":storybook")
-include(":storybook-api")

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 <A, S> ComponentVariants(
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .verticalScroll(rememberScrollState())
             .padding(Padding.medium),
         verticalArrangement = Arrangement.spacedBy(Padding.large)
     ) {

mobile/kmp/ui/src/commonMain/composeResources/drawable/placeholder.xml

@@ -0,0 +1,44 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="80dp"
+    android:height="80dp"
+    android:viewportWidth="80"
+    android:viewportHeight="80">
+
+    <path
+        android:strokeWidth="6"
+        android:strokeColor="#000000"
+        android:fillColor="#00000000"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round"
+        android:pathData="
+            M62.7,9.9
+            H16.5
+            C12.85,9.9 9.9,12.85 9.9,16.5
+            V62.7
+            C9.9,66.35 12.85,69.3 16.5,69.3
+            H62.7
+            C66.35,69.3 69.3,66.35 69.3,62.7
+            V16.5
+            C69.3,12.85 66.35,9.9 62.7,9.9
+            Z" />
+
+    <path
+        android:strokeWidth="6"
+        android:strokeColor="#000000"
+        android:fillColor="#00000000"
+        android:pathData="
+            M28.05,23.1
+            A4.95,4.95 0 1,1 28.05,33
+            A4.95,4.95 0 1,1 28.05,23.1" />
+
+    <path
+        android:strokeWidth="6"
+        android:strokeColor="#000000"
+        android:fillColor="#00000000"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round"
+        android:pathData="
+            M69.3,49.5
+            L52.8,33
+            L16.5,69.3" />
+</vector>

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/Component.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<BottomBarItem>,
+    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
+            )
+        }
+    }
+}

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
+            )
+        }
+    }
+}

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
+)

mobile/kmp/ui/src/commonMain/kotlin/com/atls/hyperion/ui/components/bottomBar/stories/Component.kt

@@ -0,0 +1,77 @@
+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 com.atls.hyperion.storybook.shared.model.ComponentExample
+import com.atls.hyperion.ui.components.bottomBar.model.BottomBarItem
+import com.atls.hyperion.ui.theme.tokens.layout.Space
+
+class BottomBarStory : ComponentExample {
+    override val name: String = "BottomBar"
+
+    @Composable
+    override fun Content() {
+        Column(
+            modifier = Modifier
+                .verticalScroll(rememberScrollState())
+                .padding(bottom = Space.xl3)
+        ) {
+
+            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.Horizontal>(Arrangement.Center) }
+
+            Column(modifier = Modifier.fillMaxWidth().padding(Space.md)) {
+                Text("Tab Position:")
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.padding(vertical = Space.sm)
+                ) {
+                    RadioButton(
+                        selected = tabPosition == Arrangement.SpaceAround,
+                        onClick = { tabPosition = Arrangement.SpaceAround })
+                    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 = Space.xs, end = Space.sm))
+
+                    RadioButton(
+                        selected = tabPosition == Arrangement.SpaceBetween,
+                        onClick = { tabPosition = Arrangement.SpaceBetween })
+                    Text("Space between", modifier = Modifier.padding(start = Space.xs))
+                }
+            }
+
+            BottomBarWithLabelsVariants(itemsWithLabels, tabPosition)
+
+            Spacer(Modifier.height(Space.xl2))
+
+            BottomBarWithoutLabelsVariants(itemsWithoutLabels, tabPosition)
+        }
+    }
+}