@m4l/components 0.1.13 → 0.1.15

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

@@ -0,0 +1,65 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { styled } from "@mui/material/styles";
+import { Skeleton, FormControlLabel, Checkbox } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const WrapperSKTRHFCheckbox = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "8px"
+}));
+const SKTCheckSkeleton = styled(Skeleton)(() => ({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px"
+}));
+const ErrorLabel = styled("p")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  color: theme.palette.error.main,
+  marginRight: 14,
+  marginLeft: 14
+}));
+function RHFCheckbox({
+  name,
+  sizeCheck = "small",
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(FormControlLabel, {
+    control: /* @__PURE__ */ jsx(Controller, {
+      name,
+      control,
+      render: ({
+        field,
+        fieldState: {
+          error
+        }
+      }) => {
+        if (isSkeleton) {
+          return /* @__PURE__ */ jsx(WrapperSKTRHFCheckbox, {
+            children: /* @__PURE__ */ jsx(SKTCheckSkeleton, {
+              variant: "rectangular"
+            })
+          });
+        }
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Checkbox, {
+            size: sizeCheck,
+            ...field,
+            checked: field.value
+          }), error?.message && /* @__PURE__ */ jsx(ErrorLabel, {
+            children: error?.message + ""
+          })]
+        });
+      }
+    }),
+    ...other
+  });
+}
+export { RHFCheckbox as R };

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

@@ -0,0 +1,79 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { useModuleSkeleton, useEnvironment } 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)
+}));
+function RHFDateTime(props) {
+  const {
+    name,
+    autoComplete = "off",
+    skeletonProps: skeletoProps = {}
+  } = props;
+  const {
+    width = "100%",
+    height = 14
+  } = skeletoProps;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const {
+    dfnsFormat: {
+      datetime_format,
+      datetime_mask
+    }
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width,
+        height
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsx(DateTimePicker, {
+        ampm: false,
+        inputFormat: datetime_format,
+        mask: datetime_mask,
+        label: "",
+        value: field.value,
+        onChange: (value) => {
+          if (!isNaN(value)) {
+            field.onChange(value);
+          } else {
+            field.onChange(void 0);
+          }
+        },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
+          autoComplete,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          ...params
+        })
+      });
+    }
+  });
+}
+export { RHFDateTime as R };

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

@@ -0,0 +1,32 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { FormGroup, FormControlLabel, Checkbox } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFMultiCheckbox({
+  name,
+  options,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field
+    }) => {
+      const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
+      return /* @__PURE__ */ jsx(FormGroup, {
+        children: options.map((option) => /* @__PURE__ */ jsx(FormControlLabel, {
+          control: /* @__PURE__ */ jsx(Checkbox, {
+            checked: field.value.includes(option),
+            onChange: () => field.onChange(onSelected(option))
+          }),
+          label: option,
+          ...other
+        }, option))
+      });
+    }
+  });
+}
+export { RHFMultiCheckbox as R };

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

@@ -0,0 +1,47 @@
+import { styled } from "@mui/material";
+import { useFormContext, Controller } from "react-hook-form";
+import { E as ErrorLabel } from "../../ErrorLabel/index.js";
+import { P as Period } from "../../Period/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing(1)
+}));
+const RHFPeriod = (props) => {
+  const {
+    name
+  } = props;
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [/* @__PURE__ */ jsx(Period, {
+          value,
+          onChange,
+          error: !!error
+        }), error && /* @__PURE__ */ jsx(ErrorLabel, {
+          message: error.message || ""
+        })]
+      });
+    }
+  });
+};
+export { RHFPeriod as R };

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

@@ -0,0 +1,41 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RHFRadioGroup({
+  name,
+  options,
+  getOptionLabel,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsxs("div", {
+      children: [/* @__PURE__ */ jsx(RadioGroup, {
+        ...field,
+        row: true,
+        ...other,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(FormControlLabel, {
+          value: option,
+          control: /* @__PURE__ */ jsx(Radio, {}),
+          label: getOptionLabel?.length ? getOptionLabel[index] : option
+        }, option))
+      }), !!error && /* @__PURE__ */ jsx(FormHelperText, {
+        error: true,
+        sx: {
+          px: 2
+        },
+        children: error.message
+      })]
+    })
+  });
+}
+export { RHFRadioGroup as R };

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

@@ -0,0 +1,34 @@
+import { useFormContext, Controller } from "react-hook-form";
+import { TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function RHFSelect({
+  name,
+  children,
+  ...other
+}) {
+  const {
+    control
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field,
+      fieldState: {
+        error
+      }
+    }) => /* @__PURE__ */ jsx(TextField, {
+      ...field,
+      select: true,
+      fullWidth: true,
+      SelectProps: {
+        native: true
+      },
+      error: !!error,
+      helperText: error?.message,
+      ...other,
+      children
+    })
+  });
+}
+export { RHFSelect as R };

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

@@ -0,0 +1,87 @@
+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

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