@m4l/components 0.1.39 → 0.1.41

package/src/components/areas/components/Area/index.tsx

@@ -1,34 +0,0 @@
-//react
-import { AreaProps } from './types';
-
-import { AreaProvider } from '../../contexts/AreaContext';
-import { GridLayout } from '../GridLayout';
-
-import { AreaProviderRef } from '../../contexts/AreaContext/types';
-import useAreas from '../../hooks/useAreas';
-
-import { WrapperArea } from './styles';
-
-export const Area = (props: AreaProps) => {
-    const { id, active } = props;
-    const { setAreaRef } = useAreas();
-
-    const setAreaProviderRef = (element: AreaProviderRef) => {
-        console.log('setAreaProviderRef', element, id);
-
-        if (element) {
-            setAreaRef(id, element);
-        }
-    };
-
-    console.log('Render Area');
-    return (
-        <WrapperArea className={active ? 'active' : ''}>
-            <AreaProvider {...props} ref={setAreaProviderRef}>
-                <GridLayout />
-            </AreaProvider>
-        </WrapperArea>
-    );
-};
-
-Area.displayName = 'Area';

package/src/components/areas/components/Area/styles.tsx

@@ -1,38 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperArea = styled('div')(() => ({
-    flexDirection: 'column',
-
-    flexGrow: '1',
-    position: 'absolute',
-
-    height: '100%',
-    width: '100%',
-    overflow: 'auto',
-    // padding: theme.spacing(10),
-    justifyContent: 'top',
-    alignItems: 'flex-start',
-    border: '1px dashed black',
-    visibility: 'hidden',
-    display: 'none',
-    '&.active': {
-        display: 'flex',
-        visibility: 'visible',
-    },
-    '& .layout': {
-        // height: 'calc(100vh - 69px) !important',
-        overflow: 'scroll',
-        minWidth: '100%',
-        minHeight: '100%',
-        // overflowY: 'auto',
-        // margin: 'auto',
-        // left: '0px',
-        // right: '0px',
-        // top: '0px',
-        // bottom: '0px',
-        // border: '1px solid black',
-    },
-    '& .selected': {
-        borderTop: '1px solid green',
-    },
-}));

package/src/components/areas/components/Area/types.ts

@@ -1,121 +0,0 @@
-import { ReactNode } from 'react';
-import {
-    DynamicMFParameters,
-    IsolationDynamicMFParameters,
-} from '../../contexts/DynamicMFParmsContext/types';
-import type { Layout } from 'react-grid-layout';
-export type WinType = 'microfrontend' | 'component';
-
-export type EmergeType = 'layout' | 'popup' | 'modal';
-
-export interface MFBaseProps {
-    module_id: string;
-    debug_port: number;
-    cache?: boolean;
-    dynamicParams?: IsolationDynamicMFParameters;
-    prefix: string; //perfijo de los microfrontend ejemplo m4labs, guardian, etc...
-}
-
-export interface MicroFrontendProps extends MFBaseProps {
-    dynamicParams?: DynamicMFParameters;
-}
-//Propiedades base
-export interface WindowBaseProps {
-    winType: WinType;
-    emergeType: EmergeType;
-
-    container_id: string; //Porque viene de la base de datos
-
-    url_icon: string;
-    title: string;
-    onClose?: (layoutId: string) => void;
-}
-//MicrofrontEnd o Componente end nemergeType : layout
-export interface LayoutBaseProps extends WindowBaseProps {
-    emergeType: 'layout';
-    layoutProps: Omit<Layout, 'i'>;
-}
-export interface LayoutMFProps extends LayoutBaseProps {
-    winType: 'microfrontend';
-    mfProps: MFBaseProps;
-}
-export interface LayoutComponentProps extends LayoutBaseProps {
-    winType: 'component';
-    component: ReactNode;
-}
-
-export type LayoutProps = LayoutMFProps | LayoutComponentProps;
-
-export type NewLayoutProps =
-    | Omit<LayoutMFProps, 'container_id' | 'onClose'>
-    | Omit<LayoutComponentProps, 'container_id' | 'onClose'>;
-
-export interface HashWindowsByLayouts {
-    [P: string]: LayoutProps;
-}
-
-//PopUP
-export type Position = { x: number; y: number; width: number; height: number };
-export interface PopUpBaseProps extends WindowBaseProps {
-    emergeType: 'popup';
-    zIndex?: number;
-    windowProps: Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>;
-}
-
-export interface PopUpMFProps extends PopUpBaseProps {
-    winType: 'microfrontend';
-    mfProps: MFBaseProps;
-}
-export interface PopUpComponentProps extends PopUpBaseProps {
-    winType: 'component';
-    component: ReactNode;
-}
-
-export type PopUpProps = PopUpMFProps | PopUpComponentProps;
-
-export type NewPopUpProps =
-    | Omit<PopUpMFProps, 'container_id' | 'onClose'>
-    | Omit<PopUpComponentProps, 'container_id' | 'onClose'>;
-
-// Modal
-export interface ModalBaseProps extends WindowBaseProps {
-    emergeType: 'modal';
-    zIndex?: number;
-    position?: Position;
-}
-
-export interface ModalMFProps extends ModalBaseProps {
-    winType: 'microfrontend';
-    mfProps: MFBaseProps;
-}
-export interface ModalComponentProps extends ModalBaseProps {
-    winType: 'component';
-    component: ReactNode;
-}
-
-export type ModalProps = ModalMFProps | ModalComponentProps;
-
-export type NewModalProps =
-    | Omit<ModalMFProps, 'container_id' | 'onClose'>
-    | Omit<ModalComponentProps, 'container_id' | 'onClose'>;
-
-// Todos los tipos
-export type WindowProps = LayoutProps | PopUpProps | ModalProps;
-export type NewWindowProps = NewLayoutProps | NewPopUpProps | NewModalProps;
-
-export interface AreaType {
-    id: string;
-    name: string;
-    loadWindows?: boolean;
-}
-
-export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
-    active: boolean;
-}
-
-export type AreaRef = {
-    addWindow?: (newWindow: NewWindowProps) => string;
-    current: {
-        divRef: HTMLDivElement | null;
-    };
-};

