@m4l/components 9.2.28 → 9.2.29

package/components/mui_extended/Button/ButtonStyles.js

@@ -1,3 +1,4 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const buttonStyles = {
   /**
    * Styles for the root element of the button component.
@@ -79,26 +80,35 @@ const buttonStyles = {
     "& span": {
       margin: "0px"
     },
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "action"
+    )
+    // // Estilos específicos para el tamaño small
+    // ...(ownerState.size === 'small' && {
+    //   ...(theme.generalSettings.isMobile
+    //     ? {
+    //         height: theme.vars.size.mobile.small.action,
+    //         minHeight: theme.vars.size.mobile.small.action,
+    //       }
+    //     : {
+    //         height: theme.vars.size.desktop.small.action,
+    //         minHeight: theme.vars.size.desktop.small.action,
+    //       }),
+    // }),
+    // // Estilos específicos para el tamaño medium
+    // ...(ownerState.size === 'medium' && {
+    //   ...(theme.generalSettings.isMobile
+    //     ? {
+    //         height: theme.vars.size.mobile.medium.action,
+    //         minHeight: theme.vars.size.mobile.medium.action,
+    //       }
+    //     : {
+    //         height: theme.vars.size.desktop.medium.action,
+    //         minHeight: theme.vars.size.desktop.medium.action,
+    //       }),
+    // }),
   }),
   buttonIcon: {},
   /**
@@ -119,45 +129,64 @@ const buttonStyles = {
    * Styles for the skeleton button component.
    */
   skeletonButton: ({ theme, ownerState }) => ({
-    width: "100%",
-    background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      },
-      [theme.breakpoints.up("sm")]: {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.action,
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          height: theme.vars.size.desktop.small.action,
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      },
-      [theme.breakpoints.up("md")]: {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.action,
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          height: theme.vars.size.desktop.small.action,
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      }
+    "&&&": {
+      width: "100%",
+      background: theme.vars.palette.skeleton.transition,
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "action",
+        (sizeValue) => ({
+          height: sizeValue,
+          minHeight: sizeValue
+        })
+      )
+      // // Estilos específicos para el tamaño small
+      // ...(ownerState.size === 'small' && {
+      //   ...(theme.generalSettings.isMobile
+      //     ? {
+      //         height: theme.vars.size.mobile.small.action,
+      //         minHeight: theme.vars.size.mobile.small.action,
+      //       }
+      //     : {
+      //         height: theme.vars.size.desktop.small.action,
+      //         minHeight: theme.vars.size.desktop.small.action,
+      //       }),
+      //   [theme.breakpoints.up('sm')]: {
+      //     ...(theme.generalSettings.isMobile
+      //       ? {
+      //           height: theme.vars.size.mobile.small.action,
+      //           minHeight: theme.vars.size.mobile.small.action,
+      //         }
+      //       : {
+      //           height: theme.vars.size.desktop.small.action,
+      //           minHeight: theme.vars.size.desktop.small.action,
+      //         }),
+      //   },
+      // }),
+      // // Estilos específicos para el tamaño medium
+      // ...(ownerState.size === 'medium' && {
+      //   ...(theme.generalSettings.isMobile
+      //     ? {
+      //         height: theme.vars.size.mobile.medium.action,
+      //         minHeight: theme.vars.size.mobile.medium.action,
+      //       }
+      //     : {
+      //         height: theme.vars.size.desktop.medium.action,
+      //         minHeight: theme.vars.size.desktop.medium.action,
+      //       }),
+      //   [theme.breakpoints.up('md')]: {
+      //     ...(theme.generalSettings.isMobile
+      //       ? {
+      //           height: theme.vars.size.mobile.small.action,
+      //           minHeight: theme.vars.size.mobile.small.action,
+      //         }
+      //       : {
+      //           height: theme.vars.size.desktop.small.action,
+      //           minHeight: theme.vars.size.desktop.small.action,
+      //         }),
+      //   },
+      // }),
     }
   })
 };

