@m4l/components 9.3.4 → 9.3.6

package/components/SettingsLayout/test/SettingsLayout.test.d.ts

@@ -0,0 +1,18 @@
+export declare const mockThemeUserSettings: {
+    themeMode: string;
+    themeColor: string;
+    themeDirection: string;
+    themeLayout: string;
+    themeStretch: boolean;
+};
+export declare const mockSettingsActions: {
+    init: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeMode: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeColor: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeDirection: import('vitest').Mock<(...args: any[]) => any>;
+    onChangeLayout: import('vitest').Mock<(...args: any[]) => any>;
+    onToggleStretch: import('vitest').Mock<(...args: any[]) => any>;
+    onResetSetting: import('vitest').Mock<(...args: any[]) => any>;
+    handleOpen: import('vitest').Mock<(...args: any[]) => any>;
+    setThemeSettings: import('vitest').Mock<(...args: any[]) => any>;
+};

package/components/SettingsLayout/types.d.ts

@@ -0,0 +1,47 @@
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { SettingsLayoutSlots } from './slots/SettingsLayoutEnum';
+import { SETTINGS_LAYOUT_COMPONENT_KEY } from './constants';
+import { Theme } from '@mui/material';
+import { Sizes, ThemeUserColor } from '@m4l/styles';
+import { ThemeSettingsStore } from '@m4l/graphics';
+export interface SettingsLayoutProps {
+    /**
+     * Propiedad que define el ancho del componente.
+     */
+    width?: number;
+    /**
+     * Medida de tamaño para el componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Nombre de clase css.
+     */
+    className?: string;
+    /**
+     * Identificador usado para pruebas del componente.
+     */
+    dataTestId?: string;
+}
+/**
+ * Tipo para las ranuras del componente.
+ * Este tipo se refiere a las claves dentro de `SettingsLayoutSlots`, que determinan los diferentes elementos
+ * estilizados dentro del componente, como el `root`, `backdrop`, etc.
+ */
+export type SettingsLayoutSlotsType = keyof typeof SettingsLayoutSlots;
+/**
+ * Combinación de las propiedades del componente y su estado propietario.
+ * Este tipo se utiliza para describir el estado completo del componente , incluyendo
+ * las propiedades pasadas al componente y el estado calculado.
+ */
+export interface SettingsLayoutOwnerState extends Pick<ThemeSettingsStore['themeUserSettings'], 'themeDirection'> {
+    width: SettingsLayoutProps['width'];
+    size: SettingsLayoutProps['size'];
+    color?: ThemeUserColor;
+    [key: string]: unknown;
+}
+/**
+ * Tipos de estilos para el componente.
+ * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`SettingsLayoutSlots`)
+ * y permite su sobrescritura.
+ */
+export type SettingsLayoutstyles = M4LOverridesStyleRules<SettingsLayoutSlots, typeof SETTINGS_LAYOUT_COMPONENT_KEY, Theme>;

package/components/extended/React-Json-Viewer/ReactJsonViewer.d.ts

@@ -0,0 +1,7 @@
+import { ReactJsonViewerProps } from './types';
+/**
+ * Componente para visualizar datos en formato JSON.
+ * @param props - Props del componente.
+ * @returns Componente ReactJsonViewer.
+ */
+export declare const ReactJsonViewer: (props: ReactJsonViewerProps) => import("react/jsx-runtime").JSX.Element;

package/components/extended/React-Json-Viewer/ReactJsonViewer.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import ReactJson from "@microlink/react-json-view";
+import { R as ReactJsonViewerRootStyled } from "./slots/ReactJsonViewerSlots.js";
+import { R as REACT_JSON_VIEWER_CLASSES } from "./constants.js";
+import { useTheme } from "@mui/material";
+import { g as getReactJsonViewerTheme } from "./helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js";
+const ReactJsonViewer = (props) => {
+  const { className, dataTestId, ...others } = props;
+  const muiTheme = useTheme();
+  const theme = getReactJsonViewerTheme(muiTheme);
+  return /* @__PURE__ */ jsx(
+    ReactJsonViewerRootStyled,
+    {
+      className: clsx(REACT_JSON_VIEWER_CLASSES.root, className),
+      dataTestId,
+      role: "application",
+      "aria-label": "JSON data viewer",
+      children: /* @__PURE__ */ jsx(
+        ReactJson,
+        {
+          theme,
+          ...others
+        }
+      )
+    }
+  );
+};
+export {
+  ReactJsonViewer as R
+};

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.d.ts

@@ -0,0 +1,2 @@
+import { ReactJsonViewerStyles } from './types';
+export declare const reactJsonViewerStyles: ReactJsonViewerStyles;

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.js

