pytech-ui 1.0.21 → 1.0.24

package/android/src/main/java/expo/modules/myui/TextField.kt

@@ -0,0 +1,251 @@
+package expo.modules.myui
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.LocalTextStyle
+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.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusManager
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
+import expo.modules.kotlin.views.AsyncFunctionHandle
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.myui.theme.ExtendedTheme
+import expo.modules.ui.ModifierList
+import java.io.Serializable
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.relocation.bringIntoViewRequester
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.focus.onFocusEvent
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+
+data class TextFieldValueChangeEvent(
+	@Field val value: String = ""
+) : Record, Serializable
+
+data class TextFieldFocusChangeEvent(
+  	@Field val value: Boolean = false
+) : Record, Serializable
+
+@OptimizedRecord
+data class TextFieldKeyboardOptionsRecord(
+  @Field val capitalization: String? = null,
+  @Field val autoCorrectEnabled: Boolean? = null,
+  @Field val keyboardType: String? = null,
+  @Field val imeAction: String? = null
+) : Record
+
+data class KeyboardActionEvent(
+	@Field val action: String,
+	@Field val value: String
+) : Record
+
+/**
+ * [value] es solo el valor inicial; el texto editado vive en estado interno.
+ * [headlineText] opcional: se muestra a la izquierda del campo (misma fila que el input).
+ */
+data class TextFieldProps(
+	val value: String = "",
+	val placeholder: String? = null,
+	val headlineText: String? = null,
+	val enabled: Boolean = true,
+	val autoFocus: Boolean = false,
+	val lines: Int = 1,
+	val keyboardOptions: TextFieldKeyboardOptionsRecord? = null,
+	val rowModifiers: ModifierList = emptyList(),
+	val textFieldModifiers: ModifierList = emptyList()
+) : ComposeProps
+
+private fun String?.toKeyboardType(): KeyboardType = when (this) {
+	"text" -> KeyboardType.Text
+	"number" -> KeyboardType.Number
+	"email" -> KeyboardType.Email
+	"phone" -> KeyboardType.Phone
+	"decimal" -> KeyboardType.Decimal
+	"password" -> KeyboardType.Password
+	"ascii" -> KeyboardType.Ascii
+	"uri" -> KeyboardType.Uri
+	"numberPassword" -> KeyboardType.NumberPassword
+	else -> KeyboardType.Text
+}
+
+private fun String?.toCapitalization(): KeyboardCapitalization = when (this) {
+	"characters" -> KeyboardCapitalization.Characters
+	"none" -> KeyboardCapitalization.None
+	"sentences" -> KeyboardCapitalization.Sentences
+	"words" -> KeyboardCapitalization.Words
+	else -> KeyboardCapitalization.None
+}
+
+private fun String?.toImeAction(): ImeAction = when (this) {
+	"default" -> ImeAction.Default
+	"none" -> ImeAction.None
+	"go" -> ImeAction.Go
+	"search" -> ImeAction.Search
+	"send" -> ImeAction.Send
+	"previous" -> ImeAction.Previous
+	"next" -> ImeAction.Next
+	"done" -> ImeAction.Done
+	else -> ImeAction.Default
+}
+
+private fun FocusManager.performDefaultKeyboardAction(imeAction: ImeAction) {
+	when (imeAction) {
+		ImeAction.Next -> clearFocus() //moveFocus(FocusDirection.Down)
+		ImeAction.Previous -> clearFocus() //moveFocus(FocusDirection.Up)
+		ImeAction.Done, ImeAction.Go, ImeAction.Search, ImeAction.Send -> clearFocus()
+		else -> Unit
+	}
+}
+
+data class ExampleComposeViewProps(
+	@Field val title: String = "",
+	@Field val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+
+@Composable
+internal fun FunctionalComposableScope.TextFieldContent(
+	props: TextFieldProps,
+	focus: AsyncFunctionHandle<Unit>,
+	blur: AsyncFunctionHandle<Unit>,
+	onValueChange: (String) -> Unit,
+	onFocusChanged: (Boolean) -> Unit,
+	onKeyboardActionTriggered: (KeyboardActionEvent) -> Unit
+) {
+	var text by remember { mutableStateOf(props.value) }
+	val focusManager = LocalFocusManager.current
+	val focusRequester = remember { FocusRequester() }
+	val keyboardController = LocalSoftwareKeyboardController.current
+
+	focus.handle {
+		focusRequester.requestFocus()
+		keyboardController?.show()
+	}
+	blur.handle {
+		focusManager.clearFocus()
+	}
+
+	if (props.autoFocus) {
+		LaunchedEffect(Unit) {
+			delay(300)
+			runCatching {
+				focusRequester.requestFocus()
+				keyboardController?.show()
+			}
+		}
+	}
+
+	val kbOpts = props.keyboardOptions
+	val keyboardTypeKey = kbOpts?.keyboardType
+	val visualTransformation =
+		if (keyboardTypeKey == "password" || keyboardTypeKey == "numberPassword") {
+			PasswordVisualTransformation()
+		} else {
+			VisualTransformation.None
+		}
+	val keyboardOptions = KeyboardOptions.Default.copy(
+		keyboardType = keyboardTypeKey.toKeyboardType(),
+		autoCorrectEnabled = kbOpts?.autoCorrectEnabled ?: true,
+		capitalization = kbOpts?.capitalization.toCapitalization(),
+		imeAction = kbOpts?.imeAction.toImeAction()
+	)
+	val currentText = { text }
+	val keyboardActions = KeyboardActions(
+		onDone = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Done)
+			onKeyboardActionTriggered(KeyboardActionEvent("done", currentText()))
+		},
+		onGo = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Go)
+			onKeyboardActionTriggered(KeyboardActionEvent("go", currentText()))
+		},
+		onNext = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Next)
+			onKeyboardActionTriggered(KeyboardActionEvent("next", currentText()))
+		},
+		onPrevious = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Previous)
+			onKeyboardActionTriggered(KeyboardActionEvent("previous", currentText()))
+		},
+		onSearch = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Search)
+			onKeyboardActionTriggered(KeyboardActionEvent("search", currentText()))
+		},
+		onSend = {
+			focusManager.performDefaultKeyboardAction(ImeAction.Send)
+			onKeyboardActionTriggered(KeyboardActionEvent("send", currentText()))
+		},
+	)
+
+	val bringIntoViewRequester = remember { BringIntoViewRequester() }
+	val scope = rememberCoroutineScope()
+
+	BasicTextField(
+		value = text,
+		onValueChange = { newValue ->
+			text = newValue
+			onValueChange(newValue)
+		},
+		modifier = Modifier
+			.fillMaxWidth()
+			.focusRequester(focusRequester)
+			.onFocusChanged { onFocusChanged(it.isFocused) }
+			.bringIntoViewRequester(bringIntoViewRequester)
+			.onFocusChanged { focusState ->
+				onFocusChanged(focusState.isFocused)
+				if (focusState.isFocused) {
+					scope.launch {
+						kotlinx.coroutines.delay(100)
+						bringIntoViewRequester.bringIntoView()
+					}
+				}
+			},
+		enabled = props.enabled,
+		textStyle = LocalTextStyle.current,
+		singleLine = props.lines == 1,
+		maxLines = if (props.lines > 1) props.lines.coerceAtLeast(2) else Int.MAX_VALUE,
+		cursorBrush = SolidColor(ExtendedTheme.colorScheme.systemBlue),
+		keyboardOptions = keyboardOptions,
+		keyboardActions = keyboardActions,
+		visualTransformation = visualTransformation,
+		decorationBox = { innerTextField ->
+			if (text.isEmpty() && !props.placeholder.isNullOrBlank()) {
+				Text(
+					text = props.placeholder!!,
+					color = ExtendedTheme.colorScheme.placeholderText
+				)
+			}
+			innerTextField()
+		},
+	)
+}

