pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Loading/Loading.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { Box, Center, Spinner, Text } from "@chakra-ui/react";
-import { LoadingProps } from "./LoadingProps";
-import { css, keyframes } from "@emotion/react";
-
-// const blurAnimation = keyframes`
-//   0% {
-//     filter: blur(0);
-//   }
-//   50% {
-//     filter: blur(2px);
-//   }
-//   100% {
-//     filter: blur(0);
-//   }
-// `;
-
-const colorTransition = keyframes`
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
-`;
-
-export default function Loading({ text, isLoading, onlytext }: LoadingProps) {
-  if (!isLoading) {
-    return null;
-  }
-  return (
-    <Box
-      position="fixed"
-      top="0"
-      right="0"
-      bottom="0"
-      left="0"
-      backgroundColor="rgba(0, 0, 0, 0.4)"
-      backdropFilter="blur(60px)"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      zIndex="9999"
-    >
-      <Center height="100vh">
-        {!onlytext ? (
-          <>
-            <Spinner
-              thickness="4px"
-              speed="0.65s"
-              emptyColor="gray.200"
-              color="blue.500"
-              size="xl"
-            />
-            <Text mt="2" ml={"5"}>
-              {text}
-            </Text>
-          </>
-        ) : (
-          <Text
-            mt="2"
-            ml={"5"}
-            fontSize="50px"
-            textTransform={"uppercase"}
-            fontWeight={500}
-            css={css`
-              animation: ${colorTransition} 2s infinite;
-            `}
-          >
-            {text}
-          </Text>
-        )}
-      </Center>
-    </Box>
-  );
-}

package/src/Components/Loading/LoadingProps.tsx

@@ -1,5 +0,0 @@
-export type LoadingProps = {
-  text?: string;
-  isLoading: boolean;
-  onlytext?: boolean;
-};

package/src/Components/Modal/Modal.stories.tsx

@@ -1,107 +0,0 @@
-// import React, { useState } from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import Modal from './Modal';
-// import { ChakraProvider, Button } from '@chakra-ui/react';
-// import { ChakraModelProps } from './ModalProps';
-
-// export default {
-//     title: 'Components/Modal/Modal',
-//     component: Modal,
-//     argTypes: {
-//         size: {
-//             control: 'select',
-//             options: ['xs', 'sm', 'md', 'lg', 'xl', 'full'],
-//             defaultValue: 'md',
-//         },
-//         isOpen: {
-//             control: 'boolean',
-//             defaultValue: false,
-//         },
-//         title: {
-//             control: 'text',
-//             defaultValue: 'Modal Title',
-//         },
-//         overlaybg: {
-//             control: 'text',
-//             defaultValue: 'blackAlpha.300',
-//         },
-//         overlaybackdropFilter: {
-//             control: 'text',
-//             defaultValue: 'blur(10px) hue-rotate(90deg)',
-//         },
-//         overlaybackdropInvert: {
-//             control: 'text',
-//             defaultValue: '0%',
-//         },
-//         overlaybackdropBlur: {
-//             control: 'text',
-//             defaultValue: '0px',
-//         },
-//         isCentered: {
-//             control: 'boolean',
-//             defaultValue: true,
-//         },
-//         blockScrollOnMount: {
-//             control: 'boolean',
-//             defaultValue: true,
-//         },
-//         closeOnOverlayClick: {
-//             control: 'boolean',
-//             defaultValue: true,
-//         },
-//         motionPreset: {
-//             control: 'text',
-//             defaultValue: 'scale',
-//         },
-//         scrollBehavior: {
-//             control: 'text',
-//             defaultValue: 'inside',
-//         },
-//         footer: {
-//             control: 'text',
-//             defaultValue: 'Footer Content',
-//         },
-//         children: {
-//             control: 'text',
-//             defaultValue: 'This is the body of the modal',
-//         },
-//     },
-// } as Meta;
-
-// interface StoryProps extends ChakraModelProps {
-//     footer: React.ReactNode;
-// }
-
-// const Template: StoryFn<StoryProps> = (args) => {
-//     const [isOpen, setIsOpen] = useState(args.isOpen);
-
-//     const handleClose = () => setIsOpen(false);
-//     const handleOpen = () => setIsOpen(true);
-
-//     return (
-//         <ChakraProvider>
-//             <Button onClick={handleOpen}>Open Modal</Button>
-//             <Modal {...args} isOpen={isOpen} onClose={handleClose} footer={<Button onClick={handleClose}>Footer Button</Button>}>
-//                 {args.children}
-//             </Modal>
-//         </ChakraProvider>
-//     );
-// };
-
-// export const Default = Template.bind({});
-// Default.args = {
-//     size: 'md',
-//     title: 'Modal Title',
-//     overlaybg: 'blackAlpha.300',
-//     overlaybackdropFilter: 'blur(10px) hue-rotate(90deg)',
-//     overlaybackdropInvert: '0%',
-//     overlaybackdropBlur: '0px',
-//     isCentered: true,
-//     blockScrollOnMount: true,
-//     closeOnOverlayClick: true,
-//     motionPreset: 'scale',
-//     scrollBehavior: 'inside',
-//     footer: <Button onClick={() => alert('Footer button clicked')}>Footer Button</Button>,
-//     children: 'This is the body of the modal',
-// };
-export {};

