Refactor: Improve Calendar UI, Navigation, and Introduce Year Picker

This commit introduces several enhancements to the PersianDatePicker library, focusing on UI improvements, navigation refinements, and the addition of a year picker functionality.

**Key Changes:**

- **UI Enhancements & Animations:**
    - Implemented `AnimatedContent` for transitions when switching between `Picker` and `Input` display modes in `PersianDatePicker`.
    - Added `AnimatedContent` for month day items in `MonthGrid` for smoother visual feedback.
    - Introduced `AnimatedVisibility` for the new `YearPicker` dropdown.
- **Year Picker Implementation:**
    - Added a new `YearPicker` composable in `io.github.faridsolgi.view.internal.PersianCalender.kt`.
    - This allows users to select a year from a grid within a dropdown menu.
    - The `YearPicker` is integrated into `NavigationMonthAndYearSelection`.
    - Added `SelectionYearLabelTextFont` to `PersianDatePickerTokens` for styling the year picker.
- **Navigation and State:**
    - The `NavigationMonthAndYearSelection` now receives `colors` to style the `YearPicker`.
    - Updated `PersianDatePickerPreview` to initialize `rememberPersianDatePickerState` with a `yearRange`.
- **Code Organization & Styling:**
    - Removed `ExposedDropdownMenuBox` and `ExposedDropdownMenu` from the previous year selection implementation.
    - Replaced with a custom dropdown implementation using `Card` and `LazyVerticalGrid` for the `YearPicker`.
    - Added constants `RecommendedSizeForAccessibility`, `MaxCalendarRows`, and `YearsInRow` for better layout management in `PersianCalender.kt`.
    - Minor UI adjustments like adding spacers and using `ProvideTextStyle` for the year picker label.
- **Build Configuration:**
    - Updated library version from `0.0.3` to `0.0.10` in `library/build.gradle.kts`.

These changes aim to provide a more interactive and user-friendly experience for selecting dates, particularly with the new year picking capability.

Author: faridsolgi

library/build.gradle.kts

@@ -16,7 +16,7 @@ plugins {
 }
 
 group = "io.github.faridsolgi"
