@m4l/graphics 0.1.18 → 0.1.19

package/src/contexts/LocalesContext/index.tsx

@@ -0,0 +1,152 @@
+/* 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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/src/hooks/useLocales/index.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,44 @@
+// @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

@@ -0,0 +1,25 @@
+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

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

package/src/theme/defaultThemeOptions.ts

@@ -0,0 +1,42 @@
+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' }
+    },
+};

package/src/theme/overrides/Accordion.ts

@@ -0,0 +1,85 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Accordion(theme: Theme) {
+    return {
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: theme.palette.background.default,
+                    width: '100%',
+                    marginTop: '0px',
+                    marginBottom: theme.spacing(1.5),
+                    '&.Mui-expanded': {
+                        marginTop: '0px',
+                        marginBottom: theme.spacing(1.5),
+                    },
+                    border: '0px solid transparent',
+
+                    '&.Mui-disabled': {
+                        backgroundColor: 'transparent',
+                    },
+                    '&::before': {
+                        content: 'none',
+                    },
+                },
+            },
+        },
+        MuiAccordionDetails: {
+            styleOverrides: {
+                root: {
+                    padding: `0px ${theme.spacing(0)}`,
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    borderRadius: theme.spacing(0.5),
+
+                    height: theme.spacing(4.5),
+                    minHeight: theme.spacing(4.5),
+                    backgroundColor: theme.palette.background.header,
+                    paddingLeft: theme.spacing(2),
+                    paddingRight: theme.spacing(2),
+                    marginBottom: '0px',
+
+                    '&.Mui-expanded': {
+                        height: theme.spacing(4.5),
+                        minHeight: theme.spacing(4.5),
+                        borderRadius: `${theme.spacing(0.5)} ${theme.spacing(0.5)} 0px 0px`,
+                    },
+                    '&.Mui-disabled': {
+                        opacity: 1,
+                        color: theme.palette.action.disabled,
+                        '& .MuiTypography-root': {
+                            color: 'inherit',
+                        },
+                    },
+                },
+                expandIconWrapper: {
+                    color: theme.palette.action.active,
+                    height: 20,
+                    width: 20,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    '& > svg': {
+                        height: 12,
+                        width: 12,
+                    },
+                },
+                content: {
+                    ...theme.typography.subtitle2,
+                    margin: '0px',
+                    // '& .MuiTypography-root': {
+
+                    // },
+                    '&.Mui-expanded': {
+                        margin: '0px',
+                    },
+                },
+            },
+        },
+    };
+}

package/src/theme/overrides/Alert.tsx

@@ -0,0 +1,74 @@
+// @mui
+import { Theme } from '@mui/material/styles';
+// theme
+import { ColorSchema } from '../palette';
+//
+import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function Alert(theme: Theme) {
+    const isLight = theme.palette.mode === 'light';
+
+    const standardStyle = (color: ColorSchema) => ({
+        color: theme.palette[color][isLight ? 'darker' : 'lighter'],
+        backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],
+        '& .MuiAlert-icon': {
+            color: theme.palette[color][isLight ? 'main' : 'light'],
+        },
+    });
+
+    const filledStyle = (color: ColorSchema) => ({
+        color: theme.palette[color].contrastText,
+    });
+
+    const outlinedStyle = (color: ColorSchema) => ({
+        color: theme.palette[color][isLight ? 'darker' : 'lighter'],
+        border: `solid 1px ${theme.palette[color][isLight ? 'light' : 'dark']}`,
+        backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],
+        '& .MuiAlert-icon': {
+            color: theme.palette[color][isLight ? 'main' : 'light'],
+        },
+    });
+
+    return {
+        MuiAlert: {
+            defaultProps: {
+                iconMapping: {
+                    info: <InfoIcon />,
+                    success: <SuccessIcon />,
+                    warning: <WarningIcon />,
+                    error: <ErrorIcon />,
+                },
+            },
+
+            styleOverrides: {
+                message: {
+                    '& .MuiAlertTitle-root': {
+                        marginBottom: theme.spacing(0.5),
+                    },
+                },
+                action: {
+                    '& button:not(:first-of-type)': {
+                        marginLeft: theme.spacing(1),
+                    },
+                },
+
+                standardInfo: standardStyle('info'),
+                standardSuccess: standardStyle('success'),
+                standardWarning: standardStyle('warning'),
+                standardError: standardStyle('error'),
+
+                filledInfo: filledStyle('info'),
+                filledSuccess: filledStyle('success'),
+                filledWarning: filledStyle('warning'),
+                filledError: filledStyle('error'),
+
+                outlinedInfo: outlinedStyle('info'),
+                outlinedSuccess: outlinedStyle('success'),
+                outlinedWarning: outlinedStyle('warning'),
+                outlinedError: outlinedStyle('error'),
+            },
+        },
+    };
+}

package/src/theme/overrides/Autocomplete.ts

@@ -0,0 +1,31 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Autocomplete(theme: Theme) {
+    return {
+        MuiAutocomplete: {
+            styleOverrides: {
+                root: {
+                    '& .MuiInputBase-root': {
+                        padding: '0 39px 0px 0',
+                    },
+                    input: {
+                        padding: `${theme.spacing(1.5, 1.5)}!important`,
+                    },
+                },
+                paper: {
+                    boxShadow: theme.customShadows.dropdown,
+                },
+                listbox: {
+                    padding: theme.spacing(0, 1),
+                    '& .MuiAutocomplete-option': {
+                        padding: theme.spacing(1),
+                        margin: theme.spacing(1, 0),
+                        borderRadius: theme.shape.borderRadius,
+                    },
+                },
+            },
+        },
+    };
+}

package/src/theme/overrides/Avatar.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Avatar(theme: Theme) {
+    return {
+        MuiAvatar: {
+            styleOverrides: {
+                colorDefault: {
+                    color: theme.palette.text.secondary,
+                    backgroundColor: theme.palette.grey[400],
+                },
+            },
+        },
+        MuiAvatarGroup: {
+            styleOverrides: {
+                avatar: {
+                    fontSize: 16,
+                    fontWeight: theme.typography.fontWeightMedium,
+                    '&:first-of-type': {
+                        fontSize: 14,
+                        color: theme.palette.primary.main,
+                        backgroundColor: theme.palette.primary.lighter,
+                    },
+                },
+            },
+        },
+    };
+}