@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/dialogos/HostDeDialogos.tsx

@@ -0,0 +1,172 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import BotonGrande from "../componentes/BotonGrande";
+import { Text } from "../texto";
+import {
+    dialogoActual,
+    responderDialogo,
+    suscribirDialogos,
+    type BotonDeDialogo,
+} from "./dialogos";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { Modal, Pressable, ScrollView, useWindowDimensions, View } from "react-native";
+
+/**
+ * Pinta los diálogos que abre `mostrarDialogo` (`dialogos.ts`), de uno en uno. Se monta una
+ * sola vez, en el layout raíz de la app.
+ *
+ * Es el diálogo de la casa —el `ConfirmDialog` de las revisiones de wms— con la letra grande de las apps:
+ * una tarjeta blanca sobre fondo oscuro, el icono arriba, título y mensaje sin recortar, y los
+ * botones **apilados a lo ancho**: lado a lado no caben con la letra al 180%. «Cancelar» va como
+ * texto discreto al pie. Atrás y el toque fuera cierran como cancelar, salvo que el diálogo diga
+ * que no es cancelable.
+ */
+const HostDeDialogos = () => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const dialogo = React.useSyncExternalStore(suscribirDialogos, dialogoActual);
+    const { height } = useWindowDimensions();
+
+    if (!dialogo) return null;
+
+    const cancelable = dialogo.cancelable ?? true;
+    const cerrar = () => {
+        if (cancelable) responderDialogo(dialogo, undefined);
+    };
+    const acciones = dialogo.botones.filter((b) => b.estilo !== "cancelar");
+    const cancelar = dialogo.botones.find((b) => b.estilo === "cancelar");
+
+    return (
+        <Modal
+            visible
+            transparent
+            animationType="fade"
+            statusBarTranslucent
+            navigationBarTranslucent
+            onRequestClose={cerrar}
+        >
+            <Pressable style={styles.fondo} onPress={cerrar} accessibilityLabel="Cerrar">
+                {/* El `Pressable` vacío de la tarjeta se queda con el toque: tocar adentro no cierra. */}
+                <Pressable
+                    style={[styles.tarjeta, { maxHeight: height * 0.85 }]}
+                    onPress={() => {}}
+                >
+                    <ScrollView
+                        contentContainerStyle={styles.contenido}
+                        showsVerticalScrollIndicator={false}
+                    >
+                        {dialogo.icono ? (
+                            <View style={styles.icono}>
+                                <MaterialCommunityIcons
+                                    name={dialogo.icono}
+                                    size={34}
+                                    color={c.primary}
+                                />
+                            </View>
+                        ) : null}
+                        <Text style={styles.titulo}>{dialogo.titulo}</Text>
+                        {dialogo.mensaje ? (
+                            <Text style={styles.mensaje}>{dialogo.mensaje}</Text>
+                        ) : null}
+
+                        <View style={styles.botones}>
+                            {acciones.map((boton, i) => (
+                                <Boton
+                                    key={`${boton.texto}-${i}`}
+                                    boton={boton}
+                                    onPress={() => responderDialogo(dialogo, boton.valor)}
+                                />
+                            ))}
+                            {cancelar ? (
+                                <Pressable
+                                    onPress={() => responderDialogo(dialogo, cancelar.valor)}
+                                    hitSlop={8}
+                                    accessibilityRole="button"
+                                    style={({ pressed }) => [
+                                        styles.cancelar,
+                                        pressed && { opacity: 0.6 },
+                                    ]}
+                                >
+                                    <Text style={styles.cancelarTexto}>{cancelar.texto}</Text>
+                                </Pressable>
+                            ) : null}
+                        </View>
+                    </ScrollView>
+                </Pressable>
+            </Pressable>
+        </Modal>
+    );
+};
+
+function Boton({ boton, onPress }: { boton: BotonDeDialogo<unknown>; onPress: () => void }) {
+    const estilo = boton.estilo ?? "principal";
+    return (
+        <BotonGrande
+            icono={boton.icono}
+            modo={
+                estilo === "secundario"
+                    ? "contorno"
+                    : estilo === "destructivo"
+                      ? "destructivo"
+                      : "relleno"
+            }
+            onPress={onPress}
+        >
+            {boton.texto}
+        </BotonGrande>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    fondo: {
+        flex: 1,
+        backgroundColor: c.velo,
+        justifyContent: "center",
+        padding: 20,
+    },
+    tarjeta: {
+        width: "100%",
+        maxWidth: 480,
+        alignSelf: "center",
+        backgroundColor: c.superficie,
+        borderRadius: 20,
+        overflow: "hidden",
+        elevation: 12,
+        shadowColor: c.sombra,
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.25,
+        shadowRadius: 24,
+    },
+    contenido: { padding: 22, gap: 10 },
+    icono: {
+        alignSelf: "center",
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: c.primaryWash,
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 4,
+    },
+    titulo: {
+        ...renglon(tipografia.titulo),
+        fontWeight: "900",
+        color: c.texto,
+        textAlign: "center",
+    },
+    mensaje: {
+        ...renglon(tipografia.cuerpo),
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    botones: { gap: 10, marginTop: 12 },
+    cancelar: { alignSelf: "center", paddingVertical: 12, paddingHorizontal: 20 },
+    cancelarTexto: {
+        ...renglon(tipografia.cuerpo),
+        fontWeight: "700",
+        color: c.secondary,
+        textAlign: "center",
+    },
+}));
+
+export default HostDeDialogos;

