flysoft-react-ui 1.2.3 → 1.2.5

package/dist/contexts/CrudContext.js

@@ -1,333 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback, } from "react";
-import { useSearchParams } from "react-router-dom";
-import { Pagination } from "../components/form-controls/Pagination";
-import { useAsyncRequest } from "../hooks/useAsyncRequest";
-const createCrudContext = () => {
-    return createContext(undefined);
-};
-// Crear el contexto con un tipo genérico por defecto
-// Los usuarios pueden crear su propio contexto con su tipo específico
-export const CrudContext = createCrudContext();
-export function CrudProvider({ children, getPromise, getItemPromise, postPromise, putPromise, deletePromise, limit = 15, pageParam = "pagina", urlParams = [], singleItemId, extraData: extraDataProp, }) {
-    const [extraData, setExtraData] = useState(extraDataProp);
-    const [list, setList] = useState(undefined);
-    const [item, setItem] = useState(undefined);
-    const [page, setPage] = useState(1);
-    const [pages, setPages] = useState(1);
-    const [total, setTotal] = useState(0);
-    const [searchParams, setSearchParams] = useSearchParams();
-    // Extraer funciones execute y opciones de las promises
-    const getPromiseExecute = getPromise
-        ? typeof getPromise === "function"
-            ? getPromise
-            : getPromise.execute
-        : undefined;
-    const getPromiseSuccessMessage = getPromise && typeof getPromise === "object"
-        ? getPromise.successMessage
-        : undefined;
-    const getPromiseErrorMessage = getPromise && typeof getPromise === "object"
-        ? getPromise.errorMessage
-        : undefined;
-    const postPromiseExecute = postPromise
-        ? typeof postPromise === "function"
-            ? postPromise
-            : postPromise.execute
-        : undefined;
-    const postPromiseSuccessMessage = postPromise && typeof postPromise === "object"
-        ? postPromise.successMessage
-        : undefined;
-    const postPromiseErrorMessage = postPromise && typeof postPromise === "object"
-        ? postPromise.errorMessage
-        : undefined;
-    const putPromiseExecute = putPromise
-        ? typeof putPromise === "function"
-            ? putPromise
-            : putPromise.execute
-        : undefined;
-    const putPromiseSuccessMessage = putPromise && typeof putPromise === "object"
-        ? putPromise.successMessage
-        : undefined;
-    const putPromiseErrorMessage = putPromise && typeof putPromise === "object"
-        ? putPromise.errorMessage
-        : undefined;
-    const deletePromiseExecute = deletePromise
-        ? typeof deletePromise === "function"
-            ? deletePromise
-            : deletePromise.execute
-        : undefined;
-    const deletePromiseSuccessMessage = deletePromise && typeof deletePromise === "object"
-        ? deletePromise.successMessage
-        : undefined;
-    const deletePromiseErrorMessage = deletePromise && typeof deletePromise === "object"
-        ? deletePromise.errorMessage
-        : undefined;
-    const getItemPromiseExecute = getItemPromise
-        ? typeof getItemPromise === "function"
-            ? getItemPromise
-            : getItemPromise.execute
-        : undefined;
-    const getItemPromiseSuccessMessage = getItemPromise && typeof getItemPromise === "object"
-        ? getItemPromise.successMessage
-        : undefined;
-    const getItemPromiseErrorMessage = getItemPromise && typeof getItemPromise === "object"
-        ? getItemPromise.errorMessage
-        : undefined;
-    const getPromiseRef = useRef(getPromiseExecute);
-    // Hooks para manejar las peticiones asíncronas con mensajes opcionales
-    const fetchDataAsync = useAsyncRequest({
-        successMessage: getPromiseSuccessMessage,
-        errorMessage: getPromiseErrorMessage,
-    });
-    const createItemAsync = useAsyncRequest({
-        successMessage: postPromiseSuccessMessage,
-        errorMessage: postPromiseErrorMessage,
-    });
-    const updateItemAsync = useAsyncRequest({
-        successMessage: putPromiseSuccessMessage,
-        errorMessage: putPromiseErrorMessage,
-    });
-    const deleteItemAsync = useAsyncRequest({
-        successMessage: deletePromiseSuccessMessage,
-        errorMessage: deletePromiseErrorMessage,
-    });
-    const fetchItemAsync = useAsyncRequest({
-        successMessage: getItemPromiseSuccessMessage,
-        errorMessage: getItemPromiseErrorMessage,
-    });
-    // El isLoading del contexto usa el hook de fetchData
-    const isLoading = fetchDataAsync.isLoading;
-    // Actualizar la referencia cuando cambie getPromise
-    useEffect(() => {
-        getPromiseRef.current = getPromiseExecute;
-    }, [getPromiseExecute]);
-    // Función para obtener los parámetros de la URL
-    const getUrlParams = useCallback(() => {
-        const params = { limit };
-        // Agregar pageParam si existe en la URL
-        const pageValue = searchParams.get(pageParam);
-        if (pageValue) {
-            const parsedPage = parseInt(pageValue, 10);
-            if (!isNaN(parsedPage)) {
-                params[pageParam] = parsedPage;
-            }
-        }
-        // Agregar urlParams si existen en la URL
-        urlParams.forEach((paramName) => {
-            const paramValue = searchParams.get(paramName);
-            if (paramValue !== null) {
-                params[paramName] = paramValue;
-            }
-        });
-        return params;
-    }, [searchParams, pageParam, urlParams, limit]);
-    // Función para obtener los datos
-    const fetchData = useCallback(async (params) => {
-        if (!getPromiseExecute) {
-            return;
-        }
-        // Obtener los parámetros que se van a usar
-        const requestParams = params || getUrlParams();
-        const result = await fetchDataAsync.execute(async () => {
-            return await getPromiseRef.current(requestParams);
-        });
-        // Solo procesar el resultado si no es undefined (undefined significa error)
-        if (result !== undefined) {
-            if (result && typeof result === "object" && "list" in result) {
-                // Es un PaginationInterface
-                const { list, page, pages, total } = result;
-                setList(list);
-                setPage(page);
-                setPages(pages);
-                setTotal(total);
-            }
-            else if (Array.isArray(result)) {
-                // Es un array simple
-                setList(result);
-                setPage(1);
-                setTotal(result.length);
-                setPages(Math.ceil(result.length / limit));
-            }
-            else {
-                // Resultado null
-                setList(undefined);
-                setPage(1);
-                setPages(1);
-                setTotal(0);
-            }
-        }
-    }, [getUrlParams, limit, fetchDataAsync, getPromiseExecute]);
-    // Ref para almacenar los valores anteriores de urlParams
-    const prevUrlParamsValuesRef = useRef({});
-    // Memoizar los valores actuales de los urlParams
-    const urlParamsValues = useMemo(() => {
-        const values = {};
-        urlParams.forEach((paramName) => {
-            values[paramName] = searchParams.get(paramName);
-        });
-        return values;
-    }, [searchParams, urlParams]);
-    // Memoizar los parámetros de URL para evitar re-renders innecesarios
-    const urlParamsKey = useMemo(() => urlParams.join(","), [urlParams]);
-    // Memoizar solo los parámetros relevantes de la URL (urlParams + pageParam)
-    // para que el useEffect solo se ejecute cuando cambien estos parámetros
-    const relevantParamsKey = useMemo(() => {
-        const relevantParams = {};
-        // Agregar pageParam si existe
-        const pageValue = searchParams.get(pageParam);
-        if (pageValue) {
-            relevantParams[pageParam] = pageValue;
-        }
-        // Agregar urlParams si existen
-        urlParams.forEach((paramName) => {
-            const paramValue = searchParams.get(paramName);
-            if (paramValue !== null) {
-                relevantParams[paramName] = paramValue;
-            }
-        });
-        return JSON.stringify(relevantParams);
-    }, [searchParams, pageParam, urlParams]);
-    // Memoizar los parámetros actuales para exponerlos
-    const currentParams = useMemo(() => getUrlParams(), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [searchParams, pageParam, urlParamsKey, limit, urlParams]);
-    // Función para recargar los datos
-    const fetchItemsExecute = useCallback(async (params) => {
-        await fetchData(params);
-    }, [fetchData]);
-    // Función para obtener un item individual
-    const fetchItemExecute = useCallback(async (params) => {
-        if (!getItemPromiseExecute) {
-            throw new Error("getItemPromise is not defined. Please provide getItemPromise to CrudProvider.");
-        }
-        // Si no se pasan parámetros, usar singleItemId si está disponible
-        const finalParams = params !== undefined ? params : singleItemId;
-        if (finalParams === undefined) {
-            throw new Error("No parameters provided and singleItemId is not defined. Please provide parameters or set singleItemId in CrudProvider.");
-        }
-        const result = await fetchItemAsync.execute(async () => {
-            return await getItemPromiseExecute(finalParams);
-        });
-        if (result !== undefined) {
-            setItem(result);
-        }
-        return result;
-    }, [getItemPromiseExecute, fetchItemAsync, singleItemId]);
-    // Función para crear un item
-    const createItemExecute = useCallback(async (item) => {
-        if (!postPromiseExecute) {
-            throw new Error("postPromise is not defined. Please provide postPromise to CrudProvider.");
-        }
-        return await createItemAsync.execute(async () => {
-            return await postPromiseExecute(item);
-        });
-    }, [postPromiseExecute, createItemAsync]);
-    // Función para actualizar un item
-    const updateItemExecute = useCallback(async (item) => {
-        if (!putPromiseExecute) {
-            throw new Error("putPromise is not defined. Please provide putPromise to CrudProvider.");
-        }
-        return await updateItemAsync.execute(async () => {
-            return await putPromiseExecute(item);
-        });
-    }, [putPromiseExecute, updateItemAsync]);
-    // Función para eliminar un item
-    const deleteItemExecute = useCallback(async (item) => {
-        if (!deletePromiseExecute) {
-            throw new Error("deletePromise is not defined. Please provide deletePromise to CrudProvider.");
-        }
-        await deleteItemAsync.execute(async () => {
-            await deletePromiseExecute(item);
-        });
-    }, [deletePromiseExecute, deleteItemAsync]);
-    // useEffect para resetear pageParam a 1 cuando cambien los urlParams
-    useEffect(() => {
-        // Verificar si hay algún urlParam definido
-        if (urlParams.length === 0) {
-            prevUrlParamsValuesRef.current = {};
-            return;
-        }
-        // Comparar valores actuales con los anteriores
-        const prevValues = prevUrlParamsValuesRef.current;
-        const hasChanged = urlParams.some((paramName) => prevValues[paramName] !== urlParamsValues[paramName]);
-        // Si los urlParams cambiaron, resetear pageParam a 1
-        if (hasChanged) {
-            const currentPage = searchParams.get(pageParam);
-            if (currentPage && currentPage !== "1") {
-                const newSearchParams = new URLSearchParams(searchParams);
-                newSearchParams.set(pageParam, "1");
-                setSearchParams(newSearchParams, { replace: true });
-                // No hacer fetchData aquí, se hará cuando cambien los searchParams
-                return;
-            }
-        }
-        // Actualizar los valores anteriores
-        prevUrlParamsValuesRef.current = { ...urlParamsValues };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [JSON.stringify(urlParamsValues), pageParam, urlParamsKey]);
-    // useEffect para ejecutar fetchData cuando cambian los parámetros relevantes o getPromise
-    useEffect(() => {
-        if (!getPromiseExecute) {
-            return;
-        }
-        const timeoutId = setTimeout(() => {
-            fetchData();
-        }, 0);
-        return () => clearTimeout(timeoutId);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [relevantParamsKey, getPromiseExecute]);
-    // useEffect para obtener el item individual cuando cambie singleItemId
-    useEffect(() => {
-        if (singleItemId !== undefined && getItemPromiseExecute) {
-            fetchItemExecute(singleItemId);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [singleItemId]);
-    // Sincronizar extraDataProp con el estado local
-    useEffect(() => {
-        setExtraData(extraDataProp);
-    }, [extraDataProp]);
-    const value = {
-        list,
-        item,
-        page,
-        pages,
-        total,
-        limit,
-        isLoading,
-        params: currentParams,
-        fetchItems: {
-            execute: fetchItemsExecute,
-            isLoading: fetchDataAsync.isLoading,
-        },
-        fetchItem: {
-            execute: fetchItemExecute,
-            isLoading: fetchItemAsync.isLoading,
-        },
-        createItem: {
-            execute: createItemExecute,
-            isLoading: createItemAsync.isLoading,
-        },
-        updateItem: {
-            execute: updateItemExecute,
-            isLoading: updateItemAsync.isLoading,
-        },
-        deleteItem: {
-            execute: deleteItemExecute,
-            isLoading: deleteItemAsync.isLoading,
-        },
-        pagination: (_jsx(Pagination, { page: page, pages: pages, total: total, fieldName: pageParam, isLoading: isLoading })),
-        extraData,
-        setExtraData,
-    };
-    return _jsx(CrudContext.Provider, { value: value, children: children });
-}
-// Hook to use Crud context
-// eslint-disable-next-line react-refresh/only-export-components
-export function useCrud() {
-    const context = useContext(CrudContext);
-    if (context === undefined) {
-        throw new Error("useCrud must be used within a CrudProvider");
-    }
-    return context;
-}

package/dist/contexts/SnackbarContext.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useCallback, useMemo, } from "react";
-const SnackbarStateContext = createContext(undefined);
-const SnackbarActionsContext = createContext(undefined);
-export const SnackbarProvider = ({ children, }) => {
-    const [snackbars, setSnackbars] = useState([]);
-    const showSnackbar = useCallback((message, variant = "info", options) => {
-        const id = `snackbar-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-        const newSnackbar = {
-            id,
-            message,
-            variant,
-            duration: options?.duration ?? 3000,
-            icon: options?.icon,
-            iconLabel: options?.iconLabel,
-        };
-        setSnackbars((prev) => [...prev, newSnackbar]);
-    }, []);
-    const removeSnackbar = useCallback((id) => {
-        setSnackbars((prev) => prev.filter((snackbar) => snackbar.id !== id));
-    }, []);
-    const actions = useMemo(() => ({
-        showSnackbar,
-        removeSnackbar,
-    }), [showSnackbar, removeSnackbar]);
-    return (_jsx(SnackbarActionsContext.Provider, { value: actions, children: _jsx(SnackbarStateContext.Provider, { value: snackbars, children: children }) }));
-};
-export const useSnackbar = () => {
-    const context = useContext(SnackbarActionsContext);
-    if (context === undefined) {
-        throw new Error("useSnackbar must be used within a SnackbarProvider");
-    }
-    return context;
-};
-export const useSnackbarState = () => {
-    const context = useContext(SnackbarStateContext);
-    if (context === undefined) {
-        throw new Error("useSnackbarState must be used within a SnackbarProvider");
-    }
-    return context;
-};

package/dist/contexts/ThemeContext.js

@@ -1,197 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useMemo, useState, } from "react";
-import { themes, defaultTheme } from "./presets";
-const ThemeContext = createContext(undefined);
-const toKebabCase = (value) => value.replace(/([A-Z])/g, "-$1").toLowerCase();
-const buildThemeResetStyles = (theme) => {
-    const cssVariables = {
-        "--flysoft-theme-name": theme.name,
-    };
-    Object.entries(theme.colors).forEach(([key, value]) => {
-        cssVariables[`--flysoft-${toKebabCase(key)}`] = value;
-    });
-    Object.entries(theme.shadows).forEach(([key, value]) => {
-        cssVariables[`--flysoft-shadow-${key}`] = value;
-    });
-    Object.entries(theme.radius).forEach(([key, value]) => {
-        cssVariables[`--flysoft-radius-${key}`] = value;
-    });
-    Object.entries(theme.spacing).forEach(([key, value]) => {
-        cssVariables[`--flysoft-spacing-${key}`] = value;
-    });
-    Object.entries(theme.fonts).forEach(([key, value]) => {
-        cssVariables[`--flysoft-font-${key}`] = value;
-    });
-    return {
-        color: theme.fonts.colorDefault ?? theme.colors.textPrimary,
-        //backgroundColor: theme.colors.bgDefault,
-        fontFamily: theme.fonts.default,
-        fontSize: theme.fonts.sizeDefault,
-        lineHeight: "1.5",
-        ...cssVariables,
-    };
-};
-export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, onThemeChange, }) => {
-    // Almacenar el tema inicial para poder resetear a él
-    const getInitialTheme = () => {
-        if (typeof initialTheme === "string") {
-            return themes[initialTheme] || defaultTheme;
-        }
-        return initialTheme;
-    };
-    const [currentTheme, setCurrentTheme] = useState(() => {
-        // Si forceInitialTheme es true, usar siempre el initialTheme
-        if (forceInitialTheme) {
-            return getInitialTheme();
-        }
-        // Try to get theme from localStorage
-        if (typeof window !== "undefined") {
-            const savedTheme = localStorage.getItem(storageKey);
-            if (savedTheme) {
-                if (themes[savedTheme]) {
-                    return themes[savedTheme];
-                }
-                // Try to parse as custom theme
-                try {
-                    const parsed = JSON.parse(savedTheme);
-                    if (parsed.name && parsed.colors) {
-                        return parsed;
-                    }
-                }
-                catch {
-                    // Invalid JSON, fallback to default
-                }
-            }
-        }
-        // Handle initialTheme prop
-        return getInitialTheme();
-    });
-    const [currentThemeName, setCurrentThemeName] = useState(currentTheme.name);
-    // Function to apply theme to CSS variables
-    const applyThemeToCSS = (theme) => {
-        if (typeof document === "undefined")
-            return;
-        const root = document.documentElement;
-        // Apply color variables
-        Object.entries(theme.colors).forEach(([key, value]) => {
-            const cssVarName = `--flysoft-${key
-                .replace(/([A-Z])/g, "-$1")
-                .toLowerCase()}`;
-            root.style.setProperty(cssVarName, value);
-        });
-        // Apply shadow variables
-        Object.entries(theme.shadows).forEach(([key, value]) => {
-            const cssVarName = `--flysoft-shadow-${key}`;
-            root.style.setProperty(cssVarName, value);
-        });
-        // Apply radius variables
-        Object.entries(theme.radius).forEach(([key, value]) => {
-            const cssVarName = `--flysoft-radius-${key}`;
-            root.style.setProperty(cssVarName, value);
-        });
-        // Apply spacing variables
-        Object.entries(theme.spacing).forEach(([key, value]) => {
-            const cssVarName = `--flysoft-spacing-${key}`;
-            root.style.setProperty(cssVarName, value);
-        });
-        // Apply font variables
-        Object.entries(theme.fonts).forEach(([key, value]) => {
-            const cssVarName = `--flysoft-font-${key}`;
-            root.style.setProperty(cssVarName, value);
-        });
-        // Set theme name as data attribute for CSS targeting
-        root.setAttribute("data-theme", theme.name);
-        // Apply background and text colors to body for better integration
-        const body = document.body;
-        if (body) {
-            //body.style.backgroundColor = theme.colors.bgDefault;
-            body.style.color = theme.colors.textPrimary;
-            body.style.fontFamily = theme.fonts.default;
-        }
-    };
-    // Function to set theme
-    const setTheme = (theme) => {
-        let newTheme;
-        if (typeof theme === "string") {
-            if (themes[theme]) {
-                newTheme = themes[theme];
-            }
-            else {
-                console.warn(`Theme "${theme}" not found, falling back to default`);
-                newTheme = defaultTheme;
-            }
-        }
-        else {
-            newTheme = theme;
-        }
-        setCurrentTheme(newTheme);
-        setCurrentThemeName(newTheme.name);
-        // Save to localStorage
-        if (typeof window !== "undefined") {
-            localStorage.setItem(storageKey, JSON.stringify(newTheme));
-        }
-        // Trigger external callback
-        onThemeChange?.(newTheme);
-        // Apply to CSS
-        applyThemeToCSS(newTheme);
-    };
-    // Function to update theme partially
-    const updateTheme = (updates) => {
-        setCurrentTheme((prev) => {
-            const newTheme = typeof updates === "function"
-                ? updates(prev)
-                : {
-                    ...prev,
-                    ...updates,
-                    colors: { ...prev.colors, ...updates.colors },
-                    shadows: { ...prev.shadows, ...updates.shadows },
-                    radius: { ...prev.radius, ...updates.radius },
-                    spacing: { ...prev.spacing, ...updates.spacing },
-                    fonts: { ...prev.fonts, ...updates.fonts },
-                };
-            // Save to localStorage
-            if (typeof window !== "undefined") {
-                localStorage.setItem(storageKey, JSON.stringify(newTheme));
-            }
-            // Trigger external callback
-            onThemeChange?.(newTheme);
-            return newTheme;
-        });
-    };
-    // Function to reset to initial theme (the one passed as initialTheme prop)
-    const resetToDefault = () => {
-        setTheme(getInitialTheme());
-    };
-    // Apply theme on mount and when theme changes
-    useEffect(() => {
-        applyThemeToCSS(currentTheme);
-    }, [currentTheme]);
-    // Check if current theme is dark
-    const isDark = currentTheme.name === "dark";
-    const themeResetStyles = useMemo(() => buildThemeResetStyles(currentTheme), [currentTheme]);
-    const value = {
-        theme: currentTheme,
-        setTheme,
-        updateTheme,
-        currentThemeName,
-        availableThemes: Object.keys(themes),
-        resetToDefault,
-        isDark,
-    };
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: "flysoft-theme-reset", style: themeResetStyles, "data-theme": currentTheme.name, children: children }) }));
-};
-// Hook to use theme context
-// eslint-disable-next-line react-refresh/only-export-components
-export const useTheme = () => {
-    const context = useContext(ThemeContext);
-    if (context === undefined) {
-        throw new Error("useTheme must be used within a ThemeProvider");
-    }
-    return context;
-};
-// Hook to check if theme context is available
-// eslint-disable-next-line react-refresh/only-export-components
-export const useThemeContext = () => {
-    const context = useContext(ThemeContext);
-    return context !== undefined;
-};

package/dist/contexts/index.js

@@ -1,13 +0,0 @@
-// Theme system exports
-export { ThemeProvider, useTheme, useThemeContext } from "./ThemeContext";
-export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverride";
-// Preset themes
-export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
-// Auth system exports
-export { AuthProvider, AuthContext } from "./AuthContext";
-// Crud system exports
-export { CrudProvider, CrudContext, useCrud } from "./CrudContext";
-// AppLayout system exports
-export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
-// Snackbar system exports
-export { SnackbarProvider, useSnackbar, useSnackbarState, } from "./SnackbarContext";