@m4l/layouts 7.0.0 → 7.0.1

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/DesktopContent/styles.js

@@ -0,0 +1,115 @@
+import { styled, alpha } from "@mui/material/styles";
+const DesktopContentRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  borderRadius: "16px",
+  backgroundColor: theme.vars.palette.background.surface,
+  boxShadow: theme.vars.customShadows?.z4,
+  padding: "20px 0 20px 20px",
+  width: "100%",
+  height: "100%",
+  maxWidth: "965px",
+  maxHeight: "900px",
+  position: "relative",
+  overflow: "auto",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "20px",
+    right: "20px",
+    zIndex: 1
+  },
+  "& .M4LIconButton-root.config-icon": {
+    position: "absolute",
+    top: "25px",
+    right: "56px",
+    zIndex: 1
+  }
+}));
+const DesktopBanner = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "12px",
+  width: "100%",
+  maxWidth: "400px",
+  height: "100%",
+  backgroundColor: theme.vars.palette.primary.focusActive,
+  boxShadow: theme.vars.customShadows?.z4,
+  padding: "0 60px",
+  gap: "40px",
+  overflow: "hidden",
+  "& .MuiTypography-root": {
+    color: theme.palette.common?.white,
+    display: "flex",
+    justifyContent: "center",
+    textAlign: "center",
+    textTransform: "uppercase"
+  },
+  "& .M4LTypography-root .MuiSkeleton-root": {
+    backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
+    margin: "auto"
+  }
+}));
+const ContainerLogo = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "84px",
+  height: "84px",
+  borderRadius: "6px",
+  backgroundColor: theme.vars.palette.primary?.focusActive,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: theme.vars.palette.common?.white,
+    borderRadius: "6px"
+  }
+}));
+const CompanyName = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+}));
+const CompanyLeyend = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "5px",
+  width: "100%"
+}));
+const FormContent = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "0 60px 0 80px",
+  margin: "auto 0",
+  width: "100%",
+  height: "auto",
+  gap: "20px"
+}));
+const WrapperFormContent = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}));
+const ContainerModuleName = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+export {
+  ContainerLogo as C,
+  DesktopContentRoot as D,
+  FormContent as F,
+  WrapperFormContent as W,
+  DesktopBanner as a,
+  CompanyName as b,
+  CompanyLeyend as c,
+  ContainerModuleName as d
+};

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.d.ts

@@ -1,2 +1,8 @@
-/// <reference types="react" />
-export declare const MobileContent: () => import("react").JSX.Element;
+/**
+ * Contenido de la vista mobile
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const MobileContent: () => import("react/jsx-runtime").JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/index.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Image, Typography, LanguagePopover, ScrollBar } from "@m4l/components";
+import { M as MobileContentRoot, a as MobileBanner, C as ContainerLogo, b as CompanyName, W as WrapperFormContent, F as FormContent, c as ContainerModuleName } from "./styles.js";
+import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
+const MobileContent = () => {
+  const { children, companyLogoSmallUrl } = useBase();
+  const { getLabel } = useModuleDictionary();
+  const { name } = useDomain();
+  return /* @__PURE__ */ jsxs(MobileContentRoot, { children: [
+    /* @__PURE__ */ jsxs(MobileBanner, { children: [
+      /* @__PURE__ */ jsx(ContainerLogo, { children: /* @__PURE__ */ jsx(Image, { src: companyLogoSmallUrl, ratio: "1:1", width: "44px", height: "44px" }) }),
+      /* @__PURE__ */ jsxs(CompanyName, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitleDens",
+            skeletonWidth: "70%",
+            skeletonHeight: "24px",
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "paragraph", skeletonWidth: "40%", skeletonHeight: "20px", children: getLabel("company_name_subtitle") })
+      ] }),
+      /* @__PURE__ */ jsx(LanguagePopover, {})
+    ] }),
+    /* @__PURE__ */ jsx(WrapperFormContent, { children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsxs(FormContent, { children: [
+      /* @__PURE__ */ jsxs(ContainerModuleName, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", skeletonWidth: "20%", skeletonHeight: "36px", children: getLabel("module_name") }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "paragraph",
+            skeletonWidth: "40%",
+            skeletonHeight: "20px",
+            children: getLabel("module_description")
+          }
+        )
+      ] }),
+      children
+    ] }) }) })
+  ] });
+};
+export {
+  MobileContent as M
+};

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-export declare const MobileContentRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MobileBanner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerImageLanguage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerLogo: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CompanyName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FormContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrapperFormContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerModuleName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileContentRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileBanner: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerImageLanguage: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerLogo: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CompanyName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperFormContent: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerModuleName: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/MobileContent/styles.js

