pixelize-design-library 2.1.18 → 2.1.20

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

@@ -0,0 +1,76 @@
+import React, { useRef, useState, useEffect } from "react";
+import { Tooltip, Text, TextProps, Box } from "@chakra-ui/react";
+
+interface TruncatedTextWithTooltipProps extends TextProps {
+  children: string;
+  open?: boolean;
+}
+
+const TruncatedTextWithTooltip: React.FC<TruncatedTextWithTooltipProps> = ({
+  children,
+  open = false,
+  ...props
+}) => {
+  const textRef = useRef<HTMLDivElement>(null);
+  const shadowRef = useRef<HTMLDivElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const checkTruncation = () => {
+      const textEl = textRef.current;
+      const shadowEl = shadowRef.current;
+
+      if (textEl && shadowEl) {
+        const visibleWidth = textEl.offsetWidth;
+        const fullTextWidth = shadowEl.scrollWidth;
+
+        setIsTruncated(fullTextWidth > visibleWidth);
+      }
+    };
+
+    checkTruncation();
+
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    if (textRef.current) {
+      resizeObserver.observe(textRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [children]);
+
+  return (
+    <>
+      <Tooltip label={children} isDisabled={!isTruncated} hasArrow placement="right">
+        <Text
+          ref={textRef}
+          isTruncated
+          whiteSpace="nowrap"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          maxW="100%"
+          {...props}
+        >
+          {children}
+        </Text>
+      </Tooltip>
+
+      <Box
+        ref={shadowRef}
+        position="absolute"
+        visibility="hidden"
+        whiteSpace="nowrap"
+        fontSize={props.fontSize}
+        fontWeight={props.fontWeight}
+        fontFamily={props.fontFamily}
+        lineHeight={props.lineHeight}
+        px={props.px}
+        py={props.py}
+      >
+        {children}
+      </Box>
+    </>
+  );
+};
+
+export default TruncatedTextWithTooltip;
+

package/src/Components/Skeletons/Skeleton.stories.tsx

@@ -0,0 +1,65 @@
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import Skeletons from './Skeletons'; // adjust the import path as necessary
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
+
+// export default {
+//   title: 'Components/Skeletons/Skeletons',
+//   component: Skeletons,
+//   argTypes: {
+//     startColor: { control: 'color' },
+//     endColor: { control: 'color' },
+//     height: { control: 'text' },
+//     isLoaded: { control: 'boolean' },
+//     bg: { control: 'color' },
+//     color: { control: 'color' },
+//     fadeDuration: { control: 'number' },
+//     children: { control: 'text' },
+//     type: { control: { type: 'select', options: ['skeleton', 'circle', 'text'] } },
+//     speed: { control: 'number' },
+//     size: { control: 'text' },
+//     mt: { control: 'text' },
+//     noOfLines: { control: 'number' },
+//     spacing: { control: 'text' },
+//     skeletonHeight: { control: 'text' },
+//   },
+// } as Meta;
+
+// const Template: StoryFn<SkeletonProps> = (args) => (
+//   <ChakraProvider>
+//     <Skeletons {...args} />
+//   </ChakraProvider>
+// );
+
+// export const DefaultSkeleton = Template.bind({});
+// DefaultSkeleton.args = {
+//   type: 'skeleton',
+//   isLoaded: false,
+//   height: '20px',
+//   startColor: 'gray.200',
+//   endColor: 'gray.400',
+//   speed: 1.2,
+//   fadeDuration: 0.4,
+//   children: 'Loading...',
+// };
+
+// export const SkeletonCircle = Template.bind({});
+// SkeletonCircle.args = {
+//   type: 'circle',
+//   isLoaded: false,
+//   size: '40px',
+//   speed: 1.2,
+// };
+
+// export const SkeletonText = Template.bind({});
+// SkeletonText.args = {
+//   type: 'text',
+//   isLoaded: false,
+//   mt: '4',
+//   noOfLines: 4,
+//   spacing: '4',
+//   skeletonHeight: '20px',
+// };
+
+export {};

package/src/Components/Skeletons/SkeletonProps.tsx

@@ -0,0 +1,23 @@
+import {
+    SkeletonProps as ChakraSkeleton,
+    SkeletonTextProps,
+} from "@chakra-ui/react";
+
+export type SkeletonProps = Pick<
+    ChakraSkeleton,
+    | "startColor"
+    | "endColor"
+    | "height"
+    | "isLoaded"
+    | "bg"
+    | "color"
+    | "fadeDuration"
+    | "children"
+    | "speed"
+    | "size"
+    | "mt"
+    | "noOfLines"
+    | "width"
+> & {
+    type: "skeleton" | "circle" | "text";
+} & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/src/Components/Skeletons/Skeletons.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+import { SkeletonProps } from "./SkeletonProps";
+
+export default function Skeletons({
+  startColor,
+  endColor,
+  height = "20px",
+  isLoaded,
+  bg,
+  color,
+  fadeDuration,
+  children,
+  type,
+  speed,
+  size,
+  mt,
+  noOfLines,
+  spacing,
+  skeletonHeight,
+  width,
+}: SkeletonProps) {
+  return (
+    <>
+      {type === "skeleton" && (
+        <Skeleton
+          height={height}
+          isLoaded={isLoaded}
+          bg={bg}
+          color={color}
+          fadeDuration={fadeDuration}
+          startColor={startColor}
+          endColor={endColor}
+          speed={speed}
+          width={width}
+        >
+          {children}
+        </Skeleton>
+      )}
+      {type === "circle" && <SkeletonCircle size={size} speed={speed} />}
+      {type === "text" && (
+        <SkeletonText
+          mt={mt}
+          noOfLines={noOfLines}
+          spacing={spacing}
+          skeletonHeight={skeletonHeight}
+        />
+      )}
+    </>
+  );
+}

package/src/Components/Slider/Slider.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Flex, IconButton, Image } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+type ImageSliderProps = {
+  images: string[];
+  interval?: number;
+  isArrow?: boolean;
+};
+
+const Slider: React.FC<ImageSliderProps> = ({
+  images,
+  interval = 5000,
+  isArrow = false,
+}) => {
+  const { colors } = useCustomTheme();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const nextSlide = () => setCurrentIndex((prev) => (prev + 1) % images.length);
+  const prevSlide = () =>
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+
+  useEffect(() => {
+    if (interval > 0) {
+      timeoutRef.current = setTimeout(nextSlide, interval);
+    }
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [currentIndex, interval]);
+
+  return (
+    <Box
+      position="relative"
+      w="100vw"
+      h="30rem"
+      overflow="hidden"
+    >
+      <Flex
+        w={`${images.length * 100}vw`}
+        transform={`translateX(-${currentIndex * 100}vw)`}
+        transition="transform 0.5s ease"
+      >
+        {images.map((src, idx) => (
+          <Box
+            key={idx}
+            w="100vw"
+            h="30rem"
+            flexShrink={0}
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Image
+              src={src}
+              alt={`Slide ${idx + 1}`}
+              objectFit="cover"
+              w="100vw"
+              h="100%"
+            />
+          </Box>
+        ))}
+      </Flex>
+
+      {isArrow && (
+        <>
+          <IconButton
+            icon={<ChevronLeft color={colors?.gray?.[800]} />}
+            aria-label="Previous Slide"
+            onClick={prevSlide}
+            position="absolute"
+            top="50%"
+            left="1rem"
+            transform="translateY(-50%)"
+            zIndex={2}
+            variant="ghost"
+            _hover={{ bg: colors?.gray?.[200] }}
+          />
+          <IconButton
+            icon={<ChevronRight color={colors?.gray?.[800]} />}
+            aria-label="Next Slide"
+            onClick={nextSlide}
+            position="absolute"
+            top="50%"
+            right="1rem"
+            transform="translateY(-50%)"
+            zIndex={2}
+            variant="ghost"
+            _hover={{ bg: colors?.gray?.[200] }}
+          />
+        </>
+      )}
+
+      <Flex
+        position="absolute"
+        bottom="1rem"
+        left="50%"
+        transform="translateX(-50%)"
+        gap="0.5rem"
+        zIndex={2}
+      >
+        {images.map((_, idx) => (
+          <Box
+            key={idx}
+            w="0.8rem"
+            h="0.8rem"
+            bg={idx === currentIndex ? "white" : "whiteAlpha.600"}
+            borderRadius="full"
+            cursor="pointer"
+            onClick={() => setCurrentIndex(idx)}
+            transition="all 0.3s"
+          />
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+export default Slider;

package/src/Components/Switch/Switch.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { SwitchProps } from "./SwitchProps";
+
+const SwitchContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: auto;
+  background-color: white;
+  border-radius: 20px;
+  overflow: hidden;
+`;
+
+const Highlight = styled.div<{
+  position: "left" | "right";
+  //backgroundColor: string
+}>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  background-color: #eff7ff;
+  border-radius: 16px;
+  border: 1px solid #88c9f3;
+  transition: transform 0.3s ease;
+  transform: ${({ position }) =>
+    position === "left" ? "translateX(0%)" : "translateX(100%)"};
+`;
+// background-color: ${({ backgroundColor }) => backgroundColor};
+const SwitchList = styled.ul`
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 1px;
+  height: 100%;
+  z-index: 1;
+`;
+
+const SwitchOption = styled.li<{ isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 110px;
+  height: 100%;
+  color: black;
+  transition: color 0.3s ease;
+  font-weight: 400;
+  padding: 2px;
+  font-size: 14px;
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      font-weight: 600;
+      background-color: transparent;
+      z-index: 1;
+    `}
+`;
+const SwitchContainerHeader = styled.div`
+  background-color: white;
+  height: auto;
+  padding: 1px;
+  width: 200px;
+  border-radius: 20px;
+  border: 1px solid #e2e7ee;
+`;
+
+export default function Switch({
+  leftText,
+  rightText,
+  leftIcon,
+  rightIcon,
+  onSwitchToggle,
+  switchActive,
+  //highlightColor = "#3182ce",
+}: SwitchProps) {
+  return (
+    <SwitchContainerHeader>
+      <SwitchContainer>
+        <Highlight
+          position={switchActive}
+          //backgroundColor={highlightColor}
+        />
+        <SwitchList>
+          <SwitchOption
+            isActive={switchActive === "left"}
+            onClick={() => onSwitchToggle("left")}
+          >
+            {leftIcon}
+            {leftText}
+          </SwitchOption>
+          <SwitchOption
+            isActive={switchActive === "right"}
+            onClick={() => onSwitchToggle("right")}
+          >
+            {rightIcon}
+            {rightText}
+          </SwitchOption>
+        </SwitchList>
+      </SwitchContainer>
+    </SwitchContainerHeader>
+  );
+}

package/src/Components/Switch/SwitchProps.tsx

@@ -0,0 +1,28 @@
+export type SwitchProps = {
+  leftText: string;
+  rightText: string;
+  leftIcon?: JSX.Element;
+  rightIcon?: JSX.Element;
+  onSwitchToggle: (value: "left" | "right") => void;
+  switchActive: "left" | "right";
+  // className?: string;
+  // highlightColor?: string;
+  // leftColor?: string;
+  // rightColor?: string;
+  // leftBgColor?: string;
+  // rightBgColor?: string;
+  // leftHoverColor?: string;
+  // rightHoverColor?: string;
+  // leftHoverBgColor?: string;
+  // rightHoverBgColor?: string;
+  // leftActiveColor?: string;
+  // rightActiveColor?: string;
+  // leftActiveBgColor?: string;
+  // rightActiveBgColor?: string;
+  // leftActiveHoverColor?: string;
+  // rightActiveHoverColor?: string;
+  // leftActiveHoverBgColor?: string;
+  // rightActiveHoverBgColor?: string;
+  // leftBorderColor?: string;
+  // rightBorderColor?: string;
+};

package/src/Components/Table/Components/HeaderActions.tsx

@@ -0,0 +1,79 @@
+import { Box } from "@chakra-ui/react";
+import { SquarePen, Trash2 } from "lucide-react";
+import React from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { HeaderActionsProps } from "../TableProps";
+
+const ListItem = ({
+  icon,
+  name,
+  onClick,
+  selections,
+}: {
+  icon: React.ReactElement;
+  name: string;
+  onClick?: (selection: (string | number)[]) => void;
+  selections: (string | number)[];
+}) => {
+  const { colors }: any = useCustomTheme();
+
+  const styledIcon = React.cloneElement(icon, {
+    color: colors?.text?.[500],
+    size: "1.25rem",
+  });
+  return (
+    <Box
+      display={"flex"}
+      alignItems={"center"}
+      gap={"0.375rem"}
+      onClick={() => onClick && onClick(selections)}
+      cursor={"pointer"}
+    >
+      {styledIcon} {name}
+    </Box>
+  );
+};
+
+const HeaderActions = ({
+  actions,
+  selections,
+}: {
+  actions?: HeaderActionsProps;
+  selections: (string | number)[];
+}) => {
+  const { colors }: any = useCustomTheme();
+
+  return (
+    <Box
+      display={"flex"}
+      gap={4}
+      fontSize={"0.875rem"}
+      fontWeight={400}
+      color={colors?.secondary?.[500]}
+    >
+      {actions?.isDelete?.enabled && (
+        <ListItem
+          icon={<Trash2 />}
+          name={"Delete"}
+          onClick={actions?.isDelete?.onClick}
+          selections={selections}
+        />
+      )}
+      {actions?.isUpdate?.enabled && (
+        <ListItem
+          icon={<SquarePen />}
+          name={"Mass Update"}
+          onClick={actions?.isUpdate?.onClick}
+          selections={selections}
+        />
+      )}
+      {actions?.items?.length
+        ? actions?.items?.map((item) => (
+            <ListItem {...item} selections={selections} />
+          ))
+        : null}
+    </Box>
+  );
+};
+
+export default HeaderActions;

package/src/Components/Table/Components/Pagination.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Flex, IconButton, Select, Text } from "@chakra-ui/react";
+import { TableProps } from "../TableProps";
+import { pageSizeCalculation } from "../../../Utils/table";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
+  paginationText: string;
+  handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  rowsPerPage: number;
+  currentPage: number;
+  pages: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  dataLength: number;
+  isServerPagination: boolean;
+};
+
+const Pagination = ({
+  paginationText,
+  handlePageSizeChange,
+  rowsPerPage,
+  currentPage,
+  pages,
+  setCurrentPage,
+  dataLength,
+  isServerPagination,
+}: PaginationProps) => {
+  const pageSizeOptions = pageSizeCalculation(dataLength);
+  const isLeftDisabled = currentPage === 0;
+  const isRightDisabled = currentPage >= pages - 1;
+  return (
+    <Flex justify="flex-end" align="center">
+      {!isServerPagination && (
+        <Select
+          onChange={handlePageSizeChange}
+          value={rowsPerPage}
+          size={"xs"}
+          borderRadius={3}
+          width={20}
+        >
+          {dataLength < 100 ? <option value={0}></option> : null}
+          {pageSizeOptions.map((size, index) => (
+            <option key={index} value={size}>
+              {size}
+            </option>
+          ))}
+        </Select>
+      )}
+      <Flex>
+        <IconButton
+          aria-label="left-icon"
+          color={isLeftDisabled ? "gray" : "black"}
+          rounded={"full"}
+          variant={isLeftDisabled ? "plain" : "ghost"}
+          onClick={() => setCurrentPage(0)}
+        >
+          <ChevronsLeft />
+        </IconButton>
+        <IconButton
+          aria-label="left-icon"
+          color={isLeftDisabled ? "gray" : "black"}
+          rounded={"full"}
+          variant={isLeftDisabled ? "plain" : "ghost"}
+          onClick={() => currentPage > 0 && setCurrentPage(currentPage - 1)}
+        >
+          <ChevronLeft />
+        </IconButton>
+        <Text mt={3} fontSize={12}>
+          {paginationText}
+        </Text>
+        <IconButton
+          aria-label="left-icon"
+          color={isRightDisabled ? "gray" : "black"}
+          rounded={"full"}
+          variant={isRightDisabled ? "plain" : "ghost"}
+          onClick={() =>
+            currentPage < pages - 1 && setCurrentPage(currentPage + 1)
+          }
+        >
+          <ChevronRight />
+        </IconButton>
+        <IconButton
+          aria-label="left-icon"
+          color={isRightDisabled ? "gray" : "black"}
+          rounded={"full"}
+          variant={isRightDisabled ? "plain" : "ghost"}
+          onClick={() => setCurrentPage(pages - 1)}
+        >
+          <ChevronsRight />
+        </IconButton>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Pagination;