@m4l/components 0.0.2 → 0.0.5

package/dist/components/mui_extended/Pager/index.js

@@ -0,0 +1,201 @@
+import { useMemo } from "react";
+import { Skeleton, TablePagination } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as IconButton } from "../IconButton/index.js";
+import { useEnvironment } from "@m4l/core";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  justifyContent: "center",
+  display: "flex",
+  marginLeft: 0,
+  [theme.breakpoints.up("sm")]: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: theme.spacing(3)
+  }
+}));
+function PagerActions(props) {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /* @__PURE__ */ jsxs(WrapperPagerActions, {
+    id: "WrapperPagerActions",
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.first",
+      onClick: handleFirstPageButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/first.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.previous",
+      onClick: handleBackButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/previous.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.next",
+      onClick: handleNextButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "next page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/next.svg`
+    }), /* @__PURE__ */ jsx(IconButton, {
+      dictionaryTooltip: "pager.last",
+      onClick: handleLastPageButtonClick,
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      "aria-label": "last page",
+      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/last.svg`
+    })]
+  });
+}
+styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden"
+}));
+const SKTWrapperPagerActions = styled("div")(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButtonContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  marginLeft: theme.spacing(3)
+}));
+const SKTSvgIconButton = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const SKTWrapperRowsPerPage = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "auto auto",
+  gridGap: theme.spacing(1),
+  marginRight: theme.spacing(3)
+}));
+function Pager(props) {
+  const {
+    totalRecords,
+    rowsPerPageOptions = [5, 10, 2],
+    rowsPerPage = 25,
+    page,
+    onPageChange,
+    onRowsPerPageChange,
+    labelRows = "Rows per page",
+    labelOf = "Of",
+    isSkeleton = "false",
+    isDesktop
+  } = props;
+  const currentPage = useMemo(() => {
+    if (rowsPerPage * page > totalRecords) {
+      return Math.floor(totalRecords / rowsPerPage);
+    }
+    return page;
+  }, [page, rowsPerPage, totalRecords]);
+  const handleChangeRowsPerPage = (event) => {
+    onRowsPerPageChange(parseInt(event.target.value, 10));
+    onPageChange(0);
+  };
+  const handleChangePage = (_event, newPage) => {
+    onPageChange(newPage);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapperPagerActions, {
+      children: [/* @__PURE__ */ jsxs(SKTWrapperRowsPerPage, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "40px",
+          height: "16px"
+        }), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: "20px",
+          height: "16px"
+        })]
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50px",
+        height: "16px"
+      }), /* @__PURE__ */ jsxs(SKTSvgIconButtonContainer, {
+        children: [/* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        }), /* @__PURE__ */ jsx(SKTSvgIconButton, {
+          children: /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          })
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx(TablePagination, {
+    id: "TablePagination",
+    rowsPerPageOptions,
+    component: "div",
+    count: totalRecords,
+    rowsPerPage,
+    page: currentPage,
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    labelDisplayedRows: isDesktop ? ({
+      from,
+      to,
+      count
+    }) => `${from}-${to} ${labelOf} ${count}` : () => ``,
+    labelRowsPerPage: isDesktop ? labelRows : "",
+    ActionsComponent: PagerActions
+  });
+}
+function getPagerComponentsDictionary() {
+  return ["pager"];
+}
+const defaultPagerDictionary = {
+  pager: {
+    first: "First",
+    previous: "Previous",
+    before: "Before",
+    last: "Last",
+    of: "of"
+  }
+};
+export { Pager as P, defaultPagerDictionary as d, getPagerComponentsDictionary as g };

package/dist/components/mui_extended/Pager/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Pager: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapperPagerActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTSvgIconButtonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTSvgIconButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SKTWrapperRowsPerPage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/mui_extended/Pager/types.d.ts

@@ -0,0 +1,13 @@
+export interface PagerProps {
+    records: number;
+    totalRecords: number;
+    rowsPerPageOptions?: number[];
+    rowsPerPage?: number;
+    page: number;
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    labelRows?: string;
+    labelOf?: string;
+    isSkeleton?: boolean;
+    isDesktop?: boolean;
+}

package/dist/components/mui_extended/index.d.ts

@@ -1,9 +1,13 @@
 export { BoxIcon } from './BoxIcon';
 export { default as MenuPopover } from './MenuPopover';
+export { default as IconButton } from './IconButton';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { TLink } from './Breadcrumbs/types';
 export { default as MenuActions } from './MenuActions';
-export type { MenuAction } from './MenuActions/types';
+export type { MenuAction, ComponentActionProps } from './MenuActions/types';
+export { default as Pager } from './Pager';
+export { getPagerComponentsDictionary, defaultPagerDictionary } from './Pager/dicctionary';
+export type { PagerProps } from './Pager/types';
 declare module '@mui/material/styles/createPalette' {
     interface TypeBackground {
         neutral: string;

package/dist/contexts/ModalContext/index.js

@@ -1,24 +1,16 @@
-import "@mui/material/Typography";
-import { voidFunction } from "@m4l/core";
-import "@mui/material/Box";
-import "react/jsx-runtime";
-import { createContext } from "react";
+import { createContext, useState } from "react";
+import { useEnvironment, voidFunction } from "@m4l/core";
+import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
-import "@mui/material";
-import "../../react-draggable.js";
-import "../../components/ModalDialog/index.js";
-import "../../components/Resizeable/index.js";
-import "@mui/material/useMediaQuery";
-import "../../components/mui_extended/MenuPopover/index.js";
-import "react-router-dom";
-import "../../components/mui_extended/MenuActions/index.js";
-import "../../components/FormActions/index.js";
-styled("div")(() => ({
+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%"
 }));
-styled("div")(({
+const ModalContent = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -33,7 +25,7 @@ styled("div")(({
     gridTemplateColumns: "1fr 1fr"
   }
 }));
-styled("div")(({
+const IllustrationContainer = styled("div")(({
   theme,
   variant
 }) => ({
@@ -44,10 +36,42 @@ styled("div")(({
     background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
   }
 }));
-styled("div")(() => ({
+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,
@@ -65,4 +89,74 @@ const initialState = {
   title: ""
 };
 const ModalContext = createContext(initialState);
-export { ModalContext as M };
+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/index.d.ts

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

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

@@ -1 +1 @@
-export declare const useModal: () => import("../../contexts/ModalContext/types").ModalContextProps;
+export declare const useModal: () => import("../..").ModalContextProps;

package/dist/hooks/usePaginate.d.ts

@@ -0,0 +1,15 @@
+import type { PagerState } from '../components/DataGrid/types';
+export interface propsUsePaginate {
+    endPoint: string;
+    timeout?: number;
+    fireOnEnter?: boolean;
+    queryParams?: Record<string, unknown>;
+}
+export declare const usePaginate: <TRow>(props: propsUsePaginate) => {
+    onPageChange: (newPage: number) => void;
+    onRowsPerPageChange: (newRowsPerPage: number) => void;
+    pagerState: PagerState;
+    rows: TRow[];
+    clearRows: () => void;
+    Refresh: () => void;
+};

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,11 +1,17 @@
 export { B as BoxIcon } from "./components/mui_extended/BoxIcon/index.js";
 export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+export { I as IconButton } from "./components/mui_extended/IconButton/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 { P as Pager, d as defaultPagerDictionary, g as getPagerComponentsDictionary } from "./components/mui_extended/Pager/index.js";
+export { a as DataGrid } from "./components/DataGrid/index.js";
+export { O as ObjectLogs } from "./components/ObjectLogs/index.js";
 export { F as FormActions } from "./components/FormActions/index.js";
-export { M as ModalDialog } from "./components/ModalDialog/index.js";
+export { M as ModalDialog, d as defaultModalDialogDictionary, g as getModalDialogComponentsDictionary } 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";
 import "@mui/material/styles";
@@ -13,15 +19,21 @@ import "@mui/material";
 import "react";
 import "@m4l/core";
 import "react-router-dom";
-import "./react-draggable.js";
-import "prop-types";
-import "react-dom";
+import "./react-data-grid.js";
 import "clsx";
-import "./hooks/useModal/index.js";
-import "./contexts/ModalContext/index.js";
-import "@mui/material/Typography";
-import "@mui/material/useMediaQuery";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import "@mui_extended";
 import "./vendor.js";
-import "./react-splitter-layout.js";
+import "@mui/material/useMediaQuery";
+import "@mui/x-date-pickers";
+import "@mui/lab/AdapterDateFns";
+import "date-fns";
+import "./react-json-view.js";
 import "./commonjs.js";
+import "prop-types";
+import "react-dom";
+import "./react-draggable.js";
+import "./react-splitter-layout.js";
 import "./react-resizable.js";
+import "@mui/material/Typography";