@codezee/sixtify-brahma 0.2.3 → 0.2.6

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

@@ -0,0 +1,75 @@
+import {
+  ListItemButton,
+  ListItemText,
+  Stack,
+  useTheme,
+  type ListItemButtonProps,
+  type SxProps,
+  type Theme,
+} 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}
+            disableTypography={true}
+            sx={{ ...sx, padding: "0" }}
+          />
+        )}
+      </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,197 @@
+"use client";
+
+import { Box, List, useTheme } from "@mui/material";
+import { isEmpty as _isEmpty } from "lodash";
+import { type HTMLAttributeAnchorTarget, 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 type NestedMenuState = {
+  [K in MenuItem["key"]]?:
+    | boolean
+    | {
+        [SubK in MenuItem["key"]]?: boolean | NestedMenuState;
+      };
+};
+
+type MenuItemRecursiveProps = {
+  menuItem: MenuItem;
+  level?: number;
+  parentPath?: string;
+  subMenusOpen: NestedMenuState;
+  setSubMenusOpen: (
+    value: NestedMenuState | ((prev: NestedMenuState) => NestedMenuState)
+  ) => void;
+  currentPathMenuOpen: NestedMenuState;
+};
+
+const getNestedMenuState = (state: NestedMenuState, path: string[]) => {
+  if (path.length === 0) {
+    return false;
+  }
+
+  if (typeof state !== "object") {
+    return false;
+  }
+
+  const first = path[0];
+
+  if (!first) {
+    return false;
+  }
+
+  const rest = path.slice(1);
+
+  const nextState = state[first];
+
+  if (rest.length === 0) {
+    return Boolean(nextState);
+  }
+
+  return getNestedMenuState(nextState as NestedMenuState, rest);
+};
+
+export const isMenuOpen = (state: NestedMenuState, path: string[]) => {
+  const value = getNestedMenuState(state, path);
+
+  return Boolean(value);
+};
+
+export const MenuItemRecursive = ({
+  menuItem,
+  level = 0,
+  parentPath = "",
+  subMenusOpen,
+  setSubMenusOpen,
+  currentPathMenuOpen,
+}: MenuItemRecursiveProps) => {
+  const theme = useTheme();
+
+  if (level === 3) {
+    return;
+  }
+
+  const { butterflyBlue, slate } = theme.palette.app.color;
+
+  const { key, icon, title, onClick, menuItems = [] } = menuItem;
+
+  const currentPath = parentPath ? `${parentPath}/${key}` : key;
+
+  const pathArray = currentPath.split("/");
+
+  const isMenuSelected = isMenuOpen(subMenusOpen, pathArray);
+
+  const dynamicPadding = level * 3 + 1.5;
+
+  const handleClick = (target?: HTMLAttributeAnchorTarget) => {
+    if (menuItems.length > 0) {
+      setSubMenusOpen((prev) => {
+        const newState = { ...prev };
+
+        let current = newState;
+
+        for (let i = 0; i < pathArray.length - 1; i++) {
+          const segment = pathArray[i];
+
+          if (!segment) {
+            continue;
+          }
+
+          current[segment] =
+            typeof current[segment] === "object" ? current[segment] : {};
+          current = current[segment] as NestedMenuState;
+        }
+
+        const lastSegment = pathArray[pathArray.length - 1];
+
+        if (lastSegment) {
+          current[lastSegment] = !isMenuSelected;
+        }
+
+        return newState;
+      });
+    } else if (onClick && !isMenuSelected) {
+      const path = key === "home" ? "/" : `/${currentPath}`;
+
+      onClick(path, target);
+    }
+  };
+
+  return (
+    <Box key={key}>
+      <OpenDrawerMenuItem
+        sx={{
+          paddingLeft: dynamicPadding,
+          ":focus-visible": {
+            border: `1px solid ${butterflyBlue[900]}`,
+            backgroundColor: slate[900],
+          },
+        }}
+        onClick={handleClick}
+        icon={level === 0 ? icon : undefined}
+        title={title}
+        isShowEndAdornment={menuItems.length > 0 && level < 2}
+        selected={isMenuSelected}
+      />
+
+      {menuItems.length > 0 && (
+        <OpenDrawerCollapse in={isMenuSelected}>
+          <List component="div" disablePadding>
+            {menuItems.map((subMenuItem) => (
+              <MenuItemRecursive
+                key={subMenuItem.key}
+                menuItem={subMenuItem}
+                level={level + 1}
+                parentPath={currentPath}
+                subMenusOpen={subMenusOpen}
+                setSubMenusOpen={setSubMenusOpen}
+                currentPathMenuOpen={currentPathMenuOpen}
+              />
+            ))}
+          </List>
+        </OpenDrawerCollapse>
+      )}
+    </Box>
+  );
+};
+
+export const OpenDrawerMenuItemList = ({
+  menuItems,
+  currentPathname,
+}: OpenDrawerMenuItemListProps) => {
+  const [subMenusOpen, setSubMenusOpen] = useState<NestedMenuState>({});
+
+  const [currentPathMenuOpen, setCurrentPathMenuOpen] =
+    useState<NestedMenuState>({});
+
+  useEffect(() => {
+    const obj = urlToNestedObject(currentPathname);
+
+    if (_isEmpty(obj)) {
+      setSubMenusOpen({ home: true });
+      setCurrentPathMenuOpen({ home: true });
+
+      return;
+    }
+
+    setSubMenusOpen(obj);
+    setCurrentPathMenuOpen(obj);
+  }, [currentPathname]);
+
+  return menuItems.map((menuItem) => (
+    <MenuItemRecursive
+      key={menuItem.key}
+      menuItem={menuItem}
+      subMenusOpen={subMenusOpen}
+      setSubMenusOpen={setSubMenusOpen}
+      currentPathMenuOpen={currentPathMenuOpen}
+    />
+  ));
+};

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>
+  );
+};