@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/formularios/campos.tsx

@@ -0,0 +1,497 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import dayjs from "dayjs";
+import React from "react";
+import { Pressable, Switch, View, type KeyboardTypeOptions } from "react-native";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import OpcionesExcluyentes from "../componentes/OpcionesExcluyentes";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text, TextInput } from "../texto";
+
+/**
+ * Los campos de un formulario (un viaje, un tracto, un operador). Cada uno trae su rótulo arriba y
+ * su error abajo, para que la pantalla sólo los apile. Son controlados: atados a react-hook-form,
+ * van por `controlados.tsx`.
+ */
+
+/** El error de un campo, en rojo y debajo de él. */
+export function ErrorDelCampo({ error }: { error?: string }) {
+    const styles = useStyles();
+    return error ? <Text style={styles.error}>{error}</Text> : null;
+}
+
+/**
+ * El marco de un campo: el rótulo arriba, lo que se captura en medio, y debajo la ayuda y el error.
+ * Lo usan todos los campos de aquí, y una app lo usa para lo que no es un campo de la casa —una
+ * tira de fotos, el renglón de un escáner— sin que se vea distinto de los demás.
+ *
+ * Sin `etiqueta` no pinta rótulo: el interruptor lleva el suyo adentro.
+ */
+export function Campo({
+    etiqueta,
+    ayuda,
+    error,
+    children,
+}: {
+    etiqueta?: string;
+    ayuda?: string;
+    error?: string;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    return (
+        <View style={styles.campo}>
+            {etiqueta ? <Text style={styles.etiqueta}>{etiqueta}</Text> : null}
+            {children}
+            {ayuda ? <Text style={styles.ayuda}>{ayuda}</Text> : null}
+            <ErrorDelCampo error={error} />
+        </View>
+    );
+}
+
+/**
+ * Un texto libre: una referencia (tope de 100), unas instrucciones (varios renglones), un VIN (en
+ * mayúsculas) o un año (`teclado="number-pad"`).
+ */
+export function CampoDeTexto({
+    etiqueta,
+    valor,
+    onCambiar,
+    error,
+    multilinea,
+    maximo,
+    placeholder,
+    ayuda,
+    disabled,
+    teclado,
+    mayusculas,
+}: {
+    etiqueta: string;
+    valor: string;
+    onCambiar: (valor: string) => void;
+    error?: string;
+    multilinea?: boolean;
+    maximo?: number;
+    placeholder?: string;
+    ayuda?: string;
+    disabled?: boolean;
+    teclado?: KeyboardTypeOptions;
+    /** Cómo pone mayúsculas el teclado; un VIN o una placa, `characters`. */
+    mayusculas?: "none" | "sentences" | "words" | "characters";
+}) {
+    const styles = useStyles();
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <TextInput
+                value={valor}
+                onChangeText={onCambiar}
+                keyboardType={teclado}
+                autoCapitalize={mayusculas}
+                autoCorrect={mayusculas === "characters" ? false : undefined}
+                multiline={multilinea}
+                maxLength={maximo}
+                placeholder={placeholder}
+                editable={!disabled}
+                style={[
+                    styles.entrada,
+                    multilinea && styles.multilinea,
+                    !!error && styles.entradaError,
+                    disabled && styles.inactivo,
+                ]}
+            />
+        </Campo>
+    );
+}
+
+/**
+ * Una fecha con su hora: dos botones, el día y la hora, cada uno con el selector del sistema. **La
+ * hora es el dato** (contra ella se mide si un viaje va tarde o un equipo está comprometido), así
+ * que nunca se manda sólo el día.
+ *
+ * Vacío, un solo botón «Elegir»: abre el día y, al elegirlo, la hora. Si es `opcional`, «Quitar»
+ * lo deja vacío otra vez.
+ */
+export function CampoDeFechaHora({
+    etiqueta,
+    valor,
+    onCambiar,
+    error,
+    opcional,
+    ayuda,
+    desde,
+    hasta,
+}: {
+    etiqueta: string;
+    valor: Date | null;
+    onCambiar: (valor: Date | null) => void;
+    error?: string;
+    opcional?: boolean;
+    ayuda?: string;
+    /** El primer y el último momento que el selector deja elegir, como en `CampoDeFecha`. */
+    desde?: Date;
+    hasta?: Date;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const [eligiendo, setEligiendo] = React.useState<"date" | "time" | null>(null);
+    // Vacío, el selector arranca en la próxima hora en punto: la hora de ahora no le sirve a nadie.
+    const base = valor ?? dayjs().add(1, "hour").startOf("hour").toDate();
+
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            {valor ? (
+                <View style={styles.fechaHora}>
+                    <Pressable
+                        onPress={() => setEligiendo("date")}
+                        accessibilityRole="button"
+                        style={[styles.entrada, styles.mitad, !!error && styles.entradaError]}
+                    >
+                        <Text style={styles.textoFecha}>{dayjs(valor).format("D MMM YYYY")}</Text>
+                    </Pressable>
+                    <Pressable
+                        onPress={() => setEligiendo("time")}
+                        accessibilityRole="button"
+                        style={[styles.entrada, styles.mitad, !!error && styles.entradaError]}
+                    >
+                        <Text style={styles.textoFecha}>{dayjs(valor).format("HH:mm")}</Text>
+                    </Pressable>
+                </View>
+            ) : (
+                <Pressable
+                    onPress={() => setEligiendo("date")}
+                    accessibilityRole="button"
+                    style={[styles.entrada, !!error && styles.entradaError]}
+                >
+                    <View style={styles.renglon}>
+                        <IconoDeRenglon
+                            name="calendar-clock"
+                            fontSize={tipografia.subtitulo}
+                            color={c.secondaryLight}
+                        />
+                        <Text style={[styles.textoFecha, styles.sinValor]}>Elegir…</Text>
+                    </View>
+                </Pressable>
+            )}
+            {opcional && valor ? (
+                <Pressable
+                    onPress={() => onCambiar(null)}
+                    accessibilityRole="button"
+                    style={styles.quitar}
+                >
+                    <IconoDeRenglon
+                        name="close-circle-outline"
+                        fontSize={tipografia.cuerpo}
+                        color={c.secondary}
+                    />
+                    <Text style={styles.quitarTexto}>Quitar</Text>
+                </Pressable>
+            ) : null}
+            {eligiendo ? (
+                <DateTimePicker
+                    value={base}
+                    mode={eligiendo}
+                    is24Hour
+                    minimumDate={desde}
+                    maximumDate={hasta}
+                    onChange={(evento, elegida) => {
+                        const paso = eligiendo;
+                        setEligiendo(null);
+                        if (evento.type !== "set" || !elegida) return;
+                        const nueva =
+                            paso === "date"
+                                ? dayjs(base)
+                                      .year(elegida.getFullYear())
+                                      .month(elegida.getMonth())
+                                      .date(elegida.getDate())
+                                : dayjs(base)
+                                      .hour(elegida.getHours())
+                                      .minute(elegida.getMinutes())
+                                      .second(0)
+                                      .millisecond(0);
+                        onCambiar(nueva.toDate());
+                        // Vacío, tras el día va la hora: sin ella el campo no está completo.
+                        if (paso === "date" && !valor) setEligiendo("time");
+                    }}
+                />
+            ) : null}
+        </Campo>
+    );
+}
+
+/** Un interruptor con su texto y, si hace falta, por qué está como está. */
+export function CampoInterruptor({
+    texto,
+    valor,
+    onCambiar,
+    ayuda,
+    error,
+    disabled,
+}: {
+    texto: string;
+    valor: boolean;
+    onCambiar: (valor: boolean) => void;
+    ayuda?: string;
+    error?: string;
+    disabled?: boolean;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Campo ayuda={ayuda} error={error}>
+            <Pressable
+                onPress={() => onCambiar(!valor)}
+                disabled={disabled}
+                accessibilityRole="switch"
+                accessibilityState={{ checked: valor, disabled: !!disabled }}
+                style={[styles.interruptor, disabled && styles.inactivo]}
+            >
+                <Text style={styles.interruptorTexto}>{texto}</Text>
+                <Switch
+                    value={valor}
+                    onValueChange={onCambiar}
+                    disabled={disabled}
+                    trackColor={{ true: c.primaryLight }}
+                    thumbColor={valor ? c.primary : undefined}
+                />
+            </Pressable>
+        </Campo>
+    );
+}
+
+/**
+ * Una fecha sin hora (un nacimiento, el fin de una renta): un botón con el selector del sistema.
+ * El valor es el de la API, `YYYY-MM-DD`, para no pasar por una zona horaria que lo corra un día.
+ */
+export function CampoDeFecha({
+    etiqueta,
+    valor,
+    onCambiar,
+    error,
+    opcional,
+    ayuda,
+    desde,
+    hasta,
+}: {
+    etiqueta: string;
+    valor: string | null;
+    onCambiar: (valor: string | null) => void;
+    error?: string;
+    opcional?: boolean;
+    ayuda?: string;
+    /** Los días que el selector deja elegir: una recepción no puede ser de mañana (`hasta`). */
+    desde?: Date;
+    hasta?: Date;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const [eligiendo, setEligiendo] = React.useState(false);
+    const fecha = valor ? dayjs(valor) : null;
+
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <Pressable
+                onPress={() => setEligiendo(true)}
+                accessibilityRole="button"
+                style={[styles.entrada, !!error && styles.entradaError]}
+            >
+                <View style={styles.renglon}>
+                    <IconoDeRenglon
+                        name="calendar"
+                        fontSize={tipografia.subtitulo}
+                        color={fecha ? c.secondary : c.secondaryLight}
+                    />
+                    <Text style={[styles.textoFecha, !fecha && styles.sinValor]}>
+                        {fecha ? fecha.format("D MMM YYYY") : "Elegir…"}
+                    </Text>
+                </View>
+            </Pressable>
+            {opcional && valor ? (
+                <Pressable
+                    onPress={() => onCambiar(null)}
+                    accessibilityRole="button"
+                    style={styles.quitar}
+                >
+                    <IconoDeRenglon
+                        name="close-circle-outline"
+                        fontSize={tipografia.cuerpo}
+                        color={c.secondary}
+                    />
+                    <Text style={styles.quitarTexto}>Quitar</Text>
+                </Pressable>
+            ) : null}
+            {eligiendo ? (
+                <DateTimePicker
+                    value={fecha?.toDate() ?? new Date()}
+                    mode="date"
+                    minimumDate={desde}
+                    maximumDate={hasta}
+                    onChange={(evento, elegida) => {
+                        setEligiendo(false);
+                        if (evento.type === "set" && elegida) {
+                            onCambiar(dayjs(elegida).format("YYYY-MM-DD"));
+                        }
+                    }}
+                />
+            ) : null}
+        </Campo>
+    );
+}
+
+/**
+ * Una de pocas opciones fijas (la cabina, la propiedad, la longitud): todas a la vista, una por
+ * renglón, en vez de un menú que con la letra al 180% deja ver dos.
+ */
+export function CampoDeOpciones<V extends string>({
+    etiqueta,
+    opciones,
+    valor,
+    onElegir,
+    error,
+    ayuda,
+}: {
+    etiqueta: string;
+    opciones: readonly { value: V; label: string }[];
+    valor: V | null;
+    onElegir: (valor: V) => void;
+    error?: string;
+    ayuda?: string;
+}) {
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <OpcionesExcluyentes
+                opciones={opciones.map((o) => ({ valor: o.value, texto: o.label }))}
+                valor={valor}
+                onElegir={onElegir}
+            />
+        </Campo>
+    );
+}
+
+/** Los países de un teléfono: lo que la operación marca, de un lado y del otro. */
+const LADAS = [
+    { pais: "MX", lada: "+52", texto: "MX +52" },
+    { pais: "US", lada: "+1", texto: "US +1" },
+] as const;
+
+/** Un teléfono guardado (`+526641234567`) partido en su lada y sus dígitos. */
+const partirTelefono = (telefono: string | null) => {
+    const limpio = (telefono ?? "").replace(/[^\d+]/g, "");
+    const lada = LADAS.find((l) => limpio.startsWith(l.lada)) ?? LADAS[0];
+    return {
+        lada: lada.lada,
+        digitos: limpio.startsWith(lada.lada) ? limpio.slice(lada.lada.length) : limpio,
+    };
+};
+
+/**
+ * Un teléfono, como el `ControlledPhoneNumber` del portal: la lada (México o Estados Unidos) y los
+ * diez dígitos. El valor es el del servidor (`PhoneNumberField`), en E.164: `+526641234567`; vacío
+ * es `null`.
+ */
+export function CampoDeTelefono({
+    etiqueta,
+    valor,
+    onCambiar,
+    error,
+    ayuda,
+}: {
+    etiqueta: string;
+    valor: string | null;
+    onCambiar: (valor: string | null) => void;
+    error?: string;
+    ayuda?: string;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const { lada, digitos } = partirTelefono(valor);
+    const armar = (nuevaLada: string, nuevosDigitos: string) => {
+        const solo = nuevosDigitos.replace(/\D/g, "");
+        onCambiar(solo ? `${nuevaLada}${solo}` : null);
+    };
+    return (
+        <Campo etiqueta={etiqueta} ayuda={ayuda} error={error}>
+            <View style={styles.telefono}>
+                {LADAS.map((l) => (
+                    <Pressable
+                        key={l.pais}
+                        onPress={() => armar(l.lada, digitos)}
+                        accessibilityRole="radio"
+                        accessibilityState={{ selected: lada === l.lada }}
+                        style={[styles.lada, lada === l.lada && styles.ladaElegida]}
+                    >
+                        <Text style={[styles.ladaTexto, lada === l.lada && { color: c.primary }]}>
+                            {l.texto}
+                        </Text>
+                    </Pressable>
+                ))}
+            </View>
+            <TextInput
+                value={digitos}
+                onChangeText={(texto) => armar(lada, texto)}
+                keyboardType="phone-pad"
+                maxLength={10}
+                placeholder="10 dígitos"
+                style={[styles.entrada, !!error && styles.entradaError]}
+            />
+        </Campo>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    campo: { gap: 6 },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+    },
+    entrada: {
+        borderWidth: 1.5,
+        borderColor: c.secondaryLight,
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        backgroundColor: c.superficie,
+        fontSize: tipografia.subtitulo,
+        color: c.texto,
+    },
+    multilinea: { minHeight: 100, textAlignVertical: "top", fontSize: tipografia.cuerpo },
+    entradaError: { borderColor: c.primary },
+    inactivo: { opacity: 0.5 },
+    fechaHora: { flexDirection: "row", gap: 12 },
+    mitad: { flex: 1, justifyContent: "center" },
+    renglon: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
+    textoFecha: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.texto },
+    sinValor: { color: c.secondaryLight, fontWeight: "600" },
+    quitar: { flexDirection: "row", alignItems: "flex-start", gap: 6, alignSelf: "flex-start" },
+    quitarTexto: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.secondary },
+    ayuda: { ...renglon(tipografia.secundario), color: c.secondary },
+    error: { ...renglon(tipografia.secundario), color: c.primary },
+    telefono: { flexDirection: "row", gap: 10 },
+    lada: {
+        flex: 1,
+        alignItems: "center",
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        borderRadius: 12,
+        paddingVertical: 10,
+        backgroundColor: c.superficie,
+    },
+    ladaElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    ladaTexto: { ...renglon(tipografia.cuerpo), fontWeight: "800", color: c.secondary },
+    interruptor: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+    },
+    interruptorTexto: {
+        flex: 1,
+        ...renglon(tipografia.cuerpo),
+        fontWeight: "700",
+        color: c.texto,
+    },
+}));

