Storytale

build.gradle.kts

@@ -1,5 +1,6 @@
 plugins {
     alias(libs.plugins.aboutLibraries) apply false
+    alias(libs.plugins.storytale) apply false
     alias(libs.plugins.androidApplication) apply false
     alias(libs.plugins.androidLibrary) apply false
     alias(libs.plugins.composeMultiplatform) apply false

gradle/libs.versions.toml

@@ -1,5 +1,6 @@
 [versions]
 aboutlibraries = "12.2.3"
+storytale = "0.0.4-alpha01+dev18"
 agp = "8.7.3"
 android-compileSdk = "35"
 android-minSdk = "26"
@@ -107,6 +108,7 @@ settings-serialization = { module = "com.russhwolf:multiplatform-settings-serial
 
 [plugins]
 aboutLibraries = { id = "com.mikepenz.aboutlibraries.plugin", version.ref = "aboutlibraries" }
+storytale = { id = "org.jetbrains.compose.storytale", version.ref = "storytale" }
 androidApplication = { id = "com.android.application", version.ref = "agp" }
 androidLibrary = { id = "com.android.library", version.ref = "agp" }
 composeCompiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

ui-components/build.gradle.kts

@@ -10,6 +10,7 @@ plugins {
     alias(libs.plugins.composeCompiler)
     alias(libs.plugins.kotlinMultiplatform)
     alias(libs.plugins.composeHotReload)
+    alias(libs.plugins.storytale)
 }
 
 kotlin {

ui-components/src/commonStories/kotlin/Button.story.kt

@@ -0,0 +1,48 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.Button
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+val `Primary Button` by story {
+    KotlinConfTheme {
+        Button(
+            label = "Primary Button",
+            onClick = {},
+            primary = true
+        )
+    }
+}
+
+val `Secondary Button` by story {
+    KotlinConfTheme {
+        Button(
+            label = "Secondary Button",
+            onClick = {},
+            primary = false
+        )
+    }
+}
+
+val `Disabled Button` by story {
+    val enabled by parameter(false)
+
+    KotlinConfTheme {
+        Button(
+            label = "Disabled Button",
+            onClick = {},
+            enabled = enabled
+        )
+    }
+}
+
+val `Button with custom label` by story {
+    val label by parameter("Custom Label")
+
+    KotlinConfTheme {
+        Button(
+            label = label,
+            onClick = {}
+        )
+    }
+}

ui-components/src/commonStories/kotlin/CardTag.story.kt

@@ -0,0 +1,48 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.CardTag
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+
+val `Unselected CardTag` by story {
+    KotlinConfTheme {
+        CardTag(
+            label = "Unselected Tag",
+            selected = false
+        )
+    }
+}
+
+val `Selected CardTag` by story {
+    KotlinConfTheme {
+        CardTag(
+            label = "Selected Tag",
+            selected = true
+        )
+    }
+}
+
+val `Interactive CardTag` by story {
+    KotlinConfTheme {
+        var selected by remember { mutableStateOf(false) }
+        CardTag(
+            label = if (selected) "Selected Tag (click to unselect)" else "Unselected Tag (click to select)",
+            selected = selected
+        )
+        // Note: CardTag doesn't have a click handler, so this is just for demonstration
+    }
+}
+
+val `CardTag with Parameters` by story {
+    val label by parameter("Customizable Tag")
+    val selected by parameter(false)
+
+    KotlinConfTheme {
+        CardTag(
+            label = label,
+            selected = selected
+        )
+    }
+}

ui-components/src/commonStories/kotlin/Divider.story.kt

@@ -0,0 +1,44 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.Divider
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+val `Default Divider` by story {
+    KotlinConfTheme {
+        Divider(
+            thickness = 1.dp,
+            color = KotlinConfTheme.colors.strokeHalf
+        )
+    }
+}
+
+val `Thick Divider` by story {
+    KotlinConfTheme {
+        Divider(
+            thickness = 4.dp,
+            color = KotlinConfTheme.colors.strokeHalf
+        )
+    }
+}
+
+val `Custom Color Divider` by story {
+    KotlinConfTheme {
+        Divider(
+            thickness = 2.dp,
+            color = KotlinConfTheme.colors.primaryBackground
+        )
+    }
+}
+
+val `Divider with Parameters` by story {
+    val thickness by parameter(2)
+    val useCustomColor by parameter(false)
+
+    KotlinConfTheme {
+        Divider(
+            thickness = thickness.dp,
+            color = if (useCustomColor) KotlinConfTheme.colors.primaryBackground else KotlinConfTheme.colors.strokeHalf
+        )
+    }
+}

ui-components/src/commonStories/kotlin/NewsCard.story.kt

@@ -0,0 +1,52 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.NewsCard
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.ui.Modifier
+
+val `News Card with Photo` by story {
+    KotlinConfTheme {
+        NewsCard(
+            title = "Kotlin 2.0 Released",
+            date = "May 23, 2023",
+            photoUrl = "https://kotlinlang.org/assets/images/open-graph/kotlin-logo.png",
+            onClick = {}
+        )
+    }
+}
+
+val `News Card without Photo` by story {
+    KotlinConfTheme {
+        NewsCard(
+            title = "Important Conference Update",
+            date = "May 22, 2023",
+            photoUrl = null,
+            onClick = {}
+        )
+    }
+}
+
+val `News Card with Long Title` by story {
+    KotlinConfTheme {
+        NewsCard(
+            title = "This is a very long news title that might wrap to multiple lines depending on the available width",
+            date = "May 21, 2023",
+            photoUrl = "https://kotlinlang.org/assets/images/open-graph/kotlin-logo.png",
+            onClick = {}
+        )
+    }
+}
+
+val `News Card with Parameters` by story {
+    val title by parameter("Customizable News Title")
+    val date by parameter("May 20, 2023")
+    val hasPhoto by parameter(true)
+
+    KotlinConfTheme {
+        NewsCard(
+            title = title,
+            date = date,
+            photoUrl = if (hasPhoto) "https://kotlinlang.org/assets/images/open-graph/kotlin-logo.png" else null,
+            onClick = {}
+        )
+    }
+}

ui-components/src/commonStories/kotlin/Now.story.kt

@@ -0,0 +1,52 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.NowButton
+import org.jetbrains.kotlinconf.ui.components.NowLabel
+import org.jetbrains.kotlinconf.ui.components.NowButtonState
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.ui.Modifier
+
+val `Now Label` by story {
+    KotlinConfTheme {
+        NowLabel()
+    }
+}
+
+val `Now Button - Before` by story {
+    KotlinConfTheme {
+        NowButton(
+            time = NowButtonState.Before,
+            onClick = {}
+        )
+    }
+}
+
+val `Now Button - Current` by story {
+    KotlinConfTheme {
+        NowButton(
+            time = NowButtonState.Current,
+            onClick = {}
+        )
+    }
+}
+
+val `Now Button - After` by story {
+    KotlinConfTheme {
+        NowButton(
+            time = NowButtonState.After,
+            onClick = {}
+        )
+    }
+}
+
+val `Now Button with Parameters` by story {
+    val state by parameter(NowButtonState.Before)
+    val enabled by parameter(true)
+
+    KotlinConfTheme {
+        NowButton(
+            time = state,
+            onClick = {},
+            enabled = enabled
+        )
+    }
+}

ui-components/src/commonStories/kotlin/PageTitle.story.kt

@@ -0,0 +1,96 @@
+import org.jetbrains.compose.storytale.story
+import org.jetbrains.kotlinconf.ui.components.PageTitle
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+
+val `Regular Talk PageTitle` by story {
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(false) }
+        PageTitle(
+            time = "May 21, 9:00 - 9:40",
+            title = "A Wonderful Server-side Kotlin Talk",
+            tags = setOf("Regular talk", "Beginner", "Server-side"),
+            bookmarked = bookmarked,
+            lightning = false,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}
+
+val `Lightning Talk PageTitle` by story {
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(false) }
+        PageTitle(
+            time = "May 23, 13:00 - 13:20",
+            title = "My Incredible Talk About Kotlin Multiplatform",
+            tags = setOf("Lightning talk", "Intermediate", "Libraries"),
+            bookmarked = bookmarked,
+            lightning = true,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}
+
+val `Bookmarked PageTitle` by story {
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(true) }
+        PageTitle(
+            time = "May 22, 11:00 - 11:40",
+            title = "Advanced Kotlin Coroutines",
+            tags = setOf("Regular talk", "Advanced", "Concurrency"),
+            bookmarked = bookmarked,
+            lightning = false,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}
+
+val `Education PageTitle` by story {
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(false) }
+        PageTitle(
+            time = "May 22, 14:00 - 15:30",
+            title = "Introduction to Kotlin Multiplatform",
+            tags = setOf("Education", "Beginner", "Multiplatform"),
+            bookmarked = bookmarked,
+            lightning = false,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}
+
+val `Codelab PageTitle` by story {
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(false) }
+        PageTitle(
+            time = "May 23, 10:00 - 11:30",
+            title = "Building Your First Compose Multiplatform App",
+            tags = setOf("Codelab", "Intermediate", "Compose"),
+            bookmarked = bookmarked,
+            lightning = false,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}
+
+val `PageTitle with Parameters` by story {
+    val title by parameter("Customizable Title")
+    val time by parameter("May 22, 10:00 - 10:40")
+    val isLightning by parameter(false)
+    val initialBookmarked by parameter(false)
+
+    KotlinConfTheme {
+        var bookmarked by remember { mutableStateOf(initialBookmarked) }
+        PageTitle(
+            time = time,
+            title = title,
+            tags = setOf("Regular talk", "Intermediate", "Kotlin"),
+            bookmarked = bookmarked,
+            lightning = isLightning,
+            onBookmark = { bookmarked = it }
+        )
+    }
+}