UI preview

.gitignore

@@ -13,3 +13,4 @@
 .externalNativeBuild
 .cxx
 local.properties
+

README.md

@@ -27,7 +27,7 @@ app/
 El directorio `ui/components` está destinado a albergar **elementos de UI reutilizables y atómicos (o de bajo nivel de composición)**. Estos componentes son la base fundamental sobre la cual se construyen pantallas más complejas. Idealmente, estos componentes deberían ser:
 
 1.  **Sin estado (Stateless):** Reciben datos y callbacks como parámetros y no gestionan su propio estado interno complejo.
-.  **Foco único:** Cada componente realiza una tarea específica de UI.
+3.  **Foco único:** Cada componente realiza una tarea específica de UI.
 
 ### Organización Interna
 

app/build.gradle.kts

@@ -43,23 +43,34 @@ android {
 }
 
 dependencies {
+    // Íconos extendidos (válidos y estables)
+    implementation("androidx.compose.material:material-icons-extended:1.5.4")
+
+    // Material 3 base (botones, layouts, etc.)
+    implementation(libs.androidx.material3)
+
+    // Firebase
     implementation(platform("com.google.firebase:firebase-bom:33.13.0"))
     implementation("com.google.firebase:firebase-analytics")
-    implementation("com.google.firebase:firebase-auth-ktx") // La extensión -ktx es para soporte de Kotlin
+    implementation("com.google.firebase:firebase-auth-ktx")
+
+    // Core de AndroidX
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
+
+    // Compose
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.androidx.ui)
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
+
+    // Testing
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))
     androidTestImplementation(libs.androidx.ui.test.junit4)
-    debugImplementation(libs.androidx.ui.tooling) 
+    debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
-    implementation("androidx.compose.material:material-icons-extended")
 }

app/src/main/java/com/app/tibibalance/ui/components/Alert.kt

@@ -9,7 +9,6 @@ import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material.icons.filled.Error
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment

app/src/main/java/com/app/tibibalance/ui/components/FormContainer.kt

@@ -39,7 +39,7 @@ fun FormContainer(
     )
 }
 
-/*
+
 @Preview
 @Composable
 fun LoginScreen() {
@@ -51,4 +51,40 @@ fun LoginScreen() {
         }
     }
 }
-*/
+
+/*@Preview
+@Composable
+fun LoginS() {
+
+
+    FormContainer {
+        // Nombre de Usuario
+        TextField(value = "", onValueChange = { }, label = { Text("Nombre de Usuario*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Fecha de Nacimiento (con ícono)
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Fecha de nacimiento*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Correo
+        TextField(
+            value = "", onValueChange = {}, label = { Text("Correo*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Contraseña
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Contraseña*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Confirmar Contraseña
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Confirmar contraseña*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}*/

app/src/main/java/com/app/tibibalance/ui/components/IconContainer.kt

@@ -1,6 +1,5 @@
 package com.app.tibibalance.ui.components
 
-import com.app.tibibalance.R
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
@@ -10,7 +9,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 
 @Suppress("UNUSED_FUNCTION")
@@ -35,4 +33,5 @@ fun IconContainer(
             tint = iconTint
         )
     }
-}
+}
+

app/src/main/java/com/app/tibibalance/ui/components/ImageContainer.kt

@@ -1,6 +1,5 @@
 package com.app.tibibalance.ui.components
 
-import com.app.tibibalance.R
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
@@ -11,20 +10,24 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.R
+
 
 @Suppress("UNUSED_FUNCTION")
 @Composable
 fun ImageContainer(
     imageResId: Int,
     contentDescription: String?,
     modifier: Modifier = Modifier,
-    backgroundColor: Color = Color.LightGray,
+    cornerRadius: Int = 12,
+    backgroundColor: Color = Color.Transparent,
     contentScale: ContentScale = ContentScale.Crop
 ) {
     Box(
         modifier = modifier
+            .clip(RoundedCornerShape(cornerRadius.dp))
             .background(backgroundColor)
     ) {
         Image(
@@ -35,7 +38,7 @@ fun ImageContainer(
         )
     }
 }
-/*
+
 @Preview
 @Composable
 fun ImageContainerPreview() {
@@ -44,4 +47,4 @@ fun ImageContainerPreview() {
         contentDescription = "ImagenPrueba",
         modifier = Modifier.size(100.dp)
     )
-}*/
+}

app/src/main/java/com/app/tibibalance/ui/components/InputSelect.kt

