@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,274 +0,0 @@
-import {
-  Box,
-  Drawer,
-  IconButton,
-  Stack,
-  useMediaQuery,
-  useTheme,
-} 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 { HamburgerMenuIcon } from '../../Assets/Icons/IconComponents/HamburgerMenuIcon';
-import { RightIcon } from '../../Assets/Icons/IconComponents/RightIcon';
-import { CollapseMenuButton } from './Components';
-import {
-  GetActiveMenuProps,
-  InternalMenuClickHandlerProps,
-  MenuState,
-} from './interfaces';
-import { MenuBar } from './MenuBar';
-import { createSidebarStyles } from './styles';
-
-export const Sidebar = ({
-  menu,
-  collapsed,
-  setCollapsed,
-}: {
-  menu: SideMenuItemProps[];
-  collapsed: boolean;
-  setCollapsed: any;
-}) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
-  const [menuPosition, setMenuPosition] = useState(0);
-
-  const [currentMenuState, setCurrentMenuState] = useState<MenuState>({
-    menu: menu,
-    title: null,
-    path: null,
-  });
-  const [history, setHistory] = useState<MenuState[]>([]);
-
-  const toggleSidebar = () => {
-    setMenuPosition(0);
-    setCollapsed(!collapsed);
-  };
-
-  const toggleDrawer =
-    (open: boolean | ((prevState: boolean) => boolean)) => () => {
-      // setIsDrawerOpen(open);
-      setCollapsed(!collapsed);
-    };
-
-  const internalMenuClickHandler = ({
-    menuTitle,
-    menuPath,
-    internalMenu,
-  }: InternalMenuClickHandlerProps) => {
-    if (menuTitle && menuPath && internalMenu) {
-      setHistory((prev) => [
-        ...prev,
-        {
-          title: currentMenuState.title,
-          path: currentMenuState.path,
-          menu: currentMenuState.menu,
-        },
-      ]);
-
-      setCurrentMenuState({
-        title: menuTitle,
-        path: menuPath,
-        menu: internalMenu,
-      });
-
-      setMenuPosition(collapsed ? 60 : 250);
-    }
-  };
-
-  const previousMenuClickHandler = () => {
-    const prev = history && history.length > 0 && history.pop();
-
-    if (prev && prev.menu) {
-      setCollapsed(false);
-      setCurrentMenuState({
-        menu: prev.menu,
-        title: prev.title,
-        path: prev.path,
-      });
-      setHistory([...history]);
-      setMenuPosition(collapsed ? -60 : -250);
-    }
-  };
-
-  const getActiveMenu = ({
-    menu,
-    pathArray,
-    previousMenuState,
-  }: GetActiveMenuProps): MenuState => {
-    setHistory((prevHistory) => [
-      ...prevHistory,
-      {
-        title: previousMenuState?.title,
-        path: previousMenuState?.path,
-        menu: previousMenuState.menu,
-      },
-    ]);
-
-    const item = menu.find((item: any) => item.path === `/${pathArray[0]}`);
-
-    if (item) {
-      if (!item.menu) {
-        return previousMenuState;
-      } else if (pathArray.length > 1) {
-        return getActiveMenu({
-          menu: item.menu,
-          pathArray: pathArray.slice(1),
-          previousMenuState: {
-            title: item.name,
-            path: previousMenuState.path
-              ? previousMenuState.path + item.path
-              : item.path,
-            menu: item.menu,
-          },
-        });
-      } else {
-        return {
-          title: item.name,
-          path: previousMenuState.path
-            ? previousMenuState.path + item.path
-            : item.path,
-          menu: item.menu,
-        };
-      }
-    } else {
-      return previousMenuState;
-    }
-  };
-
-  useEffect(() => {
-    const currentPathArray = window.location.pathname.split('/');
-
-    if (currentPathArray.length > 2) {
-      currentPathArray.splice(0, 2);
-      currentPathArray.pop();
-    }
-
-    const activeMenu = getActiveMenu({
-      menu: currentMenuState.menu,
-      pathArray: currentPathArray,
-      previousMenuState: currentMenuState,
-    });
-
-    setCurrentMenuState({
-      title: activeMenu?.title,
-      path: activeMenu.path,
-      menu: activeMenu?.menu,
-    });
-  }, []);
-
-  const { StyledSidebarContainer, StyledLogoArea, StyledCollapsibleSection } =
-    useMemo(() => createSidebarStyles(collapsed), [collapsed, menuPosition]);
-
-  return (
-    <motion.div
-      animate={
-        !isSmallScreen ? { width: collapsed ? '60px' : '250px' } : undefined
-      }
-      transition={{ duration: 0.3, ease: 'circOut' }}
-      style={{
-        margin: isSmallScreen ? '12px 12px 0px 12px' : '12px',
-        height: isSmallScreen ? '100%' : 'calc(100vh - 24px)',
-      }}
-    >
-      <StyledSidebarContainer
-        spacing="12px"
-        direction="column"
-        className="sidebarContainer"
-      >
-        <Box>
-          <StyledLogoArea collapsed={collapsed}>
-            {isSmallScreen || collapsed ? (
-              <CampxIcon size={isSmallScreen ? 24 : 32} />
-            ) : (
-              <CampxFullLogoIcon />
-            )}
-          </StyledLogoArea>
-        </Box>
-
-        {isSmallScreen ? (
-          <Stack alignItems={'flex-start'}>
-            <IconButton
-              onClick={toggleDrawer(true)}
-              sx={{ padding: '8px 0px ' }}
-            >
-              <HamburgerMenuIcon />
-            </IconButton>
-
-            <Drawer
-              variant="temporary"
-              anchor="left"
-              open={!collapsed}
-              onClose={toggleDrawer(false)}
-              transitionDuration={300}
-              SlideProps={{
-                direction: 'right',
-                timeout: { enter: 500, exit: 500 },
-              }}
-            >
-              <MenuBar
-                currentMenuState={currentMenuState}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-                menuPosition={menuPosition}
-                internalMenuClickHandler={internalMenuClickHandler}
-                previousMenuClickHandler={previousMenuClickHandler}
-              />
-            </Drawer>
-          </Stack>
-        ) : (
-          <>
-            <motion.div
-              initial={{ x: menuPosition }}
-              animate={{ x: 0 }}
-              transition={{
-                duration: 0.3,
-                ease: menuPosition ? 'circOut' : 'circIn',
-              }}
-              style={{
-                height: '100%',
-              }}
-            >
-              <MenuBar
-                currentMenuState={currentMenuState}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-                menuPosition={menuPosition}
-                internalMenuClickHandler={internalMenuClickHandler}
-                previousMenuClickHandler={previousMenuClickHandler}
-              />
-            </motion.div>
-            <StyledCollapsibleSection
-              className="collapsibleSection"
-              onClick={toggleSidebar}
-              collapsed={collapsed}
-            >
-              {collapsed ? (
-                <RightIcon size={32} />
-              ) : (
-                <CollapseMenuButton collapsed={collapsed} />
-              )}
-            </StyledCollapsibleSection>
-          </>
-        )}
-      </StyledSidebarContainer>
-    </motion.div>
-  );
-};
-
-export interface SideMenuItemProps {
-  name: string;
-  path: string;
-  icon: ReactElement;
-  permissionKey?: string;
-  subMenu?: SubMenuItemProps[];
-  menu?: SideMenuItemProps[]; // internalMenu
-}
-
-export interface SubMenuItemProps {
-  name: string;
-  path: string;
-  permissionKey?: string;
-}

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

