feat: Add UI components for dialogs, buttons, and text fields

buildSrc/src/main/java/vn/core/libx/buildSrc/Configs.kt

@@ -6,6 +6,6 @@ object Configs {
         const val GROUP_ID = "vn.core.libs"
         const val ARTIFACT_COMPOSE_ID = "compose"
         const val ARTIFACT_MDC_ID = "mdc"
-        const val VERSION = "1.0.0"
+        const val VERSION = "1.0.1"
     }
 }

libx/composex/src/main/java/vn/core/composex/ComponentExt.kt

@@ -0,0 +1,14 @@
+package vn.core.composex
+
+import android.icu.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+
+internal const val DOB_FORMAT = "dd/MM/yyyy"
+internal const val EMPTY_STRING = ""
+
+fun Long?.convertMillisToDate(): String {
+    if (this == null) return EMPTY_STRING
+    val formatter = SimpleDateFormat(DOB_FORMAT, Locale.getDefault())
+    return formatter.format(Date(this))
+}

libx/composex/src/main/java/vn/core/composex/uikit/Container.kt

@@ -10,6 +10,7 @@ import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import vn.core.composex.uikit.appBar.AppBar
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable

libx/composex/src/main/java/vn/core/composex/uikit/alert/AlertExceptionDialogComponent.kt

@@ -0,0 +1,49 @@
+package vn.core.composex.uikit.alert
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ErrorOutline
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+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
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import vn.core.composex.EMPTY_STRING
+import vn.core.libx.composex.R
+
+@Composable
+fun AlertExceptionDialogComponent(
+    message: String,
+    onDismissRequest: (() -> Unit) = {},
+) {
+    AlertDialog(
+        icon = {
+            Icon(
+                modifier = Modifier.size(96.dp),
+                imageVector = Icons.Filled.ErrorOutline,
+                contentDescription = EMPTY_STRING
+            )
+        },
+        title = {
+            Text(
+                text = stringResource(R.string.app_exception),
+                style = MaterialTheme.typography.headlineSmall
+            )
+        },
+        text = {
+            Text(text = message, modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center)
+        },
+        onDismissRequest = onDismissRequest,
+        confirmButton = {
+            TextButton(onClick = onDismissRequest) {
+                Text(stringResource(R.string.accept))
+            }
+        },
+    )
+}

libx/composex/src/main/java/vn/core/composex/uikit/AppBar.kt → libx/composex/src/main/java/vn/core/composex/uikit/appBar/AppBar.kt

@@ -1,4 +1,4 @@
-package vn.core.composex.uikit
+package vn.core.composex.uikit.appBar
 
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.icons.Icons

libx/composex/src/main/java/vn/core/composex/uikit/BottomBar.kt → libx/composex/src/main/java/vn/core/composex/uikit/appBar/AppBottomBar.kt

@@ -1,4 +1,4 @@
-package vn.core.composex.uikit
+package vn.core.composex.uikit.appBar
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.material.icons.Icons
@@ -16,13 +16,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import vn.core.libx.composex.R
 
-data class NavElement(
-    val icon: @Composable () -> Unit,
-    val label: @Composable () -> Unit,
-    val selected: Boolean = false,
-    val onClick: () -> Unit
-)
-
 @Composable
 fun AppBottomNavigationBar(items: List<NavElement>) {
     NavigationBar(containerColor = Color.Transparent) {

libx/composex/src/main/java/vn/core/composex/uikit/appBar/NavElement.kt

@@ -0,0 +1,10 @@
+package vn.core.composex.uikit.appBar
+
+import androidx.compose.runtime.Composable
+
+data class NavElement(
+    val icon: @Composable () -> Unit,
+    val label: @Composable () -> Unit,
+    val selected: Boolean = false,
+    val onClick: () -> Unit
+)

libx/composex/src/main/java/vn/core/composex/uikit/button/IconBackButton.kt

@@ -0,0 +1,18 @@
+package vn.core.composex.uikit.button
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBackIosNew
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import vn.core.libx.composex.R
+
+@Composable
+fun IconBackButton(onClick: () -> Unit) {
+    IconButton(onClick = onClick) {
+        Icon(
+            Icons.Filled.ArrowBackIosNew, contentDescription = stringResource(R.string.icon_back)
+        )
+    }
+}

libx/composex/src/main/java/vn/core/composex/uikit/dialog/FullScreenSuccessDialogComponent.kt

@@ -0,0 +1,61 @@
+package vn.core.composex.uikit.dialog
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.outlined.CheckCircleOutline
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import vn.core.libx.composex.R
+
+@Composable
+fun FullScreenSuccessDialogComponent(
+    onDismissRequest: (() -> Unit) = {}, content: @Composable () -> Unit
+) {
+    Dialog(
+        onDismissRequest = onDismissRequest, properties = DialogProperties(
+            dismissOnBackPress = false,
+            dismissOnClickOutside = false,
+            usePlatformDefaultWidth = false,
+            decorFitsSystemWindows = true
+        )
+    ) {
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(MaterialTheme.colorScheme.background)
+        ) {
+            IconButton(onClick = onDismissRequest, modifier = Modifier.align(Alignment.TopEnd)) {
+                Icon(Icons.Filled.Close, stringResource(R.string.icon_close))
+            }
+            Column(
+                modifier = Modifier.fillMaxSize(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                Icon(
+                    Icons.Outlined.CheckCircleOutline,
+                    stringResource(R.string.icon_check),
+                    modifier = Modifier
+                        .size(96.dp)
+                        .padding(vertical = 12.dp)
+                )
+                content()
+            }
+        }
+    }
+}

libx/composex/src/main/java/vn/core/composex/uikit/loading/FullScreenLoadingDialogComponent.kt

@@ -0,0 +1,25 @@
+package vn.core.composex.uikit.loading
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+
+@Composable
+fun FullScreenLoadingDialogComponent(onDismissRequest: (() -> Unit) = {}) {
+    Dialog(
+        onDismissRequest = onDismissRequest, properties = DialogProperties(
+            dismissOnBackPress = false,
+            dismissOnClickOutside = false,
+            usePlatformDefaultWidth = true,
+        )
+    ) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+            CircularProgressIndicator()
+        }
+    }
+}