package/src/components/areas/components/AreasAdmin/index.tsx

@@ -1,51 +0,0 @@
-// react
-
-//m4l
-
-// mui
-
-// external libraries
-// componentes estilados
-import { WrapperAreasAdmin } from './styles';
-// internal components
-import { IconButton } from '../../../mui_extended/IconButton';
-
-// sub components
-
-// hooks
-import useAreas from '../../hooks/useAreas';
-import { useEnvironment } from '@m4l/core';
-
-import { AreaChip } from './subcomponents/AreaChip';
-// types
-
-// network
-// constansts
-
-export function AreasAdmin() {
-    const { areas, currentArea, addArea, status } = useAreas();
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    if (status !== 'loaded') {
-        return null;
-    }
-    return (
-        <WrapperAreasAdmin id="ContainerTabs">
-            {/* <div> */}
-            {areas.map(area => (
-                <AreaChip
-                    key={area.id}
-                    areaId={area.id}
-                    active={area.id === currentArea}
-                    areaName={area.name}
-                />
-            ))}
-            {/* </div> */}
-            <IconButton
-                src={`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/add.svg`}
-                size={'small'}
-                onClick={addArea}
-            />
-        </WrapperAreasAdmin>
-    );
-}

package/src/components/areas/components/AreasAdmin/styles.tsx

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAreasAdmin = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    flexGrow: '1',
-    position: 'relative',
-    marginTop: theme.spacing(3),
-}));
-
-// export const WrapperAreasAdmin = styled('div')(() => ({
-//     width: '100%',
-//     display: 'flex',
-//     flexDirection: 'row',
-// }));

package/src/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.tsx

@@ -1,37 +0,0 @@
-//react
-import { useEnvironment } from '@m4l/core';
-import useAreas from '../../../../../areas/hooks/useAreas';
-import { IconButton } from '../../../../../mui_extended';
-import { WrapperAreaChips, AreaSelect } from './styles';
-import { AreaChipProps } from './types';
-
-export const AreaChip = (props: AreaChipProps) => {
-    const { areaId, active, areaName } = props;
-
-    const { host_static_assets, environment_assets } = useEnvironment();
-    const { deleteArea, selectArea } = useAreas();
-
-    return (
-        <WrapperAreaChips
-            className={active ? 'active' : ''}
-            onClick={() => {
-                selectArea(areaId);
-            }}
-        >
-            <AreaSelect className={active ? 'active' : ''} />
-            <span>{areaName}</span>
-            <IconButton
-                src={`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/edit.svg`}
-                size={'small'}
-                onClick={() => {}}
-            />
-            <IconButton
-                src={`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/delete.svg`}
-                size={'small'}
-                onClick={() => deleteArea(areaId)}
-            />
-        </WrapperAreaChips>
-    );
-};
-
-AreaChip.displayName = 'AreaButtons';

package/src/components/areas/components/AreasAdmin/subcomponents/AreaChip/styles.tsx

