@codezee/sixtify-brahma 0.2.6 → 0.2.7

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

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

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

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

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

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

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

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