@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/navegacion/BarraDePestanas.tsx

@@ -0,0 +1,198 @@
+import * as Haptics from "expo-haptics";
+import { useEffect, useState } from "react";
+import { type LayoutChangeEvent, useWindowDimensions, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { crearEstilos, usePaleta } from "../tema";
+import BotonDeBarra, { type IconoDePestana } from "./BotonDeBarra";
+
+/**
+ * Lo que una lista deja libre abajo para que su último renglón no quede debajo de la barra, que
+ * flota encima del contenido: lo que se separa del borde, lo que mide y un margen.
+ */
+export const HUECO_DE_LA_BARRA = 140;
+
+// La barra se ajusta al número de pestañas: con una sola no queda un pastillón vacío
+// alrededor del icono, y con cuatro no se sale de la pantalla. Cada pestaña mide lo que
+// pueda hasta `TAB_WIDTH_MAX`, repartiendo el ancho disponible.
+const TAB_WIDTH_MAX = 115;
+const SCREEN_MARGIN = 24;
+const INDICATOR_INSET = 25;
+
+interface Ruta {
+    key: string;
+    name: string;
+    params?: object;
+}
+
+/**
+ * Lo que la barra lee de las props del `tabBar` de `Tabs` (`BottomTabBarProps`). Escrito a mano y
+ * no importado: cada versión de expo-router lo exporta desde otro lado.
+ */
+interface PropsDelTabBar {
+    state: { index: number; routes: Ruta[] };
+    navigation: {
+        emit: (evento: {
+            type: "tabPress" | "tabLongPress";
+            target: string;
+            canPreventDefault?: boolean;
+        }) => object;
+        navigate: (...args: any[]) => void;
+    };
+    descriptors?: Record<string, { options: { title?: string } }>;
+}
+
+interface Props extends PropsDelTabBar {
+    /** El icono de cada pestaña, por nombre de ruta. Una ruta sin icono deja su hueco vacío. */
+    iconos: Record<string, IconoDePestana>;
+    /**
+     * Nombres de ruta que sí van en la barra. Las pestañas que el usuario no alcanza se
+     * montan igual pero con `href: null`, y expo-router las deja en `state.routes` (sólo
+     * les pone `tabBarItemStyle.display = "none"`), así que hay que filtrarlas aquí.
+     */
+    visibles?: string[];
+}
+
+/**
+ * La barra de pestañas de abajo: una pastilla flotante con un icono por pestaña y la elegida
+ * resaltada en rojo. Va en el `tabBar` de `Tabs`:
+ *
+ * ```tsx
+ * <Tabs tabBar={(props) => <BarraDePestanas {...props} iconos={ICONOS} />}>
+ * ```
+ *
+ * Flota encima del contenido: las listas dejan `HUECO_DE_LA_BARRA` abajo.
+ */
+const BarraDePestanas = ({ state, navigation, descriptors, iconos, visibles }: Props) => {
+    const c = usePaleta();
+    const styles = useStyles();
+    // Sólo el alto se mide; el ancho lo fija el número de pestañas.
+    const [height, setHeight] = useState(0);
+    const { width: screenWidth } = useWindowDimensions();
+
+    const routes = visibles
+        ? state.routes.filter((route) => visibles.includes(route.name))
+        : state.routes;
+
+    const tabWidth = Math.min(TAB_WIDTH_MAX, (screenWidth - SCREEN_MARGIN * 2) / routes.length);
+    const indicatorWidth = Math.max(0, tabWidth - INDICATOR_INSET);
+    const indicatorX = (index: number) => tabWidth * index + (tabWidth - indicatorWidth) / 2;
+
+    // `state.index` cuenta sobre todas las rutas, incluidas las ocultas. Si la activa no
+    // está en la barra —sólo pasa navegando a mano a una ruta sin permiso— la pastilla se
+    // queda en la primera.
+    const activeIndex = Math.max(
+        0,
+        routes.findIndex((route) => route.key === state.routes[state.index]?.key),
+    );
+
+    const onTabbarLayout = (e: LayoutChangeEvent) => setHeight(e.nativeEvent.layout.height);
+
+    const tabPositionX = useSharedValue(indicatorX(activeIndex));
+
+    // La pastilla sigue a la pestaña activa (no al toque): así queda en su sitio cuando
+    // el grupo arranca en una ruta distinta de la primera, o cuando se navega sin tocar
+    // la barra.
+    useEffect(() => {
+        tabPositionX.value = withSpring(indicatorX(activeIndex), { duration: 350 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeIndex, tabWidth, indicatorWidth, tabPositionX]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: tabPositionX.value }],
+        };
+    });
+
+    return (
+        <View style={styles.wrapper}>
+            <View
+                onLayout={onTabbarLayout}
+                style={[styles.tabbar, { width: tabWidth * routes.length }]}
+            >
+                <Animated.View
+                    style={[
+                        animatedStyle,
+                        {
+                            position: "absolute",
+                            borderRadius: 30,
+                            backgroundColor: c.primary,
+                            // Nada que pintar hasta la primera medición del alto.
+                            height: Math.max(0, height - 15),
+                            width: indicatorWidth,
+                        },
+                    ]}
+                />
+                {routes.map((route, index) => {
+                    const isFocused = index === activeIndex;
+
+                    const onPress = () => {
+                        const event = navigation.emit({
+                            type: "tabPress",
+                            target: route.key,
+                            canPreventDefault: true,
+                        });
+
+                        // Sólo el de `tabPress` (`canPreventDefault`) trae `defaultPrevented`.
+                        const prevenido = "defaultPrevented" in event && event.defaultPrevented;
+                        if (!isFocused && !prevenido) {
+                            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                            navigation.navigate(route.name, route.params);
+                        }
+                    };
+
+                    const onLongPress = () => {
+                        navigation.emit({
+                            type: "tabLongPress",
+                            target: route.key,
+                        });
+                    };
+
+                    return (
+                        <BotonDeBarra
+                            key={route.key}
+                            onPress={onPress}
+                            onLongPress={onLongPress}
+                            isFocused={isFocused}
+                            icono={iconos[route.name]}
+                            etiqueta={descriptors?.[route.key]?.options.title ?? route.name}
+                            color={isFocused ? c.sobrePrimario : c.primary}
+                        />
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const useStyles = crearEstilos((c) => ({
+    wrapper: {
+        position: "absolute",
+        bottom: 30,
+        left: 0,
+        right: 0,
+        alignItems: "center",
+    },
+    tabbar: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        backgroundColor: c.superficie,
+        paddingVertical: 22,
+        borderRadius: 35,
+
+        // android
+        elevation: 3,
+
+        // ios
+        shadowColor: c.sombra,
+        shadowOffset: { width: 0, height: 10 },
+        shadowRadius: 10,
+        shadowOpacity: 0.1,
+
+        // En oscuro la sombra no se ve: el borde separa la barra del mapa o la lista de abajo.
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+}));
+
+export default BarraDePestanas;

package/src/navegacion/BotonDeBarra.tsx

@@ -0,0 +1,61 @@
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import React, { useEffect } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, {
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+} from "react-native-reanimated";
+
+export type IconoDePestana = React.ComponentProps<typeof MaterialIcons>["name"];
+
+interface Props {
+    onPress: () => void;
+    onLongPress: () => void;
+    isFocused: boolean;
+    icono: IconoDePestana | undefined;
+    etiqueta: string;
+    color: string;
+}
+
+/** Una pestaña de `BarraDePestanas`: su icono, que crece un poco al elegirla. */
+const BotonDeBarra = ({ onPress, onLongPress, isFocused, icono, etiqueta, color }: Props) => {
+    const scale = useSharedValue(0);
+
+    useEffect(() => {
+        scale.value = withSpring(isFocused ? 1 : 0, { duration: 350 });
+    }, [scale, isFocused]);
+
+    const animatedIconStyle = useAnimatedStyle(() => {
+        const scaleValue = interpolate(scale.value, [0, 1], [1, 1.2]);
+        return {
+            transform: [{ scale: scaleValue }],
+        };
+    });
+
+    return (
+        <Pressable
+            onPress={onPress}
+            onLongPress={onLongPress}
+            accessibilityRole="tab"
+            accessibilityLabel={etiqueta}
+            accessibilityState={{ selected: isFocused }}
+            style={styles.tabbarItem}
+        >
+            <Animated.View style={animatedIconStyle}>
+                {icono ? <MaterialIcons name={icono} size={24} color={color} /> : null}
+            </Animated.View>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    tabbarItem: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+
+export default BotonDeBarra;

package/src/navegacion/encabezado.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Logo } from "../componentes/Logo";
+import { Text } from "../texto";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+
+/**
+ * Alto del header por debajo de la barra de estado. Iguala el de `CabeceraEmpujada` (10 de
+ * padding + la fila de 45 del botón de atrás + 13), y se suma al inset porque `headerStyle.height`
+ * de React Navigation incluye la franja de la barra de estado: un alto fijo salía bien en iOS
+ * —inset grande— y desproporcionado en Android.
+ */
+export const ALTO_DEL_ENCABEZADO = 76;
+
+/**
+ * El título del header de las pestañas: un rótulo arriba (quién entró, la yarda, el nombre de la
+ * app) y el de la pestaña en rojo.
+ */
+export function TituloDelEncabezado({ eyebrow, children }: { eyebrow: string; children: string }) {
+    const styles = useStyles();
+    return (
+        <View>
+            {/* Sin recortar: parte en dos renglones si hace falta, como todo lo que se lee de
+                pie. */}
+            <Text style={styles.eyebrow}>{eyebrow.toUpperCase()}</Text>
+            {/* Con el avatar a la derecha el título queda justo en pantallas angostas: que encoja
+                antes que partirse en dos renglones. */}
+            <Text numberOfLines={1} adjustsFontSizeToFit style={styles.titulo}>
+                {children}
+            </Text>
+        </View>
+    );
+}
+
+/**
+ * El header de las pestañas de una app, igual en todas: la bola a la izquierda, el rótulo y el
+ * título, y a la derecha lo que la app ponga (sus pendientes, el avatar). Va en el `screenOptions`
+ * de `Tabs`:
+ *
+ * ```tsx
+ * const encabezado = useOpcionesDelEncabezado({ eyebrow: "Operador", derecha: <BotonDeAvatar … /> });
+ * <Tabs screenOptions={encabezado} tabBar={…}>
+ * ```
+ */
+export function useOpcionesDelEncabezado({
+    eyebrow,
+    derecha,
+}: {
+    eyebrow: string;
+    derecha?: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return {
+        headerShadowVisible: false,
+        headerStyle: { height: insets.top + ALTO_DEL_ENCABEZADO, backgroundColor: c.superficie },
+        headerTitleAlign: "left" as const,
+        headerTitle: (props: { children: string }) => (
+            <TituloDelEncabezado eyebrow={eyebrow}>{props.children}</TituloDelEncabezado>
+        ),
+        headerLeft: () => (
+            <View style={styles.izquierda}>
+                <Logo />
+            </View>
+        ),
+        headerRight: derecha ? () => <View style={styles.derecha}>{derecha}</View> : undefined,
+        tabBarHideOnKeyboard: true,
+    };
+}
+
+const useStyles = crearEstilos((c) => ({
+    // Con la letra mínima (`etiqueta`): a 11 el nombre no se leía.
+    eyebrow: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "700",
+        letterSpacing: 1.4,
+        color: c.eyebrow,
+    },
+    titulo: {
+        fontSize: 30,
+        fontWeight: "800",
+        color: c.primary,
+    },
+    izquierda: { marginLeft: 20 },
+    derecha: { flexDirection: "row", alignItems: "center", gap: 6, marginRight: 20 },
+}));

package/src/pantallas/PantallaDeAcceso.tsx

@@ -0,0 +1,184 @@
+import * as Haptics from "expo-haptics";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useWindowDimensions, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { Button, Card, Chip, Snackbar } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { LogoCompleto } from "../componentes/Logo";
+import { setErrors } from "../formularios/errores";
+import TextoDeAccesoControlado from "../formularios/TextoDeAccesoControlado";
+import { crearEstilos, usePaleta } from "../tema";
+import { Text } from "../texto";
+
+// Mismo corte que ContenidoDePantalla: de aquí para abajo es teléfono.
+const ANCHO_DE_TABLETA = 700;
+
+/** Lo que se escribe, con los nombres del servidor: así `setErrors` lo cuelga de su campo. */
+export interface DatosDeAcceso {
+    username: string;
+    password: string;
+}
+
+/**
+ * Lo que pasó al intentar entrar: `null` si entró (la app ya guardó la sesión y su layout la
+ * lleva adentro), o lo que se le dice a quien escribe.
+ */
+export type ResultadoDeAcceso = null | {
+    mensaje: string;
+    /** `aviso` para lo que no es un error suyo (cambiar la contraseña); por omisión, `error`. */
+    tono?: "aviso" | "error";
+    /** El rechazo del servidor, si trae motivos por campo (un 400): se cuelgan de cada uno. */
+    errorDelServidor?: unknown;
+};
+
+/**
+ * La pantalla de entrada de las apps: el logo con el nombre de la app, usuario, contraseña e
+ * «Iniciar Sesión», y la versión abajo. En una tableta va en una tarjeta centrada; en un teléfono,
+ * directo sobre el fondo.
+ *
+ * Lo de cada app es `onEntrar`: llama a su login y dice qué contestar a cada respuesta (una cuenta
+ * deshabilitada, una que no tiene acceso a esta app). El aviso sale **arriba**, porque el teclado
+ * tapa uno anclado abajo, y dura lo que tarda en leerse.
+ */
+export default function PantallaDeAcceso({
+    nombre,
+    version,
+    onEntrar,
+}: {
+    /** Lo que va bajo el logo: «TMS». */
+    nombre: string;
+    version?: string | null;
+    onEntrar: (datos: DatosDeAcceso) => Promise<ResultadoDeAcceso>;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    const { width } = useWindowDimensions();
+    const form = useForm<DatosDeAcceso>({ defaultValues: { username: "", password: "" } });
+    const [entrando, setEntrando] = useState(false);
+    const [aviso, setAviso] = useState<string | null>(null);
+
+    const entrar = form.handleSubmit(async (datos) => {
+        setEntrando(true);
+        try {
+            const resultado = await onEntrar(datos);
+            if (!resultado) {
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+                return;
+            }
+            Haptics.notificationAsync(
+                resultado.tono === "aviso"
+                    ? Haptics.NotificationFeedbackType.Warning
+                    : Haptics.NotificationFeedbackType.Error,
+            );
+            if (resultado.errorDelServidor) setErrors(form, resultado.errorDelServidor);
+            setAviso(resultado.mensaje);
+        } catch {
+            // `onEntrar` contesta lo que conoce; lo que se le escape no deja el botón cargando.
+            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+            setAviso("No se pudo iniciar sesión. Intente de nuevo.");
+        } finally {
+            setEntrando(false);
+        }
+    });
+
+    const contenido = (
+        <>
+            <View style={styles.marca}>
+                <LogoCompleto />
+                {/* La itálica es sintética (ni Inter ni San Francisco traen corte cursivo): la
+                    inclinación saca la última letra del ancho que se midió y se corta contra el
+                    borde. El `paddingHorizontal` le devuelve ese aire. */}
+                <Text style={styles.nombre}>{nombre}</Text>
+            </View>
+
+            <View style={styles.campos}>
+                <TextoDeAccesoControlado
+                    name="username"
+                    control={form.control}
+                    etiqueta="Usuario"
+                    entrada={{ autoCapitalize: "none" }}
+                />
+                <TextoDeAccesoControlado
+                    name="password"
+                    control={form.control}
+                    etiqueta="Contraseña"
+                    contrasena
+                    entrada={{ autoCapitalize: "none" }}
+                />
+            </View>
+
+            <Button
+                mode={"contained"}
+                loading={entrando}
+                disabled={entrando}
+                onPress={entrar}
+                style={styles.boton}
+            >
+                Iniciar Sesión
+            </Button>
+        </>
+    );
+
+    return (
+        <View style={styles.root}>
+            {/* `behavior="padding"` funciona en ambas plataformas con edge-to-edge gracias a
+                react-native-keyboard-controller (el de RN lo ignora en Android). */}
+            <KeyboardAvoidingView style={styles.centro} behavior="padding">
+                {/* El tope de ancho vive en este View y no en la Card: el Surface de Paper reparte
+                    el estilo en dos capas anidadas en iOS y `maxWidth` cae en la de adentro, que
+                    queda pegada a la izquierda de la de afuera. La Card sólo se estira. */}
+                <View style={styles.columna}>
+                    {width > ANCHO_DE_TABLETA ? (
+                        <Card style={styles.card}>
+                            <Card.Content>{contenido}</Card.Content>
+                        </Card>
+                    ) : (
+                        contenido
+                    )}
+                </View>
+            </KeyboardAvoidingView>
+
+            {version ? (
+                <View style={styles.version}>
+                    <Chip
+                        compact
+                        textStyle={{ color: c.secondary, fontSize: 11 }}
+                        style={{ backgroundColor: c.superficieTenue }}
+                    >
+                        v {version}
+                    </Chip>
+                </View>
+            ) : null}
+
+            <Snackbar
+                visible={aviso !== null}
+                onDismiss={() => setAviso(null)}
+                // Un aviso largo se queda lo que tarda en leerse.
+                duration={Math.max(2400, (aviso?.length ?? 0) * 60)}
+                wrapperStyle={{ top: insets.top + 12, bottom: undefined }}
+            >
+                {aviso}
+            </Snackbar>
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    centro: { flex: 1, justifyContent: "center", padding: 24, backgroundColor: c.fondo },
+    columna: { width: "100%", maxWidth: 400, alignSelf: "center" },
+    card: { backgroundColor: c.superficie },
+    marca: { alignItems: "center", marginBottom: 20 },
+    nombre: {
+        fontSize: 15,
+        color: c.primary,
+        fontWeight: "bold",
+        fontStyle: "italic",
+        paddingHorizontal: 3,
+    },
+    campos: { gap: 15, paddingBottom: 20 },
+    boton: { marginTop: 10, borderRadius: 15 },
+    version: { position: "absolute", bottom: 50, left: 0, right: 0, alignItems: "center" },
+}));

package/src/pantallas/PantallaDeEdicion.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { ActivityIndicator, ScrollView, View } from "react-native";
+import { KeyboardAvoidingView } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
+import EstadoVacio from "../componentes/EstadoVacio";
+import Nota from "../componentes/Nota";
+import { mensajeDeError } from "../formularios/errores";
+import { crearEstilos, usePaleta } from "../tema";
+
+/**
+ * El armazón de una pantalla que edita algo (un viaje, un tracto, una caja, un operador). Dos
+ * partes, porque el formulario nace cuando ya llegó lo que edita (sus valores iniciales salen de
+ * ahí):
+ *
+ * - `EsperaDeEdicion`: lo que se ve antes: sin permiso, cargando o si falló, con «Reintentar».
+ * - `FormularioDeEdicion`: la cabecera, los campos en un scroll que esquiva el teclado, el error
+ *   del último intento y «Guardar» abajo, fijo.
+ */
+
+/** Lo que la espera lee de un `use…Query` de RTK Query. */
+interface ConsultaDeEdicion {
+    isError: boolean;
+    error?: unknown;
+    refetch: () => unknown;
+}
+
+export function EsperaDeEdicion({
+    eyebrow,
+    puede,
+    sinPermiso,
+    consulta,
+    queEs,
+}: {
+    eyebrow: string;
+    puede: boolean;
+    /** Qué permiso falta, dicho para quien lo lee. */
+    sinPermiso: string;
+    consulta: ConsultaDeEdicion;
+    /** «el viaje», «el tracto»: para «No se pudo cargar el tracto». */
+    queEs: string;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <View style={styles.root}>
+            <CabeceraEmpujada eyebrow={eyebrow} titulo="…" />
+            {!puede ? (
+                <EstadoVacio icono="lock-outline" titulo="No tienes permiso" texto={sinPermiso} />
+            ) : consulta.isError ? (
+                <EstadoVacio
+                    icono="cloud-alert"
+                    titulo={`No se pudo cargar ${queEs}`}
+                    texto={mensajeDeError(consulta.error, "Revisa la señal e intenta de nuevo.")}
+                >
+                    <BotonGrande icono="refresh" modo="contorno" onPress={consulta.refetch}>
+                        Reintentar
+                    </BotonGrande>
+                </EstadoVacio>
+            ) : (
+                <ActivityIndicator color={c.primary} style={styles.cargando} />
+            )}
+        </View>
+    );
+}
+
+export function FormularioDeEdicion({
+    eyebrow,
+    titulo,
+    error,
+    guardando,
+    onGuardar,
+    textoDeGuardar = "Guardar",
+    children,
+}: {
+    eyebrow: string;
+    titulo: string;
+    /** Lo que dijo el servidor la última vez que no guardó. */
+    error: string | null;
+    guardando: boolean;
+    onGuardar: () => void;
+    /** Lo que dice el botón: «Guardar», o lo que haga («Registrar la renovación»). */
+    textoDeGuardar?: string;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return (
+        <View style={styles.root}>
+            <CabeceraEmpujada eyebrow={eyebrow} titulo={titulo} />
+            <KeyboardAvoidingView behavior="padding" style={styles.flex}>
+                <ScrollView
+                    contentContainerStyle={styles.contenido}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    {children}
+                    {error ? <Nota tono="aviso" texto={error} /> : null}
+                </ScrollView>
+                <View style={[styles.pie, { paddingBottom: insets.bottom + 16 }]}>
+                    <BotonGrande icono="check" onPress={onGuardar} cargando={guardando}>
+                        {guardando ? "Guardando…" : textoDeGuardar}
+                    </BotonGrande>
+                </View>
+            </KeyboardAvoidingView>
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    flex: { flex: 1 },
+    cargando: { marginTop: 24 },
+    contenido: { padding: 20, gap: 12 },
+    pie: { paddingHorizontal: 20, paddingTop: 12, backgroundColor: c.superficie },
+}));