package/src/formularios/controlados.tsx

@@ -0,0 +1,200 @@
+import React from "react";
+import { Controller, type Control, type FieldValues, type Path } from "react-hook-form";
+import CampoDeSeleccion, { CampoDeVarias } from "./CampoDeSeleccion";
+import {
+    CampoDeFecha,
+    CampoDeFechaHora,
+    CampoDeOpciones,
+    CampoDeTelefono,
+    CampoDeTexto,
+    CampoInterruptor,
+} from "./campos";
+import type { Opcion } from "./SelectorDeOpcion";
+
+/**
+ * Los campos de `campos.tsx` ya atados a un formulario de react-hook-form: reciben `control` y
+ * `name` y se cuelgan su valor y su error. Así un formulario largo (un tracto, una caja, un
+ * operador) es una lista de campos y no una de `Controller`.
+ *
+ * Un campo propio de una app (un catálogo de su API, una dirección) se ata igual, con `CampoAtado`
+ * y `SinValor`.
+ */
+
+/** Lo que un campo controlado recibe para atarse al formulario. */
+export interface CampoAtado<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+}
+
+/** Las props de un campo sin lo que pone el `Controller`. */
+export type SinValor<P> = Omit<P, "valor" | "onCambiar" | "onElegir" | "error">;
+
+export function TextoControlado<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeTexto>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeTexto
+                    {...props}
+                    // Un número del formulario (un conteo, un monto) también se escribe aquí: el
+                    // TextInput sólo sabe de texto.
+                    valor={value == null ? "" : String(value)}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function InterruptorControlado<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoInterruptor>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoInterruptor
+                    {...props}
+                    valor={Boolean(value)}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function FechaControlada<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeFecha>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeFecha
+                    {...props}
+                    valor={value ?? null}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function FechaHoraControlada<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeFechaHora>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeFechaHora
+                    {...props}
+                    valor={value ?? null}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function OpcionesControladas<T extends FieldValues, V extends string>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeOpciones<V>>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeOpciones<V>
+                    {...props}
+                    valor={value ?? null}
+                    onElegir={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function SeleccionControlada<T extends FieldValues, O extends Opcion>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeSeleccion<O>>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeSeleccion<O>
+                    {...props}
+                    valor={(value as O | null) ?? null}
+                    onElegir={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function TelefonoControlado<T extends FieldValues>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeTelefono>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeTelefono
+                    {...props}
+                    valor={value ?? null}
+                    onCambiar={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}
+
+export function VariasControladas<T extends FieldValues, O extends Opcion>({
+    control,
+    name,
+    ...props
+}: CampoAtado<T> & SinValor<React.ComponentProps<typeof CampoDeVarias<O>>>) {
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field: { value, onChange }, fieldState }) => (
+                <CampoDeVarias<O>
+                    {...props}
+                    valor={(value as O[] | null) ?? []}
+                    onElegir={onChange}
+                    error={fieldState.error?.message}
+                />
+            )}
+        />
+    );
+}