Update sample project (#44)

* update the material library dependency in the buildGradle file of module by the material3, updated the sample project

* adding two other textfield on inputScreen

* update sample

* manage windows inset

* update screenshot

README.md

@@ -10,7 +10,7 @@ Validable is an extensible library that allows you to validate your text fields
 
 This is what it looks like :
 
-<img src="screenshots/inputscreen.png?raw=true" width="220" alt="Welcome screen">
+<img src="screenshots/inputscreen.png?raw=true" width="459" alt="Welcome screen">
 
 ```kotlin  
 @Composable  

sample/build.gradle.kts

@@ -56,12 +56,13 @@ dependencies {
     implementation("androidx.core:core-ktx:1.13.1")
     implementation("androidx.appcompat:appcompat:1.7.0")
     implementation("com.google.android.material:material:1.12.0")
+    implementation("androidx.compose.material3:material3")
+
 
     implementation(platform("androidx.compose:compose-bom:2024.05.00"))
 
     implementation("androidx.compose.ui:ui")
     implementation("androidx.activity:activity-compose:1.9.0")
-    implementation("androidx.compose.material:material")
     implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.8.1")
     testImplementation("junit:junit:4.13.2")

sample/src/main/AndroidManifest.xml

@@ -11,7 +11,7 @@
         <activity
             android:name="tech.devscast.validable.sample.MainActivity"
             android:exported="true"
-            android:label="@string/app_name"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/Theme.Validable.NoActionBar">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

sample/src/main/java/tech/devscast/validable/sample/MainActivity.kt

@@ -3,21 +3,28 @@ package tech.devscast.validable.sample
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.ExperimentalAnimationApi
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.ui.Modifier
 import tech.devscast.validable.sample.ui.screens.InputScreen
 import tech.devscast.validable.sample.ui.theme.ValidableTheme
 
 class MainActivity : ComponentActivity() {
     @ExperimentalAnimationApi
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        enableEdgeToEdge()
         setContent {
             ValidableTheme {
                 // A surface container using the 'background' color from the theme
-                Surface(color = MaterialTheme.colors.background) {
-                    InputScreen()
+                Surface(color = MaterialTheme.colorScheme.background) {
+                    Box(modifier = Modifier.safeDrawingPadding()) {
+                        InputScreen()
+                    }
                 }
             }
         }

sample/src/main/java/tech/devscast/validable/sample/ui/screens/InputScreen.kt

@@ -10,22 +10,28 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Button
-import androidx.compose.material.LocalTextStyle
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import tech.devscast.validable.CardScheme
 import tech.devscast.validable.CardSchemeValidable
 import tech.devscast.validable.EmailValidable
+import tech.devscast.validable.GreaterThanValidable
 import tech.devscast.validable.NotEmptyValidable
+import tech.devscast.validable.UrlValidable
 import tech.devscast.validable.withValidable
 
 @ExperimentalAnimationApi
@@ -36,20 +42,27 @@ fun InputScreen() {
     val emailField = remember { EmailValidable() }
     val nameField = remember { NotEmptyValidable() }
 
-    val cardField = remember { CardSchemeValidable(CardScheme.MasterCard,) }
-    val multipleCardField = remember {
-        CardSchemeValidable(
-            CardScheme.merge(CardScheme.MasterCard, CardScheme.Visa),
-            "Invalid Card"
-        )
+    val cardField = remember { CardSchemeValidable(CardScheme.MasterCard) }
+
+    val urlField = remember {
+        UrlValidable()
+    }
+
+    val ageTextField = remember {
+        GreaterThanValidable(18, "Age must be greater than 18")
     }
 
     Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.padding(24.dp)
+        modifier = Modifier
+            .padding(horizontal = 24.dp)
+            .verticalScroll(rememberScrollState())
     ) {
-        TextField(
+        Spacer(modifier = Modifier.height(24.dp))
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text("Email address", style = MaterialTheme.typography.labelLarge) },
             value = emailField.value,
             onValueChange = { emailField.value = it },
             isError = emailField.hasError(),
@@ -61,7 +74,9 @@ fun InputScreen() {
 
         Spacer(modifier = Modifier.height(16.dp))
 
-        TextField(
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text(text = "Username", style = MaterialTheme.typography.labelLarge) },
             value = nameField.value,
             onValueChange = { nameField.value = it },
             isError = nameField.hasError(),
@@ -74,13 +89,72 @@ fun InputScreen() {
 
         Spacer(modifier = Modifier.height(16.dp))
 
-        Button(onClick = {
-            withValidable(emailField, nameField) {
-                Toast.makeText(context, "All fields are valid", Toast.LENGTH_SHORT).show()
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = {
+                Text(text = "Card credit number", style = MaterialTheme.typography.labelLarge)
+            },
+            value = cardField.value,
+            onValueChange = { cardField.value = it },
+            isError = cardField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = cardField.hasError()) {
+            TextFieldError(textError = cardField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text(text = "Your website", style = MaterialTheme.typography.labelLarge) },
+            value = urlField.value,
+            onValueChange = { urlField.value = it },
+            isError = urlField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = urlField.hasError()) {
+            TextFieldError(textError = urlField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        OutlinedTextField(
+            shape = RoundedCornerShape(20.dp),
+            label = { Text(text = "Your Age", style = MaterialTheme.typography.labelLarge) },
+            value = ageTextField.value,
+            onValueChange = {
+                ageTextField.value = it
+            },
+            isError = ageTextField.hasError(),
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        AnimatedVisibility(visible = ageTextField.hasError()) {
+            TextFieldError(textError = ageTextField.errorMessage ?: "")
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Button(
+            modifier = Modifier.fillMaxWidth(),
+            onClick = {
+                withValidable(
+                    emailField,
+                    nameField,
+                    cardField,
+                    urlField,
+                    ageTextField
+                ) {
+                    Toast.makeText(context, "All fields are valid", Toast.LENGTH_SHORT).show()
+                }
             }
-        }) {
-            Text(text = "Continue")
+        ) {
+            Text(text = "Continue", style = MaterialTheme.typography.labelLarge)
         }
+        Spacer(modifier = Modifier.height(24.dp))
     }
 }
 
@@ -89,13 +163,14 @@ fun TextFieldError(textError: String) {
     Row(modifier = Modifier.fillMaxWidth()) {
         Text(
             text = textError,
+            fontSize = 14.sp,
             modifier = Modifier.fillMaxWidth(),
-            style = LocalTextStyle.current.copy(color = MaterialTheme.colors.error)
+            style = LocalTextStyle.current.copy(color = MaterialTheme.colorScheme.error)
         )
     }
 }
 
-@Preview
+@Preview(showBackground = true)
 @ExperimentalAnimationApi
 @Composable
 fun InputScreenPreview() {

sample/src/main/java/tech/devscast/validable/sample/ui/theme/Shape.kt

@@ -1,7 +1,7 @@
 package tech.devscast.validable.sample.ui.theme
 
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.ui.unit.dp
 
 val Shapes = Shapes(

sample/src/main/java/tech/devscast/validable/sample/ui/theme/Theme.kt

@@ -1,20 +1,20 @@
 package tech.devscast.validable.sample.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 
-private val DarkColorPalette = darkColors(
+private val DarkColorPalette = darkColorScheme(
     primary = Purple200,
-    primaryVariant = Purple700,
+    primaryContainer = Purple700,
     secondary = Teal200
 )
 
-private val LightColorPalette = lightColors(
+private val LightColorPalette = lightColorScheme(
     primary = Purple500,
-    primaryVariant = Purple700,
+    primaryContainer = Purple700,
     secondary = Teal200
 
     /* Other default colors to override
@@ -36,7 +36,7 @@ fun ValidableTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composa
     }
 
     MaterialTheme(
-        colors = colors,
+        colorScheme = colors,
         typography = Typography,
         shapes = Shapes,
         content = content

sample/src/main/java/tech/devscast/validable/sample/ui/theme/Type.kt

@@ -1,14 +1,14 @@
 package tech.devscast.validable.sample.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-    body1 = TextStyle(
+    bodyMedium = TextStyle(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp

validable/src/main/java/tech/devscast/validable/RegexValidable.kt

@@ -12,5 +12,5 @@ import java.util.regex.Pattern
  */
 class RegexValidable(pattern: String, message: String? = null) : BaseValidable(
     validator = { value -> Pattern.matches(pattern, value) },
-    errorFor = { _ -> message ?: "This value is not valid." }
+    errorFor = { _ -> message ?: "This value is not a valid regex." }
 )