@m4l/components 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "license": "UNLICENSED",
   "dependencies": {
     "@emotion/react": "^11.9.0",
@@ -27,12 +27,16 @@
     "lodash.throttle": "^4.1.1",
     "npm": "^9.6.2",
     "react-colorful": "^5.6.1",
+    "qrcode.react": "^3.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.33.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-arrowheads": "^1.1.0",
+    "react-toastify": "9.0.5",
+    "react-chartjs-2": "^5.2.0",
+    "react-color": "^2.19.3",
     "react-router-dom": "6.3.0",
     "react-spinners": "^0.13.8",
     "simplebar-react": "2.4.1",

package/{react-draggable.2bc0e647.js → react-draggable.312ab17d.js}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import require$$1 from "prop-types";
+import PropTypes 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.9ad3909a.js";
@@ -11,7 +11,7 @@ Object.defineProperty(DraggableCore$2, "__esModule", {
 });
 DraggableCore$2.default = void 0;
 var React = _interopRequireWildcard(React__default);
-var _propTypes = _interopRequireDefault(require$$1);
+var _propTypes = _interopRequireDefault(PropTypes);
 var _reactDom = _interopRequireDefault(require$$2);
 var _domFns = domFns;
 var _positionFns = positionFns;
@@ -316,7 +316,7 @@ _defineProperty(DraggableCore$1, "defaultProps", {
   });
   exports.default = void 0;
   var React2 = _interopRequireWildcard2(React__default);
-  var _propTypes2 = _interopRequireDefault2(require$$1);
+  var _propTypes2 = _interopRequireDefault2(PropTypes);
   var _reactDom2 = _interopRequireDefault2(require$$2);
   var _clsx = _interopRequireDefault2(clsx);
   var _domFns2 = domFns;

package/{react-json-view.57125fcf.js → react-json-view.5636414a.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./commonjs.565e6834.js";
+import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./commonjs.333e55c7.js";
 import React__default from "react";
 var main = { exports: {} };
 (function(module, exports) {

package/{react-resizable.53094455.js → react-resizable.f2c58a4c.js}

@@ -1,13 +1,13 @@
 import React__default from "react";
-import { c as cjs } from "./react-draggable.2bc0e647.js";
+import { c as cjs } from "./react-draggable.312ab17d.js";
 import { u as utils } from "./utils/index.9ad3909a.js";
-import require$$1 from "prop-types";
+import PropTypes from "prop-types";
 var reactResizable = { exports: {} };
 var Resizable$2 = {};
 var propTypes = {};
 propTypes.__esModule = true;
 propTypes.resizableProps = void 0;
-var _propTypes$2 = _interopRequireDefault$1(require$$1);
+var _propTypes$2 = _interopRequireDefault$1(PropTypes);
 function _interopRequireDefault$1(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
@@ -364,7 +364,7 @@ var ResizableBox$2 = {};
 ResizableBox$2.__esModule = true;
 ResizableBox$2.default = void 0;
 var React = _interopRequireWildcard(React__default);
-var _propTypes = _interopRequireDefault(require$$1);
+var _propTypes = _interopRequireDefault(PropTypes);
 var _Resizable = _interopRequireDefault(Resizable$2);
 var _propTypes2 = propTypes;
 var _excluded = ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"];

package/{react-splitter-layout.8b1655c8.js → react-splitter-layout.c5d98bf7.js}

@@ -1,10 +1,10 @@
-import { g as getDefaultExportFromCjs } from "./commonjs.565e6834.js";
-import require$$1 from "prop-types";
+import { g as getDefaultExportFromCjs } from "./commonjs.333e55c7.js";
+import PropTypes from "prop-types";
 import React__default from "react";
 var lib = { exports: {} };
 (function(module, exports) {
   !function(e, t) {
-    module.exports = t(require$$1, React__default);
+    module.exports = t(PropTypes, React__default);
   }(window, function(e, t) {
     return function(e2) {
       var t2 = {};

package/components/Icon/index.aa9949f0.js

@@ -1,147 +0,0 @@
-import { useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.e4d2ee53.js";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { useResponsiveDesktop } from "@m4l/graphics";
-const IconRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LIcon?.styleOverrides
-}));
-const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
-})(({
-  src,
-  rotationAngle
-}) => ({
-  maskPosition: "center",
-  maskRepeat: "no-repeat",
-  maskSize: "cover",
-  WebkitMaskRepeat: "no-repeat",
-  mask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMaskSize: "cover",
-  ...rotationAngle && {
-    transform: `rotate(${rotationAngle}deg)`
-  }
-}));
-const componentName = "M4LIcon";
-generateUtilityClasses(componentName, [
-  "root",
-  "icon",
-  "variantSkeleton",
-  "sizeExtraSmall",
-  "sizeSmall",
-  "sizeMedium",
-  "sizeLarge",
-  "sizeExtraLarge",
-  "rotationAngle"
-]);
-function getIconClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    icon: ["icon", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge", ownerState.rotationAngle ? "rotationAngle" : ""],
-    variantSkeleton: ["variantSkeleton", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const ICON_PREFIX = "Icon";
-const getNameDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-function Icon(props) {
-  const {
-    src,
-    size = "small",
-    rotationAngle,
-    testingProps,
-    className
-  } = props;
-  const [resource, setResource] = useState(testingProps?.resource || void 0);
-  const isDesktop = useResponsiveDesktop();
-  useEffect(() => {
-    let mounted = true;
-    (async function networkOperation() {
-      await fetch(src).then((response) => {
-        return response.text() || "";
-      }).then((xml) => {
-        xml = xml.match(
-          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
-        )?.toString() || "";
-        if (mounted) {
-          setResource(window.btoa(xml));
-        }
-      }).catch((_err) => {
-      });
-    })();
-    return function clenUp() {
-      mounted = false;
-    };
-  }, [src]);
-  const ownerState = {
-    size: isDesktop ? size : "medium",
-    rotationAngle
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(IconRoot, {
-    className: clsx(classes.root, className),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("root")
-    } : {},
-    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
-      className: classes.icon,
-      src: resource,
-      rotationAngle,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("icon")
-      } : {}
-    }) : /* @__PURE__ */ jsx(Skeleton, {
-      variant: "rectangular",
-      className: classes.variantSkeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("variantSkeleton")
-      } : {}
-    })
-  });
-}
-const ArrowIconRoot = styled("div")(() => ({
-  display: "flex",
-  alignSelf: "center",
-  lineHeight: 0
-}));
-function ArrowIcon(props) {
-  const {
-    openState
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    classes
-  } = useSideBar();
-  return /* @__PURE__ */ jsx(ArrowIconRoot, {
-    className: classes.arrowIconRoot,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId$1("arrowIconRoot")
-    } : {},
-    children: /* @__PURE__ */ jsx(Icon, {
-      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
-      rotationAngle: openState ? 90 : 0
-    })
-  });
-}
-export {
-  ArrowIcon as A,
-  Icon as I
-};

package/components/PrintingSystem/utils/getEvalValue/index.d.ts

@@ -1 +0,0 @@
-export declare const getEvalValue: (sourceData: any, key: string) => string | Array<any>;

package/components/PropertyValue/index.92ccdf7a.js

@@ -1,220 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useModuleSkeleton } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { useState } from "react";
-const PropertyValueRoot = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
-})(({
-  propertyWidth,
-  isForm,
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  alignItems: "flex-start",
-  width: "100%",
-  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
-  flexDirection: "column",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
-    gap: theme.spacing(2),
-    alignItems: "center"
-  },
-  ...theme.components?.M4LPropertyValue?.styleOverrides
-}));
-const Property = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
-})(({
-  propertyWidth,
-  isForm,
-  theme
-}) => ({
-  width: "100%",
-  minWidth: "100%",
-  ...theme.typography.body,
-  color: theme.palette.text.primary,
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  position: "relative",
-  [theme.breakpoints.up("sm")]: {
-    borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
-    paddingRight: theme.spacing(2),
-    textAlign: "right",
-    width: propertyWidth || "150px",
-    minWidth: propertyWidth || "150px",
-    justifyContent: "flex-end"
-  },
-  overflow: "hidden",
-  overflowWrap: "break-word"
-}));
-const Value = styled("div", {
-  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
-})(({
-  valueWidth,
-  valueHeight,
-  theme
-}) => ({
-  flexGrow: "1",
-  ...theme.typography.body,
-  color: theme.palette.text.secondary,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  position: "relative",
-  padding: "1px",
-  maxWidth: `${valueWidth}%`,
-  width: `${valueWidth}%`,
-  height: valueHeight,
-  marginTop: theme.spacing(1),
-  [theme.breakpoints.up("sm")]: {
-    marginTop: "0px"
-  },
-  overflowWrap: "break-word"
-}));
-const SKTWrapperProperty = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "flex-end"
-}));
-const COMPONENT_PREFIX = "m4l-property-value";
-const TEST_PROPS_DATA = `${COMPONENT_PREFIX}-data`;
-function SKTProperty(props) {
-  const {
-    className,
-    dataTestId = ""
-  } = props;
-  return /* @__PURE__ */ jsx(SKTWrapperProperty, {
-    className,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "skeletonProperty", dataTestId)
-    } : {},
-    children: /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: 68,
-      height: 14
-    })
-  });
-}
-const componentName = "M4LPropertyValue";
-generateUtilityClasses(componentName, [
-  "root",
-  "property",
-  "value",
-  "skeletonProperty",
-  "isDisabled",
-  "isFocus"
-]);
-function getPropertyValueUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const propertyValueUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.disabled && "isDisabled", ownerState.focus && "isFocus"],
-    property: ["property"],
-    value: ["value"],
-    skeletonProperty: ["skeletonProperty"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function PropertyValue(props) {
-  const {
-    property,
-    value,
-    propertyWidth = 200,
-    valueHeight = "auto",
-    valueWidth = "100",
-    valueWidthMobile,
-    isForm,
-    className,
-    dataTestId = "",
-    disabled = false
-  } = props;
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const [isFocus, setIsFocus] = useState(false);
-  console.log("Estado de focus: ", isFocus);
-  const getValueW = () => {
-    if (valueWidthMobile && !isDesktop) {
-      return valueWidthMobile;
-    }
-    if (valueWidth === 75 && isDesktop) {
-      return 75;
-    } else if (valueWidth === 75 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 50 && isDesktop) {
-      return 50;
-    } else if (valueWidth === 50 && !isDesktop) {
-      return 100;
-    }
-    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
-      return valueWidth;
-    }
-    if (valueWidth === 25 && !isDesktop) {
-      return 50;
-    }
-    if (valueWidth === 12.5 && !isDesktop) {
-      return 25;
-    }
-    return 100;
-  };
-  const handlerFocus = () => {
-    setIsFocus(true);
-  };
-  const handlerOnBlur = () => {
-    setIsFocus(false);
-  };
-  const ownerState = {
-    disabled,
-    focus: disabled === false ? isFocus : false
-  };
-  const classes = propertyValueUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsxs(PropertyValueRoot, {
-    tabIndex: 0,
-    className: clsx(classes.root, className),
-    isForm,
-    propertyWidth,
-    onClick: handlerFocus,
-    onBlur: handlerOnBlur,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROPS_DATA]: JSON.stringify([{
-        property: property ? true : false,
-        value: value ? true : false
-      }]),
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
-    } : {},
-    children: [/* @__PURE__ */ jsx(Property, {
-      className: classes.property,
-      isForm,
-      propertyWidth,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "property", dataTestId)
-      } : {},
-      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {
-        className: classes.skeletonProperty,
-        dataTestId
-      }) : property
-    }), /* @__PURE__ */ jsx(Value, {
-      className: classes.value,
-      valueWidth: getValueW(),
-      valueHeight,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "value", dataTestId)
-      } : {},
-      children: value
-    })]
-  });
-}
-export {
-  PropertyValue as P
-};

