@m4l/components 0.1.35 → 0.1.37

package/src/components/hook-form/RHFUpload/RHFUploaMultipleFile/components/UploadMultiple/index.txt

@@ -0,0 +1,71 @@
+import { useDropzone } from 'react-dropzone';
+// // @mui
+// import { styled } from '@mui/material/styles';
+// import { Box } from '@mui/material';
+// // type
+// import { UploadMultiFileProps } from '../UploadComponents/type';
+// //
+// import BlockContent from '../UploadComponents/BlockContent';
+// import RejectionFiles from '../UploadComponents/RejectionFiles';
+// import MultiFilePreview from '../UploadComponents/MultiFilePreview';
+
+// // ----------------------------------------------------------------------
+
+// const DropZoneStyle = styled('div')(({ theme }) => ({
+//     outline: 'none',
+//     padding: theme.spacing(5, 1),
+//     borderRadius: theme.shape.borderRadius,
+//     backgroundColor: theme.palette.background.neutral,
+//     border: `1px dashed ${theme.palette.grey[500_32]}`,
+//     '&:hover': { opacity: 0.72, cursor: 'pointer' },
+// }));
+
+// // ----------------------------------------------------------------------
+
+// export default function UploadMultiFile({
+//     error,
+//     showPreview = false,
+//     files,
+//     onRemove,
+//     onRemoveAll,
+//     helperText,
+//     sx,
+//     ...other
+// }: UploadMultiFileProps) {
+//     const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone(
+//         {
+//             ...other,
+//         },
+//     );
+
+//     return (
+//         <Box sx={{ width: '100%', ...sx }}>
+//             <DropZoneStyle
+//                 {...getRootProps()}
+//                 sx={{
+//                     ...(isDragActive && { opacity: 0.72 }),
+//                     ...((isDragReject || error) && {
+//                         color: 'error.main',
+//                         borderColor: 'error.light',
+//                         bgcolor: 'error.lighter',
+//                     }),
+//                 }}
+//             >
+//                 <input {...getInputProps()} />
+
+//                 <BlockContent />
+//             </DropZoneStyle>
+
+//             {fileRejections.length > 0 && <RejectionFiles fileRejections={fileRejections} />}
+
+//             <MultiFilePreview
+//                 files={files}
+//                 showPreview={showPreview}
+//                 onRemove={onRemove}
+//                 onRemoveAll={onRemoveAll}
+//             />
+
+//             {helperText && helperText}
+//         </Box>
+//     );
+// }

package/src/components/hook-form/RHFUpload/RHFUploaMultipleFile/index.txt

@@ -0,0 +1,35 @@
+import { FormHelperText } from '@mui/material';
+
+// export interface RHFUploadMultiFileProps extends Omit<UploadMultiFileProps, 'files'> {
+//     name: string;
+// }
+
+// export function RHFUploadMultiFile({ name, ...other }: RHFUploadMultiFileProps) {
+//     const { control } = useFormContext();
+
+//     return (
+//         <Controller
+//             name={name}
+//             control={control}
+//             render={({ field, fieldState: { error } }) => {
+//                 const checkError = !!error && field.value?.length === 0;
+
+//                 return (
+//                     <UploadMultiFile
+//                         accept={{ 'image/png': ['.png'] }}
+//                         files={field.value}
+//                         error={checkError}
+//                         helperText={
+//                             checkError && (
+//                                 <FormHelperText error sx={{ px: 2 }}>
+//                                     {error?.message}
+//                                 </FormHelperText>
+//                             )
+//                         }
+//                         {...other}
+//                     />
+//                 );
+//             }}
+//         />
+//     );
+// }

package/src/components/hook-form/RHFUpload/RHFUploaMultipleFile/types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+
+export interface UploadMultiFileProps extends DropzoneOptions {
+    error?: boolean;
+    files: (File | string)[];
+    showPreview: boolean;
+    onRemove: (file: File | string) => void;
+    onRemoveAll: VoidFunction;
+    sx?: SxProps<Theme>;
+    helperText?: ReactNode;
+}

