refactor(preview): replace @Preview with @ComponentPreview and update dependencies
Build and Publish Docker Images / build-and-push (., backend/infrastructure/gateway/Dockerfile, api-gateway, api-gateway) (push) Failing after 2m56s
Build and Publish Docker Images / build-and-push (., backend/services/ping/Dockerfile, ping-service, ping-service) (push) Failing after 3m12s
Build and Publish Docker Images / build-and-push (., config/docker/caddy/web-app/Dockerfile, web-app, web-app) (push) Failing after 1m19s
Build and Publish Docker Images / build-and-push (., config/docker/keycloak/Dockerfile, keycloak, keycloak) (push) Successful in 2m19s

- Replaced all occurrences of `@Preview` with the standardized `@ComponentPreview` annotation for a consistent preview experience across modules.
- Added `compose.uiTooling` dependency to `core/design-system` for enhanced preview functionality.

Signed-off-by: Stefan Mogeritsch <stefan.mo.co@gmail.com>
This commit is contained in:
2026-03-26 16:59:31 +01:00
parent c2b3b5889f
commit ae64714465
5 changed files with 62 additions and 46 deletions
@@ -26,5 +26,8 @@ kotlin {
implementation(compose.components.resources) implementation(compose.components.resources)
implementation(libs.bundles.kmp.common) implementation(libs.bundles.kmp.common)
} }
jvmMain.dependencies {
implementation(compose.uiTooling)
}
} }
} }
@@ -0,0 +1,23 @@
package at.mocode.wui.preview
import androidx.compose.ui.tooling.preview.Preview
/**
* A standardized preview annotation for UI components.
*
* This annotation provides a consistent size and background for component previews.
* It helps in maintaining a uniform look for previews across the project.
*
* Groups can be used to organize previews in the IDE.
*
* Usage:
* ```
* @ComponentPreview
* @Composable
* fun MyButtonPreview() {
* MyButton()
* }
* ```
*/
@Preview(showBackground = true, widthDp = 800, heightDp = 400)
annotation class ComponentPreview
@@ -2,13 +2,9 @@ package at.mocode.ping.feature.presentation
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview import at.mocode.ping.api.*
import at.mocode.ping.api.EnhancedPingResponse
import at.mocode.ping.api.HealthResponse
import at.mocode.ping.api.PingApi
import at.mocode.ping.api.PingEvent
import at.mocode.ping.api.PingResponse
import at.mocode.ping.feature.domain.PingSyncService import at.mocode.ping.feature.domain.PingSyncService
import at.mocode.wui.preview.ComponentPreview
// ───────────────────────────────────────────────────────────────────────────── // ─────────────────────────────────────────────────────────────────────────────
// Fake-Implementierungen für Preview (kein Koin, kein Netzwerk nötig) // Fake-Implementierungen für Preview (kein Koin, kein Netzwerk nötig)
@@ -53,7 +49,7 @@ private class PreviewPingViewModel(state: PingUiState) :
// Previews // Previews
// ───────────────────────────────────────────────────────────────────────────── // ─────────────────────────────────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewPingScreen_Empty() { fun PreviewPingScreen_Empty() {
MaterialTheme { MaterialTheme {
@@ -64,7 +60,7 @@ fun PreviewPingScreen_Empty() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewPingScreen_WithData() { fun PreviewPingScreen_WithData() {
MaterialTheme { MaterialTheme {
@@ -84,7 +80,7 @@ fun PreviewPingScreen_WithData() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewPingScreen_Loading() { fun PreviewPingScreen_Loading() {
MaterialTheme { MaterialTheme {
@@ -95,7 +91,7 @@ fun PreviewPingScreen_Loading() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewPingScreen_Error() { fun PreviewPingScreen_Error() {
MaterialTheme { MaterialTheme {
@@ -6,7 +6,9 @@ import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.Logout import androidx.compose.material.icons.automirrored.filled.Logout
import androidx.compose.material3.* import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
@@ -15,19 +17,18 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import at.mocode.frontend.core.navigation.AppScreen import at.mocode.frontend.core.navigation.AppScreen
import at.mocode.veranstaltung.feature.presentation.AdminUebersichtScreen import at.mocode.ping.feature.presentation.PingScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterAuswahlScreen import at.mocode.ping.feature.presentation.PingViewModel
import at.mocode.veranstalter.feature.presentation.VeranstalterNeuScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterDetailScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungUebersichtScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungDetailScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungNeuScreen
import at.mocode.turnier.feature.presentation.TurnierDetailScreen import at.mocode.turnier.feature.presentation.TurnierDetailScreen
import at.mocode.turnier.feature.presentation.TurnierNeuScreen import at.mocode.turnier.feature.presentation.TurnierNeuScreen
import at.mocode.zns.feature.presentation.StammdatenImportScreen import at.mocode.veranstalter.feature.presentation.VeranstalterAuswahlScreen
import at.mocode.ping.feature.presentation.PingScreen import at.mocode.veranstalter.feature.presentation.VeranstalterDetailScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterNeuScreen
import at.mocode.veranstaltung.feature.presentation.AdminUebersichtScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungDetailScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungNeuScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungUebersichtScreen
import org.koin.compose.koinInject import org.koin.compose.koinInject
import at.mocode.ping.feature.presentation.PingViewModel
// Primärfarbe der TopBar (kann später ins Theme ausgelagert werden) // Primärfarbe der TopBar (kann später ins Theme ausgelagert werden)
private val TopBarColor = Color(0xFF1E3A8A) private val TopBarColor = Color(0xFF1E3A8A)
@@ -72,6 +73,7 @@ fun DesktopMainLayout(
* - Veranstaltung: "🏠 Admin - Verwaltung / Veranstaltung #<id>" * - Veranstaltung: "🏠 Admin - Verwaltung / Veranstaltung #<id>"
* - Turnier: "🏠 Admin - Verwaltung / Veranstaltung #<id> / Turnier <tid>" * - Turnier: "🏠 Admin - Verwaltung / Veranstaltung #<id> / Turnier <tid>"
*/ */
@Composable @Composable
private fun DesktopTopBar( private fun DesktopTopBar(
currentScreen: AppScreen, currentScreen: AppScreen,
@@ -1,21 +1,13 @@
package at.mocode.desktop.screens.preview package at.mocode.desktop.screens.preview
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import at.mocode.turnier.feature.presentation.*
import at.mocode.veranstalter.feature.presentation.VeranstalterAuswahlScreen import at.mocode.veranstalter.feature.presentation.VeranstalterAuswahlScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterNeuScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterDetailScreen import at.mocode.veranstalter.feature.presentation.VeranstalterDetailScreen
import at.mocode.veranstalter.feature.presentation.VeranstalterNeuScreen
import at.mocode.veranstaltung.feature.presentation.VeranstaltungUebersichtScreen import at.mocode.veranstaltung.feature.presentation.VeranstaltungUebersichtScreen
import at.mocode.turnier.feature.presentation.TurnierDetailScreen import at.mocode.wui.preview.ComponentPreview
import at.mocode.turnier.feature.presentation.StammdatenTabContent
import at.mocode.turnier.feature.presentation.OrganisationTabContent
import at.mocode.turnier.feature.presentation.BewerbeTabContent
import at.mocode.turnier.feature.presentation.ArtikelTabContent
import at.mocode.turnier.feature.presentation.AbrechnungTabContent
import at.mocode.turnier.feature.presentation.NennungenTabContent
import at.mocode.turnier.feature.presentation.StartlistenTabContent
import at.mocode.turnier.feature.presentation.ErgebnislistenTabContent
// ───────────────────────────────────────────────────────────────────────────── // ─────────────────────────────────────────────────────────────────────────────
// Compose Desktop Previews alle wichtigen Screens auf einen Blick // Compose Desktop Previews alle wichtigen Screens auf einen Blick
@@ -26,7 +18,7 @@ import at.mocode.turnier.feature.presentation.ErgebnislistenTabContent
// ── Veranstalter-Auswahl ───────────────────────────────────────────────────── // ── Veranstalter-Auswahl ─────────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewVeranstalterAuswahlScreen() { fun PreviewVeranstalterAuswahlScreen() {
MaterialTheme { MaterialTheme {
@@ -40,7 +32,7 @@ fun PreviewVeranstalterAuswahlScreen() {
// ── Neuer Veranstalter ─────────────────────────────────────────────────────── // ── Neuer Veranstalter ───────────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewVeranstalterNeuScreen() { fun PreviewVeranstalterNeuScreen() {
MaterialTheme { MaterialTheme {
@@ -53,7 +45,7 @@ fun PreviewVeranstalterNeuScreen() {
// ── Veranstalter-Detail ────────────────────────────────────────────────────── // ── Veranstalter-Detail ──────────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewVeranstalterDetailScreen() { fun PreviewVeranstalterDetailScreen() {
MaterialTheme { MaterialTheme {
@@ -68,7 +60,7 @@ fun PreviewVeranstalterDetailScreen() {
// ── Veranstaltung-Übersicht ────────────────────────────────────────────────── // ── Veranstaltung-Übersicht ──────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewVeranstaltungUebersichtScreen() { fun PreviewVeranstaltungUebersichtScreen() {
MaterialTheme { MaterialTheme {
@@ -87,7 +79,7 @@ fun PreviewVeranstaltungUebersichtScreen() {
// ── Turnier-Detail (alle Tabs) ─────────────────────────────────────────────── // ── Turnier-Detail (alle Tabs) ───────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierDetailScreen() { fun PreviewTurnierDetailScreen() {
MaterialTheme { MaterialTheme {
@@ -101,7 +93,7 @@ fun PreviewTurnierDetailScreen() {
// ── Turnier-Tabs einzeln ───────────────────────────────────────────────────── // ── Turnier-Tabs einzeln ─────────────────────────────────────────────────────
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierStammdatenTab() { fun PreviewTurnierStammdatenTab() {
MaterialTheme { MaterialTheme {
@@ -109,7 +101,7 @@ fun PreviewTurnierStammdatenTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierOrganisationTab() { fun PreviewTurnierOrganisationTab() {
MaterialTheme { MaterialTheme {
@@ -117,7 +109,7 @@ fun PreviewTurnierOrganisationTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierBewerbeTab() { fun PreviewTurnierBewerbeTab() {
MaterialTheme { MaterialTheme {
@@ -125,7 +117,7 @@ fun PreviewTurnierBewerbeTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierArtikelTab() { fun PreviewTurnierArtikelTab() {
MaterialTheme { MaterialTheme {
@@ -133,7 +125,7 @@ fun PreviewTurnierArtikelTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierAbrechnungTab() { fun PreviewTurnierAbrechnungTab() {
MaterialTheme { MaterialTheme {
@@ -141,7 +133,7 @@ fun PreviewTurnierAbrechnungTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierNennungenTab() { fun PreviewTurnierNennungenTab() {
MaterialTheme { MaterialTheme {
@@ -149,7 +141,7 @@ fun PreviewTurnierNennungenTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierStartlistenTab() { fun PreviewTurnierStartlistenTab() {
MaterialTheme { MaterialTheme {
@@ -157,7 +149,7 @@ fun PreviewTurnierStartlistenTab() {
} }
} }
@Preview @ComponentPreview
@Composable @Composable
fun PreviewTurnierErgebnislistenTab() { fun PreviewTurnierErgebnislistenTab() {
MaterialTheme { MaterialTheme {
@@ -168,7 +160,7 @@ fun PreviewTurnierErgebnislistenTab() {
// ── Stammdaten-Import ──────────────────────────────────────────────────────── // ── Stammdaten-Import ────────────────────────────────────────────────────────
// StammdatenImportScreen benötigt einen ZnsImportViewModel (Koin) Preview nur als Hinweis. // StammdatenImportScreen benötigt einen ZnsImportViewModel (Koin) Preview nur als Hinweis.
// @Preview // @ComponentPreview
// @Composable // @Composable
// fun PreviewStammdatenImportScreen() { // fun PreviewStammdatenImportScreen() {
// MaterialTheme { StammdatenImportScreen() } // MaterialTheme { StammdatenImportScreen() }