@campxdev/react-blueprint 1.1.7 → 1.1.9

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

@@ -7,44 +7,44 @@ import {
   ListItemIcon,
   Stack,
   styled,
-} from "@mui/material";
-import { Link } from "react-router-dom";
+} from '@mui/material';
+import { Link } from 'react-router-dom';
 
 export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
     return {
       backgroundColor: theme.palette.surface.defaultBackground,
-      height: "100%",
-      justifyContent: "space-between",
-      overflow: "hidden",
+      height: '100%',
+      justifyContent: 'space-between',
+      overflow: 'hidden',
     };
   });
 
   const StyledLogoArea = styled(Box)(
     ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: collapsed ? "0px" : "12px 36px",
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: collapsed ? '0px' : '12px 36px',
       backgroundColor: theme.palette.surface.paperBackground,
-      height: "60px",
-      borderRadius: "8px",
-    })
+      height: '60px',
+      borderRadius: '8px',
+    }),
   );
 
   const StyledMenuBar = styled(Box)(({ theme }) => ({
-    height: "100%",
-    borderRadius: "8px",
+    height: '100%',
+    borderRadius: '8px',
     backgroundColor: theme.palette.surface.paperBackground,
   }));
 
   const StyledCollapsibleSection = styled(IconButton)(({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "8px",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '8px',
     backgroundColor: theme.palette.surface.paperBackground,
-    height: "60px",
+    height: '60px',
   }));
 
   interface StyledLinkButtonProps {
@@ -54,34 +54,34 @@ export const createSidebarStyles = (collapsed: boolean) => {
   const StyledListItem = styled(ListItem)(({ theme }) => ({
     // width: collapsed ? "min-content" : "auto",
     // backgroundColor: match ? theme.palette.secondary.main : "none",
-    display: "flex",
-    justifyContent: "center",
-    borderRadius: "4px",
+    display: 'flex',
+    justifyContent: 'center',
+    borderRadius: '4px',
   }));
 
   const StyledLinkButton = styled(Link)<StyledLinkButtonProps>(
     ({ theme, match }) => ({
-      width: collapsed ? "auto" : "100%",
-      textDecoration: "none",
-      display: "flex",
-      margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
+      width: collapsed ? 'auto' : '100%',
+      textDecoration: 'none',
+      display: 'flex',
+      margin: collapsed ? '5px 0px 0px 0px' : '5px 8px',
 
-      backgroundColor: match ? theme.palette.secondary.main : "none",
-      justifyContent: "center",
-      "&:hover": {
-        color: "unset",
+      backgroundColor: match ? theme.palette.secondary.main : 'none',
+      justifyContent: 'center',
+      '&:hover': {
+        color: 'unset',
       },
-      borderRadius: "4px",
-    })
+      borderRadius: '4px',
+    }),
   );
 
   const StyledListItemIcon = styled(ListItemIcon)(
     ({ collapsed }: { collapsed: boolean }) => ({
-      display: "flex",
-      justifyContent: "center",
-      minWidth: "0px",
-      marginRight: "10px",
-    })
+      display: 'flex',
+      justifyContent: 'center',
+      minWidth: '0px',
+      marginRight: '10px',
+    }),
   );
 
   interface StyledListItemButtonProps {
@@ -89,47 +89,47 @@ export const createSidebarStyles = (collapsed: boolean) => {
   }
 
   const StyledListItemButton = styled(
-    ListItemButton
+    ListItemButton,
   )<StyledListItemButtonProps>(({ collapsed }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: collapsed ? "center" : "flex-start",
-    paddingBottom: "5px",
-    paddingTop: "5px",
-    width: "100%",
-    borderRadius: "5px",
-    "&:hover .hoverIcon": {
-      display: "flex",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: collapsed ? 'center' : 'flex-start',
+    paddingBottom: '5px',
+    paddingTop: '5px',
+    width: '100%',
+    borderRadius: '5px',
+    '&:hover .hoverIcon': {
+      display: 'flex',
     },
   }));
 
   const HoverIcon = styled(Box)(({ theme }) => ({
-    display: "none",
+    display: 'none',
   }));
 
   const StyledSubMenuButton = styled(Button)<StyledLinkButtonProps>(
     ({ theme, match }) => ({
-      width: collapsed ? "auto" : "100%",
-      textDecoration: "none",
-      display: "flex",
-      margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
-      backgroundColor: match ? theme.palette.secondary.main : "none",
-      justifyContent: "center",
-      "&:hover": {
-        color: "unset",
+      width: collapsed ? 'auto' : '100%',
+      textDecoration: 'none',
+      display: 'flex',
+      margin: collapsed ? '5px 0px 0px 0px' : '5px 8px',
+      backgroundColor: match ? theme.palette.secondary.main : 'none',
+      justifyContent: 'center',
+      '&:hover': {
+        color: 'unset',
       },
-      borderRadius: "4px",
-    })
+      borderRadius: '4px',
+    }),
   );
 
   const StyledMenuHeaderButton = styled(Stack)(({ theme }) => ({
-    alignItems: "end",
-    height: "50px",
-    width: "100%",
-    padding: "12px 16px",
+    alignItems: 'end',
+    height: '50px',
+    width: '100%',
+    padding: '12px 16px',
     backgroundColor: theme.palette.surface.grey,
-    cursor: "pointer",
-    borderRadius: "8px 8px 0px 0px",
+    cursor: 'pointer',
+    borderRadius: '8px 8px 0px 0px',
   }));
 
   return {

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -5,11 +5,11 @@ import {
   StepLabel,
   SxProps,
   Typography,
-} from "@mui/material";
-import { Connector, StepIcon, StyledStepContent } from "./StepperComponents";
+} from '@mui/material';
+import { Connector, StepIcon, StyledStepContent } from './StepperComponents';
 
 interface StepperProps {
-  orientation: "vertical" | "horizontal";
+  orientation: 'vertical' | 'horizontal';
   activeStep: number;
   steps: StepItem[];
   containerSx: SxProps;
@@ -26,12 +26,12 @@ export const Stepper = ({
   activeStep = 0,
   containerSx,
 }: StepperProps) => {
-  const isVertical = orientation === "vertical";
+  const isVertical = orientation === 'vertical';
 
   return (
     <Box
       sx={{
-        ...(isVertical ? { maxWidth: "300px" } : {}),
+        ...(isVertical ? { maxWidth: '300px' } : {}),
         ...containerSx,
       }}
     >

package/src/components/Navigation/Stepper/StepperComponents.tsx

@@ -4,10 +4,10 @@ import {
   StepContent,
   StepIconProps,
   styled,
-} from "@mui/material";
-import { CheckedRadioIcon } from "../../Assets/Icons/IconComponents/CheckedRadioIcon";
-import { CompletedStateIcon } from "../../Assets/Icons/IconComponents/CompletedStateIcon";
-import { UnCheckedRadioIcon } from "../../Assets/Icons/IconComponents/UncheckedRadioIcon";
+} from '@mui/material';
+import { CheckedRadioIcon } from '../../Assets/Icons/IconComponents/CheckedRadioIcon';
+import { CompletedStateIcon } from '../../Assets/Icons/IconComponents/CompletedStateIcon';
+import { UnCheckedRadioIcon } from '../../Assets/Icons/IconComponents/UncheckedRadioIcon';
 
 interface StepContentProps {
   isVertical: boolean;
@@ -23,11 +23,11 @@ export const StyledStepContent = styled(StepContent)<StepContentProps>(
         borderLeft: `2px solid ${theme.palette.primary.light}`,
       }),
     ...(!isVertical && {
-      borderLeft: "none",
-      paddingLeft: "20px",
-      margin: "20px 0px 0px 20px",
+      borderLeft: 'none',
+      paddingLeft: '20px',
+      margin: '20px 0px 0px 20px',
     }),
-  })
+  }),
 );
 
 interface ConnectorProps {
@@ -38,17 +38,17 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
   ({ theme, isVertical }) => ({
     [`&.${stepConnectorClasses.active}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? "borderLeft" : "border"]:
+        [isVertical ? 'borderLeft' : 'border']:
           `2px solid ${theme.palette.primary.light}`,
       },
     },
     [`&.${stepConnectorClasses.completed}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? "borderLeft" : "border"]:
+        [isVertical ? 'borderLeft' : 'border']:
           `2px solid ${theme.palette.primary.light}`,
       },
     },
-  })
+  }),
 );
 
 export function StepIcon(props: StepIconProps) {
@@ -63,10 +63,10 @@ export function StepIcon(props: StepIconProps) {
   return <StepIconRoot className={className}>{getIcon()}</StepIconRoot>;
 }
 
-const StepIconRoot = styled("div")<{}>(({ theme }) => ({
+const StepIconRoot = styled('div')<{}>(({ theme }) => ({
   width: 20,
   height: 20,
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
 }));

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

@@ -1,7 +1,7 @@
-import { Box, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
-import { ChangeEvent, useEffect, useState } from "react";
+import { Box, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
+import { ChangeEvent, useEffect, useState } from 'react';
 
-interface CustomTabProps extends Omit<TabProps, "component"> {
+interface CustomTabProps extends Omit<TabProps, 'component'> {
   component: React.ReactNode;
   highlight?: boolean;
   key: string | number;
@@ -46,7 +46,7 @@ export const TabsContainer = ({
           <Tab
             label={tab.label}
             value={tab?.key}
-            icon={tab.highlight ? <span>{"."}</span> : <></>}
+            icon={tab.highlight ? <span>{'.'}</span> : <></>}
             iconPosition="end"
             {...tab}
           />

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

@@ -0,0 +1,23 @@
+import { Typography, useTheme } from '@mui/material';
+import { AnimatedGifs } from '../../../assets/images/gif';
+import { ImageContainer, UploadDialogBox } from './Styles';
+
+export const LoadingUploadDialogConatiner = () => {
+  const theme = useTheme();
+  return (
+    <UploadDialogBox dragging={false}>
+      <ImageContainer
+        src={AnimatedGifs.UploadingFile}
+        alt={'Import animation'}
+      />
+      <Typography
+        fontSize="18px"
+        color={theme.palette.primary.main}
+        lineHeight="27px"
+        variant="subtitle3"
+      >
+        Uploading File
+      </Typography>
+    </UploadDialogBox>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Box, styled } from '@mui/material';
+import React from 'react';
+
+interface StyledBoxProps {
+  dragging: boolean;
+}
+
+export const UploadDialogBox = styled(Box)<StyledBoxProps>(
+  ({ theme, dragging }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '250px',
+    border: '1.5px dashed',
+    borderRadius: '10px',
+    borderColor: dragging
+      ? theme.palette.primary.dark
+      : theme.palette.primary.main,
+    backgroundColor: dragging
+      ? theme.palette.secondary.dark
+      : theme.palette.secondary.light,
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'background-color 0.3s, border-color 0.3s',
+  }),
+);
+
+export const ImageContainer = React.memo(
+  styled('img')<{ size?: number }>(({ size }) => ({
+    height: size ? `${size}px` : '110px',
+    width: size ? `${size}px` : '120px',
+    objectFit: 'contain',
+  })),
+);

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

@@ -0,0 +1,143 @@
+import { Divider, Stack } from '@mui/material';
+import { ReactNode, useEffect, useState } from 'react';
+import { Button } from '../../export';
+import { Dialog, DialogProps } from '../export';
+import { PreviewFiles } from '../PreviewFiles/PreviewFiles';
+import { LoadingUploadDialogConatiner } from './LoadingUploadDialogContainer';
+import { UploadDialogContainer } from './UploadDialogContainer';
+
+export type UploadDialogProps = {
+  anchor: (props: { open: () => void }) => ReactNode;
+  onDialogOpen?: () => void;
+  onDialogClose?: () => void;
+  title?: string;
+  sampleFileUrl?: string;
+  onUpload: (file: File | null) => void;
+  acceptFileType?: string;
+  loading?: boolean;
+} & Omit<DialogProps, 'content' | 'onClose' | 'open'>;
+
+export const UploadDialog = ({
+  onUpload,
+  sampleFileUrl,
+  acceptFileType,
+  loading = false,
+  title = 'Upload File',
+  anchor,
+  onDialogClose,
+  onDialogOpen,
+  ...props
+}: UploadDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const onClose = () => {
+    onDialogClose && onDialogClose();
+    setOpen(false);
+  };
+
+  const onOpen = () => {
+    onDialogOpen && onDialogOpen();
+    setOpen(true);
+  };
+
+  const handleUpload = async (close: () => void) => {
+    if (file) {
+      try {
+        setUploading(true);
+        await onUpload(file);
+        setUploading(false);
+      } catch (error) {
+        console.error('Upload failed:', error);
+        setUploading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    setUploading(loading);
+  }, [loading]);
+
+  useEffect(() => {
+    if (!uploading) {
+      setFile(null);
+      setOpen(false);
+    }
+  }, [uploading]);
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <Dialog
+        title={title}
+        maxWidth={'sm'}
+        open={open}
+        content={({ close }: { close: () => void }) => {
+          return (
+            <>
+              {uploading ? (
+                <LoadingUploadDialogConatiner />
+              ) : (
+                <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}
+                />
+              )}
+              <Divider
+                component="div"
+                variant="fullWidth"
+                orientation="horizontal"
+              />
+              <Stack direction={'row'} gap={2} padding={'12px 0px'}>
+                <Button
+                  variant="contained"
+                  disabled={!file || uploading}
+                  onClick={() => {
+                    handleUpload(close);
+                  }}
+                >
+                  Upload Now
+                </Button>
+                <Button
+                  onClick={() => {
+                    setFile(null);
+                    close();
+                  }}
+                >
+                  Cancel
+                </Button>
+              </Stack>
+            </>
+          );
+        }}
+        onClose={onClose}
+        {...props}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,82 @@
+import { FormLabel, Typography, useTheme } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { AnimatedGifs } from '../../../assets/images/gif';
+import { ImageContainer, UploadDialogBox } from './Styles';
+
+export const UploadDialogContainer = ({
+  setFile,
+  acceptFileType,
+}: {
+  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  acceptFileType?: string;
+}) => {
+  const theme = useTheme();
+  const [dragging, setDragging] = useState(false);
+
+  const resetFile = useCallback(() => setFile(null), [setFile]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    if (selectedFile) {
+      resetFile();
+      setFile(selectedFile);
+      event.target.value = '';
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setDragging(true);
+  };
+
+  const handleDragLeave = () => setDragging(false);
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setDragging(false);
+    const droppedFile = event.dataTransfer.files?.[0];
+    if (droppedFile) {
+      setFile(droppedFile);
+      event.dataTransfer.clearData();
+    }
+  };
+
+  return (
+    <FormLabel htmlFor="file">
+      <UploadDialogBox
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        dragging={dragging}
+      >
+        <ImageContainer
+          src={AnimatedGifs.UploadFile}
+          alt={'Import animation'}
+        />
+        <Typography
+          fontSize="18px"
+          color={theme.palette.primary.main}
+          lineHeight="27px"
+          variant="subtitle3"
+        >
+          Import your file
+        </Typography>
+        <Typography
+          color={theme.palette.primary.light}
+          lineHeight="27px"
+          variant="body2"
+        >
+          Click or drag and drop it here
+        </Typography>
+        <input
+          id="file"
+          type="file"
+          accept={acceptFileType}
+          onChange={handleFileChange}
+          hidden
+          multiple
+        />
+      </UploadDialogBox>
+    </FormLabel>
+  );
+};

package/src/components/Navigation/export.ts

@@ -0,0 +1,13 @@
+export * from './Breadcrumbs/Breadcrumbs';
+export * from './ConfirmDialog/ConfirmDialog';
+export * from './Dialog/Dialog';
+export * from './DialogButton/DialogButton';
+export * from './DropDownMenu/DropDownButton';
+export * from './DropDownMenu/DropDownIcon';
+export * from './DropDownMenu/DropDownMenu';
+export * from './DropDownMenu/DropdownMenuItem';
+export * from './PreviewFiles/PreviewFiles';
+export * from './Sidebar/Sidebar';
+export * from './Stepper/Stepper';
+export * from './TabsContainer/TabsContainer';
+export * from './UploadDialog/UploadDialog';

package/src/components/export.ts

@@ -1,7 +1,7 @@
-export * from "./Assets/export";
-export * from "./DataDisplay/export";
-export * from "./Feedback/exports";
-export * from "./Input/export";
-export * from "./Layout/exports";
-export * from "./Navigation/exports";
-export * from "./Charts/export";
+export * from './Assets/export';
+export * from './Charts/export';
+export * from './DataDisplay/export';
+export * from './Feedback/export';
+export * from './Input/export';
+export * from './Layout/export';
+export * from './Navigation/export';

package/src/contexts/Providers.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { MuiThemeProvider } from "../themes/MuiThemeProvider";
+import { ReactNode } from 'react';
+import { MuiThemeProvider } from '../themes/MuiThemeProvider';
 
 export default function Providers({ children }: { children: ReactNode }) {
   return <MuiThemeProvider>{children}</MuiThemeProvider>;

package/src/index.tsx

@@ -5,12 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

package/src/store/activeStore.ts

@@ -1,4 +1,4 @@
-import { Store } from "pullstate";
+import { Store } from 'pullstate';
 
 export const activeStore = new Store({
   active: 0,