Feat: [:core:designsystem] - Migrated to KMP with CMP Library (#1774)

Author: niyajali

core/designsystem/build.gradle.kts

@@ -74,10 +74,19 @@ kotlin {
             implementation(compose.uiUtil)
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
+            implementation(libs.back.handler)
+            implementation(libs.moko.permission)
+            implementation(libs.moko.permission.compose)
         }
     }
 }
 
+compose.resources {
+    publicResClass = true
+    packageOfResClass = "org.mifospay.core.designsystem.resources"
+    generateResClass = always
+}
+
 dependencies {
     lintPublish(projects.lint)
 }

core/designsystem/src/main/AndroidManifest.xml core/designsystem/src/androidMain/AndroidManifest.xml

@@ -30,15 +30,16 @@ import androidx.core.content.ContextCompat
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 
+// TODO:: Support for compose multiplatform
 @Suppress("LongMethod", "CyclomaticComplexMethod")
 @Composable
 fun PermissionBox(
+    title: String,
+    confirmButtonText: String,
+    dismissButtonText: String,
     requiredPermissions: List<String>,
-    title: Int,
-    confirmButtonText: Int,
-    dismissButtonText: Int,
     modifier: Modifier = Modifier,
-    description: Int? = null,
+    description: String? = null,
     onGranted: @Composable (() -> Unit)? = null,
 ) {
     val context = LocalContext.current

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/PermissionBox.kt core/designsystem/src/androidMain/kotlin/org/mifospay/core/designsystem/component/PermissionBox.kt

@@ -16,27 +16,26 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 
 @Composable
 fun MifosDialogBox(
+    title: String,
     showDialogState: Boolean,
-    onDismiss: () -> Unit,
-    title: Int,
-    confirmButtonText: Int,
+    confirmButtonText: String,
+    dismissButtonText: String,
     onConfirm: () -> Unit,
-    dismissButtonText: Int,
+    onDismiss: () -> Unit,
     modifier: Modifier = Modifier,
-    message: Int? = null,
+    message: String? = null,
 ) {
     if (showDialogState) {
         AlertDialog(
             modifier = modifier,
             onDismissRequest = onDismiss,
-            title = { Text(text = stringResource(id = title)) },
+            title = { Text(text = title) },
             text = {
                 if (message != null) {
-                    Text(text = stringResource(id = message))
+                    Text(text = message)
                 }
             },
             confirmButton = {
@@ -45,12 +44,12 @@ fun MifosDialogBox(
                         onConfirm()
                     },
                 ) {
-                    Text(stringResource(id = confirmButtonText))
+                    Text(text = confirmButtonText)
                 }
             },
             dismissButton = {
                 TextButton(onClick = onDismiss) {
-                    Text(stringResource(id = dismissButtonText))
+                    Text(text = dismissButtonText)
                 }
             },
         )

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/AlertDialog.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/AlertDialog.kt

@@ -9,29 +9,22 @@
  */
 package org.mifospay.core.designsystem.component
 
-import android.content.res.Configuration
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.LocalAbsoluteTonalElevation
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
 import org.mifospay.core.designsystem.theme.GradientColors
 import org.mifospay.core.designsystem.theme.LocalBackgroundTheme
 import org.mifospay.core.designsystem.theme.LocalGradientColors
 import org.mifospay.core.designsystem.theme.MifosTheme
-import kotlin.math.tan
 
 /**
  * The main background for the app.
@@ -66,14 +59,13 @@ fun MifosBackground(
  * @param gradientColors The gradient colors to be rendered.
  * @param content The background content.
  */
+// TODO:: Fix the gradient background based on NewUI
 @Composable
 fun MifosGradientBackground(
     modifier: Modifier = Modifier,
     gradientColors: GradientColors = LocalGradientColors.current,
     content: @Composable () -> Unit,
 ) {
-    val currentTopColor by rememberUpdatedState(gradientColors.top)
-    val currentBottomColor by rememberUpdatedState(gradientColors.bottom)
     Surface(
         color = if (gradientColors.container == Color.Unspecified) {
             Color.Transparent
@@ -84,48 +76,7 @@ fun MifosGradientBackground(
     ) {
         Box(
             Modifier
-                .fillMaxSize()
-                .drawWithCache {
-                    // Compute the start and end coordinates such that the gradients are angled 11.06
-                    // degrees off the vertical axis
-                    val offset = size.height * tan(
-                        Math
-                            .toRadians(11.06)
-                            .toFloat(),
-                    )
-
-                    val start = Offset(size.width / 2 + offset / 2, 0f)
-                    val end = Offset(size.width / 2 - offset / 2, size.height)
-
-                    // Create the top gradient that fades out after the halfway point vertically
-                    val topGradient = Brush.linearGradient(
-                        0f to if (currentTopColor == Color.Unspecified) {
-                            Color.Transparent
-                        } else {
-                            currentTopColor
-                        },
-                        0.724f to Color.Transparent,
-                        start = start,
-                        end = end,
-                    )
-                    // Create the bottom gradient that fades in before the halfway point vertically
-                    val bottomGradient = Brush.linearGradient(
-                        0.2552f to Color.Transparent,
-                        1f to if (currentBottomColor == Color.Unspecified) {
-                            Color.Transparent
-                        } else {
-                            currentBottomColor
-                        },
-                        start = start,
-                        end = end,
-                    )
-
-                    onDrawBehind {
-                        // There is overlap here, so order is important
-                        drawRect(topGradient)
-                        drawRect(bottomGradient)
-                    }
-                },
+                .fillMaxSize(),
         ) {
             content()
         }
@@ -136,8 +87,7 @@ fun MifosGradientBackground(
  * Multipreview annotation that represents light and dark themes. Add this annotation to a
  * composable to render the both themes.
  */
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
+@Preview
 annotation class ThemePreviews
 
 @ThemePreviews

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Background.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/Background.kt

@@ -9,7 +9,6 @@
  */
 package org.mifospay.core.designsystem.component
 
-import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
@@ -24,9 +23,10 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.arkivanov.essenty.backhandler.BackCallback
 import kotlinx.coroutines.launch
+import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -48,7 +48,7 @@ fun MifosBottomSheet(
         onDismiss.invoke()
     }
 
-    BackHandler(modalSheetState.isVisible) {
+    BackCallback(modalSheetState.isVisible) {
         dismissSheet()
     }
 
@@ -70,9 +70,12 @@ fun MifosBottomSheet(
 @Preview
 @Composable
 fun MifosBottomSheetPreview() {
-    MifosBottomSheet({
-        Box {
-            Modifier.height(100.dp)
-        }
-    }, {})
+    MifosBottomSheet(
+        content = {
+            Box {
+                Modifier.height(100.dp)
+            }
+        },
+        onDismiss = {},
+    )
 }

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/BottomSheet.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/BottomSheet.kt

@@ -46,7 +46,6 @@ import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import org.mifospay.core.designsystem.theme.MifosTheme
@@ -189,7 +188,7 @@ fun MfLoadingWheel(
     }
 }
 
-@Preview
+@ThemePreviews
 @Composable
 fun MifosLoadingWheelPreview() {
     MifosTheme {
@@ -199,7 +198,7 @@ fun MifosLoadingWheelPreview() {
     }
 }
 
-@Preview
+@ThemePreviews
 @Composable
 fun NiaOverlayLoadingWheelPreview() {
     MifosTheme {

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Button.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/Button.kt

@@ -21,7 +21,7 @@ import androidx.compose.ui.graphics.Color
 fun MifosScaffold(
     backPress: () -> Unit,
     modifier: Modifier = Modifier,
-    topBarTitle: Int? = null,
+    topBarTitle: String? = null,
     floatingActionButtonContent: FloatingActionButtonContent? = null,
     snackbarHost: @Composable () -> Unit = {},
     scaffoldContent: @Composable (PaddingValues) -> Unit = {},

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Card.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/Card.kt

@@ -19,21 +19,20 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 import org.mifospay.core.designsystem.icon.MifosIcons
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MifosTopBar(
-    topBarTitle: Int,
+    topBarTitle: String,
     backPress: () -> Unit,
     modifier: Modifier = Modifier,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
     TopAppBar(
         title = {
             Text(
-                text = stringResource(id = topBarTitle),
+                text = topBarTitle,
                 style = MaterialTheme.typography.titleLarge,
                 color = MaterialTheme.colorScheme.onSurface,
             )
@@ -54,4 +53,4 @@ fun MifosTopBar(
         actions = actions,
         modifier = modifier,
     )
-}
+}

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/LoadingWheel.kt core/designsystem/src/commonMain/kotlin/org/mifospay/core/designsystem/component/LoadingWheel.kt

@@ -9,32 +9,30 @@
  */
 package org.mifospay.core.designsystem.component
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.sp
 
 @Composable
 fun MifosOutlinedTextField(
-    label: Int,
+    label: String,
     value: String,
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     maxLines: Int = 1,
     singleLine: Boolean = true,
-    icon: Int? = null,
+    icon: ImageVector? = null,
     error: Boolean = false,
     visualTransformation: VisualTransformation = VisualTransformation.None,
     trailingIcon: @Composable (() -> Unit)? = null,
@@ -43,18 +41,13 @@ fun MifosOutlinedTextField(
     OutlinedTextField(
         value = value,
         onValueChange = onValueChange,
-        label = { Text(stringResource(id = label)) },
+        label = { Text(label) },
         modifier = modifier,
-        leadingIcon =
-        if (icon != null) {
+        leadingIcon = if (icon != null) {
             {
-                Image(
-                    painter = painterResource(id = icon),
-                    contentDescription = null,
-                    colorFilter =
-                    ColorFilter.tint(
-                        MaterialTheme.colorScheme.onSurface,
-                    ),
+                Icon(
+                    imageVector = icon,
+                    contentDescription = icon.name,
                 )
             }
         } else {
@@ -63,13 +56,11 @@ fun MifosOutlinedTextField(
         trailingIcon = trailingIcon,
         maxLines = maxLines,
         singleLine = singleLine,
-        colors =
-        OutlinedTextFieldDefaults.colors(
+        colors = OutlinedTextFieldDefaults.colors(
             focusedBorderColor = MaterialTheme.colorScheme.onSurface,
             focusedLabelColor = MaterialTheme.colorScheme.onSurface,
         ),
-        textStyle =
-        LocalDensity.current.run {
+        textStyle = LocalDensity.current.run {
             TextStyle(fontSize = 18.sp, color = MaterialTheme.colorScheme.onSurface)
         },
         keyboardOptions = keyboardOptions,