@m4l/components 0.2.35 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "0.2.35",
+  "version": "1.0.0",
   "license": "UNLICENSED",
   "lint-staged": {
     "src/**/*.{js,ts,jsx,tsx}": "eslint --max-warnings=0 --fix",
@@ -15,11 +15,20 @@
     "@m4l/core": "*",
     "@m4l/graphics": "*",
     "@m4l/styles": "*",
+    "@mui/material": "5.15.19",
     "@mui/lab": "5.0.0-alpha.89",
-    "@mui/material": "5.10.4",
     "@mui/x-date-pickers": "6.11.1",
+    "@storybook/addon-essentials": "8.1.5",
+    "@storybook/addon-interactions": "8.1.5",
+    "@storybook/addon-links": "8.1.5",
+    "@storybook/addon-onboarding": "8.1.5",
+    "@storybook/blocks": "8.1.5",
+    "@storybook/react": "8.1.5",
+    "@storybook/react-vite": "8.1.5",
+    "@storybook/test": "8.1.5",
     "chart.js": "^4.4.0",
     "chartjs-chart-error-bars": "^4.3.3",
+    "eslint-plugin-storybook": "0.8.0",
     "fast-equals": "^5.0.1",
     "immer": "^9.0.21",
     "install": "^0.13.0",
@@ -46,7 +55,9 @@
     "react-toastify": "9.0.5",
     "react-transition-group": "^4.4.5",
     "simplebar-react": "2.4.1",
+    "storybook": "8.1.5",
     "yup": "^0.32.11",
+    "esbuild": "^0.20.1",
     "zustand": "4.3.6"
   },
   "peerDependencies": {

package/{react-draggable.e4725f3a.js → react-draggable.5331add7.js}

@@ -2,7 +2,7 @@ import React__default from "react";
 import require$$1 from "prop-types";
 import require$$2 from "react-dom";
 import clsx from "clsx";
-import { d as domFns, s as shims, l as log, p as positionFns } from "./utils/index.6469f148.js";
+import { d as domFns, s as shims, l as log, p as positionFns } from "./utils/index.9ee4c99a.js";
 var cjs = { exports: {} };
 var Draggable$1 = {};
 var DraggableCore$2 = {};

package/{react-resizable.c07d63fb.js → react-resizable.37bfb965.js}

@@ -1,6 +1,6 @@
 import React__default from "react";
-import { c as cjs } from "./react-draggable.e4725f3a.js";
-import { u as utils } from "./utils/index.6469f148.js";
+import { c as cjs } from "./react-draggable.5331add7.js";
+import { u as utils } from "./utils/index.9ee4c99a.js";
 import require$$1 from "prop-types";
 var reactResizable = { exports: {} };
 var Resizable$2 = {};
@@ -574,9 +574,7 @@ reactResizable.exports = function() {
 };
 var Resizable = reactResizable.exports.Resizable = Resizable$2.default;
 var ResizableBox = reactResizable.exports.ResizableBox = ResizableBox$2.default;
-const react_resizable_css = ".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}";
 export {
   Resizable as R,
-  ResizableBox as a,
-  react_resizable_css as r
+  ResizableBox as a
 };

package/styles/DynamicFilter.styles.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFilterStyles } from '../components/DynamicFilter/types';
+export declare const dynamicFilterStyles: DynamicFilterStyles;

package/test/getNameDataTestId.aee44365.js

@@ -0,0 +1,10 @@
+const getNameDataTestId = (ELEMENT_PREFIX, ELEMENT_KEY, ELEMENT_ID) => {
+  return `${ELEMENT_PREFIX}-${[ELEMENT_KEY]}-${ELEMENT_ID}`;
+};
+function getPropDataTestId(prefix, keyName) {
+  return process.env.NODE_ENV !== "production" && prefix && keyName ? { ["data-testid"]: `${prefix}-${[keyName]}` } : {};
+}
+export {
+  getNameDataTestId as a,
+  getPropDataTestId as g
+};

package/test/getNameDataTestId.d.ts

@@ -1 +1,11 @@
 export declare const getNameDataTestId: <T>(ELEMENT_PREFIX: string, ELEMENT_KEY: keyof T, ELEMENT_ID: string) => string;
+/**
+ * Utilidad que permite generar el nombre único que sirve para realizar las pruebas unitarias y de integración.
+ * @param prefix -
+ * @param keyName
+ */
+export declare function getPropDataTestId(prefix: string, keyName: string): {
+    "data-testid": string;
+} | {
+    "data-testid"?: undefined;
+};

package/test/index.6d4b98b9.js

@@ -0,0 +1,4 @@
+const ACTIONINTRO_TEST_ID = "m4lactions";
+export {
+  ACTIONINTRO_TEST_ID as A
+};

package/utils/containerQuery.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare function containerQuery(breakpoints: Theme['breakpoints'], containerName?: string, size?: keyof Theme['breakpoints']['values']): string;

package/utils/{index.6469f148.js → index.9ee4c99a.js}

