pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/SideBar/SideBar.tsx

@@ -1,206 +0,0 @@
-import React from "react";
-import { Flex, Text, Image, Box } from "@chakra-ui/react";
-import { SidebarProps } from "./SideBarProps";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { FlexCss } from "../../Constants/Sidebar";
-import { ArrowLeftToLine, ArrowRightToLine, Plus } from "lucide-react";
-import MenuItems from "./components/MenuItems";
-import DefaultLogo from "../../Assets/defaultLogo";
-
-export default function Sidebar({
-  menus,
-  activeMenu,
-  handleMenuClick,
-  toggle,
-  changeToggle,
-  logo,
-  companyName,
-  isDisableAddNew = false,
-  onAddNewClick,
-  selectedSubMenu,
-}: SidebarProps) {
-  const theme = useCustomTheme();
-
-  return (
-    <Flex
-      transition={"all 0.5s"}
-      pos="sticky"
-      h="100vh"
-      boxShadow={theme.shadows.lg}
-      w={toggle ? "4.688rem" : "15.625rem"}
-      flexDir="column"
-      justifyContent="space-between"
-      background={theme.colors.sidebar.background[500]}
-    >
-      <Flex
-        flexDir="column"
-        w="100%"
-        alignItems={toggle ? "center" : "flex-start"}
-        as="nav"
-        h="100vh"
-      >
-        {logo ? (
-          <Flex
-            my={3.5}
-            alignItems="left"
-            gap={"0.625rem"}
-            pl={toggle ? 0 : "0.625rem"}
-          >
-            <Image
-              borderRadius="full"
-              boxSize={"2rem"}
-              src={logo}
-              alt="Company Logo"
-            />
-            <Text
-              display={toggle ? "none" : "flex"}
-              fontSize={18}
-              fontWeight={800}
-              color={theme.colors.white}
-              lineHeight={2}
-            >
-              {companyName}
-            </Text>
-          </Flex>
-        ) : (
-          <Flex
-            my={3.5}
-            alignItems="center"
-            gap={"0.625rem"}
-            pl={toggle ? 0 : "0.625rem"}
-          >
-            <Box
-              bg={theme.colors.white}
-              color={theme.colors.black}
-              borderRadius="full"
-              boxSize="2rem"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              fontWeight="bold"
-              fontSize={{ base: "xl", md: "2xl" }}
-            >
-              <DefaultLogo />
-            </Box>
-            <Text
-              fontWeight={800}
-              fontSize={"1.3rem"}
-              textAlign={"center"}
-              color={theme.colors.white}
-              display={toggle ? "none" : "flex"}
-              lineHeight={2}
-            >
-              {companyName}
-            </Text>
-          </Flex>
-        )}
-        <Box w="100%" h="0.063rem" bg={theme.colors.sidebar.background[200]} />
-
-        <Flex
-          // mt={5}
-          flexDir="column"
-          w="100%"
-          alignItems={toggle ? "center" : "flex-start"}
-          h="100vh"
-          overflow="auto"
-          css={FlexCss}
-          overflowX="hidden"
-        >
-          <Box
-            width="100%"
-            flex="1"
-            overflowY="auto"
-            overflowX="hidden"
-            alignItems={toggle ? "center" : "flex-start"}
-            css={{
-              ...FlexCss,
-              transition: 'all 0.3s ease',
-            }}
-          >
-            <MenuItems
-              activeMenu={activeMenu}
-              menus={menus}
-              handleMenuClick={handleMenuClick ?? (() => { })}
-              toggle={toggle}
-              selectedSubMenu={selectedSubMenu}
-            />
-          </Box>
-          <Box
-            w="100%"
-            h="0.063rem"
-            bg={theme.colors.sidebar.background[200]}
-            mb="0.125rem"
-          />
-          {!isDisableAddNew && (
-            <Flex
-              alignItems="center"
-              gap="0.5rem"
-              p="0.625rem"
-              // mt="1rem"
-              cursor="pointer"
-              _hover={{ backgroundColor: theme.colors.primary[500] }}
-              w="100%"
-              justifyContent={toggle ? "center" : "flex-start"}
-              onClick={onAddNewClick}
-            >
-              <Box
-                w="1.625rem"
-                h="1.625rem"
-                bg={theme.colors.white}
-                borderRadius="full"
-                display="flex"
-                alignItems="center"
-                justifyContent="center"
-              >
-                <Plus size={16} color={theme.colors.primary[500]} />
-              </Box>
-              <Text
-                fontSize="0.875rem"
-                color={theme.colors.white}
-                fontWeight="medium"
-                display={toggle ? "none" : "block"}
-              >
-                Add New
-              </Text>
-            </Flex>
-          )}
-
-          <Flex
-            alignItems="center"
-            gap="0.5rem"
-            p="0.625rem"
-            cursor="pointer"
-            w="100%"
-            justifyContent={toggle ? "center" : "flex-start"}
-            onClick={changeToggle}
-            transition={"all 0.5s"}
-            bg={theme.colors.gray[700]}
-          >
-            <Box
-              w="1.625rem"
-              h="1.625rem"
-              borderRadius="full"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-            >
-              {toggle ? (
-                <ArrowRightToLine size={16} color={theme.colors?.white} />
-              ) : (
-                <ArrowLeftToLine size={16} color={theme.colors.white} />
-              )}
-            </Box>
-            <Text
-              fontSize="0.875rem"
-              color="white"
-              fontWeight="medium"
-              display={toggle ? "none" : "block"}
-            >
-              Collapse
-            </Text>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-}

package/src/Components/SideBar/SideBarProps.tsx

@@ -1,31 +0,0 @@
-export type SidebarProps = {
-  menus: MenuProps[];
-  activeMenu: string;
-  handleMenuClick?: (menu: MenuProps) => void;
-  toggle: boolean;
-  changeToggle: () => void;
-  logo?: string;
-  companyName: string;
-  isDisableAddNew?: boolean;
-  onAddNewClick?: () => void;
-  selectedSubMenu?: string | null;
-};
-
-export type MenuProps = {
-  id: string | number;
-  title: string;
-  icon: any;
-  url: string;
-  disabled?: boolean;
-  locked?: boolean;
-  badge?: string | number;
-  subMenu?: MenuProps[];
-};
-
-export type RenderMenuType = {
-  menus: MenuProps[];
-  activeMenu: string;
-  handleMenuClick: (menu: MenuProps) => void;
-  toggle: boolean;
-  selectedSubMenu?: string | null;
-};

package/src/Components/SideBar/Sidebar.stories.tsx

@@ -1,80 +0,0 @@
-// import React, { useState } from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import Sidebar from './SideBar';
-// import { SidebarProps } from './SideBarProps';
-// import { fn } from '@storybook/test';
-
-// export default {
-//     title: 'Components/Sidebar/Sidebar',
-//     component: Sidebar,
-// } as Meta;
-
-// const Template: StoryFn<SidebarProps> = (args) => {
-
-//     const [toggle, changeToggle] = useState(true)
-//     const [activeMenu, setActiveMenu] = useState("")
-
-//     const handleMenuClick = (title: string, url: string) => {
-//         setActiveMenu(title)
-//     }
-
-//     return (<Sidebar {...args} activeMenu={activeMenu} handleMenuClick={handleMenuClick} toggle={toggle} changeToggle={() => changeToggle(!toggle)} />)
-// };
-
-// const menus = [
-//     {
-//         title: "Dashboard",
-//         icon: FiHome,
-//         url: "dashboard"
-//     },
-//     {
-//         title: "Calendar",
-//         icon: FiCalendar,
-//         url: "description"
-//     },
-//     {
-//         title: "Clients",
-//         icon: FiUser,
-//         url: "description"
-//     }, {
-//         title: "Animals",
-//         icon: FiCalendar,
-//         url: "description"
-//     },
-//     {
-//         title: "Stock's",
-//         icon: FiDollarSign,
-//         url: "description"
-//     }, {
-//         title: "Reports",
-//         icon: FiBriefcase,
-//         url: "description"
-//     }, {
-//         title: "Settings",
-//         icon: FiSettings,
-//         url: "description",
-//         subMenu: [
-//             {
-//                 title: "Submenu Item 1",
-//                 url: "Submenu item 1 description"
-//             },
-//             {
-//                 title: "Submenu Item 2",
-//                 url: "Submenu item 2 description"
-//             }
-//         ]
-//     },
-// ];
-
-// export const Primary = Template.bind({});
-
-// Primary.args = {
-//     menus: menus,
-//     activeMenu: '',
-//     handleMenuClick: fn(),
-//     toggle: false,
-//     changeToggle: fn(),
-//     logo: 'https://bit.ly/dan-abramov',
-//     companyName: 'PIXELIZE'
-// };
-export {};

package/src/Components/SideBar/components/MenuItemBox.tsx

@@ -1,217 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Flex,
-  Icon,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  Badge,
-  Collapse,
-  Portal,
-} from "@chakra-ui/react";
-import MenuPopoverContent from "./MenuPopoverContent";
-import { MenuProps } from "../SideBarProps";
-import { ChevronDown, ChevronRight, LockKeyhole } from "lucide-react";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import TruncatedTextWithTooltip from "./TextTruncation";
-
-interface Props {
-  menu: MenuProps;
-  activeMenu: string | number;
-  toggle: boolean;
-  handleClick?: (menu: MenuProps) => void;
-  selectedSubMenu?: string | null;
-}
-
-const MenuItemBox: React.FC<Props> = ({
-  menu,
-  activeMenu,
-  toggle,
-  handleClick,
-}) => {
-  const theme = useCustomTheme();
-
-  const { title, icon, disabled, locked, badge, subMenu } = menu;
-  const hasSubMenu = !!subMenu?.length;
-  const [isOpen, setIsOpen] = useState(false);
-
-  const isChildActive = subMenu?.some((sub) => sub.id === activeMenu);
-  const isParentActive = activeMenu === menu.id;
-  const isAnyActive = isParentActive || isChildActive;
-
-  const handleToggleSubMenu = () => {
-    if (!disabled && hasSubMenu) {
-      setIsOpen(!isOpen);
-    } else if (!disabled) {
-      handleClick?.(menu);
-    }
-  };
-
-  const commonStyles = {
-    w: "100%",
-    px: "1.5rem",
-    py: "0.75rem",
-    fontWeight: "medium",
-    backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent",
-    color: disabled ? "gray.400" : theme.colors.white,
-    _hover: disabled
-      ? {}
-      : {
-        backgroundColor: theme.colors.primary[700],
-      },
-    pl: toggle ? "1.6875rem" : undefined,
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1,
-  };
-
-  const buttonContent = (
-    <Flex align="center" gap="0.625rem" justify="space-between">
-      <Flex align="center" gap="0.625rem" overflow={"auto"}>
-        <Icon
-          as={icon}
-          fontSize="1.25rem"
-          color={disabled ? theme.colors.gray[400] : theme.colors.white}
-        />
-        {!toggle && (
-          <TruncatedTextWithTooltip open={isOpen} fontSize="1rem" flex="1">
-            {title}
-          </TruncatedTextWithTooltip>
-        )}
-      </Flex>
-      {!toggle && (
-        <Flex align="center" gap="0.375rem">
-          {badge && (
-            <Badge colorScheme="teal" fontSize="0.625rem" variant={"subtle"}>
-              {badge}
-            </Badge>
-          )}
-          {locked && <Icon as={LockKeyhole} fontSize="1rem" />}
-          {hasSubMenu && (
-            <Icon
-              as={isOpen ? ChevronDown : ChevronRight}
-              fontSize="1rem"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggleSubMenu();
-              }}
-            />
-          )}
-        </Flex>
-      )}
-    </Flex>
-  );
-
-  if (toggle) {
-    // Collapsed sidebar: show Popover
-    return (
-      <Popover
-        trigger="hover"
-        placement="right-start"
-        closeOnBlur={false}
-        isLazy
-      >
-        <PopoverTrigger>
-          <Box {...commonStyles} onClick={handleToggleSubMenu}>
-            {buttonContent}
-          </Box>
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent
-            borderRadius="0.063rem"
-            bg={theme.colors.primary[isAnyActive ? 500 : 700]}
-            boxShadow="lg"
-            minW="10rem"
-            maxW="14rem"
-            py="0.125rem"
-            ml="-0.313rem"
-            cursor={disabled ? "not-allowed" : "pointer"}
-            zIndex={1500}
-          >
-            <PopoverBody p="0.5rem" color="white">
-              <MenuPopoverContent
-                menu={menu}
-                handleMenuClick={handleClick}
-                activeMenu={activeMenu}
-              />
-            </PopoverBody>
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    );
-  }
-
-  return (
-    <>
-      <Box {...commonStyles} onClick={handleToggleSubMenu}>
-        {buttonContent}
-      </Box>
-
-      {hasSubMenu && (
-        <Collapse in={isOpen} animateOpacity>
-          <Box>
-            {subMenu.map((sub) => {
-              const isSubActive = activeMenu === sub.id;
-
-              return (
-                <Box
-                  key={sub.id || sub.title}
-                  py="0.5rem"
-                  px="1.25rem"
-                  pl="3.3rem"
-                  fontSize="0.875rem"
-                  backgroundColor={
-                    isAnyActive ? theme.colors.primary[500] : "transparent"
-                  }
-                  borderLeft={
-                    isSubActive
-                      ? `0.188rem solid ${theme.colors.background[300]}`
-                      : "0.188rem solid transparent"
-                  }
-                  _hover={{
-                    backgroundColor: theme.colors.primary[700],
-                  }}
-                  opacity={sub.disabled ? 0.6 : 1}
-                  cursor={sub.disabled ? "not-allowed" : "pointer"}
-                  pointerEvents={sub.disabled ? "none" : "auto"}
-                  onClick={() => !sub.disabled && handleClick?.(sub)}
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="space-between"
-                  gap="0.5rem"
-                  color={theme.colors.white}
-                >
-                  <Flex align="center" gap="0.5rem" overflow={"auto"}>
-                    <Icon as={sub.icon} fontSize="1rem" />
-                    <TruncatedTextWithTooltip
-                      fontSize="0.875rem"
-                      fontWeight="medium"
-                      open={isOpen}
-                    >
-                      {sub.title}
-                    </TruncatedTextWithTooltip>
-                  </Flex>
-
-                  {sub.locked ? (
-                    <Icon as={LockKeyhole} fontSize="1rem" />
-                  ) : sub.badge ? (
-                    <Badge
-                      colorScheme="teal"
-                      fontSize="0.625rem"
-                      variant={"subtle"}
-                    >
-                      {sub.badge}
-                    </Badge>
-                  ) : null}
-                </Box>
-              );
-            })}
-          </Box>
-        </Collapse>
-      )}
-    </>
-  );
-};
-
-export default MenuItemBox;

