@codezee/sixtify-brahma 0.1.1

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 { 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

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

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

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

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

@@ -0,0 +1,249 @@
+"use client";
+
+import { Box, List, useTheme } from "@mui/material";
+import { isEmpty as _isEmpty } from "lodash";
+import { useEffect, useState } from "react";
+import { urlToNestedObject } from "../../utils/urlToNestedObject";
+import type { MenuItem } from "../Drawer";
+import { OpenDrawerCollapse } from "./OpenDrawerCollapse";
+import { OpenDrawerMenuItem } from "./OpenDrawerMenuItem";
+
+type OpenDrawerMenuItemListProps = {
+  menuItems: MenuItem[];
+  currentPathname: string;
+};
+
+export const OpenDrawerMenuItemList = ({
+  menuItems,
+  currentPathname,
+}: OpenDrawerMenuItemListProps) => {
+  //TODO: jaydip, fix this type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [subMenusOpen, setSubMenusOpen] = useState<Record<string, any>>({});
+
+  const [currentPathMenuOpen, setCurrentPathMenuOpen] = useState<
+    //TODO: jaydip, fix this type
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Record<string, any>
+  >({});
+
+  const theme = useTheme();
+
+  const { butterflyBlue, slate } = theme.palette.app.color;
+
+  useEffect(() => {
+    const obj = urlToNestedObject(currentPathname);
+
+    if (_isEmpty(obj)) {
+      setSubMenusOpen({ home: true });
+      setCurrentPathMenuOpen({ home: true });
+
+      return;
+    }
+
+    setSubMenusOpen(obj);
+    setCurrentPathMenuOpen(obj);
+  }, [currentPathname]);
+
+  return menuItems.map((menuItem) => {
+    const { menuItems = [], key: key1, icon, title, onClick } = menuItem;
+
+    const isMenuSelected = !!subMenusOpen?.[key1];
+
+    if (menuItems.length > 0) {
+      return (
+        <Box key={key1}>
+          <OpenDrawerMenuItem
+            sx={{
+              ":focus-visible": {
+                border: `1px solid ${butterflyBlue[900]}`,
+                backgroundColor: slate[900],
+              },
+            }}
+            onClick={() => {
+              setSubMenusOpen((prev) => ({
+                ...prev,
+                [key1]: !isMenuSelected,
+              }));
+            }}
+            icon={icon}
+            title={title}
+            isShowEndAdornment
+            selected={isMenuSelected}
+            key={key1}
+          />
+
+          <OpenDrawerCollapse in={isMenuSelected}>
+            <List component="div" disablePadding key={key1}>
+              {menuItems.map(
+                ({ key: key2, onClick, title, menuItems = [] }) => {
+                  const isSubMenuSelected = menuItems.length
+                    ? !!subMenusOpen?.[key1]?.[key2] ||
+                      !!currentPathMenuOpen?.[key1]?.[key2]?.menuItems
+                    : !!subMenusOpen?.[key1]?.[key2] ||
+                      !!currentPathMenuOpen?.[key1]?.[key2];
+
+                  return (
+                    <Box
+                      sx={{
+                        bgcolor:
+                          isSubMenuSelected && menuItems.length === 0
+                            ? butterflyBlue[900]
+                            : "",
+                      }}
+                      key={key2}
+                    >
+                      {menuItems.length > 0 ? (
+                        <>
+                          <OpenDrawerMenuItem
+                            sx={{
+                              paddingLeft: 4.5,
+                              ":focus-visible": {
+                                border: `1px solid ${butterflyBlue[900]}`,
+                                backgroundColor: slate[900],
+                              },
+                            }}
+                            onClick={() => {
+                              // eslint-disable-next-line sonarjs/no-nested-functions
+                              setSubMenusOpen((prev) => ({
+                                ...prev,
+                                [key1]: {
+                                  ...(prev?.[key1] || {}),
+                                  [key2]: !isSubMenuSelected,
+                                },
+                              }));
+                            }}
+                            key={key2}
+                            title={title}
+                            isShowEndAdornment
+                            selected={isSubMenuSelected}
+                          />
+                          <OpenDrawerCollapse in={isSubMenuSelected}>
+                            <List component="div" disablePadding key={key2}>
+                              {menuItems.map(
+                                ({ key: key3, title, onClick }) => {
+                                  const menuSelectedItem =
+                                    !!subMenusOpen[key1]?.[key2]?.[key3] ||
+                                    !!currentPathMenuOpen[key1]?.[key2]?.[key3];
+
+                                  return (
+                                    <Box
+                                      sx={{
+                                        bgcolor: menuSelectedItem
+                                          ? theme.palette.app.color
+                                              .butterflyBlue[900]
+                                          : "",
+                                      }}
+                                      key={key3}
+                                    >
+                                      <OpenDrawerMenuItem
+                                        sx={
+                                          menuSelectedItem
+                                            ? {
+                                                paddingLeft: menuItems.length
+                                                  ? 7.5
+                                                  : 4.5,
+                                              }
+                                            : {
+                                                paddingLeft: menuItems.length
+                                                  ? 7.5
+                                                  : 4.5,
+                                                ":focus-visible": {
+                                                  border: `1px solid ${butterflyBlue[900]}`,
+                                                  backgroundColor:
+                                                    theme.palette.app.color
+                                                      .slate[900],
+                                                },
+                                              }
+                                        }
+                                        // eslint-disable-next-line sonarjs/no-nested-functions
+                                        onClick={(target) => {
+                                          if (onClick && !menuSelectedItem) {
+                                            onClick(
+                                              `/${key1}/${key2}/${key3}`,
+                                              target
+                                            );
+                                            setSubMenusOpen((prev) => ({
+                                              ...prev,
+                                              [key2]: {
+                                                ...(prev?.[key2] || {}),
+                                                [key3]: !menuSelectedItem,
+                                              },
+                                            }));
+                                          }
+                                        }}
+                                        key={key3}
+                                        title={title}
+                                        selected={menuSelectedItem}
+                                      />
+                                    </Box>
+                                  );
+                                }
+                              )}
+                            </List>
+                          </OpenDrawerCollapse>
+                        </>
+                      ) : (
+                        <OpenDrawerMenuItem
+                          sx={
+                            isSubMenuSelected
+                              ? { paddingLeft: 4.5 }
+                              : {
+                                  paddingLeft: 4.5,
+                                  ":focus-visible": {
+                                    border: `1px solid ${butterflyBlue[900]}`,
+                                    backgroundColor: slate[900],
+                                  },
+                                }
+                          }
+                          onClick={(target) => {
+                            if (onClick && !isSubMenuSelected) {
+                              onClick(`/${key1}/${key2}`, target);
+                            }
+                          }}
+                          key={key2}
+                          title={title}
+                          selected={isSubMenuSelected}
+                        />
+                      )}
+                    </Box>
+                  );
+                }
+              )}
+            </List>
+          </OpenDrawerCollapse>
+        </Box>
+      );
+    }
+
+    return (
+      <OpenDrawerMenuItem
+        sx={
+          isMenuSelected
+            ? {}
+            : {
+                ":focus-within": {
+                  border: `1px solid ${butterflyBlue[900]}`,
+                  backgroundColor: slate[900],
+                },
+              }
+        }
+        onClick={(target) => {
+          if (onClick && !isMenuSelected) {
+            if (key1 === "home") {
+              onClick("/", target);
+
+              return;
+            }
+
+            onClick(`/${key1}`, target);
+          }
+        }}
+        key={key1}
+        icon={icon}
+        selected={isMenuSelected}
+        title={title}
+      />
+    );
+  });
+};

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

@@ -0,0 +1 @@
+export * from "./Drawer";

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

@@ -0,0 +1,172 @@
+import React, { useRef, useState } from "react";
+import { Box, IconButton, Stack } from "@mui/material";
+import type { FilterListType } from "./FilterTypeWrapper";
+import { FilterTypeWrapper } from "./FilterTypeWrapper";
+import { FilterPopup } from "./FilterPopup";
+import { FilterPopupWrapper } from "./FilterPopupWrapper";
+import type { FieldValues } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { SvgFilterList } from "../Svgs/SvgFilterList";
+import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";
+import { FilterPill } from "../Chips/FilterPill";
+import { getFormValue } from "./getFormData";
+
+export type FilterListProps = {
+  filterListItems: FilterListType[];
+};
+export const FilterList = ({ filterListItems }: FilterListProps) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const filterPopupAnchorElm = useRef<HTMLDivElement | null>(null);
+
+  const [openFilterPopup, setOpenFilterPopup] = useState(false);
+
+  const [filterListData, setFilterListData] = useState<FieldValues>();
+
+  const [currentFilter, setCurrentFilter] = useState<null | FilterListType>(
+    null
+  );
+
+  const { control, handleSubmit, setValue, reset, watch } = useForm();
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onSubmit = (data: FieldValues) => {
+    setOpenFilterPopup(false);
+    setCurrentFilter(null);
+    handleClose();
+
+    setFilterListData(data);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseFilterPopup = () => {
+    setOpenFilterPopup(false);
+  };
+
+  const handleFilterItemClick = (filter: FilterListType) => {
+    setOpenFilterPopup(true);
+    setAnchorEl(null);
+    setCurrentFilter(filter);
+  };
+
+  const handlerReset = () => {
+    reset();
+    setFilterListData(undefined);
+  };
+
+  const handleDelete = (key: string) => {
+    setValue(`${key}`, null);
+    setFilterListData((prevData) => {
+      const newData = { ...prevData };
+
+      delete newData[key];
+
+      return newData;
+    });
+  };
+
+  const getFilterItem = (key: string) => {
+    return filterListItems.find((item) => item.key === key);
+  };
+
+  const currentFilterValue = currentFilter?.key
+    ? watch(currentFilter.key)
+    : null;
+
+  const open = Boolean(anchorEl);
+
+  const renderChips = (data: FieldValues) => {
+    return Object.entries(data).map(([key, value]) => {
+      if (!value) {
+        return;
+      }
+
+      const item = getFilterItem(key);
+
+      const keyValue = item && getFormValue(value, item);
+
+      return (
+        <FilterPill
+          ref={filterPopupAnchorElm}
+          key={key}
+          label={
+            <Tooltip
+              toolTipLabel={`${keyValue}`}
+            >{`${item?.label}: ${keyValue}`}</Tooltip>
+          }
+          onDelete={() => handleDelete(key)}
+          onClick={(e: { currentTarget: HTMLDivElement | null }) => {
+            setOpenFilterPopup(true);
+            filterPopupAnchorElm.current = e.currentTarget;
+
+            const item = getFilterItem(key);
+
+            if (item) {
+              setCurrentFilter(item);
+              handleFilterItemClick(item);
+            }
+          }}
+        />
+      );
+    });
+  };
+
+  return (
+    <Stack>
+      <Stack direction="row" spacing={1} alignItems="center">
+        {filterListData && renderChips(filterListData)}
+        <IconButton
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={filterPopupAnchorElm as any}
+          onClick={handleClick}
+          sx={{ height: "40px" }}
+        >
+          <SvgFilterList />
+        </IconButton>
+        <Button onClick={() => handlerReset()} variant="text">
+          Clear Filter
+        </Button>
+      </Stack>
+      <FilterPopup
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        onApply={() => {
+          handleSubmit(onSubmit)();
+        }}
+      >
+        {filterListItems.map((filter) => (
+          <Box
+            key={filter.key}
+            onClick={() =>
+              filter.type !== "switch" && handleFilterItemClick(filter)
+            }
+          >
+            <FilterTypeWrapper filter={filter} control={control} />
+          </Box>
+        ))}
+      </FilterPopup>
+
+      {currentFilter && currentFilter.type !== "switch" && (
+        <FilterPopupWrapper
+          open={openFilterPopup}
+          onClose={handleCloseFilterPopup}
+          onApply={() => {
+            handleSubmit(onSubmit)();
+          }}
+          control={control}
+          currentFilterValue={currentFilterValue}
+          anchorEl={filterPopupAnchorElm.current}
+          filterItem={currentFilter}
+        />
+      )}
+    </Stack>
+  );
+};