pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Dropdown/DropDown.tsx

@@ -1,189 +0,0 @@
-import React, { forwardRef, useEffect, useRef } from "react";
-import {
-  Box,
-  Flex,
-  Button,
-  Icon,
-  useDisclosure,
-  List,
-  ListItem,
-  BoxProps,
-} from "@chakra-ui/react";
-import { DropdownProps } from "./DropdownProps";
-import { motion } from "framer-motion";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { ChevronDown } from "lucide-react";
-
-const MotionBox = motion(
-  forwardRef<HTMLDivElement, BoxProps>((props, ref) => (
-    <Box ref={ref} {...props} />
-  ))
-);
-
-const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      dropDownButtonStyle,
-      ButtonText,
-      options,
-      handleOptionSelect,
-      dropdownType = "button",
-      text,
-      DropdownIcon,
-      isVisibleIconShow = true,
-      buttonProps,
-      headStyle,
-      ListStyle,
-      ItemStyle,
-      LabelStyle,
-      ImageStyle,
-      optionsSize = "lg",
-      divider = false,
-    },
-    ref
-  ) => {
-    const theme = useCustomTheme();
-    const { isOpen, onToggle, onClose } = useDisclosure();
-    const dropdownRef = useRef<HTMLDivElement>(null);
-
-    const handleListItemClick = (
-      optionId: string | number,
-      optionLabel: string
-    ) => {
-      onClose();
-      handleOptionSelect(optionId, optionLabel);
-    };
-
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (
-          dropdownRef.current &&
-          !dropdownRef.current.contains(event.target as Node)
-        ) {
-          onClose();
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [dropdownRef, onClose]);
-
-    const dropDownToggleOption = () => {
-      const ButtonToggle = (
-        <Button
-          onClick={onToggle}
-          style={{
-            backgroundColor: theme.colors.primary[500],
-            ...dropDownButtonStyle,
-          }}
-          rightIcon={
-            isVisibleIconShow ? (
-              <Icon
-                as={ChevronDown}
-                transform={isOpen ? "rotate(180deg)" : "rotate(0deg)"}
-              />
-            ) : undefined
-          }
-          {...buttonProps}
-        >
-          {DropdownIcon} &nbsp; {ButtonText}
-        </Button>
-      );
-
-      const TextToggle = (
-        <Flex
-          onClick={onToggle}
-          align="center"
-          style={dropDownButtonStyle}
-          cursor="pointer"
-        >
-          {DropdownIcon} {text}
-          {isVisibleIconShow && <Icon as={ChevronDown} />}
-        </Flex>
-      );
-
-      return dropdownType === "button" ? ButtonToggle : TextToggle;
-    };
-
-    const DropdownContentRender = () => {
-      return (
-        <List
-          bg={theme.colors?.backgroundColor?.light}
-          border={`1px solid ${theme.colors?.gray[300]}`}
-          borderRadius={theme.radii.md}
-          shadow={theme.shadows.lg}
-          py={2}
-          mt={"0.2rem"}
-          minWidth="200px"
-          style={ListStyle}
-        >
-          {options.map((option) => (
-            <ListItem
-              key={option.id}
-              onClick={() => handleListItemClick(option.id, option.label)}
-              p={optionsSize === "sm" ? 1 : 2}
-              px={2}
-              _hover={{
-                bg: theme.colors.gray[100],
-                color: theme.colors.blue[500],
-              }}
-              display="flex"
-              alignItems="center"
-              cursor="pointer"
-              style={ItemStyle}
-              borderBottom={
-                divider ? `1px solid ${theme.colors?.gray[300]}` : undefined
-              }
-              sx={{
-                "&:last-child": {
-                  borderBottom: "none",
-                },
-              }}
-            >
-              {option?.image && (
-                <Icon
-                  as={option.image}
-                  boxSize={optionsSize === "sm" ? "1.1rem" : "1.5rem"}
-                  mr={2}
-                  style={ImageStyle}
-                />
-              )}
-              <Box
-                as="span"
-                fontSize={optionsSize === "sm" ? "14px" : "16px"}
-                isTruncated
-                style={LabelStyle}
-              >
-                {option.label}
-              </Box>
-            </ListItem>
-          ))}
-        </List>
-      );
-    };
-
-    return (
-      <Box ref={dropdownRef} position="relative" display="inline-block">
-        {dropDownToggleOption()}
-        {isOpen && (
-          <MotionBox
-            ref={ref}
-            position="absolute"
-            zIndex={5}
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            style={headStyle}
-          >
-            {DropdownContentRender()}
-          </MotionBox>
-        )}
-      </Box>
-    );
-  }
-);
-
-Dropdown.displayName = "Dropdown";
-
-export default Dropdown;

package/src/Components/Dropdown/DropdownProps.tsx