package/android/src/main/java/expo/modules/myui/TypographySlot/TypographySlotBridge.kt

@@ -0,0 +1,120 @@
+package expo.modules.myui.TypographySlot
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.sp
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.myui.theme.ExtendedTheme
+
+data class SlotTypographyStyleRecord(
+	@Field val typography: String? = null,
+	@Field val fontSize: Double? = null,
+	@Field val lineHeight: Double? = null,
+	@Field val fontWeight: String? = null,
+	@Field val textAlign: String? = null,
+) : Record
+
+data class SlotTextStyleRecord(
+	@Field val style: SlotTypographyStyleRecord,
+	@Field val color: String? = null,
+	@Field val overflow: String? = null,
+	@Field val maxLines: Int? = null,
+) : Record
+
+/**
+ * Bridge de estilos por slot (Compose + JS vía [slotTextStylePayload]).
+ * Los valores viven en [Typographies.specs].
+ */
+internal object TypographySlotBridge {
+
+	fun slotTextStylePayload(slotName: String): SlotTextStyleRecord? {
+		val spec = Typographies.specs[slotName.lowercase()] ?: return null
+		return SlotTextStyleRecord(
+			style = SlotTypographyStyleRecord(
+				typography = spec.typography,
+				fontSize = spec.fontSize?.toDouble(),
+				lineHeight = spec.lineHeight?.toDouble(),
+				fontWeight = spec.fontWeight?.toString(),
+				textAlign = spec.textAlign,
+			),
+			color = spec.color,
+			overflow = spec.overflow,
+			maxLines = spec.maxLines,
+		)
+	}
+
+	@Composable
+	fun textStyleForSlot(slotName: String): TextStyle? {
+		val spec = Typographies.specs[slotName.lowercase()] ?: return null
+		var style = typographyFromToken(spec.typography)
+		spec.fontSize?.let { style = style.copy(fontSize = it.sp) }
+		spec.lineHeight?.let { style = style.copy(lineHeight = it.sp) }
+		spec.fontWeight?.let { style = style.copy(fontWeight = fontWeightFromValue(it)) }
+		spec.textAlign?.let { align ->
+			textAlignFromValue(align)?.let { style = style.copy(textAlign = it) }
+		}
+		colorFromToken(spec.color)?.let { style = style.copy(color = it) }
+		return style
+	}
+
+	@Composable
+	private fun typographyFromToken(token: String): TextStyle =
+		when (token) {
+			"displayLarge" -> MaterialTheme.typography.displayLarge
+			"displayMedium" -> MaterialTheme.typography.displayMedium
+			"displaySmall" -> MaterialTheme.typography.displaySmall
+			"headlineLarge" -> MaterialTheme.typography.headlineLarge
+			"headlineMedium" -> MaterialTheme.typography.headlineMedium
+			"headlineSmall" -> MaterialTheme.typography.headlineSmall
+			"titleLarge" -> MaterialTheme.typography.titleLarge
+			"titleMedium" -> MaterialTheme.typography.titleMedium
+			"titleSmall" -> MaterialTheme.typography.titleSmall
+			"bodyLarge" -> MaterialTheme.typography.bodyLarge
+			"bodyMedium" -> MaterialTheme.typography.bodyMedium
+			"bodySmall" -> MaterialTheme.typography.bodySmall
+			"labelLarge" -> MaterialTheme.typography.labelLarge
+			"labelMedium" -> MaterialTheme.typography.labelMedium
+			"labelSmall" -> MaterialTheme.typography.labelSmall
+			else -> MaterialTheme.typography.bodyLarge
+		}
+
+	private fun textAlignFromValue(value: String): TextAlign? =
+		when (value.lowercase()) {
+			"left" -> TextAlign.Left
+			"right" -> TextAlign.Right
+			"center" -> TextAlign.Center
+			"justify" -> TextAlign.Justify
+			"start" -> TextAlign.Start
+			"end" -> TextAlign.End
+			else -> null
+		}
+
+	private fun fontWeightFromValue(value: Int): FontWeight =
+		when (value) {
+			100 -> FontWeight.Thin
+			200 -> FontWeight.ExtraLight
+			300 -> FontWeight.Light
+			400 -> FontWeight.Normal
+			500 -> FontWeight.Medium
+			600 -> FontWeight.SemiBold
+			700 -> FontWeight.Bold
+			800 -> FontWeight.ExtraBold
+			900 -> FontWeight.Black
+			else -> FontWeight(value)
+		}
+
+	@Composable
+	private fun colorFromToken(token: String?): Color? =
+		when (token?.lowercase()) {
+			"label" -> ExtendedTheme.colorScheme.label
+			"secondarylabel" -> ExtendedTheme.colorScheme.secondaryLabel
+			"tertiarylabel" -> ExtendedTheme.colorScheme.tertiaryLabel
+			"link" -> ExtendedTheme.colorScheme.link
+			else -> null
+		}
+}