@@ -1,20 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAreaChips = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'row',
-    border: '1px solid gray',
-    '&.active': {
-        border: '1px solid red',
-        // backgroundColor: theme.palette.background,
-    },
-}));
-
-export const AreaSelect = styled('div')(({ theme }) => ({
-    height: '100%',
-    width: theme.spacing(1),
-    backgroundColor: theme.palette.background.default,
-    '&.active': {
-        backgroundColor: theme.palette.primary.main,
-    },
-}));

package/src/components/areas/components/AreasAdmin/subcomponents/AreaChip/types.ts

@@ -1,5 +0,0 @@
-export interface AreaChipProps {
-    areaId: string;
-    areaName: string;
-    active: boolean;
-}

package/src/components/areas/components/AreasContainer/index.tsx

@@ -1,42 +0,0 @@
-// react
-
-//m4l
-// mui
-
-// external libraries
-// componentes estilados
-import { ContainerAreas } from './styles';
-// internal components
-
-// sub components
-import { Area } from '../Area';
-// hooks
-// types
-
-// network
-// constansts
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import useAreas from '../../hooks/useAreas';
-import { useEffect } from 'react';
-
-export function AreasContainer() {
-    const { areas, currentArea, status } = useAreas();
-
-    useEffect(() => {
-        console.log('useEffect AreasContainer');
-    }, []);
-
-    if (status !== 'loaded') {
-        return null;
-    }
-
-    console.log('Render AreasContainer', status, currentArea, areas);
-    return (
-        <ContainerAreas id="ContainerAreas">
-            {areas.map(area => {
-                return <Area key={area.id} id={area.id} active={currentArea === area.id} />;
-            })}
-        </ContainerAreas>
-    );
-}

package/src/components/areas/components/AreasContainer/styles.tsx

@@ -1,29 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-// export const WrapperAreas = styled('div')(({ theme }) => ({
-//     flexGrow: 1,
-//     display: 'flex',
-
-//     width: '100%',
-//     height: '100%',
-//     flexDirection: 'column',
-//     justifyContent: 'flex-start',
-//     alignItems: 'center',
-//     padding: theme.spacing(0, 1),
-//     position: 'relative',
-// }));
-
-export const ContainerAreas = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    flexGrow: '1',
-    position: 'relative',
-    marginTop: theme.spacing(3),
-}));
-
-// export const ContainerTabs = styled('div')(() => ({
-//     width: '100%',
-//     display: 'flex',
-//     flexDirection: 'row',
-// }));

package/src/components/areas/components/GridLayout/index.tsx

@@ -1,84 +0,0 @@
-//react
-
-import { WidthProvider, Responsive } from 'react-grid-layout';
-import { useArea } from '../../hooks/useArea';
-import { WrapperPoups } from './styles';
-import { WindowPopUp } from '../WindowPopUp';
-import { MemonizedWindow } from '../Window';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
-export const GridLayout = () => {
-    const {
-        status,
-        allLayouts,
-        layouts,
-        hashWindowsLayouts,
-        windowsPopUps,
-
-        onLayoutChange,
-    } = useArea();
-    // const [nrWindows, setNrWindows] = useState(0);
-    // const [nrPopUps, setNrPopUps] = useState(0);
-
-    function onBreakpointChange(_newBreakpoint: string, _newCols: number) {}
-
-    if (status === 'init') {
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return <></>;
-    } else if (status === 'load') {
-        return <div>Loading...</div>;
-    }
-
-    return (
-        <ResponsiveGridLayout
-            className="layout"
-            onLayoutChange={onLayoutChange}
-            onBreakpointChange={onBreakpointChange}
-            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-            cols={{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 }}
-            rowHeight={100}
-            margin={[5, 5]}
-            containerPadding={[3, 3]}
-            draggableHandle=".m4l_draggable_handle"
-            compactType={'horizontal'}
-            layouts={allLayouts}
-        >
-            <WrapperPoups
-                id="WrapperPoups"
-                key="none"
-                data-grid={{
-                    i: 'none',
-                    x: 0,
-                    y: 0,
-                    w: 0,
-                    h: 0,
-                    maxW: 0,
-                    maxH: 0,
-                    minW: 0,
-                    minH: 0,
-                    static: true,
-                    isDraggable: false,
-                    isResizable: false,
-                }}
-            >
-                {windowsPopUps.map(wp => (
-                    <WindowPopUp key={wp.container_id} {...wp} />
-                ))}
-            </WrapperPoups>
-
-            {layouts.map(l => {
-                if (hashWindowsLayouts[l.i]) {
-                    return (
-                        <div key={l.i} data-grid={l}>
-                            <MemonizedWindow {...hashWindowsLayouts[l.i]} />
-                        </div>
-                    );
-                }
-                return null;
-            })}
-        </ResponsiveGridLayout>
-    );
-};

