@campxdev/react-blueprint 1.2.4 → 1.2.6

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -16,7 +16,7 @@ export interface SidePanelProps {
   imageUrl?: string;
   imageWidth?: string;
   imageHeight?: string;
-  title?: string;
+  title?: ReactNode;
 }
 interface variablesProps {
   data?: { label: string; value: string }[];

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -6,7 +6,7 @@ export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
   padding: '12px',
   borderRadius: '8px',
   gap: '12px',
-  margin: '20px',
+  margin: '12px',
 }));
 
 export const StyledValueContainer = styled(Box)(({ theme }) => ({

package/src/components/Input/SingleCheckBox/SIngleCheckBox.tsx

@@ -1,5 +1,6 @@
 import {
   FormControlLabel,
+  FormControlLabelProps,
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   useTheme,
@@ -9,7 +10,10 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Icons } from '../../export';
 
 export type CheckboxProps = {
+  checkedIcon?: ReactNode;
+  icon?: ReactNode;
   label: ReactNode;
+  formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
 } & MuiCheckboxProps;
 
 export const SingleCheckBox = ({
@@ -17,6 +21,9 @@ export const SingleCheckBox = ({
   label,
   onChange,
   required,
+  checkedIcon = <Icons.CheckedCheckboxIcon />,
+  icon = <Icons.UnCheckedCheckboxIcon />,
+  formControlLabelProps,
   ...rest
 }: CheckboxProps) => {
   const theme = useTheme();
@@ -25,8 +32,8 @@ export const SingleCheckBox = ({
       control={
         <MuiCheckbox
           checked={checked}
-          checkedIcon={<Icons.CheckedCheckboxIcon />}
-          icon={<Icons.UnCheckedCheckboxIcon />}
+          checkedIcon={checkedIcon}
+          icon={icon}
           onChange={onChange}
           {...rest}
         />
@@ -41,6 +48,7 @@ export const SingleCheckBox = ({
           )}
         </Typography>
       }
+      {...formControlLabelProps}
     />
   );
 };

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

@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { Typography } from '../../export';
 
 export type BreadcrumbsProps = {
-  urlSpliceCount: number;
+  pathTrimCount: number;
 } & MuiBreadcrumbsProps;
 
 const getBreadcrumbsCharacter = () => {
@@ -25,15 +25,15 @@ const getBreadcrumbsCharacter = () => {
   return s;
 };
 
-export const Breadcrumbs = ({ urlSpliceCount, ...rest }: BreadcrumbsProps) => {
+export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
   const currentPathArray = window.location.pathname.split('/');
 
   let basePath =
     window.location.origin +
-    currentPathArray.slice(0, urlSpliceCount + 1).join('/');
+    currentPathArray.slice(0, pathTrimCount + 1).join('/');
 
-  currentPathArray.splice(0, urlSpliceCount + 1);
+  currentPathArray.splice(0, pathTrimCount + 1);
 
   return (
     <Stack direction={'row'} alignItems={'center'}>

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

@@ -1,21 +1,34 @@
-import { Divider, Menu, MenuListProps, MenuProps } from '@mui/material';
+import {
+  Divider,
+  Menu,
+  MenuListProps,
+  MenuProps,
+  Stack,
+  StackProps,
+  useTheme,
+} from '@mui/material';
 import { Fragment, ReactNode, useState } from 'react';
 
 export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
-  menu: ReactNode[];
+  menu: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
   menuProps?: Omit<MenuProps, 'open'>;
   menuListProps?: MenuListProps;
+  menuListContainerSx?: StackProps['sx'];
+  menuHeader?: ReactNode;
 };
 
 export const DropdownMenu = ({
   menuProps,
   menu = [],
   menuListProps,
+  menuHeader,
+  menuListContainerSx,
   anchor,
 }: DropdownMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
+  const theme = useTheme();
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget);
@@ -27,6 +40,9 @@ export const DropdownMenu = ({
     setOpen(false);
   };
 
+  const menuItems =
+    typeof menu === 'function' ? menu({ close: handleClose }) : menu;
+
   return (
     <>
       {anchor({ open: handleClick })}
@@ -52,12 +68,29 @@ export const DropdownMenu = ({
         }}
         {...menuProps}
       >
-        {menu.map((item, index) => (
-          <Fragment key={index}>
-            {item}
-            <Divider flexItem sx={{ margin: '0 !important' }} />
-          </Fragment>
-        ))}
+        {menuHeader}
+        <Stack
+          direction={'column'}
+          sx={{
+            ...menuListContainerSx,
+            '&::-webkit-scrollbar': {
+              width: '0.5em',
+              height: '0.5em',
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: theme.palette.surface.paperBackground,
+              borderRadius: '3px',
+            },
+            padding: '2px',
+          }}
+        >
+          {menuItems.map((item, index) => (
+            <Fragment key={index}>
+              {item}
+              <Divider flexItem sx={{ margin: '0 !important' }} />
+            </Fragment>
+          ))}
+        </Stack>
       </Menu>
     </>
   );

package/src/components/Navigation/ManageFilters/ManageFilters.tsx

@@ -0,0 +1,112 @@
+import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
+import { ReactNode, useState } from 'react';
+import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
+import { DropdownMenu } from '../export';
+
+type Options = {
+  label: string;
+  value: ReactNode;
+};
+
+export type ManageFiltersProps = {
+  options: Options[];
+  onChange: (values: ReactNode[]) => void;
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+};
+
+export const ManageFilters = ({
+  options,
+  onChange,
+  ...props
+}: ManageFiltersProps) => {
+  const [values, setValues] = useState<Options[]>([]);
+  const [search, setSearch] = useState<string>('');
+  const theme = useTheme();
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  const handleCheckboxChange = (
+    value: ReactNode,
+    label: string,
+    checked: boolean,
+  ) => {
+    const updatedValues = checked
+      ? [...values, { label, value }]
+      : values.filter((v) => v.label !== label);
+    setValues(updatedValues);
+    onChange(updatedValues.map((v) => v.value));
+  };
+
+  return (
+    <DropdownMenu
+      menuListProps={{
+        sx: {
+          padding: '12px',
+          width: '250px',
+        },
+        ...props.menuListProps,
+      }}
+      anchor={({ open }: { open: (e: any) => void }) => (
+        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
+          {<Icons.ConfigureIcon />} Manage Filters
+        </Button>
+      )}
+      menuProps={{ ...props.menuProps }}
+      menuHeader={
+        <SearchBar
+          fullWidth
+          size="small"
+          placeholder="Search"
+          onSearch={(value) => {
+            setSearch(value);
+          }}
+        />
+      }
+      menuListContainerSx={{
+        margin: '10px 2px 0px 2px',
+        gap: 1,
+        maxHeight: '350px',
+        overflow: 'scroll',
+      }}
+      menu={filteredOptions.map((item, index) => (
+        <SingleCheckBox
+          key={index}
+          checked={values.map((s) => s.label).includes(item.label)}
+          label={<Typography variant="subtitle3">{item.label}</Typography>}
+          onChange={(e) => {
+            handleCheckboxChange(item.value, item.label, e.target.checked);
+          }}
+        />
+      ))}
+    />
+  );
+};
+
+// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
+//   height: '40px',
+//   width: '40px',
+//   backgroundColor: theme.palette.secondary.main,
+//   borderRadius: '5px',
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+// }));
+
+/* <DropDownIcon
+  icon={{
+    icon: (
+      <Badge
+        overlap="circular"
+        variant={values.length > 0 ? 'dot' : 'standard'}
+      >
+        <FilterAnchorContainer>
+          <FilterViewIcon />
+        </FilterAnchorContainer>
+      </Badge>
+    ),
+  }}
+  handleClick={open}
+/>; */

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

@@ -1,5 +1,6 @@
 import { Box, Stack } from '@mui/material';
 import { useMemo } from 'react';
+import { LeftIcon } from '../../Assets/Icons/IconComponents/LeftIcon';
 import { Icons, Tooltip, Typography } from '../../export';
 import {
   DefaultButtonProps,
@@ -9,9 +10,22 @@ import {
 } from './interfaces';
 import { createSidebarStyles } from './styles';
 
-export const TooltipIcon = ({ name, icon }: TooltipIconProps) => {
+export const TooltipIcon = ({
+  name,
+  icon,
+  collapsed,
+  setCollapsed,
+}: TooltipIconProps) => {
+  const handleClick = () => {
+    if (collapsed && setCollapsed) {
+      setCollapsed(!collapsed);
+    }
+  };
   return (
-    <Tooltip title={<Typography variant="label2">{name}</Typography>}>
+    <Tooltip
+      title={<Typography variant="label2">{name}</Typography>}
+      onClick={() => handleClick()}
+    >
       {icon}
     </Tooltip>
   );
@@ -57,9 +71,11 @@ export const InternalMenuButton = ({
           <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
           <Typography variant="button1">{name}</Typography>
         </Stack>
+        {/* 
         <HoverIcon display={'flex'} className="hoverIcon">
           <Icons.RedoIcon size={18} />
         </HoverIcon>
+         */}
       </Stack>
     </StyledListItemButton>
   );
@@ -95,3 +111,25 @@ export const SubMenuButton = ({
     </StyledListItemButton>
   );
 };
+
+export const CollapseMenuButton = ({ collapsed }: { collapsed: boolean }) => {
+  const { StyledListItemIcon } = useMemo(
+    () => createSidebarStyles(collapsed),
+    [collapsed],
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <StyledListItemIcon collapsed={collapsed}>
+        <LeftIcon size={32} />
+      </StyledListItemIcon>
+      <Typography variant="button1">Collapse Menu</Typography>
+    </Box>
+  );
+};

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

@@ -16,12 +16,14 @@ import { SidebarSubMenuItem } from './SubMenuItem';
 export const SideBarMenuItem = ({
   index,
   collapsed,
+  setCollapsed,
   menuItem,
   currentMenuPath,
   internalMenuClickHandler,
 }: {
   index: number;
   collapsed: boolean;
+  setCollapsed: any;
   currentMenuPath: string | null;
   menuItem: SideMenuItemProps;
   internalMenuClickHandler: (params: InternalMenuClickHandlerProps) => void;
@@ -33,12 +35,12 @@ export const SideBarMenuItem = ({
   let resolved = useResolvedPath(newPath);
   let match = useMatch({ path: resolved.pathname, end: false });
 
-  let [expanded, setExpanded] = useState(false);
+  let [expanded, setExpanded] = useState(!collapsed && !!match);
   const subMenuButtonClickHandler = () => {
     setExpanded(!expanded);
   };
 
-  const { StyledListItem, StyledLinkButton, StyledSubMenuButton } = useMemo(
+  const { StyledListItem, StyledLinkButton, StyledSubMenuBox } = useMemo(
     () => createSidebarStyles(collapsed),
     [collapsed],
   );
@@ -52,7 +54,7 @@ export const SideBarMenuItem = ({
     >
       {internalMenu && internalMenu.length > 0 && (
         <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuButton
+          <StyledSubMenuBox
             match={match}
             onClick={() =>
               internalMenuClickHandler({
@@ -63,7 +65,12 @@ export const SideBarMenuItem = ({
             }
           >
             {collapsed ? (
-              <TooltipIcon name={name} icon={Icon} />
+              <TooltipIcon
+                name={name}
+                icon={Icon}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+              />
             ) : (
               <InternalMenuButton
                 name={name}
@@ -71,17 +78,22 @@ export const SideBarMenuItem = ({
                 collapsed={collapsed}
               />
             )}
-          </StyledSubMenuButton>
+          </StyledSubMenuBox>
         </StyledListItem>
       )}
       {subMenu && subMenu.length > 0 && (
         <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuButton
-            match={match}
+          <StyledSubMenuBox
+            match={match && collapsed}
             onClick={() => subMenuButtonClickHandler()}
           >
             {collapsed ? (
-              <TooltipIcon name={name} icon={Icon} />
+              <TooltipIcon
+                name={name}
+                icon={Icon}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+              />
             ) : (
               <SubMenuButton
                 name={name}
@@ -90,7 +102,7 @@ export const SideBarMenuItem = ({
                 collapsed={collapsed}
               />
             )}
-          </StyledSubMenuButton>
+          </StyledSubMenuBox>
         </StyledListItem>
       )}
       {expanded && !collapsed && subMenu && subMenu.length > 0 && (

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

@@ -1,11 +1,12 @@
+import { Box } from '@mui/material';
 import { motion } from 'framer-motion';
 import { ReactElement, useEffect, useMemo, useState } from 'react';
 import { CampxFullLogoIcon } from '../../Assets/Icons/IconComponents/CampxFullLogoIcon';
 import { CampxIcon } from '../../Assets/Icons/IconComponents/CampxIcon';
-import { LeftIcon } from '../../Assets/Icons/IconComponents/LeftIcon';
 import { RightIcon } from '../../Assets/Icons/IconComponents/RightIcon';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Icons } from '../../export';
+import { CollapseMenuButton } from './Components';
 import { SideBarMenuItem } from './MenuItem';
 import {
   GetActiveMenuProps,
@@ -13,7 +14,6 @@ import {
   MenuState,
 } from './interfaces';
 import { createSidebarStyles } from './styles';
-import { Box } from '@mui/material';
 
 export const Sidebar = ({
   menu,
@@ -67,6 +67,7 @@ export const Sidebar = ({
     const prev = history && history.length > 0 && history.pop();
 
     if (prev && prev.menu) {
+      setCollapsed(false);
       setCurrentMenuState({
         menu: prev.menu,
         title: prev.title,
@@ -149,6 +150,7 @@ export const Sidebar = ({
     StyledMenuBar,
     StyledCollapsibleSection,
     StyledMenuHeaderButton,
+    StyledListItemIcon,
   } = useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
 
   return (
@@ -183,27 +185,34 @@ export const Sidebar = ({
           }}
         >
           <StyledMenuBar>
-            {!collapsed && currentMenuState.title && (
+            {currentMenuState.title && (
               <StyledMenuHeaderButton
                 direction="row"
+                justifyContent={collapsed ? 'center' : 'flex-start'}
                 onClick={() => previousMenuClickHandler()}
               >
-                <Icons.ArrowBackIcon size={20} />
-
-                <Typography variant="button1">
-                  {currentMenuState.title}
-                </Typography>
+                {collapsed ? (
+                  <Icons.ArrowBackIcon size={20} />
+                ) : (
+                  <>
+                    <Icons.ArrowBackIcon size={20} />
+                    <Typography variant="button1">
+                      {currentMenuState.title}
+                    </Typography>
+                  </>
+                )}
               </StyledMenuHeaderButton>
             )}
             {currentMenuState.menu &&
               currentMenuState.menu.length > 0 &&
               currentMenuState.menu?.map((item: any, index: number) => (
                 <SideBarMenuItem
-                  currentMenuPath={currentMenuState.path}
-                  menuItem={item}
-                  index={index}
                   key={index}
+                  index={index}
                   collapsed={collapsed}
+                  setCollapsed={setCollapsed}
+                  menuItem={item}
+                  currentMenuPath={currentMenuState.path}
                   internalMenuClickHandler={internalMenuClickHandler}
                 />
               ))}
@@ -212,8 +221,13 @@ export const Sidebar = ({
         <StyledCollapsibleSection
           className="collapsibleSection"
           onClick={toggleSidebar}
+          collapsed={collapsed}
         >
-          {collapsed ? <RightIcon size={32} /> : <LeftIcon size={32} />}
+          {collapsed ? (
+            <RightIcon size={32} />
+          ) : (
+            <CollapseMenuButton collapsed={collapsed} />
+          )}
         </StyledCollapsibleSection>
       </StyledSidebarContainer>
     </motion.div>

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

@@ -25,7 +25,11 @@ export const SidebarSubMenuItem = ({
 
   return (
     <StyledListItem key={index} disablePadding className="listItem">
-      <StyledLinkButton to={newPath} match={match}>
+      <StyledLinkButton
+        to={newPath}
+        match={match}
+        sx={{ margin: '5px 8px 5px 36px' }}
+      >
         <StyledListItemButton collapsed={collapsed}>
           <Typography variant="button1">{name}</Typography>
         </StyledListItemButton>

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -22,6 +22,8 @@ export interface InternalMenuClickHandlerProps {
 export interface TooltipIconProps {
   name: string;
   icon: ReactElement;
+  collapsed?: boolean;
+  setCollapsed?: any;
 }
 
 export interface InternalMenuButtonProps {

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

@@ -1,7 +1,5 @@
 import {
   Box,
-  Button,
-  IconButton,
   ListItem,
   ListItemButton,
   ListItemIcon,
@@ -24,8 +22,8 @@ export const createSidebarStyles = (collapsed: boolean) => {
     ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center',
-      padding: collapsed ? '0px' : '12px 36px',
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      padding: collapsed ? '0px' : '19px 16px',
       backgroundColor: theme.palette.surface.paperBackground,
       height: '60px',
       borderRadius: '8px',
@@ -38,14 +36,17 @@ export const createSidebarStyles = (collapsed: boolean) => {
     backgroundColor: theme.palette.surface.paperBackground,
   }));
 
-  const StyledCollapsibleSection = styled(IconButton)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '8px',
-    backgroundColor: theme.palette.surface.paperBackground,
-    height: '60px',
-  }));
+  const StyledCollapsibleSection = styled(Box)<StyledListItemButtonProps>(
+    ({ theme, collapsed }) => ({
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: collapsed ? 'center' : 'flex-start',
+      padding: '19px 8px',
+      borderRadius: '8px',
+      backgroundColor: theme.palette.surface.paperBackground,
+    }),
+  );
 
   interface StyledLinkButtonProps {
     match: any;
@@ -65,7 +66,6 @@ export const createSidebarStyles = (collapsed: boolean) => {
       textDecoration: 'none',
       display: 'flex',
       margin: collapsed ? '5px 0px 0px 0px' : '5px 8px',
-
       backgroundColor: match ? theme.palette.secondary.main : 'none',
       justifyContent: 'center',
       '&:hover': {
@@ -94,8 +94,8 @@ export const createSidebarStyles = (collapsed: boolean) => {
     display: 'flex',
     alignItems: 'center',
     justifyContent: collapsed ? 'center' : 'flex-start',
-    paddingBottom: '5px',
-    paddingTop: '5px',
+    whiteSpace: 'nowrap',
+    padding: '5px 8px',
     width: '100%',
     borderRadius: '5px',
     '&:hover .hoverIcon': {
@@ -107,7 +107,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     display: 'none',
   }));
 
-  const StyledSubMenuButton = styled(Button)<StyledLinkButtonProps>(
+  const StyledSubMenuBox = styled(Box)<StyledLinkButtonProps>(
     ({ theme, match }) => ({
       width: collapsed ? 'auto' : '100%',
       textDecoration: 'none',
@@ -123,7 +123,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
   );
 
   const StyledMenuHeaderButton = styled(Stack)(({ theme }) => ({
-    alignItems: 'end',
+    alignItems: 'center',
     height: '50px',
     width: '100%',
     padding: '12px 16px',
@@ -141,7 +141,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     StyledLinkButton,
     StyledListItemButton,
     StyledListItemIcon,
-    StyledSubMenuButton,
+    StyledSubMenuBox,
     StyledMenuHeaderButton,
     HoverIcon,
   };