@codezee/sixtify-brahma 0.2.2 → 0.2.3

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerMenuItem.tsx

@@ -1,50 +0,0 @@
-import { ChevronRight } from "@mui/icons-material";
-import { Box, useTheme } from "@mui/material";
-import { Bullet } from "../Bullet";
-import { MenuItem, type MenuItemProps } from "../MenuItem";
-
-type CloseDrawerMenuItemProps = {
-  icon?: MenuItemProps["icon"];
-  title?: MenuItemProps["title"];
-  isShowEndAdornment?: boolean;
-  onClick: MenuItemProps["onClick"];
-  selected?: MenuItemProps["selected"];
-  onMouseEnter?: MenuItemProps["onMouseEnter"];
-};
-
-export const CloseDrawerMenuItem = ({
-  icon = <Bullet />,
-  title,
-  isShowEndAdornment = false,
-  onClick,
-  selected = false,
-  onMouseEnter,
-}: CloseDrawerMenuItemProps) => {
-  const theme = useTheme();
-
-  const { butterflyBlue, slate } = theme.palette.app.color;
-
-  return (
-    <Box
-      component="li"
-      sx={{
-        bgcolor: selected && !isShowEndAdornment ? butterflyBlue[900] : "",
-      }}
-    >
-      <MenuItem
-        sx={{
-          ":focus-visible": {
-            border: `1px solid ${butterflyBlue[900]}`,
-            backgroundColor: slate[900],
-          },
-        }}
-        selected={selected}
-        title={title}
-        icon={icon}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        endAdornment={isShowEndAdornment && <ChevronRight />}
-      />
-    </Box>
-  );
-};

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerMenuItemList.tsx

@@ -1,105 +0,0 @@
-import { isEmpty as _isEmpty } from "lodash";
-import {
-  type MouseEvent,
-  type HTMLAttributeAnchorTarget,
-  useMemo,
-  useState,
-} from "react";
-import { v4 as uuidv4 } from "uuid";
-import { urlToNestedObject } from "../../utils/urlToNestedObject";
-import type { MenuItem } from "../Drawer";
-import { CloseDrawerMenuItem } from "./CloseDrawerMenuItem";
-import { CloseDrawerSubMenuItemList } from "./CloseDrawerSubMenuItemList";
-import { Popper } from "./Popper";
-
-type CloseDrawerMenuItemListProps = {
-  menuItems: MenuItem[];
-  currentPathname: string;
-};
-
-export const CloseDrawerMenuItemList = ({
-  menuItems,
-  currentPathname,
-}: CloseDrawerMenuItemListProps) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
-
-  const [currentMenuItem, setCurrentMenuItem] = useState<MenuItem>();
-
-  const [currentMenuIndex, setCurrentMenuIndex] = useState<number>(0);
-
-  const [currentPathMenuOpen, setCurrentPathMenuOpen] = useState<
-    Record<string, unknown>
-  >({});
-
-  useMemo(() => {
-    const obj = urlToNestedObject(currentPathname);
-
-    if (_isEmpty(obj)) {
-      return setCurrentPathMenuOpen({ home: true });
-    }
-
-    setCurrentPathMenuOpen(obj);
-  }, [currentPathname]);
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      {menuItems.map((menuItem, i) => {
-        const { onClick, key: key1, icon, menuItems = [] } = menuItem;
-
-        const handleClick = (target?: HTMLAttributeAnchorTarget) => {
-          if (onClick) {
-            if (key1 === "home") {
-              onClick("/", target);
-
-              return;
-            }
-
-            onClick(`/${key1}`, target);
-          }
-        };
-
-        const onMouseEnter = (event: MouseEvent<HTMLDivElement>) => {
-          if (menuItems.length > 0) {
-            setAnchorEl(event.currentTarget);
-            setCurrentMenuItem(menuItem);
-            setCurrentMenuIndex(i);
-          } else {
-            handleClose();
-          }
-        };
-
-        const isMenuSelected = !!currentPathMenuOpen?.[key1];
-
-        return (
-          <CloseDrawerMenuItem
-            key={uuidv4()}
-            onClick={handleClick}
-            onMouseEnter={onMouseEnter}
-            icon={icon}
-            selected={isMenuSelected}
-          />
-        );
-      })}
-
-      {!!anchorEl && (
-        <div onMouseLeave={handleClose}>
-          <Popper
-            open={true}
-            anchorEl={anchorEl}
-            currentMenuIndex={currentMenuIndex}
-          >
-            <CloseDrawerSubMenuItemList
-              currentMenuItem={currentMenuItem}
-              currentPathMenuOpen={currentPathMenuOpen}
-              onCloseMenuPopover={handleClose}
-            />
-          </Popper>
-        </div>
-      )}
-    </>
-  );
-};