package/src/components/hook-form/RHFUpload/RHFUploadAvatar/index.txt

@@ -0,0 +1,131 @@
+import isString from 'lodash/isString';
+// import { useDropzone } from 'react-dropzone';
+// // @mui
+// import { Typography } from '@mui/material';
+// import { styled } from '@mui/material/styles';
+// // type
+// import { UploadProps } from '../components/UploadComponents/type';
+// //
+// import { Image } from '../../../Image';
+// import RejectionFiles from '../components/UploadComponents/RejectionFiles';
+// import { useEnvironment } from '@m4l/core';
+
+// // ----------------------------------------------------------------------
+
+// const RootStyle = styled('div')(({ theme }) => ({
+//     width: 144,
+//     height: 144,
+//     margin: 'auto',
+//     borderRadius: '50%',
+//     padding: theme.spacing(1),
+//     border: `1px dashed ${theme.palette.grey[500_32]}`,
+// }));
+
+// const DropZoneStyle = styled('div')({
+//     zIndex: 0,
+//     width: '100%',
+//     height: '100%',
+//     outline: 'none',
+//     display: 'flex',
+//     overflow: 'hidden',
+//     borderRadius: '50%',
+//     position: 'relative',
+//     alignItems: 'center',
+//     justifyContent: 'center',
+//     '& > *': { width: '100%', height: '100%' },
+//     '&:hover': {
+//         cursor: 'pointer',
+//         '& .placeholder': {
+//             zIndex: 9,
+//         },
+//     },
+// });
+
+// const PlaceholderStyle = styled('div')(({ theme }) => ({
+//     display: 'flex',
+//     position: 'absolute',
+//     alignItems: 'center',
+//     flexDirection: 'column',
+//     justifyContent: 'center',
+//     color: theme.palette.text.secondary,
+//     backgroundColor: theme.palette.background.neutral,
+//     transition: theme.transitions.create('opacity', {
+//         easing: theme.transitions.easing.easeInOut,
+//         duration: theme.transitions.duration.shorter,
+//     }),
+//     '&:hover': { opacity: 0.72 },
+// }));
+
+// // ----------------------------------------------------------------------
+
+// export default function UploadAvatar({ error, file, helperText, sx, ...other }: UploadProps) {
+//     const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone(
+//         {
+//             multiple: false,
+//             ...other,
+//         },
+//     );
+
+//     const { host_static_assets, environment_assets } = useEnvironment();
+
+//     return (
+//         <>
+//             <RootStyle
+//                 sx={{
+//                     ...((isDragReject || error) && {
+//                         borderColor: 'error.light',
+//                     }),
+//                     ...sx,
+//                 }}
+//             >
+//                 <DropZoneStyle
+//                     {...getRootProps()}
+//                     sx={{
+//                         ...(isDragActive && { opacity: 0.72 }),
+//                     }}
+//                 >
+//                     <input {...getInputProps()} />
+
+//                     {file && (
+//                         <Image
+//                             alt="avatar"
+//                             src={isString(file) ? file : file.preview}
+//                             sx={{ zIndex: 8 }}
+//                         />
+//                     )}
+
+//                     <PlaceholderStyle
+//                         className="placeholder"
+//                         sx={{
+//                             ...(file && {
+//                                 opacity: 0,
+//                                 color: 'common.white',
+//                                 bgcolor: 'grey.900',
+//                                 '&:hover': { opacity: 0.72 },
+//                             }),
+//                             ...((isDragReject || error) && {
+//                                 bgcolor: 'error.lighter',
+//                             }),
+//                         }}
+//                     >
+//                         <Image
+//                             src={`${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`}
+//                             effect="opacity"
+//                             width={'24'}
+//                             height={'24'}
+//                             mb={1}
+//                         />
+
+//                         <Typography variant="caption">
+//                             {file ? 'Update photo' : 'Upload photo'}
+//                         </Typography>
+//                     </PlaceholderStyle>
+//                 </DropZoneStyle>
+//             </RootStyle>
+
+//             {helperText && helperText}
+
+//             {fileRejections.length > 0 && <RejectionFiles fileRejections={fileRejections} />}
+//         </>
+//     );
+// }

