@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/componentes/AccionesDelEncabezado.tsx

@@ -0,0 +1,247 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import {
+    ActivityIndicator,
+    BackHandler,
+    Pressable,
+    useWindowDimensions,
+    View,
+    type LayoutChangeEvent,
+} from "react-native";
+import { Menu } from "react-native-paper";
+
+/** Lo que mide un botón y lo que se separan: con eso se cuenta cuántos caben. */
+const LADO = 40;
+const ENTRE = 8;
+/** Los que se ven a lo más, aunque quepan más: más botones ya no se distinguen de un vistazo. */
+const MAXIMO_A_LA_VISTA = 3;
+
+export interface AccionDelEncabezado {
+    /** El texto del renglón del menú y lo que lee el lector de pantalla. */
+    etiqueta: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    onPress: () => void;
+    disabled?: boolean;
+    /** Un indicador en vez del icono, y la acción bloqueada mientras corre. */
+    cargando?: boolean;
+    /** Para la que borra o cancela: en rojo, en el botón y en el menú. */
+    destructiva?: boolean;
+    /** Las fijadas son las últimas en irse al menú (Editar). */
+    fijada?: boolean;
+    /**
+     * Una cifra pendiente de la acción: los mensajes sin leer de un hilo. Va sobre su botón o, si
+     * la acción se fue al menú, en su renglón — y entonces los tres puntos la suman, porque una
+     * cifra escondida no avisa de nada.
+     */
+    insignia?: number;
+}
+
+/**
+ * La cifra sobre un botón: «9+» de diez para arriba, que más dígitos no caben en el círculo. Con la
+ * letra de la casa (`etiqueta`) y el círculo crece con la del sistema, como el de `RotuloDeSeccion`.
+ */
+const Insignia = ({ cuantas }: { cuantas: number }) => {
+    const styles = useStyles();
+    const { fontScale } = useWindowDimensions();
+    const alto = renglon(tipografia.etiqueta).lineHeight * fontScale;
+    return (
+        <View
+            style={[styles.insignia, { minWidth: alto, height: alto, borderRadius: alto / 2 }]}
+            pointerEvents="none"
+        >
+            <Text style={styles.insigniaTexto}>{cuantas > 9 ? "9+" : cuantas}</Text>
+        </View>
+    );
+};
+
+const Boton = ({
+    accion,
+    onPress,
+}: {
+    accion: Pick<
+        AccionDelEncabezado,
+        "etiqueta" | "icono" | "disabled" | "cargando" | "destructiva" | "insignia"
+    >;
+    onPress: () => void;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={accion.disabled || accion.cargando}
+            accessibilityRole="button"
+            accessibilityLabel={accion.etiqueta}
+            hitSlop={4}
+            style={({ pressed }) => [
+                styles.boton,
+                accion.disabled && styles.apagado,
+                pressed && styles.presionado,
+            ]}
+        >
+            {accion.cargando ? (
+                <ActivityIndicator size="small" color={c.primary} />
+            ) : (
+                <MaterialCommunityIcons
+                    name={accion.icono}
+                    size={22}
+                    color={accion.destructiva ? c.primary : c.secondaryDark}
+                />
+            )}
+            {accion.insignia ? <Insignia cuantas={accion.insignia} /> : null}
+        </Pressable>
+    );
+};
+
+/**
+ * Las acciones de una ficha en su encabezado: **las que quepan como botones y las demás en el menú
+ * de los tres puntos**. Es el `ResponsiveActions` de la app de acv-wms con la paleta de la casa.
+ *
+ * No mide los botones: mide el hueco que le deja el título (`onLayout`) y cuenta cuántos de
+ * `LADO` caben. Si caben todas, van todas; si no, una menos y el menú. Las `fijadas` son las
+ * últimas en irse, sin cambiar el orden en que se ven. Quien la pone le da al título
+ * `flexShrink: 1` y no `flex: 1`, para que le deje espacio.
+ */
+export default function AccionesDelEncabezado({ acciones }: { acciones: AccionDelEncabezado[] }) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const [hueco, setHueco] = React.useState<number | null>(null);
+    const [menuAbierto, setMenuAbierto] = React.useState(false);
+
+    // Atrás con el menú abierto sólo lo cierra: si no, salía de la pantalla con el menú encima.
+    React.useEffect(() => {
+        if (!menuAbierto) return;
+        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+            setMenuAbierto(false);
+            return true;
+        });
+        return () => sub.remove();
+    }, [menuAbierto]);
+
+    const medir = (e: LayoutChangeEvent) => {
+        const ancho = e.nativeEvent.layout.width;
+        if (ancho === hueco) return;
+        setHueco(ancho);
+        setMenuAbierto(false);
+    };
+
+    if (!acciones.length) return null;
+
+    const caben = hueco === null ? 0 : Math.floor((hueco + ENTRE) / (LADO + ENTRE));
+    const todas = acciones.length <= Math.min(caben, MAXIMO_A_LA_VISTA);
+    const botones = todas ? acciones.length : Math.max(Math.min(caben - 1, MAXIMO_A_LA_VISTA), 0);
+    const aLaVista = new Set(
+        [...acciones]
+            .sort((a, b) => Number(Boolean(b.fijada)) - Number(Boolean(a.fijada)))
+            .slice(0, botones),
+    );
+    const visibles = acciones.filter((a) => aLaVista.has(a));
+    const enElMenu = acciones.filter((a) => !aLaVista.has(a));
+    const escondidas = enElMenu.reduce((suma, a) => suma + (a.insignia ?? 0), 0);
+    const cerrar = () => setMenuAbierto(false);
+
+    return (
+        <View style={styles.barra} onLayout={medir}>
+            {hueco !== null ? (
+                <>
+                    {visibles.map((a) => (
+                        <Boton key={a.etiqueta} accion={a} onPress={a.onPress} />
+                    ))}
+                    {enElMenu.length ? (
+                        <Menu
+                            visible={menuAbierto}
+                            onDismiss={cerrar}
+                            anchorPosition="bottom"
+                            // Edge-to-edge: sin esto Paper cuenta dos veces la barra de estado.
+                            statusBarHeight={0}
+                            contentStyle={styles.menu}
+                            anchor={
+                                <Boton
+                                    accion={{
+                                        etiqueta: "Más acciones",
+                                        icono: "dots-vertical",
+                                        insignia: escondidas,
+                                    }}
+                                    onPress={() => setMenuAbierto(true)}
+                                />
+                            }
+                        >
+                            {enElMenu.map((a) => (
+                                <Menu.Item
+                                    key={a.etiqueta}
+                                    title={
+                                        <Text
+                                            style={[styles.menuTexto, a.destructiva && styles.rojo]}
+                                        >
+                                            {a.etiqueta}
+                                            {a.insignia ? ` (${a.insignia})` : ""}
+                                        </Text>
+                                    }
+                                    disabled={a.disabled || a.cargando}
+                                    leadingIcon={() =>
+                                        a.cargando ? (
+                                            <ActivityIndicator size="small" color={c.primary} />
+                                        ) : (
+                                            <MaterialCommunityIcons
+                                                name={a.icono}
+                                                size={22}
+                                                color={a.destructiva ? c.primary : c.secondaryDark}
+                                            />
+                                        )
+                                    }
+                                    onPress={() => {
+                                        cerrar();
+                                        a.onPress();
+                                    }}
+                                />
+                            ))}
+                        </Menu>
+                    ) : null}
+                </>
+            ) : null}
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    barra: {
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: LADO,
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        gap: ENTRE,
+        alignSelf: "center",
+    },
+    boton: {
+        width: LADO,
+        height: LADO,
+        borderRadius: LADO / 2,
+        borderWidth: 1.5,
+        borderColor: c.secondaryLighter,
+        backgroundColor: c.superficieTenue,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    apagado: { opacity: 0.45 },
+    presionado: { opacity: 0.7 },
+    menu: { backgroundColor: c.superficie, borderRadius: 12 },
+    insignia: {
+        position: "absolute",
+        // Dentro del círculo y no colgada de su esquina: en Android lo que se sale del padre se
+        // recorta, y la cifra quedaba a medias.
+        top: 0,
+        right: 0,
+        paddingHorizontal: 4,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: c.primary,
+        borderWidth: 2,
+        borderColor: c.superficie,
+    },
+    insigniaTexto: { ...renglon(tipografia.etiqueta), fontWeight: "800", color: c.sobrePrimario },
+    menuTexto: { fontSize: 17, fontWeight: "600" },
+    rojo: { color: c.primary },
+}));