@@ -0,0 +1,12 @@
+const reactJsonViewerStyles = {
+  /**
+   * Estilos del componente ReactJson.
+   */
+  root: () => ({
+    width: "100%",
+    height: "100%"
+  })
+};
+export {
+  reactJsonViewerStyles as r
+};

package/components/extended/React-Json-Viewer/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+export declare const REACT_JSON_VIEWER_CLASSES: Record<string, string>;

package/components/extended/React-Json-Viewer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as ReactJsonViewerSlots } from "./slots/ReactJsonViewerEnum.js";
+const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+const REACT_JSON_VIEWER_CLASSES = getComponentClasses(REACT_JSON_VIEWER_KEY_COMPONENT, ReactJsonViewerSlots);
+export {
+  REACT_JSON_VIEWER_CLASSES as R,
+  REACT_JSON_VIEWER_KEY_COMPONENT as a
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.d.ts

@@ -0,0 +1,8 @@
+import { ThemeObject } from '@microlink/react-json-view';
+import { Theme } from '@mui/material';
+/**
+ * Función para obtener los colores del tema de MUI.
+ * @param muiTheme - Tema de MUI.
+ * @returns Colores del tema.
+ */
+export declare const getReactJsonViewerTheme: (muiTheme: Theme) => ThemeObject;

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js

@@ -0,0 +1,23 @@
+const getReactJsonViewerTheme = (muiTheme) => {
+  return {
+    base00: muiTheme?.vars?.palette?.background?.default,
+    base01: muiTheme?.vars?.palette?.background?.base,
+    base02: muiTheme?.vars?.palette?.background?.neutral,
+    base03: muiTheme?.vars?.palette?.text?.disabled,
+    base04: muiTheme?.vars?.palette?.text?.secondary,
+    base05: muiTheme?.vars?.palette?.text?.primary,
+    base06: muiTheme?.vars?.palette?.text?.primary,
+    base07: muiTheme?.vars?.palette?.text?.primary,
+    base08: muiTheme?.vars?.palette?.chips?.error?.outlined?.colorTone,
+    base09: muiTheme?.vars?.palette?.chips?.orange?.outlined?.color,
+    base0A: muiTheme?.vars?.palette?.chips?.warning?.outlined?.colorTone,
+    base0B: muiTheme?.vars?.palette?.chips?.forest?.outlined?.color,
+    base0C: muiTheme?.vars?.palette?.chips?.aqua?.outlined?.colorTone,
+    base0D: muiTheme?.vars?.palette?.chips?.info?.outlined?.colorTone,
+    base0E: muiTheme?.vars?.palette?.chips?.pink?.outlined?.colorTone,
+    base0F: muiTheme?.vars?.palette?.chips?.persianGreen?.outlined?.colorTone
+  };
+};
+export {
+  getReactJsonViewerTheme as g
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/index.d.ts

@@ -0,0 +1 @@
+export { getReactJsonViewerTheme } from './getReactJsonViewerTheme';

package/components/extended/React-Json-Viewer/index.d.ts

@@ -0,0 +1 @@
+export { ReactJsonViewer } from './ReactJsonViewer';

package/components/extended/React-Json-Viewer/index.js

@@ -0,0 +1 @@
+

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ReactJsonViewerSlots {
+    root = "root"
+}

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.js

@@ -0,0 +1,7 @@
+var ReactJsonViewerSlots = /* @__PURE__ */ ((ReactJsonViewerSlots2) => {
+  ReactJsonViewerSlots2["root"] = "root";
+  return ReactJsonViewerSlots2;
+})(ReactJsonViewerSlots || {});
+export {
+  ReactJsonViewerSlots as R
+};

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.d.ts

@@ -0,0 +1 @@
+export declare const ReactJsonViewerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { a as REACT_JSON_VIEWER_KEY_COMPONENT } from "../constants.js";
+import { R as ReactJsonViewerSlots } from "./ReactJsonViewerEnum.js";
+import { r as reactJsonViewerStyles } from "../ReactJsonViewer.styles.js";
+const ReactJsonViewerRootStyled = styled("div", {
+  name: REACT_JSON_VIEWER_KEY_COMPONENT,
+  slot: ReactJsonViewerSlots.root
+})(reactJsonViewerStyles?.root);
+export {
+  ReactJsonViewerRootStyled as R
+};

package/components/extended/React-Json-Viewer/test/ReactJsonViewer.test.d.ts

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

package/components/extended/React-Json-Viewer/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactJsonViewProps } from '@microlink/react-json-view';
+import { ReactJsonViewerSlots } from './slots/ReactJsonViewerEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { REACT_JSON_VIEWER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export interface ReactJsonViewerProps extends Omit<ReactJsonViewProps, 'theme'> {
+    className?: string;
+    dataTestId?: string;
+}
+export type ReactJsonViewerOwnerState = {};
+export type ReactJsonViewerSlotsType = keyof typeof ReactJsonViewerSlots;
+export type ReactJsonViewerStyles = M4LOverridesStyleRules<ReactJsonViewerSlotsType, typeof REACT_JSON_VIEWER_KEY_COMPONENT, Theme>;

