@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/componentes/Rotulo.tsx

@@ -0,0 +1,21 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia } from "../tema";
+
+/** El rótulo de una sección de un formulario, en mayúsculas: «Referencias», «Sello». */
+const Rotulo = ({ children }: { children: string }) => {
+    const styles = useStyles();
+    return <Text style={styles.rotulo}>{children}</Text>;
+};
+
+const useStyles = crearEstilos((c) => ({
+    rotulo: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: 8,
+    },
+}));
+
+export default Rotulo;

package/src/componentes/RotuloDeSeccion.tsx

@@ -0,0 +1,71 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import { Pressable, useWindowDimensions, View } from "react-native";
+
+interface Props {
+    children: string;
+    /** El número de la sección, en un círculo rojo (gris si es cero). Sin él, sólo el rótulo. */
+    cuantas?: number;
+    /**
+     * La puerta a lo que la sección resume, a la derecha: «Editar ›», «Ver todos ›». Va en el rótulo
+     * y no como botón aparte para que no le robe un renglón a la lista.
+     */
+    accion?: { texto: string; onPress: () => void };
+}
+
+/**
+ * El rótulo de una sección de lista —«EN CURSO», «PENDIENTES 3»—, el `SectionLabel` de las
+ * revisiones de wms con la letra grande de las apps.
+ */
+const RotuloDeSeccion = ({ children, cuantas, accion }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    // El círculo crece con la letra del sistema, igual que el número que lleva adentro.
+    const { fontScale } = useWindowDimensions();
+    const alto = renglon(tipografia.etiqueta).lineHeight * fontScale;
+
+    return (
+        <View style={styles.root}>
+            <Text style={styles.texto}>{children}</Text>
+            {cuantas != null ? (
+                <View
+                    style={[
+                        styles.cuenta,
+                        { minWidth: alto, height: alto, borderRadius: alto / 2 },
+                        { backgroundColor: cuantas > 0 ? c.primary : c.secondaryLight },
+                    ]}
+                >
+                    <Text style={styles.cuentaTexto}>{cuantas}</Text>
+                </View>
+            ) : null}
+            {accion ? (
+                <Pressable
+                    onPress={accion.onPress}
+                    accessibilityRole="button"
+                    hitSlop={8}
+                    style={styles.accion}
+                >
+                    <Text style={styles.accionTexto}>{accion.texto} ›</Text>
+                </Pressable>
+            ) : null}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    root: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+    texto: {
+        ...renglon(tipografia.etiqueta),
+        color: c.texto,
+        textTransform: "uppercase",
+        letterSpacing: 1.4,
+        fontWeight: "800",
+    },
+    cuenta: { paddingHorizontal: 6, alignItems: "center", justifyContent: "center" },
+    cuentaTexto: { ...renglon(tipografia.etiqueta), color: c.sobrePrimario, fontWeight: "800" },
+    // `marginLeft: auto` la manda a la orilla derecha sin un separador que mida nada.
+    accion: { marginLeft: "auto" },
+    accionTexto: { ...renglon(tipografia.etiqueta), color: c.primary, fontWeight: "800" },
+}));
+
+export default RotuloDeSeccion;