package/src/componentes/BotonDeAvatar.tsx

@@ -0,0 +1,59 @@
+import { Pressable, StyleSheet } from "react-native";
+import { Avatar } from "react-native-paper";
+import { tipografia } from "../tema";
+
+/**
+ * La inicial de cada parte, hasta dos: `inicialesDe(nombre, apellidos)` da «JP»; con sólo el nombre
+ * de la cuenta, su primera letra; sin nada, una inicial neutra.
+ */
+export const inicialesDe = (...partes: (string | null | undefined)[]): string =>
+    (
+        partes
+            .map((p) => (p ?? "").trim().charAt(0))
+            .filter(Boolean)
+            .slice(0, 2)
+            .join("") || "?"
+    ).toUpperCase();
+
+/**
+ * El avatar de quien entró, en el header de las pestañas: el acceso al perfil (y a cerrar sesión).
+ * Quien lo pone decide las iniciales y a dónde lleva.
+ */
+const BotonDeAvatar = ({
+    iniciales,
+    onPress,
+    etiqueta = "Perfil",
+}: {
+    iniciales: string;
+    onPress: () => void;
+    /** Lo que lee el lector de pantalla. */
+    etiqueta?: string;
+}) => (
+    <Pressable
+        onPress={onPress}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={etiqueta}
+        style={({ pressed }) => [styles.btn, pressed && { opacity: 0.6 }]}
+    >
+        <Avatar.Text
+            size={36}
+            label={iniciales.slice(0, 2).toUpperCase()}
+            // Blanca sobre el rojo en los dos modos: el tema oscuro de Paper la ponía oscura.
+            color="#ffffff"
+            labelStyle={styles.initial}
+        />
+    </Pressable>
+);
+
+const styles = StyleSheet.create({
+    btn: {
+        width: 40,
+        height: 40,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    initial: { fontSize: tipografia.etiqueta, fontWeight: "700", lineHeight: 20 },
+});
+
+export default BotonDeAvatar;

package/src/componentes/BotonGrande.tsx

@@ -0,0 +1,100 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, Pressable, View } from "react-native";
+
+interface Props {
+    children: string;
+    icono?: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    onPress: () => void;
+    disabled?: boolean;
+    cargando?: boolean;
+    /**
+     * `relleno` para la acción principal; `contorno` para las de apoyo; `destructivo` para la que
+     * borra o deshace algo (Deshacer, Descartar, Cerrar sesión), en rojo oscuro; `listo` para algo
+     * ya cumplido que todavía se puede abrir (la evidencia completa), en verde.
+     */
+    modo?: "relleno" | "contorno" | "destructivo" | "listo";
+}
+
+/**
+ * El botón de una acción del flujo (Iniciar, Completar, Reintentar): ancho completo, alto
+ * generoso y letra de subtítulo, para atinarle de pie y con la letra del teléfono al 180%.
+ *
+ * Es propio y no el `Button` de Paper porque ése corta su texto a un renglón: con la letra grande
+ * «Iniciar asignación desde donde estás» quedaba en «Iniciar asignac…». Aquí el texto parte en los
+ * renglones que haga falta y el botón crece con él.
+ */
+const BotonGrande = ({ children, icono, onPress, disabled, cargando, modo = "relleno" }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const inactivo = disabled || cargando;
+    // El destructivo es un relleno de otro color: misma tinta blanca, mismo apagado.
+    const relleno = modo !== "contorno";
+    const tinta = relleno ? c.sobrePrimario : c.primary;
+
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={inactivo}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !!inactivo, busy: !!cargando }}
+            style={({ pressed }) => [
+                styles.boton,
+                relleno
+                    ? modo === "destructivo"
+                        ? styles.destructivo
+                        : modo === "listo"
+                          ? styles.listo
+                          : styles.relleno
+                    : styles.contorno,
+                inactivo && (relleno ? styles.rellenoInactivo : styles.contornoInactivo),
+                pressed && { opacity: 0.85 },
+            ]}
+        >
+            <View style={styles.fila}>
+                {cargando ? (
+                    <ActivityIndicator color={tinta} />
+                ) : icono ? (
+                    <IconoDeRenglon
+                        name={icono}
+                        fontSize={tipografia.subtitulo}
+                        size={26}
+                        color={inactivo ? c.secondaryLight : tinta}
+                    />
+                ) : null}
+                <Text style={[styles.texto, { color: inactivo ? c.secondaryLight : tinta }]}>
+                    {children}
+                </Text>
+            </View>
+        </Pressable>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    boton: {
+        minHeight: 64,
+        borderRadius: 14,
+        paddingVertical: 14,
+        paddingHorizontal: 18,
+        justifyContent: "center",
+    },
+    relleno: { backgroundColor: c.primary },
+    destructivo: { backgroundColor: c.primaryDark },
+    // Un relleno con letra blanca: el verde oscuro se lee igual en los dos modos.
+    listo: { backgroundColor: "#2e7d32" },
+    rellenoInactivo: { backgroundColor: c.secondaryLighter },
+    contorno: { borderWidth: 2, borderColor: c.primary, backgroundColor: c.superficie },
+    contornoInactivo: { borderColor: c.secondaryLighter },
+    fila: { flexDirection: "row", alignItems: "flex-start", justifyContent: "center", gap: 10 },
+    texto: {
+        flexShrink: 1,
+        ...renglon(tipografia.subtitulo),
+        fontWeight: "800",
+        textAlign: "center",
+    },
+}));
+
+export default BotonGrande;

