@codezee/sixtify-brahma 0.1.1

package/packages/shared-components/src/Chips/Chip.tsx

@@ -0,0 +1,26 @@
+import {
+  Avatar,
+  Chip as MuiChip,
+  type ChipProps as MuiChipProps,
+} from "@mui/material";
+
+type ChipProps = {
+  imgURL?: string;
+} & MuiChipProps;
+
+export const Chip = ({
+  label,
+  variant = "outlined",
+  imgURL,
+  avatar,
+  ...rest
+}: ChipProps) => {
+  return (
+    <MuiChip
+      avatar={avatar && <Avatar alt="Natacha" src={imgURL} />}
+      label={label}
+      variant={variant}
+      {...rest}
+    />
+  );
+};

package/packages/shared-components/src/Chips/ChipWithBorder.tsx

@@ -0,0 +1,39 @@
+import type { ChipProps } from "@mui/material";
+import { alpha, Chip, Tooltip } from "@mui/material";
+
+type ChipWithBorderProps = Omit<ChipProps, "color"> & {
+  label: string;
+  color?: string;
+  toolTipLabel?: string;
+};
+
+export const ChipWithBorder = ({
+  label,
+  color = "green",
+  toolTipLabel,
+  ...rest
+}: ChipWithBorderProps) => {
+  return (
+    <Tooltip title={toolTipLabel} arrow placement="top">
+      <Chip
+        label={label}
+        {...rest}
+        sx={{
+          border: `1px solid ${color}`,
+          borderColor: color,
+          backgroundColor: alpha(color, 0.2),
+          borderRadius: "3px",
+          height: "20px",
+          width: "auto",
+          padding: "0px",
+          ".MuiChip-label": {
+            color,
+            fontSize: "12px",
+            fontWeight: 600,
+            padding: "5px",
+          },
+        }}
+      ></Chip>
+    </Tooltip>
+  );
+};

package/packages/shared-components/src/Chips/FilterPill.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from "react";
+import { Chip } from "../Chips";
+import { ClearIcon } from "@mui/x-date-pickers/icons";
+import { useTheme } from "@mui/material";
+
+type FilterPillProps = {
+  onDelete?: () => void;
+  label: React.ReactNode;
+  onClick?: (e: { currentTarget: HTMLDivElement | null }) => void;
+};
+
+export const FilterPill = forwardRef<HTMLDivElement, FilterPillProps>(
+  ({ onDelete, label, onClick }, ref) => {
+    const theme = useTheme();
+
+    const { black, sapphireBlue, iron } = theme.palette.app.color;
+
+    return (
+      <Chip
+        ref={ref}
+        label={label}
+        variant="filled"
+        deleteIcon={onDelete && <ClearIcon />}
+        sx={{
+          maxWidth: "200px",
+          borderRadius: "20px",
+          color: black[900],
+          backgroundColor: `${sapphireBlue[400]} !important`,
+          "&:hover": {
+            backgroundColor: sapphireBlue[500],
+          },
+          "& .MuiChip-deleteIcon": {
+            color: iron[800],
+            "&:hover": {
+              color: iron[900],
+              backgroundColor: sapphireBlue[400],
+            },
+          },
+        }}
+        onDelete={onDelete}
+        onClick={onClick}
+      />
+    );
+  }
+);
+
+FilterPill.displayName = "FilterPill";

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

@@ -0,0 +1,3 @@
+export * from "./Chip";
+export * from "./FilterPill";
+export * from "./ChipWithBorder";

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

@@ -0,0 +1,28 @@
+import type { StyledComponent } from "@emotion/styled";
+import type { StackProps } from "@mui/material";
+import { Stack, styled } from "@mui/material";
+import type { DialogProps as MuiDialogProps } from "./Dialog";
+import { Dialog } from "./Dialog";
+
+export const BottomDialogStyled: StyledComponent<MuiDialogProps> = styled(
+  Dialog
+)({
+  height: "85%",
+  top: "auto",
+  "& .MuiDialogContent-root": {
+    display: "grid",
+    padding: "unset",
+  },
+  "& .MuiDialog-paper": {
+    borderTopLeftRadius: "12px",
+    borderTopRightRadius: "12px",
+  },
+});
+
+export const BottomDialogBody: StyledComponent<StackProps> = styled(Stack)(
+  () => ({
+    "& > *": {
+      flex: "1 1 auto",
+    },
+  })
+);

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: "7px",
+        borderRadius: "50%",
+      }}
+    />
+  );
+};

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

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

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

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

@@ -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 : 200,
+              currentMenuIndex ? currentMenuIndex * 36 + 82 : -56,
+            ],
+          },
+        },
+      ]}
+      sx={{
+        background: mirage[900],
+        width: "200px",
+        zIndex: 1300,
+      }}
+    >
+      {children}
+    </MuiPopper>
+  );
+};