@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

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

@@ -1,135 +0,0 @@
-import { Stack } from '@mui/material';
-import { motion } from 'framer-motion';
-import { useMemo, useState } from 'react';
-import { useMatch, useResolvedPath } from 'react-router-dom';
-import {} from '../export';
-import {
-  DefaultButton,
-  InternalMenuButton,
-  SubMenuButton,
-  TooltipIcon,
-} from './Components';
-import { InternalMenuClickHandlerProps } from './interfaces';
-import { SideMenuItemProps } from './Sidebar';
-import { createSidebarStyles } from './styles';
-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;
-}) => {
-  const { name, path, icon: Icon, menu: internalMenu, subMenu } = menuItem;
-
-  const newPath = currentMenuPath ? `${currentMenuPath}${path}` : path;
-
-  let resolved = useResolvedPath(newPath);
-  let match = useMatch({ path: resolved.pathname, end: false });
-
-  let [expanded, setExpanded] = useState(!collapsed && !!match);
-  const subMenuButtonClickHandler = () => {
-    setExpanded(!expanded);
-  };
-
-  const { StyledListItem, StyledLinkButton, StyledSubMenuBox } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <motion.div
-      key="collapsed"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 1 }}
-    >
-      {internalMenu && internalMenu.length > 0 && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuBox
-            match={match}
-            onClick={() =>
-              internalMenuClickHandler({
-                menuTitle: name,
-                menuPath: newPath,
-                internalMenu,
-              })
-            }
-          >
-            {collapsed ? (
-              <TooltipIcon
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-              />
-            ) : (
-              <InternalMenuButton
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-              />
-            )}
-          </StyledSubMenuBox>
-        </StyledListItem>
-      )}
-      {subMenu && subMenu.length > 0 && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledSubMenuBox
-            match={match && collapsed}
-            onClick={() => subMenuButtonClickHandler()}
-          >
-            {collapsed ? (
-              <TooltipIcon
-                name={name}
-                icon={Icon}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-              />
-            ) : (
-              <SubMenuButton
-                name={name}
-                icon={Icon}
-                expanded={expanded}
-                collapsed={collapsed}
-              />
-            )}
-          </StyledSubMenuBox>
-        </StyledListItem>
-      )}
-      {expanded && !collapsed && subMenu && subMenu.length > 0 && (
-        <Stack>
-          {subMenu?.map((item: any, index: number) => (
-            <SidebarSubMenuItem
-              key={index}
-              index={index}
-              collapsed={collapsed}
-              subMenuItem={item}
-              subMenuButtonPath={newPath}
-            />
-          ))}
-        </Stack>
-      )}
-      {!internalMenu && !subMenu && (
-        <StyledListItem key={index} disablePadding className="listItem">
-          <StyledLinkButton to={newPath} match={match}>
-            {collapsed ? (
-              <TooltipIcon name={name} icon={Icon} />
-            ) : (
-              <DefaultButton name={name} icon={Icon} collapsed={collapsed} />
-            )}
-          </StyledLinkButton>
-        </StyledListItem>
-      )}
-    </motion.div>
-  );
-};

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/SidebarV2.tsx

@@ -1,213 +0,0 @@
-import { useMediaQuery, useTheme } from '@mui/material';
-import { motion } from 'framer-motion';
-import { ReactElement, useEffect, useMemo, useState } from 'react';
-import {
-  GetActiveMenuProps,
-  InternalMenuClickHandlerProps,
-  MenuState,
-} from './interfaces';
-import { MenuBar } from './MenuBar';
-import { createSidebarStyles } from './styles';
-
-export const SidebarV2 = ({
-  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: 'calc(100vh - 116px)',
-      }}
-    >
-      <StyledSidebarContainer
-        spacing="12px"
-        direction="column"
-        className="sidebarContainer"
-      >
-        {isSmallScreen ? (
-          <></>
-        ) : (
-          <>
-            <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>
-          </>
-        )}
-      </StyledSidebarContainer>
-    </motion.div>
-  );
-};
-
-interface SideMenuItemProps {
-  name: string;
-  path: string;
-  icon: ReactElement;
-  permissionKey?: string;
-  subMenu?: SubMenuItemProps[];
-  menu?: SideMenuItemProps[]; // internalMenu
-}
-
-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 { Typography } from '../../export';
-import { SubMenuItemProps } from './Sidebar';
-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 });
-
-  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,47 +0,0 @@
-import { ReactElement } from 'react';
-import {} from '../export';
-import { SideMenuItemProps } from './Sidebar';
-
-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;
-}