package/src/Components/Modal/Modal.tsx

@@ -1,107 +0,0 @@
-import React, { ReactElement } from "react";
-import {
-  Modal as ChakraModal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader as ChakraModalHeader,
-  ModalCloseButton,
-  ModalBody as ChakraModalBody,
-  ModalFooter as ChakraModalFooter,
-  Spinner,
-} from "@chakra-ui/react";
-import { ChakraModelProps } from "./ModalProps";
-
-export const ModalHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>;
-};
-export const ModalBody: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>;
-};
-export const ModalFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>;
-};
-
-export default function Modal({
-  size,
-  isOpen = false,
-  onClose,
-  overlaybg = "blackAlpha.300",
-  overlaybackdropFilter = "blur(10px) hue-rotate(90deg)",
-  overlaybackdropInvert,
-  overlaybackdropBlur,
-  isCentered,
-  finalFocusRef,
-  blockScrollOnMount,
-  initialFocusRef,
-  closeOnOverlayClick,
-  motionPreset,
-  scrollBehavior,
-  children,
-  isLoading,
-}: ChakraModelProps) {
-  if (!isOpen) return <></>;
-
-  const isReactElement = (child: React.ReactNode): child is ReactElement => {
-    return child !== null && typeof child === "object" && "type" in child;
-  };
-  const header = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ModalHeader,
-  );
-  const body = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ModalBody,
-  );
-  const footer = React.Children.toArray(children).find(
-    (child) => isReactElement(child) && child.type === ModalFooter,
-  );
-
-  return (
-    <ChakraModal
-      isOpen={true}
-      onClose={onClose}
-      size={size}
-      isCentered={isCentered}
-      finalFocusRef={finalFocusRef}
-      blockScrollOnMount={blockScrollOnMount}
-      initialFocusRef={initialFocusRef}
-      closeOnOverlayClick={closeOnOverlayClick}
-      motionPreset={motionPreset}
-      scrollBehavior={scrollBehavior}
-    >
-      <ModalOverlay
-        bg={overlaybg}
-        backdropFilter={overlaybackdropFilter}
-        backdropInvert={overlaybackdropInvert}
-        backdropBlur={overlaybackdropBlur}
-      />
-      <ModalContent>
-        {isLoading ? (
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100%",
-              width: "100%",
-              padding: "25%",
-            }}
-          >
-            <Spinner
-              thickness="4px"
-              speed="0.65s"
-              emptyColor="gray.200"
-              color="blue.500"
-              size="xl"
-            />
-          </div>
-        ) : (
-          <>
-            {header && <ChakraModalHeader>{header}</ChakraModalHeader>}
-            <ModalCloseButton />
-            <ChakraModalBody>{body}</ChakraModalBody>
-            {footer && <ChakraModalFooter>{footer}</ChakraModalFooter>}
-          </>
-        )}
-      </ModalContent>
-    </ChakraModal>
-  );
-}

package/src/Components/Modal/ModalProps.tsx

@@ -1,22 +0,0 @@
-import { ModalProps } from "@chakra-ui/react";
-
-export type ChakraModelProps = Pick<
-  ModalProps,
-  | "isOpen"
-  | "onClose"
-  | "finalFocusRef"
-  | "blockScrollOnMount"
-  | "initialFocusRef"
-  | "closeOnOverlayClick"
-  | "isCentered"
-  | "motionPreset"
-  | "scrollBehavior"
-> & {
-  overlaybg?: string;
-  overlaybackdropFilter?: string;
-  overlaybackdropInvert?: string;
-  overlaybackdropBlur?: string;
-  size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
-  children?: React.ReactNode;
-  isLoading?: boolean;
-};

package/src/Components/MultiSelect/MultiSelect.tsx