package/src/componentes/Tarjeta.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { crearEstilos } from "../tema";
+
+/**
+ * Si lo de adentro está en una hoja que sube desde abajo (`HojaInferior`, `HojaDeLista`). La hoja
+ * es de la superficie, igual que una tarjeta: ahí la tarjeta va del color del fondo, o no se
+ * distinguiría un renglón del siguiente. Lo ponen las hojas; las pantallas no lo tocan.
+ */
+export const EnHoja = React.createContext(false);
+
+/**
+ * La tarjeta de la casa, sola: la superficie, sus esquinas y su aire, con lo que se le ponga
+ * adentro. Es de lo que están hechas `TarjetaDeLista` y las fichas; una pantalla la usa para lo que
+ * no es un renglón de lista —un bloque de fotos, el resumen de un cobro, un grupo de campos—.
+ *
+ * **Sin sombra**: en oscuro casi no se ve, así que lo que separa la tarjeta del fondo es el color
+ * de la superficie y, en oscuro, un borde. Con `onPress` se toca y se atenúa al presionarla.
+ *
+ * Dentro de una hoja (`EnHoja`) va del color del fondo, así las listas de una pantalla se pueden
+ * enseñar también en una hoja sin otra versión de su renglón.
+ */
+export default function Tarjeta({
+    children,
+    onPress,
+    style,
+}: {
+    children: React.ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+}) {
+    const styles = useStyles();
+    const enHoja = React.useContext(EnHoja);
+    const base = [styles.tarjeta, enHoja && styles.enHoja];
+    if (!onPress) return <View style={[base, style]}>{children}</View>;
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole="button"
+            style={({ pressed }) => [base, style, pressed && styles.presionada]}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    tarjeta: {
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        padding: 14,
+        gap: 4,
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+    enHoja: { backgroundColor: c.fondo },
+    presionada: { opacity: 0.7 },
+}));

package/src/componentes/TarjetaDeDatos.tsx

@@ -0,0 +1,62 @@
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { useWindowDimensions, View } from "react-native";
+
+/** Desde qué ancho los datos van a dos columnas: una tableta. */
+const ANCHO_A_DOS_COLUMNAS = 700;
+
+/**
+ * Datos de solo lectura, cada uno con su rótulo arriba: la ficha de una estancia de caseta, la de
+ * un viaje o un tracto en la oficina.
+ *
+ * **En una pantalla ancha van a dos columnas**; en un teléfono, uno debajo del otro. Los vacíos no
+ * se pintan. `atenuada` es la de algo que ya no cuenta (un movimiento anulado).
+ */
+const TarjetaDeDatos = ({
+    datos,
+    atenuada,
+}: {
+    datos: [string, string | null | undefined][];
+    atenuada?: boolean;
+}) => {
+    const styles = useStyles();
+    const { width } = useWindowDimensions();
+    const dosColumnas = width >= ANCHO_A_DOS_COLUMNAS;
+    return (
+        <View
+            style={[
+                styles.tarjeta,
+                dosColumnas && styles.tarjetaAncha,
+                atenuada && styles.atenuada,
+            ]}
+        >
+            {datos
+                .filter(([, valor]) => valor)
+                .map(([etiqueta, valor]) => (
+                    <View key={etiqueta} style={[styles.dato, dosColumnas && styles.datoEnColumna]}>
+                        <Text style={styles.etiquetaDeDato}>{etiqueta}</Text>
+                        <Text style={styles.valor}>{valor}</Text>
+                    </View>
+                ))}
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    tarjeta: { backgroundColor: c.superficie, borderRadius: 14, padding: 14, gap: 10 },
+    tarjetaAncha: { flexDirection: "row", flexWrap: "wrap", columnGap: 24, rowGap: 12 },
+    atenuada: { opacity: 0.55 },
+    dato: { gap: 2 },
+    // Dos por renglón: la mitad del ancho menos la mitad del espacio entre columnas.
+    datoEnColumna: { width: "48%", flexGrow: 1 },
+    etiquetaDeDato: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    valor: { ...renglon(tipografia.subtitulo), fontWeight: "800", color: c.texto },
+}));
+
+export default TarjetaDeDatos;

package/src/componentes/TiraDeFotos.tsx

