@m4l/components 0.1.40 → 0.1.41

package/src/components/areas/components/Window/subcomponents/Header/index.tsx

@@ -1,143 +0,0 @@
-// react
-import { useMemo } from 'react';
-//m4l
-import { useEnvironment, useModuleSkeleton } from '@m4l/core';
-// mui
-import { Typography } from '@mui/material';
-// components
-
-import { SKTModuleHeader } from './skeleton';
-
-// styled components
-import { StyledHeader } from './styles';
-
-// hooks
-
-import { useResponsiveDesktop } from '@m4l/graphics';
-
-import { useWindow } from '../../hooks/useWindow';
-
-import { IconButton, MenuActions } from '../../../../../mui_extended';
-import { Icon } from '../../../../../Icon';
-import { ModuleAction } from '../../../../contexts';
-
-// constants
-
-// types
-
-function getMenuActions(
-    isDesktop: boolean | undefined,
-    moduleActions: ModuleAction[],
-): ModuleAction[] {
-    let menuActions = [...moduleActions.filter(action => action.visibility !== 'allways')];
-
-    if (isDesktop !== undefined && isDesktop) {
-        menuActions = menuActions.filter(action => action.visibility === 'normal');
-    }
-
-    return menuActions;
-}
-
-// regresa las acciiones main
-function getMainActions(
-    isDesktop: boolean | undefined,
-    moduleActions: ModuleAction[],
-): ModuleAction[] {
-    let mainActions: ModuleAction[] = [];
-
-    if (isDesktop !== undefined && isDesktop) {
-        mainActions = mainActions.concat(
-            moduleActions.filter(action => action.visibility === 'main'),
-        );
-    }
-
-    mainActions = mainActions.concat(
-        moduleActions.filter(action => action.visibility === 'allways'),
-    );
-
-    return mainActions;
-}
-
-export function Header() {
-    const { url_icon, title, moduleActions, onClose, container_id } = useWindow();
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const isDesktop = useResponsiveDesktop();
-    const isSkeleton = useModuleSkeleton();
-
-    const menuActions: ModuleAction[] = useMemo(
-        () => getMenuActions(isDesktop, moduleActions),
-
-        [moduleActions, isDesktop],
-    );
-
-    const mainActions: ModuleAction[] = useMemo(() => {
-        return getMainActions(isDesktop, moduleActions);
-    }, [moduleActions, isDesktop]);
-
-    const onCloseLocal = () => {
-        onClose && onClose(container_id);
-    };
-
-    if (isSkeleton) {
-        return <SKTModuleHeader />;
-    }
-
-    return (
-        <StyledHeader id="Header" className="m4l_draggable_handle">
-            <Icon src={url_icon} bgColor="primary.main" size="24px" />
-            <Typography
-                variant="h5"
-                sx={{
-                    maxWidth: 260,
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                    color: 'text.primary',
-                    marginLeft: '12px',
-                    marginRight: '24px',
-                    textOverflow: 'ellipsis',
-                }}
-            >
-                {title}
-            </Typography>
-
-            {mainActions.map((mainAction, index) => {
-                if (!mainAction.component) {
-                    return (
-                        <IconButton
-                            key={`main_action_${index}`}
-                            src={mainAction.urlIcon}
-                            className={mainAction.className}
-                            onClick={mainAction.onClick}
-                            aria-label={mainAction.label}
-                            disabled={mainAction.disabled}
-                        />
-                    );
-                }
-                return (
-                    <mainAction.component
-                        key={`main_action_${index}`}
-                        description={mainAction.label}
-                        onClick={mainAction.onClick}
-                    />
-                );
-            })}
-
-            {menuActions.length > 0 && (
-                <MenuActions
-                    arrowType="right-top"
-                    marginTop="11px"
-                    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
-                    transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                    menuActions={menuActions}
-                />
-            )}
-            {onClose && (
-                <IconButton
-                    onClick={onCloseLocal}
-                    aria-label="click"
-                    src={`${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`}
-                />
-            )}
-        </StyledHeader>
-    );
-}

package/src/components/areas/components/Window/subcomponents/Header/skeleton.tsx

