@m4l/layouts 0.1.26 → 0.1.28

package/src/layouts/MasterDetailLayout/dicctionary.ts

@@ -1,20 +0,0 @@
-import type { Dictionary } from '@m4l/core';
-import {
-    // defaultModuleLayoutDictionary,
-    getModuleLayoutComponentsDictionary,
-} from '../ModuleLayout/dicctionary';
-
-export function getMasterDetailLayoutComponentsDictionary() {
-    return ['master_detail_layout'].concat(getModuleLayoutComponentsDictionary());
-}
-
-export const defaultMasterDetailDictionary: Dictionary = {
-    master_detail_layout: {
-        split_vertical: 'Split vertically',
-        split_horizontal: 'Split horizontally',
-        no_split: 'No split',
-        view_detail: 'View detail',
-    },
-
-    //...defaultModuleLayoutDictionary,
-};

package/src/layouts/MasterDetailLayout/index.tsx

@@ -1,165 +0,0 @@
-// react
-import { useCallback, useMemo, useRef, useState } from 'react';
-//m4l
-import { useEnvironment } from '@m4l/core';
-// external libraries
-
-// componentes estilados
-
-// sub components
-import { ModuleAction, SplitLayout } from '@m4l/components';
-import { ModuleLayout } from '../ModuleLayout';
-
-// dictionary
-// import { getMasterDetailLayoutComponentsDictionary } from './dicctionary';
-// context
-import { MasterDetailProvider } from './contexts/MasterDetailContext';
-// hooks
-import { useResponsiveDesktop } from '@m4l/graphics';
-
-// types
-import type { MasterDetailLayoutProps } from './types';
-import type { SplitPosition } from '@m4l/components';
-import type { ModuleLayoutRef } from '../ModuleLayout/types';
-// constants
-
-function getTotalModuleActions(
-    splitActions: ModuleAction[],
-    moduleActions: ModuleAction[],
-    viewDetailAction: ModuleAction,
-    isDesktop: boolean | undefined,
-): ModuleAction[] {
-    let totalActions: ModuleAction[] =
-        isDesktop !== undefined && isDesktop ? [...splitActions] : [viewDetailAction];
-    // !== undefined
-    // ? [viewDetailAction]
-    // : [];
-    totalActions = moduleActions.concat(totalActions);
-
-    return totalActions;
-}
-
-export function MasterDetailLayout(props: MasterDetailLayoutProps) {
-    const {
-        moduleId,
-
-        masterComponent,
-        detailComponent,
-        moduleActions,
-
-        // defaultDictionary,
-    } = props;
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const [splitPosition, setSplitPosition] = useState<SplitPosition>('vertical');
-    const isDesktop = useResponsiveDesktop();
-    const moduleLayoutRef = useRef<ModuleLayoutRef>(null);
-
-    const onChangePostionInternal = (newPostion: SplitPosition) => {
-        const newSplitActions = [...initialSplitActions];
-
-        for (let i = 0; i < newSplitActions.length; i++) {
-            newSplitActions[i].disabled = false;
-            if (newSplitActions[i].tag === newPostion) {
-                newSplitActions[i].disabled = true;
-            }
-        }
-        setSplitActions(newSplitActions);
-        setSplitPosition(newPostion);
-    };
-
-    const initialSplitActions: ModuleAction[] = [
-        {
-            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
-            onClick: () => onChangePostionInternal('vertical'),
-            disabled: true,
-            visibility: 'main',
-            dictionaryField: 'master_detail_layout.split_vertical',
-            tag: 'vertical',
-            className: 'splitactions',
-        },
-        {
-            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
-            onClick: () => onChangePostionInternal('horizontal'),
-            disabled: false,
-            visibility: 'main',
-            dictionaryField: 'master_detail_layout.split_horizontal',
-            tag: 'horizontal',
-            className: 'splitactions',
-        },
-        {
-            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
-            onClick: () => onChangePostionInternal('none'),
-            disabled: false,
-            visibility: 'main',
-            dictionaryField: 'master_detail_layout.no_split',
-            tag: 'none',
-            className: 'splitactions',
-        },
-    ];
-    const onClickViewDetail = useCallback(() => {
-        // moduleLayoutRef.current?.openModal({
-        //     title: 'master_detail_layout.view_detail',
-        //     initialWidth: 500,
-        //     initialHeigth: 680,
-        //     window: detailComponent,
-        //     actions: undefined,
-        // });
-    }, [detailComponent]);
-
-    const viewDetailAction: ModuleAction = useMemo(() => {
-        return {
-            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
-            onClick: onClickViewDetail,
-            disabled: false,
-            visibility: 'allways',
-            dictionaryField: 'master_detail_layout.view_detail',
-            tag: 'none',
-            className: '',
-            // component: ButtonDetail,
-        };
-    }, [environment_assets, onClickViewDetail]);
-
-    const [splitActions, setSplitActions] = useState<ModuleAction[]>(initialSplitActions);
-
-    const finalModuleActions = useMemo(() => {
-        const actions = getTotalModuleActions(
-            splitActions,
-            moduleActions,
-            viewDetailAction,
-            isDesktop,
-        );
-
-        return actions;
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
-
-    // const finalComponentsDictionary = useMemo(
-    //     () => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()),
-    //     [componentsDictionary],
-    // );
-
-    // const finalDefaultDictionary = useMemo(
-    //     () => ({ ...defaultDictionary, ...defaultMasterDetailDictionary }),
-    //     [defaultDictionary],
-    // );
-
-    return (
-        <MasterDetailProvider>
-            <ModuleLayout
-                ref={moduleLayoutRef}
-                moduleId={moduleId}
-                moduleActions={finalModuleActions}
-                //defaultDictionary={finalDefaultDictionary}
-                // componentsDictionary={finalComponentsDictionary}
-            >
-                <SplitLayout
-                    splitPosition={isDesktop ? splitPosition : 'none'}
-                    firstPart={masterComponent}
-                    secondPart={detailComponent}
-                />
-            </ModuleLayout>
-        </MasterDetailProvider>
-    );
-}

package/src/layouts/MasterDetailLayout/types.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { ModuleLayoutProps } from '../ModuleLayout/types';
-
-export interface ContainerProps {
-    vertical: boolean;
-}
-
-export interface MasterDetailLayoutProps extends Omit<ModuleLayoutProps, 'children'> {
-    masterComponent: ((props?: any) => JSX.Element) | ReactNode;
-    detailComponent: ((props?: any) => JSX.Element) | ReactNode;
-}

package/src/layouts/ModuleLayout/contexts/ModuleContext/index.tsx

@@ -1,56 +0,0 @@
-// react
-import { ModuleAction, useDynamicMFParameters } from '@m4l/components';
-import { createContext, useState, useMemo, useEffect } from 'react';
-
-// sub componentes
-
-// types
-import {
-    ModuleLayoutContextProps,
-    ModuleLayoutContextStateProps,
-    ModuleLayoutProviderProps,
-} from './types';
-
-// network
-
-const ModuleContext = createContext<ModuleLayoutContextProps | null>(null);
-
-function ModuleProvider(props: ModuleLayoutProviderProps) {
-    const { children, moduleActions, moduleId } = props;
-
-    const [configOptions] = useState<ModuleLayoutContextStateProps>(() => ({
-        moduleId,
-        dictionary: undefined,
-    }));
-    const { setModuleActions } = useDynamicMFParameters();
-
-    const [dynamicActions, setDynamicActions] = useState<Array<ModuleAction>>([]);
-
-    const finalModuleActions = useMemo(
-        () => moduleActions.concat(dynamicActions),
-        [moduleActions, dynamicActions],
-    );
-    useEffect(() => {
-        console.log('useEffect ModuleProvider', finalModuleActions);
-        setModuleActions(finalModuleActions);
-    }, [finalModuleActions]);
-
-    return (
-        <ModuleContext.Provider
-            value={{
-                moduleActions: finalModuleActions,
-                // dynamicActions,
-                setDynamicActions,
-                moduleId: configOptions.moduleId,
-                // moduleNameField: configOptions.moduleNameField,
-                // urlIcon: configOptions.urlIcon,
-
-                // breadcrumbLinks: configOptions.breadcrumbLinks,
-            }}
-        >
-            {children}
-        </ModuleContext.Provider>
-    );
-}
-
-export { ModuleProvider, ModuleContext };

package/src/layouts/ModuleLayout/contexts/ModuleContext/types.ts

@@ -1,23 +0,0 @@
-import { ModuleAction } from '@m4l/components';
-import type { ReactNode } from 'react';
-
-export interface ModuleLayoutContextStateProps {
-    // init: boolean,
-    // urlIcon: string;
-    moduleId: string;
-    // moduleNameField: string;
-    // breadcrumbLinks: TLink[];
-}
-
-export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
-    children: ReactNode;
-
-    moduleActions: ModuleAction[];
-}
-
-export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
-    // , "dictionary" | "moduleId" | "moduleNameField" | "breadcrumbLinks"
-    moduleActions: ModuleAction[];
-    // dynamicActions: ModuleAction[];
-    setDynamicActions: (dynamicActions: ModuleAction[]) => void;
-}

