@m4l/layouts 0.1.25 → 0.1.28

package/src/components/MFIsolationApp/index.tsx

@@ -1,164 +0,0 @@
-// react
-import { useCallback, useEffect, useMemo } from 'react';
-import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
-
-import { toast } from 'react-toastify';
-
-//m4l
-import { getLocaleFromNetwork, LocalesProvider } from '@m4l/graphics';
-import { AuthProvider } from '../../contexts/AuthContext';
-import {
-    axiosOperation,
-    EnvironmentProvider,
-    EnvironmentType,
-    EventListenerBase,
-    HostToolsProvider,
-    HostToolsType,
-    Maybe,
-    NetworkProvider,
-} from '@m4l/core';
-// external components
-import { createBrowserHistory } from 'history';
-import EventEmitter from 'eventemitter3';
-// mui
-// internal components
-// hooks /providers
-
-// sub comoponents
-import MFAuthApp from './subcomponents/MFAuthApp';
-// types
-import { MFIsolationAppProps } from './types';
-// network
-
-// config
-
-// utils
-
-// css
-import NProgress from 'nprogress';
-import BaseModule from '../BaseModule';
-import { AreasProvider } from '@m4l/components';
-
-const history = createBrowserHistory({ window });
-
-export function MFIsolationApp(props: MFIsolationAppProps) {
-    const {
-        children,
-        user,
-        pwd,
-        host_api_local,
-        host_api_remote,
-        host_static_assets,
-        environment_assets,
-        moduleId,
-        skeletonFlags,
-        moduleNameField,
-        privileges,
-        componentsDictionary,
-        onLoad,
-        activeAreasNetwork = false,
-    } = props;
-
-    const eventEmitter = useMemo(() => new EventEmitter(), []);
-
-    const events_add_listener = useCallback(
-        (eventName: string, handler: EventListenerBase) => {
-            eventEmitter.on(eventName, handler);
-        },
-        [eventEmitter],
-    );
-
-    const events_remove_listener = useCallback(
-        (eventName: string, handler: Maybe<EventListenerBase>) => {
-            if (handler === null) {
-                eventEmitter.removeListener(eventName);
-                return;
-            }
-            eventEmitter.removeListener(eventName, handler);
-        },
-        [eventEmitter],
-    );
-    const events_emit = useCallback(
-        (eventName: string, arg: any) => {
-            eventEmitter.emit(eventName, arg);
-        },
-        [eventEmitter],
-    );
-
-    const startProgress = () => {
-        NProgress.configure({
-            showSpinner: true,
-        });
-
-        NProgress.start();
-    };
-
-    const stopProgress = () => {
-        NProgress.done();
-    };
-
-    const environment: EnvironmentType = useMemo(
-        () => ({
-            host: '',
-            isLocalhost: true,
-            domain_token: 'lab1',
-            host_api_local,
-            host_api_remote,
-            host_static_assets,
-            environment_assets,
-        }),
-        [],
-    );
-
-    const hostTools: HostToolsType = useMemo(
-        () => ({
-            history,
-            toast,
-            startProgress,
-            stopProgress,
-            events_add_listener,
-            events_remove_listener,
-            events_emit,
-        }),
-        [],
-    );
-
-    useEffect(() => {
-        console.log('useEffect IsolationApp');
-    }, []);
-    return (
-        <EnvironmentProvider {...environment}>
-            <HostToolsProvider {...hostTools}>
-                <NetworkProvider axiosOperation={axiosOperation}>
-                    <HistoryRouter history={history}>
-                        <LocalesProvider
-                            isMicroFrontEnd={false}
-                            getLocaleFromNetwork={getLocaleFromNetwork}
-                        >
-                            <AuthProvider>
-                                <MFAuthApp user={user} pwd={pwd}>
-                                    <BaseModule
-                                        moduleId={moduleId}
-                                        privileges={privileges}
-                                        skeletonFlags={skeletonFlags}
-                                        componentsDictionary={componentsDictionary}
-                                        moduleNameField={moduleNameField}
-                                    >
-                                        <AreasProvider
-                                            onLoad={onLoad}
-                                            activeAreasNetwork={activeAreasNetwork}
-                                        >
-                                            {children}
-                                        </AreasProvider>
-                                    </BaseModule>
-                                </MFAuthApp>
-                            </AuthProvider>
-                        </LocalesProvider>
-                    </HistoryRouter>
-                </NetworkProvider>
-            </HostToolsProvider>
-        </EnvironmentProvider>
-    );
-}
-
-export default MFIsolationApp;

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/index.tsx

