- Add new design system components: KdAlertDialog, KdTextButton, KdCircularProgressIndicator, and KdTopAppBar.

- Add `modifier` parameter to existing design system components: `KdScaffold`, `KdText`, `KdIcon`, and `KdIconButton`.
- Update Konsist tests to ensure all Material3 components are wrapped by the design system and exclude ktlint suppressed files.
- Add ktlint plugin and dependency to `design-system` module.
- Suppress ktlint for `platform.kt` files.

Author: yesshreyes

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/components/ShowAlertDialog.kt

@@ -1,10 +1,10 @@
 package com.developersbreach.kotlindictionarymultiplatform.ui.components
 
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.developersbreach.designsystem.components.KdAlertDialog
 import com.developersbreach.designsystem.components.KdText
+import com.developersbreach.designsystem.components.KdTextButton
 import kotlindictionarymultiplatform.composeapp.generated.resources.Res
 import kotlindictionarymultiplatform.composeapp.generated.resources.ok
 import org.jetbrains.compose.resources.stringResource
@@ -16,14 +16,31 @@ fun ShowAlertDialog(
     title: String,
     description: String,
 ) {
-    AlertDialog(
+    KdAlertDialog(
         onDismissRequest = onButtonClick,
-        title = { KdText(text = title) },
-        text = { KdText(text = description) },
+        title = {
+            KdText(
+                modifier = Modifier,
+                text = title,
+            )
+        },
+        text = {
+            KdText(
+                modifier = Modifier,
+                text = description,
+            )
+        },
         confirmButton = {
-            TextButton(onClick = onButtonClick) {
-                KdText(text = stringResource(Res.string.ok))
-            }
+            KdTextButton(
+                modifier = Modifier,
+                onClick = onButtonClick,
+                content = {
+                    KdText(
+                        modifier = Modifier,
+                        text = stringResource(Res.string.ok),
+                    )
+                },
+            )
         },
         modifier = modifier,
     )

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/components/UiStateHandler.kt

@@ -2,14 +2,14 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.components
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import com.developersbreach.designsystem.components.KdCircularProgressIndicator
 import kotlindictionarymultiplatform.composeapp.generated.resources.Res
 import kotlindictionarymultiplatform.composeapp.generated.resources.error_info_unavailable
 import kotlindictionarymultiplatform.composeapp.generated.resources.error_occurred
@@ -30,7 +30,7 @@ fun <T> UiStateHandler(
     Box(modifier = Modifier.fillMaxSize()) {
         when (uiState) {
             is UiState.Loading -> {
-                CircularProgressIndicator(
+                KdCircularProgressIndicator(
                     modifier = Modifier.align(Alignment.Center),
                     color = MaterialTheme.colorScheme.onBackground,
                 )
@@ -52,7 +52,7 @@ fun <T> UiStateHandler(
         }
 
         if (isLoading) {
-            CircularProgressIndicator(
+            KdCircularProgressIndicator(
                 modifier = Modifier.align(Alignment.Center),
                 color = MaterialTheme.colorScheme.onBackground,
             )

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/CodeExampleBox.kt

@@ -100,12 +100,14 @@ fun CodeExampleBox(
                             .padding(4.dp),
                     ) {
                         KdIcon(
+                            modifier = Modifier,
                             imageVector = if (copied) Icons.Default.Check else Icons.Default.ContentCopy,
                             contentDescription = stringResource(Res.string.copy),
                             tint = MaterialTheme.colorScheme.onPrimary,
                         )
                         Spacer(modifier = Modifier.width(4.dp))
                         KdText(
+                            modifier = Modifier,
                             text = if (copied) stringResource(Res.string.copied) else stringResource(Res.string.copy),
                             fontSize = 12.sp,
                             color = MaterialTheme.colorScheme.onPrimary,

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt

@@ -38,12 +38,14 @@ fun IntroductionSection(
     intro: String,
 ) {
     KdText(
+        modifier = Modifier,
         text = stringResource(resource = Res.string.introduction),
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
     )
     Spacer(Modifier.height(4.dp))
     KdText(
+        modifier = Modifier,
         text = intro,
         style = MaterialTheme.typography.bodyMedium,
     )
@@ -55,18 +57,21 @@ fun SyntaxSection(
     syntax: Syntax,
 ) {
     KdText(
+        modifier = Modifier,
         text = stringResource(resource = Res.string.syntax),
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
     )
     Spacer(Modifier.height(4.dp))
     KdText(
+        modifier = Modifier,
         text = syntax.signature,
         style = MaterialTheme.typography.bodyMedium,
     )
     syntax.notes?.let {
         Spacer(Modifier.height(4.dp))
         KdText(
+            modifier = Modifier,
             text = stringResource(
                 Res.string.notes_with_value,
                 it,
@@ -83,6 +88,7 @@ fun SectionBlock(
 ) {
     section.heading?.let {
         KdText(
+            modifier = Modifier,
             text = it,
             style = MaterialTheme.typography.headlineLarge,
             color = MaterialTheme.colorScheme.onPrimary,
@@ -92,6 +98,7 @@ fun SectionBlock(
 
     section.content?.let {
         KdText(
+            modifier = Modifier,
             text = it,
             style = MaterialTheme.typography.bodyMedium,
         )
@@ -101,6 +108,7 @@ fun SectionBlock(
     section.codeExamples.forEach { example ->
         example.description?.let {
             KdText(
+                modifier = Modifier,
                 text = it,
                 fontWeight = FontWeight.Bold,
                 style = MaterialTheme.typography.bodyMedium,
@@ -117,13 +125,15 @@ fun PitfallsSection(
     pitfalls: List<String>,
 ) {
     KdText(
+        modifier = Modifier,
         text = stringResource(resource = Res.string.pitfalls),
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
     )
     Spacer(Modifier.height(4.dp))
     pitfalls.forEach {
         KdText(
+            modifier = Modifier,
             text = stringResource(
                 Res.string.bullet_item,
                 it,
@@ -139,13 +149,15 @@ fun RelatedTopicsSection(
     relatedTopics: List<String>,
 ) {
     KdText(
+        modifier = Modifier,
         text = stringResource(resource = Res.string.related_topics),
         style = MaterialTheme.typography.headlineLarge,
         color = MaterialTheme.colorScheme.onPrimary,
     )
     Spacer(Modifier.height(4.dp))
     relatedTopics.forEach {
         KdText(
+            modifier = Modifier,
             text = stringResource(
                 Res.string.bullet_item,
                 it,

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenUI.kt

@@ -25,6 +25,7 @@ fun DetailScreenUI(
     navigateUp: () -> Unit,
 ) {
     KdScaffold(
+        modifier = Modifier,
         topBar = {
             DetailTopBar(
                 title = detailUiState.topicName,
@@ -56,6 +57,7 @@ private fun DetailContent(
     ) {
         item {
             KdText(
+                modifier = Modifier,
                 text = stringResource(Res.string.table_of_contents),
                 style = MaterialTheme.typography.titleLarge,
                 color = MaterialTheme.colorScheme.onPrimary,

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailTopAppBar.kt

@@ -5,12 +5,12 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import com.developersbreach.designsystem.components.KdIconButton
 import com.developersbreach.designsystem.components.KdText
+import com.developersbreach.designsystem.components.KdTopAppBar
 import kotlindictionarymultiplatform.composeapp.generated.resources.Res
 import kotlindictionarymultiplatform.composeapp.generated.resources.back
 import org.jetbrains.compose.resources.stringResource
@@ -21,7 +21,7 @@ fun DetailTopBar(
     title: String,
     navigateUp: () -> Unit,
 ) {
-    TopAppBar(
+    KdTopAppBar(
         title = {
             KdText(
                 text = title,
@@ -32,6 +32,8 @@ fun DetailTopBar(
         },
         navigationIcon = {
             KdIconButton(
+                modifier = Modifier,
+                iconModifier = Modifier,
                 onClick = navigateUp,
                 imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                 contentDescription = stringResource(Res.string.back),

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/SearchField.kt

@@ -43,10 +43,12 @@ fun SearchField(
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 color = MaterialTheme.colorScheme.onBackground,
+                modifier = Modifier,
             )
         },
         leadingIcon = {
             KdIcon(
+                modifier = Modifier,
                 imageVector = Icons.Filled.Search,
                 contentDescription = stringResource(Res.string.search),
                 tint = MaterialTheme.colorScheme.onBackground,

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicCard.kt

@@ -68,7 +68,10 @@ fun TopicCard(
                         ),
                     contentAlignment = Alignment.Center,
                 ) {
-                    KdText(text = itemTopic.initial)
+                    KdText(
+                        modifier = Modifier, 
+                        text = itemTopic.initial,
+                    )
                 }
 
                 Spacer(modifier = Modifier.width(12.dp))
@@ -77,6 +80,7 @@ fun TopicCard(
                     modifier = Modifier.weight(1f),
                 ) {
                     KdText(
+                        modifier = Modifier,
                         text = topic,
                         style = MaterialTheme.typography.headlineMedium.copy(
                             color = MaterialTheme.colorScheme.onPrimary,
@@ -86,6 +90,7 @@ fun TopicCard(
                     )
                     Spacer(modifier = Modifier.height(6.dp))
                     KdText(
+                        modifier = Modifier,
                         text = subtitle,
                         style = MaterialTheme.typography.labelMedium.copy(
                             color = MaterialTheme.colorScheme.onBackground,
@@ -96,6 +101,8 @@ fun TopicCard(
                 }
 
                 KdIconButton(
+                    modifier = Modifier,
+                    iconModifier = Modifier,
                     onClick = onBookmarkClick,
                     imageVector = if (isBookmarked) {
                         Icons.Outlined.BookmarkBorder

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicScreenUI.kt

@@ -19,6 +19,7 @@ fun TopicScreenUI(
     onTopicClick: (String) -> Unit,
 ) {
     KdScaffold(
+        modifier = Modifier,
         topBar = { TopicTopBar() },
         content = { paddingValues ->
             Column(

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicTopAppBar.kt

@@ -5,13 +5,13 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import com.developersbreach.designsystem.components.KdIconButton
 import com.developersbreach.designsystem.components.KdText
+import com.developersbreach.designsystem.components.KdTopAppBar
 import kotlindictionarymultiplatform.composeapp.generated.resources.Res
 import kotlindictionarymultiplatform.composeapp.generated.resources.back
 import kotlindictionarymultiplatform.composeapp.generated.resources.topics
@@ -20,7 +20,7 @@ import org.jetbrains.compose.resources.stringResource
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TopicTopBar() {
-    TopAppBar(
+    KdTopAppBar(
         title = {
             KdText(
                 text = stringResource(Res.string.topics),
@@ -31,6 +31,8 @@ fun TopicTopBar() {
         },
         navigationIcon = {
             KdIconButton(
+                modifier = Modifier,
+                iconModifier = Modifier,
                 onClick = {},
                 imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                 contentDescription = stringResource(Res.string.back),