@m4l/components 0.1.27 → 0.1.28

package/components/mui_extended/Tab/index.e0653a0a.js

@@ -1,28 +1,32 @@
-import { useModuleSkeleton as n } from "@m4l/core";
-import { Skeleton as a, Tab as s } from "@mui/material";
-import { styled as p } from "@mui/material/styles";
-import { jsx as e } from "react/jsx-runtime";
-const d = p("div")(({
-  theme: t
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton, Tab as Tab$1 } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const SKTTabWrapper = styled("div")(({
+  theme
 }) => ({
-  padding: t.spacing(1.5, 2)
+  padding: theme.spacing(1.5, 2)
 }));
-function c(t) {
+function Tab(props) {
   const {
-    SKTWidth: o,
-    SKTHeight: r,
-    ...i
-  } = t;
-  return n() ? /* @__PURE__ */ e(d, {
-    children: /* @__PURE__ */ e(a, {
-      variant: "text",
-      width: o,
-      height: r
-    })
-  }) : /* @__PURE__ */ e(s, {
-    ...i
+    SKTWidth,
+    SKTHeight,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTTabWrapper, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidth,
+        height: SKTHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Tab$1, {
+    ...other
   });
 }
 export {
-  c as T
+  Tab as T
 };

package/components/mui_extended/Typography/index.e5494696.js

@@ -1,31 +1,35 @@
-import { useModuleSkeleton as s } from "@m4l/core";
-import { Skeleton as p, Typography as i } from "@mui/material";
-import { jsx as r } from "react/jsx-runtime";
-const h = (t) => {
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton, Typography as Typography$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const SkeletonTypography = (props) => {
   const {
-    skeletonWidth: e,
-    skeletongHeight: o
-  } = t;
-  return /* @__PURE__ */ r(p, {
+    skeletonWidth,
+    skeletongHeight
+  } = props;
+  return /* @__PURE__ */ jsx(Skeleton, {
     variant: "text",
-    width: e,
-    height: o
+    width: skeletonWidth,
+    height: skeletongHeight
   });
 };
-function k(t) {
+function Typography(props) {
   const {
-    skeletonWidth: e = "100%",
-    skeletongHeight: o = "18px",
-    ...n
-  } = t;
-  return s() ? /* @__PURE__ */ r(h, {
-    skeletonWidth: e,
-    skeletongHeight: o
-  }) : /* @__PURE__ */ r(i, {
+    skeletonWidth = "100%",
+    skeletongHeight = "18px",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTypography, {
+      skeletonWidth,
+      skeletongHeight
+    });
+  }
+  return /* @__PURE__ */ jsx(Typography$1, {
     className: "m4l_typography",
-    ...n
+    ...other
   });
 }
 export {
-  k as T
+  Typography as T
 };

package/contexts/ModalContext/index.b92fa565.js

@@ -0,0 +1,153 @@
+import { createContext, useState } from "react";
+import { useEnvironment, voidFunction } from "@m4l/core";
+import { Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.e638ecc8.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { M as ModalDialog } from "../../components/ModalDialog/index.9ea10764.js";
+import { A as ActionIntro } from "../../components/CommonActions/components/ActionIntro/index.60ef7bd7.js";
+import { A as ActionCancel } from "../../components/CommonActions/components/ActionCancel/index.e498eeb2.js";
+import { b as getVariantColor } from "../../utils/index.214d9542.js";
+const WrapperContentConfirm = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+}));
+const ModalContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gridGap: theme.spacing(5),
+  flexGrow: 1,
+  [theme.breakpoints.up("sm")]: {
+    display: "grid",
+    flexDirection: "row",
+    gridTemplateColumns: "1fr 1fr"
+  }
+}));
+const IllustrationContainer = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
+  }
+}));
+const MessageContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const ContentConfirm = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperContentConfirm, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(BoxIcon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          sx: {
+            width: "230px",
+            height: "194px"
+          }
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const ModalContext = createContext(null);
+function ModalProvider({
+  children
+}) {
+  const [modalOptions, setModalOptions] = useState({
+    open: false,
+    withClose: true,
+    onQueryClose: voidFunction,
+    title: "",
+    iconComponent: void 0,
+    contentComponent: void 0,
+    variant: void 0
+  });
+  const [hasChanges, setHasChanges] = useState(false);
+  const openModal = (modalOpenProps) => {
+    setModalOptions({
+      open: true,
+      ...modalOpenProps
+    });
+  };
+  const openModalConfirm = (modalOpenConfirmProps) => {
+    const {
+      variant = "warning",
+      title,
+      msg,
+      onClickIntro,
+      onClickCancel = closeModal
+    } = modalOpenConfirmProps;
+    const onClickIntroClose = () => {
+      onClickIntro && onClickIntro();
+      closeModal();
+    };
+    setModalOptions({
+      open: true,
+      title,
+      variant,
+      contentComponent: /* @__PURE__ */ jsx(ContentConfirm, {
+        variant,
+        msg
+      }),
+      actions: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(ActionCancel, {
+          onClick: onClickCancel
+        }), " ", /* @__PURE__ */ jsx(ActionIntro, {
+          onClick: onClickIntroClose,
+          color: getVariantColor(variant)
+        })]
+      })
+    });
+  };
+  const closeModal = () => {
+    setModalOptions((last) => ({
+      ...last,
+      open: false
+    }));
+    setHasChanges(false);
+  };
+  const setChanges = () => {
+    setHasChanges(true);
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+    value: {
+      ...modalOptions,
+      openModal,
+      openModalConfirm,
+      closeModal,
+      hasChanges,
+      setChanges
+    },
+    children: [children, /* @__PURE__ */ jsx(ModalDialog, {})]
+  });
+}
+export {
+  ModalContext as M,
+  ModalProvider as a
+};