package/components/extended/index.d.ts

@@ -2,3 +2,4 @@ export * from './React-Resizable';
 export * from './React-resizable-panels';
 export * from './React-Spinners';
 export * from './React-Window';
+export * from './React-Json-Viewer';

package/components/index.d.ts

@@ -45,5 +45,6 @@ export * from './ToastContainer';
 export * from './WindowBase';
 export * from './WindowConfirm';
 export * from './ModalDialog';
+export * from './SettingsLayout';
 export * from './Pager';
 export * from './ScrollBar';

package/index.js

@@ -72,6 +72,7 @@ import { S as S3 } from "./components/extended/React-resizable-panels/SplitLayou
 import { P } from "./components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.js";
 import { F } from "./components/extended/React-Window/FixedSizeList/FixedSizeList.js";
 import { V } from "./components/extended/React-Window/VariableSizeList/VariableSizeList.js";
+import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer.js";
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
@@ -121,34 +122,34 @@ import { g as g17 } from "./components/formatters/DistanceToNowFormatter/diction
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
 import { G } from "./components/GridLayout/GridLayout.js";
-import { R as R3 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R4 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { c as c2, e as e2, d as d3 } from "./components/GridLayout/subcomponents/Responsive/responsiveUtils.js";
 import { i, k } from "./components/GridLayout/utils.js";
 import { w } from "./components/GridLayout/subcomponents/withSizeProvider/index.js";
 import { H as H2 } from "./components/HelmetPage/index.js";
 import { H as H3 } from "./components/HelperError/HelperError.js";
-import { R as R4 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { R as R5 } from "./components/hook-form/RHFAutocomplete/RHFAutocomplete.js";
 import { g as g19 } from "./components/hook-form/RHFAutocomplete/dictionary.js";
-import { R as R5 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
+import { R as R6 } from "./components/hook-form/RHFAutocompleteAsync/RHFAutocompleteAsync.js";
 import { g as g20 } from "./components/hook-form/RHFAutocompleteAsync/dictionary.js";
-import { R as R6 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
-import { R as R7 } from "./components/hook-form/RHFMultiCheckbox/index.js";
-import { R as R8 } from "./components/hook-form/RHFSelect/RHFSelect.js";
-import { R as R9 } from "./components/hook-form/RHFHelperError/index.js";
-import { R as R10 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R11 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
-import { R as R12 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
-import { R as R13 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
-import { R as R14 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R15 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R7 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
+import { R as R8 } from "./components/hook-form/RHFMultiCheckbox/index.js";
+import { R as R9 } from "./components/hook-form/RHFSelect/RHFSelect.js";
+import { R as R10 } from "./components/hook-form/RHFHelperError/index.js";
+import { R as R11 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
+import { R as R12 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
+import { R as R13 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
+import { R as R14 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
+import { R as R15 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R16 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
 import { g as g21 } from "./components/hook-form/RHFPeriod/subcomponents/Period/dictionary.js";
 import { r } from "./components/hook-form/RHFPeriod/RHFPeriod.styles.js";
-import { R as R16 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R17 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R18 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { N as N3, P as P6, R as R19, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
-import { R as R20 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R21 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R17 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R18 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R19 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { N as N3, P as P6, R as R20, S as S7 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodSlots.js";
+import { R as R21 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R22 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
 import { I as I4 } from "./components/Icon/Icon.js";
 import { I as I5 } from "./components/Image/Image.js";
 import { L as L6 } from "./components/Label/Label.js";
@@ -186,8 +187,9 @@ import { D as D10, a as a13, M as M7 } from "./components/WindowBase/contexts/Dy
 import { W as W3 } from "./components/WindowConfirm/WindowConfirm.js";
 import { a as a14, g as g27 } from "./components/ModalDialog/dictionary.js";
 import { M as M8 } from "./components/ModalDialog/ModalDialog.js";
+import { S as S10 } from "./components/SettingsLayout/SettingsLayout.js";
 import { P as P13 } from "./components/Pager/Pager.js";
-import { F as F2, R as R22, u as u16 } from "./components/hook-form/RHFormContext/index.js";
+import { F as F2, R as R23, u as u16 } from "./components/hook-form/RHFormContext/index.js";
 import { g as g28 } from "./components/hook-form/RHFormContext/dictionary.js";
 import { u as u17 } from "./contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
 import { A as A16 } from "./contexts/AppearanceComponentContext/AppearanceComponentContext.js";
@@ -201,7 +203,7 @@ import { u as u22 } from "./hooks/useInterval/index.js";
 import { u as u23 } from "./hooks/useComponentSize/useComponentSize.js";
 import { u as u24 } from "./hooks/useFormReadyForUpdate/index.js";
 import { u as u25 } from "./hooks/useStateRef/index.js";
-import { S as S10 } from "./hooks/useSvgColor/constants.js";
+import { S as S11 } from "./hooks/useSvgColor/constants.js";
 import { u as u26 } from "./hooks/useSvgColor/useSvgColor.js";
 import { u as u27 } from "./hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
 import { u as u28 } from "./hooks/useDataGridPersistence/useDataGridPersistence.js";
@@ -326,33 +328,35 @@ export {
   P11 as PrintingSystem,
   P as PropagateLoaderSpinner,
   P12 as PropertyValue,
-  R4 as RHFAutocomplete,
-  R5 as RHFAutocompleteAsync,
-  R13 as RHFCheckbox,
-  R12 as RHFColorPicker,
-  R6 as RHFDateTime,
-  R9 as RHFHelperError,
-  R7 as RHFMultiCheckbox,
-  R20 as RHFNumberInput,
-  R16 as RHFPeriod,
-  R19 as RHFPeriodRootStyled,
-  R18 as RHFPeriodSlots,
-  R10 as RHFRadioGroup,
-  R8 as RHFSelect,
-  R14 as RHFTextField,
-  R15 as RHFTextFieldPassword,
-  R21 as RHFUploadImage,
-  R11 as RHFUploadSingleFile,
-  R17 as RHF_PERIOD_KEY_COMPONENT,
-  R22 as RHFormProvider,
+  R5 as RHFAutocomplete,
+  R6 as RHFAutocompleteAsync,
+  R14 as RHFCheckbox,
+  R13 as RHFColorPicker,
+  R7 as RHFDateTime,
+  R10 as RHFHelperError,
+  R8 as RHFMultiCheckbox,
+  R21 as RHFNumberInput,
+  R17 as RHFPeriod,
+  R20 as RHFPeriodRootStyled,
+  R19 as RHFPeriodSlots,
+  R11 as RHFRadioGroup,
+  R9 as RHFSelect,
+  R15 as RHFTextField,
+  R16 as RHFTextFieldPassword,
+  R22 as RHFUploadImage,
+  R12 as RHFUploadSingleFile,
+  R18 as RHF_PERIOD_KEY_COMPONENT,
+  R23 as RHFormProvider,
+  R3 as ReactJsonViewer,
   R as Resizable,
   R2 as ResizableBox,
-  R3 as Responsive,
-  S10 as SKELETON_SVG_ICON,
+  R4 as Responsive,
+  S11 as SKELETON_SVG_ICON,
   S8 as ScrollBar,
   S as SectionCommercial,
   S4 as Select,
   S7 as SelectStyled,
+  S10 as SettingsLayout,
   S9 as SideBar,
   S5 as Skeleton,
   S2 as SortCompareValues,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.4",
+  "version": "9.3.6",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

package/storybook/components/SettingsLayout/SettingsLayout.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SettingsLayout } from '../../../src/components/SettingsLayout/SettingsLayout';
+declare const meta: Meta<typeof SettingsLayout>;
+export default meta;
+type Story = StoryObj<typeof SettingsLayout>;
+export declare const Open: Story;

package/storybook/components/SettingsLayout/subcomponents/SettingsLayoutRender/SettingsLayoutsRender.d.ts

@@ -0,0 +1,5 @@
+import { SettingsLayoutProps } from '../../../../../src/components/SettingsLayout/';
+/**
+ * Wrapper para el componente SettingsLayout encargado de aplicar estilos y props por defecto
+ */
+export declare const SettingsLayoutRender: (props: Partial<SettingsLayoutProps>) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/SettingsLayout/subcomponents/SettingsLayoutRender/index.d.ts

@@ -0,0 +1 @@
+export { SettingsLayoutRender } from './SettingsLayoutsRender';

package/storybook/components/extended/React-Json-Viewer/ReactJsonViewer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactJsonViewer } from '../../../../src/components/extended/React-Json-Viewer';
+declare const meta: Meta<typeof ReactJsonViewer>;
+export default meta;
+type Story = StoryObj<typeof ReactJsonViewer>;
+/**
+ * ReactJsonViewer historia por defecto.
+ */
+export declare const ReactJsonViewerDefault: Story;