@m4l/components 0.1.35 → 0.1.37

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+//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);