package/android/src/main/java/expo/modules/myui/TypographySlot/constants.kt

@@ -0,0 +1,47 @@
+package expo.modules.myui.TypographySlot
+
+internal data class SlotTextSpec(
+	val typography: String,
+	val fontSize: Float? = null,
+	val lineHeight: Float? = null,
+	val fontWeight: Int? = null,
+	val color: String? = null,
+	/** Valores de `@expo/ui` Text: `clip`, `ellipsis`, `visible`. */
+	val overflow: String? = null,
+	val maxLines: Int? = null,
+	/** Valores de `@expo/ui` Text: `left`, `right`, `center`, `justify`, `start`, `end`. */
+	val textAlign: String? = null,
+)
+
+/**
+ * Estilos por slot (minúsculas). Compartidos por [TypographySlotBridge] (Compose + JS).
+ */
+internal object Typographies {
+
+	val specs: Map<String, SlotTextSpec> = mapOf(
+		"headlinecontent" to SlotTextSpec("bodyLarge", 17f, 22f, 400 /*, maxLines = 1*/, textAlign = "left"),
+		"trailingcontent" to SlotTextSpec("bodyLarge", 17f, 22f, 400 /*, , maxLines = 1*/, textAlign = "end", overflow = "ellipsis"),
+		"supportingcontent" to SlotTextSpec("bodyMedium", 15f, 20f, 400),
+		"leadingcontent" to SlotTextSpec("headlineSmall"),
+		"overlinecontent" to SlotTextSpec("labelMedium"),
+
+		"title" to SlotTextSpec("bodyLarge", 17f, 22f, 600, "secondaryLabel"),
+		"header" to SlotTextSpec("bodyLarge", 17f, 22f, 600, "secondaryLabel"),
+		"footer" to SlotTextSpec("bodySmall", 13f, 16f, 400, "secondaryLabel"),
+		"footercount" to SlotTextSpec("bodyLarge", 17f, 22f, 500, "label", textAlign = "center"),
+
+		"icontitle" to SlotTextSpec("bodyLarge", 28f, 34f, 700, "label"),
+		"iconsubtitle" to SlotTextSpec("bodyLarge", 17f, 22f, 400, "secondaryLabel"),
+		"iconbutton" to SlotTextSpec("bodyLarge", 17f, 22f, 500, "label"),
+
+		"menuitemheadline" to SlotTextSpec("bodyLarge", 17f, 20f, 400),
+		"menuitemsupporting" to SlotTextSpec("bodyMedium", 13f, 18f, 400, "secondaryLabel"),
+		"menuitemtrailing" to SlotTextSpec("bodyMedium", 15f, 20f, 500, "secondaryLabel"),
+
+		"modalheader" to SlotTextSpec("bodyLarge", 17f, 22f, 600),
+
+		"titlealert" to SlotTextSpec("bodyLarge", 17f, 22f, 600),
+		"messagetalert" to SlotTextSpec("bodyLarge", 17f, 22f, 400),
+
+	)
+}

