@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,61 @@
+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

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

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,55 @@
+"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>
+  );
+};