package/src/layouts/ModuleLayout/dicctionary.ts

@@ -1,11 +0,0 @@
-import type { Dictionary } from '@m4l/core';
-
-import { getModalDialogComponentsDictionary } from '@m4l/components';
-
-export function getModuleLayoutComponentsDictionary() {
-    return ['module_layout'].concat(getModalDialogComponentsDictionary());
-}
-
-export const defaultModuleLayoutDictionary: Dictionary = {
-    module_layout: {},
-};

package/src/layouts/ModuleLayout/index.tsx

@@ -1,59 +0,0 @@
-// m4l
-import { ModalProvider } from '@m4l/components';
-
-// react
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-// external libraries
-
-// componentes estilados
-
-// sub components
-import { InnerModule } from './subcomponents/InnerModule';
-
-// types
-import type { ModuleLayoutProps, ModuleLayoutRef } from './types';
-import type { ModuleRef } from './subcomponents/InnerModule/types';
-import type { ModalOpenOptions } from '@m4l/components';
-// constants
-
-// context
-import { ModuleProvider } from './contexts/ModuleContext';
-
-// hooks
-//export const ModuleLayout = forwardRef<ModuleLayoutRef, ModuleLayoutProps>((props, ref) => {
-
-export const ModuleLayout = forwardRef<ModuleLayoutRef, ModuleLayoutProps>((props, ref) => {
-    const { moduleId, moduleActions, children } = props;
-    const moduleRef = useRef<ModuleRef>(null);
-
-    const openModal = (modalOpenProps: ModalOpenOptions) => {
-        moduleRef.current?.openModal(modalOpenProps);
-    };
-
-    useImperativeHandle(ref, () => ({
-        openModal,
-        current: moduleRef.current,
-    }));
-
-    return (
-        // <FlagsProvider>
-        //     <ModuleDictionaryProvider
-        //         moduleId={moduleId}
-        //         componentsDictionary={componentsDictionary}
-        //         currentLang={currentLang}
-        //     >
-        //         <ModuleSkeletonProvider flags={skeletonFlags}>
-        //             <ModulePrivilegesProvider queryPrivileges={privileges}>
-        <ModuleProvider moduleId={moduleId} moduleActions={moduleActions}>
-            <ModalProvider>
-                <InnerModule ref={moduleRef}>{children}</InnerModule>
-            </ModalProvider>
-        </ModuleProvider>
-        //             </ModulePrivilegesProvider>
-        //         </ModuleSkeletonProvider>
-        //     </ModuleDictionaryProvider>
-        // </FlagsProvider>
-    );
-});
-
-ModuleLayout.displayName = 'ModuleLayout'; //para efectos de debuggin de React