package/contexts/RHFormContext/index.b142190a.js

@@ -0,0 +1,63 @@
+import { useEffect } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+const WrapperFormProvider = styled("form")(({
+  theme
+}) => ({
+  display: "flex",
+  marginBottom: theme.spacing(1),
+  flexDirection: "column",
+  width: "100%",
+  overflow: "auto",
+  maxWidth: theme.stretch ? "unset" : "900px",
+  padding: theme.spacing(3)
+}));
+function RHFormProvider(props) {
+  const {
+    children,
+    onSubmit,
+    values,
+    validationSchema,
+    statusLoad = "ready"
+  } = props;
+  const methods = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues: values
+  });
+  useEffect(() => {
+    if (statusLoad === "reload_values_provider") {
+      const keys = Object.keys(values);
+      keys.forEach((key) => {
+        methods.setValue(key, values[key], {
+          shouldValidate: false,
+          shouldDirty: false,
+          shouldTouch: false
+        });
+      });
+      return;
+    }
+  }, [methods, statusLoad, values]);
+  useEffect(() => {
+    if (statusLoad === "ready") {
+      console.log("useEffect FormProvider Ready", statusLoad);
+      methods.setValue("statusLoad", "ready", {
+        shouldValidate: false,
+        shouldDirty: false,
+        shouldTouch: false
+      });
+    }
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(FormProvider, {
+    ...methods,
+    children: /* @__PURE__ */ jsx(WrapperFormProvider, {
+      id: "formProvider",
+      onSubmit: methods.handleSubmit(onSubmit),
+      children
+    })
+  });
+}
+export {
+  RHFormProvider as R
+};

package/hooks/useFormAddEdit/index.d4845f1a.js

@@ -1,26 +1,44 @@
-import { useNetwork as p, useFlags as v } from "@m4l/core";
-import { useState as n, useEffect as _ } from "react";
-const F = (i) => {
-  const { initialValues: u, objectId: o, endPoint: l, formatDataEnpoint: r } = i, [f, a] = n(u), [e, t] = n(
-    o === void 0 ? "new" : "edit"
-  ), { networkOperation: m } = p(), { addFlag: c } = v();
-  return _(() => {
-    let s = !0;
-    return e === "edit" ? m({
-      method: "GET",
-      endPoint: `${l}/${o}`
-    }).then(
-      (d) => {
-        s && (a(r ? r(d) : d), t("reload_values_provider"));
-      },
-      () => {
-        t("error");
-      }
-    ) : (e === "new" || e === "reload_values_provider") && (c("form_loaded"), t("ready")), () => {
-      s = !1;
+import { useNetwork, useFlags } from "@m4l/core";
+import { useState, useEffect } from "react";
+const useFormAddEdit = (props) => {
+  const { initialValues, objectId, endPoint, formatDataEnpoint } = props;
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const { addFlag } = useFlags();
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      networkOperation({
+        method: "GET",
+        endPoint: `${endPoint}/${objectId}`
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
     };
-  }, [e]), { formValues: f, statusLoad: e };
+  }, [statusLoad]);
+  return { formValues, statusLoad };
 };
 export {
-  F as u
+  useFormAddEdit as u
 };

package/hooks/useModal/index.5fee01a3.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { M as ModalContext } from "../../contexts/ModalContext/index.b92fa565.js";
+function useModal() {
+  const context = useContext(ModalContext);
+  if (!context)
+    throw new Error("useModal context must be use inside ModalContext");
+  return context;
+}
+export {
+  useModal as u
+};