@@ -1,40 +0,0 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
-import { SubMenuItemProps, Typography } from '../../export';
-import { createSidebarStyles } from './styles';
-
-export const SidebarSubMenuItem = ({
-  index,
-  collapsed,
-  subMenuItem,
-  subMenuButtonPath,
-}: {
-  index: number;
-  collapsed: boolean;
-  subMenuItem: SubMenuItemProps;
-  subMenuButtonPath: string;
-}) => {
-  const { name, path } = subMenuItem;
-
-  const newPath = `${subMenuButtonPath}${path}`;
-
-  let resolved = useResolvedPath(newPath);
-  let match = useMatch({ path: resolved.pathname, end: false });
-  console.log(match);
-
-  const { StyledListItem, StyledLinkButton, StyledListItemButton } =
-    createSidebarStyles(collapsed);
-
-  return (
-    <StyledListItem key={index} disablePadding className="listItem">
-      <StyledLinkButton
-        to={newPath}
-        match={match}
-        sx={{ margin: '5px 8px 5px 36px' }}
-      >
-        <StyledListItemButton collapsed={collapsed}>
-          <Typography variant="button1">{name}</Typography>
-        </StyledListItemButton>
-      </StyledLinkButton>
-    </StyledListItem>
-  );
-};

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

@@ -1,46 +0,0 @@
-import { ReactElement } from 'react';
-import { SideMenuItemProps } from '../export';
-
-export interface MenuState {
-  menu: SideMenuItemProps[];
-  title: string | null;
-  path: string | null;
-}
-
-export interface GetActiveMenuProps {
-  menu: SideMenuItemProps[];
-  pathArray: string[];
-  previousMenuState: any;
-}
-
-export interface InternalMenuClickHandlerProps {
-  menuTitle: string;
-  menuPath: string;
-  internalMenu: SideMenuItemProps[];
-}
-
-export interface TooltipIconProps {
-  name: string;
-  icon: ReactElement;
-  collapsed?: boolean;
-  setCollapsed?: any;
-}
-
-export interface InternalMenuButtonProps {
-  name: string;
-  icon: ReactElement;
-  collapsed: boolean;
-}
-
-export interface DefaultButtonProps {
-  name: string;
-  icon: ReactElement;
-  collapsed: boolean;
-}
-
-export interface SubMenuButtonProps {
-  name: string;
-  icon: ReactElement;
-  expanded: boolean;
-  collapsed: boolean;
-}

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

