@campxdev/react-blueprint 1.1.7 → 1.1.9

package/src/components/Navigation/DialogButton/DialogButton.tsx

@@ -1,48 +1,28 @@
-import { Close } from "@mui/icons-material";
-import {
-  Box,
-  Dialog,
-  DialogProps,
-  DialogTitle,
-  Grow,
-  IconButton,
-  styled,
-} from "@mui/material";
-import { TransitionProps } from "@mui/material/transitions";
-import { ReactNode, forwardRef, useState } from "react";
+import { Fade } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
+import React, { ReactNode, useState } from 'react';
+import { Dialog, DialogProps } from '../Dialog/Dialog';
 
-const StyledDialogHeader = styled(Box)(({ theme }) => ({
-  height: "60px",
-
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  padding: "25px 20px 15px 20px",
-}));
-
-export const Transition = forwardRef(function Transition(
+const FadeTransition = React.forwardRef(function FadeTransition(
   props: TransitionProps & {
-    children: React.ReactElement;
+    children: React.ReactElement<any, any>;
   },
-  ref: React.Ref<unknown>
+  ref: React.Ref<unknown>,
 ) {
-  return <Grow timeout={1000} ref={ref} {...props} />;
+  return <Fade ref={ref} {...props} timeout={50} />;
 });
 
-export interface DialogButtonProps {
+export type DialogButtonProps = {
   anchor: (props: { open: () => void }) => ReactNode;
-  content: (props: { close: () => void }) => ReactNode;
-  title: string;
-  dialogProps?: Omit<DialogProps, "open">;
+  onDialogOpen?: () => void;
   onDialogClose?: () => void;
-}
+} & Omit<DialogProps, 'open' | 'onClose'>;
 
 export default function DialogButton({
-  content,
-  title,
-  dialogProps,
   onDialogClose,
+  onDialogOpen,
   anchor,
+  ...props
 }: DialogButtonProps) {
   const [open, setOpen] = useState(false);
 
@@ -52,6 +32,7 @@ export default function DialogButton({
   };
 
   const onOpen = () => {
+    onDialogOpen && onDialogOpen();
     setOpen(true);
   };
 
@@ -60,57 +41,12 @@ export default function DialogButton({
       {anchor({
         open: onOpen,
       })}
-      <CustomDialog
+      <Dialog
+        {...props}
         open={open}
-        content={content}
-        dialogProps={dialogProps}
         onClose={onClose}
-        title={title}
+        TransitionComponent={FadeTransition}
       />
     </>
   );
 }
-
-interface CustomDialogProps {
-  content: (props: { close: () => void }) => ReactNode;
-  title?: string;
-  onClose: () => void;
-  open: boolean;
-  dialogProps?: Omit<DialogProps, "open">;
-}
-
-export const CustomDialog = ({
-  onClose,
-  dialogProps,
-  title,
-  content,
-  open,
-}: CustomDialogProps) => {
-  const props = {
-    PaperProps: {
-      ...dialogProps?.PaperProps,
-    },
-    onClose: onClose,
-    open: open,
-    transitionDuration: 140,
-    TransitionComponent: Transition,
-    sx: {
-      ...dialogProps?.sx,
-    },
-    ...dialogProps,
-  };
-
-  return (
-    <Dialog {...props}>
-      {title && (
-        <StyledDialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: "black" }}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-      )}
-      <Box sx={{ padding: "20px" }}>{content({ close: onClose })}</Box>
-    </Dialog>
-  );
-};

package/src/components/Navigation/DropDownMenu/DropDownButton.tsx

@@ -1,8 +1,8 @@
-import { KeyboardArrowDown } from '@mui/icons-material'
-import { Button, ButtonProps } from '../../Input/Button/Button'
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { Button, ButtonProps } from '../../Input/Button/Button';
 
 export const DropDownButton = (props: ButtonProps) => {
   return (
     <Button variant="outlined" endIcon={<KeyboardArrowDown />} {...props} />
-  )
-}
+  );
+};

package/src/components/Navigation/DropDownMenu/DropDownIcon.tsx