package/src/dialogos/dialogos.ts

@@ -0,0 +1,148 @@
+// Los diálogos de las apps, con su diseño y no el `Alert` del sistema. Esto es la API: la abren las
+// pantallas y también código que no es componente (una cola de envíos, la ubicación, la
+// navegación). Los pinta `HostDeDialogos`, montado una vez en el layout raíz.
+import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import type React from "react";
+
+type NombreDeIcono = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+
+/**
+ * - `principal`: la acción esperada, en rojo.
+ * - `secundario`: otra opción válida, en contorno.
+ * - `destructivo`: borra o deshace algo (Deshacer, Descartar, Cerrar sesión), en rojo oscuro.
+ * - `cancelar`: no hacer nada, como texto discreto al pie.
+ */
+export type EstiloDeBoton = "principal" | "secundario" | "destructivo" | "cancelar";
+
+export interface BotonDeDialogo<V> {
+    texto: string;
+    estilo?: EstiloDeBoton;
+    icono?: NombreDeIcono;
+    /** Lo que resuelve la promesa de `mostrarDialogo` al tocarlo. */
+    valor: V;
+}
+
+export interface Dialogo<V> {
+    titulo: string;
+    mensaje?: string;
+    icono?: NombreDeIcono;
+    botones: BotonDeDialogo<V>[];
+    /**
+     * Si el botón atrás de Android y el toque fuera de la tarjeta lo cierran (resolviendo
+     * `undefined`, como cancelar). Por omisión, sí.
+     */
+    cancelable?: boolean;
+}
+
+interface EnEspera {
+    dialogo: Dialogo<unknown>;
+    responder: (valor: unknown) => void;
+}
+
+/**
+ * La fila de diálogos. Vive en `globalThis` para que Fast Refresh, al re-evaluar este módulo, no
+ * deje al host escuchando una fila vieja con promesas que nunca se resuelven.
+ */
+const g = globalThis as typeof globalThis & {
+    __dialogos?: { fila: EnEspera[]; oyentes: Set<() => void> };
+};
+const estado = (g.__dialogos ??= { fila: [], oyentes: new Set() });
+
+const avisarCambio = () => estado.oyentes.forEach((oyente) => oyente());
+
+/**
+ * Abre un diálogo y espera la respuesta: el `valor` del botón tocado, o `undefined` si se cerró
+ * sin elegir (atrás, toque fuera). Si ya hay uno abierto, éste espera su turno: se muestran de uno
+ * en uno, en el orden en que llegaron.
+ */
+export function mostrarDialogo<V>(dialogo: Dialogo<V>): Promise<V | undefined> {
+    return new Promise((resolver) => {
+        estado.fila.push({
+            dialogo: dialogo as Dialogo<unknown>,
+            responder: resolver as (valor: unknown) => void,
+        });
+        avisarCambio();
+    });
+}
+
+/**
+ * Una pregunta de sí o no. Resuelve `true` sólo si se tocó el botón de confirmar; cancelar,
+ * atrás y el toque fuera dan `false`.
+ */
+export async function confirmar({
+    titulo,
+    mensaje,
+    textoConfirmar,
+    textoCancelar = "Cancelar",
+    destructivo = false,
+    icono,
+}: {
+    titulo: string;
+    mensaje?: string;
+    textoConfirmar: string;
+    textoCancelar?: string;
+    destructivo?: boolean;
+    icono?: NombreDeIcono;
+}): Promise<boolean> {
+    const respuesta = await mostrarDialogo({
+        titulo,
+        mensaje,
+        icono: icono ?? (destructivo ? "alert-circle-outline" : "help-circle-outline"),
+        botones: [
+            {
+                texto: textoConfirmar,
+                estilo: destructivo ? "destructivo" : "principal",
+                valor: true,
+            },
+            { texto: textoCancelar, estilo: "cancelar", valor: false },
+        ],
+    });
+    return respuesta === true;
+}
+
+/** Un aviso con un solo botón. Resuelve al cerrarse. */
+export async function avisar({
+    titulo,
+    mensaje,
+    icono = "information-outline",
+    textoBoton = "Entendido",
+    cancelable = true,
+}: {
+    titulo: string;
+    mensaje?: string;
+    icono?: NombreDeIcono;
+    textoBoton?: string;
+    cancelable?: boolean;
+}): Promise<void> {
+    await mostrarDialogo({
+        titulo,
+        mensaje,
+        icono,
+        cancelable,
+        botones: [{ texto: textoBoton, estilo: "principal", valor: true }],
+    });
+}
+
+// ==============================|| PARA EL HOST ||============================== //
+
+/** El que se está mostrando, o `null`. */
+export const dialogoActual = (): Dialogo<unknown> | null => estado.fila[0]?.dialogo ?? null;
+
+export function suscribirDialogos(oyente: () => void): () => void {
+    estado.oyentes.add(oyente);
+    return () => {
+        estado.oyentes.delete(oyente);
+    };
+}
+
+/**
+ * Cierra `dialogo` con `valor` y pasa al siguiente de la fila. Sólo si `dialogo` sigue siendo el
+ * actual: el segundo toque de un doble toque llega con el diálogo que ya se contestó, y sin esta
+ * comparación contestaba también el siguiente de la fila sin que el operador lo viera.
+ */
+export function responderDialogo(dialogo: Dialogo<unknown>, valor: unknown): void {
+    if (estado.fila[0]?.dialogo !== dialogo) return;
+    const actual = estado.fila.shift();
+    actual?.responder(valor);
+    avisarCambio();
+}