package/src/componentes/CabeceraEmpujada.tsx

@@ -0,0 +1,69 @@
+import AccionesDelEncabezado, {
+    type AccionDelEncabezado,
+} from "../componentes/AccionesDelEncabezado";
+import { Text } from "../texto";
+import { crearEstilos, tipografia, usePaleta } from "../tema";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { router } from "expo-router";
+import type React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * La cabecera de una pantalla empujada encima de las pestañas: atrás, el rótulo, el título y, si
+ * hay, sus acciones a la derecha (`AccionesDelEncabezado`). La usan las fichas, las
+ * pantallas de edición y el perfil.
+ *
+ * `estado` va debajo del título —el estado de la ficha, normalmente un `Chip`— y no a su lado: con
+ * acciones a la derecha, un folio largo y su chip en el mismo renglón se peleaban el ancho.
+ */
+const CabeceraEmpujada = ({
+    eyebrow,
+    titulo,
+    acciones,
+    estado,
+}: {
+    eyebrow: string;
+    titulo: string;
+    acciones?: AccionDelEncabezado[];
+    estado?: React.ReactNode;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return (
+        <View style={[styles.hdr, { paddingTop: insets.top + 10 }]}>
+            <View style={styles.hdrRow}>
+                <TouchableOpacity onPress={() => router.back()} accessibilityLabel="Atrás">
+                    <MaterialIcons name="arrow-back" size={45} color={c.primary} />
+                </TouchableOpacity>
+                {/* `flexShrink` y no `flex`: con acciones, el título les deja su hueco. */}
+                <View style={acciones?.length ? styles.tituloConAcciones : styles.titulo}>
+                    <Text style={styles.hdrEyebrow}>{eyebrow}</Text>
+                    <Text style={styles.hdrTitle}>{titulo}</Text>
+                    {estado ? <View style={styles.estado}>{estado}</View> : null}
+                </View>
+                {acciones?.length ? <AccionesDelEncabezado acciones={acciones} /> : null}
+            </View>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    hdr: { paddingHorizontal: 18, paddingBottom: 13, backgroundColor: c.superficie },
+    hdrRow: { flexDirection: "row", alignItems: "flex-end", gap: 8 },
+    titulo: { flex: 1, minWidth: 0 },
+    tituloConAcciones: { flexShrink: 1, minWidth: 0 },
+    hdrEyebrow: {
+        fontSize: tipografia.etiqueta,
+        color: c.secondaryLight,
+        textTransform: "uppercase",
+        letterSpacing: 1.6,
+        marginBottom: 4,
+        fontWeight: "600",
+    },
+    hdrTitle: { fontSize: tipografia.titulo, fontWeight: "900", color: c.primary },
+    estado: { marginTop: 6, flexDirection: "row", flexWrap: "wrap", gap: 6 },
+}));
+
+export default CabeceraEmpujada;