@@ -0,0 +1,189 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { crearEstilos, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import Foto, { type FotoAVer } from "./Foto";
+import VisorDeFoto from "./VisorDeFoto";
+
+/** Una miniatura de la tira: qué se pinta, qué abre el visor y qué se puede hacer con ella. */
+export interface FotoDeLaTira {
+    llave: string;
+    /** Un archivo que no es foto (un PDF) se ve con su icono y no entra al visor. */
+    esFoto: boolean;
+    miniatura: FotoAVer;
+    /** La foto completa, si la miniatura es una previa chica del servidor. Por omisión, ésa. */
+    completa?: FotoAVer;
+    /** El nombre del archivo: se ve en un documento que no es foto. */
+    nombre?: string;
+    /** Una nube en la esquina: verde si ya está en el servidor, ámbar si sigue en el teléfono. */
+    marca?: "enviada" | "sinSubir";
+    /** Con esto lleva su «×» para quitarla. */
+    onQuitar?: () => void;
+    /** Con esto, el visor lleva «descargar» en ella. Rechaza si no se pudo. */
+    onDescargar?: () => Promise<void>;
+    /** Lo que dice el lector de pantalla, si no basta con «Ver la foto». */
+    etiqueta?: string;
+}
+
+interface Props {
+    fotos: FotoDeLaTira[];
+    /** El lado de cada miniatura. */
+    lado: number;
+    /** En cuadrícula (una hoja, donde hay lugar) o en un renglón que se desliza a los lados. */
+    cuadricula?: boolean;
+}
+
+/**
+ * Unas fotos en miniatura; tocar una abre el visor en ésa y se desliza entre las demás, **en el
+ * mismo orden** que las miniaturas. Quien la usa arma las piezas con lo suyo (lo del servidor
+ * primero y lo del teléfono después, por ejemplo) y les pone su marca y sus acciones.
+ */
+const TiraDeFotos = ({ fotos: piezas, lado, cuadricula = false }: Props) => {
+    const styles = useStyles();
+    const [viendo, setViendo] = React.useState<number | null>(null);
+    if (piezas.length === 0) return null;
+
+    const fotos = piezas.filter((p) => p.esFoto);
+    const carrusel = fotos.map((p) => p.completa ?? p.miniatura);
+    const descargables = fotos.some((p) => p.onDescargar);
+    const tamano = { width: lado, height: lado };
+
+    const miniaturas = piezas.map((p) => (
+        <View key={p.llave}>
+            <Pressable
+                disabled={!p.esFoto}
+                onPress={() => setViendo(fotos.indexOf(p))}
+                accessibilityRole={p.esFoto ? "imagebutton" : undefined}
+                accessibilityLabel={
+                    p.etiqueta ?? (p.esFoto ? "Ver la foto" : `Archivo ${p.nombre ?? ""}`.trim())
+                }
+            >
+                {p.esFoto ? (
+                    <Foto
+                        foto={p.miniatura}
+                        style={[styles.miniatura, tamano]}
+                        resizeMethod="resize"
+                    />
+                ) : (
+                    <Documento lado={lado} nombre={p.nombre} />
+                )}
+                {p.marca === "enviada" ? (
+                    <View style={[styles.marca, styles.marcaEnviada]}>
+                        <MaterialCommunityIcons name="cloud-check" size={16} color="#fff" />
+                    </View>
+                ) : null}
+                {p.marca === "sinSubir" ? (
+                    <View style={[styles.marca, styles.marcaSinSubir]}>
+                        <MaterialCommunityIcons name="cloud-clock-outline" size={16} color="#fff" />
+                    </View>
+                ) : null}
+            </Pressable>
+            {p.onQuitar ? (
+                <Pressable
+                    onPress={p.onQuitar}
+                    hitSlop={10}
+                    accessibilityRole="button"
+                    accessibilityLabel={p.esFoto ? "Quitar esta foto" : "Quitar este archivo"}
+                    style={styles.quitar}
+                >
+                    <MaterialCommunityIcons name="close" size={24} color="#fff" />
+                </Pressable>
+            ) : null}
+        </View>
+    ));
+
+    return (
+        <>
+            {cuadricula ? (
+                <View style={styles.cuadricula}>{miniaturas}</View>
+            ) : (
+                // Un solo renglón que se desliza: con varias fotos no se parte en filas.
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={styles.renglon}
+                >
+                    {miniaturas}
+                </ScrollView>
+            )}
+            <VisorDeFoto
+                fotos={carrusel}
+                inicio={viendo}
+                onCerrar={() => setViendo(null)}
+                onDescargar={
+                    descargables
+                        ? async (i) => {
+                              const descargar = fotos[i]?.onDescargar;
+                              if (!descargar) throw new Error("Esta foto no se puede descargar.");
+                              await descargar();
+                          }
+                        : undefined
+                }
+            />
+        </>
+    );
+};
+
+/** La miniatura de un archivo que no es foto (un PDF): un icono y, si cabe, su nombre. */
+function Documento({ lado, nombre }: { lado: number; nombre?: string }) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const conNombre = Boolean(nombre) && lado >= 100;
+    return (
+        <View style={[styles.miniatura, styles.documento, { width: lado, height: lado }]}>
+            <MaterialCommunityIcons
+                name="file-document-outline"
+                size={Math.round(lado * 0.3)}
+                color={c.secondary}
+            />
+            {conNombre ? (
+                // Dentro de un cuadro fijo: el nombre largo de un PDF tiene que cortarse.
+                <Text numberOfLines={2} style={styles.documentoNombre}>
+                    {nombre}
+                </Text>
+            ) : null}
+        </View>
+    );
+}
+
+// Las marcas y la «×» van encima de la foto: sus colores son fijos para leerse sobre cualquier foto.
+const useStyles = crearEstilos((c) => ({
+    renglon: { gap: 8 },
+    cuadricula: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+    miniatura: { borderRadius: 10, backgroundColor: c.secondaryLighter },
+    documento: { alignItems: "center", justifyContent: "center", padding: 6, gap: 2 },
+    documentoNombre: {
+        fontSize: tipografia.etiqueta,
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    marca: {
+        position: "absolute",
+        bottom: 4,
+        right: 4,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    marcaEnviada: { backgroundColor: "#2e7d32" },
+    // La nube ámbar sobre una foto que sigue en el teléfono sin subir.
+    marcaSinSubir: { backgroundColor: "#b26a00" },
+    quitar: {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: c.primaryDark,
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 2,
+        borderColor: "#fff",
+    },
+}));
+
+export default TiraDeFotos;

package/src/componentes/VisorDeFoto.tsx

@@ -0,0 +1,181 @@
+import { renglon, tipografia } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    Modal,
+    Pressable,
+    StyleSheet,
+    useWindowDimensions,
+    View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Foto, { type FotoAVer } from "./Foto";
+
+export type { FotoAVer };
+
+interface Props {
+    /** Las fotos, en el orden de sus miniaturas. Los archivos que no son foto no entran. */
+    fotos: FotoAVer[];
+    /** La que se tocó; `null` cierra el visor. */
+    inicio: number | null;
+    onCerrar: () => void;
+    /**
+     * Con esto, la barra lleva «descargar» para la foto que se ve.
+     * Recibe su lugar en `fotos`; rechaza si no se pudo.
+     */
+    onDescargar?: (indice: number) => Promise<void>;
+}
+
+/** Cómo va la descarga de la foto que se ve: el icono de la barra lo dice. */
+type Descarga = "nada" | "bajando" | "lista" | "fallo";
+const ICONO_DE_DESCARGA = {
+    nada: "download",
+    lista: "check",
+    fallo: "alert-circle-outline",
+} as const;
+
+const llave = (foto: FotoAVer, i: number) => ("ruta" in foto ? foto.ruta : foto.uri) + i;
+
+/**
+ * Unas fotos a pantalla completa, sobre fondo negro: se abre en la que se tocó y se pasa a la
+ * siguiente o la anterior deslizando a los lados, con «2 de 4» arriba. Mezcla las subidas y las del
+ * teléfono. Se cierra con la X o con atrás. Lo abre `TiraDeFotos`.
+ */
+const VisorDeFoto = ({ fotos, inicio, onCerrar, onDescargar }: Props) => (
+    <Modal
+        visible={inicio !== null}
+        transparent
+        animationType="fade"
+        statusBarTranslucent
+        onRequestClose={onCerrar}
+    >
+        {/* Con `key`, cada apertura nace en la foto que se tocó. */}
+        {inicio !== null ? (
+            <Carrusel
+                key={inicio}
+                fotos={fotos}
+                inicio={inicio}
+                onCerrar={onCerrar}
+                onDescargar={onDescargar}
+            />
+        ) : null}
+    </Modal>
+);
+
+function Carrusel({
+    fotos,
+    inicio,
+    onCerrar,
+    onDescargar,
+}: {
+    fotos: FotoAVer[];
+    inicio: number;
+    onCerrar: () => void;
+    onDescargar?: (indice: number) => Promise<void>;
+}) {
+    const insets = useSafeAreaInsets();
+    const { width, height } = useWindowDimensions();
+    const primera = Math.min(inicio, Math.max(0, fotos.length - 1));
+    const [actual, setActual] = React.useState(primera);
+    const [descarga, setDescarga] = React.useState<Descarga>("nada");
+
+    // Lo que dice el icono es de la foto en la que estaba: al pasar a otra, vuelve a «descargar».
+    const pasarA = (indice: number) => {
+        if (indice !== actual) setDescarga("nada");
+        setActual(indice);
+    };
+
+    const descargar = async () => {
+        if (!onDescargar || descarga === "bajando") return;
+        setDescarga("bajando");
+        try {
+            await onDescargar(actual);
+            setDescarga("lista");
+        } catch {
+            setDescarga("fallo");
+        }
+    };
+
+    return (
+        <View style={styles.fondo}>
+            <FlatList
+                data={fotos}
+                keyExtractor={llave}
+                horizontal
+                pagingEnabled
+                showsHorizontalScrollIndicator={false}
+                initialScrollIndex={primera}
+                getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}
+                onMomentumScrollEnd={(e) =>
+                    pasarA(Math.round(e.nativeEvent.contentOffset.x / width))
+                }
+                renderItem={({ item }) => (
+                    <View style={{ width, height }}>
+                        <Foto foto={item} style={styles.foto} resizeMode="contain" />
+                    </View>
+                )}
+            />
+
+            <View style={[styles.barra, { top: insets.top + 12 }]}>
+                {fotos.length > 1 ? (
+                    <Text style={styles.cuenta}>
+                        {actual + 1} de {fotos.length}
+                    </Text>
+                ) : (
+                    <View />
+                )}
+                <View style={styles.botones}>
+                    {onDescargar ? (
+                        <Pressable
+                            onPress={descargar}
+                            hitSlop={12}
+                            accessibilityRole="button"
+                            accessibilityLabel={
+                                descarga === "lista"
+                                    ? "Guardada en la galería"
+                                    : descarga === "fallo"
+                                      ? "No se pudo guardar; intentar de nuevo"
+                                      : "Guardar en la galería"
+                            }
+                            accessibilityState={{ busy: descarga === "bajando" }}
+                        >
+                            {descarga === "bajando" ? (
+                                <ActivityIndicator size={32} color="#fff" />
+                            ) : (
+                                <MaterialCommunityIcons
+                                    name={ICONO_DE_DESCARGA[descarga]}
+                                    size={32}
+                                    color="#fff"
+                                />
+                            )}
+                        </Pressable>
+                    ) : null}
+                    <Pressable onPress={onCerrar} hitSlop={12} accessibilityLabel="Cerrar">
+                        <MaterialCommunityIcons name="close" size={32} color="#fff" />
+                    </Pressable>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// Sobre la foto: negro con texto blanco, en claro y en oscuro.
+const styles = StyleSheet.create({
+    fondo: { flex: 1, backgroundColor: "rgba(0,0,0,0.95)" },
+    foto: { width: "100%", height: "100%" },
+    barra: {
+        position: "absolute",
+        left: 16,
+        right: 16,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    botones: { flexDirection: "row", alignItems: "center", gap: 28 },
+    cuenta: { ...renglon(tipografia.cuerpo), color: "#fff", fontWeight: "800" },
+});
+
+export default VisorDeFoto;