@@ -1,98 +0,0 @@
-// react
-import { useEffect } from 'react';
-import { format } from 'date-fns';
-//m4l
-
-import {
-    defaultThemeOptions,
-    fnComponentsOverrides,
-    FormatterProvider,
-    HostThemeProvider,
-    // ProgressBarStyle,
-} from '@m4l/graphics';
-// external components
-
-// mui
-
-// internal components
-
-// hooks /providers
-
-// sub comoponents
-
-// types
-
-// network
-
-// config
-
-// utils
-
-// css
-
-import { useAuth } from '../../../../hooks/useAuth';
-import { MFAuthAppProps } from './types';
-import { ToastContainer } from 'react-toastify';
-import { DomainCountry, DomainCountryProvider } from '@m4l/core';
-
-export function MFAuthApp(props: MFAuthAppProps) {
-    const { children, user, pwd } = props;
-    const { isAuthenticated, isInitialized, login, user: authUser } = useAuth();
-
-    useEffect(() => {
-        // Atenticarse si no lo logro en el paso anterior dado por el efecto de AuthProvider
-
-        if (isInitialized && isAuthenticated === false) {
-            console.log('useEffect MFAuthApp Login');
-            login(user, pwd, false);
-        }
-    }, [isInitialized, isAuthenticated]);
-
-    if (!isAuthenticated) return <div>Pendiente x atenticar</div>;
-
-    const domianCountry: DomainCountry = {
-        id: 1,
-        currency: 'USD',
-        currency_decimal_digits: 2,
-        decimal_symbol: '.',
-        thousands_symbol: ',',
-    };
-
-    if (authUser?.domain_country) {
-        domianCountry.id = authUser?.domain_country.id ?? domianCountry.id;
-        domianCountry.currency = authUser?.domain_country.currency ?? domianCountry.currency;
-        domianCountry.currency_decimal_digits =
-            authUser?.domain_country.currency_decimal_digits ??
-            domianCountry.currency_decimal_digits;
-        domianCountry.decimal_symbol =
-            authUser?.domain_country.decimal_symbol ?? domianCountry.decimal_symbol;
-        domianCountry.thousands_symbol =
-            authUser?.domain_country?.thousands_symbol ?? domianCountry.thousands_symbol;
-    }
-
-    return (
-        <HostThemeProvider
-            hostThemeOptions={defaultThemeOptions}
-            fnComponentsOverrides={fnComponentsOverrides}
-            isMicroFrontEnd={true}
-        >
-            <ToastContainer />
-            <DomainCountryProvider {...domianCountry} isMicroFrontEnd={false}>
-                <FormatterProvider
-                    isMicroFrontEnd={false}
-                    dateFormatter={{
-                        formatDate: format,
-                    }}
-                    currencyFormatter={{
-                        code: domianCountry.currency,
-                        decimalDigits: domianCountry.currency_decimal_digits,
-                    }}
-                >
-                    {children}
-                </FormatterProvider>
-            </DomainCountryProvider>
-        </HostThemeProvider>
-    );
-}
-
-export default MFAuthApp;

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/types.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export type MFAuthAppProps = {
-    user: string;
-    pwd: string;
-    children: ReactNode;
-};

package/src/components/MFIsolationApp/types.ts

@@ -1,12 +0,0 @@
-import { BaseModuleProps } from '../BaseModule/types';
-
-export type MFIsolationAppProps = BaseModuleProps & {
-    user: string;
-    pwd: string;
-    host_api_local: string;
-    host_api_remote: string;
-    host_static_assets: string;
-    environment_assets: string;
-    onLoad: () => void;
-    activeAreasNetwork?: boolean;
-};

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export { MFIsolationApp } from './MFIsolationApp';
-export { MFHostApp } from './MFHostApp';
-export { BaseModule } from './BaseModule';
-
-export type { ByHostProps } from './MFHostApp/types';

package/src/contexts/AuthContext/index.tsx

