Components part1

mobile/kmp/gradle/libs.versions.toml

@@ -1,13 +1,23 @@
 [versions]
+calendar = "2.9.0"
 kotlin = "2.2.0"
+ktor = "3.3.1"
 compose = "1.10.0-rc02"
 composeShadow = "2.0.4"
+coilCompose = "3.3.0"
+kotlinxDatetime = "0.6.1"
 agp = "8.9.0"
 androidx-activityCompose = "1.9.3"
 
 [libraries]
+compose-calendar = { module = "com.kizitonwose.calendar:compose-multiplatform", version.ref = "calendar" }
+kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinxDatetime" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 compose-shadow = { module = "com.adamglin:compose-shadow", version.ref = "composeShadow" }
+coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coilCompose" }
+coil-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coilCompose" }
+ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
+ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
 
 [plugins]
 kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

mobile/kmp/sample/build.gradle.kts

@@ -28,6 +28,7 @@ kotlin {
     sourceSets {
         commonMain.dependencies {
             implementation(project(":ui"))
+            implementation(project(":storybook"))
             implementation(compose.runtime)
             implementation(compose.foundation)
             implementation(compose.material)

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

@@ -1,22 +1,41 @@
 package com.atls.hyperion.sample
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+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.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.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.primitives.stories.LinkStory
+import com.atls.hyperion.ui.primitives.stories.TextStory
 
 @Composable
 fun App() {
     MaterialTheme {
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(16.dp)
-        ) {
-            //TODO use for demonstration and tests
-        }
+        Storybook(
+            components = listOf(
+                AvatarStory(),
+                BottomDialogStory(),
+                ButtonStory(),
+                CheckboxStory(),
+                DatePickerStory(),
+                DateRangePickerStory(),
+                DividerStory(),
+                InputStory(),
+                PopupStory(),
+                SwitchStory(),
+                CardStory(),
+                TextStory(),
+                LinkStory()
+            )
+        )
     }
 }

mobile/kmp/settings.gradle.kts

@@ -16,3 +16,5 @@ dependencyResolutionManagement {
 rootProject.name = "hyperion"
 include(":sample")
 include(":ui")
+include(":storybook")
+include(":storybook-api")

mobile/kmp/storybook/.gitignore

@@ -0,0 +1 @@
+/build

mobile/kmp/storybook/build.gradle.kts

@@ -0,0 +1,65 @@
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
+plugins {
+    alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.androidLibrary)
+    alias(libs.plugins.composeMultiplatform)
+    alias(libs.plugins.composeCompiler)
+}
+
+group = "com.atls.hyperion"
+version = "0.1.0"
+
+kotlin {
+    androidTarget {
+        compilerOptions {
+            jvmTarget.set(JvmTarget.JVM_21)
+        }
+    }
+
+    listOf(
+        iosX64(),
+        iosArm64(),
+        iosSimulatorArm64()
+    ).forEach { iosTarget ->
+        iosTarget.binaries.framework {
+            baseName = "storybook"
+            isStatic = true
+        }
+    }
+
+    sourceSets {
+        commonMain.dependencies {
+            implementation(compose.runtime)
+            implementation(compose.foundation)
+            implementation(compose.material)
+            implementation(compose.ui)
+            implementation(compose.components.resources)
+        }
+    }
+}
+
+compose.resources {
+    publicResClass = false
+    generateResClass = auto
+}
+
+android {
+    namespace = "com.atls.hyperion.storybook"
+
+    val compileSdkValue = System.getenv(Versions.COMPILE_SDK_KEY)?.toInt()
+        ?: (extra[Versions.COMPILE_SDK_KEY] as String).toInt()
+    val minSdkValue = System.getenv(Versions.MIN_SDK_KEY)?.toInt()
+        ?: (extra[Versions.MIN_SDK_KEY] as String).toInt()
+    val javaTargetValue = System.getenv(Versions.JAVA_TARGET_KEY)?.toInt()
+        ?: (extra[Versions.JAVA_TARGET_KEY] as String).toInt()
+
+    compileSdk = compileSdkValue
+    defaultConfig {
+        minSdk = minSdkValue
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.toVersion(javaTargetValue)
+        targetCompatibility = JavaVersion.toVersion(javaTargetValue)
+    }
+}

mobile/kmp/storybook/src/commonMain/composeResources/drawable/menu.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+
+    <path android:fillColor="#00000000" android:pathData="M4,17H20M4,12H20M4,7H20" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="1.5"/>
+
+</vector>

mobile/kmp/storybook/src/commonMain/composeResources/values/strings.xml

@@ -0,0 +1,5 @@
+<resources>
+    <string name="components">Components</string>
+    <string name="select_component_from_sidebar">Select a component from the sidebar</string>
+    <string name="toggle_sidebar">Toggle Sidebar</string>
+</resources>

mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/config/Constants.kt

@@ -0,0 +1,5 @@
+package com.atls.hyperion.storybook.config
+
+import androidx.compose.ui.unit.dp
+
+internal val sidebarWidth = 250.dp

mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/fragments/storybook/Storybook.kt

@@ -0,0 +1,90 @@
+package com.atls.hyperion.storybook.fragments.storybook
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+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.safeDrawingPadding
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+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 com.atls.hyperion.storybook.fragments.storybook.ui.Sidebar
+import com.atls.hyperion.storybook.generated.resources.Res
+import com.atls.hyperion.storybook.generated.resources.menu
+import com.atls.hyperion.storybook.generated.resources.select_component_from_sidebar
+import com.atls.hyperion.storybook.generated.resources.toggle_sidebar
+import com.atls.hyperion.storybook.shared.model.ComponentExample
+import com.atls.hyperion.storybook.shared.ui.theme.Padding
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun Storybook(
+    components: List<ComponentExample>
+) {
+    var isSidebarVisible by remember { mutableStateOf(false) }
+    var selectedComponent by remember(components) {
+        mutableStateOf(components.firstOrNull())
+    }
+
+    Box {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .safeDrawingPadding()
+        ) {
+            IconButton(
+                onClick = { isSidebarVisible = !isSidebarVisible },
+                modifier = Modifier
+                    .padding(Padding.small)
+            ) {
+                Icon(
+                    painter = painterResource(Res.drawable.menu),
+                    contentDescription = stringResource(Res.string.toggle_sidebar),
+                    tint = MaterialTheme.colors.onSurface
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                if (selectedComponent != null) {
+                    selectedComponent?.Content()
+                } else {
+                    Text(
+                        text = stringResource(Res.string.select_component_from_sidebar),
+                        modifier = Modifier
+                            .align(Alignment.Center),
+                    )
+                }
+            }
+        }
+
+        AnimatedVisibility(
+            visible = isSidebarVisible,
+            enter = slideInHorizontally(),
+            exit = slideOutHorizontally()
+        ) {
+            Sidebar(
+                components = components,
+                selectedComponent = selectedComponent,
+                onComponentClick = { component ->
+                    selectedComponent = component
+                    isSidebarVisible = false
+                },
+                onClose = { isSidebarVisible = false }
+            )
+        }
+    }
+}

mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/fragments/storybook/ui/Sidebar.kt

@@ -0,0 +1,74 @@
+package com.atls.hyperion.storybook.fragments.storybook.ui
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import com.atls.hyperion.storybook.config.sidebarWidth
+import com.atls.hyperion.storybook.generated.resources.Res
+import com.atls.hyperion.storybook.generated.resources.components
+import com.atls.hyperion.storybook.shared.model.ComponentExample
+import com.atls.hyperion.storybook.shared.ui.theme.FontSize
+import com.atls.hyperion.storybook.shared.ui.theme.Padding
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun Sidebar(
+    components: List<ComponentExample>,
+    selectedComponent: ComponentExample?,
+    onComponentClick: (ComponentExample) -> Unit,
+    onClose: () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .clickable { onClose() }
+    ) {
+        Surface(
+            modifier = Modifier
+                .fillMaxHeight()
+                .width(sidebarWidth),
+            color = MaterialTheme.colors.surface
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(Padding.medium)
+            ) {
+                Text(
+                    text = stringResource(Res.string.components),
+                    fontSize = FontSize.large,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.padding(vertical = Padding.large)
+                )
+                LazyColumn {
+                    items(components) { component ->
+                        Text(
+                            text = component.name,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .clickable { onComponentClick(component) }
+                                .padding(vertical = Padding.small),
+                            fontWeight = if (component == selectedComponent) FontWeight.Bold else FontWeight.Normal,
+                            fontSize = FontSize.small
+                        )
+                        Divider()
+                    }
+                }
+            }
+        }
+    }
+}

mobile/kmp/storybook/src/commonMain/kotlin/com/atls/hyperion/storybook/shared/model/ComponentExample.kt

@@ -0,0 +1,9 @@
+package com.atls.hyperion.storybook.shared.model
+
+import androidx.compose.runtime.Composable
+
+interface ComponentExample {
+    val name: String
+    @Composable
+    fun Content()
+}