package/src/formularios/CampoDeSeleccion.tsx

@@ -0,0 +1,60 @@
+import { View } from "react-native";
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { Text } from "../texto";
+import { ErrorDelCampo } from "./campos";
+import SelectorDeOpcion, {
+    SelectorDeVarias,
+    type Opcion,
+    type PropsDeSelectorDeOpcion,
+    type PropsDeSelectorDeVarias,
+} from "./SelectorDeOpcion";
+
+/**
+ * Un campo que se elige de una lista larga —un catálogo del servidor, uno guardado en el
+ * teléfono—: `SelectorDeOpcion` con el error del formulario debajo. Es el `ControlledAutocomplete`
+ * del portal.
+ *
+ * Quien lo usa trae las opciones y, si son del servidor, la búsqueda: en una app es su consulta del
+ * catálogo (`useBusqueda` para no pedir una vez por letra). Una lista fija se pasa sin `onBuscar`
+ * y se filtra sola.
+ */
+export default function CampoDeSeleccion<T extends Opcion>({
+    error,
+    ayuda,
+    ...props
+}: PropsDeSelectorDeOpcion<T> & { error?: string; ayuda?: string }) {
+    const styles = useStyles();
+    return (
+        <View style={styles.campo}>
+            <SelectorDeOpcion<T> {...props} />
+            {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
+            <ErrorDelCampo error={error} />
+        </View>
+    );
+}
+
+/**
+ * Lo mismo, pero se eligen varias (los recibos de un concepto, las piezas sobre las que se cobra
+ * un porcentaje): `SelectorDeVarias` con el error debajo. El valor es la lista de opciones
+ * enteras, igual que el de una es la opción entera.
+ */
+export function CampoDeVarias<T extends Opcion>({
+    error,
+    ayuda,
+    ...props
+}: PropsDeSelectorDeVarias<T> & { error?: string; ayuda?: string }) {
+    const styles = useStyles();
+    return (
+        <View style={styles.campo}>
+            <SelectorDeVarias<T> {...props} />
+            {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
+            <ErrorDelCampo error={error} />
+        </View>
+    );
+}
+
+// La ayuda con el mismo renglón y color que la de los demás campos (`Campo`).
+const useStyles = crearEstilos((c) => ({
+    campo: { gap: 6 },
+    ayuda: { ...renglon(tipografia.secundario), color: c.secondary },
+}));