@@ -1,26 +0,0 @@
-import { ButtonProps } from "@chakra-ui/react";
-
-export type DropdownProps = {
-  ButtonText?: string;
-  options: Option[];
-  handleOptionSelect: (id: string | number, label: string) => void;
-  dropdownType?: "button" | "text";
-  text?: string;
-  DropdownIcon?: JSX.Element;
-  dropDownButtonStyle?: React.CSSProperties;
-  isVisibleIconShow?: boolean;
-  buttonProps?: ButtonProps;
-  headStyle?: React.CSSProperties;
-  ListStyle?: React.CSSProperties;
-  ItemStyle?: React.CSSProperties;
-  LabelStyle?: React.CSSProperties;
-  ImageStyle?: React.CSSProperties;
-  optionsSize?: "sm" | "md";
-  divider?: boolean;
-};
-
-type Option = {
-  id: string | number;
-  label: string;
-  image?: React.ElementType;
-};

package/src/Components/Editor/Editor.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import JoditEditor from "jodit-react";
-import { EditorProps } from "./EditorProps";
-
-export default function Editor({
-  value,
-  config,
-  editorRef,
-  className,
-  onChange,
-  onBlur,
-}: EditorProps) {
-  return (
-    <JoditEditor
-      config={config}
-      value={value}
-      ref={editorRef}
-      className={className}
-      onChange={onChange}
-      onBlur={onBlur}
-    />
-  );
-}

package/src/Components/Editor/EditorProps.tsx

@@ -1,8 +0,0 @@
-import { IJoditEditorProps } from "jodit-react";
-
-export type EditorProps = Pick<
-  IJoditEditorProps,
-  "value" | "config" | "className" | "onChange" | "onBlur"
-> & {
-  editorRef?: React.RefObject<any>;
-};