package/src/componentes/Chip.tsx

@@ -0,0 +1,60 @@
+import { Text } from "../texto";
+import { crearEstilos, type Paleta, renglon, tipografia, usePaleta } from "../tema";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+
+/**
+ * El tono de un chip, por lo que quiere decir y no por su color: así un estado se ve igual en
+ * claro y en oscuro, y dos pantallas no le ponen dos colores a lo mismo.
+ */
+export type TonoDeChip = "exito" | "aviso" | "info" | "error" | "morado" | "neutro" | "primario";
+
+const colores = (c: Paleta, tono: TonoDeChip) => {
+    switch (tono) {
+        case "exito":
+            return c.exito;
+        case "aviso":
+            return { fondo: c.aviso.fondo, tinta: c.aviso.tinta };
+        case "info":
+            return c.info;
+        case "error":
+            return c.error;
+        case "morado":
+            return c.morado;
+        case "primario":
+            return { fondo: c.primary, tinta: c.sobrePrimario };
+        default:
+            return { fondo: c.superficieTenue, tinta: c.secondary };
+    }
+};
+
+/** Un estado en una pastilla: «En progreso», «Por vencer», «En viaje». */
+const Chip = ({
+    texto,
+    tono = "neutro",
+    style,
+}: {
+    texto: string;
+    tono?: TonoDeChip;
+    style?: StyleProp<ViewStyle>;
+}) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const { fondo, tinta } = colores(c, tono);
+    return (
+        <View style={[styles.chip, { backgroundColor: fondo }, style]}>
+            <Text style={[styles.texto, { color: tinta }]}>{texto}</Text>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos(() => ({
+    chip: {
+        alignSelf: "flex-start",
+        paddingHorizontal: 9,
+        paddingVertical: 3,
+        borderRadius: 999,
+    },
+    texto: { ...renglon(tipografia.etiqueta), fontWeight: "700" },
+}));
+
+export default Chip;

package/src/componentes/ContenidoDePantalla.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useWindowDimensions, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { crearEstilos } from "../tema";
+
+interface Props {
+    children: React.ReactNode;
+    paddingBottom?: number;
+    /**
+     * Cuando el hijo ya maneja el teclado por su cuenta (p. ej. un `KeyboardAwareScrollView`),
+     * `false` quita el `KeyboardAvoidingView` para no encimar dos manejadores del teclado.
+     */
+    avoidKeyboard?: boolean;
+}
+
+const BASE_PADDING = 20;
+
+/**
+ * El cuerpo de una pantalla debajo de su header: el fondo, el margen a los lados (el doble en una
+ * tableta, más lo que pida la muesca) y, por omisión, que esquive el teclado.
+ */
+const ContenidoDePantalla = ({ paddingBottom, avoidKeyboard = true, children }: Props) => {
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    const { width } = useWindowDimensions();
+    const horizontalPadding = width > 700 ? BASE_PADDING * 2 : BASE_PADDING;
+    const containerStyle = [
+        styles.container,
+        {
+            paddingTop: 20,
+            paddingLeft: horizontalPadding + insets.left,
+            paddingRight: horizontalPadding + insets.right,
+            paddingBottom: paddingBottom ?? 0,
+        },
+    ];
+    if (!avoidKeyboard) {
+        return <View style={containerStyle}>{children}</View>;
+    }
+    return (
+        // `behavior="padding"` funciona en ambas plataformas con edge-to-edge
+        // gracias a react-native-keyboard-controller (RN lo ignora en Android).
+        <KeyboardAvoidingView behavior="padding" style={containerStyle}>
+            {children}
+        </KeyboardAvoidingView>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    container: { flex: 1, backgroundColor: c.fondo },
+}));
+
+export default ContenidoDePantalla;

