@codezee/sixtify-brahma 0.2.6 → 0.2.7

package/packages/shared-components/src/Dialog/BottomDialog.tsx

@@ -1,37 +0,0 @@
-import { BottomDialogBody, BottomDialogStyled } from "./BottomDialog.styled";
-
-import type { DialogProps } from ".";
-import { PadBox } from "../PadBox";
-
-export type BottomDialogProps = Omit<DialogProps, "title"> & {
-  title?: string;
-  open?: boolean;
-  onClose: () => void;
-};
-
-export function BottomDialog({
-  children,
-  title,
-  open = false,
-  onClose,
-  ...rest
-}: BottomDialogProps) {
-  return (
-    <BottomDialogStyled
-      fullScreen
-      title={title}
-      {...rest}
-      open={open}
-      onClose={onClose}
-      PaperProps={{
-        sx: {
-          animation: open ? "slideUp 0.2s cubic-bezier(0.25, 0.8, 0.5, 1)" : "",
-        },
-      }}
-    >
-      <BottomDialogBody direction="row" overflow="hidden">
-        <PadBox padding={{ padding: "1rem" }}>{children}</PadBox>
-      </BottomDialogBody>
-    </BottomDialogStyled>
-  );
-}

package/packages/shared-components/src/Dialog/DeleteDialog.tsx

@@ -1,48 +0,0 @@
-import InfoTwoToneIcon from "@mui/icons-material/InfoTwoTone";
-import { Stack, Typography } from "@mui/material";
-import { Button } from "../Button";
-import { Dialog } from "./Dialog";
-
-export type DeleteDialogProps = {
-  title: string;
-  open: boolean;
-  isDeleteLoading: boolean;
-  onDelete: () => void;
-  onClose: () => void;
-};
-
-export const DeleteDialog = ({
-  title,
-  open,
-  isDeleteLoading,
-  onDelete,
-  onClose,
-}: DeleteDialogProps) => {
-  return (
-    <Dialog
-      maxWidth="xs"
-      isHideCloseIcon={true}
-      isHideDividers={true}
-      open={open}
-      actions={
-        <Stack direction="row" gap="5px">
-          <Button onClick={onClose} variant="outlined">
-            Cancel
-          </Button>
-
-          <Button onClick={onDelete} color="error" loading={isDeleteLoading}>
-            Delete
-          </Button>
-        </Stack>
-      }
-    >
-      <Stack gap="10px" direction="row">
-        <InfoTwoToneIcon color="error" sx={{ mt: "1px" }} />
-
-        <Typography variant="subtitle1" fontWeight={700}>
-          {title}
-        </Typography>
-      </Stack>
-    </Dialog>
-  );
-};

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

@@ -1,61 +0,0 @@
-import HighlightOffIcon from "@mui/icons-material/HighlightOff";
-import {
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Dialog as MuiDialog,
-  Stack,
-  Typography,
-  type DialogProps as MuiDialogProps,
-} from "@mui/material";
-import type { PropsWithChildren, ReactNode } from "react";
-import { PadBox } from "../PadBox";
-
-export type DialogProps = PropsWithChildren<
-  MuiDialogProps & {
-    isHideCloseIcon?: boolean;
-    title?: string;
-    actions?: ReactNode;
-    isHideDividers?: boolean;
-  }
->;
-
-export const Dialog = ({
-  title,
-  isHideCloseIcon = false,
-  isHideDividers = false,
-  children,
-  onClose,
-  actions,
-  ...props
-}: DialogProps) => {
-  return (
-    <MuiDialog fullWidth {...props}>
-      <DialogTitle textAlign="center">
-        <Stack direction="row" alignItems="center">
-          <Typography variant="h5" fontWeight={500} flex={1}>
-            {title}
-          </Typography>
-
-          {!isHideCloseIcon && (
-            <IconButton
-              onClick={(event) => onClose && onClose(event, "escapeKeyDown")}
-              color="secondary"
-            >
-              <HighlightOffIcon fontSize="large" />
-            </IconButton>
-          )}
-        </Stack>
-      </DialogTitle>
-
-      <DialogContent dividers={!isHideDividers}>
-        <PadBox padding={{ padding: "10px" }}>{children}</PadBox>
-      </DialogContent>
-
-      {actions && (
-        <DialogActions sx={{ py: "16px", px: "24px" }}>{actions}</DialogActions>
-      )}
-    </MuiDialog>
-  );
-};

package/packages/shared-components/src/Dialog/index.ts

@@ -1,3 +0,0 @@
-export * from "./BottomDialog";
-export * from "./DeleteDialog";
-export * from "./Dialog";

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

@@ -1,12 +0,0 @@
-import CircleIcon from "@mui/icons-material/Circle";
-export const Bullet = () => {
-  return (
-    <CircleIcon
-      className="bullet-hover"
-      sx={{
-        fontSize: "6px",
-        borderRadius: "50%",
-      }}
-    />
-  );
-};

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

