@m4l/layouts 0.1.26 → 0.1.30

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',
-    },
-}));

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

@@ -1,17 +0,0 @@
-// import { useDomain } from '@m4l/core';
-// import { useResponsive } from '@m4l/graphics';
-import { WrapperFormScroll, WrapperForm } from './styles';
-import { NameDescription } from './subcomponents/NameDescription';
-import { WrapperFormScrollProps } from './types';
-
-export const Form = (props: WrapperFormScrollProps) => {
-    const { children } = props;
-    return (
-        <WrapperFormScroll>
-            <WrapperForm>
-                <NameDescription />
-                {children}
-            </WrapperForm>
-        </WrapperFormScroll>
-    );
-};

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

@@ -1,19 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperFormScroll = styled('div')(() => ({
-    display: 'flex',
-    overflow: 'auto',
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-}));
-
-export const WrapperForm = styled('div')(({ theme }) => ({
-    display: 'flex',
-    width: '100%',
-    height: 'auto',
-    margin: 'auto',
-    maxWidth: '480px',
-    flexDirection: 'column',
-    gap: theme.spacing(3),
-}));

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

@@ -1,25 +0,0 @@
-// import { useDomain } from '@m4l/core';
-// import { useResponsive } from '@m4l/graphics';
-import { Typography } from '@m4l/components';
-import { useModuleDictionary } from '@m4l/core';
-import { WrapperNameDescription } from './styles';
-export const NameDescription = () => {
-    /* const downMd = useResponsive('down', 'md'); */
-
-    const { getModuleLabel, getLabel } = useModuleDictionary();
-    return (
-        <WrapperNameDescription>
-            <Typography
-                key={'ModuleName'}
-                variant="h4"
-                skeletonWidth={'35%'}
-                skeletongHeight={'36px'}
-            >
-                {getModuleLabel()}
-            </Typography>
-            <Typography key={'ModuleDescription'} skeletonWidth={'60%'} skeletongHeight={'21px'}>
-                {getLabel('module_description')}
-            </Typography>
-        </WrapperNameDescription>
-    );
-};

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

@@ -1,8 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperNameDescription = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    padding: theme.spacing(0, 3),
-}));

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/Form/types.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface WrapperFormScrollProps {
-    children: ReactNode;
-}

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/types.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface WrapperAppBarFormProps {
-    children: ReactNode;
-}

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

@@ -1,28 +0,0 @@
-import { Image, Typography } from '@m4l/components';
-import { useBase, useModuleDictionary } from '@m4l/core';
-import { NoAuthBaseProviderProps } from '../../../../types';
-import { WrapperLogoLeyend } from './styles';
-
-export const LogoLeyend = () => {
-    const { getLabel } = useModuleDictionary();
-    const { companyLogoNormalUrl, moduleIlustrationUrl } = useBase<NoAuthBaseProviderProps>();
-    return (
-        <WrapperLogoLeyend>
-            <Image
-                key={'Logo'}
-                width={'400px'}
-                height={'400px'}
-                src={companyLogoNormalUrl}
-                // effect="opacity"
-                alt="logo"
-            />
-            {moduleIlustrationUrl ? (
-                <Image src={moduleIlustrationUrl} width={'100%'} height={'300px'} />
-            ) : null}
-
-            <Typography key={'Leyend'} variant="h3" skeletonWidth={'30%'} skeletongHeight={'18px'}>
-                {getLabel('module_leyend')}
-            </Typography>
-        </WrapperLogoLeyend>
-    );
-};

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

@@ -1,16 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperLogoLeyend = styled('div')(({ theme }) => ({
-    boxShadow: theme.customShadows.card,
-    borderRadius: theme.spacing(2),
-    width: '100%',
-    maxWidth: '464px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    margin: theme.spacing(2, 0, 2, 2),
-    padding: theme.spacing(4, 3),
-    gap: theme.spacing(3),
-    overflow: 'hidden',
-}));

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

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface ModuleProps {
-    children: ReactNode;
-}

package/src/layouts/NoAuthModuleLayout/types.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface ContainerProps {
-    vertical: boolean;
-}
-
-export type MenuActionType = 'main' | 'allways' | 'normal';
-
-export declare interface NoAuthBaseProviderProps {
-    subtitle?: string;
-    companyLogoSmallUrl: string;
-    companyLogoNormalUrl: string;
-    moduleIlustrationUrl?: string;
-}
-
-export interface NoAuthModuleLayoutProps extends NoAuthBaseProviderProps {
-    moduleId: string;
-    moduleNameField?: string;
-    componentsDictionary: string[];
-    skeletonFlags: string[];
-    children: ReactNode;
-}

package/src/layouts/index.ts

@@ -1,8 +0,0 @@
-export { ModuleLayout } from './ModuleLayout';
-export * from './ModuleLayout/dicctionary';
-
-export { MasterDetailLayout } from './MasterDetailLayout';
-export * from './MasterDetailLayout/dicctionary';
-
-export { NoAuthModuleLayout } from './NoAuthModuleLayout';
-export * from './NoAuthModuleLayout/dicctionary';

package/src/test/setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/test/utils.tsx

@@ -1,20 +0,0 @@
-import { cleanup, render } from '@testing-library/react';
-import React from 'react';
-import { afterEach } from 'vitest';
-
-afterEach(() => {
-    cleanup();
-});
-
-const customRender = (ui: React.ReactElement, options = {}) => {
-    return render(ui, {
-        // wrap provider(s) here if needed
-        wrapper: ({ children }) => children,
-        ...options,
-    });
-};
-
-export * from '@testing-library/react';
-export { default as userEvent } from '@testing-library/user-event';
-
-export { customRender as render };

