Feat: Migrate :core:designsystem to KMP #2290

biplab1 · 2025-01-20T09:30:38Z

Didn't create a Jira ticket, click here to create new.

Please Add Screenshots If there are any UI changes.

Before	After

Please make sure these boxes are checked before submitting your pull request - thanks!

Run the static analysis check ./gradlew check or ci-prepush.sh to make sure you didn't break anything
If you have multiple commits please combine them into one commit by squashing them.

core/designsystem/build.gradle.kts

biplab1 · 2025-01-23T18:59:26Z

...signsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosDrawingCanvas.kt

@@ -23,6 +21,7 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.input.pointer.pointerInteropFilter


I couldn't resolve the pointerInteropFilter and android.view.MotionEvent issue.

Don't worry, we'll fix it later for now just move this file to androidMain source-set

MifosDrawingCanvas.kt moved to androidMain source-set

biplab1 · 2025-01-23T19:00:52Z

.../designsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosSweetError.kt

-import com.mifos.core.designsystem.theme.DarkGray
+import org.jetbrains.compose.resources.stringResource
+import androidclient.core.designsystem.generated.resources.Res
+import androidclient.core.designsystem.generated.resources.core_designsystem_ic_error_black_24dp


I am not satisfied with this resolution of adding the string resources, it temporary resolves the issue, however, I don't think it is an optimized approach.

You could change the package name in build.gradle.kts file and you've to run the command again to generate resources and update all usages with new package name..

./gradlew :core:designsystem:generateResourceAccessorsForCommonMain

designsystem/build.gradle.kts compose.resources { publicResClass = true generateResClass = always packageOfResClass = "core.designsystem.generated.resources" }

and after running the above command all generated resources can be accesbile using core.designsystem.generated.resources.core_designsystem_ic_error_black_24dp etc..

I will do as suggested.

This is done.

biplab1 · 2025-01-23T19:31:41Z

core/designsystem/src/commonMain/kotlin/com/mifos/core/designsystem/theme/Type.kt

+ */
+package com.mifos.core.designsystem.theme
+
+import androidclient.core.designsystem.generated.resources.Res


Here I tried using android_client instead of androidclient, however, the generated resources in build folder has package named androidclient and not android_client

Resolved in previous comment.

niyajali · 2025-01-27T20:44:49Z

...signsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosDrawingCanvas.kt

@@ -23,6 +21,7 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.input.pointer.pointerInteropFilter


Don't worry, we'll fix it later for now just move this file to androidMain source-set

niyajali · 2025-01-27T20:46:27Z

...signsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosEditTextField.kt