-version = "0.0.3"
+version = "0.0.10"
 
 kotlin {
     jvm()

library/src/commonMain/kotlin/io/github/faridsolgi/domain/model/PersianDatePickerTokens.kt

@@ -17,4 +17,7 @@ internal object PersianDatePickerTokens {
         @Composable
         get() =  MaterialTheme.typography.bodyMedium
     val todayDateBorderWidth = 1.dp
+    val SelectionYearLabelTextFont
+        @Composable
+        get() = MaterialTheme.typography.bodyLarge
 }

library/src/commonMain/kotlin/io/github/faridsolgi/view/PersianDatePicker.kt

@@ -1,6 +1,16 @@
 package io.github.faridsolgi.view
 
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -10,6 +20,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.material3.DatePicker
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
@@ -52,7 +63,7 @@ fun PersianDatePicker(
     showModeToggle: Boolean = true,
     colors: PersianDatePickerColors = PersianDatePickerDefaults.colors(),
 ) {
-    // DatePicker()
+    //DatePicker()
     CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
         Column(modifier) {
             PersianDatePickerHeadLine(
@@ -78,19 +89,26 @@ fun SwitchablePersianDatePickerContents(
     colors: PersianDatePickerColors,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier) {
-        when (state.displayMode) {
-            DisplayMode.Companion.Picker -> {
-                PersianDatePickerCalender(state, colors)
-            }
 
-            DisplayMode.Companion.Input -> {
+        AnimatedContent(
+            targetState = state.displayMode ,
+            transitionSpec = {
+                slideInVertically(animationSpec = tween(10000)) { height -> height } + fadeIn() togetherWith
+                        slideOutVertically(animationSpec = tween(1000)) { height -> -height } + fadeOut()
+            },
+            label = "display mode transition"
+        ) { displayMode ->
+            Column(modifier) {
+            when (displayMode) {
+                DisplayMode.Companion.Picker -> {
+                    PersianDatePickerCalender(state, colors)
+                }
 
+                DisplayMode.Companion.Input -> {
+                    Text("test input")
+                }
             }
-
-            else -> ""
         }
-
     }
 }
 
@@ -100,7 +118,7 @@ fun SwitchablePersianDatePickerContents(
 @Preview
 private fun PersianDatePickerPreview() {
     MaterialTheme {
-        val state = rememberPersianDatePickerState()
+        val state = rememberPersianDatePickerState(yearRange = 1400..1500)
 
         PersianDatePickerDialog(
             dismissButton = {
@@ -121,8 +139,6 @@ private fun PersianDatePickerPreview() {
                 state = state
             )
         }
-        Spacer(Modifier.padding(16.dp))
-        Text(state.selectedDate?.toDateString() ?: "")
     }
 }
 

library/src/commonMain/kotlin/io/github/faridsolgi/view/internal/PersianCalender.kt

@@ -1,6 +1,7 @@
 package io.github.faridsolgi.view.internal
 
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.fadeIn
@@ -13,25 +14,32 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDropDown
+import androidx.compose.material.icons.filled.ArrowDropUp
 import androidx.compose.material.icons.outlined.ChevronLeft
 import androidx.compose.material.icons.outlined.ChevronRight
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExposedDropdownMenuBox
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -85,6 +93,7 @@ internal fun PersianDatePickerCalender(
     NavigationMonthAndYearSelection(
         displayedDate,
         state,
+        colors,
         navigateToPreviousMonth = { state.navigateToPreviousMonth() },
         navigateToNextMonth = { state.navigateToNextMonth() },
     )
@@ -114,6 +123,7 @@ internal fun MonthGrid(
         modifier = Modifier.fillMaxWidth(),
         verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
         horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterHorizontally)
+
     ) {
 
         // day weeks name
@@ -211,14 +221,15 @@ private fun MonthDayItem(
 internal fun NavigationMonthAndYearSelection(
     displayedDate: PersianDateTime,
     state: PersianDatePickerState,
+    colors: PersianDatePickerColors,
     navigateToPreviousMonth: () -> Unit,
     navigateToNextMonth: () -> Unit,
 ) {
     Row(
         Modifier.fillMaxWidth().padding(start = 8.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        YearSelector(displayedDate, state) {
+        YearPicker(displayedDate, state, colors) {
             state.initDisplayedDate = it
         }
         Spacer(Modifier.weight(1f))
@@ -244,61 +255,77 @@ internal fun NavigationMonthAndYearSelection(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-private fun YearSelector(
+fun YearPicker(
     displayedDate: PersianDateTime,
     state: PersianDatePickerState,
+    colors: PersianDatePickerColors,
     onYearSelect: (PersianDateTime) -> Unit,
 ) {
     var expanded by remember { mutableStateOf(false) }
 
-    ExposedDropdownMenuBox(
-        expanded = expanded,
-        onExpandedChange = { expanded = !expanded }
-    ) {
-        Row(
-            modifier = Modifier
-                .clickable { expanded = !expanded }
-                .padding(8.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Text(text = displayedDate.format {
-                monthName()
-                char(' ')
-                year()
-            })
-            Icon(
-                imageVector = Icons.Default.ArrowDropDown,
-                contentDescription = "Dropdown"
-            )
-        }
-
-        ExposedDropdownMenu(
-            expanded = expanded,
-            onDismissRequest = { expanded = false }
-        ) {
-            // Display years in a grid
-            LazyVerticalGrid(
-                columns = GridCells.Fixed(3), // 3 columns
+    ProvideTextStyle(PersianDatePickerTokens.SelectionYearLabelTextFont) {
+        Column {
+            // The clickable button
+            if (expanded) {
+                Spacer(Modifier.padding(8.dp))
+            }
+            Row(
                 modifier = Modifier
-                    .padding(8.dp),
-                verticalArrangement = Arrangement.spacedBy(8.dp),
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    .clickable { expanded = !expanded },
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                items(state.yearRange.toList()) { item ->
-                    Text(
-                        text = item.toString(),
-                        modifier = Modifier
-                            .clickable {
-                                onYearSelect(displayedDate.copy(item))
-                                expanded = false
+                Text(
+                    text = displayedDate.format {
+                        monthName()
+                        char(' ')
+                        year()
+                    }
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Icon(
+                    imageVector = if (expanded) Icons.Default.ArrowDropUp else Icons.Default.ArrowDropDown,
+                    contentDescription = "Dropdown"
+                )
+            }
+
+            // The custom dropdown
+            AnimatedVisibility(expanded) {
+
+                Card(
+                    modifier = Modifier
+                        .height(PersianDatePickerTokens.ContainerHeight - 16.dp),
+                    elevation = CardDefaults.cardElevation(0.dp),
+
+                    colors = CardDefaults.cardColors(containerColor = colors.containerColor)
+                ) {
+                    Box(modifier = Modifier.padding(8.dp)) {
+                        LazyVerticalGrid(
+                            columns = GridCells.Fixed(YearsInRow),
+                            verticalArrangement = Arrangement.spacedBy(8.dp),
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            items(state.yearRange.toList()) { year ->
+                                TextButton(
+                                    onClick = {
+                                        onYearSelect(displayedDate.copy(year))
+                                        expanded = false
+                                    },
+                                    colors = ButtonDefaults.textButtonColors(contentColor = colors.notSelectedDayColor)
+                                ) {
+                                    Text(year.toString())
+                                }
                             }
-                            .padding(8.dp)
-                    )
+                        }
+                    }
                 }
             }
         }
     }
 }
 
+
+internal val RecommendedSizeForAccessibility = 48.dp
+
+private const val MaxCalendarRows = 6
+private const val YearsInRow: Int = 3