@@ -1,57 +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] : "",
-        padding: !title ? "2.5px 0" : "0px",
-        wordBreak: "break-word",
-      }}
-    >
-      <MenuItem
-        sx={{
-          fontSize: "14px",
-          padding: "9.5px 16px",
-          ":focus-visible": {
-            border: `1px solid ${butterflyBlue[900]}`,
-            backgroundColor: slate[900],
-          },
-          margin: "0",
-        }}
-        selected={selected}
-        title={title}
-        icon={icon}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        endAdornment={
-          isShowEndAdornment && <ChevronRight sx={{ fontSize: "16px" }} />
-        }
-      />
-    </Box>
-  );
-};

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

@@ -1,109 +0,0 @@
-import { Box } from "@mui/material";
-import { isEmpty as _isEmpty } from "lodash";
-import {
-  type HTMLAttributeAnchorTarget,
-  type MouseEvent,
-  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,
-  type MenuOpenState,
-} 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<MenuOpenState>(
-    {}
-  );
-
-  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 && (
-        <Box onMouseLeave={handleClose}>
-          <Popper
-            open={true}
-            anchorEl={anchorEl}
-            currentMenuIndex={currentMenuIndex}
-          >
-            <CloseDrawerSubMenuItemList
-              currentMenuItem={currentMenuItem}
-              currentPathMenuOpen={currentPathMenuOpen}
-              onCloseMenuPopover={handleClose}
-            />
-          </Popper>
-        </Box>
-      )}
-    </>
-  );
-};

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

@@ -1,124 +0,0 @@
-import { Box, List } from "@mui/material";
-import {
-  useState,
-  type HTMLAttributeAnchorTarget,
-  type MouseEvent,
-} from "react";
-import { type MenuItem } from "../Drawer";
-import { CloseDrawerMenuItem } from "./CloseDrawerMenuItem";
-import { Popper } from "./Popper";
-
-export type MenuOpenState = {
-  [key: string]: MenuOpenState | boolean;
-};
-
-type RecursiveMenuItemProps = {
-  item: MenuItem;
-  parentPath: string;
-  currentPathMenuOpen: MenuOpenState;
-  onCloseMenuPopover: () => void;
-  level?: number;
-};
-
-const RecursiveMenuItem = ({
-  item,
-  parentPath,
-  currentPathMenuOpen,
-  onCloseMenuPopover,
-  level = 0,
-}: RecursiveMenuItemProps) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
-
-  const isOpen = Boolean(anchorEl);
-
-  const handlePopoverOpen = (event: MouseEvent<HTMLDivElement>) => {
-    if (item.menuItems?.length) {
-      setAnchorEl(event.currentTarget);
-    }
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleClick = (target: HTMLAttributeAnchorTarget = "_self") => {
-    const fullPath = `${parentPath}/${item.key}`;
-
-    if (item.onClick) {
-      item.onClick(fullPath, target);
-
-      if (target !== "_blank") {
-        handleClose();
-        onCloseMenuPopover();
-      }
-    }
-  };
-
-  const isSelected = Boolean(currentPathMenuOpen[item.key]);
-
-  const currentPath = `${parentPath}/${item.key}`;
-
-  return (
-    <Box onMouseLeave={handleClose}>
-      <CloseDrawerMenuItem
-        onClick={handleClick}
-        title={item.title}
-        icon={item.icon}
-        isShowEndAdornment={Boolean(item.menuItems?.length)}
-        selected={isSelected}
-        onMouseEnter={handlePopoverOpen}
-      />
-
-      {item.menuItems?.length && isOpen && (
-        <Popper open={true} anchorEl={anchorEl} currentMenuIndex={level}>
-          <List disablePadding>
-            {item.menuItems.map((subItem) => (
-              <RecursiveMenuItem
-                key={subItem.key}
-                item={subItem}
-                parentPath={currentPath}
-                currentPathMenuOpen={
-                  (currentPathMenuOpen[item.key] as MenuOpenState) ?? {}
-                }
-                onCloseMenuPopover={onCloseMenuPopover}
-                level={level + 1}
-              />
-            ))}
-          </List>
-        </Popper>
-      )}
-    </Box>
-  );
-};
-
-type CloseDrawerSubMenuItemListProps = {
-  currentPathMenuOpen: MenuOpenState;
-  currentMenuItem?: MenuItem;
-  onCloseMenuPopover: () => void;
-};
-
-export const CloseDrawerSubMenuItemList = ({
-  currentPathMenuOpen,
-  currentMenuItem,
-  onCloseMenuPopover,
-}: CloseDrawerSubMenuItemListProps) => {
-  if (!currentMenuItem) {
-    return <>Loading...</>;
-  }
-
-  return (
-    <List disablePadding>
-      {currentMenuItem.menuItems?.map((item) => (
-        <RecursiveMenuItem
-          key={item.key}
-          item={item}
-          parentPath={`/${currentMenuItem.key}`}
-          currentPathMenuOpen={
-            (currentPathMenuOpen[currentMenuItem.key] as MenuOpenState) ?? {}
-          }
-          onCloseMenuPopover={onCloseMenuPopover}
-        />
-      ))}
-    </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 : 203,
-              currentMenuIndex ? currentMenuIndex * 43.5 + 82 : -40,
-            ],
-          },
-        },
-      ]}
-      sx={{
-        background: mirage[900],
-        width: "203px",
-        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 { HTMLAttributeAnchorTarget, ReactNode } 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>
-  );
-};