@m4l/layouts 0.1.26 → 0.1.30

package/src/contexts/AuthContext/types.ts

@@ -1,65 +0,0 @@
-import { DomainCountry, Maybe } from '@m4l/core';
-import { ReactNode } from 'react';
-
-// eslint-disable-next-line no-shadow
-export enum EnumTypes {
-    Initial = 'INITIALIZE',
-    Login = 'LOGIN',
-    Logout = 'LOGOUT',
-}
-
-export type AuthProviderProps = {
-    children: ReactNode;
-};
-
-export type ActionMap<M extends { [index: string]: any }> = {
-    [Key in keyof M]: M[Key] extends undefined
-        ? {
-              type: Key;
-          }
-        : {
-              type: Key;
-              payload: M[Key];
-          };
-};
-
-export type SessionAuthPayload = {
-    [EnumTypes.Initial]: {
-        isAuthenticated: boolean;
-        user: AuthUser;
-    };
-    [EnumTypes.Login]: {
-        user: AuthUser;
-    };
-    [EnumTypes.Logout]: undefined;
-};
-
-export type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
-
-// export type AuthStoreState = {
-//     user: User;
-//     remember?: boolean;
-// };
-
-export interface User {
-    email: string;
-    id: number;
-    first_name: string;
-    last_name: string;
-    account_id: number;
-    domain_country: DomainCountry;
-    avatar_url?: Maybe<string>;
-}
-
-export type AuthUser = Maybe<User>;
-
-export type AuthState = {
-    isAuthenticated: boolean;
-    isInitialized: boolean;
-    user: AuthUser;
-};
-
-export interface SessionContextType extends AuthState {
-    login: (email: string, password: string, remember: boolean) => object | undefined;
-    logout: (isAuthenticated: boolean) => Promise<void>;
-}

package/src/contexts/index.ts

@@ -1 +0,0 @@
-export * from './AuthContext';

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from './useMasterDetail';
-
-export * from './useAuth';
-
-export * from './useModule';

package/src/hooks/useAuth/index.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { AuthContext } from '../../contexts/AuthContext';
-
-export const useAuth = () => {
-    const context = useContext(AuthContext);
-
-    if (!context) throw new Error('Auth context must be use inside AuthProvider');
-
-    return context;
-};
-
-export default useAuth;

package/src/hooks/useMasterDetail/index.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { MasterDetailContext } from '../../layouts/MasterDetailLayout/contexts/MasterDetailContext';
-
-// ----------------------------------------------------------------------
-
-export const useMasterDetail = () => useContext(MasterDetailContext);

package/src/hooks/useModule/index.ts

@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { ModuleContext } from '../../layouts/ModuleLayout/contexts/ModuleContext';
-
-// ----------------------------------------------------------------------
-export const useModule = () => {
-    const context = useContext(ModuleContext);
-
-    if (!context) throw new Error('useModule context must be use inside ModuleContext');
-
-    return context;
-};
-
-export default useModule;

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './components';
-
-export * from './contexts';
-
-export * from './layouts';
-
-export * from './hooks';

package/src/layouts/MasterDetailLayout/components/ButtonDetail/index.tsx

@@ -1,38 +0,0 @@
-// react
-
-// mui
-import { Button } from '@mui/material';
-import { ComponentActionProps } from '@m4l/components';
-import { useMasterDetail } from '../../../../hooks/useMasterDetail';
-
-// external libraries
-
-// componentes estilados
-
-// sub components
-
-// dictionary
-
-// context
-
-// hooks
-
-// types
-
-// constants
-
-export function ButtonDetail(props: ComponentActionProps) {
-    const { masterSelection } = useMasterDetail();
-    const { onClick, description } = props;
-
-    return (
-        <Button
-            key="miDetail"
-            onClick={onClick}
-            variant="outlined"
-            disabled={masterSelection === undefined ? true : false}
-        >
-            {description}
-        </Button>
-    );
-}

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/index.tsx

@@ -1,34 +0,0 @@
-// react
-import { createContext, useState } from 'react';
-import { voidFunction } from '@m4l/core';
-
-// types
-import { MasterDetailContextProps, MasterDetailProviderProps, MasterSelecion } from './types';
-
-const initialState: MasterDetailContextProps = {
-    masterSelection: undefined,
-    onChangeMasterSelection: voidFunction,
-};
-
-const MasterDetailContext = createContext<MasterDetailContextProps>(initialState);
-
-// ----------------------------------------------------------------------
-
-function MasterDetailProvider(props: MasterDetailProviderProps) {
-    const { children } = props;
-
-    const [masterSelection, setMasterSelection] = useState<MasterSelecion>(undefined);
-
-    return (
-        <MasterDetailContext.Provider
-            value={{
-                masterSelection,
-                onChangeMasterSelection: setMasterSelection,
-            }}
-        >
-            {children}
-        </MasterDetailContext.Provider>
-    );
-}
-
-export { MasterDetailProvider, MasterDetailContext };

package/src/layouts/MasterDetailLayout/contexts/MasterDetailContext/types.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-
-export type MasterSelecion = any | any[] | undefined;
-
-export interface MasterDetailContextStateProps {
-    masterSelection?: MasterSelecion;
-    // splitPosition?: SplitPosition;
-}
-
-export interface MasterDetailProviderProps {
-    // masterSelection: MasterSelecion;
-    // setMasterSelection: (newMasterSelecion: MasterSelecion) => void;
-    children: ReactNode;
-}
-
-export interface MasterDetailContextProps extends MasterDetailContextStateProps {
-    onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
-    // onChangeSplitPosition: (newMasterSelection: MasterSelecion) => void;
-}

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;
-}