@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/tema/estilos.ts

@@ -0,0 +1,51 @@
+import * as SystemUI from "expo-system-ui";
+import { useEffect } from "react";
+import { StyleSheet, useColorScheme } from "react-native";
+import { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+
+/**
+ * Si la app se ve oscura. Lee `useColorScheme` y no un contexto: `ProveedorDeTema` le impone la
+ * preferencia a toda la app nativa (`Appearance.setColorScheme`), así que contesta la elegida, o la
+ * del teléfono con «igual que el teléfono». Y así sirve también fuera de los proveedores, en la
+ * pantalla de error del layout raíz.
+ */
+export const useEsOscuro = (): boolean => useColorScheme() === "dark";
+
+/** Los colores de ahora (`paleta.ts`). */
+export const usePaleta = (): Paleta => (useEsOscuro() ? PALETA_OSCURA : PALETA_CLARA);
+
+/**
+ * Hojas de estilo que dependen del tema. Se declaran igual que un `StyleSheet.create`, pero con la
+ * paleta como argumento, y dan un hook:
+ *
+ * ```ts
+ * const useStyles = crearEstilos((c) => ({ caja: { backgroundColor: c.superficie } }));
+ * // en el componente:
+ * const styles = useStyles();
+ * ```
+ *
+ * Cada hoja se crea una vez por paleta y se guarda: cambiar de tema no la vuelve a crear en cada
+ * render.
+ */
+export function crearEstilos<T extends StyleSheet.NamedStyles<T>>(fabrica: (c: Paleta) => T) {
+    const hojas = new Map<Paleta, T>();
+    return function useEstilos(): T {
+        const c = usePaleta();
+        let hoja = hojas.get(c);
+        if (!hoja) {
+            hoja = StyleSheet.create(fabrica(c));
+            hojas.set(c, hoja);
+        }
+        return hoja;
+    };
+}
+
+/**
+ * El fondo de la raíz nativa (lo que se ve detrás de una transición) sigue al tema: sin esto, al
+ * empujar una pantalla en oscuro se asomaba un destello blanco.
+ */
+export function useFondoDeLaRaiz(fondo: string) {
+    useEffect(() => {
+        SystemUI.setBackgroundColorAsync(fondo).catch(() => {});
+    }, [fondo]);
+}

package/src/tema/fuentes.ts

@@ -0,0 +1,20 @@
+import { Platform } from "react-native";
+
+/**
+ * La tipografía de iOS es San Francisco —lo que React Native llama `System`— y no se puede
+ * llevar a Android: la licencia de Apple la limita a sus plataformas. Android se quedaba con
+ * `sans-serif` (Roboto), de ahí que las dos versiones no se parecieran.
+ *
+ * Inter es el sustituto libre (OFL) más cercano a San Francisco: misma altura de x, mismo
+ * aire de fuente de interfaz. Así que Android va con Inter e iOS se queda como está.
+ *
+ * Los seis cortes —de 400 a 900, que son los pesos que usan las pantallas— vienen en
+ * `assets/fonts/` de este paquete y **cada app los registra** como una sola familia en su
+ * `app.json` (plugin de expo-font, sección `android.fonts`; ver el README). Al declarar cada peso
+ * con su archivo, `fontWeight: "600"` toma el SemiBold de verdad en vez de una negrita sintética.
+ * Tocar esa lista obliga a reconstruir el binario, no basta con recargar.
+ */
+export const fontFamily = Platform.select({ android: "Inter", default: undefined });
+
+/** Familia lista para mezclar en un `style`; `null` donde vale la del sistema. */
+export const fuenteBase = fontFamily ? { fontFamily } : null;

package/src/tema/index.ts

@@ -0,0 +1,10 @@
+export { crearEstilos, useEsOscuro, useFondoDeLaRaiz, usePaleta } from "./estilos";
+export { fontFamily, fuenteBase } from "./fuentes";
+export { PALETA_CLARA, PALETA_OSCURA, type Paleta } from "./paleta";
+export {
+    ProveedorDeTema,
+    usePreferenciaDeTema,
+    type AlmacenDelTema,
+    type PreferenciaDeTema,
+} from "./ProveedorDeTema";
+export { renglon, tipografia } from "./tipografia";

package/src/tema/paleta.ts

@@ -0,0 +1,147 @@
+/**
+ * Los colores de las apps, **uno por cosa y no por tono**: el fondo, la superficie de una tarjeta,
+ * el texto, el aviso ámbar. Cada pantalla los toma de aquí (`usePaleta`, `crearEstilos`) y no
+ * escribe hexadecimales: así el modo oscuro es cambiar de paleta, no revisar cada pantalla.
+ *
+ * Los nombres `primary…`/`secondary…` son los del `colors` que traían las apps antes de la paleta,
+ * con el mismo sentido. Lo oscuro sigue al portal (`@acvl/frontend-components`, `v1/theme`): fondo
+ * `#121212`, papel `#1e1e1e` y el rojo más claro `#ff4a57`, que sobre negro se lee mejor que el de
+ * la marca.
+ *
+ * Lo que se pinta dentro de un mapa (los colores de estado de una flota, un pin) no sale de aquí:
+ * tiene que leerse igual sobre claro, oscuro y satélite, y lo escoge cada app.
+ */
+export interface Paleta {
+    esOscuro: boolean;
+
+    /** El fondo de la pantalla, detrás de las tarjetas. */
+    fondo: string;
+    /** Una tarjeta, un campo, una hoja, el header y la barra de pestañas. */
+    superficie: string;
+    /** Lo que va encima de una superficie y se tiene que distinguir de ella (un campo apagado). */
+    superficieTenue: string;
+    /** El texto normal. */
+    texto: string;
+    /** El texto que va sobre el rojo (un botón lleno, el chip «En curso»). */
+    sobrePrimario: string;
+    /** El velo detrás de un diálogo. */
+    velo: string;
+    /** La sombra: en oscuro casi no se ve, así que el borde hace su trabajo. */
+    sombra: string;
+
+    // Los de `colors`, con el mismo sentido.
+    primary: string;
+    primaryLight: string;
+    primaryLighter: string;
+    primaryDark: string;
+    /** El fondo de lo elegido. */
+    primaryWash: string;
+    /** El texto secundario. */
+    secondary: string;
+    /** El texto tenue: un placeholder, un icono apagado. */
+    secondaryLight: string;
+    /** Los bordes y separadores. */
+    secondaryLighter: string;
+    /** El gris fuerte: un título gris, el texto de un estado vacío. */
+    secondaryDark: string;
+    secondaryText: string;
+    /** El rótulo arriba del título del header. */
+    eyebrow: string;
+
+    /**
+     * Lo que pide atención sin ser error: pausas, pendientes, avisos. `acento` es el ámbar medio de
+     * un borde o una barra; `sobreFuerte`, la letra encima de un relleno `fuerte`.
+     */
+    aviso: {
+        fondo: string;
+        tinta: string;
+        fuerte: string;
+        acento: string;
+        sobreFuerte: string;
+        borde: string;
+    };
+    /** Lo cumplido. */
+    exito: { fondo: string; tinta: string };
+    /** Lo informativo. */
+    info: { fondo: string; tinta: string };
+    /** Lo que salió mal. */
+    error: { fondo: string; tinta: string };
+    /**
+     * Un escalón más de un avance que ya usa los otros: en wms, una orden de envío facturada
+     * (todavía no pagada, que es el verde) o un recibo entregado a medias. Es el morado que el
+     * portal le da a la orden de envío.
+     */
+    morado: { fondo: string; tinta: string };
+}
+
+export const PALETA_CLARA: Paleta = {
+    esOscuro: false,
+    fondo: "#f7f7f7",
+    superficie: "#ffffff",
+    superficieTenue: "#f1f1f1",
+    texto: "#1a1a1a",
+    sobrePrimario: "#ffffff",
+    velo: "rgba(0,0,0,0.45)",
+    sombra: "#000000",
+
+    primary: "#ea1b2b",
+    primaryLight: "rgb(242, 118, 127)",
+    primaryLighter: "rgb(250, 209, 212)",
+    primaryDark: "rgb(163, 18, 30)",
+    primaryWash: "rgba(234,27,43,0.08)",
+    secondary: "#606060",
+    secondaryLight: "rgb(159, 159, 159)",
+    secondaryLighter: "rgb(231, 231, 231)",
+    secondaryDark: "rgb(67, 67, 67)",
+    secondaryText: "#3a3d42",
+    eyebrow: "#4B5563",
+
+    aviso: {
+        fondo: "#fff8e1",
+        tinta: "#8a5300",
+        fuerte: "#b26a00",
+        acento: "#f5b955",
+        sobreFuerte: "#ffffff",
+        borde: "#ffe0a3",
+    },
+    exito: { fondo: "#e8f5e9", tinta: "#2e7d32" },
+    info: { fondo: "#e3f2fd", tinta: "#1565c0" },
+    error: { fondo: "#fdecea", tinta: "#c62828" },
+    morado: { fondo: "#f1e9fd", tinta: "#5b21b6" },
+};
+
+export const PALETA_OSCURA: Paleta = {
+    esOscuro: true,
+    fondo: "#121212",
+    superficie: "#1e1e1e",
+    superficieTenue: "#2a2a2a",
+    texto: "#f2f2f2",
+    sobrePrimario: "#ffffff",
+    velo: "rgba(0,0,0,0.65)",
+    sombra: "#000000",
+
+    primary: "#ff4a57",
+    primaryLight: "rgb(255, 128, 137)",
+    primaryLighter: "rgb(90, 24, 30)",
+    primaryDark: "#ea1b2b",
+    primaryWash: "rgba(255,74,87,0.16)",
+    secondary: "#b3b3b3",
+    secondaryLight: "#8c8c8c",
+    secondaryLighter: "#3a3a3a",
+    secondaryDark: "#d6d6d6",
+    secondaryText: "#c9ccd1",
+    eyebrow: "#a8b0bd",
+
+    aviso: {
+        fondo: "#3a2e12",
+        tinta: "#ffcc80",
+        fuerte: "#ffb74d",
+        acento: "#c9932f",
+        sobreFuerte: "#1e1e1e",
+        borde: "#6b5320",
+    },
+    exito: { fondo: "#1b3320", tinta: "#81c784" },
+    info: { fondo: "#132a40", tinta: "#90caf9" },
+    error: { fondo: "#3d1a1a", tinta: "#ff8a80" },
+    morado: { fondo: "#2a1d45", tinta: "#c4b5fd" },
+};

package/src/tema/tipografia.ts

@@ -0,0 +1,29 @@
+/**
+ * Los tamaños de letra de las apps. Son grandes a propósito: quien las usa lee de pie, con prisa, a
+ * veces con sol y sin lentes, y la letra chica es donde batalla. **Nada baja de `etiqueta`.** Una
+ * pantalla nueva toma de aquí en lugar de inventar su número.
+ */
+export const tipografia = {
+    /** La acción que toca completar: lo único que tiene que leerse de un vistazo. */
+    destacado: 32,
+    /** El folio y lo que identifica la pantalla. */
+    titulo: 24,
+    /** El nombre de un paso, el cliente: lo que se lee primero dentro de una tarjeta. */
+    subtitulo: 21,
+    /** El texto normal: valores, instrucciones, el lugar. */
+    cuerpo: 19,
+    /** Lo que acompaña: direcciones, el siguiente paso, horas. */
+    secundario: 17,
+    /** Rótulos en mayúsculas, chips y pestañas. El mínimo. */
+    etiqueta: 15,
+};
+
+/**
+ * Tamaño y alto de renglón explícito para un texto que lleva un icono al lado. `IconoDeRenglon`
+ * usa el mismo alto para centrarse contra el primer renglón; los dos crecen con la escala de
+ * letra del sistema.
+ */
+export const renglon = (fontSize: number) => ({
+    fontSize,
+    lineHeight: Math.round(fontSize * 1.3),
+});

package/src/texto.tsx

@@ -0,0 +1,44 @@
+import { fuenteBase, usePaleta } from "./tema";
+import { forwardRef, type ComponentRef } from "react";
+import {
+    Text as RNText,
+    TextInput as RNTextInput,
+    type TextInputProps,
+    type TextProps,
+} from "react-native";
+
+/**
+ * `Text` y `TextInput` con la tipografía de la app ya puesta.
+ *
+ * React Native no tiene una fuente por defecto para todo el árbol —y `defaultProps` dejó de
+ * aplicarse a componentes de función en React 19—, así que la familia se inyecta aquí y las
+ * pantallas importan estos dos en lugar de los de "react-native". Los componentes de Paper no
+ * pasan por aquí: esos leen la escala tipográfica del tema (`ProveedorDeTema`).
+ *
+ * La familia va primero en el arreglo de estilos para que cualquier `style` de quien lo use
+ * la pueda pisar. **También el color del texto** (`c.texto`): el `Text` de React Native es negro
+ * por omisión, y en el modo oscuro cada texto sin color propio desaparecía sobre el fondo.
+ */
+
+export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
+    { style, ...props },
+    ref,
+) {
+    const c = usePaleta();
+    return <RNText ref={ref} style={[fuenteBase, { color: c.texto }, style]} {...props} />;
+});
+
+export const TextInput = forwardRef<ComponentRef<typeof RNTextInput>, TextInputProps>(
+    function TextInput({ style, ...props }, ref) {
+        const c = usePaleta();
+        return (
+            <RNTextInput
+                ref={ref}
+                placeholderTextColor={c.secondaryLight}
+                selectionColor={c.primary}
+                style={[fuenteBase, { color: c.texto }, style]}
+                {...props}
+            />
+        );
+    },
+);