@m4l/layouts 0.1.23 → 0.1.26

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

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

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

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

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

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

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

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

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

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

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

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

package/src/layouts/NoAuthModuleLayout/types.ts

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

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

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

package/src/test/utils.tsx

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

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

package/tsconfig.json

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

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

package/vite.config.ts

@@ -0,0 +1,172 @@
+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',
+                },
+            },
+        },
+    },
+});

package/components/MFHostApp/index.55a1f3a4.js

@@ -1,52 +0,0 @@
-import { unstable_HistoryRouter as a } from "react-router-dom";
-import { EnvironmentProvider as l, HostToolsProvider as u, NetworkProvider as h, DomainCountryProvider as y } from "@m4l/core";
-import { LocalesProvider as F, HostThemeProvider as v, FormatterProvider as p } from "@m4l/graphics";
-import { jsx as r } from "react/jsx-runtime";
-function E(t) {
-  const {
-    children: i,
-    currentLocale: n,
-    hostTheme: c,
-    environment: m,
-    hostTools: e,
-    axiosOperation: s,
-    formatters: o,
-    dynamicMFParameters: d
-  } = t;
-  return /* @__PURE__ */ r(l, {
-    ...m,
-    children: /* @__PURE__ */ r(u, {
-      ...e,
-      children: /* @__PURE__ */ r(h, {
-        axiosOperation: s,
-        children: /* @__PURE__ */ r(F, {
-          isMicroFrontEnd: !0,
-          localeHost: n,
-          children: /* @__PURE__ */ r(v, {
-            isMicroFrontEnd: !0,
-            ...c,
-            children: /* @__PURE__ */ r(a, {
-              history: e.history,
-              children: /* @__PURE__ */ r(y, {
-                isMicroFrontEnd: !0,
-                id: d?.id || 1,
-                currency: o.currencyFormatter.code,
-                currency_decimal_digits: o.currencyFormatter.decimalDigits,
-                decimal_symbol: o.numberFormatter.decimalSymbol,
-                thousands_symbol: o.numberFormatter.thousandsSymbol,
-                children: /* @__PURE__ */ r(p, {
-                  isMicroFrontEnd: !0,
-                  ...o,
-                  children: i
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-}
-export {
-  E as M
-};

package/components/MFIsolationApp/index.eaf655eb.js

@@ -1,116 +0,0 @@
-import { useEffect as p, useMemo as u } from "react";
-import { unstable_HistoryRouter as v } from "react-router-dom";
-import { ToastContainer as g, toast as P } from "react-toastify";
-import { HostThemeProvider as F, defaultThemeOptions as b, fnComponentsOverrides as w, FormatterProvider as A, LocalesProvider as M, getLocaleFromNetwork as E } from "@m4l/graphics";
-import { A as T } from "../../contexts/AuthContext/index.6f966215.js";
-import { DomainCountryProvider as x, voidFunction as m, EnvironmentProvider as C, HostToolsProvider as D, NetworkProvider as H, axiosOperation as N } from "@m4l/core";
-import { f as O, c as k, N as l } from "../../node_modules.d8c1c0ec.js";
-import { u as L } from "../../hooks/useAuth/index.cb6a3420.js";
-import { jsx as o, jsxs as j } from "react/jsx-runtime";
-function I(s) {
-  const {
-    children: n,
-    user: c,
-    pwd: d
-  } = s, {
-    isAuthenticated: t,
-    isInitialized: i,
-    login: a,
-    user: e
-  } = L();
-  if (p(() => {
-    i && t === !1 && a(c, d, !1);
-  }, [i, t]), !t)
-    return /* @__PURE__ */ o("div", {
-      children: "Pendiente x atenticar"
-    });
-  const r = {
-    id: 1,
-    currency: "USD",
-    currency_decimal_digits: 2,
-    decimal_symbol: ".",
-    thousands_symbol: ","
-  };
-  return e?.domain_country && (r.id = e?.domain_country.id ?? r.id, r.currency = e?.domain_country.currency ?? r.currency, r.currency_decimal_digits = e?.domain_country.currency_decimal_digits ?? r.currency_decimal_digits, r.decimal_symbol = e?.domain_country.decimal_symbol ?? r.decimal_symbol, r.thousands_symbol = e?.domain_country?.thousands_symbol ?? r.thousands_symbol), /* @__PURE__ */ j(F, {
-    hostThemeOptions: b,
-    fnComponentsOverrides: w,
-    isMicroFrontEnd: !0,
-    children: [/* @__PURE__ */ o(g, {}), /* @__PURE__ */ o(x, {
-      ...r,
-      isMicroFrontEnd: !1,
-      children: /* @__PURE__ */ o(A, {
-        isMicroFrontEnd: !1,
-        dateFormatter: {
-          formatDate: O
-        },
-        currencyFormatter: {
-          code: r.currency,
-          decimalDigits: r.currency_decimal_digits
-        },
-        children: n
-      })
-    })]
-  });
-}
-const _ = k({
-  window
-});
-function Q(s) {
-  const {
-    children: n,
-    user: c,
-    pwd: d,
-    host_api_local: t,
-    host_api_remote: i,
-    host_static_assets: a,
-    environment_assets: e
-  } = s, r = () => {
-    l.configure({
-      showSpinner: !0
-    }), l.start();
-  }, h = () => {
-    l.done();
-  }, y = u(() => ({
-    host: "",
-    isLocalhost: !0,
-    domain_token: "lab1",
-    host_api_local: t,
-    host_api_remote: i,
-    host_static_assets: a,
-    environment_assets: e
-  }), []), f = u(() => ({
-    history: _,
-    toast: P,
-    startProgress: r,
-    stopProgress: h,
-    events_add_listener: m,
-    events_remove_listener: m,
-    events_emit: m
-  }), []);
-  return /* @__PURE__ */ o(C, {
-    ...y,
-    children: /* @__PURE__ */ o(D, {
-      ...f,
-      children: /* @__PURE__ */ o(H, {
-        axiosOperation: N,
-        children: /* @__PURE__ */ o(v, {
-          history: _,
-          children: /* @__PURE__ */ o(M, {
-            isMicroFrontEnd: !1,
-            getLocaleFromNetwork: E,
-            children: /* @__PURE__ */ o(T, {
-              children: /* @__PURE__ */ o(I, {
-                user: c,
-                pwd: d,
-                children: n
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-}
-export {
-  Q as M
-};

package/components/MFIsolationApp/types.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export declare type MFIsolationAppProps = {
-    host_api_local: string;
-    host_api_remote: string;
-    host_static_assets: string;
-    environment_assets: string;
-    user: string;
-    pwd: string;
-    children: ReactNode;
-};

package/components/index.d.ts

@@ -1,3 +0,0 @@
-export { MFIsolationApp } from './MFIsolationApp';
-export { MFHostApp } from './MFHostApp';
-export type { ByHostProps, DynamicMFParameters } from './MFHostApp/types';

package/index.js

@@ -1,38 +0,0 @@
-import { M as n } from "./components/MFIsolationApp/index.eaf655eb.js";
-import { M as f } from "./components/MFHostApp/index.55a1f3a4.js";
-import { a as D, A } from "./contexts/AuthContext/index.6f966215.js";
-import { a as c, d as g, g as h } from "./layouts/ModuleLayout/index.842072c5.js";
-import { a as N, d as F, g as v } from "./layouts/MasterDetailLayout/index.71de0dc7.js";
-import { N as I, d as P, g as b } from "./layouts/NoAuthModuleLayout/index.5d1098ef.js";
-import { u as k } from "./hooks/useMasterDetail/index.8e9e900b.js";
-import { u as w } from "./hooks/useAuth/index.cb6a3420.js";
-import { u as B } from "./hooks/useModule/index.096d7d13.js";
-import "react";
-import "react-router-dom";
-import "react-toastify";
-import "@m4l/graphics";
-import "@m4l/core";
-import "./node_modules.d8c1c0ec.js";
-import "./vendor.172dc010.js";
-import "react/jsx-runtime";
-import "@m4l/components";
-import "@mui/material";
-import "@mui/material/styles";
-export {
-  D as AuthContext,
-  A as AuthProvider,
-  f as MFHostApp,
-  n as MFIsolationApp,
-  N as MasterDetailLayout,
-  c as ModuleLayout,
-  I as NoAuthModuleLayout,
-  F as defaultMasterDetailDictionary,
-  g as defaultModuleLayoutDictionary,
-  P as defaultNoAuthModuleLayoutDictionary,
-  v as getMasterDetailLayoutComponentsDictionary,
-  h as getModuleLayoutComponentsDictionary,
-  b as getNoAuthModuleLayoutComponentsDictionary,
-  w as useAuth,
-  k as useMasterDetail,
-  B as useModule
-};

package/layouts/MasterDetailLayout/components/ButtonDetail/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ComponentActionProps } from '@m4l/components';
-export declare function ButtonDetail(props: ComponentActionProps): JSX.Element;