@m4l/components 0.1.11 → 0.1.13

package/components/hook-form/RHFTextField/index.js

@@ -1,87 +0,0 @@
-import { useFormContext, Controller } from "react-hook-form";
-import { Skeleton, TextField } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { forwardRef } from "react";
-import { useModuleSkeleton } from "@m4l/core";
-import { jsx } from "react/jsx-runtime";
-const SKTRHFWrapperTextField = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  border: `1px solid ${theme.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1)
-}));
-const RHFTextField = forwardRef((props, inputRef) => {
-  const {
-    name: nameRHF,
-    autoComplete = "off",
-    skeletonProps: skeletoProps = {},
-    type,
-    ...other
-  } = props;
-  const {
-    width = "100%",
-    height = 14
-  } = skeletoProps;
-  const isSkeleton = useModuleSkeleton();
-  const {
-    control
-  } = useFormContext();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width,
-        height
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name: nameRHF,
-    control,
-    render: ({
-      field: {
-        onChange,
-        onBlur,
-        value,
-        name,
-        ref
-      },
-      fieldState: {
-        error
-      }
-    }) => {
-      const onInternalChange = (event) => {
-        if (type === "number") {
-          if (event.target.value) {
-            onChange(Number(event.target.value));
-            return;
-          }
-        }
-        onChange(event);
-      };
-      return /* @__PURE__ */ jsx(
-        TextField,
-        {
-          inputRef,
-          autoComplete,
-          onChange: onInternalChange,
-          onBlur,
-          value,
-          name,
-          ref,
-          fullWidth: true,
-          error: !!error,
-          helperText: error?.message,
-          type,
-          ...other
-        }
-      );
-    }
-  });
-});
-RHFTextField.displayName = "RHFTextField";
-export { RHFTextField as R };

package/components/hook-form/RHFUpload/index.js

@@ -1,255 +0,0 @@
-import { styled as styled$1, FormHelperText } from "@mui/material";
-import { useCallback } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import { i as isString_1 } from "../../../lodash.js";
-import { useDropzone } from "react-dropzone";
-import { styled, alpha } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.js";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "../../../react-lazy-load-image-component.js";
-const RootStyle = styled("div")(({
-  theme
-}) => ({
-  width: "inherit",
-  height: "100%",
-  minWidth: theme.spacing(20),
-  margin: "auto",
-  borderRadius: theme.spacing(1),
-  padding: theme.spacing(1),
-  border: `1px dashed ${theme.palette.grey[50032]}`
-}));
-const DropZoneStyle = styled("div")(({
-  theme
-}) => ({
-  zIndex: 0,
-  width: "100%",
-  height: "100%",
-  outline: "none",
-  display: "flex",
-  overflow: "hidden",
-  borderRadius: theme.spacing(1),
-  position: "relative",
-  alignItems: "center",
-  justifyContent: "center",
-  "& > *": {
-    width: "100%",
-    height: "100%"
-  },
-  "&:hover": {
-    cursor: "pointer",
-    "& .placeholder": {
-      zIndex: 9
-    }
-  }
-}));
-const PlaceholderStyle = styled("div")(({
-  theme
-}) => ({
-  "&:hover": {
-    opacity: 1
-  },
-  display: "flex",
-  justifyContent: "center",
-  position: "absolute",
-  zIndex: "2",
-  inset: "0",
-  transition: theme.transitions.create("opacity", {
-    easing: theme.transitions.easing.easeInOut,
-    duration: theme.transitions.duration.shorter
-  }),
-  overflow: "auto"
-}));
-const ContainerUploadBody = styled("div")(({
-  theme
-}) => ({
-  padding: theme.spacing(3, 5),
-  display: "flex",
-  flexWrap: "wrap",
-  justifyContent: "center",
-  width: "100%",
-  height: "100%",
-  gap: theme.spacing(3)
-}));
-const Containermessage = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  flexDirection: "column",
-  gap: theme.spacing(3)
-}));
-const ContainerTitle = styled("span")(({
-  theme
-}) => ({
-  ...theme.typography.subtitle2,
-  width: "fit-content"
-}));
-const ContainerDescription = styled("span")(({
-  theme
-}) => ({
-  ...theme.typography.body2,
-  minWidth: theme.spacing(20)
-}));
-const ContainerConditions = styled("span")(({
-  theme
-}) => ({
-  ...theme.typography.caption,
-  width: "fit-content"
-}));
-const WrapperImage = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  maxWidth: theme.spacing(20)
-}));
-styled("div")(() => ({
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  inset: "0",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-}));
-function UploadImage({
-  error,
-  file,
-  helperText,
-  sx,
-  ...other
-}) {
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragReject
-  } = useDropzone({
-    multiple: false,
-    ...other
-  });
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(RootStyle, {
-      id: "RootStyle",
-      sx: {
-        ...(isDragReject || error) && {
-          borderColor: "error.light"
-        },
-        ...sx
-      },
-      children: /* @__PURE__ */ jsxs(DropZoneStyle, {
-        id: "DropZoneStyle",
-        ...getRootProps(),
-        sx: {
-          ...isDragActive && {
-            opacity: 0.72
-          }
-        },
-        children: [/* @__PURE__ */ jsx("input", {
-          ...getInputProps()
-        }), file && /* @__PURE__ */ jsx(Image, {
-          alt: "avatar",
-          src: isString_1(file) ? file : file.preview,
-          sx: {
-            zIndex: 8
-          }
-        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
-          id: "PlaceholderStyle",
-          className: "placeholder",
-          sx: {
-            ...file ? {
-              bgcolor: alpha("#161C24", 0.72),
-              color: "common.white",
-              opacity: 0
-            } : {
-              opacity: 1
-            },
-            ...(isDragReject || error) && {
-              bgcolor: "error.lighter",
-              borderColor: "error.light",
-              color: "error.main"
-            }
-          },
-          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
-            className: "ContainerUploadBody",
-            children: [/* @__PURE__ */ jsx(WrapperImage, {
-              children: /* @__PURE__ */ jsx(Image, {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
-                effect: "opacity",
-                width: "100%",
-                height: "auto",
-                mb: 1
-              })
-            }), /* @__PURE__ */ jsxs(Containermessage, {
-              children: [/* @__PURE__ */ jsx(ContainerTitle, {
-                children: file ? getLabel("upload_image.title_update") : getLabel("upload_image.title_upload")
-              }), /* @__PURE__ */ jsx(ContainerDescription, {
-                children: getLabel("upload_image.description")
-              }), /* @__PURE__ */ jsx(ContainerConditions, {
-                children: getLabel("upload_image.conditions")
-              })]
-            })]
-          })
-        })]
-      })
-    }), helperText && helperText]
-  });
-}
-const WrapperRHFUploadImage = styled$1("div")(() => ({
-  width: "inherit",
-  height: "inherit",
-  padding: "1px"
-}));
-function RHFUploadImage({
-  name,
-  ...other
-}) {
-  const {
-    control,
-    setValue
-  } = useFormContext();
-  const handleDrop = useCallback((acceptedFiles) => {
-    const file = acceptedFiles[0];
-    if (file) {
-      setValue(name, Object.assign(file, {
-        preview: URL.createObjectURL(file)
-      }));
-    }
-  }, [setValue]);
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field,
-      fieldState: {
-        error
-      }
-    }) => {
-      const checkError = !!error && !field.value;
-      return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, {
-        children: [/* @__PURE__ */ jsx(UploadImage, {
-          onDrop: handleDrop,
-          error: checkError,
-          ...other,
-          file: field.value
-        }), checkError && /* @__PURE__ */ jsx(FormHelperText, {
-          error: true,
-          sx: {
-            px: 2,
-            textAlign: "center"
-          },
-          children: error.message
-        })]
-      });
-    }
-  });
-}
-export { RHFUploadImage as R };

package/components/mui_extended/Accordion/index.js

@@ -1,105 +0,0 @@
-import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.js";
-import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.js";
-import { styled } from "@mui/material/styles";
-import { jsx, jsxs } from "react/jsx-runtime";
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderRadius: theme.spacing(0.5),
-  height: theme.spacing(4.5),
-  minHeight: theme.spacing(4.5),
-  backgroundColor: theme.palette.background.header,
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  marginBottom: "0px"
-}));
-const WrapperAccordionLabel = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: theme.spacing(2)
-}));
-const Label = styled("span")(({
-  theme
-}) => ({
-  ...theme.typography.subtitle2
-}));
-const AccordionLabel = (props) => {
-  const {
-    isSkeleton,
-    label,
-    SKTWidht,
-    SKTHeight,
-    labelIcon
-  } = props;
-  return /* @__PURE__ */ jsx("div", {
-    children: isSkeleton ? /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
-      children: [labelIcon && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: SKTWidht,
-        height: SKTHeight
-      })]
-    }) : /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
-      children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
-        src: labelIcon
-      }), /* @__PURE__ */ jsx(Label, {
-        children: label
-      })]
-    })
-  });
-};
-function Accordion(props) {
-  const {
-    label,
-    SKTWidht,
-    SKTHeight,
-    children,
-    accordionProps,
-    summaryProps,
-    labelIcon
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsxs(Accordion$1, {
-    variant: "outlined",
-    square: true,
-    TransitionProps: {
-      unmountOnExit: true
-    },
-    defaultExpanded: true,
-    ...accordionProps,
-    children: [/* @__PURE__ */ jsx(AccordionSummary, {
-      "aria-controls": "expanded-content",
-      disableTouchRipple: false,
-      expandIcon: /* @__PURE__ */ jsx(IconButton, {
-        "aria-label": "settings",
-        src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`
-      }),
-      ...summaryProps,
-      children: /* @__PURE__ */ jsx(AccordionLabel, {
-        isSkeleton,
-        label,
-        SKTWidht,
-        SKTHeight,
-        labelIcon
-      })
-    }), /* @__PURE__ */ jsx(AccordionDetails, {
-      children
-    })]
-  });
-}
-export { Accordion as A };

package/components/mui_extended/Avatar/index.js

@@ -1,33 +0,0 @@
-import { forwardRef } from "react";
-import { useTheme } from "@mui/material/styles";
-import { Avatar as Avatar$1 } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-const Avatar = forwardRef(({
-  color = "default",
-  children,
-  sx,
-  ...other
-}, ref) => {
-  const theme = useTheme();
-  if (color === "default") {
-    return /* @__PURE__ */ jsx(Avatar$1, {
-      ref,
-      sx,
-      ...other,
-      children
-    });
-  }
-  return /* @__PURE__ */ jsx(Avatar$1, {
-    ref,
-    sx: {
-      fontWeight: theme.typography.fontWeightMedium,
-      color: theme.palette[color].contrastText,
-      backgroundColor: theme.palette[color].main,
-      ...sx
-    },
-    ...other,
-    children
-  });
-});
-Avatar.displayName = "Avatar";
-export { Avatar as A };

package/components/mui_extended/BoxIcon/index.js

@@ -1,20 +0,0 @@
-import { Box } from "@mui/material";
-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/components/mui_extended/Breadcrumbs/index.js

@@ -1,92 +0,0 @@
-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 };