@m4l/layouts 0.1.8 → 0.1.9

package/layouts/ModuleLayout/index.js

@@ -1,390 +0,0 @@
-import { BoxIcon, Breadcrumbs as Breadcrumbs$1, MenuActions, useModal, ModalProvider, getModalDialogComponentsDictionary } from "@m4l/components";
-import { createContext, useState, useMemo, forwardRef, useRef, useImperativeHandle } from "react";
-import { styled, useTheme } from "@mui/material/styles";
-import { voidFunction, useModuleDictionary, useFlagsPresent, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, ModulePrivilegesProvider } from "@m4l/core";
-import { Skeleton, Typography, IconButton } from "@mui/material";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { u as useModule } from "../../hooks/useModule/index.js";
-const WrapperModule = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  margin: "12px",
-  left: "0px",
-  right: "0px",
-  top: "0px",
-  bottom: "0px",
-  overflow: "hidden"
-}));
-const ModuleContent = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  position: "relative",
-  marginTop: theme.spacing(2),
-  flexGrow: "1",
-  overflow: "hidden"
-}));
-const Container = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  position: "relative",
-  paddingTop: theme.spacing(2),
-  paddingBottom: theme.spacing(2),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "72px",
-  overflow: "hidden",
-  alignItems: "center",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `${theme.spacing(2)} 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    height: theme.spacing(9)
-  }
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
-  }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
-  }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
-  });
-}
-const initialState = {
-  moduleId: "",
-  moduleNameField: "module_name",
-  urlIcon: "",
-  moduleActions: [],
-  dynamicActions: [],
-  setDynamicActions: voidFunction,
-  breadcrumbLinks: []
-};
-const ModuleContext = createContext(initialState);
-function ModuleProvider(props) {
-  const {
-    children,
-    initialModuleActions,
-    moduleId,
-    moduleNameField,
-    urlIcon,
-    breadcrumbLinks
-  } = props;
-  const [configOptions] = useState(() => ({
-    moduleId,
-    urlIcon,
-    moduleNameField,
-    dictionary: void 0,
-    breadcrumbLinks
-  }));
-  const [dynamicActions, setDynamicActions] = useState([]);
-  const finalModuleActions = useMemo(() => initialModuleActions.concat(dynamicActions), [initialModuleActions, dynamicActions]);
-  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
-    value: {
-      moduleActions: finalModuleActions,
-      dynamicActions,
-      setDynamicActions,
-      moduleId: configOptions.moduleId,
-      moduleNameField: configOptions.moduleNameField,
-      urlIcon: configOptions.urlIcon,
-      breadcrumbLinks: configOptions.breadcrumbLinks
-    },
-    children
-  });
-}
-function getMenuActions(isDesktop, moduleActions) {
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  return menuActions;
-}
-function getMainActions(isDesktop, moduleActions) {
-  let mainActions = [];
-  if (isDesktop !== void 0 && isDesktop) {
-    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
-  }
-  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
-  return mainActions;
-}
-function Header() {
-  const {
-    moduleActions,
-    moduleNameField,
-    breadcrumbLinks,
-    urlIcon
-  } = useModule();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const theme = useTheme();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = !useFlagsPresent(["dictionary_loaded"]);
-  const menuActions = useMemo(
-    () => getMenuActions(isDesktop, moduleActions),
-    [moduleActions, isDesktop]
-  );
-  const mainActions = useMemo(() => {
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
-  }
-  return /* @__PURE__ */ jsxs(Container, {
-    id: "Header",
-    children: [/* @__PURE__ */ jsx(BoxIcon, {
-      src: urlIcon,
-      sx: {
-        color: theme.palette.primary.main
-      }
-    }), /* @__PURE__ */ jsx(Typography, {
-      variant: "h5",
-      sx: {
-        maxWidth: 260,
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-        color: "text.primary",
-        marginRight: "24px",
-        textOverflow: "ellipsis"
-      },
-      children: getLabel(moduleNameField)
-    }), /* @__PURE__ */ jsx(Breadcrumbs$1, {
-      links: breadcrumbLinks
-    }), mainActions.map((mainAction, index) => {
-      const description = getLabel(mainAction.dictionaryField);
-      if (!mainAction.component) {
-        return /* @__PURE__ */ jsx(IconButton, {
-          className: mainAction.className,
-          onClick: mainAction.onClick,
-          "aria-label": `${description}`,
-          disabled: mainAction.disabled,
-          children: /* @__PURE__ */ jsx(BoxIcon, {
-            src: mainAction.urlIcon,
-            sx: {
-              width: 18,
-              height: 18
-            }
-          })
-        }, `main_action_${index}`);
-      }
-      return /* @__PURE__ */ jsx(mainAction.component, {
-        description,
-        onClick: mainAction.onClick
-      }, `main_action_${index}`);
-    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
-      arrow: "right-top",
-      marginTop: "-11px",
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      menuActions
-    })]
-  });
-}
-const Module = forwardRef((props, ref) => {
-  const {
-    children
-  } = props;
-  const {
-    openModal
-  } = useModal();
-  const divRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    openModal,
-    current: divRef.current
-  }));
-  return /* @__PURE__ */ jsxs(WrapperModule, {
-    id: "WrapperModule",
-    ref: divRef,
-    children: [/* @__PURE__ */ jsx(Header, {}), /* @__PURE__ */ jsx(ModuleContent, {
-      id: "ModuleContent",
-      children
-    })]
-  });
-});
-Module.displayName = "Module";
-const ModuleLayout = forwardRef((props, ref) => {
-  const {
-    moduleId,
-    moduleNameField = "module_name",
-    moduleActions: initialModuleActions,
-    urlIcon,
-    children,
-    componentsDictionary,
-    breadcrumbLinks,
-    privileges,
-    skeletonFlags
-  } = props;
-  const moduleRef = useRef(null);
-  const openModal = (modalOpenProps) => {
-    moduleRef.current?.openModal(modalOpenProps);
-  };
-  useImperativeHandle(ref, () => ({
-    openModal,
-    current: moduleRef.current
-  }));
-  return /* @__PURE__ */ jsx(FlagsProvider, {
-    children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
-      moduleId,
-      componentsDictionary,
-      children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
-        flags: skeletonFlags,
-        children: /* @__PURE__ */ jsx(ModulePrivilegesProvider, {
-          queryPrivileges: privileges,
-          children: /* @__PURE__ */ jsx(ModuleProvider, {
-            moduleId,
-            urlIcon,
-            moduleNameField,
-            initialModuleActions,
-            breadcrumbLinks,
-            children: /* @__PURE__ */ jsx(ModalProvider, {
-              children: /* @__PURE__ */ jsx(Module, {
-                ref: moduleRef,
-                children
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-});
-ModuleLayout.displayName = "ModuleLayout";
-function getModuleLayoutComponentsDictionary() {
-  return ["module_layout"].concat(getModalDialogComponentsDictionary());
-}
-const defaultModuleLayoutDictionary = {
-  module_layout: {}
-};
-export { ModuleContext as M, ModuleLayout as a, defaultModuleLayoutDictionary as d, getModuleLayoutComponentsDictionary as g };

package/layouts/NoAuthModuleLayout/index.js

@@ -1,192 +0,0 @@
-import { useResponsive, useLocales } from "@m4l/graphics";
-import { Page, CompanyLogo, LanguagePopover, Typography, Image } from "@m4l/components";
-import { Card, Container, Stack } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { useModuleDictionary, useFlagsPresent, FlagsProvider, DomainProvider, ModuleDictionaryProvider, ModuleSkeletonProvider } from "@m4l/core";
-import { jsx, jsxs } from "react/jsx-runtime";
-const RootStyle = styled("div")(({
-  theme
-}) => ({
-  [theme.breakpoints.up("md")]: {
-    display: "flex"
-  }
-}));
-const HeaderStyle = styled("header")(({
-  theme
-}) => ({
-  top: 0,
-  zIndex: 9,
-  lineHeight: 0,
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  padding: theme.spacing(2, 2, 0, 2),
-  justifyContent: "space-between",
-  [theme.breakpoints.up("md")]: {
-    alignItems: "flex-start",
-    padding: theme.spacing(7, 7, 0, 7)
-  }
-}));
-const SectionStyle = styled(Card)(({
-  theme
-}) => ({
-  width: "100%",
-  maxWidth: 464,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  margin: theme.spacing(2, 0, 2, 2),
-  "& > div:nth-of-type(2)": {
-    maxHeight: "348px"
-  }
-}));
-const ContentStyle = styled("div")(({
-  theme
-}) => ({
-  maxWidth: 480,
-  margin: "auto",
-  display: "flex",
-  minHeight: "100vh",
-  flexDirection: "column",
-  justifyContent: "center",
-  padding: theme.spacing(12, 0)
-}));
-const TitleContainer = styled("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(0, 5)
-}));
-const ModuleTitleContainer = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "grid",
-  gridTemplateColumns: "1fr",
-  gridGap: theme.spacing(1)
-}));
-const ModuleWrapper = (props) => {
-  const {
-    children
-  } = props;
-  const {
-    getLabel,
-    getModuleLabel
-  } = useModuleDictionary();
-  const mdUp = useResponsive("up", "md");
-  const isSkeleton = !useFlagsPresent(["dictionary_loaded"]);
-  return /* @__PURE__ */ jsx(Page, {
-    title: getModuleLabel(),
-    children: /* @__PURE__ */ jsxs(RootStyle, {
-      children: [/* @__PURE__ */ jsxs(HeaderStyle, {
-        id: "HeaderStyle",
-        children: [/* @__PURE__ */ jsx(CompanyLogo, {
-          size: mdUp ? "normal" : "small",
-          isSkeleton
-        }), /* @__PURE__ */ jsx(LanguagePopover, {})]
-      }), mdUp && /* @__PURE__ */ jsxs(SectionStyle, {
-        id: "SectionStyle",
-        children: [/* @__PURE__ */ jsx(TitleContainer, {
-          id: "module_leyend",
-          children: /* @__PURE__ */ jsx(Typography, {
-            variant: "h3",
-            sx: {
-              px: 5,
-              mt: 10,
-              mb: 5
-            },
-            skeletonProps: {
-              isSkeleton,
-              width: "30%",
-              height: "18px"
-            },
-            children: getLabel("module_leyend")
-          })
-        }), /* @__PURE__ */ jsx(Image, {
-          isSkeleton,
-          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__ */ jsx(Container, {
-        maxWidth: "sm",
-        id: "formContainer",
-        children: /* @__PURE__ */ jsxs(ContentStyle, {
-          children: [/* @__PURE__ */ jsx(Stack, {
-            direction: "row",
-            alignItems: "center",
-            sx: {
-              mb: 5
-            },
-            children: /* @__PURE__ */ jsxs(ModuleTitleContainer, {
-              children: [/* @__PURE__ */ jsx(Typography, {
-                variant: "h4",
-                skeletonProps: {
-                  isSkeleton,
-                  width: "35%",
-                  height: "36px"
-                },
-                children: getModuleLabel()
-              }), /* @__PURE__ */ jsx(Typography, {
-                sx: {
-                  color: "text.secondary"
-                },
-                skeletonProps: {
-                  isSkeleton,
-                  width: "60%",
-                  height: "21px"
-                },
-                children: getLabel("module_description")
-              })]
-            })
-          }), children]
-        })
-      })]
-    })
-  });
-};
-const NoAuthModuleLayout = (props) => {
-  const {
-    moduleId,
-    moduleName,
-    children,
-    componentsDictionary,
-    skeletonFlags
-  } = props;
-  const {
-    currentLang
-  } = useLocales();
-  const finalSkeletonFlags = skeletonFlags;
-  if (finalSkeletonFlags.findIndex((f) => f === "dictionary_loaded") < 0) {
-    finalSkeletonFlags.push("dictionary_loaded");
-  }
-  if (finalSkeletonFlags.findIndex((f) => f === "domain_loaded") < 0) {
-    finalSkeletonFlags.push("domain_loaded");
-  }
-  return /* @__PURE__ */ jsx(FlagsProvider, {
-    children: /* @__PURE__ */ jsx(DomainProvider, {
-      children: /* @__PURE__ */ jsx(ModuleDictionaryProvider, {
-        isAuth: false,
-        moduleId,
-        moduleName,
-        componentsDictionary,
-        currentLang: currentLang.value,
-        children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, {
-          flags: finalSkeletonFlags,
-          children: /* @__PURE__ */ jsx(ModuleWrapper, {
-            children
-          })
-        })
-      })
-    })
-  });
-};
-function getNoAuthModuleLayoutComponentsDictionary() {
-  return ["no_auth_module_layout"];
-}
-const defaultNoAuthModuleLayoutDictionary = {
-  no_auth_module_layout: {}
-};
-export { NoAuthModuleLayout as N, defaultNoAuthModuleLayoutDictionary as d, getNoAuthModuleLayoutComponentsDictionary as g };