package/src/layouts/ModuleLayout/subcomponents/InnerModule/index.tsx

@@ -1,35 +0,0 @@
-// react
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-// external libraries
-
-// componentes estilados
-import { WrapperInnerModule, ModuleContent } from './styles';
-
-// sub components
-// import { Header } from './subcomponents/Header';
-
-// types
-import { ModuleProps, ModuleRef } from './types';
-// constants
-
-// hooks
-import { useModal } from '@m4l/components';
-
-export const InnerModule = forwardRef<ModuleRef, ModuleProps>((props, ref) => {
-    const { children } = props;
-    const { openModal } = useModal();
-    const divRef = useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(ref, () => ({
-        openModal,
-        current: divRef.current,
-    }));
-
-    return (
-        <WrapperInnerModule id="WrapperInnerModule" className="m4l_module_layout" ref={divRef}>
-            <ModuleContent id="ModuleContent">{children}</ModuleContent>
-        </WrapperInnerModule>
-    );
-});
-
-InnerModule.displayName = 'InnerModule';

package/src/layouts/ModuleLayout/subcomponents/InnerModule/styles.tsx

@@ -1,31 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperInnerModule = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    margin: '0px 12px 12px 12px',
-
-    left: '0px',
-    right: '0px',
-    top: '0px',
-    bottom: '0px',
-
-    overflow: 'hidden',
-}));
-
-export const ModuleContent = styled('div')(({ theme }) => ({
-    display: 'flex',
-    // flexDirection: "column",
-    position: 'relative',
-    marginTop: theme.spacing(1),
-    justifyContent: 'center',
-
-    // left: "0px",
-    // right: "0px",
-    // top: "72px",
-    // bottom: "0px",
-    flexGrow: '1',
-    // padding: "16px",
-    overflow: 'hidden',
-}));