@@ -1,42 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { useResponsiveDesktop } from '@m4l/graphics';
-
-import {
-    Wrapper,
-    ModuleTitleContent,
-    ModuleTitle,
-    Separator,
-    Breadcrumbs,
-    ModuleActions,
-} from './styles';
-
-export function SKTModuleHeader() {
-    const isDesktop = useResponsiveDesktop();
-    return (
-        <Wrapper id="HeaderSkeleton">
-            <ModuleTitleContent>
-                <ModuleTitle>
-                    <Skeleton variant="circular" width={24} height={24} />
-                    <Skeleton variant="text" width={120} height={14} />
-                </ModuleTitle>
-                <Separator />
-                <Breadcrumbs>
-                    <Skeleton variant="text" width={68} height={14} />
-                    <Skeleton variant="circular" width={4} height={4} />
-                    <Skeleton variant="text" width={68} height={14} />
-                </Breadcrumbs>
-            </ModuleTitleContent>
-            <ModuleActions>
-                {isDesktop ? (
-                    <>
-                        <Skeleton variant="circular" width={24} height={24} />
-                        <Skeleton variant="circular" width={24} height={24} />
-                        <Skeleton variant="circular" width={24} height={24} />
-                    </>
-                ) : (
-                    <Skeleton variant="circular" width={24} height={24} />
-                )}
-            </ModuleActions>
-        </Wrapper>
-    );
-}

package/src/components/areas/components/Window/subcomponents/Header/styles.tsx

@@ -1,131 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const StyledHeader = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    justifyContent: 'space-between',
-    minHeight: theme.spacing(5),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    overflow: 'hidden',
-    cursor: 'move',
-    height: '60px',
-    ' > span': {
-        marginRight: '12px',
-    },
-
-    '& > h5': {
-        paddingRight: theme.spacing(3),
-        borderRight: `1px solid ${theme.palette.divider}`,
-    },
-    ' > nav': {
-        marginRight: '12px',
-        flexGrow: 1,
-    },
-
-    '& .splitactions.Mui-disabled': {
-        color: theme.palette.primary.main,
-    },
-
-    '& svg ': {
-        width: '20px',
-        height: '20px',
-    },
-}));
-
-export const Container = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-
-    position: 'relative',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    height: '60px',
-    minHeight: '60px',
-
-    ' > span': {
-        marginRight: '12px',
-    },
-
-    '& > h5': {
-        paddingRight: theme.spacing(3),
-        borderRight: `1px solid ${theme.palette.divider}`,
-    },
-    ' > nav': {
-        marginRight: '12px',
-        flexGrow: 1,
-    },
-
-    '& .splitactions.Mui-disabled': {
-        color: theme.palette.primary.main,
-    },
-
-    '& svg ': {
-        width: '20px',
-        height: '20px',
-    },
-}));
-
-export const Wrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: `0 0`,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    minHeight: '60px',
-    // height: 'auto',
-
-    // [theme.breakpoints.up('sm')]: {
-    //     height: '64px',
-    // },
-}));
-
-export const ModuleTitleContent = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: 'auto',
-    gridGap: theme.spacing(1.75),
-    alignItems: 'center',
-    width: 'auto',
-    height: 'auto',
-    [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: 'repeat(3, auto)',
-    },
-}));
-
-export const ModuleTitle = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: `${theme.spacing(3)} auto`,
-    gridGap: theme.spacing(2),
-    alignItems: 'center',
-    width: 'auto',
-    height: 'auto',
-}));
-
-export const Separator = styled('div')(({ theme }) => ({
-    display: 'none',
-    alignItems: 'center',
-    width: '1px',
-    background: theme.palette.divider,
-    height: '100%',
-    margin: `0 ${theme.spacing(2)}`,
-    [theme.breakpoints.up('sm')]: {
-        display: 'flex',
-    },
-}));
-
-export const Breadcrumbs = styled('div')(({ theme }) => ({
-    display: 'grid',
-    alignItems: 'center',
-    gridTemplateColumns: `repeat(3, auto)`,
-    gridGap: theme.spacing(2),
-}));
-
-export const ModuleActions = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: 'auto',
-    alignItems: 'center',
-    width: 'auto',
-    height: 'auto',
-    [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-        gridGap: theme.spacing(2),
-    },
-}));

package/src/components/areas/components/Window/subcomponents/MicroFrontend/index.tsx

@@ -1,33 +0,0 @@
-// React
-import React from 'react';
-//mui
-
-//external libraries
-
-//hooks
-
-//Styled components
-
-//css
-//import "./resizeable.css"
-//hooks
-
-import { useWindow } from '../../hooks/useWindow';
-import { MFBaseProps } from '../../../Area/types';
-import { MFLoader } from './subcomponents/MFLoader';
-
-//types
-
-// module_id: string;
-// debug_port: number;
-// cache?: boolean;
-// dynamicParams?: DynamicMFParameters;
-// prefix: string; //perfijo de los microfrontend ejemplo m4labs, guardian, etc...
-
-export const MicroFrontend = (props: MFBaseProps) => {
-    const { setModuleActions } = useWindow();
-
-    return <MFLoader {...props} dynamicParams={{ ...props.dynamicParams, setModuleActions }} />;
-};
-
-export const MemonizedMF = React.memo(MicroFrontend);

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/index.tsx

