@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/listas/piezas.tsx

@@ -0,0 +1,594 @@
+import Chip from "../componentes/Chip";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import Pestanas from "../componentes/Pestanas";
+import Tarjeta from "../componentes/Tarjeta";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { type Pestana } from "../componentes/Pestanas";
+import { Text, TextInput } from "../texto";
+import { type TonoDeChip } from "../componentes/Chip";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import type { Href } from "expo-router";
+import { router } from "expo-router";
+import React from "react";
+import {
+    ActivityIndicator,
+    Linking,
+    Pressable,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from "react-native";
+
+/**
+ * Las piezas de las listas y las fichas: la cabecera de una lista (buscador y pestañas), la
+ * tarjeta de un renglón y, en las fichas, las secciones, las ligas a otra ficha y los contactos.
+ * Todo es de lectura.
+ */
+
+/**
+ * El buscador de una lista y del mapa. Lo escrito se le pasa a la consulta con pausa
+ * (`useBusqueda`): no una petición por letra.
+ *
+ * **El texto de sugerencia va en un renglón, con «…» si no cabe.** Es un `Text` encima del campo y
+ * no el `placeholder` del `TextInput`: el de Android parte en dos renglones lo que no cabe, y el
+ * segundo queda cortado a la mitad.
+ */
+export function Buscador({
+    texto,
+    onCambiar,
+    placeholder,
+    autoFocus,
+    onBlur,
+    style,
+}: {
+    texto: string;
+    onCambiar: (texto: string) => void;
+    placeholder: string;
+    autoFocus?: boolean;
+    onBlur?: () => void;
+    style?: StyleProp<ViewStyle>;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={[styles.buscador, style]}>
+            <MaterialCommunityIcons name="magnify" size={24} color={c.secondary} />
+            <View style={styles.campo}>
+                {!texto ? (
+                    <Text
+                        style={styles.sugerencia}
+                        numberOfLines={1}
+                        ellipsizeMode="tail"
+                        pointerEvents="none"
+                    >
+                        {placeholder}
+                    </Text>
+                ) : null}
+                <TextInput
+                    value={texto}
+                    onChangeText={onCambiar}
+                    accessibilityLabel={placeholder}
+                    autoCorrect={false}
+                    autoFocus={autoFocus}
+                    onBlur={onBlur}
+                    returnKeyType="search"
+                    style={styles.entrada}
+                />
+            </View>
+            {texto ? (
+                <Pressable
+                    onPress={() => onCambiar("")}
+                    hitSlop={8}
+                    accessibilityLabel="Borrar búsqueda"
+                >
+                    <MaterialCommunityIcons name="close-circle" size={22} color={c.secondary} />
+                </Pressable>
+            ) : null}
+        </View>
+    );
+}
+
+/** Lo que dice el botón de los filtros de una lista y qué abre. */
+export interface FiltrosDeCabecera {
+    /** Cuántos filtros hay puestos: el globito. */
+    cuenta: number;
+    /** Si sólo cambió el orden: un punto. */
+    punto: boolean;
+    onPress: () => void;
+}
+
+/**
+ * El botón de los filtros, junto al buscador: dice cuántos hay puestos, como el del mapa, y lleva un
+ * punto si sólo cambió el orden.
+ */
+function BotonDeFiltros({ cuenta, punto, onPress }: FiltrosDeCabecera) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const activo = Boolean(cuenta) || punto;
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole="button"
+            accessibilityLabel={cuenta ? `Filtros, ${cuenta} puestos` : "Filtros y orden"}
+            hitSlop={4}
+            style={({ pressed }) => [
+                styles.botonDeFiltros,
+                activo && styles.botonDeFiltrosActivo,
+                pressed && styles.presionada,
+            ]}
+        >
+            <MaterialCommunityIcons
+                name="filter-variant"
+                size={26}
+                color={activo ? c.primary : c.secondaryDark}
+            />
+            {cuenta ? (
+                <View style={styles.globito}>
+                    <Text style={styles.globitoTexto} maxFontSizeMultiplier={1.2}>
+                        {cuenta}
+                    </Text>
+                </View>
+            ) : punto ? (
+                <View style={styles.punto} />
+            ) : null}
+        </Pressable>
+    );
+}
+
+/**
+ * Lo de arriba de una lista: el buscador, con el botón de sus filtros a la derecha si los tiene, y
+ * las pestañas que la cortan («En curso», «Por iniciar»). Con una sola pestaña no se pintan.
+ */
+export function CabeceraDeLista<K extends string>({
+    texto,
+    onBuscar,
+    placeholder,
+    pestanas,
+    activa,
+    onPestana,
+    filtros,
+}: {
+    texto: string;
+    onBuscar: (texto: string) => void;
+    placeholder: string;
+    pestanas?: readonly Pestana<K>[];
+    activa?: K;
+    onPestana?: (key: K) => void;
+    filtros?: FiltrosDeCabecera;
+}) {
+    const styles = useStyles();
+    return (
+        <View style={styles.cabecera}>
+            {filtros ? (
+                <View style={styles.filaDeBusqueda}>
+                    <Buscador
+                        texto={texto}
+                        onCambiar={onBuscar}
+                        placeholder={placeholder}
+                        style={styles.flex}
+                    />
+                    <BotonDeFiltros {...filtros} />
+                </View>
+            ) : (
+                <Buscador texto={texto} onCambiar={onBuscar} placeholder={placeholder} />
+            )}
+            {pestanas && pestanas.length > 1 && activa && onPestana ? (
+                <Pestanas pestanas={pestanas} activa={activa} onSelect={onPestana} />
+            ) : null}
+        </View>
+    );
+}
+
+/**
+ * Un renglón de una lista como tarjeta: el título y, a su derecha, su estado (un `Chip`); debajo,
+ * lo que acompaña, un renglón por dato. Nada se recorta: con la letra al 180% parte en los
+ * renglones que haga falta.
+ */
+export function TarjetaDeLista({
+    titulo,
+    estado,
+    lineas,
+    children,
+    onPress,
+}: {
+    titulo: string;
+    estado?: React.ReactNode;
+    /** Los renglones de abajo; los vacíos no se pintan. */
+    lineas?: (string | null | undefined | false)[];
+    children?: React.ReactNode;
+    onPress?: () => void;
+}) {
+    const styles = useStyles();
+    return (
+        <Tarjeta onPress={onPress}>
+            <View style={styles.tarjetaCabecera}>
+                <Text style={styles.tarjetaTitulo}>{titulo}</Text>
+                {estado}
+            </View>
+            {lineas
+                ?.filter((l): l is string => Boolean(l))
+                .map((l, i) => (
+                    <Text key={i} style={styles.linea}>
+                        {l}
+                    </Text>
+                ))}
+            {children}
+        </Tarjeta>
+    );
+}
+
+/** Una sección de una ficha: su rótulo y lo suyo debajo. */
+export function SeccionDeFicha({
+    titulo,
+    children,
+}: {
+    titulo: string;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    return (
+        <View style={styles.seccion}>
+            <Text style={styles.rotulo}>{titulo}</Text>
+            {children}
+        </View>
+    );
+}
+
+/**
+ * Un renglón que abre otra ficha: «Operador · Juan Pérez ›». Sin `href` (no hay a dónde, o no se
+ * tiene el permiso) se pinta igual pero sin la flecha y sin abrir nada.
+ */
+export function RenglonDeLiga({
+    etiqueta,
+    valor,
+    href,
+    detalle,
+}: {
+    etiqueta: string;
+    valor: string;
+    href?: Href | null;
+    detalle?: string | null;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={href ? () => router.push(href) : undefined}
+            disabled={!href}
+            accessibilityRole={href ? "link" : undefined}
+            style={({ pressed }) => [styles.renglon, pressed && styles.presionada]}
+        >
+            <View style={styles.renglonTexto}>
+                <Text style={styles.etiqueta}>{etiqueta}</Text>
+                {/* En el color primario cuando abre otra ficha: así se distingue de un dato. */}
+                <Text style={[styles.valor, href ? styles.liga : null]}>{valor}</Text>
+                {detalle ? <Text style={styles.linea}>{detalle}</Text> : null}
+            </View>
+            {href ? (
+                <IconoDeRenglon
+                    name="chevron-right"
+                    fontSize={tipografia.subtitulo}
+                    color={c.secondaryLight}
+                />
+            ) : null}
+        </Pressable>
+    );
+}
+
+/**
+ * Un renglón que dice cuántos hay de algo y lo abre: «Excepciones 3 ›». Como los contenidos de una
+ * transferencia en la app de acv-wms. Lo que abre es de quien lo usa (una `HojaInferior`).
+ */
+export function FilaConContador({
+    icono,
+    etiqueta,
+    cuantos,
+    detalle,
+    onPress,
+}: {
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    etiqueta: string;
+    /** `null` mientras se cuenta. */
+    cuantos: number | null;
+    /** Lo que acompaña: «2 pendientes». */
+    detalle?: string | null;
+    onPress: () => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole="button"
+            style={({ pressed }) => [styles.renglon, pressed && styles.presionada]}
+        >
+            <View style={styles.iconoDeContador}>
+                <MaterialCommunityIcons name={icono} size={20} color={c.primary} />
+            </View>
+            <View style={styles.renglonTexto}>
+                <Text style={styles.valor}>{etiqueta}</Text>
+                {detalle ? <Text style={styles.linea}>{detalle}</Text> : null}
+            </View>
+            <Text style={styles.cuantos}>{cuantos ?? "…"}</Text>
+            <IconoDeRenglon
+                name="chevron-right"
+                fontSize={tipografia.subtitulo}
+                color={c.secondaryLight}
+            />
+        </Pressable>
+    );
+}
+
+/** Los dígitos de un teléfono, para WhatsApp: `+52 664 123 4567` → `526641234567`. */
+const digitos = (telefono: string) => telefono.replace(/\D/g, "");
+
+/**
+ * Una persona con su teléfono y su correo, **para llamarle o escribirle desde ahí**: cada uno es un
+ * botón. Sin teléfono ni correo, sólo su nombre.
+ */
+export function RenglonDeContacto({
+    nombre,
+    detalle,
+    telefono,
+    correo,
+    enHoja,
+}: {
+    nombre: string;
+    /** El puesto, el parentesco, el tipo de contacto. */
+    detalle?: string | null;
+    telefono?: string | null;
+    correo?: string | null;
+    /** En una hoja (`HojaInferior`), del color del fondo, como `RenglonDeHoja`: si no, no se distingue. */
+    enHoja?: boolean;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const boton = (
+        icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"],
+        etiqueta: string,
+        url: string,
+    ) => (
+        <Pressable
+            key={etiqueta}
+            onPress={() => Linking.openURL(url).catch(() => {})}
+            accessibilityRole="button"
+            accessibilityLabel={etiqueta}
+            hitSlop={6}
+            style={({ pressed }) => [styles.accion, pressed && styles.presionada]}
+        >
+            <MaterialCommunityIcons name={icono} size={24} color={c.primary} />
+        </Pressable>
+    );
+    return (
+        <View style={[styles.renglon, enHoja && styles.renglonEnHoja]}>
+            <View style={styles.renglonTexto}>
+                <Text style={styles.valor}>{nombre}</Text>
+                {detalle ? <Text style={styles.linea}>{detalle}</Text> : null}
+                {telefono ? <Text style={styles.linea}>{telefono}</Text> : null}
+                {correo ? <Text style={styles.linea}>{correo}</Text> : null}
+            </View>
+            <View style={styles.acciones}>
+                {telefono ? boton("phone", `Llamar a ${nombre}`, `tel:${telefono}`) : null}
+                {telefono
+                    ? boton(
+                          "whatsapp",
+                          `WhatsApp a ${nombre}`,
+                          `https://wa.me/${digitos(telefono)}`,
+                      )
+                    : null}
+                {correo ? boton("email-outline", `Correo a ${nombre}`, `mailto:${correo}`) : null}
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Un renglón de una hoja (`HojaInferior`): el título con su chip y lo que acompaña. **No es
+ * `TarjetaDeLista`**: ésa es del color de la hoja y adentro de ella no se distinguía un renglón del
+ * siguiente. Con `onPress` se toca (abre un archivo, una ficha) y lleva una flecha.
+ */
+export function RenglonDeHoja({
+    titulo,
+    estado,
+    lineas,
+    atenuado,
+    onPress,
+    children,
+}: {
+    titulo: string;
+    estado?: { texto: string; tono: TonoDeChip } | null;
+    lineas: (string | null | undefined | false)[];
+    /** Lo que ya no cuenta (una excepción revocada, una vigencia reemplazada). */
+    atenuado?: boolean;
+    onPress?: () => void;
+    /** Lo que va debajo: el botón de una administrativa. */
+    children?: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            disabled={!onPress}
+            accessibilityRole={onPress ? "button" : undefined}
+            style={({ pressed }) => [
+                styles.renglonDeHoja,
+                atenuado && styles.atenuado,
+                pressed && styles.presionada,
+            ]}
+        >
+            {estado || !onPress ? (
+                <View style={styles.tarjetaCabecera}>
+                    <Text style={styles.tarjetaTitulo}>{titulo}</Text>
+                    {estado ? <Chip texto={estado.texto} tono={estado.tono} /> : null}
+                </View>
+            ) : (
+                // Con la flecha, sin partir: el título toma lo que queda y la flecha se queda en el
+                // primer renglón aunque el título ocupe varios.
+                <View style={styles.cabeceraConFlecha}>
+                    <Text style={[styles.tarjetaTitulo, styles.flex]}>{titulo}</Text>
+                    <MaterialCommunityIcons name="chevron-right" size={24} color={c.secondary} />
+                </View>
+            )}
+            {lineas
+                .filter((l): l is string => Boolean(l))
+                .map((l, i) => (
+                    <Text key={i} style={styles.linea}>
+                        {l}
+                    </Text>
+                ))}
+            {children}
+        </Pressable>
+    );
+}
+
+/**
+ * Lo que se dice al pie de una hoja que no trae todos (las hojas piden los primeros 100): «Hay 140;
+ * aquí van los 100 más recientes.» Si están todos, nada.
+ */
+export function AvisoDeRecortados({ cuantos, traidos }: { cuantos: number; traidos: number }) {
+    const styles = useStyles();
+    if (cuantos <= traidos) return null;
+    return (
+        <Text style={styles.linea}>
+            Hay {cuantos}; aquí van los {traidos} más recientes.
+        </Text>
+    );
+}
+
+/** Lo que dice una hoja mientras carga, si falló o si no hay nada. */
+export function EstadoDeHoja({
+    cargando,
+    fallo,
+    vacio,
+}: {
+    cargando: boolean;
+    fallo: boolean;
+    vacio: string | null;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    if (cargando) return <ActivityIndicator color={c.primary} />;
+    if (fallo)
+        return <Text style={styles.linea}>No se pudo cargar. Jala la ficha para releer.</Text>;
+    return vacio ? <Text style={styles.linea}>{vacio}</Text> : null;
+}
+
+const useStyles = crearEstilos((c) => ({
+    cabecera: { gap: 10, paddingTop: 12, paddingBottom: 4 },
+    filaDeBusqueda: { flexDirection: "row", alignItems: "center", gap: 10 },
+    flex: { flex: 1 },
+    // Del alto del buscador y con su borde, para que se lean como una sola barra.
+    botonDeFiltros: {
+        width: 52,
+        height: 52,
+        borderRadius: 14,
+        borderWidth: 1.5,
+        borderColor: c.secondaryLighter,
+        backgroundColor: c.superficie,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    botonDeFiltrosActivo: { borderColor: c.primary },
+    globito: {
+        position: "absolute",
+        top: 4,
+        right: 4,
+        minWidth: 18,
+        height: 18,
+        borderRadius: 9,
+        paddingHorizontal: 4,
+        backgroundColor: c.primary,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    globitoTexto: { color: c.sobrePrimario, fontSize: 12, fontWeight: "800" },
+    punto: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: c.primary,
+    },
+    buscador: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 1.5,
+        borderColor: c.secondaryLighter,
+        paddingHorizontal: 12,
+        minHeight: 52,
+    },
+    campo: { flex: 1, justifyContent: "center" },
+    entrada: { fontSize: tipografia.cuerpo, paddingVertical: 10, paddingHorizontal: 0 },
+    // Encima del campo, donde iría el `placeholder`: mismo tamaño, sin partirse.
+    sugerencia: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        fontSize: tipografia.cuerpo,
+        color: c.secondaryLight,
+    },
+    presionada: { opacity: 0.7 },
+    renglonDeHoja: { backgroundColor: c.fondo, borderRadius: 14, padding: 14, gap: 4 },
+    cabeceraConFlecha: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
+    atenuado: { opacity: 0.55 },
+    tarjetaCabecera: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        gap: 8,
+    },
+    tarjetaTitulo: { flexShrink: 1, ...renglon(tipografia.subtitulo), fontWeight: "800" },
+    linea: { ...renglon(tipografia.secundario), color: c.secondary },
+    seccion: { gap: 8 },
+    rotulo: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    renglon: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        padding: 14,
+    },
+    renglonTexto: { flex: 1, gap: 2 },
+    renglonEnHoja: { backgroundColor: c.fondo },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    valor: { ...renglon(tipografia.subtitulo), fontWeight: "800" },
+    liga: { color: c.primary },
+    iconoDeContador: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: c.primaryWash,
+    },
+    cuantos: { ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.secondary },
+    acciones: { flexDirection: "row", gap: 6 },
+    accion: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: c.primaryWash,
+    },
+}));