package/android/src/main/java/expo/modules/myui/TypographySlot/index.kt

@@ -0,0 +1,43 @@
+package expo.modules.myui.TypographySlot
+
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+import expo.modules.myui.Children
+
+/**
+ * [slotName] debe coincidir con los strings de slot de ListItem en Compose / `@expo/ui`
+ * (p. ej. `headlineContent`, `trailingContent`), no con las claves TS (`HeadlineContent`).
+ */
+data class TypographySlotProps(
+	val slotName: String = "",
+	/** Si es false, solo se delega a [content] sin envolver en [ProvideTextStyle]. */
+	val applyTypography: Boolean = true,
+) : ComposeProps
+
+/**
+ * Aplica la tipografía del slot al [content] composable.
+ * Compartido por [TypographySlotContent] y [expo.modules.myui.ListItem.ListItemDynamic].
+ */
+@Composable
+internal fun SlotTypography(
+	slotName: String,
+	applyTypography: Boolean = true,
+	content: @Composable () -> Unit,
+) {
+	val style = TypographySlotBridge.textStyleForSlot(slotName)
+	if (applyTypography && style != null) {
+		ProvideTextStyle(style, content = content)
+	} else {
+		content()
+	}
+}
+
+@Composable
+internal fun FunctionalComposableScope.TypographySlotContent(props: TypographySlotProps) {
+	SlotTypography(props.slotName, props.applyTypography) {
+		Children()
+	}
+}

