@m4l/components 0.0.0 → 0.0.3

package/dist/contexts/ModalContext/index.js

@@ -0,0 +1,162 @@
+import { createContext, useState } from "react";
+import { useEnvironment, voidFunction } from "@m4l/core";
+import Typography from "@mui/material/Typography";
+import { styled } from "@mui/material/styles";
+import { B as BoxIcon } from "../../components/mui_extended/BoxIcon/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { M as ModalDialog } from "../../components/ModalDialog/index.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
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment}/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 initialState = {
+  initialWidth: 600,
+  initialHeigth: 400,
+  open: false,
+  withClose: true,
+  onQueryClose: voidFunction,
+  iconComponent: void 0,
+  contentComponent: void 0,
+  actionComponents: void 0,
+  openModal: voidFunction,
+  openModalConfirm: voidFunction,
+  closeModal: voidFunction,
+  hasChanges: false,
+  setChanges: voidFunction,
+  title: ""
+};
+const ModalContext = createContext(initialState);
+function ModalProvider({
+  children
+}) {
+  const [modalOptions, setModalOptions] = useState({
+    open: initialState.open,
+    withClose: true,
+    onQueryClose: voidFunction,
+    title: "",
+    iconComponent: void 0,
+    contentComponent: void 0,
+    actionComponents: void 0,
+    standardActions: 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
+    } = modalOpenConfirmProps;
+    const onClickIntroClose = () => {
+      onClickIntro && onClickIntro();
+      closeModal();
+    };
+    setModalOptions({
+      open: true,
+      title,
+      variant,
+      contentComponent: /* @__PURE__ */ jsx(ContentConfirm, {
+        variant,
+        msg
+      }),
+      standardActions: {
+        withCancel: true,
+        onClickIntro: onClickIntroClose,
+        onClickCancel
+      }
+    });
+  };
+  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/dist/contexts/ModalContext/types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+export declare type TProps = {
+    children: ReactNode;
+};
+export interface StandarActions {
+    withCancel?: boolean;
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+export declare type VariantModal = 'warning' | 'delete' | 'info';
+export interface ModalOpenOptions {
+    initialWidth?: number;
+    initialHeigth?: number;
+    maxWidth?: number;
+    maxHeigth?: number;
+    withClose?: boolean;
+    onQueryClose?: () => void;
+    title: string;
+    iconComponent?: ReactNode;
+    contentComponent?: ((props?: any) => JSX.Element) | ReactNode;
+    actionComponents?: ReactNode[];
+    standardActions?: StandarActions;
+}
+export interface OpenModalConfirmProps {
+    title: string;
+    variant?: VariantModal;
+    titleAccept?: string;
+    msg: string;
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+export interface ModalState extends ModalOpenOptions {
+    open: boolean;
+    variant?: VariantModal;
+}
+export interface ModalContextProps extends ModalState {
+    openModal: (modalProps: ModalOpenOptions) => void;
+    openModalConfirm: (modalOpenProps: OpenModalConfirmProps) => void;
+    closeModal: () => void;
+    setChanges?: () => void;
+    hasChanges: boolean;
+}

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModalContext/index';
+export * from './ModalContext/types';

package/dist/hooks/useModal/index.d.ts

@@ -0,0 +1 @@
+export declare const useModal: () => import("../..").ModalContextProps;

package/dist/hooks/useModal/index.js

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

package/dist/hooks/useResponsive.d.ts

@@ -0,0 +1,8 @@
+import { Breakpoint } from '@mui/material';
+declare type Query = 'up' | 'down' | 'between' | 'only';
+declare type Key = Breakpoint | number;
+declare type Start = Breakpoint | number;
+declare type End = Breakpoint | number;
+export declare function useResponsive(query: Query, key?: Key, start?: Start, end?: End): boolean | undefined;
+export declare function useResponsiveDesktop(): boolean | undefined;
+export {};

package/dist/index.d.ts

@@ -1 +1,3 @@
-export * from './components/mui_extended';
+export * from './components';
+export * from './contexts';
+export * from './hooks/useModal';

package/dist/index.js

@@ -1,11 +1,27 @@
+export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
+export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
+export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
+export { F as FormActions } from "./components/FormActions/index.js";
+export { M as ModalDialog } from "./components/ModalDialog/index.js";
+export { R as Resizeable } from "./components/Resizeable/index.js";
+export { S as SplitLayout } from "./components/SplitLayout/index.js";
+export { M as ModalContext, a as ModalProvider } from "./contexts/ModalContext/index.js";
+export { u as useModal } from "./hooks/useModal/index.js";
 import "@mui/material/Box";
 import "react/jsx-runtime";
-export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+import "@mui/material/styles";
+import "@mui/material";
 import "react";
 import "@m4l/core";
-import "@mui/material";
 import "react-router-dom";
-export { M as MenuActions } from "./components/mui_extended/MenuActions/index.js";
-export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
-export { B as Breadcrumbs } from "./components/mui_extended/Breadcrumbs/index.js";
-import "@mui/material/styles";
+import "./react-draggable.js";
+import "prop-types";
+import "react-dom";
+import "clsx";
+import "./vendor.js";
+import "@mui/material/useMediaQuery";
+import "./react-splitter-layout.js";
+import "./commonjs.js";
+import "./react-resizable.js";
+import "@mui/material/Typography";

package/dist/prop-types.js

@@ -0,0 +1 @@
+import "prop-types";