package/src/components/areas/components/GridLayout/styles.tsx

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperPoups = styled('div')(() => ({
-    zIndex: 1,
-    ' .react-draggable': {
-        position: 'absolute',
-    },
-}));

package/src/components/areas/components/Window/contexts/WindowContext/index.tsx

@@ -1,39 +0,0 @@
-//react
-import { createContext, useState } from 'react';
-import { ModuleAction } from '../../../../contexts';
-// import { ModuleAction } from '../../../../contexts/DynamicMFParmsContext';
-// mui
-// hooks
-// utils
-// config
-// @type
-import { WindowContextProps, WindowProviderProps } from './types';
-
-// ----------------------------------------------------------------------
-
-const WindowContext = createContext<WindowContextProps | null>(null);
-
-function WindowProvider(props: WindowProviderProps) {
-    const { children, initialExternalActions = [], ...other } = props;
-
-    const [moduleActions, setModuleActions] = useState<Array<ModuleAction>>([]);
-    const [externalActions, setExternalActions] =
-        useState<Array<ModuleAction>>(initialExternalActions);
-
-    return (
-        <WindowContext.Provider
-            value={{
-                moduleActions,
-                externalActions,
-                setModuleActions,
-                setExternalActions,
-
-                ...other,
-            }}
-        >
-            {children}
-        </WindowContext.Provider>
-    );
-}
-
-export { WindowProvider, WindowContext };

package/src/components/areas/components/Window/contexts/WindowContext/types.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-
-import { WindowBaseProps } from '../../../Area/types';
-import type { ModuleAction } from '../../../../contexts/DynamicMFParmsContext/types';
-
-export interface WindowProviderProps extends WindowBaseProps {
-    initialExternalActions?: ModuleAction[];
-    children: ReactNode;
-}
-
-export interface WindowContextProps
-    extends Omit<WindowProviderProps, 'children' | 'initialExternalActions'> {
-    moduleActions: ModuleAction[];
-    externalActions: ModuleAction[];
-
-    setExternalActions: (newActions: ModuleAction[]) => void;
-    setModuleActions: (newActions: ModuleAction[]) => void;
-}

package/src/components/areas/components/Window/hooks/useWindow/index.ts

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

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

@@ -1,43 +0,0 @@
-//mui
-
-//external libraries
-
-//hooks
-
-//Styled components
-
-import React from 'react';
-
-import { WindowProps } from '../Area/types';
-import { WindowProvider } from './contexts/WindowContext';
-
-import { WrapperWindow, WrapperContent } from './styles';
-import { Component } from './subcomponents/Component';
-
-//css
-//import "./resizeable.css"
-//hooks
-
-import { Header } from './subcomponents/Header';
-import { MicroFrontend } from './subcomponents/MicroFrontend';
-
-//types
-
-export const Window = (props: WindowProps) => {
-    return (
-        <WrapperWindow>
-            <WindowProvider initialExternalActions={[]} {...props}>
-                <Header />
-                <WrapperContent>
-                    {props.winType === 'microfrontend' ? (
-                        <MicroFrontend {...props.mfProps} />
-                    ) : (
-                        <Component>{props.component}</Component>
-                    )}
-                </WrapperContent>
-            </WindowProvider>
-        </WrapperWindow>
-    );
-};
-
-export const MemonizedWindow = React.memo(Window);

package/src/components/areas/components/Window/styles.ts

@@ -1,22 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperWindow = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-    overflow: 'hidden',
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(3),
-    border: '1px solid gray',
-
-    '&.m4l_selected': {
-        borderTop: '1px solid green',
-    },
-}));
-
-export const WrapperContent = styled('div')(() => ({
-    flexGrow: 1,
-    position: 'relative',
-    // overflow: 'auto',
-}));

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

@@ -1,29 +0,0 @@
-//mui
-
-//external libraries
-
-//hooks
-
-//Styled components
-
-import React, { ReactNode } from 'react';
-import { DynamicMFParmsProvider } from '../../../../../../contexts';
-
-import { useWindow } from '../../hooks/useWindow';
-
-//css
-//import "./resizeable.css"
-//hooks
-
-//types
-
-export const Component = (props: { children: ReactNode }) => {
-    const { setModuleActions } = useWindow();
-    return (
-        <DynamicMFParmsProvider setModuleActions={setModuleActions}>
-            {props.children}
-        </DynamicMFParmsProvider>
-    );
-};
-
-export const MemonizedComponent = React.memo(Component);