package/packages/shared-components/src/Drawer/CloseDrawer/CloseDrawerSubMenuItemList.tsx

@@ -1,125 +0,0 @@
-import { Box, List } from "@mui/material";
-import {
-  type HTMLAttributeAnchorTarget,
-  useState,
-  type MouseEvent,
-} from "react";
-import type { MenuItem } from "../Drawer";
-import { CloseDrawerMenuItem } from "./CloseDrawerMenuItem";
-import { Popper } from "./Popper";
-
-type CloseDrawerSubMenuItemListProps = {
-  //TODO: jaydip, fix unknown type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  currentPathMenuOpen: any;
-  currentMenuItem?: MenuItem;
-  onCloseMenuPopover: () => void;
-};
-
-export const CloseDrawerSubMenuItemList = ({
-  currentPathMenuOpen,
-  currentMenuItem,
-  onCloseMenuPopover,
-}: CloseDrawerSubMenuItemListProps) => {
-  const [openPopoverIndex, setOpenPopoverIndex] = useState<number | null>(null);
-
-  const [anchorEls, setAnchorEls] = useState<(HTMLDivElement | null)[]>([]);
-
-  const handlePopoverOpen = (
-    event: MouseEvent<HTMLDivElement>,
-    index: number
-  ) => {
-    const newAnchorEls = [...anchorEls];
-
-    newAnchorEls[index] = event.currentTarget;
-    setAnchorEls(newAnchorEls);
-
-    setOpenPopoverIndex(index);
-  };
-
-  const handleClose = () => {
-    setAnchorEls([]);
-    setOpenPopoverIndex(null);
-  };
-
-  if (!currentMenuItem) {
-    return <>Loading...</>;
-  }
-
-  const { menuItems = [], key: rootKey } = currentMenuItem;
-
-  return (
-    <List>
-      {menuItems.map(
-        ({ title, key: key2, onClick, icon, menuItems = [] }, index) => {
-          const handleClick = (target: HTMLAttributeAnchorTarget = "_self") => {
-            if (onClick) {
-              onClick(`/${rootKey}/${key2}`, target);
-
-              if (target != "_blank") {
-                onCloseMenuPopover();
-              }
-            }
-          };
-
-          const onMouseEnter = (event: MouseEvent<HTMLDivElement>) => {
-            if (menuItems.length > 0) {
-              handlePopoverOpen(event, index);
-            } else {
-              handleClose();
-            }
-          };
-
-          const isMenuSelected = !!currentPathMenuOpen?.[rootKey]?.[key2];
-
-          return (
-            <Box key={key2}>
-              <div onMouseLeave={handleClose}>
-                <CloseDrawerMenuItem
-                  onClick={handleClick}
-                  title={title}
-                  icon={icon}
-                  isShowEndAdornment={!!menuItems.length}
-                  selected={isMenuSelected}
-                  onMouseEnter={onMouseEnter}
-                />
-                {menuItems.length > 0 && openPopoverIndex === index && (
-                  <Popper
-                    open={true}
-                    anchorEl={anchorEls[index]}
-                    currentMenuIndex={0}
-                  >
-                    <List>
-                      {menuItems.map(({ key: key3, title, onClick }) => {
-                        const isMenuSelected =
-                          !!currentPathMenuOpen[rootKey]?.[key2]?.[key3];
-
-                        return (
-                          <CloseDrawerMenuItem
-                            key={key3}
-                            onClick={(target = "_self") => {
-                              if (onClick) {
-                                onClick(`/${rootKey}/${key2}/${key3}`, target);
-
-                                if (target != "_blank") {
-                                  handleClose();
-                                  onCloseMenuPopover();
-                                }
-                              }
-                            }}
-                            title={title}
-                            selected={isMenuSelected}
-                          />
-                        );
-                      })}
-                    </List>
-                  </Popper>
-                )}
-              </div>
-            </Box>
-          );
-        }
-      )}
-    </List>
-  );
-};

package/packages/shared-components/src/Drawer/CloseDrawer/Popover.tsx