package/src/Components/SideBar/components/MenuItems.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { Box } from "@chakra-ui/react";
-import { RenderMenuType } from "../SideBarProps";
-import MenuItemBox from "./MenuItemBox";
-
-const MenuItems: React.FC<RenderMenuType> = ({
-  menus,
-  activeMenu,
-  handleMenuClick,
-  toggle,
-  selectedSubMenu,
-}) => {
-  return (
-    <Box>
-      {menus.map((menu) => (
-        <MenuItemBox
-          key={menu.title}
-          menu={menu}
-          activeMenu={activeMenu}
-          toggle={toggle}
-          handleClick={handleMenuClick}
-          selectedSubMenu={selectedSubMenu}
-        />
-      ))}
-    </Box>
-  );
-};
-
-export default MenuItems;

package/src/Components/SideBar/components/MenuPopoverContent.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { Icon, Flex, Badge } from "@chakra-ui/react";
-import { LockKeyhole } from "lucide-react";
-import { MenuProps } from "../SideBarProps";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import TruncatedTextWithTooltip from "./TextTruncation";
-
-interface Props {
-  menu: MenuProps;
-  handleMenuClick?: (menu: MenuProps) => void;
-  activeMenu?: string | number;
-}
-
-const MenuPopoverContent: React.FC<Props> = ({
-  menu,
-  handleMenuClick,
-  activeMenu,
-}) => {
-  const theme = useCustomTheme();
-  const { title, subMenu, badge, locked } = menu;
-
-  const isAnySubActive = subMenu?.some((sub) => sub.id === activeMenu);
-  return (
-    <>
-      {/* Header Title */}
-      <Flex align="center" gap="0.625rem" mb={subMenu?.length ? "0.5rem" : 0}>
-        <TruncatedTextWithTooltip fontWeight="medium" fontSize="1rem" flex="1">
-          {title}
-        </TruncatedTextWithTooltip>
-
-        {badge && (
-          <Badge colorScheme="teal" fontSize="0.625rem" variant={"subtle"}>
-            {badge}
-          </Badge>
-        )}
-
-        {locked && <Icon as={LockKeyhole} fontSize="1rem" />}
-      </Flex>
-
-      {/* Submenus */}
-      {subMenu?.map((sub) => {
-        const isSubActive = activeMenu === sub.id;
-
-        return (
-          <Flex
-            key={sub.id || sub.title}
-            onClick={() => !sub.disabled && handleMenuClick?.(sub)}
-            px="1rem"
-            py="0.5rem"
-            align="center"
-            justify="space-between"
-            gap="0.75rem"
-            _hover={{
-              bg: !sub.disabled ? theme.colors.primary[500] : "transparent",
-              cursor: !sub.disabled ? "pointer" : "not-allowed",
-            }}
-            bg={
-              isAnySubActive
-                ? theme.colors.primary[500]
-                : theme.colors.primary[700]
-            }
-            borderLeft={
-              isSubActive
-                ? `0.188rem solid ${theme.colors.background[300]}`
-                : "0.188rem solid transparent"
-            }
-            color="white"
-            opacity={sub.disabled ? 0.5 : 1}
-            pointerEvents={sub.disabled ? "none" : "auto"}
-          >
-            {/* Left: Icon + Title */}
-            <Flex align="center" gap="0.5rem" overflow={"auto"}>
-              <Icon as={sub.icon} fontSize="1rem" />
-              <TruncatedTextWithTooltip
-                fontSize="0.875rem"
-                fontWeight="medium"
-                flex={1}
-              >
-                {sub.title}
-              </TruncatedTextWithTooltip>
-            </Flex>
-
-            {/* Right: Badge or Lock */}
-            {sub.locked ? (
-              <Icon as={LockKeyhole} fontSize="1rem" />
-            ) : sub.badge ? (
-              <Badge colorScheme="teal" fontSize="0.625rem" variant={"subtle"}>
-                {sub.badge}
-              </Badge>
-            ) : null}
-          </Flex>
-        );
-      })}
-    </>
-  );
-};
-
-export default MenuPopoverContent;