pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/SideBar/SideBar.tsx

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

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

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

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

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

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