@@ -1,154 +0,0 @@
-import React, {
-  useState,
-  KeyboardEvent,
-  ChangeEvent,
-  useRef,
-  useEffect,
-} from "react";
-import {
-  Box,
-  Flex,
-  Tag,
-  TagLabel,
-  TagCloseButton,
-  Input,
-  Text,
-} from "@chakra-ui/react";
-import { MultiSelctOPtions, MultiSelectProps } from "./MultiSelectProps";
-import { TextLabel } from "../Common/FormLabel";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-
-const generateUniqueId = (() => {
-  let counter = 0;
-  return () => {
-    counter += 1;
-    return `${Date.now()}-${counter}`;
-  };
-})();
-
-export default function MultiSelect({
-  value,
-  onValueChange,
-  width = "100%",
-  label = "label",
-  isRequired = true,
-  isInformation = false,
-  informationMessage = "",
-  name,
-  id,
-  placeholderText = "Type valid email and press enter",
-  isDisabled,
-  isReadOnly,
-  size,
-  inputStyle,
-}: MultiSelectProps) {
-  const theme = useCustomTheme();
-
-  const getPadding = () => {
-    return "0.5rem";
-  };
-
-  const [options, setOptions] = useState<MultiSelctOPtions[]>(value);
-  const [inputValue, setInputValue] = useState<string>("");
-  const [error, setError] = useState<string>("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setOptions(value);
-  }, [value]);
-
-  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setError("");
-  };
-
-  const validateEmail = (email: string) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && inputValue.trim() !== "") {
-      if (!validateEmail(inputValue)) {
-        setError("Invalid email address");
-        return;
-      }
-      const existingOption = options.find(
-        (option) => option.label === inputValue
-      );
-      if (!existingOption) {
-        const newOption = { id: generateUniqueId(), label: inputValue };
-        const updatedOptions = [...options, newOption];
-        setOptions(updatedOptions);
-        onValueChange(updatedOptions);
-        setInputValue("");
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
-      }
-    } else if (e.key === "Backspace" && inputValue === "") {
-      const updatedOptions = options.slice(0, -1); // Remove the last item
-      setOptions(updatedOptions);
-      onValueChange(updatedOptions);
-    }
-  };
-
-  const handleRemove = (optionToRemove: MultiSelctOPtions) => {
-    const updatedOptions = options.filter(
-      (option) => option.id !== optionToRemove.id
-    );
-    setOptions(updatedOptions);
-    onValueChange(updatedOptions);
-  };
-
-  return (
-    <Box width={width} borderRadius="md" backgroundColor="white">
-      {label && (
-        <TextLabel
-          label={label}
-          isRequired={isRequired}
-          isInformation={isInformation}
-          informationMessage={informationMessage}
-        />
-      )}
-      <Flex wrap="wrap" gap={2}>
-        {options.map((option) => (
-          <Tag key={option.id} size="md" variant="solid" colorScheme="gray">
-            <TagLabel>{option.label}</TagLabel>
-            <TagCloseButton onClick={() => handleRemove(option)} />
-          </Tag>
-        ))}
-      </Flex>
-      <Input
-        ref={inputRef}
-        type="text"
-        value={inputValue}
-        isDisabled={isDisabled}
-        isReadOnly={isReadOnly}
-        id={id}
-        name={name}
-        size={size}
-        style={{
-          ...inputStyle,
-          backgroundColor: theme.colors.backgroundColor.light,
-          fontWeight: 600,
-          color: theme.colors.gray[600],
-          padding: getPadding(),
-          fontSize: 15,
-          letterSpacing: 0.7,
-          borderRadius: "0.125rem",
-        }}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholderText}
-        marginTop={2}
-        marginLeft={1}
-      />
-      {error && (
-        <Text color="red.500" marginTop={2} marginLeft={1}>
-          {error}
-        </Text>
-      )}
-    </Box>
-  );
-}

package/src/Components/MultiSelect/MultiSelectProps.tsx

@@ -1,20 +0,0 @@
-export type MultiSelectProps = {
-  value: MultiSelctOPtions[];
-  onValueChange: (options: MultiSelctOPtions[]) => void;
-  width?: string;
-  label?: string;
-  id?: string;
-  name?: string;
-  isRequired?: boolean;
-  isInformation?: boolean;
-  informationMessage?: string;
-  placeholderText?: string;
-  isDisabled?: boolean;
-  isReadOnly?: boolean;
-  size?: string;
-  inputStyle?: {};
-};
-export type MultiSelctOPtions = {
-  id: string;
-  label: string;
-};

package/src/Components/NavigationBar/NavBar.stories.tsx

