@campxdev/react-blueprint 1.7.2 → 1.7.4

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -56,6 +56,7 @@ const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
   width: '100%',
   justifyContent: 'flex-start',
   height: '52px',
+  paddingLeft: '12px',
   backgroundColor: theme.palette.surface.defaultBackground,
 }));
 

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
 import { Box, Stack, useTheme } from '@mui/material';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { Button, Dialog, Typography } from '../../export';
 
 export type ConfirmDialogType = 'confirm' | 'delete';
@@ -41,8 +41,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               <img
                 src={
                   type === 'delete'
-                    ? AnimatedGifs.DeleteConfirmationAlert
-                    : AnimatedGifs.ConfirmationAlert
+                    ? AnimatedGIFs.DeleteConfirmationAlert
+                    : AnimatedGIFs.ConfirmationAlert
                 }
                 alt="Animated GIF"
                 style={{ width: '80px' }}

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

@@ -84,8 +84,8 @@ export const DropdownMenu = ({
           sx={{
             ...menuListContainerSx,
             '&::-webkit-scrollbar': {
-              width: '0.5em',
-              height: '0.5em',
+              width: '0.2em',
+              height: '0.2em',
             },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: theme.palette.surface.paperBackground,

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

@@ -1,32 +1,24 @@
 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';
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import { Icons } from '../../export';
 
 export type PreviewFilesProps = {
   files: File[] | File | null;
   label?: string;
-  setFiles?:
-    | React.Dispatch<React.SetStateAction<File | null>>
-    | React.Dispatch<React.SetStateAction<File[]>>;
+  actions?: (file: File) => ReactNode;
 } & BoxProps;
 
 export const PreviewFiles = ({
   files,
   label,
-  setFiles,
+  actions,
   ...props
 }: PreviewFilesProps) => {
   const theme = useTheme();
@@ -40,71 +32,22 @@ export const PreviewFiles = ({
   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>`,
-        );
+        // Use the existing blob URL from the previews state
+        const url = previews[file.name];
+        window.open(url, '_blank')?.focus();
       } 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);
+        // 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 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 (
@@ -120,31 +63,35 @@ export const PreviewFiles = ({
         </Typography>
       )}
       {fileArray.map((file, index) => (
-        <PreviewContainer
-          key={file.name + file.lastModified}
-          onClick={() => handleFilePreview(file)}
-        >
+        <PreviewContainer key={index} onClick={() => handleFilePreview(file)}>
           <Stack
             direction={'row'}
-            sx={{ display: 'flex', alignItems: 'center' }}
+            sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
           >
             {getFileIcon(file)}
             <Stack direction={'column'} marginLeft={'8px'}>
               <Typography
                 fontSize={'14px'}
                 color={theme.palette.primary.main}
-                variant="label1"
+                variant="label2"
               >
                 {file.name}
               </Typography>
-              <Typography color={theme.palette.text.tertiary} variant="label2">
+              <Typography color={theme.palette.text.tertiary} variant="caption">
                 {formatFileSize(file.size)}
               </Typography>
             </Stack>
           </Stack>
-          <IconButton onClick={handleDelete(file)}>
-            <DeleteIcon />
-          </IconButton>
+
+          {actions && (
+            <Box
+              onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+                event.stopPropagation();
+              }}
+            >
+              {actions(file)}
+            </Box>
+          )}
         </PreviewContainer>
       ))}
     </Box>
@@ -163,3 +110,31 @@ const PreviewContainer = styled(Box)(({ theme }) => ({
   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} />;
+};

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

@@ -13,6 +13,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     return {
       backgroundColor: theme.palette.surface.defaultBackground,
       height: '100%',
+      width: collapsed ? '60px' : '250px',
       justifyContent: 'space-between',
       overflow: 'hidden',
     };
@@ -57,7 +58,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: '19px 8px',
+      padding: '16px 8px',
       borderRadius: '8px',
       backgroundColor: theme.palette.surface.paperBackground,
     }),

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -16,7 +16,7 @@ export interface TabsContainerProps {
 
 const TabContent = styled(Box)(({ theme }) => ({
   width: '100%',
-  minHeight: 'calc(100vh - 148px)',
+  minHeight: 'calc(100vh - 200px)',
   backgroundColor: theme.palette.surface.paperBackground,
 }));
 

package/src/components/Navigation/UploadDialog/LoadingUploadDialogContainer.tsx

@@ -1,13 +1,13 @@
 import { Typography, useTheme } from '@mui/material';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { ImageContainer, UploadDialogBox } from './Styles';
 
-export const LoadingUploadDialogConatiner = () => {
+export const LoadingUploadDialogContainer = () => {
   const theme = useTheme();
   return (
     <UploadDialogBox dragging={false}>
       <ImageContainer
-        src={AnimatedGifs.UploadingFile}
+        src={AnimatedGIFs.UploadingFile}
         alt={'Import animation'}
       />
       <Typography

package/src/components/Navigation/UploadDialog/UploadDialog.tsx

@@ -1,9 +1,9 @@
-import { Divider, Stack } from '@mui/material';
+import { Box, Divider, IconButton, Stack } from '@mui/material';
 import { ReactNode, useEffect, useState } from 'react';
-import { Button } from '../../export';
+import { Button, Icons } from '../../export';
 import { Dialog, DialogProps } from '../export';
 import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
-import { LoadingUploadDialogConatiner } from './LoadingUploadDialogContainer';
+import { LoadingUploadDialogContainer } from './LoadingUploadDialogContainer';
 import { UploadDialogContainer } from './UploadDialogContainer';
 
 export type UploadDialogProps = {
@@ -42,6 +42,13 @@ export const UploadDialog = ({
     setOpen(true);
   };
 
+  const handleDelete = (fileToDelete: File) => {
+    setFile((prevFile) => {
+      if (!prevFile) return null;
+      return prevFile === fileToDelete ? null : prevFile;
+    });
+  };
+
   const handleUpload = async (close: () => void) => {
     if (file) {
       try {
@@ -55,6 +62,12 @@ export const UploadDialog = ({
     }
   };
 
+  const Actions = ({ file }: { file: File }) => (
+    <IconButton onClick={() => handleDelete(file)}>
+      <Icons.DeleteIcon />
+    </IconButton>
+  );
+
   useEffect(() => {
     setUploading(loading);
   }, [loading]);
@@ -78,42 +91,41 @@ export const UploadDialog = ({
         content={({ close }: { close: () => void }) => {
           return (
             <>
-              {uploading ? (
-                <LoadingUploadDialogConatiner />
-              ) : (
-                <UploadDialogContainer
-                  setFile={setFile}
-                  acceptFileType={acceptFileType}
-                />
-              )}
+              <Box sx={{ padding: '12px 16px' }}>
+                {uploading ? (
+                  <LoadingUploadDialogContainer />
+                ) : (
+                  <UploadDialogContainer
+                    setFile={setFile}
+                    acceptFileType={acceptFileType}
+                  />
+                )}
 
-              {sampleFileUrl && (
-                <a href={sampleFileUrl} target="_blank" rel="noreferrer">
-                  <Button
-                    sx={{ margin: '12px 0px' }}
-                    color="secondary"
-                    fullWidth
-                    variant="contained"
-                  >
-                    Download Sample File
-                  </Button>
-                </a>
-              )}
-              {file && !uploading && (
-                <PreviewFiles
-                  sx={{ margin: '16px 0px' }}
-                  key={file.name + file.lastModified}
-                  files={file}
-                  label="Selected Files"
-                  setFiles={setFile}
-                />
-              )}
+                <Box sx={{ marginTop: '12px' }}>
+                  {sampleFileUrl && (
+                    <a href={sampleFileUrl} target="_blank" rel="noreferrer">
+                      <Button color="secondary" fullWidth variant="contained">
+                        Download Sample File
+                      </Button>
+                    </a>
+                  )}
+                </Box>
+                {file && !uploading && (
+                  <PreviewFiles
+                    sx={{ marginTop: '16px' }}
+                    key={file.name + file.lastModified}
+                    files={file}
+                    label="Selected Files"
+                    actions={(file) => <Actions file={file} />}
+                  />
+                )}
+              </Box>
               <Divider
                 component="div"
                 variant="fullWidth"
                 orientation="horizontal"
               />
-              <Stack direction={'row'} gap={2} padding={'12px 0px'}>
+              <Stack direction={'row'} gap={2} padding={'12px 16px'}>
                 <Button
                   variant="contained"
                   disabled={!file || uploading}
@@ -128,6 +140,7 @@ export const UploadDialog = ({
                     setFile(null);
                     close();
                   }}
+                  disableRipple
                 >
                   Cancel
                 </Button>

package/src/components/Navigation/UploadDialog/UploadDialogContainer.tsx

@@ -1,6 +1,6 @@
 import { FormLabel, Typography, useTheme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
-import { AnimatedGifs } from '../../../assets/images/gif';
+import { AnimatedGIFs } from '../../../assets/images/gif';
 import { ImageContainer, UploadDialogBox } from './Styles';
 
 export const UploadDialogContainer = ({
@@ -50,7 +50,7 @@ export const UploadDialogContainer = ({
         dragging={dragging}
       >
         <ImageContainer
-          src={AnimatedGifs.UploadFile}
+          src={AnimatedGIFs.UploadFile}
           alt={'Import animation'}
         />
         <Typography

package/src/redux/slices/pageHeaderSlice.ts

@@ -29,7 +29,10 @@ export const pageHeaderSlice = createSlice({
     },
     setDensityForUniqueId: (state, action) => {
       const { uniqueId, density } = action.payload;
-      state[uniqueId] = { ...state[uniqueId], density };
+      state[uniqueId] = {
+        ...state[uniqueId],
+        density,
+      };
     },
     setSearchForUniqueId: (state, action) => {
       const { uniqueId, search } = action.payload;

package/src/stories/Navigation/PreviewFiles.stories.tsx

@@ -1,7 +1,11 @@
-import { Box } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
-import { PreviewFiles, PreviewFilesProps } from '../../components/export';
+import {
+  Icons,
+  PreviewFiles,
+  PreviewFilesProps,
+} from '../../components/export';
 
 export default {
   title: 'Navigation/PreviewFiles',
@@ -40,17 +44,47 @@ const txtFile = createTestFile('notes.txt', 'text/plain', 10 * 1024);
 const Template: StoryFn<PreviewFilesProps> = (args) => {
   const [files, setFiles] = useState<PreviewFilesProps['files']>(args.files);
 
-  const handleSetFiles: PreviewFilesProps['setFiles'] = (newFiles: any) => {
-    if (typeof newFiles === 'function') {
-      setFiles(newFiles(files));
-    } else {
-      setFiles(newFiles);
-    }
+  const Actions = ({ file }: { file: File }) => {
+    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);
+    };
+
+    const handleDelete = (fileToDelete: File) => {
+      setFiles((prevFiles) => {
+        if (!prevFiles) return null;
+        if (Array.isArray(prevFiles)) {
+          return prevFiles.filter((file) => file !== fileToDelete);
+        }
+        return prevFiles === fileToDelete ? null : prevFiles;
+      });
+    };
+
+    return (
+      <>
+        <IconButton onClick={() => handleDownload(file)}>
+          <Icons.DownloadIcon />
+        </IconButton>
+        <IconButton onClick={() => handleDelete(file)}>
+          <Icons.DeleteIcon />
+        </IconButton>
+      </>
+    );
   };
 
   return (
     <Box sx={{ width: '400px', padding: '20px' }}>
-      <PreviewFiles {...args} files={files} setFiles={handleSetFiles} />
+      <PreviewFiles
+        {...args}
+        files={files}
+        actions={(file) => <Actions file={file} />}
+      />
     </Box>
   );
 };

package/src/themes/commonTheme.ts

@@ -1,5 +1,6 @@
 import { Components } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
+import type {} from '@mui/x-data-grid/themeAugmentation';
 import { DarkColorTokens } from './colorTokens/darkColorTokens';
 import { LightColorTokens } from './colorTokens/lightColorTokens';
 import { customCssBaseline } from './customCssBaseline';
@@ -39,6 +40,21 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            backgroundColor: ColorTokens.surface.paperBackground,
+            border: 'none',
+            height: '100%',
+            minHeight: 'calc(100vh - 292px)',
+            maxHeight: 'calc(100vh - 232px)',
+            '& .MuiDataGrid-columnHeader': {
+              backgroundColor: ColorTokens.surface.grey,
+              height: '48px !important',
+            },
+          },
+        },
+      },
       MuiTimelineContent: {
         styleOverrides: {
           root: {
@@ -206,7 +222,7 @@ export const getCommonTheme = (mode: Theme) => {
             height: '4px',
             borderRadius: '10px',
             backgroundColor: ColorTokens.tertiary.main,
-            margin: '3px',
+            margin: '6px',
             minWidth: '4px',
           },
         },
@@ -259,7 +275,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           list: {
             minWidth: '240px',
-            padding: 0,
+            padding: '8px',
             '& > :last-child': {
               borderBottom: 'none',
               '& li': {
@@ -286,13 +302,15 @@ export const getCommonTheme = (mode: Theme) => {
       MuiMenuItem: {
         styleOverrides: {
           root: {
-            minHeight: '50px !important',
-            padding: '10px 16px',
+            minHeight: '40px !important',
+            padding: '8px 12px',
           },
         },
       },
       MuiPagination: {
-        styleOverrides: {},
+        styleOverrides: {
+          root: {},
+        },
       },
       MuiPaginationItem: {
         styleOverrides: {
@@ -458,8 +476,15 @@ export const getCommonTheme = (mode: Theme) => {
               padding: 0,
               maxHeight: '40px',
             },
+            minWidth: '200px',
             overflowY: 'auto',
           },
+          listbox: {
+            padding: 0,
+          },
+          option: {
+            borderBottom: `1px solid ${ColorTokens.border.secondary}`,
+          },
           paper: {
             borderRadius: '10px',
           },

package/src/themes/customCssBaseline.ts

@@ -1,9 +1,10 @@
-import { heeboMedium, heeboSemiBold } from '../assets/fonts/heebo';
 import {
   boldPoppins,
+  heeboMedium,
+  heeboSemiBold,
   mediumPoppins,
   semiboldPoppins,
-} from '../assets/fonts/poppins';
+} from '../assets/export';
 
 export const customCssBaseline = `
     @font-face {

package/src/components/DataDisplay/styles.tsx

@@ -1,6 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-export const DataGridContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  margin: '10px',
-}));

package/src/components/Input/components/OptionsLoader.tsx

@@ -1,22 +0,0 @@
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Spinner } from '../../Feedback/Spinner/Spinner';
-import { FetchingOptionsLoaderContainer } from '../styles';
-
-export const OptionsLoader = ({
-  loading,
-  isSearch,
-}: {
-  loading: boolean;
-  isSearch: boolean;
-}) => {
-  return loading ? (
-    <FetchingOptionsLoaderContainer direction="row" alignItems="center">
-      <Spinner />
-      <Typography variant="caption">
-        {isSearch ? 'Searching' : 'Loading Options'}
-      </Typography>
-    </FetchingOptionsLoaderContainer>
-  ) : (
-    <></>
-  );
-};