flysoft-react-ui 1.2.4 → 1.2.6

package/dist/components/utils/Snackbar.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState, useRef, useCallback } from "react";
-import { normalizeIconClass } from "./iconUtils";
-export const Snackbar = React.memo(({ id, message, variant, duration = 3000, icon, iconLabel, onClose }) => {
-    const [progress, setProgress] = useState(100);
-    const [isClosing, setIsClosing] = useState(false);
-    const intervalRef = useRef(null);
-    const startTimeRef = useRef(Date.now());
-    const remainingTimeRef = useRef(duration);
-    const closingRef = useRef(false);
-    // Mapeo de variantes a colores y clases
-    const variantConfig = {
-        primary: {
-            bg: "bg-[var(--color-primary-light)]",
-            border: "border-[var(--color-primary)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-primary)",
-        },
-        secondary: {
-            bg: "bg-[var(--color-secondary-light)]",
-            border: "border-[var(--color-secondary)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-secondary)",
-        },
-        success: {
-            bg: "bg-[var(--color-success-light)]",
-            border: "border-[var(--color-success)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-success)",
-        },
-        warning: {
-            bg: "bg-[var(--color-warning-light)]",
-            border: "border-[var(--color-warning)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-warning)",
-        },
-        danger: {
-            bg: "bg-[var(--color-danger-light)]",
-            border: "border-[var(--color-danger)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-danger)",
-        },
-        info: {
-            bg: "bg-[var(--color-info-light)]",
-            border: "border-[var(--color-info)]",
-            text: "text-gray-800",
-            progressColor: "var(--color-info)",
-        },
-    };
-    const config = variantConfig[variant];
-    // Función para cerrar el snackbar
-    const handleClose = useCallback(() => {
-        if (closingRef.current)
-            return;
-        closingRef.current = true;
-        setIsClosing(true);
-        // Limpiar intervalo inmediatamente
-        if (intervalRef.current) {
-            clearInterval(intervalRef.current);
-            intervalRef.current = null;
-        }
-        // Esperar a que termine la animación antes de remover del estado global
-        setTimeout(() => {
-            onClose(id);
-        }, 300);
-    }, [id, onClose]);
-    // Efecto para la barra de progreso
-    useEffect(() => {
-        if (duration <= 0)
-            return;
-        const updateProgress = () => {
-            if (closingRef.current)
-                return;
-            const elapsed = Date.now() - startTimeRef.current;
-            const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
-            setProgress(newProgress);
-            if (newProgress <= 0) {
-                handleClose();
-            }
-        };
-        intervalRef.current = window.setInterval(updateProgress, 50);
-        return () => {
-            if (intervalRef.current) {
-                window.clearInterval(intervalRef.current);
-            }
-        };
-    }, [duration, handleClose]);
-    // Pausar el progreso cuando el mouse está sobre el snackbar
-    const handleMouseEnter = () => {
-        if (closingRef.current)
-            return;
-        if (intervalRef.current) {
-            clearInterval(intervalRef.current);
-            intervalRef.current = null;
-        }
-        const elapsed = Date.now() - startTimeRef.current;
-        remainingTimeRef.current = duration - elapsed;
-    };
-    // Reanudar el progreso cuando el mouse sale del snackbar
-    const handleMouseLeave = () => {
-        if (closingRef.current)
-            return;
-        if (remainingTimeRef.current > 0) {
-            startTimeRef.current = Date.now();
-            const updateProgress = () => {
-                if (closingRef.current)
-                    return;
-                const elapsed = Date.now() - startTimeRef.current;
-                const newProgress = Math.max(0, ((remainingTimeRef.current - elapsed) / duration) * 100);
-                setProgress(newProgress);
-                if (newProgress <= 0) {
-                    handleClose();
-                }
-            };
-            intervalRef.current = window.setInterval(updateProgress, 50);
-        }
-    };
-    // Íconos por defecto según la variante
-    const defaultIcons = {
-        primary: "fa-info-circle",
-        secondary: "fa-info-circle",
-        success: "fa-check-circle",
-        warning: "fa-exclamation-triangle",
-        danger: "fa-times-circle",
-        info: "fa-info-circle",
-    };
-    const displayIcon = icon || defaultIcons[variant];
-    return (_jsx("div", { className: `
-        relative w-[18rem] bg-white rounded-md shadow-lg border border-gray-200
-        overflow-hidden transition-all duration-300 ease-in-out
-        ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0"}
-      `, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "polite", children: _jsxs("div", { className: `${config.bg} ${config.text} p-4 flex items-start gap-3 relative`, children: [duration > 0 && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[3px] overflow-hidden", children: _jsx("div", { className: "h-full transition-all duration-50 ease-linear", style: {
-                            width: `${progress}%`,
-                            backgroundColor: "#00000050",
-                        } }) })), displayIcon && (_jsx("div", { className: "flex-shrink-0 -mt-0.5", children: _jsx("i", { className: `${normalizeIconClass(displayIcon)} text-base`, "aria-hidden": !iconLabel, "aria-label": iconLabel }) })), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-medium break-words max-w-full", children: message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 ml-2 text-gray-600 hover:text-gray-800 transition-colors cursor-pointer", "aria-label": "Cerrar notificaci\u00F3n", type: "button", children: _jsx("i", { className: `${normalizeIconClass("fa-times")} text-sm` }) })] }) }));
-});