@@ -1,27 +0,0 @@
-// // NavBar.stories.tsx
-
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import NavBar from './NavigationBar';
-// import { NavbarProps } from './NavigationBarProps';
-
-// export default {
-//     title: 'Components/NavBar/NavBar',
-//     component: NavBar,
-// } as Meta;
-
-// const Template: StoryFn<NavbarProps> = (args) => <NavBar {...args} />;
-
-// export const Default = Template.bind({});
-// Default.args = {
-//     userAvathar: 'https://example.com/avatar.jpg',
-//     userName: 'John Doe',
-//     navMenu: [
-//         { title: 'Menu 1', url: '/menu1' },
-//         { title: 'Menu 2', url: '/menu2' },
-//     ],
-//     handleNavOnClick: (url: string) => console.log(`Navigate to ${url}`),
-//     handleLogout: () => console.log('Logout'),
-//     logoutText: 'Logout',
-// };
-export {};

package/src/Components/NavigationBar/NavigationBar.tsx

@@ -1,125 +0,0 @@
-import React from "react";
-import {
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuList,
-  Stack,
-  Text,
-} from "@chakra-ui/react";
-import { MenuProps, NavbarProps } from "./NavigationBarProps";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { CircleArrowLeft, LogOut } from "lucide-react";
-
-export default function NavBar({
-  userAvathar,
-  userName,
-  navMenu,
-  moreIcon,
-  handleNavOnClick,
-  handleLogout,
-  logoutText,
-  navigationBarText,
-}: NavbarProps) {
-  const theme = useCustomTheme();
-  return (
-    <Box
-      bg={theme.colors.backgroundColor.light}
-      px={4}
-      boxShadow={theme.shadows.sm}
-    >
-      <Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
-        <Box display={"flex"} gap={1.5} alignItems={"center"}>
-          {navigationBarText?.onIconClick && (
-            <Box
-              width={"1.5rem"}
-              height={"1.5rem"}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              cursor={"pointer"}
-              onClick={() => navigationBarText?.onIconClick?.()}
-            >
-              <CircleArrowLeft
-                size={"1.25rem"}
-                color={theme?.colors?.text?.[500]}
-              />
-            </Box>
-          )}
-          {navigationBarText?.text && (
-            <Text
-              color={theme?.colors?.secondary?.[500]}
-              fontSize={"1.25rem"}
-              fontWeight={600}
-              fontFamily={"open-sans, sans-serif"}
-              letterSpacing={"-0.013rem"}
-            >
-              {navigationBarText?.text}
-            </Text>
-          )}
-        </Box>
-        <Flex>
-          <Stack direction={"row"} alignItems={"center"} spacing={7}>
-            <Menu>
-              <Box cursor={"pointer"}>{moreIcon}</Box>
-              <MenuButton
-                as={Button}
-                rounded={"full"}
-                variant={"link"}
-                cursor={"pointer"}
-                minW={0}
-              >
-                <Avatar size={"sm"} name={userName} src={userAvathar} />
-              </MenuButton>
-              <MenuList alignItems={"center"} zIndex={5}>
-                <Center py={4}>
-                  <Avatar size={"xl"} name={userName} src={userAvathar} />
-                </Center>
-                <Center>
-                  <Text fontWeight={500}>{userName}</Text>
-                </Center>
-                <MenuDivider />
-                {navMenu?.map((menu: MenuProps) => (
-                  <MenuItem
-                    onClick={() => handleNavOnClick(menu.url)}
-                    key={menu.title}
-                    sx={{
-                      fontWeight: 500,
-                      gap: theme.space["2"],
-                    }}
-                    _hover={{
-                      backgroundColor: theme.colors.primary["50"],
-                    }}
-                  >
-                    {menu.icon && <Box>{menu?.icon}</Box>}
-                    <Box>{menu.title}</Box>
-                  </MenuItem>
-                ))}
-                <MenuDivider />
-                <MenuItem
-                  onClick={handleLogout}
-                  sx={{
-                    fontWeight: 500,
-                    gap: theme.space["2"],
-                  }}
-                  _hover={{
-                    backgroundColor: theme.colors.primary["50"],
-                  }}
-                >
-                  <Box>{<LogOut size={16} />}</Box>
-                  <Box>{logoutText}</Box>
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          </Stack>
-        </Flex>
-      </Flex>
-    </Box>
-  );
-}

package/src/Components/NavigationBar/NavigationBarProps.tsx

@@ -1,19 +0,0 @@
-export type NavbarProps = {
-  userAvathar: string;
-  userName: string;
-  navMenu: MenuProps[];
-  moreIcon?: any;
-  handleNavOnClick: (url: string) => void;
-  handleLogout: () => void;
-  logoutText: string;
-  navigationBarText?: {
-    text: string;
-    onIconClick?: () => void;
-  };
-};
-
-export type MenuProps = {
-  title: string;
-  url: string;
-  icon?: React.ReactNode;
-};