@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,243 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  IconButton,
-  Stack,
-  styled,
-  SxProps,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { Icons } from '../../export';
-
-export type PreviewFilesProps = {
-  files: File[] | File | string[] | string | null;
-  label?: string;
-  onChange?: (newFiles: File[], deletedFile: File) => void;
-  showDownload?: boolean;
-  hideDelete?: boolean;
-  sx?: SxProps;
-} & Omit<BoxProps, 'onChange'>;
-
-export const PreviewFiles = ({
-  files,
-  label,
-  onChange,
-  showDownload,
-  hideDelete = false,
-  sx,
-  ...props
-}: PreviewFilesProps) => {
-  const theme = useTheme(),
-    [previews, setPreviews] = useState<Record<string, string>>({}),
-    [resolvedFiles, setResolvedFiles] = useState<File[]>([]);
-
-  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(
-    (file: File) => {
-      if (previews[file.name]) {
-        // Use the existing blob URL from the previews state
-        const url = previews[file.name];
-        window.open(url, '_blank')?.focus();
-      } else {
-        // Create a new blob URL for the file
-        const url = URL.createObjectURL(file);
-        setPreviews((prev) => ({
-          ...prev,
-          [file.name]: url, // Save the blob URL in the previews state
-        }));
-        window.open(url, '_blank')?.focus();
-      }
-    },
-    [previews],
-  );
-
-  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 sx={sx} {...props}>
-      {label && (
-        <Typography
-          marginBottom={'8px'}
-          fontSize={'14px'}
-          color={theme.palette.text.secondary}
-          variant="body2"
-        >
-          {label}
-        </Typography>
-      )}
-      {resolvedFiles.map((file, index) => (
-        <PreviewContainer key={index} onClick={() => handleFilePreview(file)}>
-          <Stack
-            direction={'row'}
-            sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-          >
-            <Box width={'30px'} height={'30px'}>
-              {getFileIcon(file)}
-            </Box>
-
-            <Stack direction={'column'} marginLeft={'8px'}>
-              <Typography
-                fontSize={'14px'}
-                color={theme.palette.primary.main}
-                variant="label2"
-                sx={{ wordBreak: 'break-all' }}
-              >
-                {file.name}
-              </Typography>
-              <Typography color={theme.palette.text.tertiary} variant="caption">
-                {formatFileSize(file.size)}
-              </Typography>
-            </Stack>
-          </Stack>
-
-          <Box
-            onClick={(event: React.MouseEvent<HTMLDivElement>) => {
-              event.stopPropagation();
-            }}
-          >
-            {showDownload && (
-              <IconButton onClick={() => handleDownload(file)}>
-                <Icons.DownloadIcon />
-              </IconButton>
-            )}
-            {onChange && !hideDelete && (
-              <IconButton
-                onClick={() => {
-                  onChange(
-                    resolvedFiles.filter((f, i) => i !== index),
-                    file,
-                  );
-                }}
-              >
-                <Icons.DeleteIcon />
-              </IconButton>
-            )}
-          </Box>
-        </PreviewContainer>
-      ))}
-    </Box>
-  );
-};
-
-const PreviewContainer = styled(Box)(({ theme }) => ({
-  width: '100%',
-  minHeight: '60px',
-  cursor: 'pointer',
-  backgroundColor: theme.palette.secondary.light,
-  padding: '16px 8px',
-  borderRadius: '10px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: '8px',
-}));
-
-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`;
-};
-
-type IconWithSize = FC<{ size?: number }>;
-
-const getFileIcon = (file: File) => {
-  const fileTypeMap: Record<string, IconWithSize> = {
-    'image/': Icons.ImageIcon,
-    'application/pdf': Icons.PdfIcon,
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      Icons.ExcelIcon,
-    'application/vnd.ms-excel': Icons.ExcelIcon,
-    'application/msword': Icons.DocumentIcon,
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      Icons.DocumentIcon,
-  };
-
-  const IconComponent =
-    Object.entries(fileTypeMap).find(([key]) =>
-      file.type.startsWith(key),
-    )?.[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/Components.tsx

@@ -1,135 +0,0 @@
-import { Box, Stack } from '@mui/material';
-import { useMemo } from 'react';
-import { LeftIcon } from '../../Assets/Icons/IconComponents/LeftIcon';
-import { Icons, Tooltip, Typography } from '../../export';
-import {
-  DefaultButtonProps,
-  InternalMenuButtonProps,
-  SubMenuButtonProps,
-  TooltipIconProps,
-} from './interfaces';
-import { createSidebarStyles } from './styles';
-
-export const TooltipIcon = ({
-  name,
-  icon,
-  collapsed,
-  setCollapsed,
-}: TooltipIconProps) => {
-  const handleClick = () => {
-    if (collapsed && setCollapsed) {
-      setCollapsed(!collapsed);
-    }
-  };
-  return (
-    <Tooltip
-      title={<Typography variant="label2">{name}</Typography>}
-      onClick={() => handleClick()}
-    >
-      {icon}
-    </Tooltip>
-  );
-};
-
-export const DefaultButton = ({
-  name,
-  icon,
-  collapsed,
-}: DefaultButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-      <Typography variant="button1">{name}</Typography>
-    </StyledListItemButton>
-  );
-};
-
-export const InternalMenuButton = ({
-  name,
-  icon,
-  collapsed,
-}: InternalMenuButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <Stack
-        width={'100%'}
-        direction="row"
-        alignItems={'center'}
-        justifyContent={'space-between'}
-      >
-        <Stack direction="row" alignItems={'center'}>
-          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-          <Typography variant="button1">{name}</Typography>
-        </Stack>
-        {/* 
-        <HoverIcon display={'flex'} className="hoverIcon">
-          <Icons.RedoIcon size={18} />
-        </HoverIcon>
-         */}
-      </Stack>
-    </StyledListItemButton>
-  );
-};
-
-export const SubMenuButton = ({
-  name,
-  icon,
-  expanded,
-  collapsed,
-}: SubMenuButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <Stack
-        width={'100%'}
-        direction="row"
-        alignItems={'center'}
-        justifyContent={'space-between'}
-      >
-        <Stack direction="row" alignItems={'center'}>
-          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-          <Typography variant="button1">{name}</Typography>
-        </Stack>
-        <Box display={'flex'}>
-          {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
-        </Box>
-      </Stack>
-    </StyledListItemButton>
-  );
-};
-
-export const CollapseMenuButton = ({ collapsed }: { collapsed: boolean }) => {
-  const { StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <StyledListItemIcon collapsed={collapsed}>
-        <LeftIcon size={32} />
-      </StyledListItemIcon>
-      <Typography variant="button1">Collapse Menu</Typography>
-    </Box>
-  );
-};

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

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { Icons, Typography } from '../../export';
-import { MenuState } from './interfaces';
-import { SideBarMenuItem } from './MenuItem';
-import { createSidebarStyles } from './styles';
-
-export const MenuBar = ({
-  currentMenuState,
-  collapsed,
-  setCollapsed,
-  menuPosition,
-  previousMenuClickHandler,
-  internalMenuClickHandler,
-}: {
-  currentMenuState: MenuState;
-  collapsed: boolean;
-  setCollapsed: any;
-  internalMenuClickHandler: any;
-  previousMenuClickHandler: any;
-  menuPosition: number;
-}) => {
-  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/MenuItem.tsx

@@ -1,134 +0,0 @@
-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 '../export';
-import {
-  DefaultButton,
-  InternalMenuButton,
-  SubMenuButton,
-  TooltipIcon,
-} from './Components';
-import { InternalMenuClickHandlerProps } from './interfaces';
-import { createSidebarStyles } from './styles';
-import { SidebarSubMenuItem } from './SubMenuItem';
-
-export const SideBarMenuItem = ({
-  index,
-  collapsed,
-  setCollapsed,
-  menuItem,
-  currentMenuPath,
-  internalMenuClickHandler,
-}: {
-  index: number;
-  collapsed: boolean;
-  setCollapsed: any;
-  currentMenuPath: string | null;
-  menuItem: SideMenuItemProps;
-  internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
-}) => {
-  const { name, path, icon: Icon, menu: internalMenu, subMenu } = menuItem;
-
-  const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
-
-  let resolved = useResolvedPath(newPath);
-  let match = useMatch({ path: resolved.pathname, end: false });
-
-  let [expanded, setExpanded] = useState(!collapsed && !!match);
-  const subMenuButtonClickHandler = () => {
-    setExpanded(!expanded);
-  };
-
-  const { StyledListItem, StyledLinkButton, StyledSubMenuBox } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <motion.div
-      key="collapsed"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 1 }}
-    >
-      {internalMenu && internalMenu.length > 0 && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuBox
-            match={match}
-            onClick={() =>
-              internalMenuClickHandler({
-                menuTitle: name,
-                menuPath: newPath,
-                internalMenu,
-              })
-            }
-          >
-            {collapsed ? (
-              <TooltipIcon
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-              />
-            ) : (
-              <InternalMenuButton
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-              />
-            )}
-          </StyledSubMenuBox>
-        </StyledListItem>
-      )}
-      {subMenu && subMenu.length > 0 && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuBox
-            match={match && collapsed}
-            onClick={() => subMenuButtonClickHandler()}
-          >
-            {collapsed ? (
-              <TooltipIcon
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-              />
-            ) : (
-              <SubMenuButton
-                name={name}
-                icon={Icon}
-                expanded={expanded}
-                collapsed={collapsed}
-              />
-            )}
-          </StyledSubMenuBox>
-        </StyledListItem>
-      )}
-      {expanded && !collapsed && subMenu && subMenu.length > 0 && (
-        <Stack>
-          {subMenu?.map((item: any, index: number) => (
-            <SidebarSubMenuItem
-              key={index}
-              index={index}
-              collapsed={collapsed}
-              subMenuItem={item}
-              subMenuButtonPath={newPath}
-            />
-          ))}
-        </Stack>
-      )}
-      {!internalMenu && !subMenu && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledLinkButton to={newPath} match={match}>
-            {collapsed ? (
-              <TooltipIcon name={name} icon={Icon} />
-            ) : (
-              <DefaultButton name={name} icon={Icon} collapsed={collapsed} />
-            )}
-          </StyledLinkButton>
-        </StyledListItem>
-      )}
-    </motion.div>
-  );
-};