@@ -12,6 +12,9 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.foundation.background
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 
 @Composable
 fun InputSelect(
@@ -29,16 +32,25 @@ fun InputSelect(
             shape = RoundedCornerShape(16.dp),
             modifier = Modifier
                 .width(300.dp)
-                .height(45.dp)
+                .height(30.dp)
+                .clip(RoundedCornerShape(16.dp))
+                .background(Color.White)
                 .clickable { expanded = true },
             trailingIcon = {
                 Icon(
                     imageVector = Icons.Default.ArrowDropDown,
                     contentDescription = "Desplegar opciones"
                 )
-            }
+            },
+            colors = OutlinedTextFieldDefaults.colors(
+                unfocusedBorderColor = Color.White,
+                focusedBorderColor = Color.White,
+                cursorColor = Color.Transparent,
+                disabledBorderColor = Color.White
+            )
         )
 
+
         DropdownMenu(
             expanded = expanded,
             onDismissRequest = { expanded = false }

app/src/main/java/com/app/tibibalance/ui/components/InputText.kt

@@ -29,7 +29,7 @@ fun InputText(
     Box(
         modifier = modifier
             .width(300.dp)
-            .height(26.dp)
+            .height(30.dp)
             .padding(start = 5.dp)
             .background(
                 color = MaterialTheme.colorScheme.surface,

app/src/main/java/com/app/tibibalance/ui/components/ModalContainer.kt

@@ -103,3 +103,24 @@ fun ModalContainer(
         }
     }
 }
+
+//Este es el uso que me imagino debe tener este componente - Alexandra
+@Preview(showBackground = true)
+@Composable
+fun ModalContainerPreview() {
+    MaterialTheme {
+        // Usamos un Box para simular una pantalla base
+        Box(modifier = Modifier.fillMaxSize()) {
+            ModalContainer(
+                onDismissRequest = {}, // Aquí puedes conectar a una variable si lo deseas
+                closeButtonEnabled = true
+            ) {
+                Text("Este es un ejemplo de contenido del modal.")
+                Spacer(modifier = Modifier.height(8.dp))
+                Button(onClick = {}) {
+                    Text("Aceptar")
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/app/tibibalance/ui/components/ProfileContainer.kt

@@ -40,7 +40,7 @@ fun ProfileContainer(
     }
 }
 
-/*
+
 @Preview
 @Composable
 fun ProfilePreview() {
@@ -50,4 +50,3 @@ fun ProfilePreview() {
         contentDescription = "Foto de perfil"
     )
 }
-*/

app/src/main/java/com/app/tibibalance/ui/components/ProgressBar.kt

@@ -1,4 +1,3 @@
-// file: ui/components/ProgressBar.kt
 package com.app.tibibalance.ui.components
 
 import androidx.compose.foundation.background
@@ -64,4 +63,4 @@ fun ProgressBar(
 @Composable
 fun ProgressBarPreview() {
     ProgressBar(percent = 100)
-}
+}

app/src/main/java/com/app/tibibalance/ui/components/SecondaryButton.kt

@@ -18,17 +18,20 @@ fun SecondaryButton(
     text: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    backgroundColor: Color = Color.Transparent // Nuevo parámetro
 ) {
     OutlinedButton(
         onClick = onClick,
         modifier = modifier.width(120.dp).height(40.dp),
         enabled = enabled,
         shape = RoundedCornerShape(12.dp),
+
         colors = ButtonDefaults.outlinedButtonColors(
+            containerColor = backgroundColor, // Aquí aplicamos el fondo
             contentColor = Color.Black
         ),
-        border = BorderStroke(1.dp, Color.Black)
+        border = BorderStroke(1.dp, Color.White)
     ) {
         Text(
             text = text,

app/src/main/java/com/app/tibibalance/ui/components/Switch.kt

@@ -69,4 +69,4 @@ fun SwitchTogglePreview() {
             SwitchToggle(checked = on, onCheckedChange = { on = it })
         }
     }
-}
+}

app/src/main/java/com/app/tibibalance/ui/components/imageButton.kt

@@ -0,0 +1,38 @@
+package com.app.tibibalance.ui.components
+
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ImageButton(
+    onClick: () -> Unit,
+    imageRes: Int, // Recurso de la imagen
+    modifier: Modifier = Modifier,
+    size: Int = 48 // Tamaño del botón
+) {
+    IconButton(
+        onClick = onClick,
+        modifier = modifier.size(size.dp) // Tamaño del botón
+    ) {
+        // Usamos Image para mostrar la imagen dentro del botón
+        Image(
+            painter = painterResource(id = imageRes), // Recurso de imagen
+            contentDescription = "Botón de imagen",
+            modifier = Modifier.size(size.dp) // Ajustar tamaño de la imagen
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ImageButtonPreview() {
+    // Reemplaza el recurso con la imagen que tienes en tus recursos
+    ImageButton(onClick = { /* Acción al hacer clic */ }, imageRes = android.R.drawable.ic_menu_add)
+}

app/src/main/java/com/app/tibibalance/ui/preview/FeatureAddHabitScreenPreview.kt

@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureAddHabitScreen
+
+@Preview
+@Composable
+fun FeatureAddHabitScreenPreview() {
+    FeatureAddHabitScreen()
+}