package/src/componentes/EstadoVacio.tsx

@@ -0,0 +1,45 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { View } from "react-native";
+
+interface Props {
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    titulo: string;
+    texto?: string;
+    /** Una acción («Reintentar») que va debajo del texto, centrada con él. */
+    children?: React.ReactNode;
+}
+
+/**
+ * Lo que se pinta cuando una lista no tiene nada que enseñar. Ocupa todo el alto y centra lo suyo,
+ * así que una acción va como hijo: puesta después, como hermano, quedaba hasta abajo de la
+ * pantalla, debajo de la barra de pestañas.
+ */
+const EstadoVacio = ({ icono, titulo, texto, children }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={styles.root}>
+            <MaterialCommunityIcons name={icono} size={56} color={c.secondaryLight} />
+            <Text style={styles.titulo}>{titulo}</Text>
+            {texto ? <Text style={styles.texto}>{texto}</Text> : null}
+            {children ? <View style={styles.accion}>{children}</View> : null}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, alignItems: "center", justifyContent: "center", gap: 10, padding: 24 },
+    titulo: {
+        ...renglon(tipografia.subtitulo),
+        fontWeight: "700",
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    texto: { fontSize: tipografia.cuerpo, color: c.secondary, textAlign: "center" },
+    accion: { alignSelf: "stretch", marginTop: 14 },
+}));
+
+export default EstadoVacio;