package/src/layouts/ModuleLayout/subcomponents/InnerModule/types.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { ModalOpenOptions } from '@m4l/components';
-
-export type ModuleRef = {
-    openModal: (modalOpenProps: ModalOpenOptions) => void;
-    current: HTMLDivElement | null;
-};
-
-export interface ModuleProps {
-    children: ReactNode;
-}

package/src/layouts/ModuleLayout/types.ts

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ModalOpenOptions, ModuleAction } from '@m4l/components';
-
-import type { ModuleRef } from './subcomponents/InnerModule/types';
-
-export interface ContainerProps {
-    vertical: boolean;
-}
-
-export type ModuleLayoutRef = {
-    openModal: (modalOpenProps: ModalOpenOptions) => void;
-    current: ModuleRef | null;
-};
-
-// export type Skeleton = 'form' | 'masterdetail_1';
-
-export interface ModuleLayoutProps {
-    // skeleton: Skeleton;
-    moduleId: string;
-    // urlIcon: string;
-    // currentLang: string;
-    // skeletonFlags: string[];
-    // moduleNameField?: string;
-    // privileges: string[];
-    // breadcrumbLinks: TLink[];
-    moduleActions: ModuleAction[];
-    //defaultDictionary: ModuleDictionary;
-    // componentsDictionary: string[];
-    // master: (props: any) => JSX.Element;
-    children: ReactNode;
-}

package/src/layouts/NoAuthModuleLayout/dicctionary.ts

@@ -1,9 +0,0 @@
-import type { Dictionary } from '@m4l/core';
-
-export function getNoAuthModuleLayoutComponentsDictionary() {
-    return ['no_auth_module_layout'];
-}
-
-export const defaultNoAuthModuleLayoutDictionary: Dictionary = {
-    no_auth_module_layout: {},
-};

package/src/layouts/NoAuthModuleLayout/index.tsx

@@ -1,85 +0,0 @@
-//react
-
-//external libraries
-
-//componentes estilados
-
-//sub components
-import { InnerModule } from './subcomponents/InnerModule';
-
-//types
-import { NoAuthBaseProviderProps, NoAuthModuleLayoutProps } from './types';
-
-//constants
-
-//context
-
-import {
-    BaseProvider,
-    FlagsProvider,
-    ModuleDictionaryProvider,
-    ModuleSkeletonProvider,
-    useEnvironment,
-} from '@m4l/core';
-import { useLocales } from '@m4l/graphics';
-
-//hooks
-
-export const NoAuthModuleLayout = (props: NoAuthModuleLayoutProps) => {
-    const {
-        moduleId,
-        moduleNameField,
-        children,
-        componentsDictionary,
-        skeletonFlags,
-        subtitle,
-        companyLogoSmallUrl,
-        companyLogoNormalUrl,
-        moduleIlustrationUrl,
-    } = props;
-
-    const { host_static_assets, environment_assets } = useEnvironment();
-
-    const localeString = useLocales().currentLocale?.localeString;
-
-    const finalCompanyLogoNormalUrl =
-        companyLogoNormalUrl ||
-        `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/logotipo_m4l.svg`;
-    const finalCompanyLogoSmallUrl =
-        companyLogoSmallUrl ||
-        `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/isotipo_m4l.svg`;
-    const finalIllustrationUrl =
-        moduleIlustrationUrl ||
-        `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`;
-
-    const finalSkeletonFlags = skeletonFlags;
-
-    if (finalSkeletonFlags.findIndex(f => f === 'dictionary_loaded') < 0) {
-        finalSkeletonFlags.push('dictionary_loaded');
-    }
-
-    return (
-        <BaseProvider<NoAuthBaseProviderProps>
-            value={{
-                subtitle,
-                companyLogoSmallUrl: finalCompanyLogoSmallUrl,
-                companyLogoNormalUrl: finalCompanyLogoNormalUrl,
-                moduleIlustrationUrl: finalIllustrationUrl,
-            }}
-        >
-            <FlagsProvider>
-                <ModuleDictionaryProvider
-                    isAuth={false}
-                    moduleId={moduleId}
-                    moduleNameField={moduleNameField}
-                    componentsDictionary={componentsDictionary}
-                    currentLang={localeString}
-                >
-                    <ModuleSkeletonProvider flags={finalSkeletonFlags}>
-                        <InnerModule>{children}</InnerModule>
-                    </ModuleSkeletonProvider>
-                </ModuleDictionaryProvider>
-            </FlagsProvider>
-        </BaseProvider>
-    );
-};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.tsx

