@m4l/components 0.1.35 → 0.1.37

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

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

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

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

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

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

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

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