@@ -1,179 +0,0 @@
-import {
-  Box,
-  ListItem,
-  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, {
-    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 }) => ({
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: collapsed ? '0px' : '19px 16px',
-      backgroundColor: theme.palette.surface.paperBackground,
-      height: '60px',
-      borderRadius: '8px',
-
-      [theme.breakpoints.down('md')]: {
-        height: '50px',
-        width: '50px',
-        minWidth: '0px',
-      },
-    }),
-  );
-
-  const StyledMenuBar = styled(Box)(({ theme }) => ({
-    height: '100%',
-    borderRadius: '8px',
-    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',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: theme.palette.border.primary,
-      borderRadius: '3px',
-
-      // "&:hover": {
-      //   backgroundColor: theme.palette.border.secondary,
-      // },
-    },
-  }));
-
-  const StyledCollapsibleSection = styled(Box)<StyledListItemButtonProps>(
-    ({ theme, collapsed }) => ({
-      cursor: 'pointer',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: '16px 8px',
-      borderRadius: '8px',
-      backgroundColor: theme.palette.surface.paperBackground,
-    }),
-  );
-
-  interface StyledLinkButtonProps {
-    match: any;
-  }
-
-  const StyledListItem = styled(ListItem)(({ theme }) => ({
-    // width: collapsed ? "min-content" : "auto",
-    // backgroundColor: match ? theme.palette.secondary.main : "none",
-    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',
-      backgroundColor: match ? theme.palette.secondary.main : 'none',
-      justifyContent: 'center',
-      '&:hover': {
-        color: 'unset',
-      },
-      borderRadius: '4px',
-    }),
-  );
-
-  const StyledListItemIcon = styled(ListItemIcon)(
-    ({ collapsed }: { collapsed: boolean }) => ({
-      display: 'flex',
-      justifyContent: 'center',
-      minWidth: '0px',
-      marginRight: '10px',
-    }),
-  );
-
-  interface StyledListItemButtonProps {
-    collapsed: boolean;
-  }
-
-  const StyledListItemButton = styled(
-    ListItemButton,
-  )<StyledListItemButtonProps>(({ collapsed }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: collapsed ? 'center' : 'flex-start',
-    whiteSpace: 'nowrap',
-    padding: '5px 8px',
-    width: '100%',
-    borderRadius: '5px',
-    '&:hover .hoverIcon': {
-      display: 'flex',
-    },
-  }));
-
-  const HoverIcon = styled(Box)(({ theme }) => ({
-    display: 'none',
-  }));
-
-  const StyledSubMenuBox = styled(Box)<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',
-      },
-      borderRadius: '4px',
-    }),
-  );
-
-  const StyledMenuHeaderButton = styled(Stack)(({ theme }) => ({
-    alignItems: 'center',
-    height: '50px',
-    width: '100%',
-    padding: '12px 16px',
-    backgroundColor: theme.palette.surface.grey,
-    cursor: 'pointer',
-    borderRadius: '8px 8px 0px 0px',
-  }));
-
-  return {
-    StyledSidebarContainer,
-    StyledLogoArea,
-    StyledMenuBar,
-    StyledCollapsibleSection,
-    StyledListItem,
-    StyledLinkButton,
-    StyledListItemButton,
-    StyledListItemIcon,
-    StyledSubMenuBox,
-    StyledMenuHeaderButton,
-    HoverIcon,
-  };
-};

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