package/android/src/main/java/expo/modules/myui/extended-theme/ExtendedThemeView.kt

@@ -0,0 +1,19 @@
+package expo.modules.myui
+
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+import expo.modules.myui.theme.ExtendedTheme
+
+/** Props para `View("ExtendedTheme")` — constructor con defaults (Expo Modules). */
+data class ExtendedThemeProps(
+  private val unused: Boolean = false,
+) : ComposeProps
+
+@Composable
+internal fun FunctionalComposableScope.ExtendedThemeViewContent(props: ExtendedThemeProps) {
+  ExtendedTheme {
+    Children()
+  }
+}

package/android/src/main/java/expo/modules/myui/extended-theme/assets/Colors/ExtendedColorBridge.kt

@@ -0,0 +1,77 @@
+package expo.modules.myui.theme.colors
+
+
+// Agregar esto al MyUiModule.kt
+
+/**
+  Function("getExtendedColor") { name: String, scheme: String ->
+    val context =
+      appContext.reactContext
+        ?: throw IllegalStateException("React context is not available")
+    ExtendedColorBridge.extendedColorHex(name, scheme, context)
+  }
+*/
+
+
+
+import android.content.Context
+import android.content.res.Configuration
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import java.util.Locale
+import kotlin.reflect.KProperty1
+import kotlin.reflect.full.memberProperties
+
+import expo.modules.myui.theme.colors.ExtendedColorScheme
+import expo.modules.myui.theme.colors.extendedDark
+import expo.modules.myui.theme.colors.extendedLight
+
+
+/**
+ * Resuelve light/dark como Expo Router: si [scheme] no es "light" ni "dark",
+ * usa el UI mode del [context] (p. ej. cuando JS manda "unspecified").
+ *
+ * Los tokens de color se derivan de [ExtendedColorScheme]: cada propiedad `Color`
+ * queda expuesta como clave en minúsculas (`BLUE` → `"blue"`, `SECONDARY_LABEL` → `"secondary_label"`).
+ */
+internal object ExtendedColorBridge {
+
+  private val colorAccessors: Map<String, (ExtendedColorScheme) -> Color> by lazy {
+    ExtendedColorScheme::class.memberProperties.mapNotNull { prop ->
+      val getter = prop as? KProperty1<ExtendedColorScheme, *> ?: return@mapNotNull null
+      if (getter.returnType.classifier != Color::class) return@mapNotNull null
+      prop.name.lowercase(Locale.US) to { scheme: ExtendedColorScheme ->
+        getter.get(scheme) as Color
+      }
+    }.toMap()
+  }
+
+  fun resolveScheme(scheme: String, context: Context): String {
+    if (scheme == "dark" || scheme == "light") {
+      return scheme
+    }
+    val flags = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+    return when (flags) {
+      Configuration.UI_MODE_NIGHT_YES -> "dark"
+      else -> "light"
+    }
+  }
+
+  /**
+   * HEX #RRGGBB para un token de [ExtendedColorScheme].
+   * [name]: case-insensitive; debe coincidir con el nombre de la propiedad en minúsculas.
+   * Devuelve null si el token no existe.
+   */
+  fun extendedColorHex(name: String, scheme: String, context: Context): String? {
+    val resolved = resolveScheme(scheme, context)
+    val palette: ExtendedColorScheme =
+      if (resolved == "dark") extendedDark else extendedLight
+    val color = pickColor(palette, name.lowercase(Locale.US)) ?: return null
+    return String.format(Locale.US, "#%06X", 0xFFFFFF and color.toArgb())
+  }
+
+  private fun pickColor(scheme: ExtendedColorScheme, key: String): Color? {
+    val accessor = colorAccessors[key.lowercase(Locale.US)] ?: return null
+    return accessor(scheme)
+  }
+}