@campxdev/react-blueprint 1.7.1 → 1.7.3

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/TabsContainer/TabsContainer.tsx

@@ -2,9 +2,9 @@ import { Box, styled, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
 import { ChangeEvent, useEffect, useState } from 'react';
 
 interface CustomTabProps extends Omit<TabProps, 'component'> {
+  key: string | number;
   component: React.ReactNode;
   highlight?: boolean;
-  key: string | number;
 }
 
 export interface TabsContainerProps {
@@ -16,7 +16,7 @@ export interface TabsContainerProps {
 
 const TabContent = styled(Box)(({ theme }) => ({
   width: '100%',
-  height: 'calc(100vh - 200px)',
+  minHeight: 'calc(100vh - 200px)',
   backgroundColor: theme.palette.surface.paperBackground,
 }));
 
@@ -32,6 +32,7 @@ export const TabsContainer = ({
     setCurrentTab(value);
     onTabChange && onTabChange(value);
   };
+
   useEffect(() => {
     setCurrentTab(tabs[currentTabIndex]?.key);
   }, []);
@@ -48,11 +49,12 @@ export const TabsContainer = ({
         }}
         {...tabsProps}
       >
-        {tabs.map(({ component, ...tab }) => (
+        {tabs.map(({ key, component, ...tab }, index) => (
           <Tab
-            label={tab.label}
-            value={tab?.key}
-            icon={tab.highlight ? <span>{'.'}</span> : <></>}
+            key={index}
+            value={key}
+            label={tab?.label}
+            icon={tab?.highlight ? <span>{'.'}</span> : <></>}
             iconPosition="end"
             {...tab}
           />

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/Styles.tsx

@@ -5,27 +5,26 @@ interface StyledBoxProps {
   dragging: boolean;
 }
 
-export const UploadDialogBox = styled(Box)<StyledBoxProps>(({
-  theme,
-  dragging,
-}) => {
-  const strokeColor = dragging
-    ? encodeURIComponent(theme.palette.primary.dark)
-    : encodeURIComponent(theme.palette.primary.main);
+export const UploadDialogBox = styled(Box)<StyledBoxProps>(
+  ({ theme, dragging }) => {
+    const strokeColor = dragging
+      ? encodeURIComponent(theme.palette.primary.dark)
+      : encodeURIComponent(theme.palette.primary.main);
 
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '250px',
-    borderRadius: '7px',
-    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' stroke-linecap='round'/%3e%3c/svg%3e")`,
-    backgroundColor: theme.palette.surface.defaultBackground,
-    justifyContent: 'center',
-    alignItems: 'center',
-    transition: 'background-color 0.3s, border-color 0.3s',
-  };
-});
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '250px',
+      borderRadius: '7px',
+      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' strokeLinecap='round'/%3e%3c/svg%3e")`,
+      backgroundColor: theme.palette.surface.defaultBackground,
+      justifyContent: 'center',
+      alignItems: 'center',
+      transition: 'background-color 0.3s, border-color 0.3s',
+    };
+  },
+);
 
 export const ImageContainer = React.memo(
   styled('img')<{ size?: number }>(({ size }) => ({

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/stories/Assets/Icons.stories.tsx

@@ -9,6 +9,7 @@ const IconsStory = () => {
     <Stack gap={2} direction={'column'}>
       {Object.entries(Icons).map(([key, Icon], index) => (
         <Stack
+          key={index}
           direction="row"
           alignItems="center"
           gap={4}

package/src/stories/DataDisplay/Card.stories.tsx

@@ -1,7 +1,6 @@
+import { Stack } from '@mui/material';
 import { Meta } from '@storybook/react';
 import { Card, CardProps } from '../../components/DataDisplay/Card/Card';
-import { Stack } from '@mui/material';
-import { GridMenuIcon } from '@mui/x-data-grid';
 
 export default {
   title: 'DataDisplay/Card',

package/src/stories/DataDisplay/CircularAvatar.stories.tsx

@@ -15,14 +15,14 @@ export default {
 } as Meta<typeof CircularAvatar>;
 
 // Define stories directly as objects with render function
-export const withText = {
+export const WithText = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
     text: 'Sh auy',
   },
 };
 
-export const withImage = {
+export const WithImage = {
   render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
   args: {
     src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -10,7 +10,7 @@ export default {
   component: SidePanel,
 } as Meta<typeof SidePanel>;
 
-export const withText = {
+export const WithText = {
   render: (args: SidePanelProps) => <SidePanel {...args} />,
   args: {
     variables: [

package/src/stories/DataDisplay/SquareAvatar.stories.tsx

@@ -35,14 +35,14 @@ export default {
 } as Meta<typeof SquareAvatar>;
 
 // Define stories directly as objects with render function
-export const withText = {
+export const WithText = {
   render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
   args: {
     text: 'SQC01',
   },
 };
 
-export const withImage = {
+export const WithImage = {
   render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
   args: {
     src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',

package/src/stories/Input/Select.stories.tsx

@@ -55,7 +55,7 @@ export const WithPreselectedValue: Story = {
 export const WithPlaceHolder: Story = {
   args: {
     ...Default.args,
-    placeholder: 'Select an option...',
+    // placeholder: 'Select an option...',
   },
 };
 

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

@@ -64,6 +64,21 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiPaper: {
+        root: {
+          MuiAccordion: {
+            root: {
+              ':last-of-type': {
+                borderBottomLeftRadius: '0px',
+                borderBottomRightRadius: '0px',
+              },
+            },
+          },
+        },
+      },
+      // MuiAccordian: {
+      //   root: {},
+      // },
       MuiAccordionSummary: {
         styleOverrides: {
           root: {

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/utils/constants.ts

@@ -1,2 +1,4 @@
-export const isDevelopment: boolean = process.env.NODE_ENV === 'development';
 export const isLocal = window.location.hostname === 'localhost';
+
+export const isDevelopment: boolean =
+  process.env.NODE_ENV === 'development' || isLocal;