package/src/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import { MailCheck } from "lucide-react";
-export default function VerifyEmailOtp({
-  resendMail,
-  onChange,
-  onComplete,
-  placeholder = "",
-  pins = 5,
-  description,
-  title,
-  isDisabled = false,
-  isInvalid = false,
-  styles,
-}: VerifyEmailOtpProps) {
-  const theme = useCustomTheme();
-  return (
-    <div style={styles}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "3%",
-        }}
-      >
-        <div style={{ padding: "3%" }}>
-          <MailCheck size="100" color={theme.colors.primary[500]} />
-        </div>
-        <h1
-          style={{ fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" }}
-        >
-          {title}
-        </h1>
-        <p style={{ textAlign: "center", marginBottom: "2%" }}>
-          {description}
-          <br />
-          {" your new Pixel Account"}
-        </p>
-        <div style={{ marginBottom: "2%" }}>
-          <HStack>
-            <PinInput
-              placeholder={placeholder}
-              onChange={onChange}
-              onComplete={onComplete}
-              isDisabled={isDisabled}
-              isInvalid={isInvalid}
-            >
-              {Array.from({ length: pins }).map((_, index) => (
-                <PinInputField key={index} />
-              ))}
-            </PinInput>
-          </HStack>
-        </div>
-        <p style={{ textAlign: "center", marginBottom: "2%" }}>
-          Didn't receive the code?{" "}
-          <button
-            onClick={() => resendMail()}
-            style={{
-              background: "none",
-              color: theme.colors.primary[700],
-              border: "none",
-              padding: "0",
-              font: "inherit",
-              cursor: "pointer",
-              outline: "inherit",
-            }}
-          >
-            Resend Code
-          </button>
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.tsx

@@ -1,12 +0,0 @@
-export type VerifyEmailOtpProps = {
-  resendMail: () => void;
-  onChange: (value: string) => void;
-  onComplete: (value: string) => void;
-  placeholder?: string;
-  pins: number;
-  title: string;
-  description: string;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  styles?: React.CSSProperties;
-};

package/src/Components/FileUpload/FileUpload.tsx

@@ -1,282 +0,0 @@
-import React, { useCallback } from "react";
-import {
-  Box,
-  Text,
-  VStack,
-  Icon,
-  List,
-  ListItem,
-  ListIcon,
-  CloseButton,
-  HStack,
-  Progress,
-  useDisclosure,
-  Image,
-} from "@chakra-ui/react";
-import { useDropzone } from "react-dropzone";
-import { Upload, FileText, Eye } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import { mimeMap, toMB } from "./constants";
-import { FileUploaderProps, MimeExtension } from "./FileUploadProps";
-import Modal, { ModalBody, ModalHeader } from "../Modal/Modal";
-
-const FileUpload: React.FC<FileUploaderProps> = ({
-  onFilesUploaded,
-  uploadedFiles,
-  onRemoveFile,
-  acceptTypes = [".jpg", ".png"],
-  maxSizeKB = 5,
-  maxFiles = undefined,
-  progress = {},
-}) => {
-  const { colors } = useCustomTheme();
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const [previewUrl, setPreviewUrl] = React.useState<string | null>(null);
-  const [previewTitle, setPreviewTitle] = React.useState<string | null>(null);
-
-  const [errors, setErrors] = React.useState<string[]>([]);
-
-  const bg = colors?.gray?.[50];
-  const border = colors?.gray?.[300];
-
-  const mappedAccept = acceptTypes.reduce(
-    (acc, ext) => {
-      const mime = mimeMap[ext as MimeExtension];
-      if (mime) {
-        acc[mime] = []; // File dropzone format
-      }
-      return acc;
-    },
-    {} as Record<string, string[]>
-  );
-
-  const onDrop = useCallback(
-    (acceptedFiles: File[]) => {
-      setErrors([]);
-
-      const totalFiles = uploadedFiles.length + acceptedFiles.length;
-      if (maxFiles && totalFiles > maxFiles) {
-        setErrors([
-          `Maximum ${maxFiles} files allowed. You already uploaded ${uploadedFiles.length}.`,
-        ]);
-        return;
-      }
-
-      onFilesUploaded(acceptedFiles);
-    },
-    [onFilesUploaded, uploadedFiles, maxFiles]
-  );
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
-    accept: mappedAccept,
-    maxSize: maxSizeKB * 1024,
-    maxFiles,
-    onDropRejected: (rejectedFiles) => {
-      const messages = rejectedFiles.flatMap((rejected) =>
-        rejected.errors.map((err) => {
-          if (err.code === "file-too-large") {
-            return `File "${rejected.file.name}" is too large. Max size is ${toMB(maxSizeKB)}.`;
-          } else if (err.code === "file-invalid-type") {
-            return `File "${rejected.file.name}" is not an accepted file type.`;
-          } else {
-            return `File "${rejected.file.name}" was rejected: ${err.message}`;
-          }
-        })
-      );
-      setErrors(messages);
-    },
-  });
-
-  return (
-    <>
-      <VStack spacing={4} align="stretch">
-        <Box
-          {...getRootProps()}
-          border="2px dashed"
-          borderColor={border}
-          borderRadius="md"
-          p={10}
-          textAlign="center"
-          bg={bg}
-          cursor="pointer"
-          transition="all 0.2s"
-          _hover={{ bg: colors?.gray?.[100] }}
-          position={"relative"}
-        >
-          <input {...getInputProps()} />
-          <VStack spacing={2}>
-            <Icon as={Upload} boxSize={6} />
-            <Text fontWeight="medium">Drag and drop files here</Text>
-            <Text fontSize="sm" color={colors?.gray?.[500]}>
-              {acceptTypes.join(", ")} up to {toMB(maxSizeKB)}{" "}
-              {maxFiles ? `- ${maxFiles} file(s) max` : ""}
-            </Text>
-          </VStack>
-        </Box>
-
-        {errors.length > 0 && (
-          <Box>
-            {errors.map((err, idx) => (
-              <Text key={idx} fontSize="sm" color={colors?.red?.[600]}>
-                {err}
-              </Text>
-            ))}
-          </Box>
-        )}
-
-        {uploadedFiles.length > 0 && (
-          <Box>
-            <Box display={"flex"} alignItems={"center"} gap={2}>
-              <Text
-                fontFamily={"open-sans, sans-serif"}
-                fontWeight={600}
-                fontSize={14}
-                lineHeight="100%"
-                letterSpacing="4%"
-                textTransform="uppercase"
-                py={4}
-              >
-                Uploaded Files
-              </Text>
-            </Box>
-            <List spacing={2}>
-              {uploadedFiles.map((file, index) => (
-                <Box
-                  key={index}
-                  borderWidth="0.063rem"
-                  borderRadius="md"
-                  px={3}
-                  py={2}
-                  bg={colors?.white}
-                >
-                  <ListItem
-                    display="flex"
-                    justifyContent="space-between"
-                    alignItems="center"
-                  >
-                    <HStack spacing={3} flex="1">
-                      {/* Thumbnail if image */}
-                      {file.type.startsWith("image/") ? (
-                        <Box
-                          boxSize="2.5rem"
-                          cursor={"pointer"}
-                          position={"relative"}
-                          _hover={{
-                            ".hover-icon": {
-                              opacity: 1,
-                              bg: colors?.secondary?.opacity?.[16],
-                            },
-                          }}
-                          onClick={() => {
-                            setPreviewUrl(URL.createObjectURL(file));
-                            setPreviewTitle(file.name);
-                            onOpen();
-                          }}
-                        >
-                          <img
-                            src={URL.createObjectURL(file)}
-                            alt={file.name}
-                            style={{
-                              width: "100%",
-                              height: "100%",
-                              objectFit: "cover",
-                              borderRadius: "0.25rem",
-                            }}
-                          />
-                          <Box
-                            className="hover-icon"
-                            position="absolute"
-                            top={"0.5rem"}
-                            left={"0.5rem"}
-                            opacity={0}
-                          >
-                            <Eye color={colors?.background?.[100]} />
-                          </Box>
-                        </Box>
-                      ) : (
-                        <ListIcon
-                          as={FileText}
-                          color={colors?.blue?.[500]}
-                          boxSize={8}
-                        />
-                      )}
-
-                      <VStack align="start" spacing={0} flex="1">
-                        <Text fontSize="sm" noOfLines={1}>
-                          {file.name}
-                        </Text>
-                        <Text fontSize="xs" color={colors?.gray?.[500]}>
-                          {toMB(file.size / 1024)} &bull;{" "}
-                          {file.type || "Unknown type"}
-                        </Text>
-                      </VStack>
-                    </HStack>
-
-                    {onRemoveFile && (
-                      <CloseButton
-                        onClick={() => onRemoveFile(file)}
-                        size="sm"
-                        color={colors?.red?.[600]}
-                      />
-                    )}
-                  </ListItem>
-                  {progress?.[file.name] !== undefined && (
-                    <Progress
-                      value={progress?.[file.name]}
-                      size="xs"
-                      mt={1}
-                      hasStripe={progress?.[file.name] < 100}
-                      isAnimated={progress?.[file.name] < 100}
-                      colorScheme={
-                        progress?.[file.name] >= 100 ? "green" : "blue"
-                      }
-                      borderRadius={5}
-                    />
-                  )}
-                </Box>
-              ))}
-            </List>
-          </Box>
-        )}
-      </VStack>
-
-      <Modal
-        isOpen={isOpen}
-        onClose={() => {
-          onClose();
-          setPreviewUrl(null);
-          setPreviewTitle(null);
-        }}
-        size={"xl"}
-        isCentered={true}
-      >
-        <ModalHeader>
-          <Text
-            fontFamily={"open-sans, sans-serif"}
-            fontWeight={600}
-            fontSize={16}
-            textTransform="uppercase"
-          >
-            {previewTitle}
-          </Text>
-        </ModalHeader>
-        <ModalBody>
-          {previewUrl && (
-            <Image
-              src={previewUrl}
-              alt="Preview"
-              w="100%"
-              h="auto"
-              objectFit="contain"
-            />
-          )}
-        </ModalBody>
-      </Modal>
-    </>
-  );
-};
-
-export default FileUpload;

