@m4l/layouts 0.1.8 → 0.1.10

package/layouts/NoAuthModuleLayout/index.5050b988.js

@@ -0,0 +1,178 @@
+import { useResponsive as u, useLocales as h } from "@m4l/graphics";
+import { Page as g, CompanyLogo as y, LanguagePopover as f, Typography as m, Image as x } from "@m4l/components";
+import { Card as v, Container as _, Stack as C } from "@mui/material";
+import { styled as i } from "@mui/material/styles";
+import { useModuleDictionary as S, useFlagsPresent as k, FlagsProvider as w, DomainProvider as L, ModuleDictionaryProvider as P, ModuleSkeletonProvider as b } from "@m4l/core";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+const M = i("div")(({
+  theme: e
+}) => ({
+  [e.breakpoints.up("md")]: {
+    display: "flex"
+  }
+})), D = i("header")(({
+  theme: e
+}) => ({
+  top: 0,
+  zIndex: 9,
+  lineHeight: 0,
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  position: "absolute",
+  padding: e.spacing(2, 2, 0, 2),
+  justifyContent: "space-between",
+  [e.breakpoints.up("md")]: {
+    alignItems: "flex-start",
+    padding: e.spacing(7, 7, 0, 7)
+  }
+})), I = i(v)(({
+  theme: e
+}) => ({
+  width: "100%",
+  maxWidth: 464,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  margin: e.spacing(2, 0, 2, 2),
+  "& > div:nth-of-type(2)": {
+    maxHeight: "348px"
+  }
+})), j = i("div")(({
+  theme: e
+}) => ({
+  maxWidth: 480,
+  margin: "auto",
+  display: "flex",
+  minHeight: "100vh",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: e.spacing(12, 0)
+})), H = i("div")(({
+  theme: e
+}) => ({
+  padding: e.spacing(0, 5)
+})), N = i("div")(({
+  theme: e
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  gridGap: e.spacing(1)
+})), A = (e) => {
+  const {
+    children: s
+  } = e, {
+    getLabel: a,
+    getModuleLabel: l
+  } = S(), r = u("up", "md"), n = !k(["dictionary_loaded"]);
+  return /* @__PURE__ */ t(g, {
+    title: l(),
+    children: /* @__PURE__ */ d(M, {
+      children: [/* @__PURE__ */ d(D, {
+        id: "HeaderStyle",
+        children: [/* @__PURE__ */ t(y, {
+          size: r ? "normal" : "small",
+          isSkeleton: n
+        }), /* @__PURE__ */ t(f, {})]
+      }), r && /* @__PURE__ */ d(I, {
+        id: "SectionStyle",
+        children: [/* @__PURE__ */ t(H, {
+          id: "module_leyend",
+          children: /* @__PURE__ */ t(m, {
+            variant: "h3",
+            sx: {
+              px: 5,
+              mt: 10,
+              mb: 5
+            },
+            skeletonProps: {
+              isSkeleton: n,
+              width: "30%",
+              height: "18px"
+            },
+            children: a("module_leyend")
+          })
+        }), /* @__PURE__ */ t(x, {
+          isSkeleton: n,
+          width: "100%",
+          height: "auto",
+          src: "https://s3.amazonaws.com/static.made4labs/environment_assetss/d1/frontend/domain/host/login/assets/img/illustration_login.png",
+          alt: "illustration module",
+          effect: "opacity"
+        })]
+      }), /* @__PURE__ */ t(_, {
+        maxWidth: "sm",
+        id: "formContainer",
+        children: /* @__PURE__ */ d(j, {
+          children: [/* @__PURE__ */ t(C, {
+            direction: "row",
+            alignItems: "center",
+            sx: {
+              mb: 5
+            },
+            children: /* @__PURE__ */ d(N, {
+              children: [/* @__PURE__ */ t(m, {
+                variant: "h4",
+                skeletonProps: {
+                  isSkeleton: n,
+                  width: "35%",
+                  height: "36px"
+                },
+                children: l()
+              }), /* @__PURE__ */ t(m, {
+                sx: {
+                  color: "text.secondary"
+                },
+                skeletonProps: {
+                  isSkeleton: n,
+                  width: "60%",
+                  height: "21px"
+                },
+                children: a("module_description")
+              })]
+            })
+          }), s]
+        })
+      })]
+    })
+  });
+}, U = (e) => {
+  const {
+    moduleId: s,
+    moduleName: a,
+    children: l,
+    componentsDictionary: r,
+    skeletonFlags: n
+  } = e, {
+    currentLang: p
+  } = h(), o = n;
+  return o.findIndex((c) => c === "dictionary_loaded") < 0 && o.push("dictionary_loaded"), o.findIndex((c) => c === "domain_loaded") < 0 && o.push("domain_loaded"), /* @__PURE__ */ t(w, {
+    children: /* @__PURE__ */ t(L, {
+      children: /* @__PURE__ */ t(P, {
+        isAuth: !1,
+        moduleId: s,
+        moduleName: a,
+        componentsDictionary: r,
+        currentLang: p.value,
+        children: /* @__PURE__ */ t(b, {
+          flags: o,
+          children: /* @__PURE__ */ t(A, {
+            children: l
+          })
+        })
+      })
+    })
+  });
+};
+function q() {
+  return ["no_auth_module_layout"];
+}
+const B = {
+  no_auth_module_layout: {}
+};
+export {
+  U as N,
+  B as d,
+  q as g
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/layouts",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/components": "*",

package/hooks/useMasterDetail/index.js

@@ -1,4 +0,0 @@
-import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.js";
-const useMasterDetail = () => useContext(MasterDetailContext);
-export { useMasterDetail as u };

package/hooks/useModule/index.js

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { M as ModuleContext } from "../../layouts/ModuleLayout/index.js";
-const useModule = () => {
-  const context = useContext(ModuleContext);
-  if (!context)
-    throw new Error("useModule context must be use inside ModuleContext");
-  return context;
-};
-export { useModule as u };

package/layouts/MasterDetailLayout/index.js

@@ -1,160 +0,0 @@
-import { createContext, useState, useRef, useCallback, useMemo } from "react";
-import { voidFunction, useEnvironment } from "@m4l/core";
-import { SplitLayout } from "@m4l/components";
-import { g as getModuleLayoutComponentsDictionary, a as ModuleLayout } from "../ModuleLayout/index.js";
-import { jsx } from "react/jsx-runtime";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { Button } from "@mui/material";
-import { u as useMasterDetail } from "../../hooks/useMasterDetail/index.js";
-function getMasterDetailLayoutComponentsDictionary() {
-  return ["master_detail_layout"].concat(getModuleLayoutComponentsDictionary());
-}
-const defaultMasterDetailDictionary = {
-  master_detail_layout: {
-    split_vertical: "Split vertically",
-    split_horizontal: "Split horizontally",
-    no_split: "No split",
-    view_detail: "View detail"
-  }
-};
-const initialState = {
-  masterSelection: void 0,
-  onChangeMasterSelection: voidFunction
-};
-const MasterDetailContext = createContext(initialState);
-function MasterDetailProvider(props) {
-  const {
-    children
-  } = props;
-  const [masterSelection, setMasterSelection] = useState(void 0);
-  return /* @__PURE__ */ jsx(MasterDetailContext.Provider, {
-    value: {
-      masterSelection,
-      onChangeMasterSelection: setMasterSelection
-    },
-    children
-  });
-}
-function ButtonDetail(props) {
-  const {
-    masterSelection
-  } = useMasterDetail();
-  const {
-    onClick,
-    description
-  } = props;
-  return /* @__PURE__ */ jsx(Button, {
-    onClick,
-    variant: "outlined",
-    disabled: masterSelection === void 0 ? true : false,
-    children: description
-  }, "miDetail");
-}
-function getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop) {
-  let totalActions = isDesktop !== void 0 && isDesktop ? [...splitActions] : [viewDetailAction];
-  totalActions = moduleActions.concat(totalActions);
-  return totalActions;
-}
-function MasterDetailLayout(props) {
-  const {
-    moduleId,
-    moduleNameField,
-    detailComponent,
-    moduleActions,
-    urlIcon,
-    masterComponent,
-    componentsDictionary,
-    breadcrumbLinks,
-    privileges,
-    skeletonFlags
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const [splitPosition, setSplitPosition] = useState("vertical");
-  const isDesktop = useResponsiveDesktop();
-  const moduleLayoutRef = useRef(null);
-  const onChangePostionInternal = (newPostion) => {
-    const newSplitActions = [...initialSplitActions];
-    for (let i = 0; i < newSplitActions.length; i++) {
-      newSplitActions[i].disabled = false;
-      if (newSplitActions[i].tag === newPostion) {
-        newSplitActions[i].disabled = true;
-      }
-    }
-    setSplitActions(newSplitActions);
-    setSplitPosition(newPostion);
-  };
-  const initialSplitActions = [{
-    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
-    onClick: () => onChangePostionInternal("vertical"),
-    disabled: true,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_vertical",
-    tag: "vertical",
-    className: "splitactions"
-  }, {
-    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
-    onClick: () => onChangePostionInternal("horizontal"),
-    disabled: false,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.split_horizontal",
-    tag: "horizontal",
-    className: "splitactions"
-  }, {
-    urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
-    onClick: () => onChangePostionInternal("none"),
-    disabled: false,
-    visibility: "main",
-    dictionaryField: "master_detail_layout.no_split",
-    tag: "none",
-    className: "splitactions"
-  }];
-  const onClickViewDetail = useCallback(() => {
-    moduleLayoutRef.current?.openModal({
-      title: "master_detail_layout.view_detail",
-      initialWidth: 500,
-      initialHeigth: 680,
-      contentComponent: detailComponent,
-      actions: void 0
-    });
-  }, [detailComponent]);
-  const viewDetailAction = useMemo(() => {
-    return {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
-      onClick: onClickViewDetail,
-      disabled: false,
-      visibility: "allways",
-      dictionaryField: "master_detail_layout.view_detail",
-      tag: "none",
-      className: "",
-      component: ButtonDetail
-    };
-  }, [environment_assets, onClickViewDetail]);
-  const [splitActions, setSplitActions] = useState(initialSplitActions);
-  const finalModuleActions = useMemo(() => {
-    const actions = getTotalModuleActions(splitActions, moduleActions, viewDetailAction, isDesktop);
-    return actions;
-  }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
-  const finalComponentsDictionary = useMemo(() => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()), [componentsDictionary]);
-  return /* @__PURE__ */ jsx(MasterDetailProvider, {
-    children: /* @__PURE__ */ jsx(ModuleLayout, {
-      ref: moduleLayoutRef,
-      moduleId,
-      moduleNameField,
-      urlIcon,
-      moduleActions: finalModuleActions,
-      privileges,
-      skeletonFlags,
-      componentsDictionary: finalComponentsDictionary,
-      breadcrumbLinks,
-      children: /* @__PURE__ */ jsx(SplitLayout, {
-        splitPosition: isDesktop ? splitPosition : "none",
-        firstPart: masterComponent,
-        secondPart: detailComponent
-      })
-    })
-  });
-}
-export { MasterDetailContext as M, MasterDetailLayout as a, defaultMasterDetailDictionary as d, getMasterDetailLayoutComponentsDictionary as g };