package/dist/components/utils/SnackbarContainer.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { useSnackbarState, useSnackbar } from "../../contexts/SnackbarContext";
-import { Snackbar } from "./Snackbar";
-export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
-    const snackbars = useSnackbarState();
-    const { removeSnackbar } = useSnackbar();
-    // Limitar el número de snackbars visibles
-    const visibleSnackbars = snackbars.slice(-maxSnackbars);
-    // Clases de posición
-    const positionClasses = {
-        "top-right": "top-4 right-4",
-        "top-left": "top-4 left-4",
-        "bottom-right": "bottom-4 right-4",
-        "bottom-left": "bottom-4 left-4",
-        "top-center": "top-4 left-1/2 -translate-x-1/2",
-        "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
-    };
-    if (snackbars.length === 0) {
-        return null;
-    }
-    return (_jsx("div", { className: `
-        fixed z-50 pointer-events-none
-        ${positionClasses[position]}
-      `, "aria-live": "polite", "aria-atomic": "true", children: _jsx("div", { className: "flex flex-col gap-3 pointer-events-auto", children: visibleSnackbars.map((snackbar) => (_jsx(Snackbar, { id: snackbar.id, message: snackbar.message, variant: snackbar.variant, duration: snackbar.duration, icon: snackbar.icon, iconLabel: snackbar.iconLabel, onClose: removeSnackbar }, snackbar.id))) }) }));
-};

package/dist/components/utils/iconUtils.js

@@ -1,40 +0,0 @@
-/**
- * Normaliza las clases de iconos de FontAwesome para usar el estilo light (fal) por defecto
- *
- * Convierte:
- * - "fa fa-user" -> "fal fa-user"
- * - "fas fa-user" -> "fal fa-user"
- * - "far fa-user" -> "fal fa-user"
- * - "fal fa-user" -> "fal fa-user" (ya es light, se mantiene)
- * - "fa-user" -> "fal fa-user"
- * - "fa-spinner fa-spin" -> "fal fa-spinner fa-spin" (preserva clases adicionales)
- *
- * @param iconClass - La clase del icono a normalizar
- * @returns La clase del icono normalizada con el estilo light (fal)
- */
-export function normalizeIconClass(iconClass) {
-    if (!iconClass)
-        return "";
-    // Dividir las clases por espacios
-    const classes = iconClass.trim().split(/\s+/);
-    // Buscar y reemplazar el prefijo de estilo
-    const stylePrefixes = ["fas", "far", "fal", "fab"];
-    let hasStylePrefix = false;
-    const normalizedClasses = classes.map((cls) => {
-        // Si es un prefijo de estilo, reemplazarlo por "fal"
-        if (stylePrefixes.includes(cls)) {
-            hasStylePrefix = true;
-            return "fal";
-        }
-        return cls;
-    });
-    // Si no tenía prefijo de estilo y la primera clase empieza con "fa-", agregar "fal" al inicio
-    if (!hasStylePrefix && classes[0]?.startsWith("fa-")) {
-        normalizedClasses.unshift("fal");
-    }
-    // Si no tenía prefijo de estilo y ninguna clase es un prefijo, agregar "fal" al inicio
-    else if (!hasStylePrefix && !classes.some(cls => stylePrefixes.includes(cls))) {
-        normalizedClasses.unshift("fal");
-    }
-    return normalizedClasses.join(" ");
-}