libx/composex/src/main/java/vn/core/composex/uikit/picker/AppDatePicker.kt

@@ -0,0 +1,124 @@
+package vn.core.composex.uikit.picker
+
+import androidx.compose.foundation.interaction.Interaction
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.PressInteraction
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Button
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDefaults
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.DisplayMode
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.rememberDatePickerState
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import kotlinx.coroutines.channels.BufferOverflow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import vn.core.composex.DOB_FORMAT
+import vn.core.composex.EMPTY_STRING
+import vn.core.composex.convertMillisToDate
+import vn.core.libx.composex.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AppDatePicker(
+    label: String,
+    placeHolder: String,
+    modifier: Modifier = Modifier,
+    title: (@Composable () -> Unit)?,
+    onValueChange: (String) -> Unit,
+    onValidator: ((value: String) -> String?)? = null
+) {
+    var value by rememberSaveable { mutableStateOf(EMPTY_STRING) }
+    var isError by rememberSaveable { mutableStateOf(false) }
+    var isPicker by rememberSaveable { mutableStateOf(false) }
+    val dateState = rememberDatePickerState(initialDisplayMode = DisplayMode.Picker)
+    val interactionSource = remember {
+        object : MutableInteractionSource {
+            override val interactions = MutableSharedFlow<Interaction>(
+                extraBufferCapacity = 16,
+                onBufferOverflow = BufferOverflow.DROP_OLDEST,
+            )
+
+            override suspend fun emit(interaction: Interaction) {
+                if (interaction is PressInteraction.Release) {
+                    isPicker = true
+                }
+                interactions.emit(interaction)
+            }
+
+            override fun tryEmit(interaction: Interaction): Boolean {
+                return interactions.tryEmit(interaction)
+            }
+        }
+    }
+
+    LaunchedEffect(value) {
+        onValueChange(value)
+        val mError = onValidator?.invoke(value)
+        isError = !mError.isNullOrEmpty()
+    }
+
+    OutlinedTextField(
+        modifier = modifier.fillMaxWidth(),
+        value = value,
+        label = {
+            Text(
+                text = label, style = MaterialTheme.typography.labelMedium
+            )
+        },
+        onValueChange = { text ->
+            value = text
+        },
+        isError = isError,
+        readOnly = true,
+        singleLine = true,
+        maxLines = 1,
+        interactionSource = interactionSource,
+        placeholder = { Text(text = placeHolder) },
+        keyboardOptions = KeyboardOptions(
+            autoCorrectEnabled = true,
+            keyboardType = KeyboardType.Text,
+            imeAction = ImeAction.Next,
+        ),
+        supportingText = {
+            if (isError) {
+                Text(onValidator?.invoke(value) ?: EMPTY_STRING)
+            }
+        },
+    )
+    if (isPicker) {
+        DatePickerDialog(onDismissRequest = { isPicker = false }, confirmButton = {
+            Button(onClick = {
+                isPicker = false
+                value = dateState.selectedDateMillis.convertMillisToDate()
+            }, enabled = dateState.selectedDateMillis.convertMillisToDate() != value) {
+                Text(stringResource(R.string.accept))
+            }
+        }, dismissButton = {
+            OutlinedButton(onClick = { isPicker = false }) { Text(stringResource(R.string.cancel)) }
+        }) {
+            DatePicker(
+                state = dateState,
+                dateFormatter = remember { DatePickerDefaults.dateFormatter(selectedDateSkeleton = DOB_FORMAT) },
+                showModeToggle = false,
+                title = title
+            )
+        }
+    }
+}