@m4l/components 0.0.0

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxIconProps } from './types';
+export declare function BoxIcon({ src, sx }: BoxIconProps): JSX.Element;

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

@@ -0,0 +1,20 @@
+import Box from "@mui/material/Box";
+import { jsx } from "react/jsx-runtime";
+function BoxIcon({
+  src,
+  sx
+}) {
+  return /* @__PURE__ */ jsx(Box, {
+    component: "span",
+    sx: {
+      width: 20,
+      height: 20,
+      display: "inline-block",
+      bgcolor: "currentColor",
+      mask: `url(${src}) no-repeat center / contain`,
+      WebkitMask: `url(${src}) no-repeat center / contain`,
+      ...sx
+    }
+  });
+}
+export { BoxIcon as B };

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

@@ -0,0 +1,4 @@
+import { BoxProps } from '@mui/material';
+export interface BoxIconProps extends BoxProps {
+    src: string;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LinkItemProps } from './types';
+export declare function LinkItem({ link }: LinkItemProps): JSX.Element;

package/dist/components/mui_extended/Breadcrumbs/components/LinkItem/types.d.ts

@@ -0,0 +1,4 @@
+import { TLink } from '../../types';
+export declare type LinkItemProps = {
+    link: TLink;
+};

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BreadcrumbsProps } from './types';
+export default function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

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