@@ -1,5 +1,7 @@
-import { generateUtilityClass } from "@mui/material";
-import React__default from "react";
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import React__default, { useEffect } from "react";
+import { unstable_composeClasses } from "@mui/base";
+import { aA as TYPOGRAPHY_PREFIX, aB as AVATAR_PREFIX, aC as BADGE_PREFIX, aD as LOADINGBUTTON_PREFIX, aE as RHFAUTOCOMPLETE_PREFIX, aF as COMMONACTIONS_PREFIX, aG as RHFAUTOCOMPLETEASYNC_PREFIX, aH as RHFCHEKCBOX_PREFIX, aI as RHFDATETIME_PREFIX, aJ as RHFTEXTFIELD_PREFIX, aK as RHFTEXTFIELDPASSWORD_PREFIX } from "../components/areas/constants.5387d83e.js";
 function isValidDate(d) {
   return d && d instanceof Date && !isNaN(d.getTime());
 }
@@ -512,12 +514,124 @@ function cloneElement(element, props) {
   }
   return /* @__PURE__ */ _react.default.cloneElement(element, props);
 }
+generateUtilityClasses("M4LTypography", [
+  "root"
+]);
+function getTypographyClassesUtilityClass(slot) {
+  return generateUtilityClass("M4LTypography", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getTypographyClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const getNameDataTestId$6 = (KEY) => {
+  return `${TYPOGRAPHY_PREFIX}-${KEY}`;
+};
+const getNameAvatarDataTestId = (KEY) => {
+  return `${AVATAR_PREFIX}-${KEY}`;
+};
+const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
+  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
+};
+const getNameDataTestId$5 = (KEY) => {
+  return `${LOADINGBUTTON_PREFIX}-${KEY}`;
+};
+const getNameDataTestId$4 = (KEY) => {
+  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
+};
+const getNameCommonActionsDataTestId = (KEY) => {
+  return `${COMMONACTIONS_PREFIX}-${KEY}`;
+};
+const getNameDataTestId$3 = (KEY) => {
+  return `${RHFAUTOCOMPLETEASYNC_PREFIX}-${KEY}`;
+};
+const getNameDataTestId$2 = (KEY, NAME) => {
+  return `${RHFCHEKCBOX_PREFIX}-${NAME}-${KEY}`;
+};
+const getNameRHFDateTimeDataTestId = (KEY) => {
+  return `${RHFDATETIME_PREFIX}-${KEY}`;
+};
+const getNameDataTestId$1 = (KEY) => {
+  return `${RHFTEXTFIELD_PREFIX}-${KEY}`;
+};
+const getNameDataTestId = (KEY) => {
+  return `${RHFTEXTFIELDPASSWORD_PREFIX}-${KEY}`;
+};
+function useOnClickOutside(ref, handler, noRef) {
+  useEffect(() => {
+    const listener = (event) => {
+      const el = ref?.current;
+      const noEl = noRef?.current;
+      if (!el || el.contains(event.target) || noEl && noEl.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+const getDataGridRowsFromSet = (set, rows, rowKeyGetter) => {
+  const rowsFinded = [];
+  if (set) {
+    if (set.size > 0) {
+      const iterator = set.entries();
+      for (let i = 0; i < set.size; i++) {
+        const entry = iterator.next().value;
+        const key = entry[1];
+        const row = rows.find((frow) => rowKeyGetter(frow) === key);
+        if (row) {
+          rowsFinded.push(row);
+        }
+      }
+    }
+  }
+  return rowsFinded;
+};
+function containerQuery(breakpoints, containerName = "", size = "sm") {
+  return breakpoints.down(size).replace("@media ", `@container ${containerName} `);
+}
+const isActive = (data) => {
+  const path = window.location.pathname;
+  if (data.path === path) {
+    return true;
+  }
+  if (data.children) {
+    return data.children.some((item) => isActive(item));
+  }
+  return false;
+};
 export {
+  useUtilityClasses as a,
+  getNameDataTestId$6 as b,
+  containerQuery as c,
   domFns as d,
+  getNameAvatarDataTestId as e,
+  getNameBadgeDataTestId as f,
   getComponentUtilityClass as g,
+  getNameDataTestId$5 as h,
   isValidDate as i,
+  getNameDataTestId$4 as j,
+  getNameCommonActionsDataTestId as k,
   log$1 as l,
+  getNameDataTestId$3 as m,
+  getNameDataTestId$2 as n,
+  getNameRHFDateTimeDataTestId as o,
   positionFns as p,
+  getNameDataTestId$1 as q,
+  getNameDataTestId as r,
   shims as s,
-  utils as u
+  useOnClickOutside as t,
+  utils as u,
+  isActive as v,
+  getDataGridRowsFromSet as w
 };

package/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { capitalizeFirstLetter } from "./capitalizeFirstLetter";
+export { capitalizeFirstLetter } from './capitalizeFirstLetter';
 import { Palette, Theme } from '@mui/material/styles';
 import { VariantColor } from './types';
 export declare function isValidDate(d: Date): boolean;