@@ -0,0 +1,96 @@
+import { styled, alpha } from "@mui/material/styles";
+const MobileContentRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+  backgroundColor: theme.vars.palette.background.surface,
+  padding: "12px",
+  gap: "32px"
+}));
+const MobileBanner = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  gap: "20px",
+  width: "100%",
+  backgroundColor: theme.vars.palette.primary.focusActive,
+  boxShadow: theme.customShadows?.z4,
+  position: "relative",
+  borderRadius: "8px",
+  "& .M4LanguagePopover-root": {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    zIndex: 1
+  },
+  "& .M4LIconButton-root.config-icon": {
+    position: "absolute",
+    top: "13px",
+    right: "40px",
+    zIndex: 1,
+    "& .M4LIcon-root .M4LIcon-icon": {
+      backgroundColor: theme.vars.palette.common?.white
+    }
+  },
+  "& .MuiTypography-root": {
+    color: theme.vars.palette.common?.white,
+    display: "flex",
+    textTransform: "uppercase"
+  },
+  "& .MuiSkeleton-root": {
+    backgroundColor: alpha(`${theme.colorSchemes.finalTheme.palette.common.white}`, 0.24),
+    margin: "auto"
+  }
+}));
+styled("div")(() => ({
+  display: "flex"
+}));
+const ContainerLogo = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "52px",
+  height: "52px",
+  borderRadius: "6px",
+  backgroundColor: theme.vars.palette.primary?.focusActive,
+  justifyContent: "center",
+  alignItems: "center",
+  boxShadow: `0px 4px 8px  ${alpha(theme.colorSchemes.finalTheme.palette.grey["700"] || "", 0.16)}`,
+  "& .M4LImage-root": {
+    backgroundColor: theme.vars.palette.common?.white,
+    borderRadius: "6px"
+  }
+}));
+const CompanyName = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+}));
+const FormContent = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: "12px",
+  margin: "auto 0",
+  width: "100%",
+  gap: "20px"
+}));
+const WrapperFormContent = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}));
+const ContainerModuleName = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: "4px"
+}));
+export {
+  ContainerLogo as C,
+  FormContent as F,
+  MobileContentRoot as M,
+  WrapperFormContent as W,
+  MobileBanner as a,
+  CompanyName as b,
+  ContainerModuleName as c
+};

package/layouts/NoAuthModuleLayout/types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 export interface ContainerProps {
     vertical: boolean;
 }
-export declare type MenuActionType = 'main' | 'allways' | 'normal';
+export type MenuActionType = 'main' | 'allways' | 'normal';
 export declare interface NoAuthBaseProviderProps {
     subtitle?: string;
     companyLogoSmallUrl: string;

package/layouts/index.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,26 +1,43 @@
 {
   "name": "@m4l/layouts",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "license": "UNLICENSED",
   "author": "M4L Team",
-  "private": false,
-  "dependencies": {
-    "@mui/material": "5.15.19"
+  "lint-staged": {
+    "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "^6.0.0",
-    "@m4l/styles": "^6.0.0",
-    "@m4l/components": "^7.0.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0",
-    "eventemitter3": "^4.0.7",
+    "@m4l/components": "^7.1.2",
+    "@m4l/core": "^2.0.10",
+    "@m4l/graphics": "^7.0.2",
+    "@m4l/styles": "^7.0.1",
+    "@mui/lab": "5.0.0-alpha.173",
+    "@mui/material": "^5.15.19",
+    "@mui/x-date-pickers": "^6.11.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "history": "5.3.0",
     "nprogress": "^0.2.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-toastify": "10.0.5"
   },
+  "resolutions": {
+    "glob": "^10.4.5",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0"
+  },
+  "overrides": {
+    "glob": "^10.4.5",
+    "eslint": "^9.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "files": [
     "*"
   ],
@@ -35,5 +52,7 @@
   },
   "engines": {
     "node": ">=12.0.0"
-  }
+  },
+  "packageManager": "yarn@4.5.0",
+  "private": false
 }

