@acvl/mobile-components 0.0.5 → 0.0.6

package/src/pantallas/PantallaDeEdicion.tsx

@@ -8,6 +8,7 @@ import EstadoVacio from "../componentes/EstadoVacio";
 import Nota from "../componentes/Nota";
 import { mensajeDeError } from "../formularios/errores";
 import { crearEstilos, usePaleta } from "../tema";
+import { useTextos } from "../idioma";
 
 /**
  * El armazón de una pantalla que edita algo (un viaje, un tracto, una caja, un operador). Dos
@@ -43,19 +44,24 @@ export function EsperaDeEdicion({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
     return (
         <View style={styles.root}>
             <CabeceraEmpujada eyebrow={eyebrow} titulo="…" />
             {!puede ? (
-                <EstadoVacio icono="lock-outline" titulo="No tienes permiso" texto={sinPermiso} />
+                <EstadoVacio
+                    icono="lock-outline"
+                    titulo={t.edicion.sinPermiso}
+                    texto={sinPermiso}
+                />
             ) : consulta.isError ? (
                 <EstadoVacio
                     icono="cloud-alert"
-                    titulo={`No se pudo cargar ${queEs}`}
-                    texto={mensajeDeError(consulta.error, "Revisa la señal e intenta de nuevo.")}
+                    titulo={t.edicion.noSePudoCargar(queEs)}
+                    texto={mensajeDeError(consulta.error, t.comun.revisaLaSenal)}
                 >
                     <BotonGrande icono="refresh" modo="contorno" onPress={consulta.refetch}>
-                        Reintentar
+                        {t.comun.reintentar}
                     </BotonGrande>
                 </EstadoVacio>
             ) : (
@@ -71,7 +77,7 @@ export function FormularioDeEdicion({
     error,
     guardando,
     onGuardar,
-    textoDeGuardar = "Guardar",
+    textoDeGuardar,
     children,
 }: {
     eyebrow: string;
@@ -86,6 +92,7 @@ export function FormularioDeEdicion({
 }) {
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
     return (
         <View style={styles.root}>
             <CabeceraEmpujada eyebrow={eyebrow} titulo={titulo} />
@@ -99,7 +106,7 @@ export function FormularioDeEdicion({
                 </ScrollView>
                 <View style={[styles.pie, { paddingBottom: insets.bottom + 16 }]}>
                     <BotonGrande icono="check" onPress={onGuardar} cargando={guardando}>
-                        {guardando ? "Guardando…" : textoDeGuardar}
+                        {guardando ? t.edicion.guardando : (textoDeGuardar ?? t.edicion.guardar)}
                     </BotonGrande>
                 </View>
             </KeyboardAvoidingView>

package/src/pantallas/PantallaDeFicha.tsx

@@ -6,6 +6,7 @@ import BotonGrande from "../componentes/BotonGrande";
 import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
 import EstadoVacio from "../componentes/EstadoVacio";
 import { crearEstilos, usePaleta } from "../tema";
+import { useTextos } from "../idioma";
 
 /** Lo que la ficha lee de un `use…Query` de RTK Query. */
 interface ConsultaDeFicha {
@@ -54,6 +55,7 @@ export default function PantallaDeFicha({
     const c = usePaleta();
     const styles = useStyles();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
 
     let cuerpo: React.ReactNode;
     if (consulta.isLoading) {
@@ -62,17 +64,17 @@ export default function PantallaDeFicha({
         cuerpo = esNoEncontrado(consulta.error) ? (
             <EstadoVacio
                 icono="file-hidden"
-                titulo="No existe"
-                texto="Puede que lo hayan borrado, o que no tengas permiso de verlo."
+                titulo={t.ficha.noExiste}
+                texto={t.ficha.noExisteTexto}
             />
         ) : (
             <EstadoVacio
                 icono="cloud-off-outline"
-                titulo="No se pudo cargar"
-                texto="Revisa tu señal e intenta de nuevo."
+                titulo={t.comun.noSePudoCargar}
+                texto={t.comun.revisaLaSenal}
             >
                 <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
-                    Reintentar
+                    {t.comun.reintentar}
                 </BotonGrande>
             </EstadoVacio>
         );

package/src/pantallas/PantallaDeHistorial.tsx

@@ -8,6 +8,7 @@ import EstadoVacio from "../componentes/EstadoVacio";
 import Tarjeta from "../componentes/Tarjeta";
 import { crearEstilos, renglon, tipografia, usePaleta, type Paleta } from "../tema";
 import { Text } from "../texto";
+import { type Idioma, type Textos, useIdiomaDeLaLibreria, useTextos } from "../idioma";
 
 /**
  * Un movimiento de la bitácora de un registro, como lo responde cualquier endpoint `historial/`
@@ -64,20 +65,20 @@ const partirTipo = (tipo: string) => {
 };
 
 /** El valor de un campo tal como viene de la bitácora, listo para pintarse. */
-const formatear = (valor: unknown): string => {
+const formatear = (valor: unknown, t: Textos): string => {
     if (valor === null || valor === undefined || valor === "") return "—";
-    if (typeof valor === "boolean") return valor ? "Sí" : "No";
+    if (typeof valor === "boolean") return valor ? t.comun.si : t.comun.no;
     if (Array.isArray(valor)) return valor.length ? valor.join(", ") : "—";
     if (typeof valor === "object") return JSON.stringify(valor);
     return String(valor);
 };
 
 /** La fecha y hora del movimiento, en la hora del teléfono. */
-const fechaHora = (iso: string) => {
+const fechaHora = (iso: string, idioma: Idioma) => {
     const fecha = new Date(iso);
     return Number.isNaN(fecha.getTime())
         ? "—"
-        : fecha.toLocaleString("es-MX", {
+        : fecha.toLocaleString(idioma === "en" ? "en-US" : "es-MX", {
               day: "2-digit",
               month: "short",
               year: "numeric",
@@ -102,6 +103,8 @@ export function TarjetaDeEvento({
 }) {
     const c = usePaleta();
     const styles = useStyles();
+    const t = useTextos();
+    const idioma = useIdiomaDeLaLibreria();
     const [abierto, setAbierto] = React.useState(false);
 
     const { accion, modelo } = partirTipo(evento.history_type);
@@ -121,16 +124,18 @@ export function TarjetaDeEvento({
                 <View style={styles.flex}>
                     <Text style={styles.titulo}>{modelo}</Text>
                     <Text style={styles.linea}>
-                        {[accion, evento.history_user || "Sistema"].filter(Boolean).join(" · ")}
+                        {[accion, evento.history_user || t.historial.sistema]
+                            .filter(Boolean)
+                            .join(" · ")}
                     </Text>
-                    <Text style={styles.linea}>{fechaHora(evento.history_date)}</Text>
+                    <Text style={styles.linea}>{fechaHora(evento.history_date, idioma)}</Text>
                 </View>
             </View>
 
             {/* Un arreglo vacío es «se guardó sin mover nada»; nulo es la creación, que no lista
                 cambios. */}
             {!abierto && cambiados?.length === 0 ? (
-                <Text style={styles.sinCambios}>Sin cambios en los campos.</Text>
+                <Text style={styles.sinCambios}>{t.historial.sinCambios}</Text>
             ) : null}
 
             {visibles.map((campo) => {
@@ -140,7 +145,7 @@ export function TarjetaDeEvento({
                         <Text style={[styles.etiqueta, cambiado && styles.etiquetaCambiada]}>
                             {labels[campo]}
                         </Text>
-                        <Text style={styles.valor}>{formatear(evento[campo])}</Text>
+                        <Text style={styles.valor}>{formatear(evento[campo], t)}</Text>
                     </View>
                 );
             })}
@@ -154,10 +159,10 @@ export function TarjetaDeEvento({
                 >
                     <Text style={styles.alternarTexto}>
                         {abierto
-                            ? "Ocultar campos"
+                            ? t.historial.ocultarCampos
                             : cambiados?.length
-                              ? "Ver todos los campos"
-                              : "Ver los campos"}
+                              ? t.historial.verTodos
+                              : t.historial.verCampos}
                     </Text>
                     <MaterialCommunityIcons
                         name={abierto ? "chevron-up" : "chevron-down"}
@@ -205,20 +210,21 @@ export default function PantallaDeHistorial({
     const insets = useSafeAreaInsets();
     const { data, isLoading, isFetching, isError, refetch } = consulta;
     const eventos = data?.history ?? [];
+    const t = useTextos();
 
     return (
         <View style={styles.root}>
-            <CabeceraEmpujada eyebrow={eyebrow} titulo="Historial" />
+            <CabeceraEmpujada eyebrow={eyebrow} titulo={t.historial.titulo} />
             {/* El error sólo se queda con la pantalla cuando no hay nada que enseñar: un refresco
                 que falla no debe borrar el historial que ya se estaba leyendo. */}
             {isError && !data ? (
                 <EstadoVacio
                     icono="cloud-off-outline"
-                    titulo="No se pudo cargar el historial"
-                    texto="Revisa tu señal e intenta de nuevo."
+                    titulo={t.historial.noCargo}
+                    texto={t.comun.revisaLaSenal}
                 >
                     <BotonGrande icono="refresh" modo="contorno" onPress={() => refetch()}>
-                        Reintentar
+                        {t.comun.reintentar}
                     </BotonGrande>
                 </EstadoVacio>
             ) : isLoading ? (
@@ -240,7 +246,7 @@ export default function PantallaDeHistorial({
                     }
                 >
                     {eventos.length === 0 ? (
-                        <EstadoVacio icono="history" titulo="Sin movimientos registrados" />
+                        <EstadoVacio icono="history" titulo={t.historial.sinMovimientos} />
                     ) : (
                         eventos.map((evento, indice) => (
                             // El backend no da una llave por evento (mezcla modelos con ids que se

package/src/pantallas/PantallaDePerfil.tsx

@@ -13,16 +13,17 @@ import {
     type PreferenciaDeTema,
 } from "../tema";
 import { Text } from "../texto";
+import { type Textos, useTextos } from "../idioma";
 
 /**
  * La apariencia: **igual que el teléfono** por omisión, o fija. Tres opciones y no un interruptor de
  * «modo oscuro», como el del portal: con un interruptor, quien lo toca una vez ya no vuelve a seguir
  * al teléfono.
  */
-const APARIENCIAS: Pestana<PreferenciaDeTema>[] = [
-    { key: "sistema", label: "Teléfono", icono: "cellphone" },
-    { key: "claro", label: "Claro", icono: "white-balance-sunny" },
-    { key: "oscuro", label: "Oscuro", icono: "weather-night" },
+const aparienciasDe = (t: Textos): Pestana<PreferenciaDeTema>[] => [
+    { key: "sistema", label: t.perfil.telefono, icono: "cellphone" },
+    { key: "claro", label: t.perfil.claro, icono: "white-balance-sunny" },
+    { key: "oscuro", label: t.perfil.oscuro, icono: "weather-night" },
 ];
 
 /**
@@ -52,10 +53,11 @@ export default function PantallaDePerfil({
     const styles = useStyles();
     const [tema, setTema] = usePreferenciaDeTema();
     const insets = useSafeAreaInsets();
+    const t = useTextos();
 
     return (
         <View style={styles.root}>
-            <CabeceraEmpujada eyebrow={rotulo} titulo="Perfil" />
+            <CabeceraEmpujada eyebrow={rotulo} titulo={t.perfil.titulo} />
 
             <ContenidoDePantalla paddingBottom={insets.bottom + 20}>
                 <ScrollView
@@ -66,13 +68,13 @@ export default function PantallaDePerfil({
                         {/* Paper recorta título y subtítulo a un renglón por omisión: un nombre
                             largo con la letra al 180% se perdía. */}
                         <Card.Title
-                            title={nombre || "N/A"}
+                            title={nombre || t.comun.noDisponible}
                             titleVariant={"titleLarge"}
                             titleStyle={{ fontWeight: "bold" }}
                             titleNumberOfLines={0}
                             subtitleNumberOfLines={0}
                             subtitleStyle={renglon(tipografia.secundario)}
-                            subtitle={subtitulo || "N/A"}
+                            subtitle={subtitulo || t.comun.noDisponible}
                             subtitleVariant={"bodySmall"}
                             left={(props) => (
                                 <Avatar.Text
@@ -85,8 +87,8 @@ export default function PantallaDePerfil({
                     </Card>
 
                     <View style={styles.apariencia}>
-                        <Text style={styles.rotulo}>Apariencia</Text>
-                        <Pestanas pestanas={APARIENCIAS} activa={tema} onSelect={setTema} />
+                        <Text style={styles.rotulo}>{t.perfil.apariencia}</Text>
+                        <Pestanas pestanas={aparienciasDe(t)} activa={tema} onSelect={setTema} />
                     </View>
 
                     {/* El tope de ancho vive en este View y no en el Button: el Surface de
@@ -100,7 +102,7 @@ export default function PantallaDePerfil({
                             loading={saliendo}
                             disabled={saliendo}
                         >
-                            Cerrar sesión
+                            {t.perfil.cerrarSesion}
                         </Button>
                     </View>
                     {children}