@@ -0,0 +1,92 @@
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { Link, Box, Typography, Breadcrumbs as Breadcrumbs$1 } from "@mui/material";
+import { Link as Link$1 } from "react-router-dom";
+import { jsxs, jsx } from "react/jsx-runtime";
+function LinkItem({
+  link
+}) {
+  const {
+    href,
+    name,
+    icon,
+    dictionaryField: dictionaryDescription
+  } = link;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  return /* @__PURE__ */ jsxs(Link, {
+    variant: "body2",
+    component: Link$1,
+    to: href || "#",
+    sx: {
+      lineHeight: 2,
+      display: "flex",
+      alignItems: "center",
+      color: "text.primary",
+      "& > div": {
+        display: "inherit"
+      }
+    },
+    children: [icon && /* @__PURE__ */ jsx(Box, {
+      sx: {
+        mr: 1,
+        "& svg": {
+          width: 20,
+          height: 20
+        }
+      },
+      children: icon
+    }), dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name]
+  }, name);
+}
+function Breadcrumbs(props) {
+  const {
+    links,
+    activeLast = false,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const currentLink = useMemo(() => {
+    if (links.length === 0)
+      return "";
+    const {
+      dictionaryField
+    } = links[links.length - 1];
+    return getLabel(dictionaryField);
+  }, [getLabel, links]);
+  const listDefault = useMemo(() => links.map((link) => /* @__PURE__ */ jsx(LinkItem, {
+    link
+  }, link.name)), [links]);
+  const listActiveLast = useMemo(() => links.map((link) => link.name !== currentLink ? /* @__PURE__ */ jsx(LinkItem, {
+    link
+  }, link.name) : /* @__PURE__ */ jsx(Typography, {
+    variant: "body2",
+    sx: {
+      maxWidth: 260,
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      color: "text.disabled",
+      textOverflow: "ellipsis"
+    },
+    children: currentLink
+  }, link.name)), [currentLink, links]);
+  return /* @__PURE__ */ jsx(Breadcrumbs$1, {
+    id: "MUIBreadcrumbs",
+    separator: /* @__PURE__ */ jsx(Box, {
+      component: "span",
+      sx: {
+        width: 4,
+        height: 4,
+        mx: 0.5,
+        borderRadius: "50%",
+        bgcolor: "text.disabled"
+      }
+    }),
+    ...other,
+    children: activeLast ? listDefault : listActiveLast
+  });
+}
+export { Breadcrumbs as B };

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

@@ -0,0 +1,12 @@
+import { BreadcrumbsProps as MUIBreadcrumbsProps } from '@mui/material';
+import { ReactElement } from 'react';
+export declare type TLink = {
+    href?: string;
+    name: string;
+    dictionaryField: string;
+    icon?: ReactElement;
+};
+export interface BreadcrumbsProps extends MUIBreadcrumbsProps {
+    links: TLink[];
+    activeLast?: boolean;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MenuActionsProps } from './types';
+export default function MenuActions(props: MenuActionsProps): JSX.Element;

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

@@ -0,0 +1,113 @@
+import { useState, useMemo } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { IconButton, Tooltip, MenuItem } from "@mui/material";
+import { M as MenuPopover } from "../MenuPopover/index.js";
+import { styled } from "@mui/material/styles";
+import { B as BoxIcon } from "../BoxIcon/index.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const WrapperMenuActions = styled(IconButton)(() => ({}));
+const LabelMemuItem = styled("div")(({
+  theme
+}) => ({
+  height: "22px",
+  marginLeft: theme.spacing(1.5),
+  display: "flex",
+  alignItems: "center"
+}));
+function MenuActions(props) {
+  const {
+    menuActions,
+    objItem = {},
+    urlIcon,
+    toolTip = "",
+    marginTop = -1,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    width = 200,
+    arrow = "right-top",
+    ...other
+  } = props;
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [open, setOpen] = useState(null);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const urlFinalIcon = useMemo(() => {
+    if (urlIcon)
+      return urlIcon;
+    return `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`;
+  }, [urlIcon, host_static_assets, environment]);
+  const handleClose = () => {
+    setOpen(null);
+  };
+  const handleClick = (menuAction) => {
+    setOpen(null);
+    menuAction.onClick();
+  };
+  const finalActions = useMemo(() => {
+    let ret;
+    if (typeof menuActions !== "function") {
+      ret = menuActions;
+    } else {
+      ret = menuActions(objItem);
+    }
+    return ret;
+  }, [menuActions, objItem]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Tooltip, {
+      title: toolTip,
+      children: /* @__PURE__ */ jsx(WrapperMenuActions, {
+        id: "WrapperMenuActions",
+        size: "small",
+        onClick: handleOpen,
+        children: /* @__PURE__ */ jsx(BoxIcon, {
+          src: urlFinalIcon,
+          sx: {
+            width: 20,
+            height: 20
+          }
+        })
+      })
+    }), /* @__PURE__ */ jsx(MenuPopover, {
+      id: "MenuPopover",
+      open: Boolean(open),
+      anchorEl: open,
+      onClose: handleClose,
+      arrow,
+      sx: {
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        width,
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      ...other,
+      children: open && finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(MenuItem, {
+        dense: true,
+        onClick: () => handleClick(menuAction),
+        sx: {
+          color: menuAction.color ? menuAction.color : "text.main"
+        },
+        disabled: menuAction.disabled,
+        children: [/* @__PURE__ */ jsx(BoxIcon, {
+          src: menuAction.urlIcon
+        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+          children: getLabel(menuAction.dictionaryField)
+        })]
+      }, `menu_action_${index}`))
+    })]
+  });
+}
+export { MenuActions as M };

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { MenuPopoverProps } from '../MenuPopover/types';
+export interface ComponentActionProps {
+    description?: string;
+    onClick: (props?: any) => void;
+}
+export interface MenuAction {
+    urlIcon: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    dictionaryField: string;
+    onClick: (props?: any) => void;
+    disabled: boolean;
+    color?: string;
+    component?: (props: ComponentActionProps) => JSX.Element;
+}
+export interface MenuActionsProps extends Omit<MenuPopoverProps, 'open'> {
+    objItem?: any;
+    urlIcon?: string;
+    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
+    toolTip?: string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginRight?: number | string;
+    marginLeft?: number | string;
+    width?: number;
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MenuPopoverProps } from './types';
+export default function MenuPopover({ children, arrow, disabledArrow, sx, ...other }: MenuPopoverProps): JSX.Element;

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