package/test/utils.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+/**
+ * Custom render function to wrap providers
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-09 19:56:26 - automatic
+ * @updatedAt 2024-10-09 20:00:30 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+declare const customRender: (ui: React.ReactElement, options?: {}) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+export { customRender as render };

package/vite-env.d.ts

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

package/components/MFHostApp/index-Bz3RUvvY.js

@@ -1,90 +0,0 @@
-import { unstable_HistoryRouter } from "react-router-dom";
-import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
-import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
-import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider, AppearanceComponentProvider } from "@m4l/components";
-import { useTheme } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-import { M as MFWindowsTitle } from "../index-uQ5qk7MJ.js";
-function MFHostApp(props) {
-  const {
-    children,
-    currentLocale,
-    hostTheme,
-    environment,
-    hostTools,
-    axiosOperation,
-    formatters,
-    isAuth = true,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    dynamicMFStore,
-    windowTools,
-    observedDivRef,
-    isAddEditModule = false
-  } = props;
-  const {
-    generalSettings
-  } = useTheme();
-  return /* @__PURE__ */ jsx(EnvironmentProvider, {
-    ...environment,
-    children: /* @__PURE__ */ jsx(HostToolsProvider, {
-      ...hostTools,
-      children: /* @__PURE__ */ jsx(NetworkProvider, {
-        axiosOperation,
-        children: /* @__PURE__ */ jsx(LocalesProvider, {
-          isMicroFrontEnd: true,
-          localeHost: currentLocale,
-          children: /* @__PURE__ */ jsx(HostThemeProvider, {
-            isMicroFrontEnd: true,
-            ...hostTheme,
-            isMobile: generalSettings?.isMobile,
-            children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
-              observedDivRef,
-              children: /* @__PURE__ */ jsx(unstable_HistoryRouter, {
-                history: hostTools.history,
-                children: /* @__PURE__ */ jsx(DomainCountryProvider, {
-                  isMicroFrontEnd: true,
-                  id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
-                  currency: formatters.currencyFormatter.code,
-                  currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
-                  decimal_symbol: formatters.numberFormatter.decimalSymbol,
-                  thousands_symbol: formatters.numberFormatter.thousandsSymbol,
-                  children: /* @__PURE__ */ jsx(BaseModule, {
-                    isAuth,
-                    moduleId,
-                    moduleNameField,
-                    componentsDictionary,
-                    skeletonFlags,
-                    privileges,
-                    children: /* @__PURE__ */ jsx(FormatterProvider, {
-                      isMicroFrontEnd: true,
-                      ...formatters,
-                      children: /* @__PURE__ */ jsx(WindowToolsMFProvider, {
-                        ...windowTools,
-                        children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
-                          store: dynamicMFStore,
-                          children: /* @__PURE__ */ jsx(MFWindowsTitle, {
-                            isAddEditModule,
-                            children: /* @__PURE__ */ jsx(AppearanceComponentProvider, {
-                              children
-                            })
-                          })
-                        })
-                      })
-                    })
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-}
-export {
-  MFHostApp as M
-};

package/components/index-uQ5qk7MJ.js

@@ -1,60 +0,0 @@
-import { DomainCountryProvider } from "@m4l/core";
-import { FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
-import { BaseModule, useSetWindowsTitle } from "@m4l/components";
-import { jsx } from "react/jsx-runtime";
-import { Fragment } from "react";
-function MFNoAuthApp(props) {
-  const {
-    children,
-    formatters,
-    moduleId,
-    moduleNameField,
-    skeletonFlags,
-    privileges,
-    componentsDictionary,
-    isAuth,
-    observedDivRef
-  } = props;
-  const domianCountry = {
-    id: 1,
-    currency: "USD",
-    currency_decimal_digits: 2,
-    decimal_symbol: ".",
-    thousands_symbol: ","
-  };
-  return /* @__PURE__ */ jsx(DomainCountryProvider, {
-    isMicroFrontEnd: true,
-    ...domianCountry,
-    children: /* @__PURE__ */ jsx(BaseModule, {
-      isAuth,
-      moduleId,
-      moduleNameField,
-      componentsDictionary,
-      skeletonFlags,
-      privileges,
-      children: /* @__PURE__ */ jsx(FormatterProvider, {
-        isMicroFrontEnd: true,
-        ...formatters,
-        children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
-          observedDivRef,
-          children
-        })
-      })
-    })
-  });
-}
-function MFWindowsTitle({
-  isAddEditModule = false,
-  children
-}) {
-  useSetWindowsTitle({
-    isAddEditModule
-  });
-  return /* @__PURE__ */ jsx(Fragment, {
-    children
-  });
-}
-export {
-  MFWindowsTitle as M,
-  MFNoAuthApp as a
-};

package/hooks/useModule/index-FY5nsBmE.js

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { M as ModuleContext } from "../../layouts/ModuleLayout/index-DAtDuh6s.js";
-const useModule = () => {
-  const context = useContext(ModuleContext);
-  if (!context) throw new Error("useModule context must be use inside ModuleContext");
-  return context;
-};
-export {
-  useModule as u
-};