pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/Dropdown/DropDown.tsx

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

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

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

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

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

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

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

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

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