@@ -80,7 +75,7 @@ fun MifosOutlinedTextField(
                Icon(
                    imageVector = icon,
                    contentDescription = null,
-                    tint = if (isSystemInDarkTheme()) White else DarkGray,
+                    tint = if (isSystemInDarkTheme()) onPrimaryLight else secondaryLight,


Remove this line, no need to add any direct color for different modes, it will automatically applied based on theme mode.

Line removed.

niyajali · 2025-01-27T20:47:42Z

...signsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosEditTextField.kt

@@ -90,7 +85,7 @@ fun MifosOutlinedTextField(
        maxLines = maxLines,
        singleLine = singleLine,
        colors = OutlinedTextFieldDefaults.colors(
-            focusedBorderColor = if (isSystemInDarkTheme()) BluePrimaryDark else BluePrimary,
+            focusedBorderColor = if (isSystemInDarkTheme()) primaryDark else primaryLight,


remove this too, and recheck every composable if we are applying color directly instead of material theme remove that, no need to configure such thing

Removed the mentioned line, I will check the other composables.

niyajali · 2025-01-27T20:48:45Z

...esignsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosOtpTextField.kt

+            Text(
+                text = "Invalid OTP",
+                style = MaterialTheme.typography.bodyMedium,
+                color = Color.Red,


Remove this too

Removed the line. Just to let you know that this was taken from kmp-template, this has also been used in mifos-mobile :core:designsystem

niyajali · 2025-01-27T20:50:22Z

...esignsystem/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosOtpTextField.kt

+            .wrapContentHeight(align = Alignment.CenterVertically),
+        text = char,
+        style = MaterialTheme.typography.headlineSmall,
+        color = if (isFocused) {


use Material Color like for focused use secondary and if not focused use teritory/surface color etc

Used Material Color as you suggested.

niyajali · 2025-01-27T20:50:48Z

...system/src/commonMain/kotlin/com/mifos/core/designsystem/component/MifosProgressIndicator.kt

@@ -74,7 +70,7 @@ fun MifosCircularProgress(
                .height(60.dp)
                .padding(8.dp),
            strokeWidth = 4.dp,
-            color = DarkGray,
+            color = secondaryLight,


remove this too

Removed the line.

niyajali · 2025-01-27T21:15:09Z

@biplab1 I'm commenting on one thread since you had to change all composable, and I've commented on a few components above

Remove explicitly/directly defined colors from all composable, if we're fully customizing or creating our own component for eg creating our own customized TextField instead of the default one, then use material colors
use ImageVector instead of Painter since It's marked as Stable which means it'll survive recomposition
Use Material Typography instead of like in some files we're defining font size as .sp instead we could use MaterialThem.typography.body/label etc based on the composable
If we're defining size in official composable for example, in TopBar title we're providing 24.sp, those things are unnecessary because all colors, and typography are configured already in TopBar composable no need to provide it explicitly.
Remove all explicitly defined colors from icon/ text/image etc or any composable that we're using official one and customize a little bit

biplab1 · 2025-01-29T13:28:50Z

@niyajali I am working to implement all your suggestions.

biplab1 · 2025-01-29T17:27:13Z

I couldn't find the component related to 4th point. Rest of the points I think I have implemented.

Directory restructure :core:designsystem to KMP

58fd1d2

niyajali requested changes Jan 20, 2025

View reviewed changes

core/designsystem/build.gradle.kts Show resolved Hide resolved

biplab1 changed the title ~~Directory restructure :core:designsystem to KMP~~ Feat: Migrate :core:designsystem to KMP Jan 21, 2025

biplab1 added 4 commits January 21, 2025 19:55

Feat: Configure theme and color

7e3655e

Updated components, theme, utils, colors

64e93bc

Update files after ci-prepush run

f1395fe

Fix issues related to stringResources and R class

781bcb8

biplab1 commented Jan 23, 2025

View reviewed changes

Update files after ci-prepush run

c49dfdb

biplab1 commented Jan 23, 2025

View reviewed changes

niyajali requested changes Jan 27, 2025

View reviewed changes

Separate utils and utility

f0a9f5b

Refactor: Remove explicit color, size, and typography definitions

766fd50

biplab1 marked this pull request as ready for review January 29, 2025 17:37

Remove mistakenly added file

9896ec8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Migrate :core:designsystem to KMP #2290

Feat: Migrate :core:designsystem to KMP #2290

biplab1 commented Jan 20, 2025

biplab1 Jan 23, 2025

niyajali Jan 27, 2025

biplab1 Jan 28, 2025

biplab1 Jan 23, 2025 •

edited

Loading

niyajali Jan 27, 2025

biplab1 Jan 29, 2025

biplab1 Jan 29, 2025

biplab1 Jan 23, 2025

biplab1 Jan 29, 2025

niyajali Jan 27, 2025

niyajali Jan 27, 2025

biplab1 Jan 28, 2025

niyajali Jan 27, 2025

biplab1 Jan 28, 2025

niyajali Jan 27, 2025

biplab1 Jan 28, 2025 •

edited

Loading

niyajali Jan 27, 2025

biplab1 Jan 28, 2025

niyajali Jan 27, 2025

biplab1 Jan 28, 2025

niyajali commented Jan 27, 2025 •

edited

Loading

biplab1 commented Jan 29, 2025

biplab1 commented Jan 29, 2025

Feat: Migrate :core:designsystem to KMP #2290

Are you sure you want to change the base?

Feat: Migrate :core:designsystem to KMP #2290

Conversation

biplab1 commented Jan 20, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

biplab1 Jan 23, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

biplab1 Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

niyajali commented Jan 27, 2025 • edited Loading

biplab1 commented Jan 29, 2025

biplab1 commented Jan 29, 2025

biplab1 Jan 23, 2025 •

edited

Loading

biplab1 Jan 28, 2025 •

edited

Loading

niyajali commented Jan 27, 2025 •

edited

Loading