pixelize-design-library 2.1.20 → 2.1.21

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

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

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

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

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

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

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

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

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

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