refactor(design-system): consolidate components and standardize naming with Ms prefix

- Removed redundant files: `AppFooter`, `AppHeader`, `AppScaffold`, `LoadingIndicator`, `MeldestelleButton`, `MeldestelleTextField`, `DashboardCard`.
- Introduced `MsFooter`, `MsHeader`, `MsScaffold`, `MsLoadingIndicator`, `MsButton`, `MsTextField`, `MsCard` with standardized implementation and naming.
- Updated references in `profile-feature` and `ping-feature` to use the new components.
- Aligned with roadmap goals for a consistent, reusable, and high-density design system.

Signed-off-by: Stefan Mogeritsch <stefan.mo.co@gmail.com>
This commit is contained in:
2026-03-31 10:07:10 +02:00
parent 5065febca2
commit c20899752a
11 changed files with 96 additions and 73 deletions
@@ -1,44 +0,0 @@
package at.mocode.frontend.core.designsystem.components
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import at.mocode.frontend.core.designsystem.theme.Dimens
/**
* Ein kompakter Button für unsere High-Density UI.
*
* Warum ein eigener Button?
* Der Standard Material3 Button ist sehr hoch (40dp+) und hat viel Padding.
* Das verschwendet Platz in Tabellen oder Toolbars.
* Unser 'DenseButton' ist fix 32dp hoch- und hat weniger Innenabstand.
*/
@Composable
fun DenseButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
containerColor: Color = MaterialTheme.colorScheme.primary
) {
Button(
onClick = onClick,
enabled = enabled,
modifier = modifier.height(32.dp), // Fixe, kompakte Höhe
shape = MaterialTheme.shapes.small, // Nutzt unsere 4dp Rundung
colors = ButtonDefaults.buttonColors(containerColor = containerColor),
contentPadding = PaddingValues(horizontal = Dimens.SpacingM, vertical = 0.dp) // Wenig Padding
) {
Text(
text = text,
style = MaterialTheme.typography.labelMedium // Kleinere Schrift
)
}
}
@@ -17,7 +17,7 @@ enum class ButtonSize {
}
@Composable
fun MeldestelleButton(
fun MsButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
@@ -96,7 +96,7 @@ fun PrimaryButton(
enabled: Boolean = true,
isLoading: Boolean = false,
fullWidth: Boolean = false
) = MeldestelleButton(
) = MsButton(
text = text,
onClick = onClick,
modifier = modifier,
@@ -115,7 +115,7 @@ fun SecondaryButton(
enabled: Boolean = true,
isLoading: Boolean = false,
fullWidth: Boolean = false
) = MeldestelleButton(
) = MsButton(
text = text,
onClick = onClick,
modifier = modifier,
@@ -20,7 +20,7 @@ import at.mocode.frontend.core.designsystem.theme.Dimens
* Im Enterprise-Kontext sind flache Cards mit dünnem Border (1px) oft sauberer.
*/
@Composable
fun DashboardCard(
fun MsCard(
modifier: Modifier = Modifier,
content: @Composable ColumnScope.() -> Unit
) {
@@ -13,7 +13,7 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
@Composable
fun AppFooter() {
fun MsFooter() {
Box(
modifier = Modifier
.fillMaxWidth()
@@ -12,7 +12,7 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
@Composable
fun AppHeader(
fun MsHeader(
isAuthenticated: Boolean,
username: String?,
onNavigateToLogin: (() -> Unit)? = null,
@@ -1,7 +1,10 @@
package at.mocode.frontend.core.designsystem.components
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@@ -13,7 +16,7 @@ enum class LoadingSize {
}
@Composable
fun LoadingIndicator(
fun MsLoadingIndicator(
modifier: Modifier = Modifier,
size: LoadingSize = LoadingSize.MEDIUM,
message: String? = null
@@ -61,7 +64,7 @@ fun FullScreenLoading(
modifier = modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
LoadingIndicator(
MsLoadingIndicator(
size = LoadingSize.LARGE,
message = message
)
@@ -79,7 +82,7 @@ fun InlineLoading(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
LoadingIndicator(
MsLoadingIndicator(
size = LoadingSize.SMALL,
message = message
)
@@ -10,13 +10,13 @@ import androidx.compose.ui.Modifier
@Suppress("unused")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppScaffold(
fun MsScaffold(
header: @Composable () -> Unit = {
AppHeader(isAuthenticated = false, username = null)
MsHeader(isAuthenticated = false, username = null)
},
content: @Composable (PaddingValues) -> Unit,
footer: @Composable () -> Unit = {
AppFooter()
MsFooter()
},
) {
Scaffold(
@@ -16,7 +16,7 @@ import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
@Composable
fun MeldestelleTextField(
fun MsTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
@@ -109,7 +109,7 @@ fun MeldestellePasswordField(
) {
var passwordVisible by remember { mutableStateOf(false) }
MeldestelleTextField(
MsTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier,
@@ -152,7 +152,7 @@ fun MeldestelleEmailField(
imeAction: ImeAction = ImeAction.Next,
keyboardActions: KeyboardActions = KeyboardActions.Default
) {
MeldestelleTextField(
MsTextField(
value = value,
onValueChange = onValueChange,
modifier = modifier,