package/components/mui_extended/LinearProgress/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { LinearProgress as LinearProgress$1 } from "@mui/material";
 const LinearProgress = (props) => {
   const { ...other } = props;
-  return /* @__PURE__ */ jsx(LinearProgress$1, { ...other });
+  return /* @__PURE__ */ jsx(LinearProgress$1, { sx: { width: "100%" }, ...other });
 };
 export {
   LinearProgress as L

package/index.js

@@ -133,7 +133,7 @@ import { R as R8 } from "./components/hook-form/RHFSelect/RHFSelect.js";
 import { R as R9 } from "./components/hook-form/RHFHelperError/index.js";
 import { R as R10 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
 import { R as R11 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R12 } from "./components/hook-form/RHFUpload/RHFUploadFile/index.js";
+import { R as R12 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
 import { R as R13 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js";
 import { R as R14 } from "./components/hook-form/RHFCheckbox/RHFCheckbox.js";
 import { R as R15 } from "./components/hook-form/RHFTextField/RHFTextField.js";
@@ -329,8 +329,8 @@ export {
   R8 as RHFSelect,
   R15 as RHFTextField,
   R16 as RHFTextFieldPassword,
-  R12 as RHFUploadFile,
   R21 as RHFUploadImage,
+  R12 as RHFUploadSingleFile,
   R18 as RHF_PERIOD_KEY_COMPONENT,
   R22 as RHFormProvider,
   R as Resizable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.28",
+  "version": "9.2.29",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

package/storybook/hook-form/RHFUploadSingleFile/RHFUploadSingleFile.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RHFUploadSingleFile } from '../../../src/components/hook-form/RHFUpload/RHFUploadSingleFile';
+declare const meta: Meta<typeof RHFUploadSingleFile>;
+type Story = StoryObj<typeof RHFUploadSingleFile>;
+export declare const RHFUploadSingleFileDefault: Story;
+export declare const RHFUploadSingleFileError: Story;
+/**
+ * Skeleton State
+ */
+export declare const RHFUploadSingleFileSkeleton: Story;
+export default meta;

package/components/MFIsolationApp/constants.js

@@ -1,4 +0,0 @@
-const TOAST_CONTAINER_ID = "toast-host";
-export {
-  TOAST_CONTAINER_ID as T
-};

package/components/hook-form/RHFUpload/RHFUploadFile/components/UploadSingleFile/index.d.ts

@@ -1,13 +0,0 @@
-import { DropzoneProps } from 'react-dropzone';
-interface UploadProps extends DropzoneProps {
-    error?: boolean;
-    file: any;
-    helperText?: React.ReactNode;
-    sx?: any;
-    onChange?: (...event: any[]) => void;
-}
-/**
- * todo: document this component
- */
-export default function UploadSingleFile({ error, file, helperText, sx, accept, onChange, ...other }: UploadProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,84 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import isString from "lodash-es/isString";
-import { useDropzone } from "react-dropzone";
-import { useState, useEffect } from "react";
-import { styled } from "@mui/material/styles";
-import { Box } from "@mui/material";
-import { B as BlockContent } from "../../../components/UploadComponents/BlockContent.js";
-import { R as RejectionFiles } from "../../../components/UploadComponents/RejectionFiles.js";
-import { I as Image } from "../../../../../Image/Image.js";
-const DropZoneStyle = styled("div")(({ theme }) => ({
-  outline: "none",
-  overflow: "hidden",
-  position: "relative",
-  padding: theme.spacing(5, 1),
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create("padding"),
-  backgroundColor: theme.vars.palette.background.neutral,
-  border: `1px dashed ${theme.vars.palette.grey[50032]}`,
-  "&:hover": { opacity: 0.72, cursor: "pointer" }
-}));
-function UploadSingleFile({
-  error = false,
-  file,
-  helperText,
-  sx,
-  accept,
-  onChange,
-  ...other
-}) {
-  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
-    multiple: false,
-    accept,
-    /**
-     * todo: document this component
-     */
-    onDrop: (acceptedFiles) => {
-      if (acceptedFiles.length > 0) {
-        onChange?.(acceptedFiles[0]);
-      }
-    },
-    ...other
-  });
-  const [preview, setPreview] = useState(null);
-  useEffect(() => {
-    if (file instanceof File) {
-      const objectUrl = URL.createObjectURL(file);
-      setPreview(objectUrl);
-      return () => URL.revokeObjectURL(objectUrl);
-    } else if (isString(file)) {
-      setPreview(file);
-    } else {
-      setPreview(null);
-    }
-  }, [file]);
-  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...sx }, children: [
-    /* @__PURE__ */ jsxs(
-      DropZoneStyle,
-      {
-        ...getRootProps(),
-        sx: {
-          ...isDragActive && { opacity: 0.72 },
-          ...(isDragReject || error) && {
-            color: "error.enabled",
-            borderColor: "error.light",
-            bgcolor: "error.lighter"
-          },
-          ...file && {
-            padding: "12% 0"
-          }
-        },
-        children: [
-          !preview && /* @__PURE__ */ jsx(BlockContent, {}),
-          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
-          preview && /* @__PURE__ */ jsx(Image, { alt: "file preview", src: preview })
-        ]
-      }
-    ),
-    fileRejections.length > 0 && /* @__PURE__ */ jsx(RejectionFiles, { fileRejections }),
-    helperText && helperText
-  ] });
-}
-export {
-  UploadSingleFile as U
-};