package/dist/components/utils/index.js

@@ -1,9 +0,0 @@
-export { Badge } from "./Badge";
-export { Avatar } from "./Avatar";
-export { RoadMap } from "./RoadMap";
-export { Dialog } from "./Dialog";
-export { Loader } from "./Loader";
-export { FiltersDialog } from "./FiltersDialog";
-export { Snackbar } from "./Snackbar";
-export { SnackbarContainer } from "./SnackbarContainer";
-export { Skeleton } from "./Skeleton";

package/dist/contexts/AppLayoutContext.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useCallback, } from "react";
-import { ThemeProvider, useTheme } from "./ThemeContext";
-import { AppLayout } from "../components/layout/AppLayout";
-import { SnackbarProvider } from "./SnackbarContext";
-import { SnackbarContainer } from "../components/utils/SnackbarContainer";
-const AppLayoutContext = createContext(undefined);
-// Internal component that uses ThemeContext and provides AppLayoutContext
-const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, initialContentFooter, initialClassName, }) => {
-    // Get theme context
-    const themeContext = useTheme();
-    // Layout state - ensure default height is set
-    const [navbar, setNavbar] = useState(() => {
-        const defaultNavbar = { fullWidthNavbar: true, height: "64px" };
-        if (initialNavbar) {
-            return { ...defaultNavbar, ...initialNavbar };
-        }
-        return defaultNavbar;
-    });
-    const [leftDrawer, setLeftDrawer] = useState(initialLeftDrawer || {});
-    const [contentFooter, setContentFooter] = useState(initialContentFooter);
-    const [className, setClassName] = useState(initialClassName || "");
-    // Memoize setters to avoid unnecessary re-renders
-    const handleSetNavbar = useCallback((newNavbar) => {
-        setNavbar(newNavbar);
-    }, []);
-    const handleSetLeftDrawer = useCallback((newLeftDrawer) => {
-        setLeftDrawer(newLeftDrawer);
-    }, []);
-    const handleSetClassName = useCallback((newClassName) => {
-        setClassName(newClassName);
-    }, []);
-    const handleSetContentFooter = useCallback((node) => {
-        setContentFooter(node);
-    }, []);
-    // Setters para actualizar solo los nodos del navbar
-    const handleSetNavBarLeftNode = useCallback((node) => {
-        setNavbar((prev) => {
-            if (!prev) {
-                // Si no hay navbar previo, crear uno nuevo con valores por defecto
-                return {
-                    fullWidthNavbar: true,
-                    height: "64px",
-                    navBarLeftNode: node,
-                };
-            }
-            return {
-                ...prev,
-                navBarLeftNode: node,
-            };
-        });
-    }, []);
-    const handleSetNavbarRightNode = useCallback((node) => {
-        setNavbar((prev) => {
-            if (!prev) {
-                // Si no hay navbar previo, crear uno nuevo con valores por defecto
-                return {
-                    fullWidthNavbar: true,
-                    height: "64px",
-                    navBarRightNode: node,
-                };
-            }
-            return {
-                ...prev,
-                navBarRightNode: node,
-            };
-        });
-    }, []);
-    const value = {
-        // Theme context values
-        ...themeContext,
-        // Layout state
-        navbar,
-        leftDrawer,
-        contentFooter,
-        className,
-        // Layout setters
-        setNavbar: handleSetNavbar,
-        setLeftDrawer: handleSetLeftDrawer,
-        setContentFooter: handleSetContentFooter,
-        setClassName: handleSetClassName,
-        setNavBarLeftNode: handleSetNavBarLeftNode,
-        setNavbarRightNode: handleSetNavbarRightNode,
-    };
-    return (_jsx(AppLayoutContext.Provider, { value: value, children: _jsx(AppLayout, { navbar: navbar, leftDrawer: leftDrawer, contentFooter: contentFooter, className: className, children: children }) }));
-};
-export const AppLayoutProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, initialNavbar, initialLeftDrawer, initialContentFooter, className = "", }) => {
-    return (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKey: storageKey, forceInitialTheme: forceInitialTheme, children: _jsxs(SnackbarProvider, { children: [_jsx(AppLayoutProviderInner, { initialNavbar: initialNavbar, initialLeftDrawer: initialLeftDrawer, initialContentFooter: initialContentFooter, initialClassName: className, children: children }), _jsx(SnackbarContainer, { position: "bottom-right" })] }) }));
-};
-// Hook to use AppLayout context
-// eslint-disable-next-line react-refresh/only-export-components
-export const useAppLayout = () => {
-    const context = useContext(AppLayoutContext);
-    if (context === undefined) {
-        throw new Error("useAppLayout must be used within an AppLayoutProvider");
-    }
-    return context;
-};
-// Hook to check if AppLayout context is available
-// eslint-disable-next-line react-refresh/only-export-components
-export const useAppLayoutContext = () => {
-    const context = useContext(AppLayoutContext);
-    return context !== undefined;
-};