@@ -1,289 +0,0 @@
-/* eslint-disable @typescript-eslint/dot-notation */
-
-// react
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// m4l
-import { axiosOperation, useEnvironment, useHostTools, useNetwork } from '@m4l/core';
-import { useFormatter, useHostTheme, useLocales } from '@m4l/graphics';
-
-// other
-
-import debounce from 'lodash/debounce';
-//mui
-
-//environment
-
-//types
-
-import { LoadingMF } from './subcomponents/LoadingMF';
-import { useFirstRender } from '@m4l/graphics';
-import { MicroFrontendProps } from '../../../../../Area/types';
-
-declare global {
-    interface Window {
-        [key: string]: any;
-    }
-}
-
-interface MFType {
-    divContainerId: string;
-    scriptId: string;
-    moduleId: string;
-}
-
-function getDivScritId(prefix: string, moduleId: string): MFType {
-    const rotational_id = `${Math.round(new Date().getTime() / 1000)}_rnd_${Math.round(
-        Math.random() * 1000,
-    )}`;
-    return {
-        divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
-        scriptId: `script_${moduleId}_${rotational_id}`,
-        moduleId,
-    };
-}
-
-export function MFLoader(props: MicroFrontendProps) {
-    const { prefix, module_id, cache = true, debug_port, dynamicParams } = props;
-
-    const { hostThemeOptions, fnComponentsOverrides } = useHostTheme();
-    const { networkOperation } = useNetwork();
-    const environment = useEnvironment();
-    const hostTools = useHostTools();
-    const formatter = useFormatter();
-
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-    const [networkProgress, setNetworkProgress] = useState<number>(-1);
-
-    const [_networkRefresh, setNetworkRefresh] = useState<boolean>(false);
-    const { currentLocale } = useLocales();
-    //Variable de estado y setter que indica el DIV y el SCRIPT actual
-    const [divScript, setDivScript] = useState<MFType>(getDivScritId(prefix, module_id));
-    //Variable para contabililzar el tiempo de descarga del index.tsx
-    const refTime = useRef<number>(0);
-    const isFirstRender = useFirstRender([module_id]);
-
-    const final_host = environment.isLocalhost
-        ? `https://localhost:${debug_port}`
-        : `https://${window.location.host}/mf/${module_id}`;
-
-    // window[`render_${MF_PREFIX}_${MODULE_ID}`] = (
-    // window[`unmount_${MF_PREFIX}_${MODULE_ID}`] = (containerId: string) => {
-    function cleanUp(dScript: MFType) {
-        //const dScript = refDivScript.current;
-
-        try {
-            if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
-                window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
-            }
-        } catch (error) {}
-
-        if (!cache) {
-            const script = document.getElementById(dScript.scriptId);
-
-            if (script) {
-                try {
-                    document.head.removeChild(script);
-                    delete window[`render_${prefix}_${dScript.moduleId}`];
-                    delete window[`unmount_${prefix}_${dScript.moduleId}`];
-                } catch (error) {}
-            }
-        }
-    }
-    const renderMicroFrontend = useCallback(
-        (newDScript: MFType) => {
-            try {
-                setIsLoading(false);
-
-                window[`render_${prefix}_${newDScript.moduleId}`](
-                    newDScript.divContainerId,
-                    environment,
-                    hostTools,
-                    currentLocale,
-                    { hostThemeOptions, fnComponentsOverrides },
-                    axiosOperation,
-                    formatter,
-                    {
-                        version: 1,
-                        ...(dynamicParams ? dynamicParams : {}),
-                    },
-                );
-            } catch (error) {}
-        },
-        [hostThemeOptions, currentLocale, formatter, dynamicParams],
-    );
-
-    const debouncedSetDivScript = useCallback(
-        debounce(
-            (newName: string) => {
-                const newDivScript: MFType = getDivScritId(prefix, newName);
-
-                if (newName !== divScript.moduleId) {
-                    setDivScript({ ...newDivScript });
-                }
-                //refDivScript.current = { ...newDivScript };
-            },
-
-            200,
-        ),
-        [divScript],
-    );
-
-    useEffect(() => {
-        //Use effect para dectar los cambios de host o name para actualizar el divScript que es el id del div y script actualmeente renderizado y montado.
-
-        if (!isFirstRender) {
-            debouncedSetDivScript(module_id + '');
-            //debouncedSetDivScript(name + '');
-            if (module_id !== divScript.moduleId) {
-                //setDivScript(newDivScript);
-                //refDivScript.current = { ...newDivScript };
-            }
-        }
-        return () => {};
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [module_id]);
-
-    useEffect(() => {
-        setIsLoading(true);
-        //Se utiliza useLayoutEffect en vez de useEffect,
-        //para que pueda desmontar el dom el microfrontend antes de que se borre el div que lo contiene
-        let mounted = true;
-        const controller: AbortController = new AbortController();
-
-        const dsScript: MFType = { ...divScript }; //Se duplica para que no se llleve la referencia del objeto
-
-        const loadIfNotLoaded = async () => {
-            if (!window[`render_${prefix}_${module_id}`]) {
-                let urlFile = '';
-
-                setNetworkProgress(0);
-
-                const manifest: any = await fetch(
-                    `${final_host}/manifest.json?rnd=${Math.random()}`,
-                )
-                    .then(res => res.json())
-                    .catch(() => {
-                        console.debug('Error fetching manifest', `${final_host}/manifest.json`);
-                        return undefined;
-                    });
-
-                if (!manifest) {
-                    return;
-                }
-                setNetworkProgress(10);
-                if (mounted) {
-                    urlFile = `${final_host}/${
-                        manifest['src/index.tsx']['file']
-                    }?rnd=${Math.random()}`;
-
-                    refTime.current = 0;
-
-                    await networkOperation({
-                        method: 'GET',
-                        endPoint: urlFile,
-                        isRemote: !environment.isLocalhost,
-                        headers: { 'Content-Type': 'application/json' },
-
-                        onDownloadProgress: progressEvent => {
-                            let percentCompleted = 0;
-
-                            try {
-                                if (progressEvent.lengthComputable) {
-                                    percentCompleted =
-                                        10 +
-                                        Math.round(
-                                            (progressEvent.loaded * 90) / progressEvent.total,
-                                        );
-                                } else {
-                                    if (refTime.current === 0) {
-                                        refTime.current = new Date().getTime();
-                                    }
-                                    //Progreso basado en 20 segundos
-                                    // percentCompleted = Math.round(
-                                    //     ((new Date().getTime() - refTime.current) / 20000) * 100,
-                                    // );
-
-                                    percentCompleted = 10 + (progressEvent.loaded / 1500000) * 90;
-                                    //TODO Cambiar la forma de calcular el proceso
-
-                                    if (percentCompleted > 95) percentCompleted = 95;
-                                }
-                            } catch (error) {}
-                            if (mounted) {
-                                setNetworkProgress(percentCompleted);
-                            }
-                        },
-                        isExternalUrl: true,
-                        responseType: 'text',
-                        signal: controller.signal,
-                    })
-                        .then(() => {
-                            if (mounted) {
-                                setNetworkProgress(100);
-                            }
-                        })
-                        .catch(() => {});
-                    //TODOs implementar el catch
-
-                    //carga del script ya cacheado el archivo
-
-                    if (mounted) {
-                        const script = document.createElement('script');
-                        script.id = divScript.scriptId;
-                        script.crossOrigin = '';
-                        script.type = 'module';
-                        script.src = urlFile || '';
-                        script.onload = () => {
-                            if (mounted) {
-                                console.debug('Script loaded', new Date().getTime());
-                                setNetworkProgress(100);
-
-                                renderMicroFrontend(dsScript);
-                            }
-                        };
-                        document.head.appendChild(script);
-                        console.debug('Script appened', new Date().getTime());
-                    }
-                }
-            } else {
-                if (mounted) {
-                    renderMicroFrontend(dsScript);
-                }
-            }
-        };
-
-        loadIfNotLoaded();
-
-        return () => {
-            mounted = false;
-
-            controller.abort();
-
-            //Desmontar sincronamente el MF en el div que va ha ser reemplazado
-            cleanUp(dsScript);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [divScript]);
-
-    console.log('Render micro frontend', divScript.divContainerId, final_host);
-    return (
-        <>
-            <div id={divScript.divContainerId} />
-            {isLoading ? (
-                <LoadingMF
-                    loadingProgress={networkProgress}
-                    setNetworkRefresh={setNetworkRefresh}
-                />
-            ) : // <div>{networkProgress}</div>
-            null}
-        </>
-    );
-}
-
-MFLoader.defaultProps = {
-    document,
-    window,
-};
-
-export default MFLoader;

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/index.tsx

@@ -1,17 +0,0 @@
-import { LinearProgress } from '../../../../../../../../../mui_extended';
-import { WrapperLinearProgress } from './styles';
-import FallBackNotFound from './subcomponents/NotFound';
-import { FallBackProps } from './types';
-
-export const LoadingMF = (props: FallBackProps) => {
-    const { loadingProgress, setNetworkRefresh } = props;
-    if (loadingProgress !== -1) {
-        return (
-            <WrapperLinearProgress id="WrapperLinearProgress">
-                <LinearProgress variant="determinate" value={loadingProgress} />
-            </WrapperLinearProgress>
-        );
-    }
-
-    return <FallBackNotFound setNetworkRefresh={setNetworkRefresh} />;
-};

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/styles.tsx

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material';
-
-export const WrapperLinearProgress = styled('div')(() => ({
-    width: '70%',
-    margin: 'auto auto',
-}));