@m4l/layouts 9.1.8 → 9.1.10-beta.1

package/layouts/NoAuthModuleLayout/styles.js

@@ -0,0 +1,314 @@
+import { alpha } from "@mui/material/styles";
+const noAuthModuleLayoutStyles = {
+  /**
+   * ****************************************************
+   * Estilos para el contenedor raíz del componente
+   * BaseNoAuthModuleLayout.
+   * ****************************************************
+   */
+  baseNoAuthModuleLayoutRoot: ({ theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    padding: theme.vars.size.baseSpacings.sp5,
+    [theme.breakpoints.down("md")]: {
+      padding: theme.vars.size.baseSpacings.sp0
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor raíz del componente
+   * DesktopContent.
+   * ****************************************************
+   */
+  desktopContentRoot: ({ theme }) => ({
+    display: "flex",
+    borderRadius: theme.vars.size.borderRadius.r4,
+    backgroundColor: theme.vars.palette.background.surface,
+    boxShadow: theme.vars.customShadows?.z4,
+    padding: `${theme.vars.size.baseSpacings.sp5}`,
+    width: "100%",
+    height: "100%",
+    maxWidth: "965px",
+    //No hay token para este valor
+    maxHeight: "900px",
+    //No hay token para este valor
+    position: "relative",
+    overflow: "auto",
+    "& .M4LLanguagePopover-root": {
+      position: "absolute",
+      top: theme.vars.size.baseSpacings.sp5,
+      right: theme.vars.size.baseSpacings.sp5,
+      zIndex: 1
+    },
+    "& .M4LIconButton-root.config-icon": {
+      position: "absolute",
+      top: "25px",
+      //No hay token para este valor
+      right: theme.vars.size.baseSpacings.sp14,
+      zIndex: 1
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del banner en Desktop.
+   * ****************************************************
+   */
+  desktopBanner: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: theme.vars.size.borderRadius.r3,
+    width: "100%",
+    maxWidth: "400px",
+    //No hay token para este valor
+    height: "100%",
+    backgroundColor: theme.vars.palette.primary.enabled,
+    boxShadow: theme.vars.customShadows?.z4,
+    padding: `${theme.vars.size.baseSpacings.sp0} 60px`,
+    //No hay token para el valor 60px
+    gap: theme.vars.size.baseSpacings.sp10,
+    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"
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del logo en Desktop.
+   * ****************************************************
+   */
+  containerLogoDesktop: ({ theme }) => ({
+    display: "flex",
+    width: "84px",
+    //No hay token para este valor
+    height: "84px",
+    //No hay token para este valor
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    backgroundColor: theme.vars.palette.primary.hover,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: theme.vars.size.baseSpacings.sp3,
+    "& .M4LImage-root": {
+      backgroundColor: theme.vars.palette.common?.white,
+      borderRadius: theme.vars.size.borderRadius["r1-5"]
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del nombre de la empresa
+   * en Desktop.
+   * ****************************************************
+   */
+  companyNameDesktop: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%"
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del eslogan de la empresa
+   * en Desktop.
+   * ****************************************************
+   */
+  companyLeyendDesktop: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp2,
+    width: "100%"
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del formulario en Desktop.
+   * ****************************************************
+   */
+  formContentDesktop: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${theme.vars.size.baseSpacings.sp0} 72px`,
+    //No hay token para los valores 60px y 80px
+    margin: "auto 0",
+    width: "100%",
+    height: "auto",
+    gap: theme.vars.size.baseSpacings.sp5
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el wrapper del contenedor en desktop
+   * ****************************************************
+   */
+  wrapperFormContentDesktop: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * ************************************************************
+   * Estilos para el contenedor del nombre de la app en desktop
+   * ************************************************************
+   */
+  containerModuleNameDesktop: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * ************************************************************
+   * Estilos para el contenedor del formulario en desktop
+   * ************************************************************
+   */
+  contentFormDesktop: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  }),
+  typographyBanner: ({ theme }) => ({
+    color: `${theme.vars.palette.primary.contrastText} !important`
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor raíz del componente
+   * MobileContent.
+   * ****************************************************
+   */
+  mobileContentRoot: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    backgroundColor: theme.vars.palette.background.surface,
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp8
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del banner móvil.
+   * ****************************************************
+   */
+  mobileBanner: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp5,
+    width: "100%",
+    backgroundColor: theme.vars.palette.primary.enabled,
+    boxShadow: theme.customShadows?.z4,
+    position: "relative",
+    borderRadius: theme.vars.size.borderRadius.r2,
+    "& .M4LLanguagePopover-root": {
+      position: "absolute",
+      top: theme.vars.size.baseSpacings.sp3,
+      right: theme.vars.size.baseSpacings.sp3,
+      zIndex: 1
+    },
+    "& .M4LIconButton-root.config-icon": {
+      position: "absolute",
+      top: theme.vars.size.baseSpacings.sp3,
+      right: theme.vars.size.baseSpacings.sp10,
+      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"
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor de la imagen que
+   * representa el lenguaje
+   * ****************************************************
+   */
+  containerImageLanguage: () => ({
+    display: "flex"
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del logo
+   * ****************************************************
+   */
+  containerLogo: ({ theme }) => ({
+    display: "flex",
+    width: theme.vars.size.baseSpacings.sp13,
+    height: theme.vars.size.baseSpacings.sp13,
+    borderRadius: theme.vars.size.borderRadius["r1-5"],
+    backgroundColor: theme.vars.palette.primary.hover,
+    justifyContent: "center",
+    alignItems: "center",
+    "& .M4LImage-root": {
+      backgroundColor: theme.vars.palette.common?.white,
+      borderRadius: theme.vars.size.borderRadius["r1-5"]
+    }
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del nombre de la empresa
+   * ****************************************************
+   */
+  companyName: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del formulario
+   * ****************************************************
+   */
+  formContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.vars.size.baseSpacings.sp4,
+    margin: "auto 0",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp5
+  }),
+  /**
+   * ****************************************************
+   *  Estilos para el wrapper del contenedor del formulario
+   * ****************************************************
+   */
+  wrapperFormContent: () => ({
+    display: "flex",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * ****************************************************
+   * Estilos para el contenedor del nombre del módulo
+   * de la plataforma
+   * ****************************************************
+   */
+  containerModuleName: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: theme.vars.size.baseSpacings.sp2
+  })
+};
+export {
+  noAuthModuleLayoutStyles as n
+};

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que contiene el contenido de la vista de escritorio/ móvil
+ */
+export declare const BaseNoAuthModuleLayout: () => import("react/jsx-runtime").JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/index.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { HelmetPage } from "@m4l/components";
+import { useModuleDictionary, useBase } from "@m4l/core";
+import { D as DesktopContent } from "./subcomponents/DesktopContent/index.js";
+import { M as MobileContent } from "./subcomponents/MobileContent/index.js";
+import { useIsMobile } from "@m4l/graphics";
+import { B as BaseNoAuthModuleLayoutRootStyled } from "../../slots/NoAuthModuleLayoutSlots.js";
+const BaseNoAuthModuleLayout = () => {
+  const { getModuleLabel } = useModuleDictionary();
+  const isMobile = useIsMobile();
+  const { subtitle } = useBase();
+  return /* @__PURE__ */ jsx(HelmetPage, { title: getModuleLabel(), subtitle, children: /* @__PURE__ */ jsx(BaseNoAuthModuleLayoutRootStyled, { id: "modulerootnouth", "data-testid": "modulerootnouth", children: isMobile ? /* @__PURE__ */ jsx(MobileContent, {}) : /* @__PURE__ */ jsx(DesktopContent, {}) }) });
+};
+export {
+  BaseNoAuthModuleLayout as B
+};

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/DesktopContent/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que contiene el contenido de la vista de escritorio
+ */
+export declare const DesktopContent: () => import("react/jsx-runtime").JSX.Element;

package/layouts/NoAuthModuleLayout/subcomponents/BaseNoAuthModuleLayout/subcomponents/DesktopContent/index.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { LanguagePopover, Image, Typography, Stack, ScrollBar } from "@m4l/components";
+import { D as DesktopContentRootStyled, a as DesktopBannerStyled, C as ContainerLogoDesktopStyled, b as CompanyNameDesktopStyled, T as TypographyBannerStyled, c as CompanyLeyendDesktopStyled, W as WrapperFormContentDesktopStyled, F as FormContentDesktopStyled, d as ContainerModuleNameDesktopStyled } from "../../../../slots/NoAuthModuleLayoutSlots.js";
+import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
+const DesktopContent = () => {
+  const { children, companyLogoSmallUrl } = useBase();
+  const { getLabel } = useModuleDictionary();
+  const { name, slogan } = useDomain();
+  return /* @__PURE__ */ jsxs(DesktopContentRootStyled, { children: [
+    /* @__PURE__ */ jsx(LanguagePopover, {}),
+    /* @__PURE__ */ jsxs(DesktopBannerStyled, { children: [
+      /* @__PURE__ */ jsx(ContainerLogoDesktopStyled, { children: /* @__PURE__ */ jsx(Image, { src: companyLogoSmallUrl, width: "60px", height: "60px" }) }),
+      /* @__PURE__ */ jsxs(CompanyNameDesktopStyled, { children: [
+        /* @__PURE__ */ jsx(
+          TypographyBannerStyled,
+          {
+            variant: "subtitleDens",
+            skeletonWidth: "70%",
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsx(TypographyBannerStyled, { variant: "subtitle", skeletonWidth: "40%", children: getLabel("company_name_subtitle") })
+      ] }),
+      /* @__PURE__ */ jsxs(CompanyLeyendDesktopStyled, { children: [
+        /* @__PURE__ */ jsx(TypographyBannerStyled, { variant: "h5", skeletonWidth: "50%", children: getLabel("module_leyend") }),
+        /* @__PURE__ */ jsx(TypographyBannerStyled, { variant: "paragraph", skeletonWidth: "80%", children: slogan })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(WrapperFormContentDesktopStyled, { children: /* @__PURE__ */ jsxs(FormContentDesktopStyled, { children: [
+      /* @__PURE__ */ jsxs(ContainerModuleNameDesktopStyled, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "20%", children: getLabel("module_name") }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle",
+            skeletonWidth: "40%",
+            children: getLabel("module_description")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { direction: "column", height: "auto", children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(Fragment, { children }) }) })
+    ] }) })
+  ] });
+};
+export {
+  DesktopContent as D
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Contenido de la vista mobile
+ */
+export declare const MobileContent: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Image, LanguagePopover, ScrollBar, Typography } from "@m4l/components";
+import { M as MobileContentRootStyled, e as MobileBannerStyled, f as ContainerLogoStyled, g as CompanyNameStyled, T as TypographyBannerStyled, h as WrapperFormContentStyled, i as FormContentStyled, j as ContainerModuleNameStyled } from "../../../../slots/NoAuthModuleLayoutSlots.js";
+import { useBase, useModuleDictionary, useDomain } from "@m4l/core";
+const MobileContent = () => {
+  const { children, companyLogoSmallUrl } = useBase();
+  const { getLabel } = useModuleDictionary();
+  const { name } = useDomain();
+  return /* @__PURE__ */ jsxs(MobileContentRootStyled, { children: [
+    /* @__PURE__ */ jsxs(MobileBannerStyled, { children: [
+      /* @__PURE__ */ jsx(ContainerLogoStyled, { children: /* @__PURE__ */ jsx(Image, { src: companyLogoSmallUrl, width: "44px", height: "44px" }) }),
+      /* @__PURE__ */ jsxs(CompanyNameStyled, { children: [
+        /* @__PURE__ */ jsx(
+          TypographyBannerStyled,
+          {
+            variant: "subtitleDens",
+            skeletonWidth: "70%",
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsx(TypographyBannerStyled, { variant: "subtitle", skeletonWidth: "40%", children: getLabel("company_name_subtitle") })
+      ] }),
+      /* @__PURE__ */ jsx(LanguagePopover, {})
+    ] }),
+    /* @__PURE__ */ jsx(WrapperFormContentStyled, { children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsxs(FormContentStyled, { children: [
+      /* @__PURE__ */ jsxs(ContainerModuleNameStyled, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "20%", children: getLabel("module_name") }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle",
+            skeletonWidth: "40%",
+            children: getLabel("module_description")
+          }
+        )
+      ] }),
+      children
+    ] }) }) })
+  ] });
+};
+export {
+  MobileContent as M
+};

package/layouts/NoAuthModuleLayout/tests/NoAuthModuleLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/layouts/NoAuthModuleLayout/types.d.ts

@@ -1,20 +1,65 @@
 import { ReactNode } from 'react';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material/styles';
+import { DesktopContentSlots, InnerModuleSlots, MobileContentSlots } from './slots/NoAuthModuleLayoutEnum';
+import { NOT_AUTH_MODULE_LAYOUT_KEY } from './constants';
 export interface ContainerProps {
     vertical: boolean;
 }
 export type MenuActionType = 'main' | 'allways' | 'normal';
 export declare interface NoAuthBaseProviderProps {
+    /**
+     * Indica el Subtitulo del layout
+     */
     subtitle?: string;
+    /**
+     * Url de la imagen de la compañía en tamaño pequeño
+     */
     companyLogoSmallUrl: string;
+    /**
+     * Url de la imagen de la compañía en tamaño normal
+     */
     companyLogoNormalUrl: string;
+    /**
+     * Url de la imagen de ilustración del módulo
+     */
     moduleIlustrationUrl?: string;
+    /**
+     * Componente que será envuelto por el layout
+     */
     children: ReactNode;
+    /**
+     * Función que se ejecuta al hacer clic en el botón de configuración
+     */
     handleSetting?: () => void;
 }
 export interface NoAuthModuleLayoutProps extends NoAuthBaseProviderProps {
+    /**
+     * Identificador del módulo
+     */
     moduleId: string;
+    /**
+     * Campo del nombre del módulo
+     */
     moduleNameField?: string;
+    /**
+     * Lista de componentes que se deben cargar del diccionario
+     */
     componentsDictionary: string[];
+    /**
+     * Lista de flags que se deben cargar en el esqueleto
+     */
     skeletonFlags: string[];
+    /**
+     * Referencia al div observado
+     */
     observedDivRef: Element | Text | null;
 }
+/**
+ * Define los tipos de Slots disponibles para el `NoAuthModuleLayout`.
+ */
+export type NoAuthModuleLayoutSlotsType = InnerModuleSlots | MobileContentSlots | DesktopContentSlots;
+/**
+ * Estilos aplicables al `NoAuthModuleLayout`
+ */
+export type NoAuthModuleLayoutStyles = OverridesStyleRules<NoAuthModuleLayoutSlotsType, typeof NOT_AUTH_MODULE_LAYOUT_KEY, Theme>;

package/layouts/index.d.ts

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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@m4l/layouts",
-  "version": "9.1.8",
+  "version": "9.1.10-beta.1",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
   },
   "peerDependencies": {
-    "@m4l/components": "^9.0.0",
+    "@m4l/components": "^9.2.15-beta.2",
     "@m4l/core": "^2.0.0",
     "@m4l/graphics": "^7.0.0",
     "@m4l/styles": "^7.0.0"
@@ -18,7 +18,8 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^4.0.0"
+    "@vitejs/plugin-react": "^4.0.0",
+    "storybook": "^8.3.4"
   },
   "overrides": {
     "glob": "^10.4.5",

package/storybook/layouts/ModuleLayout/ModuleLayout.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AreasAdmin, PaperForm } from '@m4l/components';
+declare const meta: Meta<typeof AreasAdmin>;
+type Story = StoryObj<typeof PaperForm>;
+export declare const Default: Story;
+export default meta;

package/storybook/layouts/ModuleLayout/moks/mokData.d.ts

@@ -0,0 +1,14 @@
+export declare const MOCK_CLIENTS: {
+    nombre: string;
+    correo: string;
+    telefono: string;
+    direccion: string;
+    ciudad: string;
+}[];
+export declare const MOCK_USERS: {
+    nombre: string;
+    apellido: string;
+    email: string;
+    telefono: string;
+    activo: boolean;
+}[];

package/storybook/layouts/ModuleLayout/subcomponents/ClientsHeaderActions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que define las acciones del header para "clientes"
+ */
+export declare function ClientsHeaderActions(): import("react/jsx-runtime").JSX.Element;

package/storybook/layouts/ModuleLayout/subcomponents/RenderModuleLayout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Render para utilizar el componente ModuleLayout
+ * en AreasViewer en el storybook
+ */
+declare const RenderModuleLayout: () => import("react/jsx-runtime").JSX.Element;
+export default RenderModuleLayout;

package/storybook/layouts/ModuleLayout/subcomponents/UsersHeaderActions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que define las acciones del header para "usuarios"
+ */
+export declare function UsersHeaderActions(): import("react/jsx-runtime").JSX.Element;

package/storybook/layouts/ModuleLayout/subcomponents/WithExtendedContainer.d.ts

@@ -0,0 +1,5 @@
+import { StoryContext, StoryFn } from '@storybook/react';
+/**
+ * con contenedor extendido
+ */
+export declare const WithExtendedContainer: (MyStory: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/storybook/layouts/NoAuthModuleLayout/NoAuthModuleLayout.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { NoAuthModuleLayout } from '../../../src/layouts/NoAuthModuleLayout/index';
+declare const meta: Meta<typeof NoAuthModuleLayout>;
+type Story = StoryObj<typeof NoAuthModuleLayout>;
+/**
+ * NoAuthModuleLayout component por defecto con el logo de la compañía.
+ */
+export declare const Default: Story;
+export default meta;

package/test/HostThemeProviderMock.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface HostThemeProviderMockProps {
+    dataTestId?: string;
+    children: React.ReactNode;
+}
+/**
+ * TODO: Documentar
+ */
+declare const HostThemeProviderMock: (props: HostThemeProviderMockProps) => import("react/jsx-runtime").JSX.Element;
+export default HostThemeProviderMock;

package/test/TestAppWrapper.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+import { DeviceType } from '@m4l/graphics';
+interface TestAppWrapperProps {
+    forcedDeviceType?: DeviceType;
+    children: ReactNode;
+}
+/**
+ * TestWrapper is a React functional component that provides a consistent testing environment
+ * for components that rely on various context providers.
+ *
+ * It wraps the children components with the following contexts:
+ * - ModuleSkeletonContext: Provides the skeleton loading state for components that require it.
+ * - HostThemeProviderMock: Mocks the theme provider to ensure components are styled correctly during tests.
+ * - AppearanceComponentProvider: Supplies the necessary context for appearance-related components.
+ *
+ * This wrapper is useful for reducing redundancy in tests by encapsulating common providers,
+ * allowing for cleaner and more maintainable test code.
+ * @param {Object} props - The properties passed to the component.
+ * @param {ReactNode} props.children - The child components that will be rendered within the context providers.
+ * @example
+ * // Usage example
+ * render(
+ *   <TestWrapper>
+ *     <MyComponent />
+ *   </TestWrapper>
+ * );
+ */
+export declare const TestAppWrapper: FC<TestAppWrapperProps>;
+export default TestAppWrapper;

package/test/TestFormAutoValidation.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Envoltorio para el estado de error
+ */
+export declare const TestFormAutoValidation: () => import("react/jsx-runtime").JSX.Element;