Merge pull request #6758 from thundernest/add_app_ui_catalog

Add App UI catalog

app-ui-catalog/README.md

@@ -0,0 +1,7 @@
+# Thunderbird UI Catalog
+
+Uses [`:core:ui:compose:designsystem`](../core/ui/compose/designsystem/README.md)
+
+This is a catalog of all the components in the Thunderbird design system.
+
+It is a work in progress, and will be updated as the design system evolves.

app-ui-catalog/build.gradle.kts

@@ -3,10 +3,10 @@ plugins {
 }
 
 android {
-    namespace = "app.k9mail.core.ui.compose.demo"
+    namespace = "app.k9mail.ui.catalog"
 
     defaultConfig {
-        applicationId = "app.k9mail.core.ui.compose.demo"
+        applicationId = "app.k9mail.ui.catalog"
         versionCode = 1
         versionName = "1.0"
     }
@@ -14,6 +14,7 @@ android {
 
 dependencies {
     implementation(projects.core.ui.compose.designsystem)
+    implementation(libs.androidx.compose.material)
 
     androidTestImplementation(libs.androidx.test.ext.junit.ktx)
     androidTestImplementation(libs.androidx.test.espresso.core)

app-ui-catalog/src/main/AndroidManifest.xml

@@ -7,10 +7,10 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:label="@string/app_name"
         android:supportsRtl="true"
-        android:theme="@style/Theme.K9"
+        android:theme="@style/Theme.Thunderbird"
         >
         <activity
-            android:name=".MainActivity"
+            android:name=".CatalogActivity"
             android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogActivity.kt

@@ -1,15 +1,18 @@
-package app.k9mail.core.ui.compose.demo
+package app.k9mail.ui.catalog
 
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.core.view.WindowCompat
 
-class MainActivity : ComponentActivity() {
+class CatalogActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
         setContent {
-            MainView()
+            CatalogScreen()
         }
     }
 }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogContent.kt

@@ -0,0 +1,66 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.k9mail.core.ui.compose.common.DevicePreviews
+import app.k9mail.core.ui.compose.designsystem.atom.Surface
+import app.k9mail.core.ui.compose.theme.MainTheme
+import app.k9mail.ui.catalog.items.buttonItems
+import app.k9mail.ui.catalog.items.colorItems
+import app.k9mail.ui.catalog.items.imageItems
+import app.k9mail.ui.catalog.items.selectionControlItems
+import app.k9mail.ui.catalog.items.themeHeaderItem
+import app.k9mail.ui.catalog.items.themeSelectorItems
+import app.k9mail.ui.catalog.items.typographyItems
+
+@Composable
+fun CatalogContent(
+    catalogTheme: CatalogTheme,
+    catalogThemeVariant: CatalogThemeVariant,
+    onThemeChange: () -> Unit,
+    onThemeVariantChange: () -> Unit,
+    contentPadding: PaddingValues,
+    modifier: Modifier = Modifier,
+) {
+    Surface {
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(300.dp),
+            contentPadding = contentPadding,
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
+            verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
+            modifier = modifier.padding(MainTheme.spacings.double),
+        ) {
+            themeHeaderItem(text = "Thunderbird Catalog")
+            themeSelectorItems(
+                catalogTheme = catalogTheme,
+                catalogThemeVariant = catalogThemeVariant,
+                onThemeChange = onThemeChange,
+                onThemeVariantChange = onThemeVariantChange,
+            )
+
+            typographyItems()
+            colorItems()
+            buttonItems()
+            selectionControlItems()
+            imageItems()
+        }
+    }
+}
+
+@DevicePreviews
+@Composable
+internal fun CatalogContentPreview() {
+    CatalogContent(
+        catalogTheme = CatalogTheme.K9,
+        catalogThemeVariant = CatalogThemeVariant.LIGHT,
+        onThemeChange = {},
+        onThemeVariantChange = {},
+        contentPadding = PaddingValues(),
+    )
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogScreen.kt

@@ -0,0 +1,50 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.common.DevicePreviews
+
+@Composable
+fun CatalogScreen(
+    modifier: Modifier = Modifier,
+) {
+    val themeState = remember { mutableStateOf(CatalogTheme.K9) }
+    val themeVariantState = remember { mutableStateOf(CatalogThemeVariant.LIGHT) }
+
+    CatalogThemeSwitch(theme = themeState.value, themeVariation = themeVariantState.value) {
+        val contentPadding = WindowInsets.systemBars.asPaddingValues()
+
+        CatalogContent(
+            catalogTheme = themeState.value,
+            catalogThemeVariant = themeVariantState.value,
+            onThemeChange = {
+                themeState.value = when (themeState.value) {
+                    CatalogTheme.K9 -> CatalogTheme.THUNDERBIRD
+                    CatalogTheme.THUNDERBIRD -> CatalogTheme.K9
+                }
+            },
+            onThemeVariantChange = {
+                themeVariantState.value = when (themeVariantState.value) {
+                    CatalogThemeVariant.LIGHT -> CatalogThemeVariant.DARK
+                    CatalogThemeVariant.DARK -> CatalogThemeVariant.LIGHT
+                }
+            },
+            contentPadding = contentPadding,
+            modifier = Modifier
+                .fillMaxSize()
+                .then(modifier),
+        )
+    }
+}
+
+@DevicePreviews
+@Composable
+internal fun CatalogScreenPreview() {
+    CatalogScreen()
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogTheme.kt

@@ -0,0 +1,13 @@
+package app.k9mail.ui.catalog
+
+enum class CatalogTheme(
+    private val displayName: String,
+) {
+    K9("K-9"),
+    THUNDERBIRD("Thunderbird"),
+    ;
+
+    override fun toString(): String {
+        return displayName
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSelector.kt

@@ -0,0 +1,29 @@
+package app.k9mail.ui.catalog
+
+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 app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+@Composable
+fun CatalogThemeSelector(
+    catalogTheme: CatalogTheme,
+    modifier: Modifier = Modifier,
+    onThemeChangeClick: () -> Unit,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+    ) {
+        TextBody1(text = "Change theme:")
+        Button(
+            text = catalogTheme.toString(),
+            onClick = onThemeChangeClick,
+        )
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeSwitch.kt

@@ -0,0 +1,26 @@
+package app.k9mail.ui.catalog
+
+import androidx.compose.runtime.Composable
+import app.k9mail.core.ui.compose.theme.K9Theme
+import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
+
+@Composable
+fun CatalogThemeSwitch(
+    theme: CatalogTheme,
+    themeVariation: CatalogThemeVariant,
+    content: @Composable () -> Unit,
+) {
+    when (theme) {
+        CatalogTheme.K9 -> K9Theme(
+            darkTheme = isDarkVariation(themeVariation),
+            content = content,
+        )
+        CatalogTheme.THUNDERBIRD -> ThunderbirdTheme(
+            darkTheme = isDarkVariation(themeVariation),
+            content = content,
+        )
+    }
+}
+
+private fun isDarkVariation(themeVariation: CatalogThemeVariant): Boolean =
+    themeVariation == CatalogThemeVariant.DARK

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariant.kt

@@ -0,0 +1,5 @@
+package app.k9mail.ui.catalog
+
+enum class CatalogThemeVariant {
+    LIGHT, DARK
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogThemeVariantSelector.kt

@@ -0,0 +1,29 @@
+package app.k9mail.ui.catalog
+
+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 app.k9mail.core.ui.compose.designsystem.atom.Checkbox
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+@Composable
+fun CatalogThemeVariantSelector(
+    catalogThemeVariant: CatalogThemeVariant,
+    modifier: Modifier = Modifier,
+    onThemeVariantChange: () -> Unit,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+    ) {
+        TextBody1(text = "Set dark mode:")
+        Checkbox(
+            checked = catalogThemeVariant == CatalogThemeVariant.DARK,
+            onCheckedChange = { onThemeVariantChange() },
+        )
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ButtonItems.kt

@@ -0,0 +1,40 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import app.k9mail.core.ui.compose.designsystem.atom.button.Button
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.buttonItems() {
+    sectionHeaderItem(text = "Buttons")
+    sectionSubtitleItem(text = "Contained")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            Button(text = "Enabled", onClick = { })
+            Button(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+    sectionSubtitleItem(text = "Outlined")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            ButtonOutlined(text = "Enabled", onClick = { })
+            ButtonOutlined(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+    sectionSubtitleItem(text = "Text")
+    item {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default),
+        ) {
+            ButtonText(text = "Enabled", onClick = { })
+            ButtonText(text = "Disabled", onClick = { }, enabled = false)
+        }
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ColorItems.kt

@@ -0,0 +1,78 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import app.k9mail.core.ui.compose.designsystem.atom.Surface
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.colorItems() {
+    sectionHeaderItem(text = "Colors")
+    item {
+        ColorContent(
+            name = "Primary",
+            color = MainTheme.colors.primary,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Primary Variant",
+            color = MainTheme.colors.primaryVariant,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Secondary",
+            color = MainTheme.colors.secondary,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Secondary Variant",
+            color = MainTheme.colors.secondaryVariant,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Background",
+            color = MainTheme.colors.background,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Surface",
+            color = MainTheme.colors.surface,
+        )
+    }
+    item {
+        ColorContent(
+            name = "Error",
+            color = MainTheme.colors.error,
+        )
+    }
+}
+
+@Composable
+private fun ColorContent(
+    name: String,
+    color: Color,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        color = color,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+            modifier = modifier.padding(MainTheme.spacings.double),
+        ) {
+            TextBody1(text = name)
+        }
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ImageItems.kt

@@ -0,0 +1,13 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.res.painterResource
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.imageItems() {
+    sectionHeaderItem(text = "Images")
+    item {
+        Image(painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo")
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionHeaderItem.kt

@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.sectionHeaderItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextHeadline6(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SectionSubtitleItem.kt

@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.sectionSubtitleItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextSubtitle1(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/SelectionControlItems.kt

@@ -0,0 +1,39 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import app.k9mail.core.ui.compose.designsystem.atom.Checkbox
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
+
+fun LazyGridScope.selectionControlItems() {
+    sectionHeaderItem(text = "Selection Controls")
+    sectionSubtitleItem(text = "Checkbox")
+    captionItem(caption = "Checked") {
+        Checkbox(checked = true, onCheckedChange = {})
+    }
+    captionItem(caption = "Unchecked") {
+        Checkbox(checked = false, onCheckedChange = {})
+    }
+    captionItem(caption = "Disabled Checked") {
+        Checkbox(checked = true, onCheckedChange = {}, enabled = false)
+    }
+    captionItem(caption = "Disabled") {
+        Checkbox(checked = false, onCheckedChange = {}, enabled = false)
+    }
+}
+
+private fun LazyGridScope.captionItem(
+    caption: String,
+    content: @Composable () -> Unit,
+) {
+    item {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            content()
+            TextCaption(text = caption)
+        }
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeHeaderItem.kt

@@ -0,0 +1,16 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
+import app.k9mail.core.ui.compose.theme.MainTheme
+
+fun LazyGridScope.themeHeaderItem(
+    text: String,
+) {
+    item(span = { GridItemSpan(maxLineSpan) }) {
+        TextHeadline4(text = text, modifier = Modifier.padding(top = MainTheme.spacings.default))
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/ThemeSelectorItems.kt

@@ -0,0 +1,31 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import androidx.compose.ui.Modifier
+import app.k9mail.ui.catalog.CatalogTheme
+import app.k9mail.ui.catalog.CatalogThemeSelector
+import app.k9mail.ui.catalog.CatalogThemeVariant
+import app.k9mail.ui.catalog.CatalogThemeVariantSelector
+
+fun LazyGridScope.themeSelectorItems(
+    catalogTheme: CatalogTheme,
+    catalogThemeVariant: CatalogThemeVariant,
+    onThemeChange: () -> Unit,
+    onThemeVariantChange: () -> Unit,
+) {
+    item {
+        CatalogThemeSelector(
+            catalogTheme = catalogTheme,
+            modifier = Modifier.fillMaxWidth(),
+            onThemeChangeClick = onThemeChange,
+        )
+    }
+    item {
+        CatalogThemeVariantSelector(
+            catalogThemeVariant = catalogThemeVariant,
+            modifier = Modifier.fillMaxWidth(),
+            onThemeVariantChange = onThemeVariantChange,
+        )
+    }
+}

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/items/TypographyItems.kt

@@ -0,0 +1,33 @@
+package app.k9mail.ui.catalog.items
+
+import androidx.compose.foundation.lazy.grid.LazyGridScope
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody2
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline3
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextOverline
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
+import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle2
+
+fun LazyGridScope.typographyItems() {
+    sectionHeaderItem(text = "Typography")
+    item { TextHeadline1(text = "Headline1") }
+    item { TextHeadline2(text = "Headline2") }
+    item { TextHeadline3(text = "Headline3") }
+    item { TextHeadline4(text = "Headline4") }
+    item { TextHeadline5(text = "Headline5") }
+    item { TextHeadline6(text = "Headline6") }
+    item { TextSubtitle1(text = "Subtitle1") }
+    item { TextSubtitle2(text = "Subtitle2") }
+    item { TextBody1(text = "Body1") }
+    item { TextBody2(text = "Body2") }
+    item { TextButton(text = "Button") }
+    item { TextCaption(text = "Caption") }
+    item { TextOverline(text = "Overline") }
+}

app-ui-catalog/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Thunderbird Catalog</string>
+</resources>

app-ui-catalog/src/main/res/values/themes.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Theme.Thunderbird" parent="android:Theme.Material.Light.NoActionBar" />
+</resources>

core/ui/compose/common/README.md

@@ -0,0 +1,3 @@
+## Core - UI - Compose - Common
+
+This module contains common code for the compose UI.

core/ui/compose/common/build.gradle.kts

@@ -0,0 +1,8 @@
+plugins {
+    id(ThunderbirdPlugins.Library.androidCompose)
+}
+
+android {
+    namespace = "app.k9mail.core.ui.compose.common"
+    resourcePrefix = "core_ui_common_"
+}

core/ui/compose/common/src/main/kotlin/app/k9mail/core/ui/compose/common/DevicePreviews.kt

@@ -0,0 +1,16 @@
+package app.k9mail.core.ui.compose.common
+
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * A marker annotation for device previews.
+ *
+ * It's used to provide previews for a set of different devices and form factors.
+ */
+@Preview(name = "Phone", device = Devices.PHONE)
+@Preview(name = "Phone landscape", device = "spec:shape=Normal,width=891,height=411,unit=dp,dpi=420")
+@Preview(name = "Foldable", device = Devices.FOLDABLE)
+@Preview(name = "Tablet", device = Devices.TABLET)
+@Preview(name = "Desktop", device = Devices.DESKTOP)
+annotation class DevicePreviews

core/ui/compose/demo/src/main/java/app/k9mail/core/ui/compose/demo/MainView.kt

@@ -1,117 +0,0 @@
-package app.k9mail.core.ui.compose.demo
-
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-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.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import app.k9mail.core.ui.compose.designsystem.atom.Surface
-import app.k9mail.core.ui.compose.designsystem.atom.button.Button
-import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined
-import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody2
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextButton
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextCaption
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline1
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline3
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline5
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline6
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextOverline
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle1
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextSubtitle2
-import app.k9mail.core.ui.compose.theme.K9Theme
-import app.k9mail.core.ui.compose.theme.MainTheme
-import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
-
-@Composable
-fun MainView(
-    modifier: Modifier = Modifier,
-) {
-    val scrollState = rememberScrollState()
-
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .verticalScroll(scrollState)
-            .then(modifier),
-    ) {
-        K9Theme {
-            MainContent(name = "K-9")
-        }
-        K9Theme(darkTheme = true) {
-            MainContent(name = "K-9 dark")
-        }
-        ThunderbirdTheme {
-            MainContent(name = "Thunderbird")
-        }
-        ThunderbirdTheme(darkTheme = true) {
-            MainContent(name = "Thunderbird dark")
-        }
-    }
-}
-
-@Composable
-private fun MainContent(
-    name: String,
-    modifier: Modifier = Modifier,
-) {
-    Surface(
-        modifier = Modifier
-            .fillMaxWidth()
-            .then(modifier),
-    ) {
-        Column {
-            TextHeadline4(text = "$name theme")
-            Image(painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo")
-
-            ButtonContent()
-            TypographyContent()
-        }
-    }
-}
-
-@Composable
-private fun ButtonContent() {
-    Column {
-        TextHeadline6(text = "Buttons")
-
-        Button(text = "Button", onClick = { })
-        ButtonOutlined(text = "ButtonOutlined", onClick = { })
-        ButtonText(text = "ButtonText", onClick = { })
-    }
-}
-
-@Composable
-private fun TypographyContent() {
-    Column {
-        TextHeadline6(text = "Typography")
-
-        TextHeadline1(text = "Headline1")
-        TextHeadline2(text = "Headline2")
-        TextHeadline3(text = "Headline3")
-        TextHeadline4(text = "Headline4")
-        TextHeadline5(text = "Headline5")
-        TextHeadline6(text = "Headline6")
-        TextSubtitle1(text = "Subtitle1")
-        TextSubtitle2(text = "Subtitle2")
-        TextBody1(text = "Body1")
-        TextBody2(text = "Body2")
-        TextButton(text = "Button")
-        TextCaption(text = "Caption")
-        TextOverline(text = "Overline")
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-fun Preview() {
-    MainView()
-}

core/ui/compose/demo/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">K-9 Compose Demo</string>
-</resources>

core/ui/compose/demo/src/main/res/values/themes.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <style name="Theme.K9" parent="android:Theme.Material.Light.NoActionBar" />
-</resources>

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Checkbox.kt

@@ -0,0 +1,33 @@
+package app.k9mail.core.ui.compose.designsystem.atom
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import app.k9mail.core.ui.compose.theme.PreviewWithThemes
+import androidx.compose.material.Checkbox as MaterialCheckbox
+
+@Composable
+fun Checkbox(
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    MaterialCheckbox(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        modifier = modifier,
+        enabled = enabled,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun CheckboxPreview() {
+    PreviewWithThemes {
+        Checkbox(
+            checked = true,
+            onCheckedChange = {},
+        )
+    }
+}

core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Surface.kt

@@ -3,6 +3,7 @@ package app.k9mail.core.ui.compose.designsystem.atom
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.core.ui.compose.theme.PreviewWithThemes
@@ -11,12 +12,13 @@ import androidx.compose.material.Surface as MaterialSurface
 @Composable
 fun Surface(
     modifier: Modifier = Modifier,
+    color: Color = MainTheme.colors.surface,
     content: @Composable () -> Unit,
 ) {
     MaterialSurface(
         modifier = modifier,
         content = content,
-        color = MainTheme.colors.surface,
+        color = color,
     )
 }
 

core/ui/compose/theme/build.gradle.kts

@@ -8,5 +8,6 @@ android {
 }
 
 dependencies {
+    api(projects.core.ui.compose.common)
     implementation(libs.androidx.compose.material)
 }

settings.gradle.kts

@@ -21,6 +21,10 @@ rootProject.name = "k-9"
 
 includeBuild("build-plugin")
 
+include(
+    ":app-ui-catalog",
+)
+
 include(
     ":app:k9mail",
     ":app:ui:base",
@@ -42,7 +46,7 @@ include(
     ":core:common",
     ":core:testing",
     ":core:android:common",
-    ":core:ui:compose:demo",
+    ":core:ui:compose:common",
     ":core:ui:compose:designsystem",
     ":core:ui:compose:theme",
 )