package/dist/contexts/AuthContext.js

@@ -1,224 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useEffect, useState } from "react";
-export const AuthContext = createContext({
-    user: null,
-    login: async () => { },
-    logout: async () => { },
-    isAuthenticated: false,
-    isLoading: false,
-});
-const initAuth = () => {
-    const authString = localStorage.getItem("auth");
-    if (!authString)
-        return {};
-    return JSON.parse(authString);
-};
-const storeAuth = (auth) => {
-    localStorage.setItem("auth", JSON.stringify(auth));
-};
-const removeStoredAuth = () => {
-    localStorage.removeItem("auth");
-};
-/**
- * Verifica si un token ha expirado basándose en el string expires en formato ISO 8601
- * @param expires - String de fecha en formato ISO 8601
- * @returns true si el token ha expirado o si el formato es inválido, false si está vigente
- */
-const isTokenExpired = (expires) => {
-    if (!expires) {
-        return true; // Si no hay fecha de expiración, consideramos que está expirado
-    }
-    try {
-        // Validar formato ISO 8601 básico (debe poder ser parseado por Date)
-        const expirationDate = new Date(expires);
-        // Verificar que la fecha sea válida
-        if (isNaN(expirationDate.getTime())) {
-            console.warn("Formato de fecha de expiración inválido:", expires);
-            return true;
-        }
-        // Comparar con la fecha actual (agregamos un margen de 1 minuto para evitar problemas de precisión)
-        const now = new Date();
-        const oneMinuteInMs = 60 * 1000;
-        return expirationDate.getTime() <= now.getTime() + oneMinuteInMs;
-    }
-    catch (error) {
-        console.error("Error al verificar expiración del token:", error);
-        return true; // En caso de error, considerar como expirado por seguridad
-    }
-};
-/**
- * Valida que un usuario tenga un token vigente
- * @param user - Objeto de usuario a validar
- * @returns true si el usuario tiene un token válido y vigente, false en caso contrario
- */
-const isUserTokenValid = (user) => {
-    if (!user || !user.id) {
-        return false;
-    }
-    if (!user.token) {
-        return false;
-    }
-    return !isTokenExpired(user.token.expires);
-};
-export const AuthProvider = ({ children, getToken, getUserData, refreshToken, removeToken, showLog = false, }) => {
-    const [user, setUser] = useState(null);
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    const log = (action, data, isError = false) => {
-        if (isError) {
-            console.error(`[AuthContext] ${action}: `, data);
-        }
-        else if (showLog) {
-            console.log(`[AuthContext] ${action}: `, data);
-        }
-    };
-    useEffect(() => {
-        const auth = initAuth();
-        log("Init Auth - Retrieved from storage", auth);
-        // Verificar que el usuario tenga un token válido y vigente
-        const isValid = isUserTokenValid(auth);
-        log("Init Auth - Token valid check", { isValid, auth });
-        if (isValid) {
-            setUser(auth);
-            setIsAuthenticated(true);
-            log("Init Auth - User authenticated restored", auth);
-        }
-        else {
-            // Si el token está expirado o es inválido, limpiar el almacenamiento
-            if (auth.id && isTokenExpired(auth.token?.expires)) {
-                log("Init Auth - Token expired or invalid, cleaning storage", auth);
-                removeStoredAuth();
-            }
-            else {
-                log("Init Auth - No valid session found", auth);
-            }
-            setUser(null);
-            setIsAuthenticated(false);
-        }
-        setIsLoading(false);
-    }, []);
-    const login = async (username, password) => {
-        setIsLoading(true);
-        log("Login - Start", { username });
-        try {
-            const token = await getToken(username, password);
-            log("Login - Token received", token);
-            if (token.accessToken) {
-                // Verificar que el token recibido no esté expirado antes de continuar      
-                const expired = isTokenExpired(token.expires);
-                log("Login - Token expiration check", { expires: token.expires, expired });
-                if (expired) {
-                    log("Login - Token expired upon receipt", token, true);
-                    setUser(null);
-                    setIsAuthenticated(false);
-                    setIsLoading(false);
-                    return;
-                }
-                const { id, name, aditionalData } = await getUserData(token);
-                log("Login - User data received", { id, name, aditionalData });
-                const userData = {
-                    id,
-                    name,
-                    aditionalData,
-                    token,
-                };
-                // Validar nuevamente antes de establecer el estado
-                const isValid = isUserTokenValid(userData);
-                log("Login - Final validation", { isValid, userData });
-                if (isValid) {
-                    setUser(userData);
-                    storeAuth(userData);
-                    setIsAuthenticated(true);
-                    log("Login - Success", userData);
-                }
-                else {
-                    setUser(null);
-                    setIsAuthenticated(false);
-                    log("Login - Validation failed", userData, true);
-                }
-            }
-            else {
-                setUser(null);
-                setIsAuthenticated(false);
-                log("Login - No access token in response", token, true);
-            }
-        }
-        catch (error) {
-            setUser(null);
-            setIsAuthenticated(false);
-            log("Login - Error", error, true);
-            throw error;
-        }
-        finally {
-            setIsLoading(false);
-        }
-    };
-    const logout = async () => {
-        log("Logout - Start", { user });
-        removeStoredAuth();
-        setUser(null);
-        if (removeToken && user?.token) {
-            try {
-                await removeToken(user.token);
-                log("Logout - Token removed from server");
-            }
-            catch (e) {
-                log("Logout - Error removing token", e, true);
-            }
-        }
-        setIsAuthenticated(false);
-        log("Logout - Completed");
-    };
-    // Validar el token periódicamente o cuando cambia el usuario
-    // Esto asegura que si el token expira durante la sesión, se actualice el estado
-    useEffect(() => {
-        if (user && user.token?.expires) {
-            const checkTokenExpiration = async () => {
-                const expired = isTokenExpired(user.token?.expires);
-                log("Token Check - Checking expiration", { expires: user.token?.expires, expired });
-                if (expired) {
-                    let refreshed = false;
-                    // Si existe la función de refresco, intentar renovar el token antes de cerrar sesión
-                    if (refreshToken && user.token) {
-                        try {
-                            log("Token Check - Attempting refresh", { oldToken: user.token });
-                            const newToken = await refreshToken(user.token);
-                            log("Token Check - Refresh response", newToken);
-                            // Verificar que el nuevo token sea válido y no esté expirado
-                            if (newToken && newToken.accessToken && !isTokenExpired(newToken.expires)) {
-                                const newUser = { ...user, token: newToken };
-                                setUser(newUser);
-                                storeAuth(newUser);
-                                refreshed = true;
-                                log("Token Check - Refresh success", newUser);
-                            }
-                            else {
-                                log("Token Check - Refreshed token invalid or expired", newToken, true);
-                            }
-                        }
-                        catch (error) {
-                            console.error("Error al intentar refrescar el token:", error);
-                            log("Token Check - Refresh error", error, true);
-                        }
-                    }
-                    else {
-                        log("Token Check - No refresh logic available or token missing", { refreshToken: !!refreshToken, token: !!user.token });
-                    }
-                    if (!refreshed) {
-                        // Token expirado y no se pudo renovar, cerrar sesión
-                        log("Token Check - Session expired, logging out");
-                        removeStoredAuth();
-                        setUser(null);
-                        setIsAuthenticated(false);
-                    }
-                }
-            };
-            // Verificar inmediatamente
-            checkTokenExpiration();
-            // Verificar cada minuto para detectar expiraciones
-            const interval = setInterval(checkTokenExpiration, 60000);
-            return () => clearInterval(interval);
-        }
-    }, [user, refreshToken]);
-    return (_jsx(AuthContext.Provider, { value: { user, isAuthenticated, isLoading, login, logout }, children: children }));
-};