@campxdev/react-blueprint 1.7.7 → 1.7.9

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

@@ -4,20 +4,24 @@ import {
   ListItemButton,
   ListItemIcon,
   Stack,
+  StackProps,
   styled,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 
+interface StyledSidebarContainerProps extends StackProps {
+  collapsed?: boolean;
+}
+
 export const createSidebarStyles = (collapsed: boolean) => {
-  const StyledSidebarContainer = styled(Stack)(({ theme }) => {
-    return {
-      backgroundColor: theme.palette.surface.defaultBackground,
-      height: '100%',
-      width: collapsed ? '60px' : '250px',
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-    };
-  });
+  const StyledSidebarContainer = styled(Stack, {
+    shouldForwardProp: (prop) => prop !== 'collapsed',
+  })<StyledSidebarContainerProps>(({ theme, collapsed }) => ({
+    backgroundColor: theme.palette.surface.defaultBackground,
+    height: '100%',
+    justifyContent: collapsed ? 'space-between' : 'flex-start',
+    overflow: 'hidden',
+  }));
 
   const StyledLogoArea = styled(Box)(
     ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
@@ -28,6 +32,12 @@ export const createSidebarStyles = (collapsed: boolean) => {
       backgroundColor: theme.palette.surface.paperBackground,
       height: '60px',
       borderRadius: '8px',
+
+      [theme.breakpoints.down('md')]: {
+        height: '50px',
+        width: '50px',
+        minWidth: '0px',
+      },
     }),
   );
 
@@ -37,6 +47,11 @@ export const createSidebarStyles = (collapsed: boolean) => {
     backgroundColor: theme.palette.surface.paperBackground,
     overflowY: 'auto',
     overflowX: 'hidden',
+
+    [theme.breakpoints.down('md')]: {
+      margin: '12px 0px',
+      width: '250px',
+    },
     '&::-webkit-scrollbar': {
       width: '0.3em',
       height: '0.2em',

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

@@ -21,6 +21,10 @@ const TabContent = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.surface.paperBackground,
 
   '&::-webkit-scrollbar': { display: 'none' },
+
+  '@media (max-width:959px)': {
+    height: 'calc(100vh - 224px)',
+  },
 }));
 
 export const TabsContainer = ({

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

@@ -17,7 +17,7 @@ export const UploadDialogBox = styled(Box)<StyledBoxProps>(
       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")`,
+      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}' strokeWidth='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' strokeLinecap='round'/%3e%3c/svg%3e")`,
       backgroundColor: theme.palette.surface.defaultBackground,
       justifyContent: 'center',
       alignItems: 'center',

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

@@ -1,6 +1,6 @@
-import { Box, Divider, IconButton, Stack } from '@mui/material';
+import { Box, Divider, Stack } from '@mui/material';
 import { ReactNode, useEffect, useState } from 'react';
-import { Button, Icons } from '../../export';
+import { Button } from '../../export';
 import { Dialog, DialogProps } from '../export';
 import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
 import { LoadingUploadDialogContainer } from './LoadingUploadDialogContainer';
@@ -12,7 +12,7 @@ export type UploadDialogProps = {
   onDialogClose?: () => void;
   title?: string;
   sampleFileUrl?: string;
-  onUpload: (file: File | null) => void;
+  onUpload: (file: File | File[]) => void;
   acceptFileType?: string;
   loading?: boolean;
 } & Omit<DialogProps, 'content' | 'onClose' | 'open'>;
@@ -29,7 +29,7 @@ export const UploadDialog = ({
   ...props
 }: UploadDialogProps) => {
   const [open, setOpen] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
+  const [files, setFiles] = useState<File[]>([]);
   const [uploading, setUploading] = useState(false);
 
   const onClose = () => {
@@ -42,18 +42,11 @@ 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) {
+    if (files.length) {
       try {
         setUploading(true);
-        await onUpload(file);
+        await onUpload(files.length == 1 ? files[0] : files);
         setUploading(false);
       } catch (error) {
         console.error('Upload failed:', error);
@@ -62,19 +55,13 @@ export const UploadDialog = ({
     }
   };
 
-  const Actions = ({ file }: { file: File }) => (
-    <IconButton onClick={() => handleDelete(file)}>
-      <Icons.DeleteIcon />
-    </IconButton>
-  );
-
   useEffect(() => {
     setUploading(loading);
   }, [loading]);
 
   useEffect(() => {
     if (!uploading) {
-      setFile(null);
+      setFiles([]);
       setOpen(false);
     }
   }, [uploading]);
@@ -96,7 +83,8 @@ export const UploadDialog = ({
                   <LoadingUploadDialogContainer />
                 ) : (
                   <UploadDialogContainer
-                    setFile={setFile}
+                    files={files}
+                    setFiles={setFiles}
                     acceptFileType={acceptFileType}
                   />
                 )}
@@ -110,13 +98,15 @@ export const UploadDialog = ({
                     </a>
                   )}
                 </Box>
-                {file && !uploading && (
+                {files.length && !uploading && (
                   <PreviewFiles
                     sx={{ marginTop: '16px' }}
-                    key={file.name + file.lastModified}
-                    files={file}
+                    key={1}
+                    files={files}
                     label="Selected Files"
-                    actions={(file) => <Actions file={file} />}
+                    onChange={(newFiles) => {
+                      setFiles(newFiles);
+                    }}
                   />
                 )}
               </Box>
@@ -128,7 +118,7 @@ export const UploadDialog = ({
               <Stack direction={'row'} gap={2} padding={'12px 16px'}>
                 <Button
                   variant="contained"
-                  disabled={!file || uploading}
+                  disabled={!files.length || uploading}
                   onClick={() => {
                     handleUpload(close);
                   }}
@@ -137,7 +127,7 @@ export const UploadDialog = ({
                 </Button>
                 <Button
                   onClick={() => {
-                    setFile(null);
+                    setFiles([]);
                     close();
                   }}
                   disableRipple

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

@@ -4,22 +4,24 @@ import { AnimatedGIFs } from '../../../assets/images/gif';
 import { ImageContainer, UploadDialogBox } from './Styles';
 
 export const UploadDialogContainer = ({
-  setFile,
+  setFiles,
+  files,
   acceptFileType,
 }: {
-  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  files: File[];
+  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
   acceptFileType?: string;
 }) => {
   const theme = useTheme();
   const [dragging, setDragging] = useState(false);
 
-  const resetFile = useCallback(() => setFile(null), [setFile]);
+  const resetFiles = useCallback(() => setFiles([]), [setFiles]);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = event.target.files?.[0];
+    const selectedFile = event.target.files;
     if (selectedFile) {
-      resetFile();
-      setFile(selectedFile);
+      resetFiles();
+      setFiles(Array.from(selectedFile));
       event.target.value = '';
     }
   };
@@ -36,7 +38,7 @@ export const UploadDialogContainer = ({
     setDragging(false);
     const droppedFile = event.dataTransfer.files?.[0];
     if (droppedFile) {
-      setFile(droppedFile);
+      setFiles([...files, droppedFile]);
       event.dataTransfer.clearData();
     }
   };

package/src/stories/DataDisplay/StatusCard.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { StatusCard, StatusCardProps } from '../../components/export';
+
+export default {
+  title: 'DataDisplay/StatusCard',
+  component: StatusCard,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['green', 'red', 'orange', 'yellow', 'blue', 'pink'],
+      description: 'The color of the status card',
+    },
+    text: {
+      control: 'text',
+      description: 'The text displayed on the status card',
+    },
+  },
+} as Meta<StatusCardProps>;
+
+const Template: StoryFn<StatusCardProps> = (args) => <StatusCard {...args} />;
+
+export const GreenStatus = Template.bind({});
+GreenStatus.args = {
+  color: 'green',
+  text: 'Success',
+};
+
+export const RedStatus = Template.bind({});
+RedStatus.args = {
+  color: 'red',
+  text: 'Error',
+};
+
+export const OrangeStatus = Template.bind({});
+OrangeStatus.args = {
+  color: 'orange',
+  text: 'Warning',
+};
+
+export const YellowStatus = Template.bind({});
+YellowStatus.args = {
+  color: 'yellow',
+  text: 'Caution',
+};
+
+export const BlueStatus = Template.bind({});
+BlueStatus.args = {
+  color: 'blue',
+  text: 'Info',
+};
+
+export const PinkStatus = Template.bind({});
+PinkStatus.args = {
+  color: 'pink',
+  text: 'Special',
+};
+
+export const CustomStatus = Template.bind({});
+CustomStatus.args = {
+  color: 'red',
+  text: 'Custom Status Text',
+};

package/src/stories/Input/SingleSelect.stories.tsx

@@ -8,7 +8,7 @@ import {
 // Make sure your TextField import is correct
 
 const topFilms = [
-  { label: 'The Shawshank Redemption', value: 1994 },
+  { label: 'The Shawshank Redemption', value: 1994, subLabel: 'Gowtham' },
   { label: 'The Godfather', value: 1972 },
   { label: 'The Godfather: Part II', value: 1974 },
   { label: 'The Dark Knight', value: 2008 },
@@ -85,6 +85,7 @@ export const Default = {
   args: {
     required: true,
     label: 'Single Select',
+    onChange: () => {},
   },
 };
 export const Primary = {
@@ -93,6 +94,7 @@ export const Primary = {
     options: topFilms,
     label: 'Single Select',
     required: false,
+    onChange: () => {},
   },
 };
 
@@ -102,6 +104,7 @@ export const WithAPIEndPoint = {
     optionsApiEndPoint: 'dropdowns/classrooms',
     label: 'Select Classroom',
     required: false,
+    onChange: () => {},
   },
 };
 
@@ -112,6 +115,7 @@ export const SingleSelectWithValue = {
     options: topFilms,
     required: true,
     value: 1994,
+    onChange: () => {},
   },
 };
 
@@ -122,5 +126,6 @@ export const SingleSelectWithValueAndApi = {
     label: 'Select Classroom',
     required: true,
     value: 1,
+    onChange: () => {},
   },
 };

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

@@ -1,11 +1,7 @@
-import { Box, IconButton } from '@mui/material';
+import { Box } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
-import {
-  Icons,
-  PreviewFiles,
-  PreviewFilesProps,
-} from '../../components/export';
+import { PreviewFiles, PreviewFilesProps } from '../../components/export';
 
 export default {
   title: 'Navigation/PreviewFiles',
@@ -17,73 +13,36 @@ export default {
 } as Meta<PreviewFilesProps>;
 
 const createTestFile = (name: string, type: string, size: number): File => {
-  return new File(['dummy content'], name, {
-    type: type,
-    lastModified: Date.now(),
-  });
-};
-
-const imageFile = createTestFile('image.jpg', 'image/jpeg', 1024 * 1024);
-const pdfFile = createTestFile(
-  'document.pdf',
-  'application/pdf',
-  2 * 1024 * 1024,
-);
-const excelFile = createTestFile(
-  'spreadsheet.xlsx',
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  512 * 1024,
-);
-const wordFile = createTestFile(
-  'report.docx',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  3 * 1024 * 1024,
-);
-const txtFile = createTestFile('notes.txt', 'text/plain', 10 * 1024);
+    return new File(['dummy content'], name, {
+      type: type,
+      lastModified: Date.now(),
+    });
+  },
+  txtFile = createTestFile('notes.txt', 'text/plain', 10 * 1024),
+  imageFile = createTestFile('image.jpg', 'image/jpeg', 1024 * 1024),
+  pdfFile = createTestFile('document.pdf', 'application/pdf', 2 * 1024 * 1024),
+  excelFile = createTestFile(
+    'spreadsheet.xlsx',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    512 * 1024,
+  ),
+  wordFile = createTestFile(
+    'report.docx',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    3 * 1024 * 1024,
+  );
 
 const Template: StoryFn<PreviewFilesProps> = (args) => {
   const [files, setFiles] = useState<PreviewFilesProps['files']>(args.files);
 
-  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}
-        actions={(file) => <Actions file={file} />}
+        onChange={(newFiles, file) => {
+          setFiles(newFiles);
+        }}
       />
     </Box>
   );
@@ -93,6 +52,7 @@ export const MultipleFiles = Template.bind({});
 MultipleFiles.args = {
   files: [imageFile, pdfFile, excelFile, wordFile, txtFile],
   label: 'Multiple Files',
+  showDownload: true,
 };
 
 export const SingleFile = Template.bind({});
@@ -112,3 +72,12 @@ CustomLabel.args = {
   files: [imageFile, pdfFile],
   label: 'Custom Label for Files',
 };
+
+export const FilesFromUrls = Template.bind({});
+FilesFromUrls.args = {
+  files: [
+    'https://d2738wjykzpnhe.cloudfront.net/aupulse/aupulse/student-service-requests/PDFs/a_ravi_teja_bonafide.pdf',
+    'https://d2738wjykzpnhe.cloudfront.net/aupulse/signatures/image/6ec02b72-0884-474a-8c73-32ae77b6e113.jpeg',
+  ],
+  label: 'Files from Urls',
+};

package/src/stories/Navigation/TabsContainer.stories.tsx

@@ -39,7 +39,17 @@ export const Primary: Story = {
       },
       {
         key: '3',
-        label: 'year 3',
+        label: 'Leaves',
+        component: <>Third Year</>,
+      },
+      {
+        key: '4',
+        label: 'Class Reassignments',
+        component: <>Third Year</>,
+      },
+      {
+        key: '5',
+        label: 'Student Service Requests',
         component: <>Third Year</>,
       },
     ],

package/src/themes/commonTheme.ts

@@ -532,12 +532,13 @@ export const getCommonTheme = (mode: Theme) => {
           },
           indicator: {
             display: 'flex',
-            justifyContent: 'center',
+            justifyContent: 'flex-start',
             backgroundColor: 'transparent',
-            height: '3px',
+            height: '4px',
             '& .MuiTabs-indicatorSpan': {
-              borderRadius: '30px',
-              width: '60%',
+              width: '60px',
+              marginLeft: '15px',
+              borderRadius: '20px',
               backgroundColor: ColorTokens.tertiary.main,
             },
           },
@@ -552,9 +553,11 @@ export const getCommonTheme = (mode: Theme) => {
             color: ColorTokens.text.secondary,
             fontSize: '14px',
             fontWeight: '600',
+            fontFamily: 'Poppins',
             textTransform: 'initial',
             minHeight: '50px',
             paddingBottom: '0px',
+            justifyContent: 'flex-start',
             '&.Mui-selected': {
               color: ColorTokens.text.primary,
             },