package/src/components/hook-form/RHFUpload/RHFUploadImage/index.tsx

@@ -0,0 +1,53 @@
+import { FormHelperText } from '@mui/material';
+import { useCallback } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import UploadImage from './subcomponents/UploadImage';
+import { WrapperRHFUploadImage } from './styles';
+//types
+import { RHFUploadImageProps } from './types';
+
+export function RHFUploadImage({ name, ...other }: RHFUploadImageProps) {
+    const { control, setValue } = useFormContext();
+
+    const handleDrop = useCallback(
+        (acceptedFiles: any) => {
+            const file: File = acceptedFiles[0];
+
+            if (file) {
+                setValue(
+                    name,
+                    Object.assign(file, {
+                        preview: URL.createObjectURL(file),
+                    }),
+                );
+            }
+        },
+        [setValue],
+    );
+
+    return (
+        <Controller
+            name={name}
+            control={control}
+            render={({ field, fieldState: { error } }) => {
+                const checkError = !!error && !field.value;
+
+                return (
+                    <WrapperRHFUploadImage>
+                        <UploadImage
+                            onDrop={handleDrop}
+                            error={checkError}
+                            {...other}
+                            file={field.value}
+                        />
+                        {checkError && (
+                            <FormHelperText error sx={{ px: 2, textAlign: 'center' }}>
+                                {error.message}
+                            </FormHelperText>
+                        )}
+                    </WrapperRHFUploadImage>
+                );
+            }}
+        />
+    );
+}

package/src/components/hook-form/RHFUpload/RHFUploadImage/styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+
+export const WrapperRHFUploadImage = styled('div')(() => ({
+    width: 'inherit',
+    height: 'inherit',
+    padding: '1px',
+}));

package/src/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/index.tsx

@@ -0,0 +1,125 @@
+import isString from 'lodash/isString';
+import { useDropzone } from 'react-dropzone';
+// @mui
+import { alpha } from '@mui/material/styles';
+
+// type
+
+//
+import { Image } from '../../../../../Image';
+
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from '@m4l/core';
+import {
+    DropZoneStyle,
+    PlaceholderStyle,
+    WrapperUploadImage,
+    ContainerUploadBody,
+    Containermessage,
+    ContainerDescription,
+    ContainerTitle,
+    ContainerConditions,
+    WrapperImage,
+    WrapperFileImage,
+} from './styles';
+import { UploadImageProps } from './types';
+import { SkeletonUploadImage } from './subcomponents/Skeleton';
+
+// ----------------------------------------------------------------------
+
+// ----------------------------------------------------------------------
+
+export default function UploadImage({ error, file, helperText, sx, ...other }: UploadImageProps) {
+    const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+        multiple: false,
+        ...other,
+    });
+
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const { getLabel } = useModuleDictionary();
+    const isSkeleton = useModuleSkeleton();
+
+    if (isSkeleton) {
+        return <SkeletonUploadImage />;
+    }
+
+    return (
+        <>
+            <WrapperUploadImage
+                sx={{
+                    ...((isDragReject || error) && {
+                        borderColor: 'error.light',
+                    }),
+                    ...sx,
+                }}
+            >
+                <DropZoneStyle
+                    {...getRootProps()}
+                    sx={{
+                        ...(isDragActive && { opacity: 0.72 }),
+                    }}
+                >
+                    <input {...getInputProps()} />
+
+                    {file && (
+                        <WrapperFileImage>
+                            <Image
+                                alt="avatar"
+                                src={isString(file) ? file : file.preview || ''}
+                                width="auto"
+                                height="100%"
+                            />
+                        </WrapperFileImage>
+                    )}
+
+                    <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',
+                            }),
+                        }}
+                    >
+                        <ContainerUploadBody className="ContainerUploadBody">
+                            <WrapperImage>
+                                <Image
+                                    src={`${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`}
+                                    //effect="opacity"
+                                    width={'100px'}
+                                    height={'100px'}
+                                    // mb={1}
+                                />
+                            </WrapperImage>
+
+                            <Containermessage>
+                                <ContainerTitle>
+                                    {getLabel('upload_image.title_upload')}
+                                </ContainerTitle>
+
+                                <ContainerDescription>
+                                    {getLabel('upload_image.description')}
+                                </ContainerDescription>
+
+                                <ContainerConditions>
+                                    {getLabel('upload_image.conditions')}
+                                </ContainerConditions>
+
+                                {/* <Tipography>{getLabel('upload_image.')}</Tipography> */}
+                            </Containermessage>
+                        </ContainerUploadBody>
+                    </PlaceholderStyle>
+                </DropZoneStyle>
+            </WrapperUploadImage>
+            {helperText && helperText}
+        </>
+    );
+}

