@campxdev/react-blueprint 1.1.8 → 1.1.9

package/src/components/Layout/AppHeader/AppHeaderActions/SwitchInstitution.tsx

@@ -1,20 +1,20 @@
-import { Box, Stack, TextField, Typography, styled } from "@mui/material";
-import Cookies from "js-cookie";
-import { useState } from "react";
-import { isDevelopment } from "../../../../utils/constants";
-import Image from "../../../Image/Image";
+import { Box, Stack, TextField, Typography, styled } from '@mui/material';
+import Cookies from 'js-cookie';
+import { useState } from 'react';
+import { isDevelopment } from '../../../../utils/constants';
+import Image from '../../../Image/Image';
 
 const SwitchInstitution = ({ close, institutions }: any) => {
-  const [searchText, setSearchText] = useState<string>("");
+  const [searchText, setSearchText] = useState<string>('');
 
   const filteredInstitutions = institutions?.filter((item: any) =>
-    item.name.toLowerCase().includes(searchText.toLowerCase())
+    item.name.toLowerCase().includes(searchText.toLowerCase()),
   );
 
   return (
-    <Box sx={{ padding: "20px" }}>
+    <Box sx={{ padding: '20px' }}>
       <Stack>
-        <Typography variant="subtitle3" textAlign={"center"}>
+        <Typography variant="subtitle3" textAlign={'center'}>
           Select an Institution
         </Typography>
 
@@ -23,8 +23,8 @@ const SwitchInstitution = ({ close, institutions }: any) => {
           variant="outlined"
           value={searchText}
           sx={{
-            display: "flex",
-            alignItems: "center",
+            display: 'flex',
+            alignItems: 'center',
           }}
           fullWidth
           onChange={(e) => setSearchText(e.target.value)}
@@ -42,7 +42,7 @@ const SwitchInstitution = ({ close, institutions }: any) => {
 const InstitutionCard = ({ institution }: any) => {
   const handleClick = () => {
     if (isDevelopment) {
-      Cookies.set("campx_institution", institution?.code);
+      Cookies.set('campx_institution', institution?.code);
     } else {
     }
 
@@ -53,7 +53,7 @@ const InstitutionCard = ({ institution }: any) => {
     <StyledInstitutionCard onClick={handleClick}>
       <Image
         alt="logo"
-        height={"100px"}
+        height={'100px'}
         width="100%"
         src={institution?.imageSquare?.url}
       />
@@ -63,36 +63,36 @@ const InstitutionCard = ({ institution }: any) => {
 };
 
 const StyledInstitutionCard = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  gap: "20px",
-  padding: "14px",
-  border: "1px solid black",
-  borderRadius: "10px",
-  cursor: "pointer",
-  width: "200px",
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '20px',
+  padding: '14px',
+  border: '1px solid black',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  width: '200px',
   flexShrink: 0,
 }));
 
 export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
-  marginTop: "20px",
-  display: "flex",
-  justifyContent: "center",
-  padding: "20px",
-  flexWrap: "wrap",
-  gap: "20px",
-  "&::-webkit-scrollbar": {
-    width: "0.5em",
-    height: "0.5em",
-    backgroundColor: "rgba(0, 0, 0, 0.1)",
+  marginTop: '20px',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '20px',
+  flexWrap: 'wrap',
+  gap: '20px',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
   },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: "3px",
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    borderRadius: '3px',
 
-    "&:hover": {
-      background: "rgba(0, 0, 0, 0.3)",
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.3)',
     },
   },
 }));

package/src/components/Layout/AppHeader/AppHeaderActions/UserBox.tsx