@@ -1,189 +0,0 @@
-// react
-import { createContext, useEffect, useReducer } from 'react';
-// m4l
-import {
-    getLocalStorage,
-    setLocalStorage,
-    useEnvironment,
-    useHostTools,
-    useLocalStorageWithListener,
-    useNetwork,
-} from '@m4l/core';
-// utils
-
-// types
-
-import type { AuthProviderProps, AuthState, SessionActions, SessionContextType } from './types';
-
-// constants
-import { EnumTypes } from './types';
-import { EmitEvents } from '@m4l/core';
-
-const initialState: AuthState = {
-    isAuthenticated: false,
-    isInitialized: false,
-    user: null,
-};
-
-const JWTReducer = (state: AuthState, action: SessionActions) => {
-    switch (action.type) {
-        case 'INITIALIZE':
-            return {
-                isAuthenticated: action.payload.isAuthenticated,
-                isInitialized: true,
-                user: action.payload.user,
-            };
-        case 'LOGIN':
-            return {
-                ...state,
-                isAuthenticated: true,
-                user: action.payload.user,
-            };
-        case 'LOGOUT':
-            return {
-                ...state,
-                isAuthenticated: false,
-                user: null,
-            };
-
-        default:
-            return state;
-    }
-};
-
-const AuthContext = createContext<SessionContextType | null>(null);
-
-// ----------------------------------------------------------------------
-
-function dispatchInitial(dispatch: React.Dispatch<SessionActions>) {
-    dispatch({
-        type: EnumTypes.Initial,
-        payload: {
-            isAuthenticated: false,
-            user: null,
-        },
-    });
-}
-
-function AuthProvider(props: AuthProviderProps) {
-    const { children } = props;
-    const [state, dispatch] = useReducer(JWTReducer, initialState);
-    const { events_add_listener } = useHostTools();
-    const { networkOperation } = useNetwork();
-    const { domain_token } = useEnvironment();
-    const [nextValSession, setNextValSession] = useLocalStorageWithListener<string>(
-        //Variable para saber si ha cambiado la session en otro navegador
-        'vSession',
-        new Date().getTime() + '',
-    );
-
-    useEffect(() => {
-        //Verifica si el usuario esta logueado
-        //Si es por primera vez (No hay localstorage) se envía el lenguage del navegador
-
-        const initialize = async () => {
-            networkOperation({
-                method: 'GET',
-                endPoint: `auth/login`,
-                parms: { user_data: true },
-                checkUnAuthorized: false,
-            })
-                .then(response => {
-                    // const user_logged: User = response.user;
-
-                    dispatch({
-                        type: EnumTypes.Initial,
-                        payload: {
-                            isAuthenticated: true,
-                            user: response.user,
-                        },
-                    });
-                    //requintar el localstorage por si cambia externamente
-                    const useSaved = getLocalStorage('userData', {
-                        email: response.user.email,
-                        remember: true,
-                    });
-
-                    if (useSaved?.email !== response.user.email) {
-                        //Si cambiaron el usuario
-                        setLocalStorage('userData', { email: response.user.email }, true);
-                    }
-                })
-                .catch(() => {
-                    //No está logueado
-                    dispatchInitial(dispatch);
-                });
-        };
-
-        initialize();
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nextValSession]);
-
-    const login = async (email: string, password: string, remember: boolean) => {
-        await networkOperation({
-            endPoint: `auth/login`,
-            method: 'POST',
-            data: {
-                email,
-                password,
-                domain_token,
-            },
-        }).then(response => {
-            const user = response.data;
-
-            if (remember) {
-                setLocalStorage('userData', { email, remember });
-            } else {
-                setLocalStorage('userData', { email: '', remember });
-            }
-
-            dispatch({
-                type: EnumTypes.Login,
-                payload: {
-                    user,
-                },
-            });
-            setNextValSession(new Date().getTime() + '');
-        });
-    };
-
-    const logout = async (isAuthenticated: boolean) => {
-        if (isAuthenticated) {
-            await networkOperation({
-                endPoint: `auth/logout`,
-                method: 'POST',
-            });
-        }
-        dispatch({ type: EnumTypes.Logout });
-        setNextValSession(new Date().getTime() + '');
-    };
-
-    const onNetserviceUnautorized = () => {
-        logout(false);
-    };
-
-    useEffect(() => {
-        //Verifica si el usuario esta logueado
-
-        events_add_listener(
-            EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED,
-            onNetserviceUnautorized,
-        );
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return (
-        <AuthContext.Provider
-            value={{
-                ...state,
-                login,
-                logout,
-            }}
-        >
-            {children}
-        </AuthContext.Provider>
-    );
-}
-
-export { AuthContext, AuthProvider };

package/src/contexts/AuthContext/types.ts

@@ -1,65 +0,0 @@
-import { DomainCountry, Maybe } from '@m4l/core';
-import { ReactNode } from 'react';
-
-// eslint-disable-next-line no-shadow
-export enum EnumTypes {
-    Initial = 'INITIALIZE',
-    Login = 'LOGIN',
-    Logout = 'LOGOUT',
-}
-
-export type AuthProviderProps = {
-    children: ReactNode;
-};
-
-export type ActionMap<M extends { [index: string]: any }> = {
-    [Key in keyof M]: M[Key] extends undefined
-        ? {
-              type: Key;
-          }
-        : {
-              type: Key;
-              payload: M[Key];
-          };
-};
-
-export type SessionAuthPayload = {
-    [EnumTypes.Initial]: {
-        isAuthenticated: boolean;
-        user: AuthUser;
-    };
-    [EnumTypes.Login]: {
-        user: AuthUser;
-    };
-    [EnumTypes.Logout]: undefined;
-};
-
-export type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
-
-// export type AuthStoreState = {
-//     user: User;
-//     remember?: boolean;
-// };
-
-export interface User {
-    email: string;
-    id: number;
-    first_name: string;
-    last_name: string;
-    account_id: number;
-    domain_country: DomainCountry;
-    avatar_url?: Maybe<string>;
-}
-
-export type AuthUser = Maybe<User>;
-
-export type AuthState = {
-    isAuthenticated: boolean;
-    isInitialized: boolean;
-    user: AuthUser;
-};
-
-export interface SessionContextType extends AuthState {
-    login: (email: string, password: string, remember: boolean) => object | undefined;
-    logout: (isAuthenticated: boolean) => Promise<void>;
-}

package/src/contexts/index.ts

@@ -1 +0,0 @@
-export * from './AuthContext';

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from './useMasterDetail';
-
-export * from './useAuth';
-
-export * from './useModule';

package/src/hooks/useAuth/index.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { AuthContext } from '../../contexts/AuthContext';
-
-export const useAuth = () => {
-    const context = useContext(AuthContext);
-
-    if (!context) throw new Error('Auth context must be use inside AuthProvider');
-
-    return context;
-};
-
-export default useAuth;

package/src/hooks/useMasterDetail/index.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { MasterDetailContext } from '../../layouts/MasterDetailLayout/contexts/MasterDetailContext';
-
-// ----------------------------------------------------------------------
-
-export const useMasterDetail = () => useContext(MasterDetailContext);

package/src/hooks/useModule/index.ts

@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { ModuleContext } from '../../layouts/ModuleLayout/contexts/ModuleContext';
-
-// ----------------------------------------------------------------------
-export const useModule = () => {
-    const context = useContext(ModuleContext);
-
-    if (!context) throw new Error('useModule context must be use inside ModuleContext');
-
-    return context;
-};
-
-export default useModule;

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './components';
-
-export * from './contexts';
-
-export * from './layouts';
-
-export * from './hooks';

package/src/layouts/MasterDetailLayout/components/ButtonDetail/index.tsx

@@ -1,38 +0,0 @@
-// react
-
-// mui
-import { Button } from '@mui/material';
-import { ComponentActionProps } from '@m4l/components';
-import { useMasterDetail } from '../../../../hooks/useMasterDetail';
-
-// external libraries
-
-// componentes estilados
-
-// sub components
-
-// dictionary
-
-// context
-
-// hooks
-
-// types
-
-// constants
-
-export function ButtonDetail(props: ComponentActionProps) {
-    const { masterSelection } = useMasterDetail();
-    const { onClick, description } = props;
-
-    return (
-        <Button
-            key="miDetail"
-            onClick={onClick}
-            variant="outlined"
-            disabled={masterSelection === undefined ? true : false}
-        >
-            {description}
-        </Button>
-    );
-}

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.tsx

@@ -1,34 +0,0 @@
-// react
-import { createContext, useState } from 'react';
-import { voidFunction } from '@m4l/core';
-
-// types
-import { MasterDetailContextProps, MasterDetailProviderProps, MasterSelecion } from './types';
-
-const initialState: MasterDetailContextProps = {
-    masterSelection: undefined,
-    onChangeMasterSelection: voidFunction,
-};
-
-const MasterDetailContext = createContext<MasterDetailContextProps>(initialState);
-
-// ----------------------------------------------------------------------
-
-function MasterDetailProvider(props: MasterDetailProviderProps) {
-    const { children } = props;
-
-    const [masterSelection, setMasterSelection] = useState<MasterSelecion>(undefined);
-
-    return (
-        <MasterDetailContext.Provider
-            value={{
-                masterSelection,
-                onChangeMasterSelection: setMasterSelection,
-            }}
-        >
-            {children}
-        </MasterDetailContext.Provider>
-    );
-}
-
-export { MasterDetailProvider, MasterDetailContext };

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-
-export type MasterSelecion = any | any[] | undefined;
-
-export interface MasterDetailContextStateProps {
-    masterSelection?: MasterSelecion;
-    // splitPosition?: SplitPosition;
-}
-
-export interface MasterDetailProviderProps {
-    // masterSelection: MasterSelecion;
-    // setMasterSelection: (newMasterSelecion: MasterSelecion) => void;
-    children: ReactNode;
-}
-
-export interface MasterDetailContextProps extends MasterDetailContextStateProps {
-    onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
-    // onChangeSplitPosition: (newMasterSelection: MasterSelecion) => void;
-}