@@ -1,61 +0,0 @@
-import {
-  Box,
-  Stepper as MuiStepper,
-  Step,
-  StepLabel,
-  SxProps,
-  Typography,
-} from '@mui/material';
-import { Connector, StepIcon, StyledStepContent } from './StepperComponents';
-
-interface StepperProps {
-  orientation: 'vertical' | 'horizontal';
-  activeStep: number;
-  steps: StepItem[];
-  containerSx: SxProps;
-}
-
-interface StepItem {
-  label: string;
-  description?: string;
-}
-
-export const Stepper = ({
-  orientation,
-  steps,
-  activeStep = 0,
-  containerSx,
-}: StepperProps) => {
-  const isVertical = orientation === 'vertical';
-
-  return (
-    <Box
-      sx={{
-        ...(isVertical ? { maxWidth: '300px' } : {}),
-        ...containerSx,
-      }}
-    >
-      <MuiStepper
-        activeStep={activeStep}
-        orientation={orientation}
-        alternativeLabel={!isVertical}
-        connector={<Connector isVertical={isVertical} />}
-      >
-        {steps?.map((item, index) => (
-          <Step key={index} expanded>
-            <StepLabel StepIconComponent={StepIcon}>{item?.label}</StepLabel>
-            <StyledStepContent
-              isVertical={isVertical}
-              activeStep={index < activeStep}
-              isLastStep={index === steps?.length - 1}
-            >
-              <Typography fontSize={'12px'} variant="label2">
-                {item?.description}
-              </Typography>
-            </StyledStepContent>
-          </Step>
-        ))}
-      </MuiStepper>
-    </Box>
-  );
-};

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

@@ -1,86 +0,0 @@
-import {
-  StepConnector,
-  stepConnectorClasses,
-  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';
-
-interface StepContentProps {
-  isVertical: boolean;
-  activeStep: boolean;
-  isLastStep: boolean;
-}
-
-export const StyledStepContent = styled(StepContent)<StepContentProps>(
-  ({ theme, isVertical, activeStep, isLastStep }) => ({
-    ...(isVertical && {
-      marginLeft: '11px',
-    }),
-    ...(isVertical &&
-      activeStep &&
-      !isLastStep && {
-        borderLeft: `1px solid ${theme.palette.primary.light}`,
-      }),
-    ...(!isVertical && {
-      borderLeft: 'none',
-      marginLeft: '20px',
-    }),
-  }),
-);
-
-interface ConnectorProps {
-  isVertical: boolean;
-}
-
-export const Connector = styled(StepConnector)<ConnectorProps>(
-  ({ theme, isVertical }) => ({
-    [`&.${stepConnectorClasses.active}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
-      },
-    },
-    [`&.${stepConnectorClasses.completed}`]: {
-      [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
-      },
-    },
-    ...(isVertical
-      ? {
-          top: '0px',
-          marginLeft: '11px',
-          [`& .${stepConnectorClasses.line}`]: {
-            minHeight: '28px',
-          },
-        }
-      : {
-          left: 'calc(-50% + 8px)',
-          right: 'calc(50% + 7px)',
-          top: '7.5px',
-        }),
-  }),
-);
-
-export function StepIcon(props: StepIconProps) {
-  const { active, completed, className } = props;
-
-  const getIcon = () => {
-    if (completed) return <CompletedStateIcon />;
-    if (active) return <CheckedRadioIcon />;
-    return <UnCheckedRadioIcon />;
-  };
-
-  return <StepIconRoot className={className}>{getIcon()}</StepIconRoot>;
-}
-
-const StepIconRoot = styled('div')<{}>(({ theme }) => ({
-  width: 20,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));