@campxdev/react-blueprint 1.7.6 → 1.7.8

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

@@ -1,32 +1,56 @@
 import {
   Box,
   BoxProps,
+  IconButton,
   Stack,
   styled,
   Typography,
   useTheme,
 } from '@mui/material';
-import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { Icons } from '../../export';
 
 export type PreviewFilesProps = {
-  files: File[] | File | null;
+  files: File[] | File | string[] | string | null;
   label?: string;
-  actions?: (file: File) => ReactNode;
-} & BoxProps;
+  onChange?: (newFiles: File[], deletedFile: File) => void;
+  showDownload?: boolean;
+} & Omit<BoxProps, 'onChange'>;
 
 export const PreviewFiles = ({
   files,
   label,
-  actions,
+  onChange,
+  showDownload,
   ...props
 }: PreviewFilesProps) => {
-  const theme = useTheme();
-  const [previews, setPreviews] = useState<Record<string, string>>({});
+  const theme = useTheme(),
+    [previews, setPreviews] = useState<Record<string, string>>({}),
+    [resolvedFiles, setResolvedFiles] = useState<File[]>([]);
 
-  const fileArray = useMemo(() => {
-    if (Array.isArray(files)) return files;
-    return files ? [files] : [];
+  useEffect(() => {
+    const resolveFiles = async () => {
+      if (!files) {
+        setResolvedFiles([]);
+        return;
+      }
+
+      if (Array.isArray(files)) {
+        const promises = files.map((file) =>
+          typeof file === 'string'
+            ? createFileFromUrl(file)
+            : Promise.resolve(file),
+        );
+        const resolved = await Promise.all(promises);
+        setResolvedFiles(resolved);
+      } else {
+        const singleFile =
+          typeof files === 'string' ? await createFileFromUrl(files) : files;
+        setResolvedFiles([singleFile]);
+      }
+    };
+
+    resolveFiles();
   }, [files]);
 
   const handleFilePreview = useCallback(
@@ -48,7 +72,18 @@ export const PreviewFiles = ({
     [previews],
   );
 
-  if (fileArray.length === 0) return null;
+  const handleDownload = (file: File) => {
+    const url = URL.createObjectURL(file);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  if (resolvedFiles.length === 0) return <></>;
 
   return (
     <Box {...props}>
@@ -62,7 +97,7 @@ export const PreviewFiles = ({
           {label}
         </Typography>
       )}
-      {fileArray.map((file, index) => (
+      {resolvedFiles.map((file, index) => (
         <PreviewContainer key={index} onClick={() => handleFilePreview(file)}>
           <Stack
             direction={'row'}
@@ -83,15 +118,29 @@ export const PreviewFiles = ({
             </Stack>
           </Stack>
 
-          {actions && (
-            <Box
-              onClick={(event: React.MouseEvent<HTMLDivElement>) => {
-                event.stopPropagation();
-              }}
-            >
-              {actions(file)}
-            </Box>
-          )}
+          <Box
+            onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+              event.stopPropagation();
+            }}
+          >
+            {showDownload && (
+              <IconButton onClick={() => handleDownload(file)}>
+                <Icons.DownloadIcon />
+              </IconButton>
+            )}
+            {onChange && (
+              <IconButton
+                onClick={() => {
+                  onChange(
+                    resolvedFiles.filter((f, i) => i !== index),
+                    file,
+                  );
+                }}
+              >
+                <Icons.DeleteIcon />
+              </IconButton>
+            )}
+          </Box>
         </PreviewContainer>
       ))}
     </Box>
@@ -138,3 +187,48 @@ const getFileIcon = (file: File) => {
     )?.[1] || Icons.AttachmentIcon;
   return <IconComponent size={30} />;
 };
+
+const createFileFromUrl = async (fileUrl: string): Promise<File> => {
+  const extensionToMimeType: Record<string, string> = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.pdf': 'application/pdf',
+    '.xlsx':
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    '.xls': 'application/vnd.ms-excel',
+    '.doc': 'application/msword',
+    '.docx':
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    '.txt': 'text/plain',
+  };
+
+  const fileName = fileUrl.split('/').pop() || 'unknown_file',
+    extension = Object.keys(extensionToMimeType).find((ext) =>
+      fileUrl.endsWith(ext),
+    ),
+    mimeType = extension
+      ? extensionToMimeType[extension]
+      : 'application/octet-stream';
+
+  try {
+    // Fetch the file from the given URL
+    const response = await fetch(fileUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file from ${fileUrl}`);
+    }
+
+    // Convert the response to a Blob
+    const blob = await response.blob();
+
+    // Create and return a File object from the Blob
+    return new File([blob], fileName, {
+      type: mimeType,
+      lastModified: Date.now(),
+    });
+  } catch (error) {
+    console.error(`Error creating file from URL: ${error}`);
+    throw error;
+  }
+};

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

@@ -0,0 +1,176 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Icons, SideMenuItemProps, Typography } from '../../export';
+import {
+  GetActiveMenuProps,
+  InternalMenuClickHandlerProps,
+  MenuState,
+} from './interfaces';
+import { SideBarMenuItem } from './MenuItem';
+import { createSidebarStyles } from './styles';
+
+export const MenuBar = ({
+  menu,
+  collapsed,
+  setCollapsed,
+  menuPosition,
+  setMenuPosition,
+}: {
+  menu: SideMenuItemProps[];
+  collapsed: boolean;
+  setCollapsed: any;
+  menuPosition: number;
+  setMenuPosition: any;
+}) => {
+  const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
+    menu: menu,
+    title: null,
+    path: null,
+  });
+  const [history, setHistory] = useState<MenuState[]>([]);
+
+  const internalMenuClickHandler = ({
+    menuTitle,
+    menuPath,
+    internalMenu,
+  }: InternalMenuClickHandlerProps) => {
+    if (menuTitle && menuPath && internalMenu) {
+      setHistory((prev) => [
+        ...prev,
+        {
+          title: currentMenuState.title,
+          path: currentMenuState.path,
+          menu: currentMenuState.menu,
+        },
+      ]);
+
+      setCurrentMenuState({
+        title: menuTitle,
+        path: menuPath,
+        menu: internalMenu,
+      });
+
+      setMenuPosition(collapsed ? 60 : 250);
+    }
+  };
+
+  const previousMenuClickHandler = () => {
+    const prev = history && history.length > 0 && history.pop();
+
+    if (prev && prev.menu) {
+      setCollapsed(false);
+      setCurrentMenuState({
+        menu: prev.menu,
+        title: prev.title,
+        path: prev.path,
+      });
+      setHistory([...history]);
+      setMenuPosition(collapsed ? -60 : -250);
+    }
+  };
+
+  const getActiveMenu = ({
+    menu,
+    pathArray,
+    previousMenuState,
+  }: GetActiveMenuProps): MenuState => {
+    setHistory((prevHistory) => [
+      ...prevHistory,
+      {
+        title: previousMenuState?.title,
+        path: previousMenuState?.path,
+        menu: previousMenuState.menu,
+      },
+    ]);
+
+    const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
+
+    if (item) {
+      if (!item.menu) {
+        return previousMenuState;
+      } else if (pathArray.length > 1) {
+        return getActiveMenu({
+          menu: item.menu,
+          pathArray: pathArray.slice(1),
+          previousMenuState: {
+            title: item.name,
+            path: previousMenuState.path
+              ? previousMenuState.path + item.path
+              : item.path,
+            menu: item.menu,
+          },
+        });
+      } else {
+        return {
+          title: item.name,
+          path: previousMenuState.path
+            ? previousMenuState.path + item.path
+            : item.path,
+          menu: item.menu,
+        };
+      }
+    } else {
+      return previousMenuState;
+    }
+  };
+
+  useEffect(() => {
+    const currentPathArray = window.location.pathname.split('/');
+
+    if (currentPathArray.length > 2) {
+      currentPathArray.splice(0, 2);
+      currentPathArray.pop();
+    }
+
+    const activeMenu = getActiveMenu({
+      menu: currentMenuState.menu,
+      pathArray: currentPathArray,
+      previousMenuState: currentMenuState,
+    });
+
+    setCurrentMenuState({
+      title: activeMenu?.title,
+      path: activeMenu.path,
+      menu: activeMenu?.menu,
+    });
+  }, []);
+
+  const { StyledMenuBar, StyledMenuHeaderButton } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed, menuPosition],
+  );
+  return (
+    <StyledMenuBar>
+      {currentMenuState.title && (
+        <StyledMenuHeaderButton
+          direction="row"
+          justifyContent={collapsed ? 'center' : 'flex-start'}
+          onClick={() => previousMenuClickHandler()}
+        >
+          {collapsed ? (
+            <Icons.ArrowBackIcon size={20} />
+          ) : (
+            <>
+              <Icons.ArrowBackIcon size={20} />
+              <Typography variant="button1">
+                {currentMenuState.title}
+              </Typography>
+            </>
+          )}
+        </StyledMenuHeaderButton>
+      )}
+      {currentMenuState.menu &&
+        currentMenuState.menu.length > 0 &&
+        currentMenuState.menu?.map((item: any, index: number) => (
+          <SideBarMenuItem
+            key={index}
+            index={index}
+            collapsed={collapsed}
+            setCollapsed={setCollapsed}
+            menuItem={item}
+            currentMenuPath={currentMenuState.path}
+            internalMenuClickHandler={internalMenuClickHandler}
+          />
+        ))}
+    </StyledMenuBar>
+  );
+};

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

@@ -1,18 +1,19 @@
-import { Box } from '@mui/material';
+import {
+  Box,
+  Drawer,
+  IconButton,
+  Stack,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
 import { motion } from 'framer-motion';
-import { ReactElement, useEffect, useMemo, useState } from 'react';
+import { ReactElement, useMemo, useState } from 'react';
 import { CampxFullLogoIcon } from '../../Assets/Icons/IconComponents/CampxFullLogoIcon';
 import { CampxIcon } from '../../Assets/Icons/IconComponents/CampxIcon';
+import { HamburgerMenuIcon } from '../../Assets/Icons/IconComponents/HamburgerMenuIcon';
 import { RightIcon } from '../../Assets/Icons/IconComponents/RightIcon';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
 import { CollapseMenuButton } from './Components';
-import { SideBarMenuItem } from './MenuItem';
-import {
-  GetActiveMenuProps,
-  InternalMenuClickHandlerProps,
-  MenuState,
-} from './interfaces';
+import { MenuBar } from './MenuBar';
 import { createSidebarStyles } from './styles';
 
 export const Sidebar = ({
@@ -24,142 +25,34 @@ export const Sidebar = ({
   collapsed: boolean;
   setCollapsed: any;
 }) => {
-  const [menuPosition, setMenuPosition] = useState(0);
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
-  const [history, setHistory] = useState<MenuState[]>([]);
-  const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
-    menu: menu,
-    title: null,
-    path: null,
-  });
+  const [menuPosition, setMenuPosition] = useState(0);
 
   const toggleSidebar = () => {
     setMenuPosition(0);
     setCollapsed(!collapsed);
   };
 
-  const internalMenuClickHandler = ({
-    menuTitle,
-    menuPath,
-    internalMenu,
-  }: InternalMenuClickHandlerProps) => {
-    if (menuTitle && menuPath && internalMenu) {
-      setHistory((prev) => [
-        ...prev,
-        {
-          title: currentMenuState.title,
-          path: currentMenuState.path,
-          menu: currentMenuState.menu,
-        },
-      ]);
-
-      setCurrentMenuState({
-        title: menuTitle,
-        path: menuPath,
-        menu: internalMenu,
-      });
-
-      setMenuPosition(collapsed ? 60 : 250);
-    }
-  };
-
-  const previousMenuClickHandler = () => {
-    const prev = history && history.length > 0 && history.pop();
-
-    if (prev && prev.menu) {
-      setCollapsed(false);
-      setCurrentMenuState({
-        menu: prev.menu,
-        title: prev.title,
-        path: prev.path,
-      });
-      setHistory([...history]);
-      setMenuPosition(collapsed ? -60 : -250);
-    }
-  };
-
-  const getActiveMenu = ({
-    menu,
-    pathArray,
-    previousMenuState,
-  }: GetActiveMenuProps): MenuState => {
-    setHistory((prevHistory) => [
-      ...prevHistory,
-      {
-        title: previousMenuState?.title,
-        path: previousMenuState?.path,
-        menu: previousMenuState.menu,
-      },
-    ]);
+  const toggleDrawer =
+    (open: boolean | ((prevState: boolean) => boolean)) => () => {
+      // setIsDrawerOpen(open);
+      setCollapsed(!collapsed);
+    };
 
-    const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
-
-    if (item) {
-      if (!item.menu) {
-        return previousMenuState;
-      } else if (pathArray.length > 1) {
-        return getActiveMenu({
-          menu: item.menu,
-          pathArray: pathArray.slice(1),
-          previousMenuState: {
-            title: item.name,
-            path: previousMenuState.path
-              ? previousMenuState.path + item.path
-              : item.path,
-            menu: item.menu,
-          },
-        });
-      } else {
-        return {
-          title: item.name,
-          path: previousMenuState.path
-            ? previousMenuState.path + item.path
-            : item.path,
-          menu: item.menu,
-        };
-      }
-    } else {
-      return previousMenuState;
-    }
-  };
-
-  useEffect(() => {
-    const currentPathArray = window.location.pathname.split('/');
-
-    if (currentPathArray.length > 2) {
-      currentPathArray.splice(0, 2);
-      currentPathArray.pop();
-    }
-
-    const activeMenu = getActiveMenu({
-      menu: currentMenuState.menu,
-      pathArray: currentPathArray,
-      previousMenuState: currentMenuState,
-    });
-
-    setCurrentMenuState({
-      title: activeMenu?.title,
-      path: activeMenu.path,
-      menu: activeMenu?.menu,
-    });
-  }, []);
-
-  const {
-    StyledSidebarContainer,
-    StyledLogoArea,
-    StyledMenuBar,
-    StyledCollapsibleSection,
-    StyledMenuHeaderButton,
-    StyledListItemIcon,
-  } = useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
+  const { StyledSidebarContainer, StyledLogoArea, StyledCollapsibleSection } =
+    useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
 
   return (
     <motion.div
-      animate={{ width: collapsed ? '60px' : '250px' }}
+      animate={
+        !isSmallScreen ? { width: collapsed ? '60px' : '250px' } : undefined
+      }
       transition={{ duration: 0.3, ease: 'circOut' }}
       style={{
-        margin: '12px',
-        height: 'calc(100vh - 24px)',
+        margin: isSmallScreen ? '12px 12px 0px 12px' : '12px',
+        height: isSmallScreen ? '100%' : 'calc(100vh - 24px)',
       }}
     >
       <StyledSidebarContainer
@@ -169,66 +62,77 @@ export const Sidebar = ({
       >
         <Box>
           <StyledLogoArea collapsed={collapsed}>
-            {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
+            {isSmallScreen || collapsed ? (
+              <CampxIcon size={isSmallScreen ? 24 : 32} />
+            ) : (
+              <CampxFullLogoIcon />
+            )}
           </StyledLogoArea>
         </Box>
 
-        <motion.div
-          initial={{ x: menuPosition }}
-          animate={{ x: 0 }}
-          transition={{
-            duration: 0.3,
-            ease: menuPosition ? 'circOut' : 'circIn',
-          }}
-          style={{
-            height: '100%',
-          }}
-        >
-          <StyledMenuBar>
-            {currentMenuState.title && (
-              <StyledMenuHeaderButton
-                direction="row"
-                justifyContent={collapsed ? 'center' : 'flex-start'}
-                onClick={() => previousMenuClickHandler()}
-              >
-                {collapsed ? (
-                  <Icons.ArrowBackIcon size={20} />
-                ) : (
-                  <>
-                    <Icons.ArrowBackIcon size={20} />
-                    <Typography variant="button1">
-                      {currentMenuState.title}
-                    </Typography>
-                  </>
-                )}
-              </StyledMenuHeaderButton>
-            )}
-            {currentMenuState.menu &&
-              currentMenuState.menu.length > 0 &&
-              currentMenuState.menu?.map((item: any, index: number) => (
-                <SideBarMenuItem
-                  key={index}
-                  index={index}
-                  collapsed={collapsed}
-                  setCollapsed={setCollapsed}
-                  menuItem={item}
-                  currentMenuPath={currentMenuState.path}
-                  internalMenuClickHandler={internalMenuClickHandler}
-                />
-              ))}
-          </StyledMenuBar>
-        </motion.div>
-        <StyledCollapsibleSection
-          className="collapsibleSection"
-          onClick={toggleSidebar}
-          collapsed={collapsed}
-        >
-          {collapsed ? (
-            <RightIcon size={32} />
-          ) : (
-            <CollapseMenuButton collapsed={collapsed} />
-          )}
-        </StyledCollapsibleSection>
+        {isSmallScreen ? (
+          <Stack alignItems={'flex-start'}>
+            <IconButton
+              onClick={toggleDrawer(true)}
+              sx={{ padding: '8px 0px ' }}
+            >
+              <HamburgerMenuIcon />
+            </IconButton>
+
+            <Drawer
+              variant="temporary"
+              anchor="left"
+              open={!collapsed}
+              onClose={toggleDrawer(false)}
+              transitionDuration={300}
+              SlideProps={{
+                direction: 'right',
+                timeout: { enter: 500, exit: 500 },
+              }}
+            >
+              <MenuBar
+                menu={menu}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+                menuPosition={menuPosition}
+                setMenuPosition={setMenuPosition}
+              />
+            </Drawer>
+          </Stack>
+        ) : (
+          <>
+            <motion.div
+              initial={{ x: menuPosition }}
+              animate={{ x: 0 }}
+              transition={{
+                duration: 0.3,
+                ease: menuPosition ? 'circOut' : 'circIn',
+              }}
+              style={{
+                height: '100%',
+              }}
+            >
+              <MenuBar
+                menu={menu}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+                menuPosition={menuPosition}
+                setMenuPosition={setMenuPosition}
+              />
+            </motion.div>
+            <StyledCollapsibleSection
+              className="collapsibleSection"
+              onClick={toggleSidebar}
+              collapsed={collapsed}
+            >
+              {collapsed ? (
+                <RightIcon size={32} />
+              ) : (
+                <CollapseMenuButton collapsed={collapsed} />
+              )}
+            </StyledCollapsibleSection>
+          </>
+        )}
       </StyledSidebarContainer>
     </motion.div>
   );