package/src/vite-env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />
-/// <reference types="vitest/importMeta" />

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "downlevelIteration":true,
-    "importHelpers": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "importsNotUsedAsValues":"remove",
-    "baseUrl": ".",
-    "paths": {
-    }
-  },
-  "include": ["src", "../m4l_components/src/contexts/DynamicMFParmsContext", "../m4l_components/src/hooks/useDynamicMFParameters"],
-  "exclude": ["node_modules","dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,172 +0,0 @@
-import react from '@vitejs/plugin-react';
-import * as path from 'path';
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-
-function manualChunks(id: string, _api: any) {
-    //components
-    if (id.includes('src/components/')) {
-        if (id.includes('MFHostApp')) {
-            return 'components/MFHostApp/index';
-        }
-        if (id.includes('MFIsolationApp')) {
-            return 'components/MFIsolationApp/index';
-        }
-        if (id.includes('BaseModule')) {
-            return 'components/BaseModule/index';
-        }
-        return 'components/index';
-    }
-    if (id.includes('src/contexts/')) {
-        //context
-        if (id.includes('AuthContext')) {
-            return 'contexts/AuthContext/index';
-        }
-        return 'contexts/index';
-    }
-    //layouts
-    if (id.includes('src/layouts/')) {
-        if (id.includes('NoAuthModuleLayout')) {
-            return 'layouts/NoAuthModuleLayout/index';
-        }
-
-        if (id.includes('MasterDetailLayout')) {
-            return 'layouts/MasterDetailLayout/index';
-        }
-
-        if (id.includes('ModuleLayout')) {
-            return 'layouts/ModuleLayout/index';
-        }
-
-        return 'layouts/index';
-    }
-    //hooks
-    if (id.includes('src/hooks/')) {
-        if (id.includes('useMasterDetail')) {
-            return 'hooks/useMasterDetail/index';
-        }
-
-        if (id.includes('useModule')) {
-            return 'hooks/useModule/index';
-        }
-
-        if (id.includes('useAuth')) {
-            return 'hooks/useAuth/index';
-        }
-        return 'hooks/index';
-    }
-    //node_modules no reconocidos
-    if (id.includes('node_modules')) {
-        console.log('node_modules******^', id);
-        return 'node_modules';
-    }
-
-    return 'vendor';
-}
-
-const examined_libs = [];
-
-const isExternal = (source: string, importer: string | undefined, isResolved: boolean): boolean => {
-    const internal_exact_libs = ['lib1', 'lib2']; //librerias que van incluirse en el bundle final da la librería
-    const external_exact_libs = [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        '@m4l/core',
-        '@m4l/graphics',
-        '@m4l/components',
-        '@emotion/styled',
-        'react-router-dom',
-        'react-toastify',
-    ];
-    const external_parcial_libs = [
-        '@mui',
-        '@m4l',
-        'date-fns',
-        'nprogress',
-        'history',
-        'eventemitter3',
-    ];
-
-    if (internal_exact_libs.findIndex(l => source === l) > -1) {
-        return false;
-    }
-
-    const isExt =
-        external_exact_libs.findIndex(l => source === l) > -1 ||
-        external_parcial_libs.findIndex(pl => source.indexOf(pl) > -1) > -1;
-    if (isExt) {
-        if (examined_libs.findIndex(l => source === l) < 0) {
-            console.log(
-                'Source: ',
-                source,
-                ' Importer:',
-                ' isResolved:',
-                isResolved,
-                ' IsExt:',
-                isExt,
-            );
-            examined_libs.push(source);
-        }
-    }
-
-    return isExt;
-};
-
-export default defineConfig({
-    server: { https: true, port: 4002 },
-    // test: {
-    //     globals: true,
-    //     include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    //     environment: 'jsdom',
-    //     setupFiles: './src/test/setup.ts',
-    //     coverage: {
-    //         all: true,
-    //         include: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    //         reporter: ['text', 'json', 'html'],
-    //     },
-    // },
-
-    plugins: [
-        dts({
-            insertTypesEntry: true,
-            beforeWriteFile: (filePath: string, content: string) => {
-                return { filePath: filePath.replace('m4l_layouts/src/', ''), content };
-            },
-        }),
-        react(),
-        // terser(),
-    ],
-    // mode: 'production',
-    build: {
-        //manifest: true,
-        target: 'esNext', //Compila en esNext teniendo en cuenta que va a ser leida no por el navedado,sino por otros proyectos
-        lib: {
-            entry: path.resolve(__dirname, 'src/index.ts'),
-            name: 'm4l_layouts',
-            formats: ['es'],
-            fileName: () => `index.js`,
-        },
-        rollupOptions: {
-            external: isExternal,
-
-            // input: ['src/index.ts'],
-
-            output: {
-                manualChunks,
-                exports: 'auto',
-                format: 'esm',
-                generatedCode: 'es2015',
-
-                dir: 'dist', // Carpenta donde se genera el bundle
-                globals: {
-                    react: 'React',
-                    'react-dom': 'ReactDOM',
-                    'react/jsx-runtime': 'react/jsx-runtime',
-                },
-            },
-        },
-    },
-});