@@ -1,7 +1,7 @@
-import { MoreVert } from "@mui/icons-material";
-import { IconButtonProps } from "@mui/material";
-import { ReactNode } from "react";
-import { StyledIconButton } from "./styles";
+import { MoreVert } from '@mui/icons-material';
+import { IconButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { StyledIconButton } from './styles';
 
 const defaultIcon = {
   icon: <MoreVert color="primary" />,

package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx

@@ -1,10 +1,10 @@
-import { Divider, Menu, MenuListProps, MenuProps } from "@mui/material";
-import { Fragment, ReactNode, useState } from "react";
+import { Divider, Menu, MenuListProps, MenuProps } from '@mui/material';
+import { Fragment, ReactNode, useState } from 'react';
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
   menu: ReactNode[];
-  menuProps?: Omit<MenuProps, "open">;
+  menuProps?: Omit<MenuProps, 'open'>;
   menuListProps?: MenuListProps;
 };
 
@@ -37,15 +37,15 @@ export const DropdownMenu = ({
         anchorEl={anchorEl}
         keepMounted
         anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
+          vertical: 'bottom',
+          horizontal: 'right',
         }}
         open={open}
         onClose={handleClose}
         transitionDuration={150}
         transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
+          vertical: 'top',
+          horizontal: 'right',
         }}
         MenuListProps={{
           ...menuListProps,
@@ -55,7 +55,7 @@ export const DropdownMenu = ({
         {menu.map((item, index) => (
           <Fragment key={index}>
             {item}
-            <Divider flexItem sx={{ margin: "0 !important" }} />
+            <Divider flexItem sx={{ margin: '0 !important' }} />
           </Fragment>
         ))}
       </Menu>

package/src/components/Navigation/DropDownMenu/DropdownMenuItem.tsx

@@ -1,6 +1,6 @@
-import { ListItemIcon, MenuItemProps, SxProps } from "@mui/material";
-import { ReactNode } from "react";
-import { StyledMenuItem } from "./styles";
+import { ListItemIcon, MenuItemProps, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { StyledMenuItem } from './styles';
 
 export type DropdownMenuItemProps = {
   icon?: ReactNode;

package/src/components/Navigation/DropDownMenu/styles.tsx

@@ -1,25 +1,25 @@
-import { IconButton, MenuItem, styled } from "@mui/material";
+import { IconButton, MenuItem, styled } from '@mui/material';
 
 export const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== "outlined",
+  shouldForwardProp: (prop) => prop !== 'outlined',
 })<{ outlined?: boolean }>(({ theme, outlined }) => ({
   ...(outlined && {
     border: `1px solid ${theme.palette.primary.main}`,
-    borderRadius: "5px",
-    height: "40px",
-    width: "40px",
+    borderRadius: '5px',
+    height: '40px',
+    width: '40px',
   }),
 }));
 
 export const StyledMenuItem = styled(MenuItem)(({}) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: "5px",
-  "& .MuiListItemIcon-root": {
-    minWidth: "24px",
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
   },
-  "& .MuiSvgIcon-root": {
-    height: "14px",
-    width: "14px",
+  '& .MuiSvgIcon-root': {
+    height: '14px',
+    width: '14px',
   },
 }));

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -0,0 +1,165 @@
+import {
+  Box,
+  BoxProps,
+  IconButton,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useCallback, useMemo, useState } from 'react';
+import { AttachmentIcon } from '../../Assets/Icons/IconComponents/AttachmentIcon';
+import { DeleteIcon } from '../../Assets/Icons/IconComponents/DeleteIcon';
+import { DocumentIcon } from '../../Assets/Icons/IconComponents/DocumentIcon';
+import { ExcelIcon } from '../../Assets/Icons/IconComponents/ExcelIcon';
+import { ImageIcon } from '../../Assets/Icons/IconComponents/ImageIcon';
+import { PdfIcon } from '../../Assets/Icons/IconComponents/PdfIcon';
+
+export type PreviewFilesProps = {
+  files: File[] | File | null;
+  label?: string;
+  setFiles?:
+    | React.Dispatch<React.SetStateAction<File | null>>
+    | React.Dispatch<React.SetStateAction<File[]>>;
+} & BoxProps;
+
+export const PreviewFiles = ({
+  files,
+  label,
+  setFiles,
+  ...props
+}: PreviewFilesProps) => {
+  const theme = useTheme();
+  const [previews, setPreviews] = useState<Record<string, string>>({});
+
+  const fileArray = useMemo(() => {
+    if (Array.isArray(files)) return files;
+    return files ? [files] : [];
+  }, [files]);
+
+  const handleFilePreview = useCallback(
+    (file: File) => {
+      if (previews[file.name]) {
+        const newWindow = window.open();
+        newWindow?.document.write(
+          `<iframe src="${previews[file.name]}" frameborder="0" style="border:0; top:0; left:0; bottom:0; right:0; width:100%; height:100%;" allowfullscreen></iframe>`,
+        );
+      } else {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setPreviews((prev) => ({
+            ...prev,
+            [file.name]: reader.result as string,
+          }));
+          const url = URL.createObjectURL(file);
+          window.open(url, '_blank')?.focus();
+        };
+        reader.readAsDataURL(file);
+      }
+    },
+    [previews],
+  );
+
+  const handleDelete =
+    (fileToDelete: File) => (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      if (setFiles) {
+        if (Array.isArray(files)) {
+          (setFiles as React.Dispatch<React.SetStateAction<File[]>>)(
+            (prevFiles) => prevFiles.filter((file) => file !== fileToDelete),
+          );
+        } else {
+          (setFiles as React.Dispatch<React.SetStateAction<File | null>>)(null);
+        }
+      }
+      setPreviews((prev) => {
+        const newPreviews = { ...prev };
+        delete newPreviews[fileToDelete.name];
+        return newPreviews;
+      });
+    };
+
+  const getFileIcon = (file: File) => {
+    const fileTypeMap: Record<string, React.ElementType> = {
+      'image/': ImageIcon,
+      'application/pdf': PdfIcon,
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+        ExcelIcon,
+      'application/vnd.ms-excel': ExcelIcon,
+      'application/msword': DocumentIcon,
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        DocumentIcon,
+    };
+
+    const IconComponent =
+      Object.entries(fileTypeMap).find(([key]) =>
+        file.type.startsWith(key),
+      )?.[1] || AttachmentIcon;
+    return <IconComponent fontSize="large" />;
+  };
+
+  const formatFileSize = (size: number) => {
+    if (size < 1024) return `${size} bytes`;
+    if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
+    if (size < 1073741824) return `${(size / 1048576).toFixed(2)} MB`;
+    return `${(size / 1073741824).toFixed(2)} GB`;
+  };
+
+  if (fileArray.length === 0) return null;
+
+  return (
+    <Box {...props}>
+      {label && (
+        <Typography
+          marginBottom={'8px'}
+          fontSize={'14px'}
+          color={theme.palette.text.secondary}
+          variant="body2"
+        >
+          {label}
+        </Typography>
+      )}
+      {fileArray.map((file, index) => (
+        <PreviewContainer
+          key={file.name + file.lastModified}
+          onClick={() => handleFilePreview(file)}
+        >
+          <Stack
+            direction={'row'}
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            {getFileIcon(file)}
+            <Stack direction={'column'} marginLeft={'8px'}>
+              <Typography
+                fontSize={'14px'}
+                color={theme.palette.primary.main}
+                variant="label1"
+              >
+                {file.name}
+              </Typography>
+              <Typography color={theme.palette.text.tertiary} variant="label2">
+                {formatFileSize(file.size)}
+              </Typography>
+            </Stack>
+          </Stack>
+          <IconButton onClick={handleDelete(file)}>
+            <DeleteIcon />
+          </IconButton>
+        </PreviewContainer>
+      ))}
+    </Box>
+  );
+};
+
+const PreviewContainer = styled(Box)(({ theme }) => ({
+  width: '100%',
+  height: '60px',
+  cursor: 'pointer',
+  backgroundColor: theme.palette.secondary.light,
+  padding: '16px 8px',
+  borderRadius: '10px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '8px',
+}));

package/src/components/Navigation/Sidebar/Components.tsx

@@ -1,13 +1,13 @@
-import { Box, Stack } from "@mui/material";
-import { useMemo } from "react";
-import { Icons, Tooltip, Typography } from "../../export";
+import { Box, Stack } from '@mui/material';
+import { useMemo } from 'react';
+import { Icons, Tooltip, Typography } from '../../export';
 import {
   DefaultButtonProps,
   InternalMenuButtonProps,
   SubMenuButtonProps,
   TooltipIconProps,
-} from "./interfaces";
-import { createSidebarStyles } from "./styles";
+} from './interfaces';
+import { createSidebarStyles } from './styles';
 
 export const TooltipIcon = ({ name, icon }: TooltipIconProps) => {
   return (
@@ -24,7 +24,7 @@ export const DefaultButton = ({
 }: DefaultButtonProps) => {
   const { StyledListItemButton, StyledListItemIcon } = useMemo(
     () => createSidebarStyles(collapsed),
-    [collapsed]
+    [collapsed],
   );
 
   return (
@@ -42,22 +42,22 @@ export const InternalMenuButton = ({
 }: InternalMenuButtonProps) => {
   const { StyledListItemButton, StyledListItemIcon, HoverIcon } = useMemo(
     () => createSidebarStyles(collapsed),
-    [collapsed]
+    [collapsed],
   );
 
   return (
     <StyledListItemButton collapsed={collapsed}>
       <Stack
-        width={"100%"}
+        width={'100%'}
         direction="row"
-        alignItems={"center"}
-        justifyContent={"space-between"}
+        alignItems={'center'}
+        justifyContent={'space-between'}
       >
-        <Stack direction="row" alignItems={"center"}>
+        <Stack direction="row" alignItems={'center'}>
           <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
           <Typography variant="button1">{name}</Typography>
         </Stack>
-        <HoverIcon display={"flex"} className="hoverIcon">
+        <HoverIcon display={'flex'} className="hoverIcon">
           <Icons.RedoIcon size={18} />
         </HoverIcon>
       </Stack>
@@ -73,22 +73,22 @@ export const SubMenuButton = ({
 }: SubMenuButtonProps) => {
   const { StyledListItemButton, StyledListItemIcon } = useMemo(
     () => createSidebarStyles(collapsed),
-    [collapsed]
+    [collapsed],
   );
 
   return (
     <StyledListItemButton collapsed={collapsed}>
       <Stack
-        width={"100%"}
+        width={'100%'}
         direction="row"
-        alignItems={"center"}
-        justifyContent={"space-between"}
+        alignItems={'center'}
+        justifyContent={'space-between'}
       >
-        <Stack direction="row" alignItems={"center"}>
+        <Stack direction="row" alignItems={'center'}>
           <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
           <Typography variant="button1">{name}</Typography>
         </Stack>
-        <Box display={"flex"}>
+        <Box display={'flex'}>
           {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
         </Box>
       </Stack>

package/src/components/Navigation/Sidebar/MenuItem.tsx

@@ -2,7 +2,7 @@ import { Stack } from '@mui/material';
 import { motion } from 'framer-motion';
 import { useMemo, useState } from 'react';
 import { useMatch, useResolvedPath } from 'react-router-dom';
-import { SideMenuItemProps } from '../exports';
+import { SideMenuItemProps } from '../export';
 import {
   DefaultButton,
   InternalMenuButton,

package/src/components/Navigation/Sidebar/SubMenuItem.tsx

@@ -20,7 +20,8 @@ export const SidebarSubMenuItem = ({
   let resolved = useResolvedPath(newPath);
   let match = useMatch({ path: resolved.pathname, end: false });
 
-  const { StyledListItem, StyledLinkButton, StyledListItemButton } = createSidebarStyles(collapsed);
+  const { StyledListItem, StyledLinkButton, StyledListItemButton } =
+    createSidebarStyles(collapsed);
 
   return (
     <StyledListItem key={index} disablePadding className="listItem">

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { SideMenuItemProps } from '../exports';
+import { SideMenuItemProps } from '../export';
 
 export interface MenuState {
   menu: SideMenuItemProps[];