package/src/Components/FileUpload/FileUploadProps.tsx

@@ -1,34 +0,0 @@
-export type MimeExtension = 
-  | '.jpg'
-  | '.jpeg'
-  | '.png'
-  | '.gif'
-  | '.webp'
-  | '.svg'
-  | '.pdf'
-  | '.doc'
-  | '.docx'
-  | '.xls'
-  | '.xlsx'
-  | '.ppt'
-  | '.pptx'
-  | '.txt'
-  | '.mp4'
-  | '.mov'
-  | '.mp3'
-  | '.wav'
-  | '.zip'
-  | '.rar'
-  | '.7z';
-
-export type MimeMap = Record<MimeExtension, string>;
-
-export type FileUploaderProps = {
-  onFilesUploaded: (files: File[]) => void;
-  uploadedFiles: File[];
-  onRemoveFile?: (file: File) => void;
-  acceptTypes?: MimeExtension[]; // e.g., ['.jpg', '.png']
-  maxSizeKB?: number; // e.g., 5
-  maxFiles?: number;
-  progress?: Record<string, number>;
-};

package/src/Components/FileUpload/constants.ts

@@ -1,30 +0,0 @@
-import { MimeMap } from "./FileUploadProps";
-
-export const mimeMap: MimeMap = {
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.png': 'image/png',
-  '.gif': 'image/gif',
-  '.webp': 'image/webp',
-  '.svg': 'image/svg+xml',
-
-  '.pdf': 'application/pdf',
-  '.doc': 'application/msword',
-  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  '.xls': 'application/vnd.ms-excel',
-  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  '.ppt': 'application/vnd.ms-powerpoint',
-  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  '.txt': 'text/plain',
-
-  '.mp4': 'video/mp4',
-  '.mov': 'video/quicktime',
-  '.mp3': 'audio/mpeg',
-  '.wav': 'audio/wav',
-
-  '.zip': 'application/zip',
-  '.rar': 'application/vnd.rar',
-  '.7z': 'application/x-7z-compressed',
-};
-
-export const toMB = (size: number) => `${(size / 1024).toFixed(2)} MB`;