@@ -1,45 +0,0 @@
-import {
-  Popover as MuiPopover,
-  useTheme,
-  type PopoverProps,
-} from "@mui/material";
-import type { PropsWithChildren } from "react";
-
-type ExtendedPopoverProps = {
-  currentMenuIndex: number; // **Added Prop**
-} & PropsWithChildren<PopoverProps>;
-
-export const Popover = ({
-  open,
-  anchorEl,
-  onClose,
-  children,
-  currentMenuIndex,
-}: ExtendedPopoverProps) => {
-  const theme = useTheme();
-
-  const { mirage } = theme.palette.app.color;
-
-  return (
-    <MuiPopover
-      open={open}
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "right",
-      }}
-      onClose={onClose}
-      sx={{
-        "& .MuiPaper-root": {
-          background: mirage[900],
-          width: "200px",
-          // eslint-disable-next-line sonarjs/no-all-duplicated-branches
-          marginLeft: currentMenuIndex ? "64px" : "0px",
-          marginTop: currentMenuIndex ? currentMenuIndex * 3.6 + 6.2 : "10px",
-        },
-      }}
-    >
-      {children}
-    </MuiPopover>
-  );
-};

package/packages/shared-components/src/Drawer/CloseDrawer/Popper.tsx

@@ -1,43 +0,0 @@
-import { Popper as MuiPopper, useTheme, type PopperProps } from "@mui/material";
-import type { PropsWithChildren } from "react";
-
-type ExtendedPopoverProps = {
-  currentMenuIndex: number;
-} & PropsWithChildren<PopperProps>;
-
-export const Popper = ({
-  open,
-  anchorEl,
-  children,
-  currentMenuIndex,
-}: ExtendedPopoverProps) => {
-  const theme = useTheme();
-
-  const { mirage } = theme.palette.app.color;
-
-  return (
-    <MuiPopper
-      open={open}
-      anchorEl={anchorEl}
-      placement="bottom-end"
-      modifiers={[
-        {
-          name: "offset",
-          options: {
-            offset: [
-              currentMenuIndex ? 79 : 200,
-              currentMenuIndex ? currentMenuIndex * 36 + 82 : -56,
-            ],
-          },
-        },
-      ]}
-      sx={{
-        background: mirage[900],
-        width: "200px",
-        zIndex: 1300,
-      }}
-    >
-      {children}
-    </MuiPopper>
-  );
-};

package/packages/shared-components/src/Drawer/Drawer.styled.tsx