package/src/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/styles.tsx

@@ -0,0 +1,102 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperUploadImage = styled('div')(({ theme }) => ({
+    width: 'inherit',
+    height: '100%',
+    minHeight: '200px',
+    minWidth: theme.spacing(20),
+    margin: 'auto',
+    borderRadius: theme.spacing(1),
+    padding: theme.spacing(1),
+    border: `1px dashed ${theme.palette.divider}`,
+}));
+
+export 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,
+        },
+    },
+}));
+
+export 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',
+}));
+
+export const ContainerUploadBody = styled('div')(({ theme }) => ({
+    padding: theme.spacing(3, 5),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    gap: theme.spacing(3),
+}));
+
+export const Containermessage = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+}));
+
+export const ContainerTitle = styled('div')(({ theme }) => ({
+    ...theme.typography.subtitle1,
+
+    textAlign: 'center',
+}));
+
+export const ContainerDescription = styled('div')(({ theme }) => ({
+    ...theme.typography.body2,
+    textAlign: 'center',
+}));
+
+export const ContainerConditions = styled('div')(({ theme }) => ({
+    ...theme.typography.caption,
+    textAlign: 'center',
+}));
+
+export const WrapperImage = styled('div')(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+}));
+
+export const ContainerPlaceHolder = styled('div')(() => ({
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    inset: '0',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}));
+
+export const WrapperFileImage = styled('div')(() => ({
+    '& .m4l_image > img': {
+        objectFit: 'cover',
+        width: 'auto',
+        margin: '0 auto',
+    },
+}));

package/src/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/index.tsx

@@ -0,0 +1,13 @@
+import { Skeleton as MUISkeleton } from '@mui/material';
+import { WrapperUploadImage } from '../../styles';
+import { MaskSkeletonUploadImage } from './styles';
+
+export const SkeletonUploadImage = () => {
+    return (
+        <WrapperUploadImage>
+            <MaskSkeletonUploadImage>
+                <MUISkeleton variant={'rectangular'} width={'100%'} height={'100%'} />
+            </MaskSkeletonUploadImage>
+        </WrapperUploadImage>
+    );
+};

package/src/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/subcomponents/Skeleton/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material';
+
+export const MaskSkeletonUploadImage = styled('div')(({ theme }) => ({
+    maskPosition: 'center!important',
+    maskRepeat: 'no-repeat!important',
+    WebkitMaskRepeat: 'no-repeat!important',
+    border: `1px dashed ${theme.palette.divider}`,
+    width: '100%',
+    height: '100%',
+    mask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`,
+    WebkitMask: `url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')`,
+}));

package/src/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { CustomFile } from '../../../types';
+
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}

package/src/components/hook-form/RHFUpload/RHFUploadImage/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { DropzoneOptions } from 'react-dropzone';
+import { CustomFile } from '../types';
+import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+
+export interface UploadImageProps extends DropzoneOptions {
+    error?: boolean;
+    file: CustomFile | string | null;
+    helperText?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+
+export interface RHFUploadImageProps extends Omit<UploadImageProps, 'file' | 'onDrop'> {
+    name: string;
+}