package/components/PropertyValue/skeleton.d.ts

@@ -1,2 +0,0 @@
-import { SKTPropertyProps } from './types';
-export declare function SKTProperty(props: SKTPropertyProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFColorPicker/index.259b6f38.js

@@ -1,61 +0,0 @@
-import { useState } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { Popover, Box, Button } from "@mui/material";
-import { HexColorPicker } from "react-colorful";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-const RHFColorPicker = (props) => {
-  const {
-    name
-  } = props;
-  const {
-    control
-  } = useFormContext();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleApprove = () => {
-    setAnchorEl(null);
-  };
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    defaultValue: "",
-    render: ({
-      field
-    }) => /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx("div", {
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        style: {
-          backgroundColor: field.value,
-          width: "20px",
-          height: "20px",
-          cursor: "pointer"
-        }
-      }), /* @__PURE__ */ jsx(Popover, {
-        open: Boolean(anchorEl),
-        anchorEl,
-        onClose: () => setAnchorEl(null),
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        children: /* @__PURE__ */ jsxs(Box, {
-          p: 2,
-          children: [/* @__PURE__ */ jsx(HexColorPicker, {
-            ...field,
-            color: field.value
-          }), /* @__PURE__ */ jsx(Button, {
-            variant: "contained",
-            onClick: handleApprove,
-            children: "Aprobar"
-          })]
-        })
-      })]
-    })
-  });
-};
-export {
-  RHFColorPicker as R
-};