@@ -1,51 +0,0 @@
-import type { CSSObject, Theme } from "@mui/material";
-import { Box, Drawer as MuiDrawer, styled } from "@mui/material";
-
-export const Bullet = styled(Box)(({ theme }) => ({
-  width: 7,
-  height: 7,
-  borderRadius: "50%",
-  background: theme.palette.app.color.butterflyBlue[400],
-}));
-
-const drawerWidth = 300;
-
-const openedMixin = (theme: Theme): CSSObject => ({
-  width: drawerWidth,
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.enteringScreen,
-  }),
-  overflowX: "hidden",
-  backgroundColor: theme.palette.app.color.mirage[900],
-});
-
-const closedMixin = (theme: Theme): CSSObject => ({
-  transition: theme.transitions.create("width", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  overflowX: "hidden",
-  width: "80px",
-  [theme.breakpoints.up("sm")]: {
-    width: "80px",
-  },
-  backgroundColor: theme.palette.app.color.mirage[900],
-});
-
-export const StyledDrawer = styled(MuiDrawer, {
-  shouldForwardProp: (prop) => prop !== "open",
-})(({ theme, open }) => ({
-  width: drawerWidth,
-  flexShrink: 0,
-  whiteSpace: "nowrap",
-  boxSizing: "border-box",
-  ...(open && {
-    ...openedMixin(theme),
-    "& .MuiDrawer-paper": openedMixin(theme),
-  }),
-  ...(!open && {
-    ...closedMixin(theme),
-    "& .MuiDrawer-paper": closedMixin(theme),
-  }),
-}));

package/packages/shared-components/src/Drawer/Drawer.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { Box } from "@mui/material";
-import List from "@mui/material/List";
-import type { ReactNode, HTMLAttributeAnchorTarget } from "react";
-import { PadBox } from "../PadBox";
-import { AppLogoMedium } from "../Svgs/AppLogo/AppLogoMedium";
-import { AppLogoSmall } from "../Svgs/AppLogo/AppLogoSmall";
-import { CloseDrawerMenuItemList } from "./CloseDrawer/CloseDrawerMenuItemList";
-import { StyledDrawer } from "./Drawer.styled";
-import { OpenDrawerMenuItemList } from "./OpenDrawer/OpenDrawerMenuItemList";
-
-export type MenuItem = {
-  key: string; // this key should be unique in list
-  icon?: ReactNode;
-  title: string;
-  onClick?: (href: string, target?: HTMLAttributeAnchorTarget) => void;
-  menuItems?: MenuItem[];
-};
-
-export type DrawerProps = {
-  menuItems?: MenuItem[];
-  open: boolean;
-  currentPathname: string;
-};
-
-export const Drawer = ({
-  menuItems = [],
-  open,
-  currentPathname,
-}: DrawerProps) => {
-  return (
-    <StyledDrawer variant="permanent" open={open}>
-      <Box textAlign="center">
-        <PadBox padding={{ paddingTop: "1.5rem" }}>
-          {open ? <AppLogoMedium /> : <AppLogoSmall />}
-        </PadBox>
-      </Box>
-
-      <List component="nav">
-        {open ? (
-          <OpenDrawerMenuItemList
-            menuItems={menuItems}
-            currentPathname={currentPathname}
-          />
-        ) : (
-          <CloseDrawerMenuItemList
-            menuItems={menuItems}
-            currentPathname={currentPathname}
-          />
-        )}
-      </List>
-    </StyledDrawer>
-  );
-};

package/packages/shared-components/src/Drawer/MenuItem.tsx

@@ -1,69 +0,0 @@
-import {
-  ListItemButton,
-  ListItemText,
-  Stack,
-  useTheme,
-  type SxProps,
-  type Theme,
-  type ListItemButtonProps,
-} from "@mui/material";
-import type { HTMLAttributeAnchorTarget, ReactNode } from "react";
-import { Bullet } from "./Bullet";
-
-export type MenuItemProps = Omit<ListItemButtonProps, "onClick"> & {
-  icon?: ReactNode;
-  endAdornment?: ReactNode;
-  title?: string;
-  sx?: SxProps<Theme>;
-  onClick: (target?: HTMLAttributeAnchorTarget) => void;
-};
-
-export const MenuItem = ({
-  selected = false,
-  icon = <Bullet />,
-  title,
-  endAdornment,
-  sx,
-  onClick,
-  ...props
-}: MenuItemProps) => {
-  const theme = useTheme();
-
-  const { butterflyBlue, iron } = theme.palette.app.color;
-
-  return (
-    <ListItemButton
-      {...props}
-      onClick={(e) => onClick(e.ctrlKey ? "_blank" : "_self")}
-      onMouseDown={(e) => {
-        e.preventDefault();
-
-        if (e.button === 1) {
-          onClick("_blank");
-        }
-      }}
-      sx={{
-        ...sx,
-        color: selected ? iron[600] : theme.palette.primary.light,
-        ":hover": {
-          color: iron[600],
-          ".bullet-hover": {
-            color: selected ? "" : butterflyBlue[900],
-          },
-        },
-      }}
-    >
-      <Stack
-        alignItems="center"
-        direction="row"
-        flex={1}
-        gap="10px"
-        justifyContent="center"
-      >
-        {icon}
-        {title && <ListItemText primary={title} />}
-      </Stack>
-      {endAdornment}
-    </ListItemButton>
-  );
-};

package/packages/shared-components/src/Drawer/OpenDrawer/OpenDrawerCollapse.tsx

@@ -1,13 +0,0 @@
-import { Collapse, type CollapseProps } from "@mui/material";
-import type { PropsWithChildren } from "react";
-
-export const OpenDrawerCollapse = ({
-  children,
-  ...rest
-}: PropsWithChildren<CollapseProps>) => {
-  return (
-    <Collapse timeout="auto" unmountOnExit {...rest}>
-      {children}
-    </Collapse>
-  );
-};

package/packages/shared-components/src/Drawer/OpenDrawer/OpenDrawerMenuItem.tsx

@@ -1,46 +0,0 @@
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import type { SxProps, Theme } from "@mui/material";
-import { Box, useTheme } from "@mui/material";
-import { Bullet } from "../Bullet";
-import { MenuItem, type MenuItemProps } from "../MenuItem";
-
-type OpenDrawerMenuItemProps = {
-  icon?: MenuItemProps["icon"];
-  title: MenuItemProps["title"];
-  isShowEndAdornment?: boolean;
-  selected?: MenuItemProps["selected"];
-  onClick: MenuItemProps["onClick"];
-  sx?: SxProps<Theme>;
-};
-
-export const OpenDrawerMenuItem = ({
-  icon = <Bullet />,
-  title,
-  isShowEndAdornment = false,
-  selected = false,
-  onClick,
-  sx,
-}: OpenDrawerMenuItemProps) => {
-  const theme = useTheme();
-
-  const { butterflyBlue } = theme.palette.app.color;
-
-  return (
-    <Box
-      sx={{
-        bgcolor: selected && !isShowEndAdornment ? butterflyBlue[900] : "",
-      }}
-    >
-      <MenuItem
-        sx={sx}
-        title={title}
-        icon={icon}
-        onClick={onClick}
-        selected={selected}
-        endAdornment={
-          isShowEndAdornment && (selected ? <ExpandLess /> : <ExpandMore />)
-        }
-      />
-    </Box>
-  );
-};