@@ -1,43 +0,0 @@
-//react
-// m4l
-import { useResponsive } from '@m4l/graphics';
-import { HelmetPage } from '@m4l/components';
-
-//mui
-//external libraries
-
-//my components
-import { LogoLeyend } from './subcomponents/LogoLeyend';
-import { AppBarForm } from './subcomponents/AppBarForm';
-//componentes estilados
-
-import { WrapperMain } from './styles';
-
-//sub components
-
-//types
-
-//constants
-
-//hooks
-
-import { useBase, useModuleDictionary } from '@m4l/core';
-
-import { ModuleProps } from './types';
-import { NoAuthBaseProviderProps } from '../../types';
-
-export const InnerModule = (props: ModuleProps) => {
-    const { children } = props;
-    const { getModuleLabel } = useModuleDictionary();
-    const mdUp = useResponsive('up', 'md');
-    const { subtitle } = useBase<NoAuthBaseProviderProps>();
-
-    return (
-        <HelmetPage title={getModuleLabel()} subtitle={subtitle}>
-            <WrapperMain>
-                {mdUp ? <LogoLeyend /> : null}
-                <AppBarForm>{children}</AppBarForm>
-            </WrapperMain>
-        </HelmetPage>
-    );
-};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.tsx

@@ -1,6 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperMain = styled('div')(() => ({
-    display: 'flex',
-    height: '100vh',
-}));

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/index.tsx

@@ -1,14 +0,0 @@
-import { WrapperAppBarForm } from './styles';
-import { AppBar } from './subcomponents/AppBar';
-import { Form } from './subcomponents/Form';
-import { WrapperAppBarFormProps } from './types';
-
-export const AppBarForm = (props: WrapperAppBarFormProps) => {
-    const { children } = props;
-    return (
-        <WrapperAppBarForm>
-            <AppBar />
-            <Form>{children}</Form>
-        </WrapperAppBarForm>
-    );
-};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/styles.tsx

@@ -1,7 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAppBarForm = styled('div')(() => ({
-    flexGrow: '1',
-    display: 'flex',
-    flexDirection: 'column',
-}));

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/AppBar/index.tsx

@@ -1,25 +0,0 @@
-import { Image, LanguagePopover } from '@m4l/components';
-import { useBase } from '@m4l/core';
-import { useResponsive } from '@m4l/graphics';
-import { NoAuthBaseProviderProps } from '../../../../../../types';
-
-import { WrapperAppBar } from './styles';
-export const AppBar = () => {
-    const { companyLogoSmallUrl } = useBase<NoAuthBaseProviderProps>();
-    const downMd = useResponsive('down', 'md');
-
-    return (
-        <WrapperAppBar>
-            {downMd ? (
-                <Image
-                    key={'Isotipo'}
-                    src={companyLogoSmallUrl}
-                    width={'40px'}
-                    height={'40px'}
-                    skeletonVariant="circle"
-                />
-            ) : null}
-            <LanguagePopover />
-        </WrapperAppBar>
-    );
-};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/AppBar/styles.tsx

@@ -1,11 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperAppBar = styled('header')(({ theme }) => ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing(1, 3),
-    [theme.breakpoints.up('md')]: {
-        justifyContent: 'flex-end',
-    },
-}));