package/components/hook-form/RHFUpload/RHFUploadFile/index.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    name: string;
-    [key: string]: any;
-}
-/**
- * todo: document this component
- */
-export declare function RHFUploadFile({ name, ...other }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,31 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useFormContext, Controller } from "react-hook-form";
-import { U as UploadSingleFile } from "./components/UploadSingleFile/index.js";
-import { FormHelperText } from "@mui/material";
-function RHFUploadFile({ name, ...other }) {
-  const { control } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field: { value, onChange }, fieldState: { error } }) => {
-        const checkError = !!error && !value;
-        return /* @__PURE__ */ jsx(
-          UploadSingleFile,
-          {
-            accept: { "image/png": [".png"] },
-            file: value,
-            error: checkError,
-            onChange,
-            helperText: checkError && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { px: 2 }, children: error.message }),
-            ...other
-          }
-        );
-      }
-    }
-  );
-}
-export {
-  RHFUploadFile as R
-};

package/components/hook-form/RHFUpload/components/UploadComponents/BlockContent.js

@@ -1,36 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Box, Typography } from "@mui/material";
-function BlockContent() {
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      spacing: 2,
-      alignItems: "center",
-      justifyContent: "center",
-      direction: { xs: "column", md: "row" },
-      sx: { width: 1, textAlign: { xs: "center", md: "left" } },
-      children: [
-        /* @__PURE__ */ jsx("img", { src: "\nhttps://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/sidebar/assets/icons/arrow_right.svg", alt: "upload" }),
-        /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
-          /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h5", children: "Drop or Select file" }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: [
-            "Drop files here or click ",
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "body2",
-                component: "span",
-                sx: { color: "primary.enabled", textDecoration: "underline" },
-                children: "browse"
-              }
-            ),
-            " thorough your machine"
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-export {
-  BlockContent as B
-};

package/components/hook-form/RHFUpload/components/UploadComponents/RejectionFiles.js

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { alpha } from "@mui/material/styles";
-import { Paper, Box, Typography } from "@mui/material";
-function RejectionFiles({ fileRejections }) {
-  return /* @__PURE__ */ jsx(
-    Paper,
-    {
-      variant: "outlined",
-      sx: {
-        py: 1,
-        px: 2,
-        mt: 3,
-        borderColor: "error.light",
-        bgcolor: (theme) => alpha(theme.colorSchemes.finalTheme.palette.error.enabled, 0.08)
-      },
-      children: fileRejections.map(({ file, errors }) => {
-        const { path } = file;
-        return /* @__PURE__ */ jsxs(Box, { sx: { my: 1 }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", noWrap: true, children: path }),
-          errors.map((error) => /* @__PURE__ */ jsxs(Typography, { variant: "caption", component: "p", children: [
-            "- ",
-            error.message
-          ] }, error.code))
-        ] }, path);
-      })
-    }
-  );
-}
-export {
-  RejectionFiles as R
-};

package/storybook/hook-form/RHFUploadImage/RHFUploadFile.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RHFUploadFile } from '../../../src/components/hook-form/RHFUpload/RHFUploadFile';
-declare const meta: Meta<typeof RHFUploadFile>;
-type Story = StoryObj<typeof RHFUploadFile>;
-export declare const RHFUploadFileDefault: Story;
-export default meta;