@@ -1,24 +1,24 @@
-import { Avatar, Box, Stack, Typography, useTheme } from "@mui/material";
-import { ReactNode } from "react";
-import logout from "../../../../utils/logout";
-import DialogButton from "../../../Navigation/DialogButton/DialogButton";
-import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
-import { StyledMenuItem } from "../../../Navigation/DropDownMenu/styles";
-import { Icons } from "../../../export";
-import SwitchInstitution from "./SwitchInstitution";
+import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
+import { ReactNode } from 'react';
+import logout from '../../../../utils/logout';
+import DialogButton from '../../../Navigation/DialogButton/DialogButton';
+import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
+import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
+import { StyledMenuItem } from '../../../Navigation/DropDownMenu/styles';
+import { Icons } from '../../../export';
+import SwitchInstitution from './SwitchInstitution';
 
 const getStartingLetters = (text: string) => {
-  if (!text) return "";
+  if (!text) return '';
   return text
-    .split(" ")
+    .split(' ')
     ?.map((w) => w[0])
-    ?.join("");
+    ?.join('');
 };
 
 export default function UserBox({
   fullName,
-  designation = "",
+  designation = '',
   actions,
   profileUrl,
   profileSx = {},
@@ -48,32 +48,32 @@ export default function UserBox({
     <>
       <DropdownMenu
         anchor={({ open }) => (
-          <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+          <Avatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
             {getStartingLetters(fullName)}
           </Avatar>
         )}
         menuListProps={{
           sx: {
-            width: "300px",
-            borderRadius: "5px",
+            width: '300px',
+            borderRadius: '5px',
           },
         }}
         menu={[
           <DropdownMenuItem
             label={
-              <Stack gap={0.5} sx={{ width: "100%" }}>
+              <Stack gap={0.5} sx={{ width: '100%' }}>
                 <Typography variant="subtitle3">Account</Typography>
                 <Stack
-                  direction={"row"}
-                  alignItems={"center"}
-                  justifyContent={"space-between"}
+                  direction={'row'}
+                  alignItems={'center'}
+                  justifyContent={'space-between'}
                 >
                   {avatar && (
-                    <Stack direction={"row"} gap={1}>
-                      <Avatar src={profileUrl ?? ""} sx={profileSx}>
+                    <Stack direction={'row'} gap={1}>
+                      <Avatar src={profileUrl ?? ''} sx={profileSx}>
                         {getStartingLetters(fullName)}
                       </Avatar>
-                      <Stack direction={"row"} justifyContent={"space-between"}>
+                      <Stack direction={'row'} justifyContent={'space-between'}>
                         <Stack>
                           <Typography variant="subtitle3">
                             {fullName}
@@ -89,7 +89,7 @@ export default function UserBox({
                 </Stack>
               </Stack>
             }
-            onClick={() => console.log("Action 1 clicked")}
+            onClick={() => console.log('Action 1 clicked')}
           />,
           showActiveDevices && (
             <DropdownMenuItem
@@ -98,7 +98,7 @@ export default function UserBox({
                   <Typography variant="subtitle3">Active Devices</Typography>
                 </Stack>
               }
-              onClick={() => alert("Action 1 clicked")}
+              onClick={() => alert('Action 1 clicked')}
             />
           ),
           <Box>
@@ -126,9 +126,9 @@ export default function UserBox({
             label={
               <Stack
                 gap={0.5}
-                direction={"row"}
-                justifyContent={"space-between"}
-                width={"100%"}
+                direction={'row'}
+                justifyContent={'space-between'}
+                width={'100%'}
               >
                 <Typography variant="subtitle3">Logout</Typography>
                 <Icons.LogoutIcon

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -1,39 +1,39 @@
-import { Box, styled } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Box, styled } from '@mui/material';
+import { Link } from 'react-router-dom';
 
-export const StyledHeader = styled("header")(
+export const StyledHeader = styled('header')(
   ({ theme }: { theme?: any; collapsed: boolean }) => ({
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    height: "60px",
-    minHeight: "60px",
-    width: "100%",
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: '60px',
+    minHeight: '60px',
+    width: '100%',
     backgroundColor: theme.palette.background.paper,
-    justifyContent: "space-between",
-    padding: "0 32px",
-    borderRadius: "8px",
-  })
+    justifyContent: 'space-between',
+    padding: '0 32px',
+    borderRadius: '8px',
+  }),
 );
 
 export const StyledActionBox = styled(Box)(({ theme }) => ({
-  marginRight: "20px",
-  display: "flex",
-  alignItems: "center",
-  gap: "14px",
+  marginRight: '20px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '14px',
 }));
 
 export const StyledRouterLink = styled(Link)(() => ({
-  textDecoration: "none",
+  textDecoration: 'none',
 }));
 
 export const StyledImageWrapper = styled(Box)(() => ({
-  width: "auto",
-  height: "22px",
-  display: "flex",
+  width: 'auto',
+  height: '22px',
+  display: 'flex',
   img: {
-    width: "100%",
-    height: "25px",
-    objectFit: "contain",
+    width: '100%',
+    height: '25px',
+    objectFit: 'contain',
   },
 }));

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -1,6 +1,5 @@
 import { Box, styled, Typography } from '@mui/material';
 import { ReactNode } from 'react';
-import { Breadcrumbs } from '../../Navigation/Breadcrumbs/Breadcrumbs';
 
 interface BreadCrumbsLink {
   name: string | ReactNode;
@@ -35,9 +34,15 @@ export default function PageHeader({ title, actions, links }: PageHeaderProps) {
     <StyledBox>
       <>
         {links && links.length > 0 ? (
-          <Breadcrumbs links={links} />
+          <></>
         ) : (
-          <>{typeof title === 'string' ? <Typography variant="subtitle2">{title}</Typography> : title}</>
+          <>
+            {typeof title === 'string' ? (
+              <Typography variant="subtitle2">{title}</Typography>
+            ) : (
+              title
+            )}
+          </>
         )}
       </>
       <Box className="actions">{actions}</Box>

package/src/components/Layout/TabsLayout/Tabs.tsx

@@ -1,5 +1,5 @@
-import { Box, Divider, styled } from "@mui/material";
-import { NavLink } from "react-router-dom";
+import { Box, Divider, styled } from '@mui/material';
+import { NavLink } from 'react-router-dom';
 
 interface TabProps {
   index: number;
@@ -24,8 +24,8 @@ export const Tab = ({
     <Box
       key={index}
       sx={{
-        display: "flex",
-        alignItems: "center",
+        display: 'flex',
+        alignItems: 'center',
       }}
       onClick={() => handleTabChange(index)}
     >
@@ -40,27 +40,27 @@ export const Tab = ({
 };
 
 const StyledNavLink = styled(NavLink)(({ theme }) => ({
-  width: "204px",
-  padding: "12px 26px",
-  textAlign: "center",
-  textDecoration: "none",
+  width: '204px',
+  padding: '12px 26px',
+  textAlign: 'center',
+  textDecoration: 'none',
   fontWeight: 400,
   color: theme.palette.text.secondary,
-  borderTopRightRadius: "12px",
-  borderTopLeftRadius: "12px",
+  borderTopRightRadius: '12px',
+  borderTopLeftRadius: '12px',
   backgroundColor: theme.palette.surface.defaultBackground,
-  position: "relative",
+  position: 'relative',
 
-  "&.active": {
+  '&.active': {
     fontWeight: 600,
     color: theme.palette.text.primary,
     backgroundColor: theme.palette.surface.paperBackground,
-    "&::after": {
+    '&::after': {
       content: '""',
-      position: "absolute",
+      position: 'absolute',
       bottom: 0,
-      left: "25%",
-      width: "50%",
+      left: '25%',
+      width: '50%',
       borderBottom: `4px solid ${theme.palette.tertiary.main}`,
     },
   },

package/src/components/Layout/TabsLayout/TabsLayout.tsx

@@ -1,8 +1,8 @@
-import { Box, Stack, useTheme } from "@mui/material";
-import { useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { Outlet } from "react-router-dom";
-import { Tab } from "./Tabs";
+import { Box, Stack, useTheme } from '@mui/material';
+import { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Outlet } from 'react-router-dom';
+import { Tab } from './Tabs';
 
 interface TabsLayoutProps {
   menu: MenuItem[];
@@ -24,7 +24,7 @@ export const TabsLayout = ({ menu }: TabsLayoutProps) => {
   return (
     <Stack>
       <Stack
-        direction={"row"}
+        direction={'row'}
         sx={{
           backgroundColor: theme.palette.surface.defaultBackground,
         }}

package/src/components/Layout/export.ts

@@ -0,0 +1,4 @@
+import { AppHeader } from './AppHeader/AppHeader';
+import { TabsLayout } from './TabsLayout/TabsLayout';
+
+export { AppHeader, TabsLayout };

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

@@ -1,40 +1,52 @@
+import { getBreadcrumbsCharacter } from '@campxdev/campx-web-utils';
 import {
-  Link,
   Breadcrumbs as MuiBreadcrumbs,
+  BreadcrumbsProps as MuiBreadcrumbsProps,
   Stack,
   styled,
-} from "@mui/material";
-import { ReactNode } from "react";
-import { Typography } from "../../DataDisplay/Typography/Typography";
+} from '@mui/material';
+import { Link } from 'react-router-dom';
+import { Typography } from '../../export';
 
-interface BreadcrumbsProps {
-  links: {
-    name: string | ReactNode;
-    to: string;
-  }[];
-}
+export type BreadcrumbsProps = {
+  urlSpliceCount: number;
+} & MuiBreadcrumbsProps;
 
-export const Breadcrumbs = ({ links }: BreadcrumbsProps) => {
-  const linksArray = links?.slice(0, -1);
-  const currentPage = links?.slice(-1)[0];
+export const Breadcrumbs = ({ urlSpliceCount, ...rest }: BreadcrumbsProps) => {
+  const specialCharacter = getBreadcrumbsCharacter();
+  const currentPathArray = window.location.pathname.split('/');
+
+  let basePath =
+    window.location.origin +
+    currentPathArray.slice(0, urlSpliceCount + 1).join('/');
+
+  currentPathArray.splice(0, urlSpliceCount + 1);
 
   return (
-    <Stack direction={"row"} alignItems={"center"}>
-      <MuiBreadcrumbs>
-        {linksArray?.map((item, index) => (
-          <StyledLink key={index} href={item?.to}>
-            {item?.name}
-          </StyledLink>
-        ))}
-        <Typography variant="subtitle2">{currentPage?.name}</Typography>
+    <Stack direction={'row'} alignItems={'center'}>
+      <MuiBreadcrumbs {...rest}>
+        {currentPathArray?.map((item, index) => {
+          basePath = basePath + `/${item}`;
+          return index === currentPathArray.length - 1 ? (
+            <Typography variant="subtitle2">
+              {decodeURIComponent(item).split(specialCharacter)[0]}
+            </Typography>
+          ) : (
+            <StyledLink key={index} to={basePath}>
+              {decodeURIComponent(item).split(specialCharacter)[0]}
+            </StyledLink>
+          );
+        })}
       </MuiBreadcrumbs>
     </Stack>
   );
 };
 
 const StyledLink = styled(Link)(({ theme }) => ({
-  transition: "color 0.3s ease-in-out",
-  "&:hover": {
+  textDecoration: 'none',
+  transition: 'color 0.3s ease-in-out',
+  color: theme.palette.text.tertiary,
+  '&:hover': {
     color: theme.palette.primary.light,
   },
 }));

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

@@ -1,7 +1,6 @@
-import { Box, Dialog, DialogActions, styled } from '@mui/material';
-
+import { Box, Stack } from '@mui/material';
 import { AnimatedGifs } from '../../../assets/images/gif';
-import { Button, Typography } from '../../export';
+import { Button, Dialog, Typography } from '../../export';
 
 export type ConfirmDialogType = 'confirm' | 'delete';
 
@@ -14,19 +13,6 @@ export type ConfirmDialogProps = {
   type: ConfirmDialogType;
 };
 
-const StyledDialogContent = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiPaper-root': {
-    padding: '24px 16px',
-    display: 'flex',
-    height: '175px',
-  },
-}));
-
 export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   isOpen,
   title,
@@ -38,42 +24,51 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   if (!isOpen) return null;
 
   return (
-    <StyledDialog
+    <Dialog
       keepMounted
       maxWidth="sm"
       transitionDuration={150}
       open={isOpen}
+      content={({ close }) => {
+        return (
+          <>
+            <Stack direction="row" alignItems="center">
+              <img
+                src={
+                  type === 'delete'
+                    ? AnimatedGifs.DeleteConfirmationAlert
+                    : AnimatedGifs.ConfirmationAlert
+                }
+                alt="Animated GIF"
+                style={{ width: '80px' }}
+              />
+              <Box>
+                <Typography variant="subtitle2">{title}</Typography>
+                <Typography variant="label1">{message}</Typography>
+              </Box>
+            </Stack>
+            <Stack direction="row" justifyContent="flex-end" gap={3}>
+              <Button
+                onClick={() => {
+                  onCancel();
+                  close();
+                }}
+                variant="text"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={onConfirm}
+                variant="contained"
+                color={type === 'delete' ? 'error' : 'primary'}
+              >
+                {type === 'delete' ? 'Confirm Delete' : 'Confirm'}
+              </Button>
+            </Stack>
+          </>
+        );
+      }}
       onClose={onCancel}
-    >
-      <StyledDialogContent>
-        <Box>
-          <img
-            src={
-              type === 'delete'
-                ? AnimatedGifs.DeleteConfirmationAlert
-                : AnimatedGifs.ConfirmationAlert
-            }
-            alt="Animated GIF"
-            style={{ width: '80px' }}
-          />
-        </Box>
-        <Box>
-          <Typography variant="subtitle2">{title}</Typography>
-          <Typography variant="label1">{message}</Typography>
-        </Box>
-      </StyledDialogContent>
-      <DialogActions sx={{ gap: '16px' }}>
-        <Button onClick={onCancel} variant="text">
-          Cancel
-        </Button>
-        <Button
-          onClick={onConfirm}
-          variant="contained"
-          color={type === 'delete' ? 'error' : 'primary'}
-        >
-          {type === 'delete' ? 'Confirm Delete' : 'Confirm'}
-        </Button>
-      </DialogActions>
-    </StyledDialog>
+    />
   );
 };

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -0,0 +1,33 @@
+import {
+  DialogContent,
+  DialogTitle,
+  Dialog as MuiDialog,
+  DialogProps as MuiDialogProps,
+} from '@mui/material';
+import { ReactNode } from 'react';
+export type DialogProps = {
+  content: (props: { close: () => void }) => ReactNode;
+  title?: string | undefined;
+  onClose: () => void;
+} & Omit<MuiDialogProps, 'content'>;
+
+export const Dialog = ({
+  onClose,
+  title,
+  content,
+  open,
+  ...props
+}: DialogProps) => {
+  return (
+    <MuiDialog
+      open={open}
+      onClose={(_, reason) => {
+        onClose();
+      }}
+      {...props}
+    >
+      {title && <DialogTitle>{title}</DialogTitle>}
+      <DialogContent> {content({ close: onClose })}</DialogContent>
+    </MuiDialog>
+  );
+};