@m4l/graphics 0.1.19 → 0.1.21

package/src/contexts/HostThemeContext/index.tsx

@@ -1,85 +0,0 @@
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-import { CssBaseline } from '@mui/material';
-import {
-    ThemeOptions,
-    createTheme,
-    ThemeProvider as MUIThemeProvider,
-    StyledEngineProvider,
-} from '@mui/material/styles';
-
-// muis
-// hooks
-// utils
-// config
-// @type
-import { HostThemeContextType, HostThemeProviderProps } from './types';
-import { EmitEvents, useHostTools } from '@m4l/core';
-
-// ----------------------------------------------------------------------
-
-const HostThemeContext = createContext<HostThemeContextType | null>(null);
-
-function HostThemeProvider(props: HostThemeProviderProps) {
-    const { children, hostThemeOptions, fnComponentsOverrides, isMicroFrontEnd } = props;
-    const [finalThemeOptions, setFinalThemeOptions] = useState<ThemeOptions>(hostThemeOptions);
-    const { events_add_listener, events_remove_listener, events_emit } = useHostTools();
-    const [isFirstTime, setIsFirstTime] = useState(true);
-
-    const finalTheme = useMemo(() => {
-        const theme = createTheme(finalThemeOptions);
-        theme.components = fnComponentsOverrides(theme);
-        return theme;
-    }, [finalThemeOptions]);
-
-    const onUpdateOverrides = useCallback((newThemeOptions: ThemeOptions) => {
-        setFinalThemeOptions(newThemeOptions);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    //Matricular el cambio de tema si es
-    useEffect(() => {
-        if (isMicroFrontEnd) {
-            events_add_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
-        }
-        return () => {
-            if (isMicroFrontEnd) {
-                events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
-            }
-        };
-    }, []);
-
-    //Cuando cambie las opciones del tema debido al usuario
-    useEffect(() => {
-        if (isFirstTime) {
-            setIsFirstTime(false);
-            return;
-        }
-
-        if (!isMicroFrontEnd) {
-            setFinalThemeOptions(hostThemeOptions);
-            events_emit(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, hostThemeOptions);
-        }
-    }, [hostThemeOptions]);
-
-    // const updateHostThemeOptions = useCallback((newThemeOptions: ThemeOptions) => {
-    //     setFinalThemeOptions(newThemeOptions);
-    // }, []);
-
-    return (
-        <HostThemeContext.Provider
-            value={{
-                hostThemeOptions: finalThemeOptions,
-                fnComponentsOverrides,
-            }}
-        >
-            <StyledEngineProvider injectFirst>
-                <MUIThemeProvider theme={finalTheme}>
-                    <CssBaseline enableColorScheme />
-                    {children}
-                </MUIThemeProvider>
-            </StyledEngineProvider>
-        </HostThemeContext.Provider>
-    );
-}
-
-export { HostThemeProvider, HostThemeContext };

package/src/contexts/HostThemeContext/types.ts

@@ -1,16 +0,0 @@
-import type { ThemeOptions, Theme } from '@mui/material/styles';
-import type { ReactNode } from 'react';
-
-export type EventFunListener = (...args: any[]) => void;
-
-export interface HostThemeType {
-    hostThemeOptions: ThemeOptions;
-    fnComponentsOverrides: (theme: Theme) => any;
-}
-
-export interface HostThemeProviderProps extends HostThemeType {
-    isMicroFrontEnd: boolean;
-    children: ReactNode;
-}
-
-export type HostThemeContextType = HostThemeType;

package/src/contexts/LocalesContext/helper.ts

@@ -1,67 +0,0 @@
-import { BaseLocale, LocaleType, NetworkLocaleType } from './types';
-import type { Locale } from 'date-fns';
-import enLocale from 'date-fns/locale/en-US';
-
-export async function getLocaleFromNetwork(
-    locale: NetworkLocaleType,
-    host_static_assets: string,
-    environment_assets: string,
-): Promise<LocaleType> {
-    const stringLocale: string = joinLocale(locale);
-
-    const baseLocale: NetworkLocaleType = { ...locale };
-
-    let localeModule: Locale;
-    if (stringLocale === 'es') {
-        localeModule = (await import('date-fns/locale/es')).default as Locale; // Dynamic import
-    } else if (stringLocale === 'fr') {
-        localeModule = (await import('date-fns/locale/fr')).default as Locale; // Dynamic import
-    } else if (stringLocale === 'en-US') {
-        localeModule = enLocale; // Dynamic import
-    } else {
-        localeModule = enLocale; // Dynamic import
-        baseLocale.lang = 'en';
-        baseLocale.script = undefined;
-        baseLocale.region = 'US';
-        baseLocale.url_icon = `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/langs/lang_en.svg`;
-        baseLocale.name = 'English US*';
-    }
-
-    return {
-        ...baseLocale,
-        module: localeModule,
-        localeString: joinLocale(baseLocale),
-    }; // Dynamic import
-}
-
-export function joinLocale(baseLocale: BaseLocale): string {
-    let joinedLocale = baseLocale.lang;
-
-    if (baseLocale.script && baseLocale.script !== '') {
-        joinedLocale = joinedLocale + '-' + baseLocale.script;
-    }
-
-    if (baseLocale.region && baseLocale.region !== '') {
-        joinedLocale = joinedLocale + '-' + baseLocale.region;
-    }
-
-    return joinedLocale;
-}
-
-export function splitLocale(locale: string): BaseLocale {
-    try {
-        const lc = new Intl.Locale(locale);
-
-        return {
-            lang: lc.language || '',
-            script: lc.script,
-            region: lc.region,
-        };
-    } catch (error) {
-        return {
-            lang: 'en',
-            script: undefined,
-            region: 'US',
-        };
-    }
-}

package/src/contexts/LocalesContext/index.tsx

@@ -1,152 +0,0 @@
-/* eslint-disable import/no-duplicates */
-import { createContext, useState, useEffect, useCallback } from 'react';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider as MUILocalizationProvider } from '@mui/x-date-pickers';
-
-// import esLocale from 'date-fns/localeHost/es';
-//import frLocale from 'date-fns/localeHost/fr';
-
-import {
-    EmitEvents,
-    useEnvironment,
-    useHostTools,
-    useLocalStorageWithListener,
-    useNetwork,
-} from '@m4l/core';
-import { BaseLocale, LocalesProviderProps, LocaleType, LocalesContextProps } from './types';
-import { joinLocale, splitLocale } from './helper';
-
-// ----------------------------------------------------------------------
-
-const LocalesContext = createContext<LocalesContextProps | null>(null);
-
-function LocalesProvider(props: LocalesProviderProps) {
-    const { children, isMicroFrontEnd, localeHost, getLocaleFromNetwork } = props;
-
-    if (isMicroFrontEnd && !localeHost) {
-        throw Error('Must set localeHost in microfrontend');
-    }
-
-    if (!isMicroFrontEnd && !getLocaleFromNetwork) {
-        throw Error('Must set getLocaleFromNetwork in host');
-    }
-
-    const { domain_token, host_static_assets, environment_assets } = useEnvironment();
-    const { networkOperation } = useNetwork();
-
-    const { events_add_listener, events_remove_listener, events_emit } = useHostTools();
-
-    const [currentLocale, setCurrentLocale] = useState<LocaleType | undefined>(() => {
-        if (isMicroFrontEnd) {
-            return localeHost;
-        }
-        return undefined;
-    });
-
-    const [nextLocaleString, setNextLocalString] = useLocalStorageWithListener<string>(
-        'localeHost',
-        navigator.language,
-    );
-
-    const [currentLocaleString, setCurrentLocalString] = useState<string>('');
-
-    const onUpdateLocale = useCallback((newLocale: LocaleType) => {
-        setCurrentLocale(newLocale);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    //Matricular el cambio de localee si es microfrontend
-    useEffect(() => {
-        if (isMicroFrontEnd) {
-            events_add_listener(EmitEvents.EMMIT_EVENT_HOST_LOCALE_CHANGE, onUpdateLocale);
-        }
-        console.log('useEffect LocalesProvider');
-        return () => {
-            if (isMicroFrontEnd) {
-                events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_LOCALE_CHANGE, onUpdateLocale);
-            }
-        };
-    }, []);
-
-    useEffect(() => {
-        let mounted = true;
-
-        if (isMicroFrontEnd) {
-            return;
-        }
-        if (!getLocaleFromNetwork) {
-            return;
-        }
-
-        if (nextLocaleString === currentLocaleString && nextLocaleString !== '') {
-            return;
-        }
-
-        networkOperation({
-            method: 'POST',
-            endPoint: `na/locales`,
-            data: { ...splitLocale(nextLocaleString), domain_token },
-        })
-            .then((response: any) => {
-                if (mounted) {
-                    //getLocale(response.data, host_static_assets, environment_assets).then(
-                    getLocaleFromNetwork(
-                        response.data,
-                        host_static_assets,
-                        environment_assets,
-                    ).then(newLocale => {
-                        setCurrentLocale(newLocale);
-                        setCurrentLocalString(newLocale.localeString);
-
-                        if (nextLocaleString !== newLocale.localeString) {
-                            //Solo si cambia
-                            setNextLocalString(newLocale.localeString);
-                        }
-                        //Notificar a los microfrontends, que ha cambiado el locale
-                        events_emit(EmitEvents.EMMIT_EVENT_HOST_LOCALE_CHANGE, newLocale);
-                    });
-                }
-            })
-            .finally(() => {});
-
-        return function cleanUp() {
-            mounted = false;
-        };
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nextLocaleString]);
-
-    if (!currentLocale) {
-        return <div></div>;
-    }
-    // const [locales];
-
-    const onChangeLocale = (newLocale: BaseLocale) => {
-        if (
-            newLocale.lang !== currentLocale.lang ||
-            newLocale.script !== currentLocale.script ||
-            newLocale.region !== currentLocale.region
-        ) {
-            setNextLocalString(joinLocale(newLocale));
-        }
-    };
-
-    return (
-        <LocalesContext.Provider
-            value={{
-                currentLocale,
-                onChangeLocale,
-            }}
-        >
-            <MUILocalizationProvider
-                dateAdapter={AdapterDateFns}
-                adapterLocale={currentLocale.module}
-                dateFormats={{ hours24h: '23' }}
-            >
-                {children}
-            </MUILocalizationProvider>
-        </LocalesContext.Provider>
-    );
-}
-
-export { LocalesProvider, LocalesContext };

package/src/contexts/LocalesContext/types.ts

@@ -1,37 +0,0 @@
-import { ReactNode } from 'react';
-import type { Locale } from 'date-fns';
-
-export type SupportedLocales = 'en-US' | 'es' | 'fr';
-
-export interface BaseLocale {
-    lang: string;
-    script?: string;
-    region?: string;
-}
-
-export interface NetworkLocaleType extends BaseLocale {
-    name: string;
-    url_icon: string;
-}
-
-export interface LocaleType extends NetworkLocaleType {
-    module: Locale;
-    localeString: string;
-}
-
-export type LocalesProviderProps = {
-    isMicroFrontEnd: boolean;
-    localeHost?: LocaleType; //undefined en host
-    getLocaleFromNetwork?: (
-        locale: NetworkLocaleType,
-        host_static_assets: string,
-        environment_assets: string,
-    ) => Promise<LocaleType>;
-    children: ReactNode;
-};
-
-export type LocalesContextProps = {
-    currentLocale?: LocaleType;
-    // currentLocaleString: string;
-    onChangeLocale: (newLocaleString: BaseLocale) => void;
-};

package/src/contexts/index.ts

@@ -1,15 +0,0 @@
-export * from './FormatterContext';
-export type {
-    Formatters,
-    DateFormatter,
-    NumberFormatter,
-    CurrencyFormatter,
-} from './FormatterContext/types';
-
-export * from './LocalesContext';
-export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
-export { getLocaleFromNetwork } from './LocalesContext/helper';
-
-export * from './HostThemeContext';
-
-// export { HelmetProvider } from 'react-helmet-async';

package/src/hooks/index.ts

@@ -1,8 +0,0 @@
-export { useFirstRender } from './useFirstRender';
-export { useFormatter } from './useFormatter';
-export { useHostTheme } from './useHostTheme';
-export { useIsMountedRef } from './useIsMountedRef';
-export { useLocales } from './useLocales';
-export { useOffSetTop } from './useOffSetTop';
-
-export { useResponsive, useResponsiveDesktop } from './useResponsive';

package/src/hooks/useFirstRender/index.ts

@@ -1,17 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-// ----------------------------------------------------------------------
-
-export function useFirstRender(dependencies: Array<any> = []) {
-    const isMounted = useRef(true);
-
-    useEffect(() => {
-        isMounted.current = false;
-
-        return () => {
-            isMounted.current = true;
-        };
-    }, dependencies);
-
-    return isMounted.current;
-}

package/src/hooks/useFormatter/index.ts

@@ -1,10 +0,0 @@
-import { useContext } from 'react';
-import { FormatterContext } from '../../contexts/FormatterContext';
-
-// ----------------------------------------------------------------------
-export const useFormatter = () => {
-    const context = useContext(FormatterContext);
-    if (!context) throw new Error('useFormatter context must be use inside FormatterProvider');
-
-    return context;
-};

package/src/hooks/useHostTheme/index.ts

@@ -1,10 +0,0 @@
-import { useContext } from 'react';
-import { HostThemeContext } from '../../contexts/HostThemeContext';
-
-// ----------------------------------------------------------------------
-export const useHostTheme = () => {
-    const context = useContext(HostThemeContext);
-    if (!context) throw new Error('useHostTheme context must be use inside HostThemeProvider');
-
-    return context;
-};

package/src/hooks/useIsMountedRef/index.ts

@@ -1,16 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-// ----------------------------------------------------------------------
-
-export function useIsMountedRef() {
-    const isMounted = useRef(true);
-
-    useEffect(
-        () => () => {
-            isMounted.current = false;
-        },
-        [],
-    );
-
-    return isMounted;
-}

package/src/hooks/useLocales/index.ts

@@ -1,10 +0,0 @@
-import { useContext } from 'react';
-import { LocalesContext } from '../../contexts/LocalesContext';
-
-// ----------------------------------------------------------------------
-export const useLocales = () => {
-    const context = useContext(LocalesContext);
-    if (!context) throw new Error('useLocales context must be use inside LocalesProvider');
-
-    return context;
-};

package/src/hooks/useOffSetTop.ts

@@ -1,26 +0,0 @@
-import { useState, useEffect } from 'react';
-
-// ----------------------------------------------------------------------
-
-export function useOffSetTop(top: number) {
-    const [offsetTop, setOffSetTop] = useState(false);
-    const isTop = top || 100;
-
-    useEffect(() => {
-        window.onscroll = () => {
-            if (window.pageYOffset > isTop) {
-                setOffSetTop(true);
-            } else {
-                setOffSetTop(false);
-            }
-        };
-        return () => {
-            window.onscroll = null;
-        };
-    }, [isTop]);
-
-    return offsetTop;
-}
-
-// Usage
-// const offset = useOffSetTop(100);

package/src/hooks/useResponsive/index.ts

@@ -1,44 +0,0 @@
-// @mui
-import { Breakpoint } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-
-// ----------------------------------------------------------------------
-
-type Query = 'up' | 'down' | 'between' | 'only';
-type Key = Breakpoint | number;
-type Start = Breakpoint | number;
-type End = Breakpoint | number;
-
-export function useResponsive(query: Query, key?: Key, start?: Start, end?: End) {
-    const theme = useTheme();
-
-    const mediaUp = useMediaQuery(theme.breakpoints.up(key as Key));
-
-    const mediaDown = useMediaQuery(theme.breakpoints.down(key as Key));
-
-    const mediaBetween = useMediaQuery(theme.breakpoints.between(start as Start, end as End));
-
-    const mediaOnly = useMediaQuery(theme.breakpoints.only(key as Breakpoint));
-
-    if (query === 'up') {
-        return mediaUp;
-    }
-
-    if (query === 'down') {
-        return mediaDown;
-    }
-
-    if (query === 'between') {
-        return mediaBetween;
-    }
-
-    if (query === 'only') {
-        return mediaOnly;
-    }
-}
-
-export function useResponsiveDesktop() {
-    const isDesktop = useResponsive('up', 'sm');
-    return isDesktop;
-}

package/src/index.ts

@@ -1,25 +0,0 @@
-export * from './components';
-export * from './contexts';
-export * from './hooks';
-
-export type { CustomShadowOptions } from './theme/shadows';
-export type { GradientsPaletteOptions } from './theme/palette';
-export type { ChartPaletteOptions } from './theme/palette';
-export type { GridPaletteOptions } from './theme/palette';
-
-export { defaultThemeOptions } from './theme/defaultThemeOptions';
-export { shadows, customShadows } from './theme/shadows';
-export * from './theme/stretch';
-export { palette, type ColorSchema } from './theme/palette';
-export { getColorPresets, colorPresets, defaultPreset } from './utils/getColorPresets';
-export { getFontValue as GetFontValue } from './utils/getFontValue';
-export * from './utils/strings';
-
-export { default as fnComponentsOverrides } from './theme/overrides';
-
-//types
-export type { HostThemeType } from './types';
-
-//anchoEl
-
-export * from './utils/anchorEl';

package/src/theme/breakpoints.ts

@@ -1,13 +0,0 @@
-// ----------------------------------------------------------------------
-
-export const breakpoints = {
-    values: {
-        xs: 0,
-        sm: 600,
-        md: 900,
-        lg: 1200,
-        xl: 1536,
-    },
-};
-
-export default breakpoints;

package/src/theme/defaultThemeOptions.ts

@@ -1,42 +0,0 @@
-import { alpha, ThemeOptions } from '@mui/material/styles';
-import { typography } from './typography';
-import { palette, GREY } from './palette';
-import shadows, { customShadows } from './shadows';
-
-import getColorPresets from '../utils/getColorPresets';
-import { breakpoints } from './breakpoints';
-
-export const defaultThemeOptions: ThemeOptions = {
-    typography,
-    breakpoints: breakpoints,
-    shadows: shadows.light,
-    customShadows: {
-        ...customShadows.light,
-        primary: `0 8px 16px 0 ${alpha(getColorPresets('default').main, 0.24)}`,
-    },
-
-    palette: {
-        ...palette.light,
-        primary: {
-            lighter: '#283829',
-            light: '#26372b',
-            main: '#00AB55',
-            dark: '#007B55',
-            darker: '#005249',
-            LightSelected: '#EBF9F1',
-            LightSelectedHover: '#D6F2E3',
-            DarkSelected: '#142827',
-            DarkSelectedHover: '#12342B',
-        },
-
-        text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
-        secondary: {
-            main: '#34ac4e',
-        },
-        // background: {
-        //   header: '#cfd7e0'
-        // },
-
-        // grid: { sectionHeader: '#F6F7F9', divider: '#EDEFF2', rowHover: '#F6F7F9' }
-    },
-};