@@ -0,0 +1,135 @@
+import { styled } from "@mui/material/styles";
+import { Popover } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+const ArrowStyle = styled("span")(({
+  arrow,
+  theme
+}) => {
+  const SIZE = 12;
+  const POSITION = -(SIZE / 2);
+  const borderStyle = `solid 1px ${theme.palette.grey[50012]}`;
+  const topStyle = {
+    borderRadius: "0 0 3px 0",
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle
+  };
+  const bottomStyle = {
+    borderRadius: "3px 0 0 0",
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle
+  };
+  const leftStyle = {
+    borderRadius: "0 3px 0 0",
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle
+  };
+  const rightStyle = {
+    borderRadius: "0 0 0 3px",
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle
+  };
+  return {
+    display: "none",
+    [theme.breakpoints.up("sm")]: {
+      zIndex: 1,
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: theme.palette.background.paper
+    },
+    ...arrow === "top-left" && {
+      ...topStyle,
+      left: 20
+    },
+    ...arrow === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrow === "top-right" && {
+      ...topStyle,
+      right: 20
+    },
+    ...arrow === "bottom-left" && {
+      ...bottomStyle,
+      left: 20
+    },
+    ...arrow === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...arrow === "bottom-right" && {
+      ...bottomStyle,
+      right: 20
+    },
+    ...arrow === "left-top" && {
+      ...leftStyle,
+      top: 20
+    },
+    ...arrow === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrow === "left-bottom" && {
+      ...leftStyle,
+      bottom: 20
+    },
+    ...arrow === "right-top" && {
+      ...rightStyle,
+      top: 20
+    },
+    ...arrow === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...arrow === "right-bottom" && {
+      ...rightStyle,
+      bottom: 20
+    }
+  };
+});
+function MenuPopover({
+  children,
+  arrow = "top-right",
+  disabledArrow,
+  sx,
+  ...other
+}) {
+  return /* @__PURE__ */ jsxs(Popover, {
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    PaperProps: {
+      sx: {
+        p: 1,
+        width: 200,
+        overflow: "inherit",
+        ...sx
+      }
+    },
+    ...other,
+    children: [!disabledArrow && /* @__PURE__ */ jsx(ArrowStyle, {
+      arrow
+    }), children]
+  });
+}
+export { MenuPopover as M };

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

@@ -0,0 +1,9 @@
+import { PopoverProps } from '@mui/material';
+export declare type Arrow = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+export declare type ArrowStyleProps = {
+    arrow: Arrow;
+};
+export interface MenuPopoverProps extends PopoverProps {
+    arrow?: Arrow;
+    disabledArrow?: boolean;
+}

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

@@ -0,0 +1,42 @@
+export { BoxIcon } from './BoxIcon';
+export { default as MenuPopover } from './MenuPopover';
+export { default as Breadcrumbs } from './Breadcrumbs';
+export type { TLink } from './Breadcrumbs/types';
+export { default as MenuActions } from './MenuActions';
+export type { MenuAction } from './MenuActions/types';
+declare module '@mui/material/styles/createPalette' {
+    interface TypeBackground {
+        neutral: string;
+        autofill: string;
+        header: string;
+    }
+    interface SimplePaletteColorOptions {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+    }
+    interface PaletteColor {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+    }
+}
+declare module '@mui/material' {
+    interface Color {
+        0: string;
+        500_8: string;
+        500_12: string;
+        500_16: string;
+        500_24: string;
+        500_32: string;
+        500_48: string;
+        500_56: string;
+        500_80: string;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/mui_extended';

package/dist/index.js

@@ -0,0 +1,11 @@
+import "@mui/material/Box";
+import "react/jsx-runtime";
+export { M as MenuPopover } from "./components/mui_extended/MenuPopover/index.js";
+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";

package/dist/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/importMeta" />

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@m4l/components",
+  "private": false,
+  "version": "0.0.0",
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "npx eslint src",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix"
+  },
+  "dependencies": {
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0"
+  },
+  "peerDependencies": {
+    "@m4l/core": "^0.0.26",
+    "@mui/material": "^5.8.7",
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0",
+    "react-router-dom":"^6.3.0"
+  },
+  "devDependencies": {
+    "@emotion/styled": "^11.9.3",
+    "@m4l/core": "^0.0.26",
+    "@m4l/graphics": "^0.0.14",
+    "@mui/material": "^5.8.7",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/node": "^17.0.40",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "@vitejs/plugin-react": "^1.3.2",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "prettier": "^2.6.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.2.1",
+    "vite-plugin-mkcert": "^1.7.2",
+    "vitest": "^0.17.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}